/* CSS Document */

#left-border {
	display: inline-block;
	width: 250px;
	float: left;
	/*height: 550px;*/
}

#content-area {
	/*position: fixed;*/
	position:absolute;
    left: 250px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    max-width: 1730px;
	display: inline-block;
	padding: 0 0 0 0;
	line-height: 1.3em;
	vertical-align: top;
}

#slides-main-menu {
	position: relative;
	top: 10px;
	width:100%;
	color: #FFFFFF;
	font-weight:bold;
}

#slides-main-menu > a{
	display:block;
	margin: 5px 10px;
	padding: 0px 15px 0 20px;
	border: 1px solid rgb(210,210,210);
	border-radius: 6px;
}

#slides-main-menu a.current, #slides-main-menu a:hover {
	color:#FFFFFF;
	text-decoration:none;
	cursor: pointer;
}

#slides-data-selector {
	margin-right:5px;
	font-weight:normal;
	font-size:0.9em;
	color:#FFB25A;
	line-height:1em;
	padding: 0 0 0 10px;
	text-indent: -10px;
}

#slides-data-selector a{
	display:block;
	padding: 0px 5px 0 50px;
}

#slides-data-selector a.current, #slides-data-selector a:hover {
	color:#FFFFFF;
	text-decoration:none;
	cursor: pointer;
}

a#data-legend {
	border:1px solid rgba(255,255,255,0);
	padding-left:40px;
}

#legend {
	position:absolute;
	color:#FFFFFF;
	font-size:16px;
	line-height: 1.2em;
	top: 100px; left: 260px;
	border: 1px solid #FFFFFF;
	border-radius: 6px;
	background-color: rgba(194,81,19,0.8);
	max-width: 17em;
	padding: 0.5em;
	opacity: 0;
	z-index: -1;
	display:none;
}

#legend table {
	border-collapse:separate;
	border-spacing: 0.5em;
}
#legend table td{
	vertical-align:top;
}

div.legend { float:right; margin: 2px 0.5em 0 0.3em; border: 1px solid #FFFFFF; border-radius: 6px; height: 1em; width: 1em;}
.legend.clear { background-color: transparent; }
.legend.orange { background-color: #F27200; }
.legend.green { background-color: #5F9E1E; }

#dataDisplay 
{    
	position:relative;
	height: 100%;
	min-height: 550px;
}


#label {
	position: absolute;
	top: 30%; 
	width: 100%;
	text-align:center;
	color: #fff; 
	line-height: 1em; 
	font-size: 1.4em; 
	opacity: 1;
	vertical-align:top;
	padding-top: 1em;
}

#icon-holder {
	position:relative;
	vertical-align: bottom;
}

.icon {
	display: inline-block;
	width: 14.2857%;
	cursor:pointer
	/*background:center no-repeat;
	background-size:50%;*/
}

.icon>a>img{ margin: 10%; width: 80%; text-align: center; max-height: 100%;}

.iconValue 
{
	visibility:hidden;
	display: inline-block;
	width: 14.2857%;
	text-align:center;
	font-weight:bold;
	color:#FFFFFF;
	font-size: 1.5em;
	line-height: 1em;
	margin-top:0.25em;
}

div#iconLabelHolder{
	clear:both;
	position:relative;
}

a.iconLabel {
	opacity:1;
	display: inline-block;
	color:#FFFFFF;
	line-height: 1em;
	width: 14.2857%;
	text-align:center;
	vertical-align:text-top;
	margin-top:-0.5em;
}

#allbars{width: 100%; height: 58%; vertical-align: bottom; padding-top:5.1em;}
.barcontainer{display: inline-block; width: 14.2857%; height: 100%; /*min-height: 340px;*/ position: relative; }
.bar{width: 56%; margin: 0 22% 0 22%; border: none; background-color: transparent; position: absolute; bottom: 0; height: 0%; }
.barFill{width:100%; height:100%;}
.bar.one .barFill, .bar.two .barFill, .bar.three .barFill, .bar.five .barFill, .bar.six .barFill, .bar.seven  .barFill{ background-color: #F27200; }
.bar.four .barFill { background-color: #5F9E1E;}

@media screen and (max-width:768px) 
{
    .iconValue {font-size: 1.0em;}
    #label {font-size: 1.2em;}
}

@media screen and (max-width:600px) 
{
    .iconValue {font-size: 0.8em;}
}

@media only screen and (max-height: 580px) 
{
	html, body {
		height:580px;
	}
}