/*!
* Copyright 2013 Hills Holdings
* All patent, proprietary, design, use, sale, manufacturing and
* reproduction rights are reserved by Hills Holdings.
*
* Some content modified from Bootstrap v2.3.1 with licence:
* Copyright 2012 Twitter, Inc
* Licensed under the Apache License v2.0
* http://www.apache.org/licenses/LICENSE-2.0
*/

/* reset browser styles */
html, body, div, span, 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%;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1.2;
}
ol { 
	padding-left: 1.4em;
	list-style: decimal;
}
ul {
	padding-left: 1.4em;
	list-style: square;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
} 
/* end reset browser styles */

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 20px;
	color: #555555;

	max-width: 960px;
	margin: 0 auto;
}

/* top banner */
.ban {
	background-color: rgb(195,195,195);
	position: fixed;
	right: 0;
	left: 0;
}

.ban p {
	padding: 15px 20px 15px;
	color: #fff;
	font-size: 20px;
	font-weight: 200;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
	max-width: 960px;
	margin: 0 auto;
}

.mnu-btn {
	display:none; /* hidden until shown in phone width */
	margin: 12px 10px;
	background: rgb(110,110,110);
	padding: 3px;
	float: right;
	height: auto;
}

.login {
	padding: 80px 20px;
	margin: 0 auto;
	max-width: 300px;
}

.login > form {
	border-radius: 4px;
	border: 1px solid #e3e3e3;
	background-color: #f5f5f5;
	padding: 19px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.login h1 {
	font-size: 24px;
	font-weight: bold;
	margin: 15px 0 10px;
}

.login input {
	padding: 6px;
	width: 200px;
}

.login input[type="submit"] {
	background-color: #2fa4e7;
	width: auto;
	margin-top: 20px;
}

.login label {
	width: 160px;
	color: #7b7b7b;
	display: inline-block;
	margin: 10px 0 5px;
}

/* nav bar, common styles */
.nav {
	padding: 0;
	list-style: none;
	border-radius: 6px;
	box-shadow: 0 1px 4px rgba(0,0,0,.065);
}

.nav a {
	color: #0088cc;
	border: 1px solid #e5e5e5;		
	padding: 8px 14px;
	display: block;
	margin: 0 0 -1px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	line-height: 20px;
}

/* round the corners on the bottom */
.nav > li:last-child > a {
	border-radius: 0 0 6px 6px;
}

.nav a:hover {
	background-color: #f5f5f5;
	text-decoration: none;	
	outline: 0;	
	color: #005580;
}

/* special format for active nav item */
.nav > .active > a {
	position: relative;
	z-index: 2;
	color: #fff;
	text-shadow: 0 1px 0 rgba(0,0,0,.15);
	/*background-color: #0088cc; original blue color */
	background: rgb(110,110,110);
	padding: 9px 15px;
	border: 0;
}

/* nav bar, styles specific for larger screens */
@media (min-width: 768px) {
	#mnu {
		float: left;
		position: fixed;
		width: 175px;
		padding-top: 80px;
		padding-left: 10px;
	}

	.nav {
		margin: 30px 0 0;
	}

	/* round the corners on the top */
	.nav > li:first-child > a {
		/*-webkit-border-radius: 6px 6px 0 0;
		-moz-border-radius: 6px 6px 0 0;*/
		border-radius: 6px 6px 0 0;
	}
}

/* the main content section */
.main {
	padding-top: 80px;
	margin-left: 200px;
}
	.mainrm {
	padding-top: 80px;
	margin-left: 200px;
		width:360px;
	}
/* boxed container for a single zone or area for example */
.box {
	box-sizing: border-box;
	float: left;
	width: 296px;
	margin-left: 30px;
	margin-bottom: 30px;
	border-radius: 6px;
	border: 1px solid #e5e5e5;
	box-shadow: 0 5px 4px rgba(0,0,0,.5);
	padding: 10px;
	text-align: center;
}

.box h1 {
	padding: 5px 10px 95px 10px;
	font-size: 20px;
	line-height: 1.5em;
	color: #FFF;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
	background-color: #0088cc;
	border-radius: 4px 4px 0 0;
	height: 20px;
	text-align: left;
}

#ct h1 {
	padding-bottom: 15px;
}

.box h2 {
	font-size: 20px;
	line-height: 55px;
	margin-top: -60px;
	margin-bottom: 16px;
	background-color:#fff;
	color: #999;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

.box h3 {
	padding: 5px 10px 95px 10px;
	font-size: 20px;
	line-height: 1.5em;
	color: #FFF;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
	background-color: #0088cc;
	border-radius: 4px 4px 0 0;
	height: 30px;
	text-align: left;
}

.box h5 {
	padding: 5px 10px 200px 10px;
	font-size: 20px;
	line-height: 1.5em;
	color: #FFF;
	text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
	background-color: #0088cc;
	border-radius: 4px 4px 0 0;
	height: 30px;
	text-align: left;
}

.box h6 {
	font-size: 20px;
	line-height: 40px;
	margin-top: -165px;
	margin-bottom: 16px;
	background-color:#fff;
	color: #999;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.2);
}

/* specific sizing for buttons inside a box */
.box button {
	width: 65px;
	height: 60px;
	padding: 5px 0;
}
/* a button 4 times the width of standard button */
.box .btn-4x {
	width:274px;
	height:50px;
	margin-top:10px;
}
/* a button half the height of standard button */
.box .btn-hf {
	width:65px;
	height:40px;
	margin-top:10px;
	margin-bottom:10px;
}
/*narrow vert spacing for config*/
.close 
{
	margin-top: 1px;	
	margin-bottom: 4px;	
}

/* icon positions from css sprite for areas page */
.ba > .bi {	background-position: 17px 0px; }
.bs > .bi { background-position: 17px -32px; }
.bo > .bi {	background-position: 16px -64px; }
.bc > .bi {	background-position: 17px -96px; }

/* zones page */
.bb > .bi {	background-position: 17px -128px; }


.bi {
	height: 32px;
	background-image: url(/images/icon32.png);	
	background-repeat: no-repeat;
}

button, input[type="submit"], input[type="button"] {
	padding: 5px 10px;
	box-sizing: border-box;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -32px 3px 0px rgba(0,0,0,0.1);

	color: #fff;
	font-weight: bold;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);

	border: 1px solid ;
	border-radius: 4px;
	border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
	background: #999;
}

button:hover, input[type="submit"]:hover {
	cursor: pointer; 
}

button:active, input[type="submit"]:active {
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 -32px 3px 0px rgba(0,0,0,0.1);
} 

/* style for text area on history page */
#event {
	resize: none;
	font: inherit;
	color: inherit;
	border: none;
	min-height: 150px;
	overflow: auto; /* stop scrollbar in IE */

}

/* styles for the form pages (users/installer) */

.cfg-outer {
	/* padding top is from .main style and changes for phone */
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 20px;
}

.cfg-inner {
	border-radius: 4px;
	border: 1px solid #e3e3e3;
	background-color: #f5f5f5;
	padding: 19px;
	box-shadow: inset 0 1px 1px rgba(0,0,0,0.05);
}

.cfg-outer h1 {
	font-size: 25px;
	line-height: 40px;
}

.cfg-inner input[type="text"], .sel {
	padding: 6px;
	color: #555;
	display: block;
}

#fullmenu {
	font-weight: bold;
	margin: 10px 0;
}

.cfg-inner a:hover {
	color: #0088cc;
}

.cfg-inner p {
	float: left;
	width: 150px;
}

.cfg-inner h2 {
	margin-top: 10px;
}
.tsel{
	font-size: 1.1em;
	margin: 10px,20px,0,0;
}

#usel {
	font-size: 1.5em;
	margin: 10px 0;
}

/* styles for phone */
@media (max-width: 768px) {
	/*.hidden-phone {
		display:none !important;
	}*/

	.login {
		padding: 30px 20px;	
	}

	#mnu {
		display:none;	
	}

	.mnu-btn {
		display:inherit;
	}

	.main {
		margin-left: 0;
		padding-top: 0;
	}
	.mainrm {
		margin-left: 0;
		padding-top: 0;
		width:inherit;
	}
	.cfg-outer, .cfg-inner {
		padding: 5px;
	}	

	/*.main > fieldset > div {
	margin-left: 5px;
	}*/

	/* unfix the banner on small screens */
	.ban {
		position: inherit;
	}

	/* show only single centred box */
	.box {
		margin: 20px auto;
		float: none;
	}
	/*narrow vert spacing for config*/
	.close 
	{
	margin-top: 1px;	
	margin-bottom: 4px;	
	}
/*@media (min-width: 768px) {
	.visible-phone {
		display:none !important;
	}
}*/
}
.bg-gry { background-color: #999 !important; }
.bg-grn { background-color: rgb(75,183,72) !important; }
.bg-red { background-color: rgb(228,59,53) !important; }
.bg-yel { background: rgb(252,210,8) !important; }
.bg-blu { background: #0088cc !important; }
.bg-org { background: orange !important; }

.hide {
	position: absolute !important;
	top: -9999px !important;
	left: -9999px !important;
}

.itemlist {
	width: 350px;
	display:inline;
}
.itemlisthide {
	width: 350px;
	display:none;
}
.itemtitle {
	font-weight: bold;
	min-width: 250px;
}
.itemnum {
	max-width: 100px;
}
.rs {float: right;}
.rst {float: right;}
.ls {float:left;}