body{background-color:black;color:white;margin: 0; height: 100%; overflow: hidden;		font-family:arial,sans-serif;}
	
	#DeviceScreen{
		position:absolute;
		left: 0; 
		right: 0; 
		margin-left: auto; 
		margin-right: auto; 
		width: 1810px; /* Need a specific value to work */


	}
		
	#PlanView{
		position:absolute;
		bottom:-480px;right:310px;
		width:360px;height:360px;
		z-index:600;
		transition-duration: .5s;	
	}	
	#PlanViewClone{
		position:absolute;
		left:42px;top:4px;
		width:360px;height:360px;
		z-index:500;
		display:none;
	}
	 
	#sideview{
		position:absolute;
		bottom:30px;
		right:70px;
		height:300px;
		z-index:900;		
		mix-blend-mode:screen;
		transition-duration: .5s;	
	}
	#sitelink{text-decoration:none;color:#f5dca8;}
	#sitelink:hover{text-decoration:none;color:#ffffff;}
	
	#CKey1{transform: rotate(30deg);z-index:1;}
	#CKey2{transform: rotate(305deg);z-index:2;display:none;}
	#CKey3{transform: rotate(180deg);z-index:3;display:none;}
	#CKey4{transform: rotate(345deg);z-index:4;display:none;}
	#CKey5{transform: rotate(210deg);z-index:5;display:none;}
	#CKey6{transform: rotate(120deg);z-index:6;display:none;}
	#CKey7{transform: rotate(300deg);z-index:7;display:none;}
	
	#KeyClick{
		cursor:pointer;
		z-index:600;
		width:100%;height:100%;
	}
	
	.ColorKeyGIF{
		position:absolute;
		width:120%;
		height:120%;
		left:-10%;top:-10%;
		filter: hue-rotate(-30deg) saturate(0%) brightness(100%);
	}
	#ColorKeyWheel{
		position:absolute;
		width:88%;
		height:88%;
		left:6%;top:6%;
	}

	.primary{
		border-style:none;
		border-color:white;
		border-width:1px;
		width:900px;
		height:900px;
		display:inline-table;
	}
	
	#StageView{background-color:black;}
	#Controls{position:relative;left:-20px;}
	
	.scene-view{
		position:absolute;
		mix-blend-mode:screen;
		filter: hue-rotate(-30deg) saturate(0%) brightness(175%);
		height:900px;
		width:900px;
	}
	
	#Chan1,#Beam1,#CKey1{filter: hue-rotate(-30deg) saturate(80%) brightness(150%);}
	#Chan2,#Beam2,#CKey2{filter: hue-rotate(180deg) saturate(80%) brightness(100%);}
	#Chan3,#Beam3,#CKey3{filter: hue-rotate(90deg) saturate(80%) brightness(100%);}
	#Chan4,#Beam4,#CKey4{filter: hue-rotate(135deg) saturate(80%) brightness(100%);}
	#Chan5,#Beam5,#CKey5{filter: hue-rotate(-30deg) saturate(100%) brightness(100%);}
	#Chan6,#Beam6,#CKey6{filter: hue-rotate(180deg) saturate(100%) brightness(100%);}
	#Chan7,#Beam7,#CKey7{filter: hue-rotate(210deg) saturate(100%) brightness(100%);}
	
	#hues-image{
		position:absolute;
		mix-blend-mode:multiply;
		z-index:99;
	}
	.controlimage{
		cursor: pointer;
		filter: saturate(0%);
		margin-left:-3px;margin-right:-3px;
	}
	#channelnumbers{
		position:relative;top:50px;
		z-index:700;
		mix-blend-mode:screen;
	}
	td{text-align: center;}
	#gobopicker img{
		cursor: pointer;
	}
	#Dimmer{
		background-color:transparent;z-index:100;
		width:840px;
		margin-top:20px;
		position:relative;top:-5px;left:-2px;
	}
	#Saturation{
		background-color:transparent;z-index:100;
		width:840px;
		margin-top:10px;
		position:relative;top:-5px;left:-2px;
	}
	#ColorPicker{
		background-color:transparent;z-index:100;
		width:840px;
		margin-top:10px;
		position:relative;top:-5px;left:-2px;
	}
	.slider {
		-webkit-appearance: none;
		width: 320px;
		height: 28px;
		outline: none;
		-webkit-transition: .2s;
		transition: opacity .2s;
		margin-top:-15px;
		margin-bottom:-4px;
		margin-left:10px;
	}
	.slider::-webkit-slider-thumb {
		-webkit-appearance: none;
		appearance: none;
		width: 40px;
		height: 28px;
		border: 0;
		background: url('controls/pointer.png');
		cursor: pointer;
	}
	.slider::-moz-range-thumb {
		width: 40px;
		height: 28px;
		border: 0;
		background: url('controls/pointer.png');
		cursor: pointer;
	}
	#DimmerImage{filter: hue-rotate(-30deg) saturate(0%) brightness(175%);}
	
	#ColorPickerImage,#SaturationImage,#DimmerImage{
		height:36px !important;
		position:relative;top:-20px;		
	}
	#Sliders{
		position:absolute;
		bottom:30px;
	}
	
	#gobopicker{	
		display:none;
		background-color:black;
		width:900px;
		z-index:800;
		position:absolute;
		bottom:-40px;
		right:-15px;
	}
	
	#gobopicker img{
		border-style:solid;border-color:black;
		width:95px;		
	}
	#VectorOption{
		width:180px;
		position:absolute;
		right:240px;
		bottom:-150px;
		cursor:pointer;
		z-index:1100;		
		font-size:10pt;
	}
	#VectorOptionImg{
		position:relative;
		top:-37px;
	}
	
	#blackoutbutton{
		position:absolute;
		bottom:-130px;
		right:715px;
		cursor:pointer;
		z-index:1000;
		font-size:8pt;
	}
	#HideInterface{
		position:absolute;
		bottom:-130px;
		right:470px;
		cursor:pointer;
		z-index:1000;
		font-size:8pt;	
	}
	#blackoutbutton img,#HideInterface img{height:72px;}

	#camera{
		 cursor:pointer;
		 position:absolute;
		 right:100px;
		 bottom:-135px;		 
		 width:100px;
	}
	
	#GoboButton{
		 height:110px;
		 cursor:pointer;
		 position:absolute;
		 right:580px;
		 bottom:-155px;
		 z-index:601;
		 mix-blend-mode:screen;
	}
		
	.SetIcons{
		cursor:pointer;
		filter: brightness(50%);
		mix-blend-mode:screen;
		height:90px;
		position:relative;bottom:-20px;
	}
	
	#Setting1Icon{filter: brightness(100%);margin-right:-5px;}
	#Setting2icon{}
	#Setting3icon{}
	#Setting4icon{}
	#Setting5con{}
	
	#SetIconGroup{
	 position:absolute;
	 bottom:320px;
	 right:480px;
	 margin-right:-40px;
	}
	
	.skin{
		height:80px;
		cursor:pointer;
		margin-left:5px;
	}
	 #skingroup{position:absolute; bottom:310px;right:70px;width:300px;}
	 
	 #hazebutton{
		position:absolute; 
		bottom:-130px;
		 right:400px;
		 bottom:-120px;
		height:80px;width:80px;
		cursor:pointer;
		z-index:1000;
	 }
	 #floor1button{
		position:absolute; 
		bottom:-265px;
		right:700px;
		width:210px;
		height:100px;width:100px;
		cursor:pointer;
		z-index:1000;
		mix-blend-mode:screen;
	 }
	 #floor2button{
		position:absolute; 
		bottom:-360px;
		right:700px;
		width:210px;
		height:100px;width:100px;
		cursor:pointer;
		filter: brightness(50%);
		z-index:1000;
		mix-blend-mode:screen;
	 }
	 #floor3button{
		position:absolute; 
		bottom:-455px;
		right:700px;
		width:210px;
		height:100px;width:100px;
		cursor:pointer;
		filter: brightness(50%);
		z-index:1000;
		mix-blend-mode:screen;
	 }
	 #arrowup{
		 position:absolute;
		 left:700px;
		 top:152px;
		 cursor:pointer;
		 z-index:300;	 }
	 
	 #arrowdown{
		 position:absolute;
		 left:700px;
		 top:298px;
		 cursor:pointer;
		 z-index:300;
	 }
	 #trimgauge{
		position:absolute;
		 left:731px;
		 top:225px;
	 }
	#degrees{
		position:absolute;
		left:765px;
		top:250px;
		font-size:14pt;
} 
	 
	 #arrowcc{
	 	position:absolute;
		 top:640px;
		 left:680px;
		 cursor:pointer;
		 z-index:300;
	 }
	 #arrowcw{
		 position:absolute;
		 top:640px;
		 left:30px;
		 cursor:pointer;
		 z-index:300;
	 }

}


/* Firefox old*/
@-moz-keyframes blink {
    0% {opacity:1;}
    50% {opacity:.3;}
    100% {opacity:1;}
} 
@-webkit-keyframes blink {
    0% {opacity:1;}
    50% {opacity:.3;}
    100% {opacity:1;}
}
/* IE */
@-ms-keyframes blink {
    0% {opacity:1;}
    50% {opacity:.3;}
    100% {opacity:1;}
} 
/* Opera and prob css3 final iteration */
@keyframes blink {
    0% {opacity:1}
    50% {opacity:.3;}
    100% {opacity:1;}f
}
.beam{height:900px;width:900px;opacity:0;}

#Beam1{
	opacity:1;
}

#helptips{
	height:80px;
	width:250px;
	position:absolute;
	color:white;
	bottom:-270px;
	right:30px;
	z-index:1000;
	text-align:center;
	font-size:18pt;
	font-family: arial,sans-serif;
	padding-right:40px;
	padding-top:40px;
	cursor:pointer;	
}

#CloseTips{
	position:absolute;
	height:42px;
	top:16px;
	right:0px;
	cursor:pointer;
	visibility:hidden;
}
#helptips:hover #CloseTips{visibility:visible;}

#loader{
	position:absolute;
	left:200px;
	top:150px;
	mix-blend-mode:screen;
	z-index:1000;
	opacity:0.7;
	display:none;
}

#logo{
	position:absolute;
	right:70px;top:-290px;
	cursor:pointer;
}

div,img,span,a{
		  -webkit-touch-callout: none; 
    -webkit-user-select: none;
     -khtml-user-select: none; 
       -moz-user-select: none; 
        -ms-user-select: none; 
            user-select: none; 
	
}
#set-preview{
	opacity:0;
	transition-duration: .5s;	
}