/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }

  /* Site-wide properties ======================================================== */
  body{
      font: normal normal 10px/10px LatoRegular, Tahoma, Arial, Helvetica, Verdana, sans-serif; color: #fff;}     
      
      /* Fibonacci based heading scale ratio */
      nav{ font-size: 1.6em; font-weight: bold; font-family: 'ArvoBold', serif; }
      h1{ font-size: 3em; font-family: 'ArvoBold', serif; padding: 7px 0 25px; line-height: 1.2em }
      h2{ font-size: 2.5em; font-family: 'ArvoBold', serif; padding: 3px 0 20px; color: rgba(255,255,255,1); line-height: 1.2em; text-shadow: 0px 2px 3px #9f9e9e;}
      h3 { font-family: 'ArvoBold', sans-serif; font-size: 1.7em; padding: 2px 0 15px; color: rgba(255,255,255,1); line-height: 1.2em; }
      h4{ font-size: 1.6em; font-weight: bold; font-family: 'LatoBold', sans-serif; padding-bottom: 10px; line-height: 1.4em;color: #fff; }
      #footerbox h4 {color: #eee;}
      p{ font-size: 1.3em; font-weight: normal; font-family: 'LatoRegular', sans-serif; line-height: 1.5em; padding-bottom: 25px; list-style-type: none; }
      p + p { margin-top: -15px; }
      #content a{ color: rgba(255,255,255,1); font-weight: bold; font-family: 'LatoBold', sans-serif;  line-height: 1.5em; }
      #content a:hover { color: rgba(255,255,0,1); }
      #content li { font-family: 'LatoRegular',sans-serif; font-size: 1.3em; font-weight: normal; line-height: 1.5em; list-style-type: inherit; margin-left: 2%;}
      footer a { color: rgba(255,255,255,0.75); font-family: 'LatoBold', sans-serif; font-weight: bold; line-height: 1.5em; text-decoration: none;  }
/*foooter a {display: block; }*/
      footer a:hover { color: white; }
      footer li{ font-size: 1.3em; font-weight: normal; font-family: 'LatoRegular', sans-serif; line-height: 1.5em; list-style-type: none; }
      
  
  /* Reusable classes ============================================================ */
  
  /* Left & Right alignment */
  .left{ float: left; }
  .right{ float: right; }
  
  /* The inside class provides consistent padding. To be used often! */
  .inside{ padding: 2%; }
  
  /* Basic Structure ============================================================= */

    /* Header */
    #wrap > header {
        background-color: #1E90FF;
        height: 157px;
        width:80%;
        margin-left:10%;
    }
    
    #logo {
      width: 960px;
      margin: 0 auto;
    }
    #logo img {
        position: absolute;
        z-index: 1100;
        margin-top: -120px;
        width: auto;
        background-color:rgba(255,255,255,0.4);
    }
    nav{
       width: 960px;
       margin: 0 auto;
    }
    #navbox {
        background-color: rgba(61, 81, 81, 0.5);
        float: left;
        margin-top: 120px;
        width: 100%;
        height: 37px;
    }
    nav select { display: none;  } /* -- Ausblenden des Navigations-Selektors -- */
    nav ul {
        float: right;
        margin: -4px 0;
    }
    nav ul li {
        display: inline-block;
        padding: 13px 0;
        margin: 4px 0;
        -webkit-transition: all .2s ease-in;  
        -moz-transition: all .2s ease-in;  
        -o-transition: all .2s ease-in;  
        -ms-transition: all .2s ease-in;  
        transition: all .2s ease-in;  
    }
    /* dropdown */
    nav li ul span{
      display: none;
    }
    #spacer{
      display: none;
    }
    nav li ul {
      float: left;
      opacity: 0;
      position: absolute;
      top: -200px;
    }
    nav li:hover ul {
        background-color: rgba(255, 255, 255, 0.6);
         -webkit-box-shadow: 2px 0px 3px -1px rgba(0, 0, 0, 0.75);
        box-shadow: 2px 0px 3px -1px rgba(0, 0, 0, 0.75); 
        display: inline;
        z-index: 1000;
        padding: 0;
        position: absolute;
        top: 89px;
        z-index: 1;
        opacity: 1;
        -webkit-transition: opacity .2s ease-in-out;  
        -moz-transition: opacity .2s ease-in-out;  
        -o-transition: opacity .2s ease-in-out;  
        -ms-transition: opacity .2s ease-in-out;  
        transition: opacity .2s ease-in-out;  
    }
    nav li li, nav li li:hover {
      display: block;
      -webkit-box-shadow: none;
      box-shadow: none;
    }
    .menubutton{
      display: none;
    }
    /* Content */
    #slider {
        margin: 0 auto 0;
        width: 960px;
    }
    #slider header{
        display: none;
      }
    #slider DIV.csc-textpic .csc-textpic-imagewrap .csc-textpic-image {
        margin-top: 20px;
        margin-bottom: 0;
    }
    featured{
        margin: 0 auto;
      }
    #rootline {
        margin: 15px 0 10px;
        padding-left: 2%;
        font-size: 1.1em;
    }
    #rootline ul {
      list-style-type:none;
      margin:0;
      padding:0;
    }
    #rootline ul li {
        background: url("../img/nav-footer-arrow.gif") no-repeat scroll 0 50% transparent;
        display: inline;
        font-size: 1em;
        margin-left: 0;
        padding: 0 1em 0 1.25em;
    }
    #rootline ul li.first {
      background: 0;
      padding:0;
        padding-right:1em;
      display: none;
    }
    #roothome {
        float: left;
        padding-right: 1em;
        font-size: 1.1em;
    }
#fb-button {
  float:left;
  width:85%;
  text-align:right;
}
#gp-button {
  float:left;
  width:15%;
  align:right;
}
    #content {
        background-color: #1E90FF;
        min-height: 200px;
        text-align: center;
        width: 80%;
        margin-left:10%
    }
    #contentbox {
         background-color: #1E90FF;

        display: inline-block;
        margin: 0 auto;
        text-align: left;
        width: 960px;
    }
    article{
        float: left;
        color: rgba(15,40,40,0.8);
      }
    article header, article hr{
        background: transparent;
        height: auto;
        text-align: center;
        color: rgba(15,40,40,0.5);
        line-height: 1em;
        margin-bottom: 2em;
      }
    .headline {
        margin: 10px 0 32px;
    }
    .title {
        padding: 6px 0 18px;
    }
    aside{
        float: left;
        margin-bottom: 1em;
      }
      
    
    #full 
      
      /* Flexslider - Style */
      .flexslider .slides > li {
        margin-top: 20px;
    }
      
      /* Fancybox - Style */
      .fancybox-title-float-wrap {
        margin-bottom: 2%;
    }
    .fancybox-skin {
        padding: 2%;
    }
    .fancybox-title-float-wrap {
        margin-bottom: 2%;
        max-width: 100%;
    }
    .fancybox-inner !important {  }
    .fancybox-title-over-wrap {
        background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
        bottom: 0;
        color: #FFFFFF;
        left: 0;
        margin-bottom: 1%;
        padding: 4px 0;
        position: absolute;
        text-align: center;
        width: 100%;
    }

    /* Kontaktformular */
    div.csc-mailform li label {
        height: 2.5em;
    }
    label em, legend em {
        margin: -21px 0 0 40px;
        position: absolute;
    }
    label strong, legend strong {
        color: #CC0000;
        display: block;
        font-size: 75%;
        font-weight: normal;
        line-height: 1.1em;
        margin: -80px 0 0;
        position: absolute;
        text-transform: uppercase;
    }
    .form textarea {  background-color: #ededed; border: 1px solid #394545; padding:5px; }
    .form textarea:hover {border: 1px solid #ededed;}
    .form textblock { margin-left: 185px; }
    .form input[type=text] { width: 240px; margin-bottom: 1em; height: 25px; background-color: #ededed; border: 1px solid #394545; padding-left:5px; }
    .form input:hover[type=text] {border: 1px solid #ededed; }
    .form input[type=submit] { 
      margin-top: 5px; 
      margin-left: 185px;  
      font-family: 'ArvoBold', serif;
      font-size: 14px;
      color: #ffffff;
      padding: 10px 20px;
      background-color: #394545;
      }
     
    .form input:hover[type=submit] { 
      margin-top: 5px; 
      margin-left: 185px;  
      font-family: 'ArvoBold', serif;
      font-size: 14px;
      color: #ffffff;
      padding: 10px 20px;
      background-color: #0d2525;
      }
  
    /* OpenStreetMap */ 
    #OpenLayers.Map_3_events{ z-index: 0; }
    .tx-odsosm-pi1 { margin-top: 20px; }
    #slider .leaflet-container !important { height: 200px; }
    /* 100% - Sidebar unten */
    .once article{
          width: 100%;
    }
    .once article .headline{
        float: left;
        height: auto;
        width: 30%;
    }
    .once article .title{
      width: 40%;
      float: left;
    }
    .once aside{
          width: 100%; 
    }
    /* ⅔ - ⅓ */
    .twothirds > .inside {
      float: left;
      width: 62%;
    }
    
    #full .twothirds > .inside {width: 97%;}
    
    
    .twothirds article .headline{
        float: left;
        height: auto;
        width: 19%;
    }
    .twothirds article .title{
      width: 60%;
      float: left;
    }
    .twothirds aside{
      width: 30%;
      padding: 2%;
    }
    img, embed, object, video {
      max-width: 100%;
      height: auto;
    }
              /*
    img, embed, object, video {
                     width:100%;
              }
              */
    DIV.csc-textpic-above DIV.csc-textpic-imagewrap,
      DIV.csc-textpic-below DIV.csc-textpic-imagewrap,
      DIV.csc-textpic DIV.csc-textpic-imagewrap UL LI,
      DIV.csc-textpic DIV.csc-textpic-imagewrap DL.csc-textpic-image {
      float: none;
    }
        
    /* Footer */
    footer {
        background-color:#000;
        float: left;
        width: 80%;
        margin-left:10%;
        line-height: 1.5em;
    }
    #footerbox {
        background-color:#000;
        margin: 0 auto;
        width: 960px;
    }
    .thirds {
        float: left;
        height: auto;
        padding: 40px 2%;
        width: 29.3%;
        color: rgba(225,225,225,0.8);
    }
  /* CE Elemente ============================================================= */
  
  
  div.sidebarBox {
    background-color: rgba(255, 255, 255, 0.3);
    padding: 15px;
    min-height:400px;
    -webkit-box-shadow:0px 0px 16px 2px #969696;
    -moz-box-shadow:0px 0px 16px 2px #969696;
    -o-box-shadow:0px 0px 16px 2px #969696;
    -ms-box-shadow:0px 0px 16px 2px #969696;
    box-shadow:0px 0px 16px 2px #969696;
    margin-bottom: 20px;
    overflow: auto;
  }
  
  /* Bildelemente */
  
  /* The fraction classes are useful for column lists */
  
  
  #whitebox .full, .half, .third, .quarter, .fifth, .sixth{ width: 100%; }
  #whitebox .half, .third , .quarter , .fifth , .sixth { float: left; }
  #whitebox .full  { margin: 1.25%; padding: 1.25%; width: 95%; }
  #whitebox .half  { margin: 1.25%; padding: 1.25%; width: 45%; }
  #whitebox .third {  margin: 1.25%; padding: 1.25%; width: 28.3% }
  #whitebox .quarter {  margin: 1.25%; padding: 1.25%; width: 20% }
  #whitebox .fifth {  margin: 1.25%; padding: 1.25%; width: 15% }
  #whitebox  {
      background-color: rgba(255, 255, 255, 0.8);
      list-style: none outside none;
      margin-left: 0;
      font-size: 1em;
      opacity: 0.9;
  }
  #whitebox:hover {
      background-color: rgba(255, 255, 255, 0.8);
      opacity: 1;
  }
  #whitebox DIV.csc-textpic .csc-textpic-imagewrap .csc-textpic-image {
      margin-bottom: 0;
  }
  #whitebox FIGCAPTION.csc-textpic-caption {
      display: table-caption;
      padding: 10px 0 5px;
      font-size: 1.1em;
  }
  #whitebox p {
      font-size: 1.3em;
      margin: 2%;
  } 
  #whitebox header {
      font-size: 1em;
      margin: 2% 2% -10px;
  }
  /* 3 Spalten */
  
  .ce-thirds {
      float: left;
      margin: 0 2% 0 0;
      width: 31%;
  }
  /* 2 Spalten */
  
  .ce-half {
      float: left;
      margin: 0 2% 0 0;
      width: 48%;
  }
  
      
  /* Project specifics =========================================================== */
/*  body{
    background-image: url(../images/background.png);
    background-size:100%;
  }*/
  nav a {
      color: #0D2525;
      padding: 9px 15px;
      text-decoration: none;
  }
  nav .navactive{
    color: white;
  }
  #updateyourbrowser {display: none;}
  
  /* Superfish ================================================================= */
 
  /*** ESSENTIAL STYLES ***/
  .sf-menu, .sf-menu * {
    margin:      0;
    padding:    0;
    list-style:    none;
  }
  .sf-menu {
    line-height:  0.8;
  }
  .sf-menu ul {
    position:    absolute;
    top:      -999em;
    width:      12em; /* left offset of submenus need to match (see below) */
  }
  .sf-menu ul li {
    width:      100%;
  }
  .sf-menu li:hover {
    visibility:    inherit; /* fixes IE7 'sticky bug' */
  }
  .sf-menu li {
    float:      left;
    position:    relative;
  }
  .sf-menu a {
    display:    block;
    position:    relative;
  }
  .sf-menu li:hover ul,
  .sf-menu li.sfHover ul {
    left:      0;
    top:      37px; /* match top ul list item height */
    z-index:    99;
  }
  ul.sf-menu li:hover li ul,
  ul.sf-menu li.sfHover li ul {
    top:      -999em;
  }
  ul.sf-menu li li:hover ul,
  ul.sf-menu li li.sfHover ul {
    left:      15em; /* match ul width */
    top:      0;
  }
  ul.sf-menu li li:hover li ul,
  ul.sf-menu li li.sfHover li ul {
    top:      -999em;
  }
  ul.sf-menu li li li:hover ul,
  ul.sf-menu li li li.sfHover ul {
    left:      10em; /* match ul width */
    top:      0;
  }
   
  /*** DEMO SKIN ***/
  .sf-menu {
    float: right;
  }
  .sf-menu a {
    border-left:  0 none;
    padding:     12px 14px;
    text-decoration:none;
    font-weight:bold;
  }
  .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
    color: #0D2525;
  }
  .sf-menu li {
    background: transparent;
  }
  .sf-menu li li {
    border-bottom: 1px solid #ccc;
  }
  .sf-menu li:hover {
    outline: 0;
    background-color: hsla(180,0%,100%,0.6);
  }
  .sf-menu li:hover #aktiv{
    background-color: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .sf-menu li #aktiv{
    background-color: #394545;
    color: #fff;
  }
  
  /*** arrows **/
  .sf-menu a.sf-with-ul {
    padding-right:   2.25em;
    min-width:    1px; /* trigger IE7 hasLayout so spans position accurately */
  }
  .sf-sub-indicator {
    position:    absolute;
    display:    block;
    right:      .75em;
    top:      1.05em; /* IE6 only */
    width:      10px;
    height:      10px;
    text-indent:   -999em;
    overflow:    hidden;
    background:    url('../images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
  }
  a > .sf-sub-indicator {  /* give all except IE6 the correct values */
    top:      1.3em;
    background-position: 0 -100px; /* use translucent arrow for modern browsers*/
  }
  /* apply hovers to modern browsers */
  a:focus > .sf-sub-indicator,
  a:hover > .sf-sub-indicator,
  a:active > .sf-sub-indicator,
  li:hover > a > .sf-sub-indicator,
  li.sfHover > a > .sf-sub-indicator {
    background-position: -10px -100px; /* arrow hovers for modern browsers*/
  }
   
  /* point right for anchors in subs */
  .sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
  .sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
  /* apply hovers to modern browsers */
  .sf-menu ul a:focus > .sf-sub-indicator,
  .sf-menu ul a:hover > .sf-sub-indicator,
  .sf-menu ul a:active > .sf-sub-indicator,
  .sf-menu ul li:hover > a > .sf-sub-indicator,
  .sf-menu ul li.sfHover > a > .sf-sub-indicator {
    background-position: -10px 0; /* arrow hovers for modern browsers*/
  }
   
  /*** shadows for all but IE6 ***/
  .sf-shadow ul {
    background:  url('../images/shadow.png') no-repeat bottom right;
    padding: 0 8px 9px 0;
    -moz-border-radius-bottomleft: 17px;
    -moz-border-radius-topright: 17px;
    -webkit-border-top-right-radius: 17px;
    -webkit-border-bottom-left-radius: 17px;
  }
  .sf-shadow ul.sf-shadow-off {
    background: transparent;
  }

@media screen and (-webkit-min-device-pixel-ratio:0)
{
  img, embed, object, video {
    max-width: 100%;
    height: auto;
    width: auto;
  }
  .sf-menu {
    line-height:0.85;
  }
}

/* For iPads and other Tablets or Displays less then 1080px ======================== */
  @media screen and (max-width: 1080px){  
  /* Header */

  #wrap > header{
      height: 212px;
  }  
  #navbox{
      margin-top: 13em;
      height: 37px;
  }
  nav {
      height: 37px;
      width: 100%;
      text-align: center;
  }
  .sf-menu {
      display: inline-block;
      float: none;
  }
  nav ul {
      float: none;
      position: relative;
      top: 19px;
      text-align: left;
  }
  nav li:hover ul {
      top: 48px;
      display: table;
  }
  nav li:hover #spacer {
      top: 41px;
  }
  .menubutton{
    display: none;
  }
  #logo{
    width: 100%;
    text-align: center;
  }
  #logo img {
      position: relative;
      z-index: 1100;
      display: block;
      margin: 0 auto;
    margin-top: -11em;
  }
  /* Content */
    #contentbox{
    width: 100%;
  }
  article header{
    line-height: 2.5em;
    margin-bottom: 2em;
  }
  .title {
      padding: 6px 0 18px;
  }
  #content article .headline{
    display: none;
  }
  #content article .title{
    width: 100%;
    float: left;
  }
  /* Sidebar */

        
  /* Footer */
    #footerbox{
    width: 100%;
  }
  
}
/* For Smartphones, Tablets or other Displays less then 768px ====================== */
@media screen and (max-width: 768px){
  /* Header */
  #navbox{
      margin-top: 13em;
      height: 37px;
  }
  nav { 
    text-align: center; 
    width: 100%;
  }
  nav select {
      background-color: rgba(255, 255, 255, 0.6);
      border: medium none;
      color: #0D2525;
      display: block;
      font-family: 'Arvo Bold',serif;
      font-size: 100%;
      font-weight: bold;
      margin: 0 auto;
      min-width: 260px;
      position: relative;
      top: 25px;
      width: 60%;
      height: 25px;
  }

  .sf-menu {
      display: none;
  }

  /* Content */
    article header{
      text-align: left;
      line-height: 3em;
    }
  .twothirds article{
    width: 100%;
  }
  #content article .headline{
    display: none;
  }
  #content article .title{
    width: 100%;
  }
    
  /* Sidebar */
  .twothirds > .inside, .twothirds aside{
    width: 96%;
  }
  
    #full .twothirds aside {display: none;}

    /* make all pictures at least half */
    .third li{  margin: 1.25%; padding: 1.25%; width: 45%; }
    .quarter li{  margin: 1.25%; padding: 1.25%; width: 45%; }
    .fifth li{  margin: 1.25%; padding: 1.25%; width: 45%; }
  
  /* Footer */
    footer .thirds {
      border-bottom: 1px solid lightgray;
      float: left;
      height: auto;
      line-height: 15px;
      padding: 10px 2%;
      text-align: center;
      width: 96%;
  }
  
  /* CE Elemente */
  /* 3 Spalten */
  
  .ce-thirds {
    margin: 0; 
      width: 100%;
  }
  
  
    .form input[type=submit] {  margin-left: 0px;}

}


/* make all pictures full */
@media screen and (max-width: 479px){
    .half li{  margin: 1.25%; padding: 1.25%; width: 95%; }
    .third li{  margin: 1.25%; padding: 1.25%; width: 95%; }
  .quarter li{  margin: 1.25%; padding: 1.25%; width: 95%; }
  .fifth li{  margin: 1.25%; padding: 1.25%; width: 95%; }
}
/* responsibility des Sliders */
@media screen and (max-width: 960px){
    #shadow img{
      width: 100%;
    }
    #slider {
      width: 95%;
    }
}


div.sideBarInner .clearfix {margin: auto; width: 103%;}
  #full .sidebarBox { padding: 30px;}

div.csc-mailform ol li {
  display: block!important;
}