@font-face {
   font-family: Robot;
   src: url('/res/rob-bd-webfont.woff');

}
@font-face {
   font-family: Carlig;
   src: url('/res/car-lig-webfont.woff2');

}


body{

   background : #AAAAAA;
   margin : 0px;
   font-family : Carlig, Arial, Helvetica, sans-serif;
   color : white;
   font-size : 18px;
}
td{
   font-family : Carlig, Arial, Helvetica, sans-serif;
}

#main{

   position : relative;
   width : 1024px;
   margin-left : auto;
   margin-right : auto;
   margin-top : px;
   min-height : 1000px;
   background : #4d4d4d;
}
#pageheader{

   position : relative;
   height : 98px;

}
#navigation{
   position : relative;
   height : 35px;
   background : #e1e645;
   text-align : center;
   padding-top : 5px;
}
table.navig1{
   #border : 1px solid black;
   position : relative;
   margin-left : auto;
   margin-right : auto;

}
td.navig1{
   padding-left : 5px;
   padding-right : 5px;
}
a.navig1{
   font-size : 18px;
   font-family : Robot, Arial, Helvetica, sans-serif;
   color : #555555;
   text-decoration : none;
   font-weight : bold;
}

#teaser{
   position : relative;
   height : 324px;
   background : #4d4d4d;
   overflow : hidden;
}

#pagecontent{
   position : relative;
   margin-top : 0px;
   min-height : 426px;
   background : #4d4d4d;
   padding-left : 40px;
   padding-right : 40px;
   padding-bottom : 40px;

   
}
#pagefooter{
   clear: both;	
   height : 200px;
   background : #282828;
   padding-left : 40px;
   padding-top : 40px;

}
p{
   margin-top : 0px;
}

div.portrait{
   position : relative;
   width : 280px;
   height : 280px;
   float : left;
   margin-right : 30px;
   margin-bottom : 20px;
   margin-top : 20px;
}
img.portrait{
   width : 280px;
   height : 280px;

}

.portraits p{
   color : white;
   font-size : 14px;
   align-self: flex-end;
   background-size: 300px;
   background-color:rgba(0, 0, 0, 0.5);
   margin-bottom : 0px;
   padding : 10px;


}

div.portraitcontent{
  position : absolute;
   font-size : 14px;
  bottom : 0px;
  left : 0px;
  padding-left : 10px;
  padding-right : 10px;
  right : 0px;
  background-color:rgba(0, 0, 0, 0.5);


}



.portrait1{
   background-image : url('/images/Jan_Bill.jpg');
   background-size: 300px 300px;
}

.portrait2{
   background-image : url('/images/Erwin_Bill.JPG');
   background-size: 300px 300px;
}

.portrait3{
   background-image : url('/images/Marc_Bill.JPG');
   background-size: 300px 300px;
}

.portrait4{
   background-image : url('/images/Marianne_Bill.jpg');
   background-size: 300px 300px;

}


.portrait5{
   background-image : url('/images/Patrick_Jaberg.JPG');
   background-size: 300px 300px;
}

.portrait6{
   background-image : url('/images/Urs_Jost.JPG');
   background-size: 300px 300px;
}






h1{
   text-align : center;
   color : #e5e34e;
   margin-bottom : 0px;
   font-family : Carlig;
}

h2{
   text-align : left;
   color : #e5e34e;
   margin-bottom : 0px;
   font-family : Carlig;
   margin-top : 0px;
}

table{
    border-spacing: 0;
    border-collapse: collapse;  
}

td{
   color : white;
   font-size : 16px;
   padding-bottom : 3px;
   #font-family : Robot, Arial, Helvetica, sans-serif;
}

td.footer{
   padding-right : 10px;
}

td.occ_grau_fe{
   color : white;
   font-size : 18px;
   border-bottom : 1px solid #cccccc;
   padding-bottom : 3px;
}

td.occ_weiss_fe{
   color : white;
   font-size : 18px;
   border-bottom : 1px solid #cccccc;
   padding-bottom : 3px;
}

a{
   color : #e5e34e;
   text-decoration : none;
}

#image1{
   position : absolute;
   left : 0px;
   top : 0px;
}

#image2{
   position : absolute;
   left : 0px;
   top : 0px;
}

.multicolumn{

  column-count: 3;
  column-gap: 10px;

}

.oc_list{
  font-size : 18px;
}


#cookiedialogue{

   position : absolute;
   left : 50%;
   margin-left : -200px;
   margin-right: auto;
   margin-top : 300px;
   height : 100px;
   width : 300px;
   padding : 50px;
   border-radius : 30px;
   border : 3px solid black;
   font-size : 18px;

   background : #e1e645;
   z-Index : 10;
   color : black;
   text-align: center;
}



#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: 0; }

#outerImageContainer{ position: relative; background-color: #FFFFFF; width: 250px; height: 250px; margin: auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #5c64a1; }