/*

(c) 2014 OpenMinds UG (haftungsbeschränkt), Wolfram Rittmeyer

colors:
dark-orange:      #ff8800
light_grey_solid: #e7e7e7e
dark_grey_solid:  #d3d3d3

*/

body {
   background: #ffffff;
   font-family: 'Roboto', Arial, sans-serif;
   font-size: 14pt;
   color: #101010;
   margin: 0;
}

h1, h2, h3, h4, h5, h6 {
      text-rendering: optimizeLegibility;
}

h4 {
   margin-bottom: 0;
}

.inner_head {
   margin-top: 2em;
}

a {
    border: 0;
}

a img {
    border: 0;
}

img.logo {
   width: 75px;
   height: 75px;
   vertical-align: middle;
}

.logo a {
   text-decoration: none;
}

h1 {
   font-size: 36pt;
   padding: 0;
   margin: 0 0 0 10px;
   display: inline;
   font-weight: normal;
   vertical-align: middle;
}

#head h1 {
	color: #ffffff;
}

div.benefit p {
   margin-top: 5px;
}

h3 {
   margin-bottom: 0px;
}

div#outer-head {
   position: relative;
}

div#head {
   background: #101010;
   padding: 20px 20px;
   height: 80px;
   position: relative;
}

div#gplay {
   position: absolute;
   width: 100%;
   top: 87px;
   left: 0;
}

div#inner-gplay {
   position: relative;
   top: 0px;
   right: 250px;
}

div#benefits {
   padding: 0 20px;
}

div.benefit {
   width: 32%;
   float: left;
   margin: 0;
   padding-left: 1%;
   padding-right: 1%;
   padding-top: 1em;
}

div.benefit:nth-child(3n+1) {
   padding-left: 0;
   clear: both;
}
div.benefit:nth-child(3n) {
   padding-right: 0;
}

div.benefit h3 {
   margin-top: 0;
}

div.top {
   margin-top: -1em;
   height: 1.5em;
   text-align: right;
   position: absolute;
   top: 0;
   right: 0;
   float: right;
   font-size: 0.75em;
   vertical-align: middle;
}

.app_label {
   color: #ff8800;
   font-weight: bolder;
   font-style: italic;
   text-rendering: optimizeLegibility;
}

div#footer {
   font-size: 0.8em;
   text-align: center;
   margin: 3em 20px 4em;
}

div#follow {
   font-size: 1.2em;
   margin-bottom: 1.5em;
}

div#follow img {
   margin-top: 0.5em;
   margin-left: 0.25em;
   margin-right: 0.25em;
}

div#copyright {
   font-size: 0.8em;
   margin-top: 1em;
   margin-bottom: 2em;
}

div#outer-bottom {
   display: none;
}

div.logo {
   float: left; 
   width: 318px;
}

div.top a {
   margin-left: 1em;
}

a:active {
   color: #ff0000;
}

a:visited {
   color: #ff8800;
}

a:link {
   color: #ff8800;
}

div.container {
   width: 100%;
   position: relative;
}  

div#screenshots {
   text-align: center;
   margin-top: -1em;
   margin-bottom: 1.5em;
   font-size: 0.8em;
}

div#screenshots span {
   display: block;
}

div#screenshots a {
   margin-left: 1em;
   margin-right: 1em;
   margin-top: 0.5em;
}

.teaser_image {
   margin: 1em auto;
   display: block;
}

.body {
   margin-top: 2em;
}

.gplay_image {
   float: right;
   width: 185px;
   height: 60px;   
}

div#gplay_image img{
   vertical-align: middle;
}

.clear {
   clear: both;
}

#impressum_privacy a {
   color: #333333;
}

#impressum_privacy a:active {
   color: #ff0000;
}

#impressum_privacy a:visited {
   color: #444444;
}

.content {
   margin-left: 20px;
   margin-right: 1em;
}

@media all and (max-width: 800px) {
   img.logo {
      width: 60px;
      height: 60px;
      vertical-align: middle;
      margin-left: 20px;
   }
   h1 {
      font-size: 30pt;
   }
   div#head {
      padding: 35px 0;
      height: 60px;
   }
   
   div#screenshots {
      display: none;
   }
   
   div.top {
      margin-top: -2em;
      margin-right: 20px;
   }
   
   div#gplay {
      position: relative;
      width: 172px;
      margin: 20px auto 0;
      top: 0;
   }

   div#inner-gplay {
      position: relative;
      top: 0;
      right: 0;
   }
   
   .body {
      margin-top: 0;
   }

   div.benefit {
      width: 47%;
      float: left;
      margin: 0;
      padding-left: 3%;
      padding-right: 3%;
      padding-bottom: 1em;
   }

   div.benefit:nth-child(3n) {
      padding-right: 3%;
   }

   div.benefit:nth-child(3n+1) {
      padding-left: 3%;
      clear: none;
   }
   
   div.benefit:nth-child(2n) {
      padding-right: 0;
   }

   div.benefit:nth-child(2n+1) {
      padding-left: 0;
      clear:both;
   }
   
   #impressum_privacy a {
      display: block;
   }

   div#footer {
      margin-bottom: 3em;
   }
   
   .teaser_image {
      width: 470px;
   }
   
   div#outer-bottom {
      display: block;
   }
}

@media all and (max-width: 480px) {
   img.logo {
      width: 60px;
      height: 60px;
      vertical-align: middle;
      margin-left: 20px;
   }
   h1 {
      font-size: 30pt;
   }
   div#head {
      padding: 35px 0;
      height: 60px;
   }
   
   div#screenshots {
      display: none;
   }
   
   div.top {
      margin-top: -2em;
      margin-right: 20px;
   }
   
   div#gplay {
      position: relative;
      width: 172px;
      margin: 20px auto 0;
   }

   div#inner-gplay {
      position: relative;
      top: 0;
      right: 0;
   }
   
   .body {
      margin-top: 0;
   }

   div.benefit {
      width: 100%;
      float: left;
      margin: 0;
      padding: 0;
   }
   div.benefit:nth-child(3n) {
      padding-right: 0;
   }
   div.benefit:nth-child(3n+1) {
      padding-left: 0;
   }
   
   #impressum_privacy a {
      display: block;
   }

   div#footer {
      margin-bottom: 2em;
   }
   
   .teaser_image {
      width: 300px;
   }
}

@media all and (min-width: 720px) {
   div.container {
      width: 100%;
   }
}

@media (min-width: 1010px) {
   div.container {
      width: 1000px;
      margin-left: auto;
      margin-right: auto;
   }
   div.logo {
      margin-left: 20px;
   }
   div.top {
      margin-right: 20px;
   }
}