* {
   margin: 0;
   padding: 0;
   font-family: Arial, Helvetica, sans-serif;
}

/* html, body {
} */

#wrap {
   width: 988px;
   margin: 0 auto;
   /* background: url(back.png) repeat-y; */
}

body {
margin: 0px auto;
padding: 0px;
text-align: center;
font-family: Arial, Helvetica, sans-serif; font-size: 12px;
background-color: #FFFFFF; }


iframe { margin: 0px auto;
padding: 0px;
height: 110px;
border-style: none; border: 0 none; }


#page_header {
   background-color: #ffffff;
   margin: 30px 0px 0px 0px;
   padding: 0px 0px 0px 0px;
   border-style: none;
   border: 0 none;

}

#page_center {
position: absolute;
width: 988px;
height: 127px;
top: 50%;
left: 50%;
padding: 0px;
margin-top: -63px;
margin-left: -494px;
}


#page_nav {

width: 988px;
margin: 0px;
padding: 0px;
text-align: center;

}

#page_content {
   width: 988px;
   margin: 0px 0px 0px 0px;
   padding: 50px 0px 0px 0px;
}


h2 { font-size: 140%; color:#000000; text-align: left; padding-bottom: 8%; }
h3 { font-size: 120%; color: #000000; text-align: left; padding-bottom: 8%; }
h4 { font-size: 100%; color: #000000; text-align: left; padding-bottom: 8%; }


#page_name_gallery {
   width: 388px;
   float: right;
   padding: 30px 0px 0px 0px;
   text-align: left;

}

#page_gallery {
   padding: 10px 0px 0px 0px;
   margin: 0px auto;
   text-align: center;
}

#page_gallery_nav {
   padding: 20px 0px 0px 0px;
   margin: 0px auto;
   text-align: center;
}


#page_popup_content {
   width: 350px;
   text-align: left;
   padding: 20px 20px 25px 25px;
}

p {
   margin-bottom: 0.4em;
   text-align: left;
}

p.txt_gallery { font-size: 100%; text-align: center; font-style: italic; color: #000000; padding: 10px 0px 0px 0px;
}

p.zentriert { text-align: center; margin: 0px auto; display: block;
}

p.present {
font-size:20px;
text-align:center;
color: #314254;
font-family: Times New Roman, serif;
}

ul { padding: 0px 0px 0px 40px; }
li { text-align:left}


/* flexible Boxen anordnen */


.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: white;
  padding: 5px;
  width: 205px;
  height: 205px;
  margin-top: 80px;

  border: 0px solid #000000;
  line-height: 15px;
  color: black;
  font-weight: normal;
  font-size: 10pt;
  text-align: left;
}

.flex-item-img {
  background: white;
  padding: 5px;
  width: 205px;
  height: 205px;
  margin-top: 80px;

  border: 0px solid #000000;
  line-height: 15px;
  color: black;
  font-weight: bold;
  font-size: 10pt;
  text-align: center;
}

.flex-item-2 {
  background: white;
  padding: 5px;
  width: 205px;
  height: 205px;
  margin-top: 39px;

  border: 5px solid #000000;
  line-height: 15px;
  color: black;
  font-weight: normal;
  font-size: 10pt;
  text-align: left;
}

.flex-item-img-2 {
  background: white;
  padding: 0px;
  width: 210px;
  height: 210px;
  margin-top: 39px;

  border: 5px solid #000000;
  line-height: 15px;
  color: black;
  font-weight: bold;
  font-size: 10pt;
  text-align: center;
}

 /* FLOAT -BOXEN */

    .float1 { float: left; width: 216px; height: 216px; margin: 80px 25px 0px 0px; border: 0px solid #000000; padding: 5px;
   }
    .float2 { float: left; width: 216px; height: 216px; margin: 80px 25px 0px 0px; border: 0px solid #000000; padding: 5px; }
    .float3 { float: left; width: 216px; height: 216px; margin: 80px 25px 0px 0px; border: 0px solid #000000; padding: 5px; }
    .float4 { float: left; width: 216px; height: 216px; margin: 80px 0px 0px 0px; border: 0px solid #000000; padding: 5px; }

    .float5 { float: left; width: 216px; height: 216px; margin: 25px 25px 0px 0px; border: 0px solid #000000; padding: 5px; }
    .float6 { float: left; width: 216px; height: 216px; margin: 25px 25px 0px 0px; border: 0px solid #000000; padding: 5px; }
    .float7 { float: left; width: 216px; height: 216px; margin: 25px 25px 0px 0px; border: 0px solid #000000; padding: 5px; }
    .float8 { float: left; width: 216px; height: 216px; margin: 25px 0px 0px 0px; border: 0px solid #000000; padding: 5px; }




    .floatimg1 { float: left; width: 226px; height: 226px; margin: 80px 25px 0px 0px; border: 0px solid #000000; padding: 0px;
   }
    .floatimg2 { float: left; width: 226px; height: 226px; margin: 80px 25px 0px 0px; border: 0px solid #000000; padding: 0px; }
    .floatimg3 { float: left; width: 226px; height: 226px; margin: 80px 25px 0px 0px; border: 0px solid #000000; padding: 0px; }
    .floatimg4 { float: left; width: 226px; height: 226px; margin: 80px 0px 0px 0px; border: 0px solid #000000; padding: 0px; }

    .floatimg5 { float: left; width: 226px; height: 226px; margin: 25px 25px 0px 0px; border: 0px solid #000000; padding: 0px; }
    .floatimg6 { float: left; width: 226px; height: 226px; margin: 25px 25px 0px 0px; border: 0px solid #000000; padding: 0px; }
    .floatimg7 { float: left; width: 226px; height: 226px; margin: 25px 25px 0px 0px; border: 0px solid #000000; padding: 0px; }
    .floatimg8 { float: left; width: 226px; height: 226px; margin: 25px 0px 0px 0px; border: 0px solid #000000; padding: 0px; }



    #float-end {
clear: left;

}


   .shadow { background: #eee;
border: 1px solid #DDD;
background: -moz-linear-gradient(top, #EEE, #FFF);
background: -webkit-linear-gradient(top, #eee, #fff);
background: -ms-linear-gradient(top, #eee, #fff);
background: -o-linear-gradient(top, #eee, #fff);
box-shadow: 1px 2px 4px rgba(0,0,0, .2);

}

.arrow_left {
 width:23px; padding-top:315px; float:left;  padding-bottom:15%
}

.arrow_right {
 width:23px; padding-top:315px; float:right;  padding-bottom:15%
}

  /*
    .float1 { float: left; width: 208px; height: 205px; margin-top: 80px; margin-left: 10px; margin-right: 20px; border: 5px solid #000000; padding: 5px; }
    .float2 { float: left; width: 208px; height: 205px; margin-top: 80px; margin-right: 0px; border: 5px solid #000000; padding: 5px; }
    .float3 { float: right; width: 208px; height: 205px; margin-top: 80px; margin-right: 20px; border: 5px solid #000000; padding: 5px; }
    .float4 { float: right; width: 208px; height: 205px; margin-top: 80px; margin-left: 15px; margin-right: 10px; border: 5px solid #000000; padding: 5px; }   */


/* LINKS NAV */

a.links1 {font-family: "Arial bold",Helvetica,sans serif; font-size: 30px; color: #000000; font-weight: bold }
a.links1:link { font-weight: bold; color: #000000; text-decoration: none; }
a.links1:visited { font-weight: bold; color: #000000; text-decoration: none; }
a.links1:hover { font-weight: bold; color: #000000; text-decoration: none; }
a.links1:active { font-weight: bold; color: #000000; text-decoration: none; }
a.links1:focus { font-weight: bold; color: #000000; text-decoration: none; }


/* LINKS 2 im Fließtext*/

a.links2 {font-family: Arial,Helvetica,sans serif; font-size: 100%; color: #000000; font-weight: bold }
a.links2:link { font-weight: bold; color: #000000; text-decoration: underline; }
a.links2:visited { font-weight: bold; color: #000000; text-decoration: underline; }
a.links2:hover { font-weight: bold; color: #000000; text-decoration: underline; }
a.links2:active { font-weight: bold; color: #000000; text-decoration: underline; }
a.links2:focus { font-weight: bold; color: #000000; text-decoration: underline; }


/* LINKS 3 Bilder*/

   .links3:hover {
   -webkit-transform: scale(1.1);
   -moz-transform: scale(1.1);
   position: relative;
   z-index: 5;
}


/* Verschiedene Darstellungen der aktiven Links
#Bezeichnung des Bodys, #Style jeden Links, */


#home #navarb a {
        text-decoration: underline;
        cursor: default;

}

#bio #navbio a {
        text-decoration: underline;
        cursor: default;

}

#aus #navaus a {
        text-decoration: underline;
        cursor: default;
}

#kontakt #navkontakt a {
        text-decoration: underline;
        cursor: default;

}


/* Für die Galerien */

ul.polaroid { width: 988px; margin: 0 0 18px  -30px; }
ul.polaroid li { display: inline;  }
ul.polaroid img { display: block; height: 109px; /* width: 109px; margin-bottom: 12px; Quadrat mit dickem Rand unten*/ }

ul.polaroid a { background: #364354; display: inline; float: left; margin: 0 0
27px 30px; width: auto; padding: 2px 2px 2px; text-align: center;
font-family: "Cordia new", sans-serif; text-decoration: none; color: #FFF; font-size: 100%; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

/* -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); */ -webkit-transform: rotate (-2deg); -webkit-transition: -webkit-transform .15s linear;
/* -moz-transform: rotate (-2deg); */}


ul.polaroid a:after { content: attr(title); }

ul.polaroid a:hover {
 -webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
position: relative;
z-index: 5;
}

ul.polaroid a {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
/* -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); */
}

ul.polaroid a {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
/* -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); */
}

ul.polaroid2 { width: 988px; margin: 0 0 18px  -30px; }
ul.polaroid2 li { display: inline;  }
ul.polaroid2 img { display: block; height: 109px; /* width: 109px; margin-bottom: 12px; Quadrat mit dickem Rand unten*/ }


ul.polaroid2 a { background: #FFF; display: inline; float: left; margin: 0 0
27px 30px; width: auto; padding: 2px 2px 2px; text-align: center;
font-family: "Arial Black", sans-serif; text-decoration: none; color: #000; font-size: 100%; -webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);

/* -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); */ -webkit-transform: rotate (-2deg); -webkit-transition: -webkit-transform .15s linear;
/* -moz-transform: rotate (-2deg); */}


ul.polaroid2 a:after { content: attr(title); }

ul.polaroid2 a:hover {
 -webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
position: relative;
z-index: 5;
}

ul.polaroid2 a {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
/* -moz-box-shadow: 0 3px 6px rgba(0,0,0,.25); */
}

ul.polaroid2 a {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
/* -moz-box-shadow: 0 3px 6px rgba(0,0,0,.5); */
}


img {
border:none;
}

#box {
height:250px;
width:auto;
padding:0;
margin:0;
font:bold 14px verdana, sans-serif;}

#box div {display:none;}

#box:hover div {
display:block;
width:300px;
}