body {
	background-color: #fff;
	font-size:	16px;
	color:		#8a8a8a;
}

* {
	transition:	background 0.15s ease-in-out 0s, color 0.15s ease-in-out 0s, border 0.15s ease-in-out 0s;
}

header {
	position:	absolute;
	width:		100%;
	height:		120px;
	top:		0;
	bottom:		0;
	padding:	0;
	margin:		0;
	font-size:	32px;
}

header, header a {
	color:		#8a8a8a;
}
header a:hover {
	color:		#000;
	text-decoration: none;
}

#logo {
	padding:	10px;
	height:		90px;
	width:		90px;
	background:	#fff;
}
#logo:hover {
	background:	#000;
}

main {
	position:	absolute;
	top:		120px;
	bottom:		0;
	padding:	0;
	margin:		0;
}

#map2d, .map2d {
	color:		#fff;
	font-size:	20px;
	/*margin:		0 20px 0 20px;*/
}

#map2d td div, .map2d td div {
	height:		90px;
	width:		90px;
	border:		1px dotted #444;
	text-align:	center;
}

.ClosedFloor {
	background-image: url(/public/img/graph/textures/dc/floor_closed.png);
}

.OpenedFloor {
	background-image: url(/public/img/graph/textures/dc/floor_opened.png);
	-webkit-transform: rotate(90deg);
	-moz-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	-o-transform: rotate(90deg);
	transform: rotate(90deg);
}

.AirConditioning {
	background-image: url(/public/img/graph/textures/dc/conditioning.png);
}
.rotate180 .AirConditioning {
	background-image: url(/public/img/graph/textures/dc/conditioning_rot180.png);
}

.ServerRack {
	background-image: url(/public/img/graph/textures/dc/server_rack.png);
}
.rotate180 .ServerRack {
	background-image: url(/public/img/graph/textures/dc/server_rack_rot180.png);
}

.ClosedFloor, .OpenedFloor, .AirConditioning, .ServerRack {
	background-size: cover;
}
/*
.rotate180 .ServerRack, .rotate180 .AirConditioning {
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}*/

ul {
	margin:			0;
	padding:		0;
	list-style-type:	none;
}

li {
}

.clickable {
	border:			1px solid #7f7f7f;
}

#map2d div.clickable:hover, .clickable:hover {
	border:			1px solid #ff8000;
}

.container {
	width:			100%;
	height:			100%;
}

#dashboardLayout td {
	vertical-align:		top;
}
#sensors {
	font-size:		20px;
	white-space:		nowrap;
	border-top:		1px dotted #888;
	border-right:		1px dotted #888;
}
#sensors a {
	color:			#8a8a8a;
}
#sensors a:hover {
	color:			#000;
	text-decoration:	none;
}
main, main table {
	width:			100%;
}

#graphs {
	border-top:		1px dotted #888;
	border-bottom:		1px dotted #888;
	background-color:	#ffffff;
}

#graphs > div {
	width:			100%;
	height:			800px;
}
#chartDiv {
}

.comment {
	font-size:		16px;
}

#mobileDashboardLayout {
	display:		none;
	position:		absolute;
	top:			0;
	left:			0;
	width:			100%;
	height:			100%;
	z-index:		-1;
	color:			#fff;
	background:		rgba(0,24,0,0.92);
	z-index:		1;
	transition:		background 1s ease-in-out 0s;
	text-align:		center;
	font-size:		54px;
}
div#mobileDashboardLayout.warning {
	background:		rgba(32,32,0,0.92);
}
div#mobileDashboardLayout.critical {
	background:		rgba(32,0,0,0.92);
}
div#mobileDashboardLayout.unknown {
	background:		rgba(24,24,24,0.92);
}

@media all and (max-width: 800px) {	/* mobile version */
	header {
		display:		none;
	}
	main {
		top:			0;
	}
	#mapContainer, #sensors, #chartConfig {
		display:		none;
	}
	div#chartDiv, div#mobileDashboardLayout {
		display:		block;
	}
	div#chartDiv {
		position:		absolute;
		top:			0;
		left:			0;
		width:			100%;
		height:			100%;
		z-index:		-1;
	}
}

#reserve-dc {
	display:	none;
}

