body{
  color: #333;
}

h1{
  font-size: 2.5em;
  margin: 0;
}

h2{
  font-size: 2em;
  margin: 0;
}

h3{
  font-family: 'Architects Daughter', serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0em;
  word-spacing: 0em;
  line-height: 1.2;
  color: #4b762a;
}

h4{
  padding-left: 5px;
  margin: 2px 0;
  color: #666;
  font-size: 1em;
}

a{
  color: #50669c;
}

a:hover{
  color: #a8b3ce;
}

a#back_link{
  float: left;
  font-size: 1.2em;
  color: #333;
  width: 100%;
  margin: 20px 0;
}

.cabin_font{
    font-family: 'Cabin', arial, serif;
    font-style: normal;
    text-decoration: none;
    text-transform: none;
    letter-spacing: 0em;
    word-spacing: 0em; 
}

.molengo_font{
  font-family: 'Molengo', serif;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   letter-spacing: 0em;
   word-spacing: 0em;
}

.text{
  font-family: 'Molengo', 'Helvetica', 'Gill Sans', 'Arial', sans-serif;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   letter-spacing: 0em;
   word-spacing: 0em;
  font-size: 10pt;
  line-height: 1.8em;
  padding: 0;
  margin: 0;
  color: #4b762a;
}

.margin-top{
  margin-top: 40px;
}

.headline{
  font-family: 'Architects Daughter', serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  text-shadow: none;
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0em;
  word-spacing: 0em;
  line-height: 1.4;
  color: #4b762a;
}


.container{
  margin-top: 10px;
  margin-bottom: 10px;
  background: #e3fbd3 url('../images/wiese_tile3.png') repeat top left;
  padding: 10px 0 0 0;
  border: 1px solid #999;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

#header{
  float: left;
  width: 100%;
  height: 120px;
  margin: 10px 0 0 0;
  position: relative;
  -moz-box-shadow: 0px 3px 5px #333;
  -webkit-box-shadow: 0px 3px 5px #333;
  box-shadow: 0px 3px 5px #333;
}


#header h1{
  height: 110px;
  font-size: 2em;
  padding: 0;
  margin: 0;
  text-indent: -5000px;
}

#header h1 a{
  display: block;
  width: 110px;
  height: 110px;
  position: absolute;
  top: 5px;
  right: 15px;
}

#header h1 a img{
  float: left;
}

#header img {
  float: left;
}

#nav{
  float: left;
  width: 100%;
  margin-bottom: 20px;
  border-bottom: 1px solid #999;
}

#nav ul{
  float:left;
  width: 900px;
  margin: 0;
  padding: 0 25px;
  list-style: none;
  background-color: #4b762a;
}

#nav ul li{
  float: left;
  height: 20px;
  margin-right: 20px;
}

#nav ul li a{
  text-decoration: none;
  font-size: 1.1em;
  color: #a5bb95;
}

#nav ul li a:hover{
  color: #d2ddca;
}

#index #nav ul li a#home_link, #mobile_facts #nav ul li a#moblile_facts_link{
  text-shadow: 0 0 10px #fff;
}

#leftcolumn{
  margin-right: 75px;
  padding: 5px;
  width: 550px;
  float: left;
}

#leftcolumn #blurb{
  float: left;
  width: 100%;
  margin: 40px 0 50px 0;
}

#blurb .text{
  margin: 0;
  line-height: 1.8em;
  font-size: 10pt;
}

#leftcolumn div{
  float: left;
  padding: 0 0 0 10px;
  margin: 0 0 40px 0;
}

#iPhone img{
  float: left;
  margin-right: 15px;
}

#iPhone p{
  margin-bottom: 20px;
}

#rightcolumn{
  float: left;
  margin: 0;
  width: 280px;
  padding: 20px 0 0 23px;
  border-left: 1px solid #ccc;
  
}

#rightcolumn #tags{
  margin: 30px 0 220px 0;
  float: left;
  width: 100%;
}

#rightcolumn #tags ul{
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
}

#rightcolumn #tags ul li{
  float: left;
  margin: 0 10px 0 0;
  padding: 0;
  line-height: 1.6em;
  font-size: 1em;
  color: #4b762a;
}


/* Projekte
____________________________________________________________________________*/

#all_projects{
  float: left;
  width: 100%;
  background: rgba(51, 51, 51, 0.2);
  margin: 30px 0 0 -10px;
  padding: 10px 0 5px 10px;
  border: 1px solid #999;
 -moz-border-radius: 4px; 
 -webkit-border-radius: 4px;
 border-radius: 4px;
 -moz-box-shadow: 0px 2px 5px #888;
 -webkit-box-shadow: 0px 0px 5px #888;
 box-shadow: 0px 0px 5px #888;
}

#projekte{
  position: relative;
  overflow: hidden;
  width: 270px;
  height: 360px;
}

#projekte h4{
  float: left;
  width: 270px;
  padding: 10px 0 0 0;
}

#projekte h4 span{
  float: right;
  padding: 0;
  margin: 0 10px 0 0;
}

#projekte a#pprev{
 position: absolute;
 top: 180px;
 left: 0px;
 z-index: 15;
}

#projekte a#pnext{
 position: absolute;
 top: 180px;
 right: 0px;
 z-index: 20;
}

#projekte a#pprev img, #projekte a#pnext img{
  border: none;
  padding: 0;
  margin: 0;
}

#projekte a img{
  margin: 0 0 0 8px;
  padding: 0;
  border: 1px solid #ccc;
  float: left;
}

#projekte span{
  margin: 0 30px;
}

#projekte .scrollable-items{
  width: 20000em;
  position: absolute;
}

.scrollable-items .project{
  float: left;
  width: 268px;
  height: 310px;
}

.scrollable-items .project{
  border: 1px solid #ccc;
  background: rgb(255, 255, 255);
  background: rgba(255, 255, 255, .5);
 -moz-border-radius-topright: 8px; 
 -moz-border-radius-topleft: 8px;
 -moz-border-radius-bottomright: 6px; 
 -moz-border-radius-bottomleft: 6px;
 -webkit-border-top-right-radius: 8px;
 -webkit-border-top-left-radius: 8px;
 -webkit-border-bottom-right-radius: 6px;
 -webkit-border-bottom-left-radius: 6px;
 cursor: pointer;
}

.scrollable-items .project a{
  float: left;
  display: block;
}

a.browse{
  cursor: pointer;
}

a.disabled{
  visibility:hidden !important;
}

#about-us{
  float: left;
  margin: 80px 0;
}

#about-us div{
  float: left;
  margin: 0 0 20px 8px;
}

#about-us div h4{
  font-weight: bold;
  margin: 0 0 5px 0;
  padding: 0;
  font-size: 0.9em;
  color: #4b762a;
}

#about-us div img{
  float: left;
  margin: 0 10px 0px 0;
}

#about-us div ul{
  float: left;
  width: 160px;
  list-style: none;
  margin: -5px 0 0 0;
}

#about-us div ul li{
  float: left;
  line-height: 1.4em;
  font-size: 1em;
  margin-right: 5px;
  color: #333;
}

#about-us div ul li a{
  color: #333;
  font-style: italic;
}

#about-us div ul li a:hover{
  color: #999;
  font-style: normal;
}

/* Mobile Facts
_______________________________________________________________________*/

#mobile_facts ul#info_grapics_list{
  list-style: none;
  margin: 0;
}
#mobile_facts ul#info_grapics_list li{
  margin-bottom: 30px;
}

#mobile_facts ul#info_grapics_list h3{
  margin-bottom: 20px;
  font-size: 1em;
}

#mobile_facts ul#info_grapics_list h3 a{
  text-decoration: none;
}
#mobile_facts #tags{
  margin: 80px 0;
}

#mobile_facts p{
  margin: 10px 0;
  color: #4B762A;
}

#agile_manifesto em{
  font-size: 1.2em;
  font-style: normal;
}


/* Impressum
_________________________________________________________________________*/

#impressum{
  float: left;
  width: 111%;
  margin: 0;
  padding: 0;
}

#impressum div h4{
  font-size: 0.97em;
  margin: 0;
  color: #333;
 font-weight: bold;
}

#impressum p{
  font-family: 'Molengo', 'Helvetica', 'Gill Sans', 'Arial', sans-serif;
   font-style: normal;
   text-decoration: none;
   text-transform: none;
   letter-spacing: 0em;
   word-spacing: 0em;
  font-size: 10pt;
  line-height: 1.8em;
  padding: 0;
  margin: 0;
  color: #4b762a;
}

#impressum div{
 float: left;
 width: 100%;
 margin: 10px 0 20px -10px;
}

#impressum p a{
  color: #333;
  font-style: italic;
}
#impressum p a:hover{
  color: #999;
  font-style: normal;
}




/* Footer
_________________________________________________________________________*/

#footer{
  float: left;
  width: 950px;
  background: #e0f5df;
  background: rgba(24, 178, 18, 0.1);
  margin-bottom: 10px;
  border-top: 2px solid #4B762A;
  -moz-box-shadow: 0px 5px 5px #ccc;
  -webkit-box-shadow: 0px 5px 5px #ccc;
  box-shadow: 0px 5px 5px #ccc;
}



#link_gallery{
  margin: 10px;
  float: left;
  width: 930px;
}

#link_gallery ul{
  list-style: none;
  margin: 0;
  float: left;
}

#link_gallery ul li{
  height: 80px;
  width: 80px;
  margin: 6.5px;
  float: left;
}

#link_gallery ul li a{
  background: url('../images/sunflower2.png') top left no-repeat;
  font-weight: bold;
  font-size: 8pt;
  text-align: center;
  text-decoration: none;
  display: block;
  width: 60px;
  margin: 0 10px 0 0;
  padding: 35px 10px;
  color: #f3f000;
  line-height: 1em;
  -moz-border-radius: 15px; 
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 1px 2px 10px #999;
  -webkit-box-shadow: 1px 2px 10px #999;
  box-shadow: 1px 2px 10px #999;
  text-shadow: 1px 1px 5px #333;
}

#link_gallery ul li a.double_column{
  width: 60px;
  padding: 30px 10px;
}

#link_gallery ul li a:hover{
  color: #f9f77e;
  background: url('../images/sunflower2_bg.png') top left no-repeat;
  -moz-box-shadow: 1px 2px 10px #666;
  -webkit-box-shadow: 1px 2px 10px #666;
  box-shadow: 1px 2px 10px #666;
}

/* Overlay */

.simple-overlay {
  float: left;
  overflow: hidden;
  display:none;
  border: 2px solid #333;
  background: rgba(51, 51, 51, 0.3);
  margin: 0;
  padding: 0;
  width: 600px;
  height: 600px;
  -moz-border-radius: 8px; 
  -webkit-border-radius: 8px;
  border-radius: 8px;
  -moz-box-shadow: 0px 0px 30px #333;
  -webkit-box-shadow: 10px 10px 5px #888;
  box-shadow: 10px 10px 5px #888;
  z-index: 100;
}

.simple-overlay .app_view{
  position: relative;
  float: left;
  background: #fff;
  margin: 10px;
  width: 96%;
  height: 96%;
  overflow: hidden;
  border: 1px solid #666;
}

#rightcolumn .simple-overlay .app_view h3{
  text-shadow: 0 0 10px #fff;
  color: #fff;
  font-size: 1.2em;
  line-height: 1.4em;
  padding: 2px 0 0 0;
  margin: 0;
  background: rgba(51, 51, 51, 0.3);
  position: absolute;
  left: 0px;
  top: 0px;
  z-index: 150;
  width: 576px;
  height: 24px;
  border-bottom: 1px solid #999;
}

#rightcolumn .simple-overlay .app_view h3{
  -moz-box-shadow: 0px 0px 5px #888;
  -webkit-box-shadow: 0px 0px 5px #888;
  box-shadow: 0px 0px 5px #888;
}

#rightcolumn .simple-overlay .app_view h3 a{
  color: #fff;
  text-decoration: none;
  background: #999;
  padding: 5px;
}

#rightcolumn .simple-overlay h3 span.label{
  color: #fff;
  text-decoration: none;
  background: #999;
  padding: 5px;
  
}

#rightcolumn .simple-overlay h3 span{
  line-height: 1em;
  font-size: 1em;
}

#rightcolumn .simple-overlay .app_view p{
  position: absolute;
  top: 520px;
  left: -10px;
  z-index: 300;
  display: block;
  font-size: 1.2em;
  margin: 0;
  padding: 5px;
  width: 566px;
  height: 20px;
  line-height: 1.4em;
  font-size: 1.2em;
  color: #fff;
  background: rgba(51, 51, 51, 0.4);
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
}

#rightcolumn .simple-overlay .app_view p{
  -moz-box-shadow: -1px 0px 8px #888;
  -webkit-box-shadow: -1px 0px 8px #888;
  box-shadow: -1px 0px 8px #888;
}

#rightcolumn .simple-overlay .app_view .stpic{
  position: absolute;
  top: 520px;
  left: 0px;
  z-index: 300; 
}

#rightcolumn .simple-overlay .app_view .ndpic{
  position: absolute;
  top: 520px;
  left: 576px;
  z-index: 310; 
}

#rightcolumn .simple-overlay .app_view .rdpic{
  position: absolute;
  top: 520px;
  left: 1152px;
  z-index: 320; 
}

#rightcolumn .simple-overlay .app_view .fourthpic{
  position: absolute;
  top: 520px;
  left: 1728px;
  z-index: 330; 
}

#rightcolumn .simple-overlay .app_view .fivthpic{
  position: absolute;
  top: 520px;
  left: 2304px;
  z-index: 340; 
}

.simple-overlay .close {
  background-image: url(../images/cancel.png);
  position:absolute;
  right: 5px;
  top: 5px;
  cursor:pointer;
  height:50px;
  width:50px;
  z-index: 400;
}

.simple-overlay .prev{
  position:absolute;
  left: 2px;
  top: 290px;
  z-index: 310;
}

.simple-overlay .next{
  position:absolute;
  right: 2px;
  top: 290px;
  z-index: 320;
}


.simple-overlay .details-scrollable{
  float: left;
  margin: 0;
}

.details p {
  color: #fff;
  font-size: 15px;
  margin: 0 0 -10px 0;
}

/* Overlay Scrolling */


.details-scrollable .items{
  float: left;
  position: absolute;
/*  clear: both;*/
  width: 2000em;
  margin: 0;
  padding: 0;
}

.details-scrollable .items .project-image {
  float: left;
}

.details-scrollable .items img{
  float: left;
}


a.browse {
  cursor: pointer;
}

a.disabled {
  visibility:hidden !important;
}

#footer .spot{
  position: relative;
  float: left;
  display: block;
  width: 100%;
  height: 20px;
}

#footer .spot #badge{
  position: absolute;
  top: -250px;
  right: -30px;
  
}