@font-face { font-family: OpenSans-Regular; src: url(OpenSans-Regular.ttf); } 

html, body
{
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}

body
{
font-family: Arial;
font-size: 15px;
color: #1F1F1F;
background: url(../bilder/hintergrund.jpg) top center no-repeat fixed;
background-size: 100% auto;
font-family: OpenSans-Regular;

}


#main
{
width: 900px; min-height: 100%;
margin: 0px auto ; padding: 5px 190px 150px 210px;
background: url(../bilder/border.png) center right repeat-y;
text-align:justify;
}

a { color: #009FE3; text-decoration: none; }
#blau a { color: #1F1F1F; text-decoration: none; }

img
{
border: none;
margin:0px; padding:0px;
}

table
{
width:100%;
border: none;
}

td
{
vertical-align:top;
text-align:left;
}




#menu
{
border-top: 1px solid #1F1F1F; border-bottom: 1px solid #1F1F1F;
background: url(../bilder/menu-bg.jpg) center center repeat-x;
width:100%; height: 40px; 
margin: 0px; padding: 0px;
list-style: none;
}


#menu li ul			/*----Untermenü----*/
{ list-style: none; display: none; position: absolute; }

#menu li:hover ul
{ display:block; }


#menu li ul li			/*----Listenelement----*/
{ margin: 0px; padding: 0px;}

#menu > li 
{  float: left; }


#menu a				/*----Menüpunkt---- */
{ display: block; color: #8F8F8F; text-align: center;  }

	#menu > li > a
	{ height: 29px; padding: 7px 27px 5px 27px; font-size: 16px; }
	#menu > li > a img
	{ vertical-align: text-top; padding:0px; margin:0px; margin-right:70px; margin-top: -35px; }

	#menu li ul li a
	{ width: 160px; height: 22px; padding: 2px 0px; font-size: 14px; border-right: 1px solid #0F0F0F; border-left: 1px solid #0F0F0F; border-bottom: 1px solid #0F0F0F; background: #1F1F1F; }



#menu > li:first-child > a		/*----erster-Menüpunkt----*/
{ padding-left:0px; margin-left: -190px; }

	#menu li ul li:first-child a
	{ padding-top: 10px; }

#menu > li:last-child > a		/*----letzter-Menüpunkt----*/
{ padding-right:0px; }

	#menu li ul li:last-child a
	{ padding-bottom: 10px; }
	

#menu li.active > a, #menu li:hover > a, #menu a:active
{
color: #DFDFDF;
}


#shadow
{
position: fixed; display: none; z-index: 996; background: rgba(0, 0, 0, 0.9); top: 0px; left: 0px; width: 100%; height: 100%;  
}

#shadow img { opacity: 0.3; }
#shadow:hover img { opacity: 1.0; }

#pictext
{
position: fixed; display: none; z-index: 998; color: #DFDFDF; margin: 0px; padding: 0px;
}

#pictitle
{
margin: 0px; padding: 0px;
}

#picnum
{
font-size: 9pt; margin-top: 5px; padding: 0px;
}

#picbox
{
position: fixed; display: none; z-index: 999; background: #fff; border-radius: 5px;;
}

#picboxwrapper
{
margin:0px; padding:0px; display:table-cell; text-align:center; vertical-align: middle;
}

#prev
{
position: fixed; display: none; z-index: 1001; text-align: left; padding-left:25px; 
}

#prev img { opacity: 0.3; }
#prev:hover img { opacity: 1.0; }

#next
{
position: fixed; display: none; z-index: 1002; text-align: right; padding-right:25px;
}

#next img { opacity: 0.3; }
#next:hover img { opacity: 1.0; }



#weiss
{
margin: 0px; padding: 50px;
}

#weiss2
{
margin: 0px; padding: 50px;
}

#blau
{
margin: 0px; padding: 50px;
background: #009FE3;
color: #fff;
}

#schwarz
{
margin: 0px; padding: 50px;
background: #000;
color: #fff;
}

.wrapper
{
margin:0px; padding:0px;
}

.links
{
float: left;
width:375px;
margin: 0px auto 0px 0px;
}

.rechts
{
width:375px;
margin: 0px 0px 0px auto;
}



.galerie , .ggalerie
{
width:240px;
height:180px;
color: #000;
float: left;
margin:12.5px;
padding:5px;
text-align:center;
position:relative
}

.galtitle , .ggaltitle
{
width:235px; height: 25px;
background:rgba(0, 159, 227, 0.5);
margin: 0px;
padding:0px 0px 0px 5px;
color: #FFF;
text-align: left;
position:absolute;
bottom:5px;
}

 .ggalerie
{
width:515px; height:395px;
}

.ggaltitle
{
width:510px;
}

.galerie:hover , .ggalerie:hover
{
background: #009FE3;
}


#album
{
margin: -15px -20px;
padding: 0px;
}

#album img
{
margin: 15px;
padding: 0px; 
float: left;
}

.jugend
{
width:375px;
height:350px;
float: left;
margin:25px;
margin-bottom:50px;
}

.ausbildung
{
width:95px;display:inline-block;font-size:13px; color: #1F1F1F;
}


.sw {
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 3.5+ */
    filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); 
      -webkit-transition: all .6s ease; 
    -webkit-backface-visibility: hidden; 
}
.sw:hover{
     filter: none;
    -webkit-filter: grayscale(0%);
}