@charset "utf-8";
/* CSS Document */

html,body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	background-color:#5178f7;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;	
	
	overflow:hidden;
}

* { box-sizing:border-box !important; }
.table { display:table; } .row { display:table-row; } .cell { display:table-cell; }
.textCenter { text-align:center; }
.vMiddle { vertical-align:middle; }


#windowBody {
	margin:0px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#cccccc;
	overflow:hidden;
}


#borderbox {
	margin:4px;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}

#menubar {
	position:absolute;
	left:0px;
	right:0px;
	height:30px;
	border-bottom:double 3px #333;
	border-radius: 6px 6px 0px 0px;
}

.menuBarImg{
	float:left;
	width:21px;
	height:20px;
	margin-right:5px;
}


#toolbar {
	overflow:hidden;
	position:absolute;
	top:32px;
	left:0px;
	right:0px;
	height:auto;
	padding:2px;
	padding-bottom:4px;
	margin:0px;
	background-color:#deebf6;
	background: linear-gradient(180deg, #dae8f6, #BAD5EF);
	border:none;
	border-radius: 3px 3px 0px 0px;
}

.toolbarBlock{
	display:inline-block;
	padding:0px;
	margin:1px;
	margin-right:2px;
	border:solid 1px #999;
	vertical-align:top;
	
	background-color: #84abe2;
	background: linear-gradient(180deg, #ddecfe, #84abe2);
	
	border-radius: 2px;
	box-shadow: 1px 1px 1px #606060;
	
}
.toolbarBtn{
	margin:0px;
	padding:2px 3px 2px;
	float:left;
	cursor:pointer;
	border:1px solid rgba(0,0,0,0);
	vertical-align:top;
	min-height: 28px;
}
.toolbarBtn:hover{
	border:1px solid #999999;

	background-color: #ffd091;
	background: linear-gradient(180deg, #fff4cc, #ffd091);
	
	border-radius: 2px;
}
.toolbarBtn:active{
	border:solid #999999 1px;

	background-color: #fff4cc;
	background: linear-gradient(180deg, #ffd091, #fff4cc);
}
.toolbarBtn_On{
	margin:0px;
	border:solid #999999 1px;
	border-radius: 2px;
	background-color: #fff4cc;
}
.toolbarSep{
	float:left;
	width:1px;
	height:18px;
	vertical-align:top;
	margin-top:4px;
	background: linear-gradient(180deg, #C4C4C4, #636363);
	box-shadow: 1px 1px 1px #ffffff;
}
.toolbarImg{
	width:21px;
	height:20px;
	vertical-align:middle;
	margin-top: 1px;
}
.toolbarImg_big{
	width:42px;
	height:40px;
	vertical-align:middle;
}
.toolbarDropbox{
	height:20px;
	font-size: 12px;
	background-Color: #5e7aff;
	color: #ffffff;  
	outline: 0px;
	border: none;
	border-top-left-radius:3px;
	margin-top: 1px;
}



#main-container {
	background:#fff; 
	position:absolute; 
	top:102px;
	left:0px;
	right:0px; 
	bottom:29px;	
}



#modeBtn-container {
	position:absolute;
	left:0px;
	top:-1px;
	bottom:-1px;
	margin:0px;
}
#editorModeBtn {
	border-radius:0px !important;
}
.tabModeBtn {
	width:85px !important;
	height:34px !important;
	box-shadow:none !important;
	border-radius:0px !important;
	cursor:pointer !important;
}


.tabCloseImg {
	width:16px;
	margin:0px;
	padding:0px;
	margin-left:3px;
	border-radius:4px;
	vertical-align:middle;
}
.tabCloseImg:hover {
	background-color:#D0D0D0;
}












#rightSplitPanel {
	width:100%;
	width:calc(100% + 1px);
	height:100%;
	background-color:#E0E0E0;
	border-spacing:0px;
}


#fileTreeContent {
	position:relative;	
}
#fileTreeHeader {
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:19px;
	text-align:right;
	padding-right:6px;
	background-color:#B9B9B9;
}
#fileTreeRefreshBtn {
	height:19px;
	font-size:10px;
}
#fileTreeContainer {
	position:absolute;
	top:19px;
	left:0;
	right:0;
	bottom:0;
}






.attr_menu {
	float:right;
}

#attrContent {	
	background:#E0E0E0;
}


.attrList_tbl {
	display:table;
	width:100%;
	background-color:#FFFFFF;
	border-bottom:1px solid #0099CC;
	border-spacing: 0px;
}
.attrList_row {
	display:table-row;
}
.attrList_bottom {
	display:table-cell;
	height:2px;
	background-color:#0099CC;
}
.attrCssBtn_cell {
	display:table-cell;
	padding:0px;
	text-transform:capitalize;
	border-bottom:1px solid #999999;
	cursor:default;
	background-color: #fff4cc;
	text-align:center;
	cursor:pointer;
}
.attrCssBtn_cell:hover {
	background: linear-gradient(180deg, #fff4cc, #ffd091);
}
.attrName_cell {
	display:table-cell;
	padding:0px;
	text-transform:capitalize;
	border-bottom:1px solid #999999;
	cursor:default;
}
.attrTagname_cell {
	display:table-cell;
	padding:0px;
	padding-left:2px;
	text-transform:capitalize;
	background-color:#fff;
	border-bottom:1px solid #999999;
	cursor:pointer;
}
.attrTagname_cell:hover {
	background:rgba(0, 102, 255, 0.6);
}

.attrInput_Name {
	margin:0px;
	padding:2px;
	height:18px;
	width:100%;
	border:0px;
	background-color:#FFF;
	text-transform:capitalize;	
}
.attrInput_Name:focus {
	background-color:#FF3;	
}

.attrValue_cell {
	display:table-cell;
	padding:0px;
	background-color:#CCFFCC;
	border-bottom:1px solid #999999;
}
.attrInput_Value {
	margin:0px;
	padding:2px;
	height:18px;
	width:100%;
	border:0px;
	background-color:#CCFFCC;
}
.attrInput_Value:focus {
	background-color:#FF3;
}

.attrClassInput_Value {
	margin:0px;
	padding:2px;
	height:18px;
	width:100%;
	border:0px;
	background-color:#FFE09E;
}
.attrClassInput_Value:focus {
	background-color:#FF3;
}

.attrInput_StyleName {
	margin:0px;
	padding:2px;
	height:18px;
	width:100%;
	border:0px;
	background-color:#FFF;
	text-transform:capitalize;
	outline: 0;
}
.attrInput_StyleName:focus {
	background-color:#FF3;	
}
.attrStyleValue_cell {
	display:table-cell;
	padding:0px;
	background-color:#CEE8FF;
	border-bottom:1px solid #999999;
}
.attrInput_StyleValue {
	margin:0px;
	padding:2px;
	height:18px;
	width:100%;
	border:0px;
	background-color:#CEE8FF;
	outline: 0;
}
.attrInput_StyleValue:focus {
	background-color:#FF3;
}






.demoModeWarning, .demoModeWarning:visited {
	text-decoration:none;
	margin:0px;
	color:#fff;
	font-weight:bold;
	font-size:14px;
}
.demoModeWarning:hover {
	cursor:pointer;
	text-decoration:underline;
}






#footer {
	background:#ADADAD;
	position:absolute;
	bottom:0px;
	left:0px;
	right:0px;
	height:29px;
	border-top:double 1px #333;
	border-radius: 0px 0px 4px 4px;
	text-align:center;
}


.footerBtn {
	display:inline-block;
	float:left;
	background-color:#ccc;
	width:150px;
	height:27px;
	line-height:27px;
	vertical-align:middle;
	text-align:center;
	font-size:14px;
	text-decoration:none;
	color:#000000;
	margin:0px;
	border:1px solid #5F5F5F;
	background: linear-gradient(180deg, #c8c8c8, #b0b0b0);
	cursor:pointer;	
}
.footerBtn:hover {
	background: linear-gradient(0deg, #c8c8c8, #b0b0b0);
}
.footerBtn:active {
	background: linear-gradient(0deg, #004DF4, #0080FF);
}
.footerBtnImg{
	width:21px;
	height:20px;
	margin-right:3px;
	vertical-align:middle;
	margin-bottom:1px;
}

.copyright {
	 font-size: 12px;
	 color: #fff;
	 font-weight: bold;
	 font-variant: small-caps;
	 text-align:center;
	 text-shadow: #000000 1px 1px 1px;
	 margin:0px; height:29px;
	 line-height:29px;
	 vertical-align:middle;
}







#noticeArrow {
	background:url("../images/noticearrow_down.png") no-repeat center;
	height: 150px;
	width: 110px;
	position:fixed;
	left: 40px;
	bottom: 40px;
	z-index: 2000;
}

#loading {
	background:url("../images/loader-big.gif") no-repeat center;
	background-position:top left;
	background-size:124px 124px;
	height: 124px; width: 258px;
	position: fixed; left: 50%; top: 50%; z-index: 1000;
	margin: -62px 0 0 -129px;
}
.dialogWinLoading {
	background:url("../images/loader-big.gif")  no-repeat center;
	background-size:contain;
	height: 100px; width: 100px;
	position: absolute; left: 50%; top: 50%; z-index: 1001;
	margin: -38px 0 0 -50px;
}



.dialogContent > iframe {
	margin:0px;
	border:0px;
	width:100%;
	height:100%;
	overflow:hidden;
}






#ctxMenu {
	box-sizing:content-box !important;
	position:absolute;
	z-index:1000;
	display:inline-table;
	border-top:1px solid #999;
	border-right:solid 1px #999;
	border-bottom:solid 1px #999;
	border-left:solid 1px #999;
	background: linear-gradient(0deg, #ddecfe, #84abe2);
	border-bottom-left-radius: 2px;
	border-bottom-right-radius: 2px;
	border-top-right-radius: 2px;
	padding:0px;
	margin:0px;
	box-shadow: 3px 4px 4px #585858;
}
.ctxMenuItem {
	cursor:pointer;
	height:24px;
	line-height:24px;
	padding-right:3px;
	margin:0px;
	border:1px solid rgba(0,0,0,0);
	border-radius: 2px;
	white-space:nowrap;
	font-size:12px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
.ctxMenuItem:hover {
	border:solid #999999 1px;
	background: linear-gradient(180deg, #fff4cc, #ffd091);
}
.ctxMenuImg {
	width:21px;
	height:20px;
	margin-right:1px;
	margin-bottom:1px;
	vertical-align:middle;
}
.ctxMenuImgBorder {
	position:absolute;
	width:27px;
	top:-1px;
	left:-1px;
	bottom:0px;
	background-color:#fff4cc;
	border-right:1px solid #CCCCCC;
	border-left:1px solid #999;
	border-bottom-left-radius: 2px;
	z-index:-1;
	
}
.ctxMenuSpacer {
	width:80%;
	height:1px;
	padding:0px;
	margin-left:auto;
	margin-right:auto;
	background:#999999;
}







/* For Message Box */
.ui-dialog {
	z-index: 1000 !important;
	border: 2px solid #000000 !important;
	border-radius: 4px 4px 4px 4px;
	background-color:#ccc;
	box-shadow: #585858 3px 3px 4px 1px;
}
.ui-dialog-titlebar {
	cursor:move;
	padding:5px;
	color:#FFFFFF;
	font-size:14px;
	
	background-color:#006;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#006), to(#686868));
	background: -webkit-linear-gradient(top, #686868, #006);
	background: -moz-linear-gradient(top, #686868, #006);
	background: -ms-linear-gradient(top, #686868, #006);
	background: -o-linear-gradient(top, #686868, #006);
}

 .ui-dialog-titlebar-close {
  display: none;
}
.ui-dialog-content {
	background-color:#EBE9ED;
	font-size:14px;
	padding:5px;
	vertical-align:middle;
	text-align:center;
}
.ui-dialog-buttonpane {
	text-align:right;
}
.ui-dialog-button {
	margin:2px;
	height:22px;
	font-size:12px;
	cursor:pointer;
}







@media only screen and (max-width:930px) {

.footerBtnImg{ display:none; }
.footerBtn { width:120px; }

}