@font-face {
  font-family: 'PfimbaSerif';
    src: url('../font/PfimbaSerif-Regular.ttf') format('truetype');
}

body{
  background-color:#8EB085;
  width:100%;
  margin:0px;
  padding:0px;
}
div{
  margin:0px;
  padding:0px;
}
div#header{
  width:100%;
  height:200px;
  background-image:url(../img/berg.png);
  background-position:top center;
  background-size:auto 90%;
  background-repeat:repeat-x;
  background-color:#8EB085;
}

div#header div#wald{
  width:100%;
  height:100%;
  background-image:url(../img/wald.png);
  background-position: center bottom;
  background-size: auto 50%;
  background-repeat:repeat-x;
}

div#header div#wald div#logo{
  width:100%;
  max-width:1000px;
  height:100%;
  margin: 0px auto;
  background-image:url(../img/logo.png);
  background-position:90% center;
  background-size: auto 80%;
  background-repeat:no-repeat;
}

div#navibutton{
  display:none;
}

div#main{
  width:1280px;
  margin: 0px auto;
  min-height:100px;
}
div#navi{
  min-height:100px;
  float:left;
  width:220px;
}
div#content{
  padding-top:10px;
  min-height:100px;
  float:left;
  width:840px;
}
div#quicklinks{
  min-height:100px;
  float:right;
  width:220px;
}
div.naviholder{
  margin-left:0px;
}

div#quicklinks div{
  margin:20px;
}
div#quicklinks div a{
  text-decoration: none;
}
div#quicklinks div a img{
  width:100px;
  height:auto;
  display:block;
  margin: 0px auto;
}
div#quicklinks div a p{
  font-family: 'PfimbaSerif';
  text-transform: uppercase;
  color: #000000;
  text-align:center;
  text-decoration: none;
  margin:0px;
  padding:0px;
}

div#navi ul {
  margin: 0;
  padding:0;
  text-align: left;
}

div#navi ul li {
  list-style: none;
  margin: 0;
  padding: 0;
}

div#navi ul li a {
  display: block;
  width:180px;
  margin: 10px 0px;
  padding: 5px 10px;
  font-family: 'PfimbaSerif';
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  font-size: 24px;
  color: #000000;
  background-color: #EBE8B0;
}

div#navi ul ul{
  margin-top:-5px;
}

div#navi ul ul li a {
  width:170px;
  margin:5px 0px 5px 10px;
  font-size:18px;
  padding: 3px 10px;
}

div.one-column{
  width:100%;
  clear:both;
}

div.one-column img, div.three-column img{
  max-width:100%;
  height:auto;
}

div.two-column{
  width:50%;
  float:left;
}

div.three-column{
  width:33.3%;
  float:left;
}

div.four-column{
  width:25%;
  float:left;
}

div.floatclear{
  clear:both;
}

/* Image Text */
div#content div.ce-gallery figure figcaption{
  height:20px;
  line-height:20px;
  margin-top:-20px;
  text-align:center;
  background-color:#FFFFFF;
  background-color:rgba(255,255,255,0.5);
  position: relative;
  z-index: 1;
}

/* Low-Res Screens */
@media screen and (max-width: 1279px){
  div#main{
    width:1180px;
  }
  div#content{
    width:740px;
  }
}
@media screen and (max-width: 1179px){
  div#main{
    max-width:1080px;
  }
  div#content{
    width:640px;
  }
}
@media screen and (max-width: 1079px){
  div#main{
    max-width:980px;
  }
  div#content{
    width:540px;
  }
}
@media screen and (max-width: 979px){
  div#main{
    width:880px;
  }
  div#navi{
    width:200px;
  }
  div#content{
    width:540px;
  }
  div#quicklinks {
    width:140px;
  }
  div#navi ul li a {
    width:160px;
    font-size: 22px;
  }
  div#navi ul ul li a {
    width:150px;
    font-size:16px;
  }
}
@media screen and (max-width: 879px){
  div#main{
    width:780px;
  }
  div#content{
    width:440px;
  }
}
@media screen and (max-width: 779px){
  body{
    width:780px;
  }
}

/* Mobile View */
@media screen and (max-width: 659px){
  html{
  height:100%;
  }
  body{
    width:auto;
    height:100%;
    overflow:hidden;
  }
  div#header, div#navibutton{
    position:fixed;
    z-index:20;
    height:75px;
  }  
  div#header div#wald div#logo{
    background-position:90% center;
  }  
  div#navibutton{
    display:block;
  z-index:30;
    width:100%;
    background-image:url(../img/navibutton.png);
    background-repeat:no-repeat;
    background-size: auto 80%;
    background-position:center left;
  }  
  div#navibutton:hover{
    background-image:url(../img/navibutton_hover.png);
  }
  div#main{
    width:100%;
    height:100%;
    overflow-y:scroll;
  }
  div#content{
    width:96%;
    margin: 75px 2% 0px 2%;
    padding:10px 0px;
    clear:both;
  }
  div#navi{
    position:absolute;
    z-index:10;
    background-color:#8EB085;
    height:100%;
    overflow-y:scroll;
    width:75%;
  }
  div#navi ul{
    margin-top:80px;
  }
  div#quicklinks{
    position:absolute;
    left:75%;
    z-index:10;
    background-color:#8EB085;
    height:100%;
    margin-top:75px;
    width:25%;
  }
  div.naviholder{
    margin-left:-100%;
  }
  div#quicklinks div{
    margin:0px;
  }
  div#quicklinks div a img{
    width:75%;
    padding-top:10px;
  }
  div#quicklinks div a p{
    font-size:12px;
    line-height:20px;
  }
  div#navi a{
    width:90%;
  }
  
  div.two-column{
    width:100%;
    clear:both;
  }
  
  div.three-column{
    width:100%;
    clear:both;
  }

  div.four-column{
    width:50%;
  }
}

/* for typo3 */
.align-left { text-align: left }
.align-right { text-align: right }
.align-center { text-align: center }
.align-justify { text-align: justify }