@charset "UTF-8";

/*	||||||||||||||||||||||||||||
	||||||||||||||||||||||||||||
	FONTS
	||||||||||||||||||||||||||||
	||||||||||||||||||||||||||||		*/

body, p, a, a:visited, a:hover, a:focus, ul, li {

}
h1,h2,h3,h4{
}

body{
overflow:hidden;
}

/*	||||||||||||||||||||||||||||
	||||||||||||||||||||||||||||
	HEADER
	||||||||||||||||||||||||||||
	||||||||||||||||||||||||||||		*/

header h1{
display: none;
}
ul li{
list-style: none;
}

/*	||||||||||||||||||||||||||||
	||||||||||||||||||||||||||||
	CONTENT
	||||||||||||||||||||||||||||
	||||||||||||||||||||||||||||		*/

div#wrapper{
background-color: #F0EAE6;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 0;
}
div.content{
height:960px;
width:720px;
}
.absolutecenter{
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
#appWrapper{
border: 1px solid #999;
box-shadow: 0 0 6px #999;
z-index: -200;
}
footer{
width: 720px;
height: 250px;
padding-top: 60px;
background: url(../img/institutions.png) bottom center no-repeat;
z-index: -100;
}
footer nav#left{
float:left;
width: 320px;
text-align: center;
}
footer nav#right{
float:left;
width: 400px;
text-align: center;
}
footer nav#left span.label{
width: 320px;
}
footer nav#right span.label{
width: 400px;
}

footer nav ul{
margin-top: 36px;
}
footer nav ul li{
display: inline-block;
padding: 3px 12px 4px 12px;
background-color: #666;
border-radius: 14px;
margin-left: 6px;
}
footer nav ul li:hover{
background-color: #333;
}
span.label{
display: inline-block;

font-family: 'droid sans';
font-size: 0.75em;
color: #555;
}


a,a:visited{
font-family: 'droid sans';
font-size: 0.75em;
color: white;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}
a#backTo{
float: right;
padding: 0 12px 6px 0;
display: block;
z-index: 900;
}
a#backTo:hover{
color: #555;
}



/*	||||||||||||||||||||||||||||
	||||||||||||||||||||||||||||
	ADD 600PX HEIGHT
	MEDIA QUERY
	BREAK POINT
	||||||||||||||||||||||||||||
	||||||||||||||||||||||||||||		*/

@media all and (max-width: 900px), all and (max-height: 916px)
{

div#wrapper{
background-color: #F0EAE6;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 0;
}
div.content{
height:100%;
width:75%;
}
.absolutecenter{
margin: 0;
position: relative;
top: 0; left: 25%;
}
#appWrapper{
width:100%;
height: 100%;
z-index: 1000;
}

a#backTo {
position: fixed;
float: none;
left:20px;
top: 80px;

color: #555;
}
footer{
position: fixed;
top: 120px;
left: 0;
width: 28%;
height:80%;
padding-top: 0;
padding-left: 20px;
background: url(../img/institutions_hoch.png) bottom left no-repeat;
}
footer nav#left{
float:left;
width: auto;
text-align: left;
}
footer nav#right{
float:left;
width: auto;
text-align: left;
clear: both;
}
footer nav#left span.label{
width: auto;
}
footer nav#right span.label{
width: auto;
}

footer nav#left ul{
margin-top: 20px;
margin-bottom: 146px;
}
footer nav#right ul{
margin-top: 20px;
margin-bottom:0;
}
footer nav ul li{
display: inline;
width: auto;
padding: 3px 12px 4px 12px;
background-color: #666;
border-radius: 14px;
margin-top: 6px;
margin-left: 0;
float: left;
clear: both;
}
footer nav ul li:hover{
background-color: #333;
}
span.label{
position: absolute;
display: inline-block;

font-family: 'droid sans';
font-size: 0.75em;
color: #555;
}

}

@media all and (max-width: 900px)
{

div#wrapper{
background-color: #F0EAE6;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
z-index: 0;
}
div.content{
height:100%;
width:100%;
}
.absolutecenter{
margin: 0;
position: relative;
top: 0; left: 0;
}
#appWrapper{
width:100%;
height: 100%;
z-index: 1000;
}

a#backTo,
footer,
span.label{
display: none;
}


}