body{
  color: #333;
}

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

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

h3{
  font-size: 1.8em;
  margin: 0;
}

.left{
  float: left;
  margin-right : 20px;
}

.right{
  float: right;
  margin-right : 20px;
  margin-left : 20px;
}

em{
  color: #00d400;
  line-height: 1.3em;
   margin-top: 10px;
   display: block;
}

.description{
  margin-top: 10px;
  font-size: 1.3em;
  font-family: Arial, Helvetica, Geneva, sans-serif;
  line-height: 1.2em;
}

.text{
  font-family: 'Molengo', serif;
   font-size: 18px;
   font-style: normal;
   font-weight: 400;
   text-decoration: none;
   text-transform: none;
   letter-spacing: 0em;
   word-spacing: 0em;
   line-height: 1.1em;

}

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

.headline{
  font-size:2.2em;
  font-weight: bold;
  line-height: 2em;
  background: url('../images/netzwiese-logo-30px.png') no-repeat 0 10px;
  padding-left: 40px;
  margin-bottom: 10px;
}

.headline span{
  color: #00d400;
}

.container{
  background: #fff;
  padding: 0 10px;
}

#leftcolumn{
  margin-right: 45px;
  width: 590px;
  float: left;
}

#header{
  background: url('../images/header4.png') no-repeat top left;
  height: 200px;
  margin: 0px;
}

#header h1{
  font-size: 2em;
  color: #333;
  padding-top: 15px;
  padding-left: 18px;
  float: left;
  text-indent: -5000px;
}


#mantra{
  float: left;
  width: 950px;
  height: 20px;
  margin: 20px 0 80px 0;
}

#mantra p{
  font-family: 'Molengo', serif;
  font-size: 2.2em;
  font-weight: bold;
  color: #333;
  line-height: 1.2em;
}

#mantra p span{
  color: #616161;
  font-style: italic;
}

#what-we-do{
  float: left;
  margin-bottom: 40px;
} 

#what-we-do a{
  color: #333;
font-style: italic;
}

#what-we-do a:hover{
  color: #999;
}

#what-we-do div{
  float: left;
  margin-bottom: 50px;
}

#what-we-do #webdev h3{
  font-family: 'Molengo', serif;
  font-size: 1.6em;
  margin: 0px 0 10px 0;
}

#what-we-do #webdev div h4{
  margin: 10px 0;
  font-family: 'Molengo', serif;
}

#what-we-do #webdev div ul{
  font-family: 'Molengo', serif;
  float: left;
  font-size: 1.2em;
  list-style-type: square;
  margin: 0 0 0 15px;
  width: 300px;
}
#what-we-do #webdev ul li{
  float: left;
  line-height: 1.3em;
  margin: 0;
}

#what-we-do #webdev-img{
  float: left;
  width: 210px;
  margin: 20px 10px 0 30px;
}

#what-we-do #webdev-img img{
  margin-top: 5px;
}

#what-we-do #webdev-img span{
  width: 200px;
  font-size: 1em;
  line-height: 1em;
  margin: 1px 0 2px 0;
  display: block;
  color: #999;
}

#what-we-do #webdev #webapps{
  margin-bottom: 0;
}

#webapps p{
  margin-bottom: 40px;
}

#rightcolumn{
  float: left;
  margin: 0;
  width: 270px;
  height: 1080px;
  padding: 35px 20px;
  background: url('../images/iphone-back.png') top left no-repeat;
  
}

#rightcolumn div{
  margin-bottom: 35px;
}

#rightcolumn h3{
  background: url('../images/netzwiese-logo-20px.png') no-repeat 5px 0px;
  padding-left: 30px;
  margin: 0 0 20px 0;
  line-height: 1.2em;
  color: #fff;
  font-size: 1.4em;
  text-shadow: 0 0 10px #000;
}

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

#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: 5px;
 z-index: 15;
}

#projekte a#pnext{
 position: absolute;
 top: 180px;
 right: -15px;
 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;
}

#about-us{
  float: left;
}

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

#about-us div h4{
  margin: 0 0 5px 0;
  padding: 0;
}

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

#about-us div ul{
  list-style: square;
  color: #666;
  margin: 0 0 0 20px;
}

#about-us div ul li{
  float: left;
  line-height: 1.1em;
  font-size: 1em;
  width: 135px;
}

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

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

#impressum{
  float: left;
}

#impressum h4, p{
  margin: 0;
  line-height: 1em;
  font-size: 0.95em;
}

#impressum p{
  line-height: 1.1em;
  margin: 0 0 2px 8px;
  color: #666;
}

#impressum div{
  margin: 5px 0 10px 0;
}

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

#footer{
  margin-top: 10px;
  float: left;
  width: 950px;
  height: 200px;
  background: url('../images/wiese-tile.png') top left repeat;
}

#footer h2{
  color: #fff;
  font-size: 2.5em;
  margin-bottom: 10px;
  line-height: 1em;
}

#footer div{
  float: left;
  width: 910px;
  margin: 20px;
}

#footer div ul{
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 200px;
}

#footer div#netzwiese_links{
    position: relative;
    font-family: 'Molengo', serif;
}

#footer div ul li{
  width: 300px;
  height: 30px;
}

#footer div ul li a{
  display: block;
  height: 24px;
  color: #fff;
  font-size: 2em;
  line-height: 1.5em;
  text-decoration: none;
  float: left;
}

#footer div ul li a span{
  display: none;
  font-size: 0.7em;
}

#footer div ul li a:hover span{
  display: block;
  position: absolute;
  top: -100px;
  left: -20px;
  color: #333;
  background: url('../images/tooltip-back.png') top left no-repeat;
  width: 940px;
  height: 100px;
  padding: 20px 4px 0px 6px;
  font-style: italic;
} 

/* Scrollable projects */

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

#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;
}

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

a.browse{
  cursor: pointer;
}

a.disabled{
  visibility:hidden !important;
}


/* Overlay */

.simple-overlay {
  position: relative;
  overflow: hidden;
  display:none;
  z-index: 100;
  width: 700px;
  height: 390px;
  padding: 150px;
  background: transparent url('../images/Iphone-back2.png') no-repeat top left;
  
}

#rightcolumn .simple-overlay h3{
  text-shadow: 0 0 10px #fff;
  font-size: 1.8em;
  line-height: 1em;
  padding: 0 0 0 30px;
  margin: -5px 0 0 0;
}

#rightcolumn .simple-overlay h3 span{
  font-size: 14px;
}

#rightcolumn .simple-overlay p{
  float: left;
  font-size: 1em;
  margin: 0 0 0 15px;
  width: 98%;
}

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

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

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


.details-scrollable {
  width: 20000em;
  position: absolute;
  top:160px;
  left:125px;
  font-size:11px;
  color:#000;
  margin: 10px;
  width:250px;
  height: 400px;
}

.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;
}

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

.details-scrollable .items img{
  border: 5px solid #333;
  margin: 0 100px 0 10px;
}


a.browse {
  cursor: pointer;
}

a.disabled {
  visibility:hidden !important;
}