/* Fonts */
@font-face{ font-family:"Aller Light"; src:url("../_fonts/Aller_Lt.ttf") format("truetype"); }
@font-face{ font-family:"Aller Regular"; src:url("../_fonts/Aller_Rg.ttf") format("truetype"); }
@font-face{ font-family:"Aller Bold"; src:url("../_fonts/Aller_Bd.ttf") format("truetype"); }
@font-face{ font-family:"Aller Display"; src:url("../_fonts/AllerDisplay.ttf") format("truetype"); }

/* Global Styles */
body { margin: 0; padding: 0; font-size: 14px; line-height: 1.2em; background: #eee; color: #444; font-family: "Aller Regular",  serif; }
	body.dashboard { background: #111; }

b, 
strong, 
.bold, 
span.recording,
span.caption,
ul.presets li.selected { font-weight: 300; font-family: 'Aller Bold'; }

a img { border: none; }
a { text-decoration: none; }

/* p, ul, ol { font-size: 0.9em; } */

.alert { color: red; border: 1px solid red; padding: 6px 12px; display: inline-block; border-radius: 5px; }

#navZone { /* padding-bottom: 70px; height: 107px; margin-bottom: -70px; position: relative; z-index: 99999; */ }

.navIcon { display: none; }

.wrapper { width: 100%; clear: both; }

.wrapper.login { text-align: center; }
	.wrapper.login div.login { max-width: 60%; margin: 50px auto; text-align: left; }
		.wrapper.login div.login label { display: inline-block; width: 25%;  }
		.wrapper.login div.login input[type=text],
		.wrapper.login div.login input[type=password] { width: 60%  }
		.wrapper.login div.login input[type=submit] { margin-left: 25%;  }

.wrapper.loop { text-align: center; position: relative; }
	.wrapper.loop iframe { margin: 0 auto; width: 1280px; height: 720px; position: absolute; top: 0; left: 0; }

.wrapper.topnav { padding-top: 20px; padding-bottom: 20px; border-bottom: 5px solid #c0c0c0; padding-left: 2%; padding-right: 2%; width: 96%; height: 56px; background: #fff; position: relative; z-index: 9900; }
	.wrapper.topnav p { text-align: right; }
		.wrapper.topnav p img { height: 2.25em; width: auto; float: left; margin-right: 2.25em; }
			.wrapper.topnav p img.ce { height: 2.0em; display:none;}
				.wrapper.topnav img.client-logo {position: absolute; top: 50%; transform: translateY(-50%); max-width: 8em; max-height: 80%;}
		
ul.nav { list-style: none; margin: 0; padding: 0; text-align: right; text-transform: uppercase; }
	ul.nav li { display: inline; margin: 0; padding: 0; }		

.wrapper.sub-tabs { background: #c0c0c0; padding-top: 2px; }
	.wrapper.sub-tabs p { display: block; float: left; padding: 14px 40px 14px 2%; margin: 0; font-size: 1.1em; line-height: 1.0em; color: #fff; font-family:"Aller Light"; text-transform: uppercase; }
	.wrapper.sub-tabs ul { list-style: none; margin: 0 30px; padding: 0; }
		.wrapper.sub-tabs ul li { margin: 0; padding: 0; display: inline-block; }
			.wrapper.sub-tabs ul li a { display: block; color: #555; padding: 14px 20px; margin: 0 2px; background: #dadada; border-radius: 8px 8px 0 0; }
				.wrapper.sub-tabs ul li a.active { background: #eee; color: #333; }
				.wrapper.sub-tabs ul li a:hover { color: #222; }


.wrapper.previews { width: 100%; border-top: 1px solid #111; clear: both; }		
	.wrapper.previews div.camera-preview { float: left; width: 33.22%; height: 18.68vw; cursor: pointer; border-right: 1px solid #111; background: transparent url(../_images/client-logo-background.png) no-repeat center center; background-size: 200px auto; position: relative; overflow: hidden; text-align: center; }		
	.wrapper.previews div.camera-preview:last-of-type { border-right: none; }		
		.wrapper.previews div img.preview {position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); max-width: 100%; max-height: 100%;}
		.wrapper.previews div span { position: absolute; display: block; }		


		/*
		.wrapper div span.camID { position: absolute; display: block; color: #fff; top:0; left: 0; padding: 5px 10px; height: 25px; line-height: 25px; background: #333; background: rgba(0,0,0,0.5); text-align: left; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); z-index: 9000;}		
			.wrapper div span.camID:after { content: ""; width: 0; height: 0; border-top: 35px solid rgba(0,0,0,0.5); border-right: 35px solid transparent; position: absolute; top: 0; margin-left: 10px; }
		*/

		span.camID { position: absolute; color: #fff; top:0; left: 0; padding: 3px 14px 3px 10px; height: 20px; line-height: 20px; background: #333; background: rgba(0,0,0,0.5); text-align: left; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); z-index: 9000; border-radius: 0 0 8px 0; text-transform: uppercase;}		

		.wrapper.previews div span.recording { color: #fff; padding: 5px 10px 5px 0; height: 25px; background: red; top: 0; right: 0; line-height: 25px; z-index: 9500; }		
			.wrapper.previews div span.recording img { height: 26px; width: auto; vertical-align: bottom; }		
			.wrapper.previews div span.recording:before { content: ""; width: 0; height: 0; border-top: 35px solid red; border-left: 35px solid transparent; position: absolute; top: 0; margin-left: -35px; }

		.wrapper.previews div span.offline { color: #fff; padding: 5px 10px 5px 0; height: 25px; background: grey; top: 0; right: 0; line-height: 25px; z-index: 9500; display:none;}		
			.wrapper.previews div span.offline:before { content: ""; width: 0; height: 0; border-top: 35px solid grey; border-left: 35px solid transparent; position: absolute; top: 0; margin-left: -35px; }

		.wrapper.previews div span.caption { text-align: center; color: #fff; text-shadow: 1px 1px 1px rgba(0,0,0,0.7); width: 100%; line-height: 40px; background: rgba(0,0,0,0.6); bottom: -50px;  transition: all 0.3s; }		
		.wrapper.previews div:hover span.caption { bottom: 0; }

span.above, span.below {position: absolute; width: 100%; text-align: center;top: -22px; font-size: 0.85em;}
span.below {top: 28px; line-height: 12px; color: #777; display: none;}
#btn_logout:hover span.below {display: inline;}

span.loggedin {display: none;}

.switcher { width: 100%; text-align: center; clear: both; margin: 14px 0; }
	.switcher p {  }
		.switcher p span { display: inline-block; background: #fff; padding: 6px 15px; cursor: pointer; border: 2px solid #fff; border-left: none; border-right: 1px solid #eee; color: #777;  }
			.switcher p span:first-of-type { border-radius: 8px 0 0 8px; border-left: 2px solid #fff; }
			.switcher p span:last-of-type { border-radius: 0 8px 8px 0; border-right: 2px solid #fff; }
			.switcher p span.active { background: #e0e0e0; color: #444; 
-webkit-box-shadow: inset 1px 1px 6px 1px rgba(119,119,119,0.4);
-moz-box-shadow: inset 1px 1px 6px 1px rgba(119,119,119,0.4);
box-shadow: inset 1px 1px 6px 1px rgba(119,119,119,0.4);
			}
			.switcher p span:hover { background: #e0e0e0; }
	
.button { border-radius: 4px; padding: 6px 16px; color: #777; display: inline-block; margin: 0 3px; border: #aaa 2px solid; transition: all 0.2s; background: #fff; box-shadow: 1px 1px 3px rgba(0,0,0,0.2); cursor: pointer; }	
	.button:hover { color: #000; border-color: #000; }

.button.currentscreen {box-shadow: none; pointer-events: none; color: #fff !important; background:#f25922; border-color:#f25922;  }

input[type=submit], input[type=button] { -webkit-appearance: none; background:#f25922; border-radius: 4px; color: #fff; padding: 6px 16px; border: none; font-size: 0.88rem; cursor: pointer; margin: 1px; }
	input[type=submit].small, input[type=button].small { padding: 4px 8px; font-size: 0.82rem; }
	input[type=submit]:hover, input[type=button]:hover { background: #f68e69; }

input[type=text], 
input[type=password], 
input[type=email], 
select { border: 1px solid #aaa; padding: 5px; background: #eee; border-radius: 4px;} /* font-size: 0.95em; } */
select {font-size: 14px;}

input[type=text]:focus, 
input[type=password]:focus, 
input[type=email]:focus, 
select:focus { background: #f5f5f5;color: #000; }


::-webkit-input-placeholder { color: #999; }
:-moz-placeholder { /* Firefox 18- */ color: #999; }
::-moz-placeholder {  /* Firefox 19+ */ color: #999; }
:-ms-input-placeholder { color: #999; }


textarea { border: 1px solid #ccc; border-radius: 6px; background: #fff; color: #444; padding: 6px; font-size: 0.95em; }
	fieldset textarea { width: 50%; height: 100px; }
	fieldset input[type=text],
	fieldset input[type=tel],
	fieldset input[type=email],
	fieldset input[type=password] { width: 50%; max-width: 400px; }

	fieldset.narrow input[type=text],
	fieldset.narrow input[type=tel],
	fieldset.narrow input[type=email],
	fieldset.narrow input[type=password] { width: 30%;  }

.narrow { max-width: 100px !important; }

.wrapper.controlxyz { display: table; border-collapse: collapse; }	
	.wrapper.controlxyz .col { display: table-cell; vertical-align: top; }

		.wrapper.controlxyz .col.left { width: 30%; padding: 20px 20px 20px 20px; }	
			.wrapper.controlxyz .col.left.wide { width: 40%; }	

		.wrapper.controlxyz .col.only { width: 90%; padding: 60px 20px 20px 20px; }	
			.wrapper.controlxyz .col.only.switchable { padding: 20px; }	

		.wrapper.controlxyz .col.right { width: auto; text-align: center; padding: 20px 2% 40px 2%; }			
			.wrapper.controlxyz .col.right span.block { display: block; margin: 20px; padding-top: 50px; }			
			.wrapper.controlxyz .col.right .caption { padding-top: 20px; }			

/* DRAGDEALER overrides */
.dragdealer { line-height: 30px; font-size: 0.8em; z-index: 1; }
	.dragdealer p { line-height: 30px; display: block; margin: 0 15px; padding: 0; color: #666; }
	
	.controls p, .details p { background: #fff; padding: 10px; margin: 0 0 4px 0; }
	.controls input[type=submit], .controls input[type=button] { padding: 6px 8px; margin-right: 4px; line-height: 1.5em; }
	#currentlabel { opacity: 0.6; margin: 0 30px; }

#ajax_download { display: inline-block; width: 100%; height: 25px; margin: 6px 0; line-height:25px; background: #8ecb70; border: none; color: #fff; border-radius: 4px; text-align: left; }
	#download_progress { background: #36a500; height: 25px; display: inline-block; border-radius: inherit; padding: 0 1%; }
	input[type=submit].green, input[type=button].green { background: #36a500; }

.wrapper.overlay { background: #111; background: rgba(30,30,30,0.85); text-align: center; padding: 20px 0; position: absolute; top: 159px; left: 0; height: 100%; z-index: 999; }

	.wrapper.overlay fieldset { background: #eee; width: 80%; margin: 10px auto; padding-bottom: 20px; position: relative; box-shadow: 0px 2px 10px rgba(0,0,0,0.3); }

	.wrapper.vidplayer fieldset span.close { position: absolute; right: -20px; top: -32px;  display: block; cursor: pointer; }
		.wrapper.vidplayer fieldset span.close svg { width: 30px; height: 30px; background: #f25922; padding: 5px; border-radius: 20px; }
			.wrapper.vidplayer fieldset span.close svg path.icon { fill: #fff; }
				
		.wrapper.vidplayer fieldset iframe { margin: 10px auto; width: 560px; height: 315px; } /* width:560px; height:315px; */

		.wrapper.overlay.loader fieldset { text-align: center; width: 50%; margin: 30px auto; }
			.wrapper.overlay.loader legend { background: #f25922; }

	.wrapper.overlay.vidplayer fieldset { text-align: center; }
		.wrapper.overlay.vidplayer legend { text-align: left; }

.loading img { height: 80px; width: auto; }

.recordings fieldset { max-width: 560px; padding: 20px; margin: 0px auto 10px auto; }

p.form label:first-of-type { display: inline-block; width: 25%; min-width: 100px; color: #777; float: left; }	

div.accessMatrix {margin-left: 25%; width: 50%;}
div.accessMatrix div {border-bottom: 1px solid #CCC; padding-bottom: 3px; margin-bottom: 3px;}

fieldset { border: none; border-radius: 6px; background: #fff; margin-bottom: 25px; font-size: 90%; padding: 8px 20px; margin-left: auto; margin-right: auto; max-width: 55.0em; text-align: left; }
	legend, .legend { background: #666; padding: 6px 16px; border-radius: 4px; color: #fff; font-size: 1.1em; }
	p.legend { display: inline-block; }
	
	fieldset fieldset { border: 1px dotted #999; margin-bottom: 10px; }
		fieldset fieldset legend { padding: 4px 10px; background: #fff; border: 1px solid #999; color: #666; }
		fieldset fieldset label { margin-right: 10px; }
		fieldset fieldset p { margin: 6px 0; padding: 0; }
			fieldset fieldset span p { padding: 3px 5px; background: #eee; border-radius: 4px; }
		fieldset fieldset input[type=checkbox], fieldset fieldset input[type=radio] { margin-right: 4px; }


	ul.presets { list-style: none; margin: 10px 0; padding: 0; /* max-height: 300px; */ overflow-y: auto; overflow-x: hidden; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; }
		ul.presets.noscroll { max-height: none; overflow-x: visible; border-bottom: none; }
		ul.presets li { color: #999; display: block; width: 90%; padding: 5px 10% 5px 0; border-bottom: 1px solid #bbb; margin: 0 0 2px 0; position: relative; }
			ul.presets li.selected { padding-bottom: 7px; }
				ul.presets li.selected a { color: #fff; background: #999; padding: 3px 6px; border-radius: 3px; display: block; }
				ul.presets li.selected a:after { position: absolute; top: 7px; right: 3%; content: ""; display: block; width: 0; height: 0; border-top: 8px solid transparent; border-left: 10px solid #999; border-bottom: 8px solid transparent; }
		ul.presets li:first-of-type {  }
			ul.presets li img.delete { position: absolute; right: 5px; top: 3px; width: 15px; height: auto; cursor: pointer; opacity: 0.5; }
			ul.presets li img.delete:hover { opacity: 1.0; }
			
			ul.presets li a { color: #333; }
				ul.presets li span { font-size: 0.7em; }
			ul.presets li a:hover { color: #777; }

			ul.presets.recordings li a { color: #333; display: block; }
		
	ul.presets.recordings { }
		ul.presets.recordings li { margin: 0; width: 100%; padding: 1px 0; }
			ul.presets.recordings li a { padding: 7px 4px; }
				ul.presets.recordings li a:hover { background: #f5f5f5; }
				ul.presets.recordings li a.active { background: #f48449; color: #fff; }
			
		ul.presets.recordings.basic li input { float: right; }		

ul.presets::-webkit-scrollbar { background: #bbb; width: 20px; }
ul.presets::-webkit-scrollbar-button { display: none;}
ul.presets::-webkit-scrollbar-track { background: #bbb; }
ul.presets::-webkit-scrollbar-track-piece { background: #bbb;  }
ul.presets::-webkit-scrollbar-thumb { background: #777; cursor: pointer; }
ul.presets::-webkit-scrollbar-corner { background: #bbb; }
ul.presets::-webkit-resizer { background: #bbb; }

.details p { max-width: 540px; padding: 10px 30px; margin: 2px auto; text-align: left; }		
	.details p:first-of-type { border-radius: 6px 6px 0 0; }
	.details p:last-of-type { border-radius: 0 0 6px 6px; }
	.details p label { display: inline-block; width: 25%; color: #888; }

label.error { background: red; color: #fff; padding: 2px 4px; font-size: 0.8em; margin: auto 4px; border-radius: 3px; }

.width450 { width: 450px; }
.width500 { width: 500px; }
.width550 { width: 550px; }
.width600 { width: 600px; }
.width650 { width: 650px; }

.width100pc { width: 100%; }
.width95pc { width: 95%; }
.width90pc { width: 90%; }

.align-right {text-align: right;}
.align-center { text-align: center; }
.align-left { text-align: left; }
	

span.info { height: 16px; width: 16px; display: inline-block; border-radius: 8px; border: 1px solid #ccc; background: #fff; color: #bbb; font-size: 14px; text-align: center; line-height: 16px; margin: 0 5px; }

#powerTip { max-width: 240px; 	white-space: normal; font-size: 0.85em; line-height: 1.25em; }

.controls p br { display: none; }
.controls p label { margin: auto 5px; }

.ptzswf iframe { width: 100%; height: 560px; max-width: 640px; border: none; }

.fixedswf iframe { width: 100%; height: 720px; max-width: 1280px; border: none; }



.loggedin {
	display: inline;
	float:right; 
	padding:10px 30px 1px 10px;
}

/* NEW styles to widen container */

.slideImgContainer {
	width: 100%;
	background: #000;
	text-align: center;
	overflow: hidden;
	position: relative;
}
	
/* END */

/* TEMP */
.ptzswf img { width: 100%; height: auto; max-width: 642px; }

@media (min-height: 1080px){
	.wrapper.loop iframe { width: 1920px; height: 1080px; }
	#cevideo {width:1280px; height:720px; }
}
@media (min-height: 720px){
	body { /* overflow: hidden; */ }
	#cevideo {width:800px; height:450px; }
}
@media tv {
	body { padding: 18px 20px; }
}

@media (max-width: 1100px) {
.fixedswf iframe { width: 100%; height: 648px; max-width: 1200px; border: none; }
}

@media (max-width: 1100px) {
.fixedswf iframe { width: 100%; height: 594px; max-width: 1100px; border: none; }
}

@media (min-width: 1001px) {
}
@media (max-width: 1000px) {
.fixedswf iframe { width: 100%; height: 563px; max-width: 1000px; border: none; }
.wrapper.sub-tabs ul li a { padding: 14px 8px;}
}

@media (max-width: 900px) {
	.button { padding: 4px 8px; }
	.wrapper.topnav p img { height: 1.8em; }
	.wrapper.topnav p img.ce { height: 1.8em; }
	.fixedswf iframe { width: 100%; height: 540px; max-width: 900px; border: none; }
	.loggedin {display:none; }
}
@media (max-width: 800px) {
	body { font-size: 90%; }
	.wrapper.sub-tabs p { padding-left: 20px; padding-right: 20px; }
	.wrapper.previews { border: none; display: inline; }
	.wrapper.previews div { width: 49.73% !important; height:27.98vw !important; margin: 0 0.1% 0.1% 0; border: none; }
	.wrapper.controlxyz .col.left { width: 27%; padding: 20px 1.5%; }
	/*.wrapper.controlxyz .col.right { padding-top: 20px; }*/
	input[type=submit], input[type=button] { font-style: 0.78rem; }
	legend, .legend { font-size: 0.95em; padding: 4px 8px;}
	fieldset { margin-bottom: 15px; }
	fieldset input[type=text], fieldset input[type=tel], fieldset input[type=email], fieldset input[type=password] { width: auto; }
	ul.presets li { line-height: 1.2em; padding-right: 17%; width: 83%; }
	ul.presets::-webkit-scrollbar { width: 15px; }
	ul.presets li.selected a:after { right: 6%; }
	p.form label:first-of-type { width: 30%; }
	#currentlabel { margin: 0 10px; }
	.timelapse-container input[type=submit], 
	.timelapse-container input[type=button] { font-size: 0.8rem; }
	.wrapper.overlay { top: 157px; }
	/* .loggedin {display:none; } */
	.fixedswf iframe { width: 100%; height: 450px; max-width: 800px; border: none; }
}
@media (min-width: 700px) {
	ul.presets.recordings { max-height: 450px; }
}
@media (max-width: 700px) {
	.wrapper.login div.login { max-width: 90%; }
	.wrapper.topnav { height: 50px; }
	.wrapper.topnav p { margin-bottom: 0; padding-bottom: 0; }
	.navIcon { display: block; cursor: pointer; float: right; margin-top: -5px; }
		.navIcon svg { height: 2.0em; width: 2.0em; padding: 0.25em 0.4em; }
		.navIcon.open svg { background: #aaa; border-radius: 4px 4px 0 0; }
		.navIcon.open svg:active { background:#f25922; }
		.navIcon.open svg path { fill:#fff; }
	ul.nav { display: none; clear: both; }
	ul.nav li { display: block; }
	ul.nav a.button { margin: 0; width: 11.0em; text-align: center; border-bottom: none; border-radius: 0; padding: 8px 16px; color: #f25922; }
			ul.nav a.button:active { border-color: #aaa; background:#f25922; color: #fff; }
	ul.nav li:first-of-type a.button { border-radius: 6px 0px 0 0; }
	ul.nav li:last-of-type a.button { border: #aaa 2px solid; border-radius: 0 0 6px 6px; }
	.wrapper.controlxyz .col,
	.wrapper.controlxyz .col.left,
	.wrapper.controlxyz .col.right { display: block; width: 97% !important; padding-left: 1.5% !important; padding-right: 1.5% !important; }
	.wrapper.controlxyz .col.right { padding-top: 0; }
	ul.presets li { padding-right: 0; width: 100%; }
	ul.presets li.selected a:after { display: none; }
	p.form label:first-of-type { width: 40%; }
	fieldset.narrow input[type=text], fieldset.narrow input[type=tel], fieldset.narrow input[type=email], fieldset.narrow input[type=password] { width: 50%; }
	input[type=submit], input[type=button] { font-size: 0.77rem; }
	.wrapper.sub-tabs p { padding: 5px 2.5% 15px 2.5%; display: block; width: 95%; }
	.wrapper.sub-tabs ul { margin: 0 2.5%; }
	/* .wrapper.sub-tabs ul li a { padding: 12px 16px; } */
	.wrapper.overlay { top: 176px; }
	.dragdealer .red-bar { font-size: 12px; width: 100px; }
	.timelapse-container input[type=submit], .timelapse-container input[type=button] { margin: 3px; font-size: 0.76rem; }
	.controls p br { display: inline; }
	.controls p { line-height: 2.2em; }
	.controls p.dateselect { text-align: left; }
	.controls p.dateselect label { display: inline-block; width: 60px; }
	.dragdealer p { opacity: 0; }
	.fixedswf iframe { width: 100%; height: 420px; max-width: 700px; border: none; }

}
@media (max-width: 600px) {
.fixedswf iframe { width: 100%; height: 360px; max-width: 600px; border: none; }

}
@media (max-width: 480px) {
	body { font-size: 90%; }
	.wrapper.login div.login label { width: 100%; }
	.wrapper.login div.login input[type=submit] { margin-left: 0; }
	.wrapper.topnav { padding-top: 5px; padding-bottom: 5px; }
	.wrapper.topnav p img { margin-right: 0em; height: 1.4em; }
	.wrapper.topnav p img.ce { margin-right: 1.0em;  height: 1.45em; }
	.wrapper.previews div { width: 100% !important; height: 56.25vw !important;}
	.wrapper.sub-tabs ul li a { font-size: 0.88em; margin: 0 1px 0 0; padding: 10px 8px; }
	fieldset { padding: 8px 12px; }
	.wrapper.overlay { top: 139px; }
	.wrapper.overlay.loader fieldset { width: 70%; }
	.wrapper.vidplayer fieldset span.close { right: 10px; }
	.wrapper.vidplayer fieldset span.close svg { width: 20px; height: 20px; padding: 4px; }
	.details p { padding: 10px; }

	.fixedswf iframe { width: 100%; height: 360px; max-width: 480px; border: none; }

}
@media (max-width: 360px) {
	.fixedswf iframe { width: 100%; height: 216px; max-width: 360px; border: none; }
	.wrapper.sub-tabs ul li a { font-size: 0.8em; margin: 0 1px 0 0; padding: 10px 6px; }
}