@charset "utf-8";
/* CSS Document */

@font-face{
    font-family: BariolBold;
    src: url(/library/global_includes/fonts/Bariol_Bold.otf);
    font-weight:400;
}

body{
	background-color:#333333;
	font-family:BariolBold, Verdana, Geneva, sans-serif;
	margin:0px;
	color:#FFFFFF;
	font-size:160%;
}

#left_banner{
	position:absolute;
	top:0px;
	left:0px;
	width:20%;
	height:100%;
	background-color:#000000;
	background-position:center center;
	background-size:100% 100%;
}

#date{
	font-size:120%;
	margin-top:12%;
	text-align:center;	
	text-shadow:5px 5px 10px rgba(0,0,0,1);
}

#time{
	font-size:300%;
	margin-top:5px;
	text-align:center;
	text-shadow:5px 5px 10px rgba(0,0,0,1);
}

.progress{
	position:absolute;
	right:3%;
	top:3%;
	height:40px;
	width:400px;
	background-color:white;
	border-radius:5px;
	color:#333333;
	text-align:right;
	font-size:80%;
}

#progress_text{
	background-color:transparent;
	padding:10px
}

#central_content{
	position:absolute;
	top:0px;
	left:25%;
	width:75%;
	height:100%;
}

.library_container{
	margin-top:3%;
}

.library_container h1{
	font-size:150%;
	margin-top:0px;
	margin-bottom:40px;
}

.library_container h1 span{
	display:block;
	font-size:200%;
}

div.group{
	margin-bottom:20px;
	height:110px;
	font-size:170%;
}

div.group.shade{
	background-color:#4b4b4b;	
}

div.group span.indicator{
	width:90px;
	border-radius:10px 0px 0px 10px;
	border:5px solid white;
	border-right:none;
	height:100px;
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	font-size:60%;
}

div.group span.scale_container{
	width:20px;
	height:100px;
	border:5px solid #FFFFFF;
	display:inline-block;
	position:relative;
	vertical-align:middle;
	border-radius:0px 10px 10px 0px;
	margin-right:40px;
}

div.group span.scale_container div.scale_value{
	width:100%;
	bottom:0px;
	background-color:white;
	/*opacity:0.75;*/
	position:absolute;
	bottom:0px;
	margin-right:40px;
}

div.group span.group_name{
	display:inline-block;
	line-height:50px;
	vertical-align:middle;
	margin-right:15px;
}

div.group span.group_name small{font-size:50%;}

div.group span.indicator.red,
div#key span.red{background-color:red;}

div.group span.indicator.amber,
div#key span.amber{background-color:orange;}

div.group span.indicator.green,
div#key span.green{background-color:green;}

div.updated{
	margin-top:40px;
	font-size:150%;
	color:#999999;
}

div#key{
	font-size:150%;
	color:#999999;
	position:absolute;
	bottom:3%;
	right:3%;
}

div#key span{
	display:inline-block;
	margin-left:30px;
	border-radius:5px;
	width:25px;
	height:25px;
	border:2px solid #FFFFFF;
}

div#key span.percentage{
	position:relative;
}

div#key span.percentage div{
	position:absolute;
	bottom:0px;
	width:100%;
	height:50%;
	background-color:white;
}

/* smaller plasma screens */
@media (max-height: 1000px){
	
	#date{font-size:100%;}
	
	.library_container h1{font-size:130%;}
	
	div.group{
		margin-bottom:10px;
		height:65px;
		font-size:150%;
	}
	
	div.group span.indicator{
		width:50px;
		height:55px;
	}
	
	div.group span.scale_container{
		width:15px;
		height:55px;
		margin-right:30px;
	}
		
}

/* mobile */
@media (max-width: 700px){
	
	body{font-size:100%;cursor:auto;}
	
	.library_container h1{margin-bottom:20px;}
	
	.library_container h1 span{font-size:150%;}
	
	#left_banner,
	.progress{display:none;}
	
	#central_content{
		left:0px;
		width:94%;
		margin:1% 3% 1% 3%;
	}
	
	div.group span.indicator{
		border-width:2px;
		width:40px;
		height:50px;
	}
	
	div.group span.scale_container{
		border-width:2px;
		width:10px;
		height:50px;
		margin-right:20px;
	}
	
	div.group span.scale_container div.scale_value{
		width:100%;
		bottom:0px;
		background-color:white;
		opacity:0.75;
		position:absolute;
		bottom:0px;
		margin-right:40px;
	}
	
	div.group span.group_name{
		width:65%;
		line-height:100% !important;
		font-size:80%;
	}
	
	div.updated{
		font-size:100%;
		margin-top:10px;
		margin-bottom:10px;
	}
	
	div#key{
		text-align:left;
		/*position:static;*/
		top:15px;
		right:0px;
		font-size:80%;
		margin-bottom:10px;
	}
	
	div#key span{
		width:15px;
		height:15px;
		margin-left:10px;
	}
	
	div#key span.percentage{
		margin-left:0px;
	}
	
}