/**
 *
 * Mobius Web Interface
 * Copyright Tamarack Industries, 2017
 * Web Design by Kevin Jones
 * aravynn.com
 *
 *
 */
 
 
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

/********************************************************\
	Webfonts
\********************************************************/

/* raleway-300 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/raleway-v12-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Raleway Light'), local('Raleway-Light'),
       url('../fonts/raleway-v12-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-300.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-300italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/raleway-v12-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Raleway Light Italic'), local('Raleway-LightItalic'),
       url('../fonts/raleway-v12-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-300italic.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/raleway-v12-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Raleway Bold'), local('Raleway-Bold'),
       url('../fonts/raleway-v12-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700italic - latin */
@font-face {
  font-family: 'Raleway';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/raleway-v12-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Raleway Bold Italic'), local('Raleway-BoldItalic'),
       url('../fonts/raleway-v12-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-700italic.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-900 - latin */
@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/raleway-v12-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Raleway Black'), local('Raleway-Black'),
       url('../fonts/raleway-v12-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/raleway-v12-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/raleway-v12-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/raleway-v12-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/raleway-v12-latin-900.svg#Raleway') format('svg'); /* Legacy iOS */
}


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
 
 
 /********************************************************\
 	Generic Style Information
 \********************************************************/
 
body{
 		font-family: 'Raleway', sans-serif;
 		font-weight: 300;
 		font-size: 14pt;
 		background-color: #1c3b4f;
 		}
 		
h1,h2,h3,h4,h5,h6 {font-weight: 900;}
 
h1 {
 		font-size: 65px;
 		padding: 20px 30px;
 		}
h2 {
 		font-size: 54px;
 		}
h3 {
 		font-size: 43px;
 		font-weight: 300;
 		color: #a9c438;
 		} 				
 
 em {
 		font-style: italic;
 		font-weight: 300;
 		}
 
 strong{
 		font-weight: 700;
 		}
 		
 strong em{
 		font-weight: 700;
 		}
 		
 a {
 		color: #a9c438;
 		}
 		
 a:hover {
 		color: #295674;
 		}
 .automargin{
 		margin: auto;
 		}
 .floatright{
 		float: right;
 		}
 p {
 		line-height: 1.5em;
 		margin: 15px 0;
 		}
 				
 		
 		
 		
/********************************************************\
 	input Styling
\********************************************************/		
 		
/* -------------------- Select Box Styles: stackoverflow.com Method */
/* -------------------- Source: http://stackoverflow.com/a/5809186 */
select {
	   -webkit-appearance: button;
	    -moz-appearance: none;      
        appearance: none;
	   -webkit-border-radius: 0px;

	   -webkit-padding-end: 20px;
	   -webkit-padding-start: 2px;
	   -webkit-user-select: none;
	   background-color: white;
	   background-image: url("../img/dropdown-inactive.jpg");
	   background-position: 191px center;
	   background-repeat: no-repeat;
	   
	   border: 1px solid #1d3c4f;
	   color: #555;
	   font-size: inherit;
	   margin: 0px 10px 4px;
	   overflow: hidden;
	   padding: 4px 10px;
	   text-overflow: ellipsis;
	   white-space: nowrap;
	   width: 223px;
	   cursor: pointer;
		}
		
select:hover {
		background-image: url("../img/dropdown-active.jpg");
		}

		
input {
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
		border-radius: 0px;
		border: 1px solid #1d3c4f;
		color: #555;
		font-size: inherit;
		margin: 0px 10px 4px;
		padding: 4px 10px;
		width: 193px;
		}
		
input[type="file"] {
		border: 0;
		margin: 20px 0 0;
		}

input[type="submit"].refresh {
		width: 30px !important;
		background-image: url("../img/refresh-inactive.jpg");
		}

input[type="submit"].refresh:hover {
		background-image: url("../img/refresh-active.jpg");
		}
		
input[type="checkbox"]{
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		background: url("../img/unchecked.png");
		width: 25px;
		height: 23px;
		border-width: 0px;
		padding: 0;
		}	
input[type="checkbox"]:checked{
		background: url("../img/checked.png");
		}

textarea {
		border: 1px solid #1d3c4f;
		color: #555;
		font-size: inherit;
		margin: 0px 0px 4px;
		padding: 4px 10px;
		width: 372px;
		}	
		
		
/********************************************************\
 	Header Styling
\********************************************************/
 
#header {
		background-color: #001324;
		background-image: url("../img/header-bg.jpg"); 		
		background-size: cover;
		resize: both;
		overflow: hidden;
		padding: 30px 0;
		}

	 
#header h2 {color: #fff;}
#header .automargin {
 		width: 900px;
 		}
 
 #logo{
 		width: 535px;
 		text-align: center;
 		float: left;
 		margin-right: 30px;
 		}
#logo img{
		display: block;
		margin-bottom: 30px;
		}
 		
#mainmenu {
		float: left;
		padding-left: 30px;
 		border-left: 1px solid #ccc;
 		}
#mainmenu li a{
		display: block;
		width: 274px;
		height: 14px;
		padding: 23px 15px 27px;
		margin: 11px 0;
		font-weight: 700;
		text-decoration: none;
		color: #fff;
		font-size: 14pt;
		}
		
#mainmenu li a#dashboard{background: url("../img/dashboard-link-bg.jpg") no-repeat 0 0;}
#mainmenu li a#report{background: url("../img/reports-link-bg.jpg") no-repeat 0 0;}
#mainmenu li a#settings{background: url("../img/settings-link-bg.jpg") no-repeat 0 0;}
#mainmenu li a#support{background: url("../img/about-link-bg.jpg") no-repeat 0 0;}
#mainmenu li a#alarm{background: url("../img/alarm-link-bg.jpg") no-repeat 0 0;}


#mainmenu li a#dashboard:hover{background: url("../img/dashboard-link-bg-hover.jpg") no-repeat 0 0;}
#mainmenu li a#report:hover{background: url("../img/reports-link-bg-hover.jpg") no-repeat 0 0;}
#mainmenu li a#settings:hover{background: url("../img/settings-link-bg-hover.jpg") no-repeat 0 0;}
#mainmenu li a#alarm:hover{background: url("../img/alarm-link-bg-hover.jpg") no-repeat 0 0;}

/********************************************************\
 	Content Styling
\********************************************************/

#content {
		background-color: #fff;
		}
		
/* default allows for 5 across.	*/	
#content .inner {
		margin: 30px auto 0;
		padding-bottom: 1px;
		width: 1970px;
		}
#navigation-bar{
		background-color: #a9c438;
		padding: 8px 5px 5px;
		}

#navigation-bar ul {

		}
#navigation-bar ul li{
		display: inline-block;
		}
#navigation-bar ul li a{
		display: block;
		color: #fff;
		background-color: #859d3f;
		text-decoration: none;
		width: 210px;
		padding: 10px 0 11px;
		text-align: center;
		margin: 0 3px;
		}
#navigation-bar ul li a:hover {		
		background-color: #4d5927;
		color: #859d3f;
		}

/********************************************************\
 	Footer Styling
\********************************************************/

#footer {
		clear: both;
		padding-top: 10px;
		background-color: #1c3b4f; 
		height: 50px;
		color: #fff;
		}
 
#footer div {
 		
 		padding: 15px;
 		border-top: 4px solid #a9c438;
 		}
 
#footer div a:hover{
  		color: #fff;
  		}
 
/********************************************************\
 	Dashboard Styling
\********************************************************/


.onoff {
		height: 18px;
		width: 18px;
		-webkit-border-radius: 13px;
		-moz-border-radius: 13px;
		border-radius: 13px;
		background-color: #333;
		margin: 15px 10px 0 48px;
		border: 1px solid black;
		float: left;
		position: relative;
		z-index: 100;
		}
 
/********************************************************\
 	Dashboard Styling
\********************************************************/

#navigation-bar ul#gridchoice li a{	
		width: 40px;
		height: 40px;
		padding: 0;
		}
#navigation-bar ul#sensor-links{
		float: left;
		}
#navigation-bar ul#gridchoice{
		float: right;
		}
#grid-squares {background: url("../img/squares-inactive.jpg") no-repeat 0 0 !important;}
#grid-degree {background: url("../img/degc-inactive.jpg") no-repeat 0 0;}
#grid-list {background: url("../img/list-inactive.jpg") no-repeat 0 0 !important;}
#grid-mini {background: url("../img/mini-inactive.jpg") no-repeat 0 0 !important;}
#grid-squares:hover {background: url("../img/squares-hover.jpg") no-repeat 0 0 !important;}
#grid-list:hover {background: url("../img/list-hover.jpg") no-repeat 0 0 !important;}
#grid-mini:hover {background: url("../img/mini-hover.jpg") no-repeat 0 0 !important;}

/********** Square styling ************/
.dash-square{
		width: 364px;
		height: 260px;
		background-color: #1c3b4f;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		margin: 0 15px 30px;
		float: left;
		color: #fff;
		}
		
.dash-square .idarea {
		height: 50px;
		}
		
.dash-square .idarea .id {
		display: block;
		float: left;
		padding: 14px; 
		font-size: 1em;
		width: 198px;
		}
		
.dash-square .idarea .settings {
		width: 32px;
		height: 32px;
		margin: 9px;
		float: left; 
		background: url("../img/settings-gear-inactive.png") no-repeat 0 0;
		}
		
.dash-square .idarea .settings:hover {
		background: url("../img/settings-gear-active.png") no-repeat 0 0;
		}
		
.dash-square .namearea {
		height: 28px;
		background-color: #132936;
		font-weight: 900;
		font-size: 1.4em;
		padding: 11px 15px;
		}
.dash-square .offlinearea {
		height: 28px;
		background-color: #ec3434;
		font-weight: 900;
		font-size: 1.4em;
		padding: 11px 15px;
		display: none;
		}
		
.dash-square .readingarea {
		width: 223px;
		border-right: 1px solid black;
		float: left;
		font-size: .85em;
		}
		
.dash-square .readingarea .reading {
		height: 99px;
		background-color: #2e6282;
		padding-top: 10px;
		position: relative;
		}
		
.dash-square .readingarea .reading strong {
		display: block;
		margin: 0px 0 12px 15px;
		}
		
.dash-square .readingarea .reading span {
		display: block;
		font-size: 2.5em;
		margin-left: 15px;
		}
.dash-square .readingarea .reading span.degreesymbol{
		position: absolute;
		top: 40px;
		right: 20px;
		}	
		
.dash-square .readingarea .min span.minidegreesymbol, .dash-square .readingarea .max span.minidegreesymbol {
		position: absolute;
		top: 22px;
		right: 15px;
		}
.dash-square .readingarea .min {
		width: 88px;
		height: 41px;
		padding: 5px 12px;
		float: left;
		position: relative;
		-webkit-border-bottom-left-radius: 15px;
		-moz-border-radius-bottomleft: 15px;
		border-bottom-left-radius: 15px;
		}
		
.dash-square .readingarea .min strong{
		display: block;
		}
		
.dash-square .readingarea .min span{
		display: block;
		margin-top: 1px;
		font-size: 1.2em;
		color: #a9c438;
		
		}

.dash-square .readingarea .max {
		width: 89px;
		height: 41px;
		padding: 5px 10px;
		border-left: 1px solid black;
		float: left;
		position: relative;
		}
		
.dash-square .readingarea .max strong{
		display: block;
		}
		
.dash-square .readingarea .max span{
		display: block;
		margin-top: 1px;
		font-size: 1.2em;
		color: #ed2024;
		}
		
.dash-square .dataarea {
		float: left;
		font-size: .85em;
		}
.dash-square .dataarea .battery {
		height: 75px;
		width: 140px;
		border-bottom: 1px solid black;
		margin-top: 0px;
		padding-top: 1px;
		}
		
.dash-square .dataarea .battery strong, .dash-square .dataarea .signal strong{
		margin: 5px;
		display: block;
		}
		
.dash-square .dataarea .battery span, .dash-square .dataarea .signal span {
		display: block;
		font-size: 1.7em;
		margin-left: 5px;
		margin-top: 8px;
		float: left;
		}
		
.dash-square .dataarea .battery strong.stat, .dash-square .dataarea .signal strong.stat{
		float: right;
		margin-right: 15px;
		margin-top: 18px;
		}

.dash-square .dataarea .signal {
		height: 85px;
		width: 140px;
		}
		
.battery strong, .signal strong, .min strong, .max strong {
		color: #2e6282;
		}

/********************* listview styling ************************/
#listview{
		width: 100%;
		text-align: left;
		}

#listview tr.header{
		background-color: #1c3b4f;
		font-weight: 900;
		color: #fff;
		}
#listview th, #listview td {padding: 19px 1% 20px;}

#listview th{
		width: 12%;
		}

#listview .header #id {
		width: 14%;
		}
#listview .header #sensor {
		width: 28%;
		}
#listview .header #reading {
		width: 12%;
		}
#listview .header #battery {
		width: 12%;
		}
#listview .header #signal {
		width: 12%;
		}	
#listview td {
		border-left: 1px solid #666;
		width: 12%;
		}
		
#listview td.id {
		font-style: italic;
		border-left-width: 0px;
		width: 14%;
		}
#listview td.sensor {
		font-weight: 900;
		width: 28%;
		}
		
#listview td.sensor .list-offline {
		display: none; 
		}
#listview td.reading {
		width: 12%;
		}
#listview td.battery {
		width: 12%;
		}
#listview td.signal {
		width: 12%;
		}	
#listview td.listsettings{
		padding: 0px 1%;
		width: 12%;
		position: relative;
		min-width: 130px;
		}
		
#listview .listsettings .onoff {
		top: 4px;
		left: 0px;
		}
		
#listview .listsettings .settings {
		width: 36px;
		height: 36px; 
		background: url("../img/settings-blue.png") no-repeat 0 0;
		display: block;
		position: absolute;
		top: 12px;
		right: 30px;
		}
		
#listview .listsettings .settings:hover {
		background: url("../img/settings-blue-hover.png") no-repeat 0 0;
		}
		
#listview .even {
		background-color: #ccc;
		}
		
#listview .odd {
		background-color: #ddd;
		}
		
#listview .even .sensor {
		background-color: #ddd;
		}
		
#listview .odd .sensor{
		background-color: #eee;
		}
/********** regTable ***************/

#regTable {
		width: 100%;
		text-align: left;
		}	
		
#regTable tr.header{
		background-color: #1c3b4f;
		font-weight: 900;
		color: #fff;
		}
#regTable th, #regTable td {padding: 19px 1% 20px;}

#regTable th{
		width: 12%;
		}	
#regTable td {
		width: 12%;
		}
		
#regTable .even {
		background-color: #ccc;
		}
		
#regTable .odd {
		background-color: #ddd;
		}		

#regTable .slot {
		width: 10%;
		}

#regTable .id {
		width: 40%;
		padding: 0px;
		}
#regTable th.id { 
		padding-left: 10px;
		}

#regTable .actions {
		width: 50%;
		padding: 0px;
		}


#regTable .settingbutton {
		border-color: #1c3b4f;
		background-color: #1c3b4f;
		color: #fff;
		width: 250px;
}
		
#regTable .settingbutton:hover {
		border-color: #abc336;
		background-color: #abc336;
		cursor: pointer;
		}	
/********** Date Box *************/

.datebox {
		width: 49%;
		float: left;
		}			

.datebox select {
		width: 74px;
		background-position: 42px center;
		}


/********** Square styling ************/
.dash-mini{
		width: 364px;
		height: 42px;
		background-color: #1c3b4f;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		margin: 0 15px 30px;
		float: left;
		color: #fff;
		}
		
		
.dash-mini .status {
		height: 18px;
		width: 18px;
		-webkit-border-radius: 9px;
		-moz-border-radius: 9px;
		border-radius: 9px;
		border: 1px solid black;
		background-color: #333;
		margin: 10px 10px 0 10px;
		float: left;
		}
		
.dash-mini .activestatus {
		background-color: #cf0;
		}
.dash-mini .inactivestatus {
		background-color: #f44;
		}
.dash-mini .settings {
		width: 32px;
		height: 32px;
		margin: 5px;
		float: left; 
		background: url("../img/settings-gear-inactive.png") no-repeat 0 0;
		}
		
.dash-mini .settings:hover {
		background: url("../img/settings-gear-active.png") no-repeat 0 0;
		}
		
.dash-mini .namearea {
		display: block;
		width: 244px;
		font-weight: 900;
		font-size: 1em;
		padding: 11px 15px;
		float: left;
		}
/** Jquery adaptions **/

#jqsquares {display: block;}
#jqlist {
		display: none;
		width: 100% !important;
		}
#jqmini {display: none;}		
		
/********************************************************\
 	Settings Styling
\********************************************************/
		
#navigation-bar label {
		font-weight: 900;
		color: #fff;
		margin-left: 30px;
		}
		
.system-options input, #navigation-bar input {
		border-right-width: 0; 
		margin-right: 0;
		}
		
.system-options input[type="submit"], #navigation-bar input[type="submit"] {
		border-left-width: 0; 
		border-right-width: 1px; 
		margin-left: 0;
		}
.system-options input[type="submit"].refresh:hover{
		border: 1px solid #000;
		border-left: 0px;
}




.system-options {
		display: inline;
		}

.system-options label {
			margin-left: 20px;
			display: inline-block;
			width: 150px;
			}
	
.system-options select {
		    background-position: 168px center;
		    width: 200px;
			}
.system-options input{
			width: 148px !important;
			}
.system-options input.refresh {
			width: 31px !important;
			}
.system-options p {
		margin: 5px 20px;
		}



/************** settings block *****************/

#content .settingarea {
		width: 1770px;
		}

.settings-block {
		width: 560px;
		height: 162px;
		background-color: #ccc;
		-webkit-border-radius: 15px;
		-moz-border-radius: 15px;
		border-radius: 15px;
		margin: 0 15px 30px;
		float: left;
		}
.settings-block .title {
		margin: 15px;
		}
.settings-block .title .namearea {
		font-weight: 900;
		padding: 8px 0 10px;
		display: block;
		width: 440px;
		float: left;
		font-size: 1.2em;
		}
.settings-block .title input[type='button'] {
		padding: 5px 25px;
		margin: 0;
		width: auto;
		color: #fff;
		background-color: #1c3b4f;
		float: left;
		cursor: pointer;
		}
		
.settings-block .detail {
		clear: both;
		margin: 65px 15px 0px;
		height: 40px;
		font-size: 11pt;
		line-height: 1.4em;
		}
.settings-block .stats {
		clear: both;
		margin: 10px 15px 0px;
		}
.settings-block .stats .value-sensor {
		margin-right: 88px;
		}
.settings-block .stats .enable-sensor {
		vertical-align: middle;
		margin-right: 0;
		}

/********************************************************\
 	Support Styling
\********************************************************/
/*
.sidecontent
	#contentheader
		#questionsarea
			li
				a
*/

#sidenavigation {
		width: 231px;
		float: left;
		}
#sidenavigation #navigation li a {
		display: block;
		text-align: center;
		padding: 9px;
		color: #fff;
		text-decoration: none;
		}	
#sidenavigation #navigation li a span{
		display: block;
		padding: 8px 0 9px;
		background-color: #ccc;
		}
#sidenavigation #navigation li a:hover, #sidenavigation #navigation li a.active {
		background-color: #a9c438;
		}	
#sidenavigation #navigation li a:hover span, #sidenavigation #navigation li a.active span{
		background-color: #859d3f;
		}
		
/*** Side Content Area ***/		

.sidecontent {
		background-color: #fff;
		margin-left: 231px;
		padding-bottom: 1px;
		}
		
.sidecontent #contentheader { 
		background-color: #a9c438;
		padding: 10px 25px;
		margin-bottom: 30px;
		min-height: 196px;
		}

.sidecontent #contentheader #questionsarea li a {
		color: #fff;
		display: block;
		margin: 15px 0;
		}

.sidecontent #contentheader #questionsarea li a:hover {
		text-decoration: none;
		}
		
.sidecontent .answer {
		padding: 10px 25px;
		margin-bottom: 30px;
		margin-right: 30px;
		background-color: #eee;
		}

.sidecontent .answer h2 {
		font-size: 1.75em;
		padding: 15px 0 15px;
		border-bottom: 4px solid #a9c438;
		}
		
/************* Contact ***************/

.sidecontent .contact label {
		width: 160px;
		display: inline-block;
		margin-bottom: 16px;
		}

.sidecontent .contact input {
		width: 201px;
		margin-bottom: 16px;
		}

.sidecontent .contact select {
		margin-bottom: 16px;
		}
		
.sidecontent input[type="submit"] {
		background-color: #1c3b4f;
		border-color: #1c3b4f;
		cursor: pointer;
		color: #fff;
		margin: 15px 0;
		}
		
.sidecontent input[type="submit"]:hover {
		background-color: #a9c438;
		border-color: #a9c438;
		}
		
/********************************************************\
 	Reports Styling
\********************************************************/

.sidecontent #contentheader .logarea {
		border-bottom: 4px solid #859d3f;
		}

.sidecontent #contentheader .logarea .leftlog, .sidecontent #contentheader .logarea .rightlog {
		float: left;
		width: 50%;
		}

.sidecontent #contentheader .logarea label {
		display: inline-block;
		width: 150px;
		}

.sidecontent #contentheader .logarea select {
		margin: 15px 0;
		}
		
.sidecontent #contentheader .logarea .logblock {
		float: right;
		}

		
.sidecontent #contentheader input[type="submit"] {
		width: 120px;
		}
		
.sidecontent #contentheader input[type="submit"]:hover {
		background-color: #859d3f;
		}

.sidecontent #contentheader .logarea input {
		border-right-width: 0px;
		margin-right: 0;
		}
input[type="submit"].calendar {
		width: 30px !important;
		background-image: url("../img/calendar-inactive.jpg");
		border-right-width: 1px !important;
		border-left-width: 0px;
		margin-left: 0;
		
		}

input[type="submit"].calendar:hover {
		background-image: url("../img/calendar-active.jpg");
		border-right-width: 1px;
		border-color: #1d3c4f !important;
		}
		
#delta {
		width: 75px;
		background-position: 45px center;
		}
#quickdatespan {
		width: 150px;
		background-position: 120px center;
		}
.quickloadarea {float: right;}		
.setting-gear {
		float: left;
		display: block;
		width: 36px; 
		height: 36px;
		background: url('../img/settings-blue.png');
		margin-top: 13px;
		margin-bottom: 20px;
		 }
		 
.setting-gear:hover {
		background: url('../img/settings-blue-hover.png');
		 }

#support-instruct-area {display: block;}
#support-faq-area {display: none;}
#support-contact-area {display: none;}	

#jqhistoricaldata {display: none;}

#system-sensor-header {display: none;}
#system-cellular-header {display: none;}
#system-add-header {display: none;}
#support-settings-header {display: none;}
#system-upgrade {display: none;}
#system-settings {display: none;}
#regTable {display: none; padding-bottom: 20px;}


#jqlivedata {display: block;}
		 

#calBorder input[type="button"] {
		border-color: #1c3b4f !important;
		background-color: #1c3b4f !important;
		color: #fff !important;
		}
		
#jqlivedata {} /* this is the live area */
#jqlivedata label { 
		width: 200px; 
		display: inline-block;
		margin: 10px 0px; 
		}
#jqlivedata em { display: inline-block; }
#jqlivedata input { 
		width: 202px;
		margin: 10px 0px; 
		}
#jqlivedata td input[type="checkbox"] { 
		width: 25px !important;
		}
		
#jqlivedata select {
		margin: 10px 0;
		}
#jqlivedata input[type="submit"].widebutton {
		width: auto !important;
		}
#jqlivedata input#liveStartStopBtn {
		width: 32px; 
		height: 32px;
		background-color: #1c3b4f; 
		padding: 3px;
		}
#jqlivedata input#liveStartStopBtn:hover{
		background-color: #859d3f;
		border-color: #859d3f; 
		}
		
#jqlivedata #varsTable {
		width: 100%;
		border: 1px solid #1c3b4f;
		margin: 20px 0;
		}
#jqlivedata #varsTable tr{
		background-color: #1c3b4f;
		color: #fff;
		}
#jqlivedata #varsTable tr th {
		width: 12.5%;
		padding: 10px;
		text-align: left;
		}
#jqlivedata #varsTable tr th:last-of-type{
		width: 50%;
		}
#jqlivedata #varsTable tr td {
		padding: 10px;
		text-align: left;
		background-color: #fff;
		color: #000;
		border-bottom: 1px solid #1c3b4f;
		}
#graphdiv {
			width: 100% !important;
			}	

/********* Series Boxes **********/

.seriesbox {
		float: left; 
		width: 330px;
		height: 300px;
		margin: 0 5px 20px;
		}
.seriesbox div {
		padding: 10px;
		}
		
.seriesbox div label {
		width: 65px;
		display: inline-block;
		}
.seriesname {}
.seriesvisible {}
.seriesaxis {}
.seriescolor {}
.seriesstyle {}


/********************************************************\
 	Sitemap Styling
\********************************************************/

.sitemap li {
		margin: 10px 25px;
		}
		
/********************************************************\
 	Fixed Header Styling
\********************************************************/		
		
#fixedheader {
		position: fixed;
		width: 100%;
		height: 70px;
		background-color: #000d1f;
		z-index: 1000;
		top: -70px;
		left: 0px;
		}
		
#fixedheader .logo {
		display: block;
		float: left;
		height: 60px;
		margin: 5px;
		}
		
#fixedheader .logo img {
		height: 100%;
		}
		
#fixedmainmenu {
		float: right;
		width: 568px;
		margin-right: 4px;
		}

#fixedmainmenu li a{
		display: block;
		float: left;
		width: 100px;
		text-align: center;
		height: 14px;
		padding: 16px 15px 18px;
		margin: 11px 6px;
		font-weight: 700;
		text-decoration: none;
		color: #fff;
		font-size: 14pt;
		}
		
#fixedmainmenu li a#dashboard{background: url("../img/dashboard-link-bg.jpg") no-repeat 0 0;}
#fixedmainmenu li a#report{background: url("../img/reports-link-bg.jpg") no-repeat 0 0;}
#fixedmainmenu li a#settings{background: url("../img/settings-link-bg.jpg") no-repeat 0 0;}
#fixedmainmenu li a#support{background: url("../img/about-link-bg.jpg") no-repeat 0 0;}
#fixedmainmenu li a#alarm{background: url("../img/alarm-link-bg.jpg") no-repeat 0 0;}

#fixedmainmenu li a#dashboard:hover{background: url("../img/dashboard-link-bg-hover.jpg") no-repeat 0 0;}
#fixedmainmenu li a#report:hover{background: url("../img/reports-link-bg-hover.jpg") no-repeat 0 0;}
#fixedmainmenu li a#settings:hover{background: url("../img/settings-link-bg-hover.jpg") no-repeat 0 0;}
#fixedmainmenu li a#support:hover{background: url("../img/about-link-bg-hover.jpg") no-repeat 0 0;}
#fixedmainmenu li a#alarm:hover{background: url("../img/alarm-link-bg-hover.jpg") no-repeat 0 0;}


/********************************************************\
 	Pop-Up Styling
\********************************************************/


#back-shadow {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background-color: rgba(0,0,0,0.7);
		z-index: 1000;
		}
#pre-loader {
		display: none; 
		}		

#popup-settings {
		
		display: none;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		position: fixed;
		top: 100px;
		left: 50%;
		width: 460px;
		margin-left: -250px;
		padding: 20px 20px 0;
		background-color: #a9c438;
		z-index: 1001;
		}
.popup-long {
		position: absolute !important;
		}		

#popup-settings label {
		margin: 0 0 20px;
		display: inline-block;
		width: 242px;
		}
#popup-settings input {
		margin: 0 0 20px;
		}
#popup-settings input[type="checkbox"] {
		margin: 20px 0;
		vertical-align: bottom;
		display: inline-block;
		}

		
#popup-settings input[type="button"] {
		background-color: #1c3b4f;
		border-color: #1c3b4f;
		cursor: pointer;
		color: #fff;
		width: 214px;
		margin: 0 0 20px 243px;
		}
		
#popup-settings input[type="button"]:hover {
		background-color: #859d3f;
		border-color: #859d3f;
		}
		
#popup-settings h3{
		font-size: 24pt;
		color: #fff;
		margin-bottom: 20px;
		}
#closepopup {
		width: 40px;
		height: 40px;
		font-size: 20pt;
		font-weight: 900;
		margin-left: 430px;
		color: #1c3b4f;
		}
#closepopup:hover{
		color: #fff;
		cursor: pointer;
		}
/********************************************************\
 	Alarms HTML Table
\********************************************************/
		
		
.alarm-table-wrap {
		width: 100%;
		overflow: scroll;
		}			
		
#historyTable, #alarmsTable {
		width: 100%;
		min-width: 1050px;
		text-align: left;
		}

#historyTable tr.header, #alarmsTable tr.header{
		background-color: #abc336;
		font-weight: 900;
		color: #fff;
		}
		

#historyTable td, #alarmsTable td, #historyTable th, #alarmsTable th{
		padding: 19px 1% 20px;
		}
#historyTable td, #alarmsTable td {
		border-left: 1px solid #666;
		}
#historyTable td.id, #alarmsTable td.id {
		border-left-width: 0px;
		}
#historyTable td.reset, #alarmsTable td.reset {
		padding: 5px 1%;
		}
#historyTable td.reset input, #alarmsTable td.reset input {
		border-color: #1c3b4f;
		background-color: #1c3b4f;
		color: #fff;
		}
#historyTable td.reset input:hover, #alarmsTable td.reset input:hover {
		border-color: #abc336;
		background-color: #abc336;
		cursor: pointer;
		}


#historyTable .even, #alarmsTable .even {
		background-color: #ddd;
		}
		
#historyTable .odd, #alarmsTable .odd {
		background-color: #eee;
		}

.alarm-resets {
		margin: 30px 30px 0;
		padding-bottom: 30px;
		}
.alarm-resets input {
		width: auto;
		padding: 12px 24px; 
		border-color: #1c3b4f;
		background-color: #1c3b4f;
		color: #fff;
		}

.alarm-resets input:hover {
		border-color: #abc336;
		background-color: #abc336;
		cursor: pointer;
		}
/*
		
#listview td {
		
		}
		
#listview td.listsettings{
		padding: 0px 1%;
		min-width: 130px;
		}
*/



/********************************************************\
 	Responsive Styling
\********************************************************/

/* square 394px total across plus 30 for end margins */


/* 4 across */
@media screen and (max-width: 2000px) {

	#content .inner {
			width: 1576px;
			}
	/************** settings block *****************/

.settings-block {
		width: 494px;
		}
.settings-block .title .namearea {
		width: 375px;
		}
.settings-block .stats .value-sensor {
		margin-right: 23px;
		}

}

/* 3 across  - some changes to the menus needed here. */
@media screen and (max-width: 1606px) {

	#content .inner {
			width: 1182px;
			}
	/************** settings block *****************/

	#content .settingarea {
			width: 1180px;
			}

	.settings-block {
			width: 560px;
			}
	.settings-block .title .namearea {
			width: 440px;
			}
	.settings-block .stats .value-sensor {
			margin-right: 88px;
			}
	
	
	
}

@media screen and (max-width: 985px) {
	.datebox{
			float: none; 
			width: auto;
			}
}


@media screen and (max-width: 960px) {
	/* header at 100%, change to the 2 width. */
	
	 #logo{
 			width: 390px;
 			
 			}
 		
 	#header .automargin {
 			width: 748px;
 			}
	
	#mainmenu li a{
			width: 267px;
			padding: 15px 15px 18px;
			}
	
	#logo img {
			width: 390px;
			}
	h2 {
 			font-size: 39px;
 			}
	h3 {
	 		font-size: 31px;
 			} 		
 			
 	/************** settings block *****************/

	#content .settingarea {
			width: 590px;
			}
	
	/******** Navigation Bar **********/		

	.system-options label, #navigation-bar label {
			font-weight: 300 !important;
			margin-left: 20px;
			font-size: 12pt;
			display: inline-block;
			width: 340px;
			}
	.system-options label {
			width: 150px;
			}
	.system-options p {font-size: 12pt;}
	
	.system-options select, #navigation-bar select {
		    background-position: 128px center;
		    width: 160px;
		    padding-top: 6px;
		    padding-bottom: 6px;
		    font-size: 12pt;
			}
	.system-options input, #navigation-bar input {
			width: 108px !important;
			}
	.system-options input.refresh, #navigation-bar input.refresh {
			width: 31px !important;
			}
	
}


/* 2 across, ensure that it works on a tablet screen */
@media screen and (max-width: 1212px) {
	
	#content h1 {
			font-size: 55px;
			}
	
	.dash-mini, .dash-square {
			width: 354px;
			}
	.dash-mini .namearea {
			width: 234px;
			}
	/**** dashboard navigation Styling ****/
	
	#navigation-bar ul {

			}
	#navigation-bar ul li{
			display: inline-block;
			}
	#navigation-bar ul li a{
			width: 130px;
			padding: 12px 0 13px;
			font-size: 11pt;
			}
	#navigation-bar ul#gridchoice li a{	
			width: 40px;
			height: 40px;
			padding: 0;
			}
	#navigation-bar ul#sensor-links{
			float: left;
			}
	#navigation-bar ul#gridchoice{
			float: right;
			}
				
	/********** Square styling ************/
		
	.dash-square .idarea .id {
			width: 188px;
			}
			
	.dash-square .namearea {
			height: 24px;
			font-size: 1.2em;
			padding: 13px 15px;
			}
		
	.dash-square .readingarea {
			width: 213px;
			}
		
	.dash-square .readingarea .min {
			width: 83px;
			}
	
		
	.dash-square .readingarea .min span{
			font-size: 1.1em;
			}

	.dash-square .readingarea .max {
			width: 84px;
			}
		
	.dash-square .readingarea .max span{
			font-size: 1.1em;
			}

	#content .inner {
			width: 768px;
			}
	
	
	/************** settings block *****************/

#content .settingarea {
		width: 560px;
		}

	/********************* listview styling ************************/
	#listview{
			width: 100%;
			font-size: .9em;
			}
	#listview th, #listview td {
			padding: 13px 1% 14px;
			}

	#listview th{
			width: 13%;
			}

	#listview .header #id {
			width: 15%;
			}
	#listview .header #sensor {
			width: 23%;
			}
	#listview .header #reading {
			width: 13%;
			}
	#listview .header #battery {
			width: 13%;
			}
	#listview .header #signal {
			width: 13%;
			}	
	#listview td {
			width: 13%;
			}
		
	#listview td.id {
			font-style: italic;
			border-left-width: 0px;
			width: 15%;
			}
	#listview td.sensor {
			font-weight: 900;
			width: 23%;
			}
	#listview td.reading {
			width: 13%;
			}
	#listview td.battery {
			width: 13%;
			}
	#listview td.signal {
			width: 13%;
			}	
	#listview td.listsettings{
			padding: 0px 1%;
			width: 13%;
			min-width: 110px;
			}
		
	#listview .listsettings .onoff {
			right: 60px;
			top: 4px;
			}	
	#listview .listsettings .settings {
			right: 10px;
			}





	/**** Alarm Styling ***/
		
	#historyTable td, #alarmsTable td, #historyTable th, #alarmsTable th{
			padding: 13px 1% 14px;
			font-size: 11pt;
			}
	#historyTable td.reset, #alarmsTable td.reset {
			padding: 0px 1%;
			}
	#historyTable td.reset input, #alarmsTable td.reset input {
			width: auto;
			}

	.alarm-resets input {
			width: auto;
			padding: 6px 12px;
			font-size: 11pt;
			}

/********* regTable **********/




		#regTable .slot {
				width: 10%;
				}

		#regTable .id {
				width: 40%;
				padding: 0px;
				}
		#regTable th.id { 
				padding-left: 10px;
				}

		#regTable .actions {
				width: 50%;
				padding: 0px;
				}


		#regTable .settingbutton {
				width: 100px;
		}





	/******** Navigation Bar **********/		

	#navigation-bar label {
			font-weight: 900;
			margin-left: 20px;
			font-size: 12pt;
			}
	
	#navigation-bar select {
		    background-position: 128px center;
		    width: 160px;
			}
	#navigation-bar input {
			width: 140px;
			}
	#navigation-bar input.refresh {
			width: 30px;
			}
			
	/******* Reports Area *******/

	.sidecontent #contentheader .logarea label {
			display: block;
			width: auto;
			}

	.sidecontent #contentheader .logarea input {
			margin-left: 0;
			}
			
	/*** reports series area ***/ 
	/*#series table tr td input {
			width: 123px;
			}
	#series table tr td input[type="submit"]{
			width: 25px !important;
			}
	#series table tr td select {
			background-position: 121px center;
			width: 153px;
			}*/
	#series table tr {
			display: block;
			float: left;
			width: 280px;
			margin: 0 20px 20px;
			}
	#series table tr th, #series table tr td {
			display: block;
			width: 280px;
			text-align: left; 
			height: 35px;
			}

}
@media screen and (max-width: 1070px) {
	.system-options {
			display: block;
			}
}
@media screen and (max-width: 768px) {
	/* header at 100%, just before 1 width */
	
	#fixedheader {display: none;}
	
	 #logo{
 			float: none;
 			width: 560px;
 			}
 		
 	#header .automargin {
 			width: 560px;
 			}
	
	#mainmenu {
			float: none;
			border-width: 0px;
			margin: 0;
			padding: 0;
			}
	#mainmenu li {
			float: left;
			}
	
	#mainmenu li a{
			width: 100px;
			padding: 15px 15px 18px;
			margin: 0 5px; 0;
			text-align: center;
			}
	
	#logo img {
			width: 560px;
			margin-bottom: 20px;
			}
	#header h2 {
 			display: none;
 			}
	#header h3 {
	 		display: none;
 			}
 	
 	/**** dashboard navigation Styling ****/
	
	#navigation-bar ul {
			width: 280px;
			}
	#navigation-bar ul#gridchoice{
			width: auto;
			}
	#navigation-bar ul li a{
			width: 130px;
			padding: 12px 0 13px;
			font-size: 11pt;
			margin: 0px 3px 4px;
			}

	/***** Suppport Styling ******/
	
	#sidenavigation {
			width: auto;
			float: none;
			}
	#sidenavigation #navigation li a {
			display: block;
			width: 120px;
			float: left;
			}	
	
		
	/*** Side Content Area ***/		

	.sidecontent {
			clear: both;
			margin-left: 0;
			}
		
	.sidecontent .answer {
			margin-left: 30px;
			}
	 		
}


/* 1 across */
@media screen and (max-width: 768px) {

	#content .inner {
			width: 320px;
			}
	
	span.plc {
		padding-bottom: 28px !important;
		}
	
	/************** settings block *****************/

	#content .settingarea {
			width: 560px;
			}

	.settings-block {
			margin: 0 0px 30px;
			}

	 /**** dashboard navigation Styling ****/
	
	#navigation-bar ul {
			margin: 0 auto;
			width: 320px;
			}
	#navigation-bar ul#gridchoice{
			width: 177px;
			margin: 0 auto;
			}
	#navigation-bar ul li{
			display: inline-block;
			}
	#navigation-bar ul li a{
			width: 320px;
			padding: 12px 0 13px;
			font-size: 11pt;
			margin: 0px 0px 6px;
			}
	#navigation-bar ul#gridchoice li a{	
			width: 40px;
			height: 40px;
			padding: 0;
			margin-bottom: 0;
			}
	#navigation-bar ul#sensor-links{
			float: none;
			}
	#navigation-bar ul#gridchoice{
			float: none;
			}		
			
	/********** Square styling ************/
	.dash-square{
			width: 316px;
			height: 236px;
			margin: 0 0 20px;
			}
		
	.dash-square .idarea .id {
			padding: 16px 16px 14px; 
			font-size: .9em;
			width: 145px;
			}

	.dash-square .namearea {
			height: 23px;
			font-weight: 900;
			font-size: 1.2em;
			padding: 11px 15px;
			}
		
	.dash-square .readingarea {
			width: 186px;
			font-size: .85em;
			}
		
	.dash-square .readingarea .reading {
			height: 80px;
			}
		
	.dash-square .readingarea .reading span {
			font-size: 2em;
			}

	.dash-square .readingarea .min {
			width: 72px;
			}
				
	.dash-square .readingarea .min span{
			font-size: 1.1em;
			}

	.dash-square .readingarea .max {
			width: 73px;
			}
		
	.dash-square .readingarea .max span{
			font-size: 1.1em;
			}
	
	.dash-square .dataarea {
			font-size: .85em;
			}
	.dash-square .dataarea .battery {
			height: 65px;
			width: 129px;
			}
		
	.dash-square .dataarea .battery strong, .dash-square .dataarea .signal strong{
			margin: 5px;
			}
		
	.dash-square .dataarea .battery span, .dash-square .dataarea .signal span {
			font-size: 1.5em;
			margin-top: 4px;
			}
		
	.dash-square .dataarea .battery strong.stat, .dash-square .dataarea .signal strong.stat{
			margin-top: 14px;
			}

	.dash-square .dataarea .signal {
			height: 65px;
			width: 129px;
			}	
			
	/********** mini styling ************/
	.dash-mini{
			width: 320px;
			height: 42px;
			margin: 0 0 20px;
			}
	
	.dash-mini .namearea {
			width: 204px;
			}	
			
	/********************* listview styling ************************/
	#listview{
			width: 100%;
			font-size: .9em;
			}
	#listview th, #listview td {
			padding: 13px 1% 14px;
			}

	#listview th{
			width: 13%;
			}

	#listview .header .id {
			display: none !important;
			}
	#listview .header #sensor {
			width: 23%;
			}
	#listview .header #reading {
			width: 13%;
			}
	#listview .header .battery {
			display: none;
			}
	#listview .header .signal {
			display: none;
			}	
	#listview td {
			width: 13%;
			}
		
	#listview td.id {
			display: none;
			}
	#listview td.sensor {
			font-weight: 900;
			width: 23%;
			}
	#listview td.reading {
			width: 13%;
			}
	#listview td.battery {
			display: none;
			}
	#listview td.signal {
			display: none;
			}	
	#listview td.listsettings{
			padding: 0px 1%;
			width: 13%;
			min-width: 110px;
			}
		
	#listview .listsettings .onoff {
			right: 60px;
			top: 4px;
			}	
	#listview .listsettings .settings {
			right: 10px;
			}
	
	
		#regTable .slot {width: 8%}
		#regTable .id {width: 30%;}
		#regTable .actions {width: 62%;}

		#regTable .id input {
				width: 70px;
				}
		#regTable .settingbutton {
				width: 70px;
				padding: 3px;
				margin: 3px;
				}
	
	
		
	/* / */
}

/* 1 across */
@media screen and (max-width: 560px) {

	/********** Header Styling ************/
	
		#logo{
				float: none;
				width: 310px;
				}
		
		#header .automargin {
				width: 310px;
				}
	
		#mainmenu {
				float: none;
				border-width: 0px;
				margin: 0;
				padding: 0;
				}
		#mainmenu li {
				float: left;
				}
	
		#mainmenu li a{
				width: 105px;
				padding: 17px 15px 18px;
				margin: 10px 10px 0px;
				text-align: center;
				font-size: 12pt;
				}		
		#logo img {
				width: 320px;
				margin-bottom: 15px;
				}
	/************** settings block *****************/

	#content .settingarea {
			width: 320px;
			}

	.settings-block {
			width: 320px;
			height: auto;
			padding-bottom: 15px;
			margin: 0 0px 30px;
			}
	.settings-block .title .namearea {
			padding: 10px 0 10px;
			display: block;
			width: 200px;
			float: left;
			font-size: .9em;
			}
	.settings-block .title a {
			padding: 10px 30px;
			color: #fff;
			text-decoration: none;
			background-color: #1c3b4f;
			display: block;
			float: left;
			}
	
	.settings-block .detail {
			height: auto;
			}
	.settings-block .stats {
			clear: both;
			margin: 10px 15px 0px;
			}

	.settings-block .stats label {display: inline-block; margin-top: 10px; margin-right: 10px}
	.settings-block .stats .value-sensor {
			margin-right: 0px;
			}
	.settings-block .stats .enable-sensor {
			vertical-align: middle;
			margin-right: 3px;
			margin-top: 4px;
			float: right;
			}
	
	/********** Header Styling ************/
	
	#footer {
			padding-top: 10px;
			background-color: #1c3b4f; 
			height: 50px;
			color: #fff;
			text-align: center;
			}
 
	#footer div {
		
			padding: 15px;
			border-top: 4px solid #a9c438;
			}
 
	#footer div a:hover{
			color: #fff;
			}
			
	#footer .floatright {
			float: none;
			width: 100%;
			margin-top: 10px;
			display: block;
			}
			
	/********** Dashboard Styling ************/
	
	#content h1 {
			font-size: 45px;
			Text-align: center;
			}
			
	/******** Navigation Bar **********/		

	#navigation-bar label {
			font-weight: 300 !important;
			margin: 10px 30px 10px;
			font-size: 12pt;
			display: block;
			width: auto;
			}
	
	.system-options select, #navigation-bar select {
		    background-position: 228px center;
		    width: 260px;
		    padding-top: 6px;
		    padding-bottom: 6px;
		    font-size: 12pt;
		    margin-left: 30px;
			}
	.system-options select {
			margin-left: 10px;
			}
	#navigation-bar input {
			width: 208px !important;
			margin-left: 30px;
			margin-bottom: 10px;
			}
	#navigation-bar input.refresh {
			width: 31px !important;
			}	

	/* support Styling */

	#sidenavigation #navigation li a {
			font-size: 11pt;
			width: 91px;
			}	
		
	/*** Side Content Area ***/		
		
	.sidecontent { 
			font-size: 12pt;
			}

	/************* Contact ***************/

	.sidecontent .contact input {
			margin-left: 0px;
			}

	.sidecontent .contact select {
			margin-left: 0;
			}
		
	.sidecontent textarea {
			width: 202px;
			}
	.sidecontent input[type="submit"] {
			width: 224px;
			}
	
	
	/************ Reports **************/

	.sidecontent #contentheader .logarea .leftlog, .sidecontent #contentheader .logarea .rightlog {
			float: none;
			width: auto;
			}

	.sidecontent #contentheader .logarea label {
			display: block;
			width: auto;
			}
	.sidecontent #contentheader select {
			width: 287px;
			background-position: 255px center;
			}
	span.plc {
			padding-bottom: 24px !important;
			}

	.system-options select {
		    background-position: 228px center;
		    width: 260px;
		    padding-top: 6px;
		    padding-bottom: 6px;
		    font-size: 12pt;
		    margin-left: 0px 10px 4px 10px;
			}
			
	.system-options input {
			margin: 0 0 10px 10px;
			width: 235px !important;
			line-height: 22px;
			padding: 4px 10px;
			}
	
	.system-options input.refresh {
			margin: 0 0 10px 0px;
			}
	
	.system-options label, .system-options p {
			
			display: block;
			color: #fff;
			margin: 10px 10px;
			
			}

	.sidecontent #contentheader .logarea input {
			width: 233px;
			height: 22px;
			}
	
	.sidecontent #contentheader em {
			display: block;
			margin-bottom: 20px;
			} 
	
	.sidecontent #contentheader input[type="submit"] {
			width: 285px;
			height: 32px;
			}
		
		
	#delta {
			width: 75px;
			background-position: 45px center;
			}
	#deltaType {
			width: 150px;
			background-position: 120px center;
			}
	.quickloadarea {
			float: none;
			margin-left: 1px;
			}		
	.quickloadarea select {
			margin: 15px 0;
			}
	
	.setting-gear {
			float: none;
			display: block;
			margin-bottom: 20px;
			 }
	
	#jqlivedata {} /* this is the live area */
	#jqlivedata label { 
			width: 300px; 
			}
	#jqlivedata em { display: inline-block; }
	#jqlivedata input { 
			width: 262px;
			}
			
	#jqlivedata .smallsize {
			display: block;
			} 	
	#jqlivedata input[type="submit"].widebutton {
			width: 280px !important;
			}
	#jqlivedata input[type="submit"].savelive {
			width: 244px !important;
			}	
			
	/********************************************************\
		Pop-Up Styling
	\********************************************************/

	#popup-settings {
	
			-webkit-border-radius: 0px;
			-moz-border-radius: 0px;
			border-radius: 0px;
			top: 0px;
			left: 0;
			width: auto;
			margin-left: 0;
			padding: 20px 20px 0;
			}
	
	#popup-settings label {
			margin: 0 0 10px;
			display: inline-block;
			width: 270px;
			}
	#popup-settings input {
			width: 270px;
			margin: 0 0 10px;
			}
	#popup-settings h3 {
			width: auto;
			font-size: 17pt;
			}
	#popup-settings span {
			display: block;
			margin: 0 0 20px;
			width: 270px;
			}
	#popup-settings input[type="button"] {
			width: 290px;
			margin: 0 0 10px 0px;
			}
	#popup-settings input[type="checkbox"] {
		display: block;
		margin: 0 0 10px;
		width: 25px;
	}
	#closepopup {
			width: 40px;
			height: 40px;
			font-size: 20pt;
			font-weight: 900;
			margin-left: 0px;
			position: absolute;
			top: 10px; 
			right: 0px;
			color: #1c3b4f;
			}
	#closepopup:hover{
			color: #fff;
			cursor: pointer;
			}
			
	/********* Series Boxes **********/

.seriesbox {
		float: left; 
		width: 310px;
		height: auto;
		margin: 0 5px 20px;
		}
.seriesbox div {
		padding: 10px;
		}
		
.seriesbox div label {
		width: 65px;
		display: inline-block;
		}
.seriesbox div input {
		width: 153px;
		}
.seriesbox div input[type="checkbox"]{
		width: 27px;
		}		
		
.seriesbox div select {
		width: 183px;
		background-position: 151px center;
		}		
}

/**************** Blinking ******************/


.quadrat {
 -webkit-animation: blinking-area 1s infinite; /* Safari 4+ */
  -moz-animation: blinking-area 1s infinite; /* Fx 5+ */
  -o-animation: blinking-area 1s infinite; /* Opera 12+ */
  animation: blinking-area 1s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes blinking-area {
	0%, 49% {
		background-color: #ce3434;
	}
	50%, 100% {
		background-color: #2e6282;
	}
}

.quadrat-list {
 -webkit-animation: blinking-area-list 1s infinite; /* Safari 4+ */
  -moz-animation: blinking-area-list 1s infinite; /* Fx 5+ */
  -o-animation: blinking-area-list 1s infinite; /* Opera 12+ */
  animation: blinking-area-list 1s infinite; /* IE 10+, Fx 29+ */
}

.quadrat-battery {
 -webkit-animation: blinking-battery 1s infinite; /* Safari 4+ */
  -moz-animation: blinking-battery 1s infinite; /* Fx 5+ */
  -o-animation: blinking-battery 1s infinite; /* Opera 12+ */
  animation: blinking-battery 1s infinite; /* IE 10+, Fx 29+ */
}

@-webkit-keyframes blinking-area-list {
	0%, 49% {
		background-color: #ce3434;
	}
	50%, 100% {
		background-color: #dddddd;
	}
}

@-webkit-keyframes blinking-battery {
	0%, 49% {
		background-color: #ce3434;
	}
	50%, 100% {
		background-color: #1c3b4f;
	}
}