@charset "utf-8";
/* Common CSS for DAS system. */



.centerWrapper {
	max-width:900px;
	margin-left:auto;
	margin-right:auto;
	
}
.contentBox {
	border:4px solid #A52121;
	border-radius:50px 15px 15px 15px;
	position:relative;
	padding-left:20px;
	padding-right:20px;
	box-shadow: 4px 4px 8px -2px;
	

}

.contentBox:before {
	content:url(../images/SystemLogo-100.png);
	display:block;
	position:absolute;
	top:-8px;
	left:-9px;
	

}

.contentBox header {
	margin-left:75px;
	text-align:center;
	min-height:100px;
	margin-top:0px;
	margin-bottom:0;
}

.contentBox header h2 {
	margin-top:5px;
	margin-bottom:10px;
	
}

.contentBox header h3 {
	margin-top:5px;
	margin-bottom:5px;
}


.contentBox .locationDetails h3 {
	margin-bottom:4px;
	
}

.contentBox main h4 {
	font-size:0.8em;
	margin-top:4px;
	
}

.contentBox main h4 button {
	float:right;
}

.contentBox main section {
	border-bottom:1px solid #000000;
	padding-bottom:15px;
	margin-bottom:15px;
}

.contentBox main section:last-of-type {
	border-bottom:none;
}


.contentBox form.centered {
	margin-left:auto;
	margin-right:auto;
	min-width:300px;
	width:100%;
	text-align:center;
	margin-bottom:20px;
}

.contentBox form.centered label {
	
	display:block;
	float:left;
	
	min-width:90px;

	
	text-align:right;
	margin-right:15px;
}


.contentBox form.centered p {
	text-align:left;
}

.contentBox form.centered p:after {
	content:"";
	display:block;
	clear:left;
}


.contentBox button[name=locationsNew]:before{
	content:url(../images/locationNew-40.png);
	display:block;
	
}

.contentBox button[name=locationsNew] {
	border:none;
	background:none;
	float:right;
	
}

.contentBox button[name=ownersNew]:before{
	content:url(../images/ownerNew-40.png);
	display:block;
	
}

.contentBox button[name=ownersNew] {
	border:none;
	background:none;
	float:right;
	
}

.contentBox button[name=usersNew]:before{
	content:url(../images/userNew-40.png);
	display:block;
	
}

.contentBox button[name=usersNew] {
	border:none;
	background:none;
	float:right;
	
}


.contentBox button[name=deviceNew]:before, .contentBox form.unsubmittable button[name=deviceEdit]:before{
	content:url(../images/deviceNew-40.png);
	display:block;
	
}

.contentBox button[name=deviceNew] {
	border:none;
	background:none;
	float:right;
}

.contentBox form.unsubmittable button[name=deviceEdit] {
	border:none;
	background:none;

}

.contentBox form label.searchBox {
	font-size:24px;
	display:block;
}

.contentBox form.unsubmittable:after {
	display:block;
	content:"";
	clear:both;
}


.contentBox table.dataTable {
	width:100%;
	margin-left:auto;
	margin-right:auto;
	border-spacing:0;
	border-collapse:collapse;
	margin-bottom:10px;
}

.contentBox table.dataTable th  {
	border-bottom:1px solid #000000;
	
}
.contentBox table.dataTable td {
	border-bottom:1px solid #000000;
	text-align:center;
	
}

.contentBox table.dataTable tr:hover td{
	background-color:#FF3333;
}

/* in order to fire click events for IOS, you must define cursor:pointer in a device's normal state, not hover */
.contentBox table.dataTable tr td{
	cursor:pointer;
}

.contentBox table.dataTable tr:first-of-type:hover td{
	background-color:transparent;
}

/* in order to fire click events for IOS, you must define cursor:pointer in a device's normal state, not hover */
.contentBox table.dataTable tr:first-of-type td{
	cursor:pointer;
}

.contentBox table.dataTable td[colspan] {
	text-align:center;
}

.contentBox table.dataTable td.online {
	background-color:#009933;
}

.contentBox table.dataTable td.offline {
	background-color:#993300;
}

.contentBox table.dataTable td.online span, .contentBox table.dataTable td.offline span {
	font-size:0.8em;
	display:block;
}


.contentBox div.door ul {
	list-style:none;
	margin:0;
	padding:0;
}

.contentBox div.door ul li:first-of-type {
	width:30%;
}

.contentBox div.door ul li {
	width:35%;
	min-height:30px;
	float:left
}

.contentBox div.door ul:after {
	display:block;
	content:"";
	clear:left;
}

.contentBox input[readonly] {
	border:none;
	
}

/* Fixes for IOS to make sure buttons fire click events */
button {
	cursor:pointer;
}

/********** Page/Content specific selectors ****************/

/***** Door and Lock States ********/

/* Hide Unprogrammed doors */
.contentBox div.door.unprogrammed {
	display:none;
}

.contentBox div.door {
	position:relative;
	margin-bottom:3px;
}

.contentBox div.door.inactive:after {
	content:"OFFLINE";
	text-align:center;
	padding-top:45px;
	display:block;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:rgba(200,200,200,0.95);
}

.contentBox div.door ul li[data-type=state]:before {
	margin-left:auto;
	margin-right:auto;
	width:100px;
	display:block;
	
}

.contentBox div.door ul li[data-type=state]:after {
	display:block;
	margin-left:auto;
	margin-right:auto;
	width:100px;
	text-align:center;
}

.contentBox div.door ul li.doorClosed:before {
	content:url(../images/doorClosed-100.png);
}

.contentBox div.door ul li.doorClosed:after {
	content:"Closed";
}

.contentBox div.door ul li.doorOpen:before {
	content:url(../images/doorOpen-100.png);
}

.contentBox div.door ul li.doorOpen:after {
	content:"Open";
}

.contentBox div.door ul li.doorUnknown:before {
	content:"";
	background-image:url(../images/doorUnknown-100.png);	
	width:100px;
	height:100px;
	display:block;
	/*content:url(../images/doorUnknown-100.png);	*/
}

.contentBox div.door ul li.doorUnknown:after {
	content:"Unknown";
}

.contentBox div.door ul li.doorLocked:before {
	/* content:url(../images/doorLocked-100.png); */
	content:"";
	background-image:url(../images/doorLocked-100.png);	
	width:100px;
	height:100px;
	display:block;
}

.contentBox div.door ul li.doorLocked:after {
	content:"Locked";
}

.contentBox div.door ul li.doorUnlocked:before {
/*	content:url(../images/doorUnlocked-100.png); */
	content:"";
	background-image:url(../images/doorUnlocked-100.png);	
	width:100px;
	height:100px;
	display:block;
		
}

.contentBox div.door ul li.doorUnlocked:after {
	content:"Unlocked";
}

.contentBox div.door ul li[data-type=state].loading:before {
	/* This should override the ones above since we also include the attribute selector which makes us more specific */
	content:url(../images/loading_100.svg); 
}

.contentBox div.door ul li[data-type=state].loading:after {
	color:#CCCCCC;
}

/* Work around for iOS */
.contentBox div.door ul li[data-type=state][data-key] {
	cursor:pointer;
}


/****** Done Door and Lock States ***/

.contentBox p.fwUpdate label {
	background-color:#66CC99;
}
.contentBox p.fwUpdate button[name=fwUpdateDevice] {
	margin-left:20px;
}



/********** Done Page/Content specific selectors ***********/

.contentBox header select[name=mainMenu] {
	font-size:30px;
}

.contentBox table.dataTable th {
	padding-bottom:5px;
}

.contentBox table.dataTable td{
	padding-bottom:5px;
	padding-top:5px;
}
	
	

/********** Mobile oriented/improvement selectors ************/
@media only screen and (max-width: 768px) {
	
	
	label {
		font-size:0.8em;
	}
	
	select {
		max-width:180px;
	}
	
	.contentBox table.dataTable th {
		font-size:0.8em;
	}
	
	.contentBox table.dataTable td{
		font-size:0.8em;
		padding-top:10px;
		padding-bottom:10px;
	}
	
	/* Hide Hardware/Firmare when on mobile */
	.contentBox table.dataTable.devicesList tr th:nth-of-type(3) ~ th, .contentBox table.dataTable.devicesList tr td:nth-of-type(3) ~ td {
		display:none;
	}
	/*
	.contentBox table.dataTable.devicesList tr th:nth-of-type(5), .contentBox table.dataTable.devicesList tr td:nth-of-type(5) {
		display:none;
	}*/
	
	
	
	
}