@charset "utf-8";
/* CSS Document */
/*.containerWidth_big{width:520px}
.containerWidth_small{width:420px}*/

#inspector-container{
	position:absolute; right:0;
	/*margin-top:2px;*/
	
	width:480px;
	
	border-left:1px solid #888;
	/*border-right:solid 1px #888;	*/
	z-index:4;	
	font-size:small;
	font-family:Arial, Helvetica, sans-serif;
	/*box-shadow: -3px 0 5px #ccc;
	-webkit-touch-callout:none;
	box-sizing:border-box;*/
	overflow-y:auto;	
	overflow-x:hidden;	
	height:100%;
}
#hack{position:absolute;z-index:2; bottom:31px; right:0; width:480px; height:30px;border-left:1px solid #888;}


#inspector-container-inner{
	min-height:510px; 
}

/* is een horizontale div waarin 1 afdeling
.main-div{	
	border-bottom:solid 1px #ccc;
}*/






.main-div_big{padding:10px 50px 10px 50px;border-bottom:solid 1px #eee; }
.main-div_medium{0px 25px 10px 25px;border-bottom:solid 1px #eee;}
.main-div{padding:10px 30px 10px 30px; border-bottom:solid 1px #eee;}


#inspector_disabled{
	background: url(../images/disabled.png) repeat;  
	width:480px;
	position:absolute; 	
	z-index:4;
	height:100%; 
	/*min-height:529px;*/
	display:none;
}



.ui-slider-horizontal .ui-slider-handle {
    left: 0;
    margin-top: -8px;
    margin-left: -22px;
	height:34px;
	width:44px;
	background:url(../images/fader-handle3.png) no-repeat;	
	/*border:solid 1px #444;*/
	box-shadow:1px 3px 3px #666;
	-webkit-touch-callout:none;
	 cursor:pointer;
}

.slider_smaller{	
	height:20px;
	width:30px;	
	-webkit-touch-callout:none;
}

#slider-horizontal, .ui-slider {  
    height: 15px;    
	background:#eee;
	box-shadow: inset 5px 5px 5px #aaa;
	border:solid 1px #444;
	-webkit-touch-callout:none;
}

.middle-size-slider{	
	width:235px;	
}

.checkbox-highlite{color:#fff;}

.close_but {
	background-color:#fff;
	padding:2px;
	border:solid 1px #aaa;
	border-radius:4px;
	width:30px;
	height:30px;
	box-shadow:1px 1px 2px #aaa;
}


.reset-but{
	box-shadow:3px 3px 3px #aaa;
}



.slider{padding-top:20px; padding-bottom:20px;}

.lock-inactive{
	position:relative;
	width:38px; 
	height:38px; 
	float:right; 
	margin-right:30px;
	margin-top:5px;
	background:url(../images/slot.png) no-repeat center; 		
	border-radius: 19px/19px;	
	box-shadow: 
	inset 0 3px 2px rgba(255,255,255,.22), 
    inset 0 -3px 2px rgba(0,0,0,.17), 
    inset 0 20px 10px rgba(255,255,255,.12), 
    0 0 4px 1px rgba(0,0,0,.1), 
    0 3px 2px rgba(0,0,0,.2);
	
	cursor:pointer;
}
.lock-active{
	position:absolute; 
	top:170px;
	width:86px; 
	height:86px;
	margin-left: 167px;
	/*margin-left:300px;
	margin-top:-63px;
	/*right:30px; 
	margin-top:-60px;	*/	
	background:url(../images/slot-active.png) no-repeat center; 	
	border-radius: 43px/43px; 
	box-shadow: 
	inset 0 3px 2px rgba(255,255,255,.22), 
    inset 0 -3px 2px rgba(0,0,0,.4), 
    inset 0 20px 10px rgba(255,255,255,.12), 
    0 0 4px 1px rgba(0,0,0,.3), 
    0 3px 2px rgba(0,0,0,.5);
	z-index:15; 
	
	cursor:pointer;
}
.turn_but{
	display:inline-block;
	width:31px;
	height:31px;
	background:url(../images/slot-active.png) no-repeat center;
	border-radius: 31px/31px; 
	box-shadow: 
	inset 0 3px 2px rgba(255,255,255,.22), 
    inset 0 -3px 2px rgba(0,0,0,.17), 
    inset 0 20px 10px rgba(255,255,255,.12), 
    0 0 4px 1px rgba(0,0,0,.1), 
    0 3px 2px rgba(0,0,0,.2);
	
}
.turn_but_inactive{
	opacity:0.4;
}

#turn_table td{border:solid 1px #ccc; text-align:center; padding:0 4px; background-color:#ddd; border-radius:3px; cursor:pointer;}
#turn_table td:hover{background-color:#fff;}

#shadow-params{height:195px;}
#outline-params{height:195px;}

.advanced_panel{		
	/*width:480px;*/
	
	position:absolute;
	right:0;
	
	border-bottom:solid 4px #444; 
	border-top:solid 4px #444; 
	border-left:solid 1px #444; 
	padding:10px 30px 10px 30px; box-sizing:border-box;
	font-size:small; 
	z-index:8; 
	 -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    backface-visibility: hidden;
	display:none;
}
/*.advanced_panel_big{width:419px;padding:10px 50px 10px 50px; }
.advanced_panel_small{width:400px;padding:10px ; }*/

.u-button {
	-webkit-appearance:none;
	display: inline-block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em; 
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
	box-shadow: 0 1px 2px rgba(0,0,0,.2);
}

.button-label{
	float:left;	
	font-family:Tahoma, Geneva, sans-serif;
	text-transform:uppercase;	
	font-weight:bold;
}
.button-label-inactive{
	color:#ccc;
}


input[type='checkbox'], input[type='radio']{		
    border-radius:4px;
	appearance:button;
    -webkit-appearance:button;	 
  	-moz-appearance: button; 
    border: solid 1px #888;
    box-shadow:3px 3px 3px #aaa;    
    white-space: nowrap;
    overflow:hidden;
    width:115px;
    height:40px;

}


input[type="checkbox"] + span, input[type="radio"] + span{	
	cursor:default;
	
}

input[type='checkbox']:checked + span, input[type='radio']:checked + span{		
	color:#fff;		

}

input[type='checkbox']:checked, input[type='radio']:checked{
	box-shadow:1px 1px 3px #aaa; 	
}


input[type='checkbox'], input[type='radio']{	
	
}
@-moz-document url-prefix() {
  #gradient-type-radio{width:50px; height:50px; margin-right:40px;}
}
.advanced-but{
	width:115px; 
	height:35px; 
	margin-top:-10px; 
	-webkit-border-radius:4px; 
	border-radius:4px;
	appearance:button;
    -webkit-appearance:button;	 
  	-moz-appearance: button;
	border:solid 1px #aaa;
	/*box-shadow:2px 2px 2px #aaa;*/
	
	
}
.advanced_active{
	color:#fff;
	
}
/*.advanced_ready{
	width:115px; 
	height:35px; 
	margin-top:-10px; 
	-webkit-border-radius:4px; 
	border-radius:4px;
	appearance:button;
    -webkit-appearance:button;	 
  	-moz-appearance: button;
	border:solid 1px #aaa;
	
	background:linear-gradient(#fff,#ccc);
}*/
/*.advanced-but:active{
	background-color:#f00;
}*/

#inspector_upload{	
	 border-radius:4px;
    /*-webkit-appearance:button;*/
    border: solid 1px #888;
    box-shadow:3px 3px 3px #aaa;    
    white-space: nowrap;
    overflow:hidden;
    /*width:115px;*/
    padding:10px 15px;	
	font-weight:bold; 
	cursor:pointer;
	
}
#webcam_holder{position:fixed; z-index:15; top:20px; left:20px; width:490px; height:425px;padding:5px; background-color:#444; border:solid 1px #666; border-radius:8px; box-shadow:0 0 15px #000; text-align:center;  display:none;}
#webcam_closer{float:right; margin-bottom:5px; cursor:pointer;}

#webcam_opener{	
	
	margin-left:20px;
	margin-top:-5px;
	cursor:pointer;
	border-radius:4px;
   
    border: solid 1px #888;
    box-shadow:3px 3px 3px #aaa;    
    white-space: nowrap;
    overflow:hidden;
   
    padding:10px 15px;
	
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%); 
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(229,229,229,1))); 
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
	background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%);
	background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); 
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%); 
	
	
	font-weight:bold;
	
}
#upload-form{padding:0 20px; margin-top:20px;}

#center_txt{display:inline-block;cursor:pointer; width:24px; height:20px;}
#center_txt_vert{display:inline-block;cursor:pointer; width:24px; height:20px; transform:rotate(90deg)}
#center_txt img, #center_txt_vert img {border:solid 1px #aaa;}
#center_txt img:hover, #center_txt_vert img:hover{border: solid 1px #666;}


/* ----------- iPad mini ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	#webcam_opener{display:none;}
	
	
}


/* ----------- iPad 1 and 2 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {
	
	#webcam_opener{display:none;}

  }

/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {
	
	#webcam_opener{display:none;}

}

/* ----------- Galaxy Tab 10.1 ----------- */

/* Portrait and Landscape */
@media 
  (min-device-width: 800px) 
  and (max-device-width: 1280px) {
	#webcam_opener{display:none;}
	
}