/* METRO UI TEMPLATE
/* Copyright 2012 Thomas Verelst, http://metro-webdesign.info*/

/*CSS RESET*/
html,body,iv,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup, tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }
strong{font-weight:bolder;}
:focus { outline:0; }
body { line-height:1.4; color:#000; }
ol,ul { list-style:square;margin-left:20px;} 
table { border-collapse:separate; border-spacing:0; }
caption,th,td { text-align:left; font-weight:normal; } 
a img{border:none;}

/*GENERAL*/
html{
	margin:0;
	padding:0;
	overflow:scroll;
	min-width:300px;
	font-weight:normal;
	z-index:-5;
	background:#FFF;	
	height:100%;
	width:auto;
}
body{
	position:static;
	margin:0;
	padding:0;
	min-width:300px;
	min-height:100%;
	width:auto;
}

/*LAYOUT PARTS*/
header{
	line-height:1;
	position:fixed;
	top:0;
	left:0;
	right:0;
	width:100%;
	z-index:10;
}
#headerWrapper{
	position:relative;
	width:100%;
	min-height:20px;
}
#headerCenter{
	position:relative;
	max-width:900px;
	padding:0 15px 0 15px;
	margin: 0 auto 7px auto;
	overflow:hidden;
}
#headerTitles{
	position:relative;
	float:left;
	display:inline-block;
}
#headerTitles>h1{
	margin:7px 0 3px 0;
}
#headerTitles>h2{
	margin: 5px 0 5px 3px;
}
#wrapper{
	margin:0 0 0 0;
	padding:90px 0 1px 0;
	position:relative;
	z-index:0;
}
#centerWrapper{
	position:relative;
	max-width: 900px;
	margin:0 auto 15px auto;
	padding: 0px 15px 0px 15px;
}
#contentWrapper{
	min-height:300px;
	margin: -40px 0 0 0;	
	padding:35px 20px 70px 20px;
	display:none;	
	overflow:visible;
}
#content{
	min-height:200px;
	position:relative;	
	display:block;
	margin:0;
	padding:0;
	font-weight:normal;
	height:auto;
}
#tileContainer{
	display:none;
	position:relative;		
	font-weight:normal;
	margin-top:30px;
}
footer{ /*show a little footer in the rightdown corner*/
	position:fixed;
	bottom:0;
	right:0;
	padding:1px;
	font-weight:lighter;
	text-decoration:none;
}
footer:hover{
	cursor:default;
}
.navArrows{
	position:absolute;
	margin-top:60px;
	opacity: 0.5;
	filter:  alpha(opacity=50);
	height:32px;
	display:none;
}
.navArrows:hover{
	cursor:pointer;
}
.navArrows.hidden{
	opacity:0;
}
/* General Navigation */
.groupTitle{ /*the title of the tilegroups*/	
	position:absolute;
	text-decoration:none;
	white-space: nowrap;
}
.groupTitle>h3{
	margin:0;
	font-weight:lighter;
}

#bgImage{ position:fixed; top:0; left:0; z-index:-4; min-width:125%;min-height:100%;}
#catchScroll{position:fixed;top:0; left:0;width:100%;height:100%;z-index:-1;}
#mobileOnDesktop{
	color:#FFF;
	padding:5px;
	text-decoration:none;
	position:absolute;
	top:0;left:0;
	background-color:#668000;
	z-index:999;
}
#mobileOnDesktop:hover, #mobileOnDesktop:active{
	color:#FFF;
	text-decoration:underline;
	border:1px solid #FFF;
}
/*Sidebar */
.sidebar{
	position:relative;
	padding:0;
	margin:0;	
	height:100%;
	top:0;
	bottom:0;
}
.sidebar-left{
	margin: 5px 15px 0 0;
	float:left;
}
.sidebar-right{
	margin: 5px 0 0 15px;
	float:right;
}
.sidebar-top{
	margin: 5px 0 5px 0;
	width:100%;
}