@charset "UTF-8";

html, body
{
color: rgb(0, 0, 0); 
background-color: rgb(255, 255, 255);
margin: 0px;
padding: 0px;
font-family: Arial;
}

h5 {
    font-size: medium;
}
h6 {
    font-size: small;
}

#header{
    position: fixed;
    background-color: #fff;
    top:0px; 
    z-index:20;
	width: 100%;
}
#logoTop {
    text-align: right; 
    position: relative;
    right:24%;
    padding-top: 8px;
    padding-bottom: 3px;
}
/* der filler ist dazu da, die gesamte seite unter dem fixen header nach 
 * unten zu schieben, so dass der content nicht vom header verdeckt wird */
#filler{
    width: 100%;
    height: 175px; 
    background-color: #0078C7;
}

#table{ 
text-align: center;  
width:100%;
}

#content{
    padding-top:2%;
    padding-bottom:2%;
    width: 100%;
    background-color: rgb(0, 157, 224);   
}
#contentSub{
    padding-top:1%;
    padding-bottom:2%;
    width: 100%;
    background-color: rgb(0, 157, 224);
}

#menuehomeres{
    visibility: hidden;
    height: 0px;
    width: 100%;
    background-color: rgb(0, 157, 224);
    padding-top:0%;
    padding-bottom:0%;          
}
#menuehomeres img{
    margin-left:25%;
    margin-right:25%;
    width: 50%; 
}

#menuelabel img{
    margin: 0px;
    width: 220px;
    
    margin-right: 20px;
    vertical-align: middle;
    
}
#menuelabel {
    padding: 2px;
    text-align: right;
}

#footer{
width: 100%;
font-family: Arial; 
background-color: #0078C7;
}

#tabellefoot{
    margin-left: 32%;
    margin-right: 10%; 
    color: white;
	font-size:0.8em;	
}

#tabellefoot li{
    height:20px;
}
#tabellefoot h3{
    margin-bottom:0px;
	margin-top:5px;
}
#tabellefoot ul{
    margin-bottom:5px;
	margin-top:5px;
}

#footer2{
width: 100%;
background-color: #007BCC;
height:30px;    
}

.text:hover {
    text-shadow: 0px 0 22px #fff;
}
.text {
    -webkit-transition: all 0.7s ease;
    transition: all 0.7s ease;
}

.bild:hover {
    -webkit-transform:scale(1.2);
    transform:scale(1.2);
    -webkit-box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
    box-shadow: 0px 0px 15px 10px rgba(255, 255, 255, .75);
}
.bild {
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;
    -webkit-box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
    box-shadow: 0px 0px 15px 5px rgba(0, 185, 233, .75);
}



/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 0% 0 0% 1%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }

/*  GRID OF TWO  */
.span_2_of_2 {
	width: 100%;
}
.span_1_of_2 {
	width: 40%;
}

/*  GRID OF THREE  */
.span_3_of_3 { 
	width: 100%; 
}
.span_2_of_3 { 
	width: 62%; 
}
.span_1_of_3 { 
	width: 31%; 
}



/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */




@media screen and (max-width: 1100px) {
#tabellefoot{
    margin-left: 25%;	
}

.span_1_of_2 {
    width: 45%;
}

}

@media screen and (max-width: 900px) {
	
.col { 
	margin: 1% 0 1% 0%;
}
.span_2_of_2, .span_1_of_2 {
    width: 100%;
}
.span_3_of_3, .span_2_of_3, .span_1_of_3 { 
	width: 95%; 
}

#tabellefoot{
    margin-left: 35%;
}

#content{
    visibility: hidden;
    height: 0px;
    padding-bottom: 0%;
    padding-top: 0%;
}

#menuehomeres{
    visibility: visible;
    height:auto;
    min-height:30px;
    height:auto !important;        /* for IE as it does not support min-height  */
    height:30px;
    padding-top:2%;
    padding-bottom:5%;
}
#tabellefoot.span_1_of_2 {
    width: 92%;
}

}




@media screen and (max-width: 500px) {

#menuehomeres img{
    margin-left:10%;
    margin-right:10%;
    width: 80%;
}
#menuelabel img{
    margin: 0px;
    width: 220px;
    margin-right: 20px;
    vertical-align: middle;
}
#menuelabel {
    padding: 2px;
    text-align: right;
}

#tabellefoot{
    margin-left: 10%;
    
}


}