@import url('reset.css');

/* General Codrops Demo Style */
body{
        background:#1F1F1F url(../images/pattern.png) repeat top left;
        color:#fff;
        font-family: 'PT Sans Narrow', Arial, sans-serif;
        font-size:14px;
}
a{
        color:#ddd;
        text-decoration:none;
}
a:hover{
        color:#000000;
}
p.sub{
        padding:25px 10px 10px 10px;
        text-align:left;
        color:#aaa;
}
.clr{
        clear:both;
}
h1{
        margin:5px;
        font-size:24px;
        text-align:center;
        color:#fff;
        font-family:"Arial", Georgia, "Times New Roman", serif;
        text-shadow:1px 1px 1px #000;
        padding-bottom:10px;
        line-height:40px;
}

h1 span{
        font-size:10px;
        display:block;
        letter-spacing:2px;
        font-family: 'Arial', 'Myriad Pro', Arial, sans-serif;
        color:#fff;
        line-height:14px;
        padding-top:10px;
        text-shadow:none;
        text-transform:uppercase;
}
h2{
        margin:5px;
        font-size:24px;
        text-align:left;
        color:#fff;
        font-family:"Arial", Georgia, "Times New Roman", serif;
        text-shadow:1px 1px 1px #000;
        padding-bottom:10px;
        line-height:40px;
}
h2 span{
        font-size:10px;
        display:block;
        letter-spacing:2px;
        font-family: 'Arial', 'Myriad Pro', Arial, sans-serif;
        color:#00c6e3;
        line-height:14px;
        padding-top:10px;
        text-shadow:none;
        text-transform:uppercase;
}
/* Header Style */
.header{
        font-size:13px;
        background:#000;
        opacity:0.9;
        text-transform:uppercase;
        -moz-box-shadow: 1px 0px 2px #000;
        -webkit-box-shadow: 1px 0px 2px #000;
        box-shadow: 1px 0px 2px #000;
}
.header a{
        line-height:18px;
        padding:0 4px;
        letter-spacing:1px;
        text-shadow:1px 1px 1px #000;
        color:#ddd;
}
.header a:hover{
        color:#fff;
}
.header a span{
        font-weight:bold;
}
.header span.right_ab{
        float:right;
}
.content{
        margin:0px 25px 30px 25px;
}
@media screen and (max-width: 640px) {
        .header a{
                display:block;
                text-align:center;
                font-size:10px;
                text-shadow:none;
        }
        .header span.right_ab{
                float:none;
        }
}

  #unten {
    padding           : 1.5em;
    background-color  : #CCCCCC;
    color             : #FFFFFF
    font-family       : Arial;
    line-height       : 1.5;
}

.tabbed{
  float : left;
  width : 100%;
}

.tabbed > input{
  display : none;
}

.tabbed > section > h2{
  float       : left;
  box-sizing  : border-box;
  margin      : 0;
  padding     : 0.5em 0.5em 0;
  overflow    : hidden;
  font-size   : 1em;
  font-weight : normal;
}

.tabbed > input:first-child + section > h2{
  padding-left : 1em;
}

.tabbed > section > h2 > label{
  display                 : left;
  padding                 : 0.25em 0.75em;
  border                  : 1px solid #ddd;
  border-bottom           : none;
  border-top-left-radius  : 4px;
  border-top-right-radius : 4px;
  box-shadow              : 0 0 0.5em rgba(0,0,0,0.0425);
  background-color        : #999999;
  color                   : #eeeeee;
  cursor                  : pointer;
     -moz-user-select     : none;
      -ms-user-select     : none;
  -webkit-user-select     : none;
}

.tabbed > section > div{
    z-index             : 1;
    float               : right;
    box-sizing          : border-box;
    width               : 100%;
    margin              : 2.5em 0 0 -100%;
    padding             : 0.5em 0.75em;
    border              : 1px solid #ddd;
    border-radius       : 4px;
    box-shadow          : 0 0 0.5em rgba(0,0,0,0.0625);
    background-color    : #777777;
    color               : #FFFFFF;
}

.tabbed > input:checked + section > h2{
  position : relative;
  z-index  : 2;
}

.tabbed > input:not(:checked) + section > div{
  display : none;
}