/*
Styles guide for the flight visualizaiton.

*/
html,body{
height:100%;
}

.fill {
    min-height: 100%;
    height: 100%;
}


.summary {
	background: #3288BD;
}

.summary-min {
	fill: #66C2A5;
}

.summary-max {
	fill: #F46D43;
}

.summary-labels {
	fill: white;
	font-family: "Helvetica Neue";
	font-size: 20px;
}


/****
***** Start of CSS for Grid Visualization
****/
.legend-tile {
	width: 36px;
	height: 36px;
}

#visualization {
	clear: all;
	margin-bottom: 20px;
	height: 285px;
}

#tiles {
	font-size: 12px;
	clear: both;
}

#tiles th {
	vertical-align: top;
	padding: 3px;
	color: #ccc;
}

/* Highlight darker text color for highest
delay time hours in Grid Visualization */
th.head0, th.head1, th.head2, th.head3 {
	color: #444 !important;
}

#tiles tr th {
	padding-top: 12px;
}

#tiles tr:first-child th {
	padding-top: 3px;
}

#tiles td {
	-webkit-perspective: 1000;
}

#tiles .tile {
	width: 38px;
	height: 38px;
	position: relative;
	-webkit-transform-style: preserve-3d;
	-webkit-transition: 0.7s;
}

.face {
	position: absolute;
	-webkit-backface-visibility: hidden;
	width: 36px;
	height: 36px;
	background: #eee;
	border: 1px solid white;
	-moz-border-radius: 4px;
	border-radius: 4px;
}

#tiles td.sel .face {
	border-color: black;
}

.face.hidden {
	display: none;
}

#tiles td.dim .screen {
	opacity: 0.6;
}

.face.back {
	-webkit-transform: rotateY(180deg);
}

.tile .screen {
	background: white;
	opacity: 0.0;
	width: 36px;
	height: 36px;
	position: absolute;
	z-index: 1337;
	-moz-border-radius: 4px;
	border-radius: 4px;
	border: 1px solid white;
}

html.ie8 #visualization, html.ie9 #visualization {
	height: 285px !important;
}

html.ie8 #tiles td.sel .face {
	border-color: white !important;
}

#ie8_percents {
	display: none;
}

#ie8_percents.ff3 {
	display: block;
}

html.ie8 #ie8_percents, #ie8_percents.ff3 {
	display: block !important;
	position: absolute;
	left: 20px;
	top: 510px;
}


/* Color pallettes for Grid Visualization */

.rbow2 .q1-11 {
	background: #5E4FA2;
}

.rbow2 .q2-11 {
	background: #3288BD;
}

.rbow2 .q3-11 {
	background: #66C2A5;
}

.rbow2 .q4-11 {
	background: #ABDDA4;
}

.rbow2 .q5-11 {
	background: #E6F598;
}

.rbow2 .q6-11 {
	background: #f6faaa;
}

.rbow2 .q7-11 {
	background: #FEE08B;
}

.rbow2 .q8-11 {
	background: #FDAE61;
}

.rbow2 .q9-11 {
	background: #F46D43;
}

.rbow2 .q10-11 {
	background: #D53E4F;
}

.rbow2 .q11-11 {
	background: #9E0142;
}

/* Another type of color palette */
.rbow1 .q1-9 {
	background:#f7fbff;
}
.rbow1 .q2-9 {
	background:#deebf7;
}
.rbow1 .q3-9 {
	background:#c6dbef;
}
.rbow1 .q4-9 {
	background:#9ecae1;
}
.rbow1 .q5-9 {
	background:#6baed6;
}
.rbow1 .q6-9 {
	background:#4292c6;
}
.rbow1 .q7-9 {
	background:#2171b5;
}
.rbow1 .q8-9 {
	background:#08519c;
}
.rbow1 .q9-9 {
	background:#08306b;
}