/* milanhermann.de 2011
 * 
 * Farben
 * #596c7f;   evtl Hintergrund Blau
 * #6a8097;
 * #0a3f64; Link (war mal)
 * #95B5D5;  h1, h4
 * #d4e0ec;  h2
 */

html{font-size:110%;}
@media(min-width:60em){html{font-size: 90%}}
body { font-family: 'Open Sans', sans-serif;
       font-size: 12pt;
       text-align: left; vertical-align: top;
       margin: 0px; padding: 0px;
       /*background:#f6f6f7;*/
       background:#252525;}
p { font-family: 'Open Sans', sans-serif;
    font-size: 100%;
    text-align: left; vertical-align: top;
/*    text-align: justify; hyphens: auto;*/
    margin: 4px;
    padding-left: 0px; padding-right: 0px;
    padding-top: 8px; padding-bottom: 4pt;
    text-indent:0pt; line-height:133%;}
/* p:first-letter { font-family:sans-serif;
   font-size: 11pt; font-weight: normal; } */


/*Grosse Ueberschrift auf Seite*/
/*h1:before { content:" "; }*/
h1 { width: auto; /*max-width:710px;*/
     font-family: 'Quicksand', sans-serif;
     font-size: 183%; font-style: normal; font-weight: lighter;
     /*background: #95B5D5;
     border: 1px solid #000000;*/
     margin:0px; margin-left:5px;
     padding-left: 5px; padding-right: 5px;
     padding-top: 40pt; padding-bottom: 6pt;
     border-bottom: 1px solid #AAA;}
/*Artikelueberschrift*/
h2 { width: auto;
     font-family: 'Quicksand', serif;
     font-size: 150%; /*font-weight: lighter;*/ font-style: normal;         
     /*background: #d4e0ec;*/
     margin: 0px;
     padding-left: 5px; padding-right: 5px;
     padding-top: 17pt; padding-bottom: 9px; }
/*Ueberschrift in Artikel*/
h3 { font-family: 'Open Sans', sans-serif;
     font-size: 100%;
     margin: 8px 5px; padding-left: 5px; padding-right: 5px; }
/*kleine Ueberschrift auf Seite*/
h4 { width: auto; max-width:900px;
     font-family: 'Quicksand', sans-serif;
     font-size: 75%; /*font-weight: lighter;*/ font-style: normal;
     background: #95B5D5;
     border: 1px solid #000000;
     margin-top: 8px; margin-bottom: 8px; margin-left: 5px; margin-right: 5px;
     padding-left: 5px; padding-right: 5px; }

b  { text-decoration:none; font-weight:bold; color:#2B6187;}
em { font-family:'Open Sans', sans-serif; font-size:83%; font-weight:lighter; font-style:italic;
     margin-left:5px; margin: 4px; padding: 0px;
     text-align: left; /*vertical-align: top;*/
     text-indent:0pt; line-height:12pt;}
ul { list-style-type: circle; margin:0px 0px 10px; }
table { font-family:'Open Sans', sans-serif;
        font-size: 83%;
        text-align: left; vertical-align: top;
        padding: 0px; border: 0px solid #000000; border-spacing:0px}


#seite {position:relative; margin: 10px auto;
        width:auto; max-width:930px; min-width:600px;
        background-color:#f6f6f7; z-index:1;}
#content { position:relative;
           /*position:absolute;
           left:220px; right:0px; top:0px;*/
           margin-left:220px; margin-right:1em;
           min-height:800px;
           z-index:3;
           /*height:auto; min-width:380px; max-width:710px;*/}
.artikel { position:relative;
           width:auto;
           min-height:60px;
           /*max-width:710px;*/
           border: none;
           margin:10px 0px 10px 5px; /*top right bottom left*/
           padding:0px 5px 5px 0px;
           overflow:auto;
           background:none;
           border-bottom: solid 1px #AAAAAA;
           clear: both;}
/*.artikel { position:relative;
           width:auto;
           min-height:60px;
           max-width:910px;
           border:1px inset #000000;
           margin:10px 5px;
           padding:0px;
           overflow:auto;
           background:#ffffff; }*/

.link { position:relative;
        width:auto; max-width:910px;
        height:auto; min-height:60px;
        border:1px dotted #000000;
        margin:8px 5px;
        padding: 0px;
        overflow:auto;
        background:#ffffff; }

/*.linkpic { width:200px; float:left;
           text-align:center;
           border:1px solid;
           padding:0px;
           margin:5px 5px;
           background:#d4e0ec; }
.linkpic:hover {background:#596c7f;}*/

img { border:0px; margin:5px 0px;}

.foto {
  width:210px; min-height:200px; float:left;
  text-align:center;
  /*border:1px solid #555555;*/
  border:none;
  padding:0;
  margin:10px 1em;
  background:#DDDDDD; /*#d4e0ec*/
  font-family: 'Open Sans', sans-serif; font-size:83%; font-weight:normal; color:#000000; }

.foto_2, .foto_3, .film {
  width:48%; min-height:200px; float:left;
  text-align:center;
  border:none;
  padding:0;
  margin:10px 2% 0 0;
  background:#DDDDDD;
  font-family: 'Open Sans', sans-serif; font-size:83%; font-weight:normal; color:#000000; }
.foto_3 {
  width:31%; min-height:200px }
.foto_2 img, .foto_3 img, .film img {
  border:0px; width:95%; margin:5px 0px;}
.foto_3 img { width:97%; }
/*.foto_2 img::after, .foto_3 img::after, .film img::after { content:" "; }*/
a.foto:link, a.foto_2:link, a.foto_3:link, film {
  background:#DDDDDD; font-family: 'Open Sans', sans-serif; font-size:83%; font-weight:normal; color:#000000;}
a.foto:visited, a.foto_2:visited, a.foto_3:visited, film {
  background:#DDDDDD; font-family: 'Open Sans', sans-serif; font-size:83%; font-weight:normal; color:#000000;}
a.foto:hover, a.foto_2:hover, a.foto_3:hover, film {
  background:#555; font-family: 'Open Sans', sans-serif; font-size:83%; font-weight:normal; color:#000000;}
a.foto:active, a.foto_2:active, a.foto_3:active, film {
  background:#95B5D5; font-family: 'Open Sans', sans-serif; font-size:83%; font-weight:normal; color:#000000;}


.film { min-height:290px;
        background:#ffbe8a; }
a.film:link { background:#d4e0ec; }
a.film:visited {background:#d4e0ec; }
a.film:hover {background:#ffa359; }
a.film:active {background:#ffa359; }



#menue { position:absolute;
         top:0px; left:0px;
         width:176px; height:400px; z-index:2;
         margin:0px;
         padding-left:44px; padding-top:235px;/* padding-bottom:8px;*/
         background-image:url(buttons/logo2011.png);
         background-repeat:no-repeat;
         font-family:'Open Sans', sans-serif;
         font-size:100%;
         font-weight:normal;}
#menue ul { list-style-type:none; z-index:3;
            margin:0px; padding:0px; }
#menue li { margin-left:0px;
            margin-top:3px;
            margin-bottom:4px;
            padding-left:16px;
            background-image: url(buttons/menu.png);
            background-repeat: no-repeat;
            background-position:0px 4px; }
#menue li#hier { color:#c97200;
                 margin-left:0px;
                 margin-top:3px;
                 margin-bottom:4px;
                 padding-left:20px;
                 background-image: url(buttons/menua.png);
                 background-repeat: no-repeat;
                 background-position:0px 4px; }

#tab{   position: relative;
        width:auto;
        min-height:40px;
        /*max-width:710px;*/
        border: none;
        margin:10px 0;
        padding:0px; padding-bottom:5px;
        overflow:auto;
        background:none;}
#tab ul{list-style-type: none;
        float: right;
}
#tab li{float: left;
}
#tab a {display: inline-block;
        font-family:'Open Sans', sans-serif;
        font-size:100%;
        font-weight:normal;
        text-transform: uppercase;
        text-decoration:none;
        padding:10px 15px 15px 15px;
        /*background-color:#000;*/
        border-bottom: 1px solid #aaa;
        color:#aaa;
        margin-right: 1px;
        font-weight: normal;}
#tab a:hover{
        border-bottom: 3px solid #000;
        color:#000;
        padding:10px 15px 13px 15px; }
#tab li.aktiv a{
        border-bottom: 1px solid #000;
        color:#000;}

.author { position:fixed; top:410px; left:0px; width:200px; height:auto; z-index:1;
          margin: 0px; padding:0px;
          text-align:center;
          font-family:'Open Sans', sans-serif; font-size:66%;
          font-weight:lighter; font-style:italic; }
#ad { position:absolute; top:410px; left:0px;
      width:200px; height:auto; z-index:3;
      text-align:center;
      font-family:'Open Sans', sans-serif; font-size:92%;
      font-weight:lighter; font-style:italic;
      margin: 0px;
      margin-top: 40px;
      padding:5px;
}
#ad a{ display: inline-block;
       border-top:3px solid #ddd;
       border-bottom:3px solid #ddd;}
#ad a:hover{color:#000;border-top:3px solid #000;
            border-bottom:3px solid #000;}
#ad a:active{border-top:3px solid #000;
            border-bottom:3px solid #000;}
input.button { text-align:center;
               background:#FFFFFF;
               height:18px;
               border:1px solid #95B5D5;
               font-size:8pt; }
.footer { max-width:910px;
          font-size:60%;}


a:link { text-decoration:none; font-weight:normal; color:#555; }
a:visited { text-decoration:none; font-weight:normal; color:#555; }
a:hover { text-decoration:none; font-weight:normal; color:#000; }
a:active { text-decoration:none; font-weight:normal; color:#000; }
comment:before { content:"-- "; }

.tooltip {cursor: help; text-decoration:none; position:relative;}
.tooltip span{margin-left: -999em; position: absolute;}
.tooltip:hover span{ position:absolute;
                     left:-180px; top:2em;
                     margin-left:0;
                     width:220px;
                     background-color:#ccc; padding:0.5em;
                     border:1px solid #555; overflow:visible; z-index:99;
                     font-size:75%;}



/*@media only screen and (max-device-width:600px) {*/
@media only screen and (max-device-width:600px) {
li {padding-bottom:5px; padding-top:5px;}

body { width:100%; font-size:16pt; /*fallback*/
       width:100vw; font-size:3vw;}
#seite {position:absolute; margin: 10px 0px;
        width:100%; min-width:400px;}

#content { margin-top:340px;
           margin-left:0;
           min-height:400px; width:100%;
           /*height:auto; min-width:380px; max-width:710px;*/}
#menue { position:absolute;
         top:0px; left:0px;
         width:auto; height:auto; min-height:375px;
         z-index:-2;
         padding-left:230px; /* 44px*/ padding-top:15px;
         font-size:120%;}
#menue li {padding:3px 0px; margin:0px; background:none;}
#menue li#hier {padding:0px; margin:0px 1em; background:none;}
h1 {padding-top:0; margin-left:44px;}
}