/*GENERAL CSS*/
body {
	width:100%;
	height:100%;
   	margin: 0;
   	padding: 0;
	font-size:12px;
	position:relative;
	font-size:12px;
	font-family:'verdana';
	color:white;
}
html {
	width:100%;
	height:100%;
   	margin: 0;
   	padding: 0;
}
h1{font-size:18px;color:white;}
h2{font-size:16px;color:white;}
h3{font-size:14px;color:white;}
h4{font-size:12px;color:white;}
.websocketsOnly{display:none;}
.NOwebsocketsOnly{display:none;}
.smallButton{font-size:9px;}
/*INIT: MAIN ZONES OF INTERFACE*/
#topRule{
	position:absolute;
	z-index:30;
	top:0px;left:0px;right:0px;
	width:100%;
	height:78px;
	background-image:url(design/1/h1.png);
}
#topRule2{
	position:absolute;
	z-index:20;
	top:69px;left:0px;right:0px;
	width:100%;
	height:126px;
	background-image:url(design/1/h2.png);
}
#logo{
	position:absolute;
	top:10px;
	left:20px;
}
#bottomRule{
	position:absolute;
	z-index:20;
	bottom:0px;left:0px;right:0px;
	width:100%;
	height:162px;
	background-image:url(design/1/bottom1.png);
}
.rul1{font-size:10px;color:#dddddd;}
.rul2{font-size:10px;color:#bbbbbb;}
.rul3{font-size:10px;color:#999999;}
#editor{
	position:absolute;
	background-color:#555555;
	bottom:150px;left:0px;right:0px;top:183px;
	overflow:hidden;
}

#editorbuttons{
	top:20px;
	left:20px;
	position:absolute;
	width:200px; 
}
 
#editorzoomable{
  margin: auto;
  background-image:url(design/1/backgrid2.png);  
  background-color:#444444;
  border:1px solid silver;
  width:10000px;
  height:10000px;
  position: absolute;
}

/*TOOLS*/

.toolscell{
 padding-right:5px;
}
.numInd{width:20px;height:10px;background-color:#555555;border:1px solid #333333;font-size:10px;color:silver;}
.numInf{width:20px;height:10px;background-color:#333333;border:1px solid #555555;font-size:10px;color:silver;}
.toolscell h4{color:#dddddd;margin-bottom:3px;margin-top:2px;}
.toolsBox{}
.toolsTable{font-size:10px;color:silver;}
.toolsTable tr{height:22px;}
.toolsTable input[type=radio]{padding:0 0 0 0;margin-right:2px;margin-bottom:0px;margin-top:0px;margin-left:0px;}
.toolsTable input[type=checkbox]{padding:0 0 0 0;margin-right:2px;margin-bottom:0px;margin-top:0px;margin-left:0px;}
.toolsTable input[type=button]{font-size:10px;padding:2 2 2 2;margin-right:0px;margin-bottom:0px;margin-top:0px;margin-left:0px;}
.toolsTable select{font-size:10px;padding:2 2 2 2;margin-right:0px;margin-bottom:0px;margin-top:0px;margin-left:0px;}
.toolsTitleCell{padding-right:10px;}
.tools3rdCell{padding-left:12px;}
.toolsLabel2{color:#888888;}

.shadow{	-webkit-box-shadow: 0 0 14px 0 #000000;
	-moz-box-shadow: 0 0 14px 0 #000000;
	box-shadow: 0 0 14px 0 #000000;}
	
.shadowS{	-webkit-box-shadow: 0 0 7px 0 #000000;
	-moz-box-shadow: 0 0 7px 0 #000000;
	box-shadow: 0 0 7px 0 #000000;}	

/*COMBOBOX HTML CSS*/
.sel-box{
    position:relative;
}
.sel-box-select{
    display:block;
    height:25px;
    border:1px solid #999;
    padding:5px;
}
.toc-odd{
	list-style:none;
	list-style-type: none;
	list-style-position:inside;
   	position:absolute;
   	top:37px;
   	background:#f1f1f1;
	border:1px solid silver;
    display:none;
	padding: 5px;
	height:200px;
	overflow:auto;
	z-index:10;
}
.toc-odd li{
    padding:5px;
	margin:0px;
    border-bottom:1px solid #999;
}
#InitialContainer{
	font-size:18px;
	color:#dddddd;
	font-weight:bold;
}
#WaitContainer{
	font-size:18px;
	color:#dddddd;
	font-weight:bold;
}
.getStartedImg{
	border:1px solid silver;
	cursor:pointer;
}
#imageUploadStart{
	height:100%;width:100%;
	font-size:20px;
	background-color:silver;
	color:#222222;
	cursor:pointer;

}
#imageUploadStartCLASSIC{
	height:100%;width:100%;
	font-size:20px;
	background-color:silver;
	color:#222222;
	cursor:pointer;

}
.disableClicks{
	pointer-events:none;
}
#ImageContainer{
	position:relative;
	height:400px;
	width:800px;
	background-color:white;
	-webkit-box-shadow: 0 0 14px 0 #000000;
	-moz-box-shadow: 0 0 14px 0 #000000;
	box-shadow: 0 0 14px 0 #000000;
},
.shadowed{
	-webkit-box-shadow: 0 0 14px 0 #000000;
	-moz-box-shadow: 0 0 14px 0 #000000;
	box-shadow: 0 0 14px 0 #000000;
}
#QRcodeInfo{
	position:absolute;
	font-size:10px;
	height:100%;
	width:100%;
	top:0px;
	left:0px;
	cursor:move;
	overflow:hidden;

}
#QRcodeCanvas{
	position:absolute;
	height:200px;
	width:200px;
	top:0px;
	left:0px;
	cursor:move;

}
#QRcodeCanvasImage{
	position:relative;
	height:100%;
	width:100%;
}
#TrappedLoader{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	display:none;
}
#TrappedLoaderImg{
	margin-top:25%;
	width:50%;
	height:50%;
}

/*INSIDE EDITOR QRCODE EDITION*/
#workzone{position:absolute;width:100%;height:100%;background-image:url(shadows/backgrid1.png);z-index:-1;}
#qrcodeMask{width:100%;height:100%;position:relative;border:1px solid green;}
.Trapped{border:1px solid red;width:400px;Height:400px;background-color:gray;cursor:move;position:relative;-webkit-box-shadow: 0 0 14px 0 #000000;
-moz-box-shadow: 0 0 14px 0 #000000;
box-shadow: 0 0 14px 0 #000000;}

#img{display:block;margin-left:auto;margin-right:auto;}
#Background{width:400px;height:400px;z-index:-1;position:absolute;background-color:white;}
#Generated{z-index:-1;border:1px solid aaaaaa;position:absolute;-webkit-box-shadow: 0 2px 20px 0 #000000;
-moz-box-shadow: 0 2px 20px 0 #000000;
box-shadow: 0 2px 20px 0 #000000}
#GeneratedCell{}

.bottomTable h4{color:#666666;margin-bottom:0px;margin-top:10px;font-weight:normal;font-size:11px;}
.bottomTable td{padding-left:10px;width:80px;}
.controlCanvas{border:1px solid #888888;width:70px;height:70px;color:#cccccc;text-align:center;}
.canvasImg{width:70px;height:70px;}
.centered {  
	background-color:silver;
  position:fixed;
  z-index: 100;  
  top:50%;  
  left:50%;  
  margin:-185px 0 0 -460px;  
  width:920px;  
  height:370px;  
  z-index:1002;
}  
#modalDiv{background-color:black;height:100%;width:100%;z-index:1001;opacity: 0.5;position: fixed; left: 0px; top: 0px; z-index: 1001;}