/* Stylesheet für Desktopanzeige Erntl-Tueren.de */

/* Generalselektor für alle Elemente kein Aussen/Innenabstand */
*    { margin:0; padding:0; text-align:left; }

/* Immer Scrollbalken vertikal */
html { overflow-y: scroll; }

body { text-align:center; 
       filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#fff');
       background-image: linear-gradient(to bottom, #aaa 0%, #fff 50%);
       background-repeat:no-repeat;
       overflow-x:hidden;
     }

.clear { clear:both; }
.left  { float:left; }
.right { float:right; }

     
#site-wrap {
  width:85%; max-width:1200px;
  margin:1.5em auto;
}

header#site-header
{ 
  width:100%; 
  background:url(../images/header.jpg) no-repeat center;
  background-size:100% auto;
  height:400px;
  box-shadow: 5px 5px 10px #555;
 -moz-box-shadow: 5px 5px 10px #555;
 -ms-box-shadow: 5px 5px 10px #555;
 -o-box-shadow: 5px 5px 10px #555;
 -webkit-box-shadow: 5px 5px 10px #555;
}

main#content {
  margin-left:280px;
}

/* # signalisiert ID */
#logo
{ 
  width:201px;
  height:122px;
  margin:1.75em 0 2em 1.75em;
  box-shadow: 5px 5px 10px #555;
 -moz-box-shadow: 5px 5px 10px #555;
 -ms-box-shadow: 5px 5px 10px #555;
 -o-box-shadow: 5px 5px 10px #555;
 -webkit-box-shadow: 5px 5px 10px #555;
}


#mobil-logo{
  display:none;
}
        
nav#site-nav
{ position:absolute;
  width:201px;
  background:#2fac44;
  color:#fff;
  padding:20px 0 80px 0;
  margin:2em 0 2em 1.75em;
  box-shadow: 5px 5px 10px #555;
 -moz-box-shadow: 5px 5px 10px #555;
 -ms-box-shadow: 5px 5px 10px #555;
 -o-box-shadow: 5px 5px 10px #555;
 -webkit-box-shadow: 5px 5px 10px #555;
}
nav ul
{
  list-style-type:none;
}

nav#site-nav ul li
{
  margin-left:-15px;
  padding-left:20px;
}

nav#site-nav ul li a:link,
nav#site-nav ul li a:active,
nav#site-nav ul li a:visited
{
  color:#fff;
  text-decoration:none;
}

nav#site-nav ul li a:hover
{
  color:#040;
  text-decoration:underline;
}

h1,h2,h3,h4,h5,h6
{
  color:#060;
  margin:1em 0;
}

p {
  margin: 0.5em 0;
}

h1             {   color:#2fac44;
                   font-size:2.5em;
                   display:inline-block; 
                   padding:0.5em 0.25em 0.5em 0.75em; 
                   clear:both; background:#eee;
                   box-shadow: 5px 5px 0px #2fac44;
                   -moz-box-shadow: 5px 5px 0px #2fac44;
                    -ms-box-shadow: 5px 5px 0px #2fac44;
                     -o-box-shadow: 5px 5px 0px #2fac44;
                -webkit-box-shadow: 5px 5px 0px #2fac44;
                   margin:-155px 0 55px 0;
                        transform: rotate(-5deg);
                   -moz-transform: rotate(-5deg);
                    -ms-transform: rotate(-5deg);
                     -o-transform: rotate(-5deg);
                -webkit-transform: rotate(-5deg); }

ul{
  list-style-type:square;
  margin-left:15px;
  color:#070;
}

ul span{
  color:black;
}

footer {
  background:#2fac44;
  color:#040;
  padding:20px;
  margin:2em 0 0 0;
}

#KONTAKTFORM            {  width:100%; margin:50px auto; }
.frm_div                {  max-width:49%; min-width:320px; margin:20px 0px; }
.frm_header             {  font-size:1.25em; margin-top:15px; }
.frm_spmscr             {  display:none; visibility:hidden; }
.pflichtfeld            {  margin-left:3px; color:#e00; }
input[type="text"],
input[type="email"],
input[type="phone"]     {  padding:0.5em 0.5em; width:50%; min-width:315px; background:#efefef; border:1px solid #fefefe; box-shadow: 5px 5px 0px #336600; color:#777777; }
input[type="submit"]    {  text-transform:uppercase; padding:0.5em 0.5em; width:40%; min-width:315px; background:#336600; border:1px solid #336600; padding:0.5em; text-align:center; color:#fff; cursor:pointer;}
input[type="submit"]:hover
                        {  color:#ffffff; background:#0271fb; }
textarea[name="frm_nachricht"]  
                        {  padding:0.5em 0.5em; width:50%; min-width:315px; height:320px; background:#efefef; box-shadow: 5px 5px 0px #336600; color:#777777; border:1px solid #fefefe;}                

  
.kontakt_vc             { float:left; background:#eee; width:390px; max-height:130px; margin:25px 10px 25px 0px; padding:5px;}
.kontakt_vc img         { float:left; margin-right:10px; }
.vcr_download           { font-size:0.75em; text-decoration:none; }
.vcr_download i         { color:#007700; }     

a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover    { text-decoration: none; color: #777; cursor:default; }


/* *****************************************************************************************************************************************
*/

@media only all and (max-width: 1024px) {

/* Stylesheet für Desktopanzeige Erntl-Tueren.de */

/* Generalselektor für alle Elemente kein Aussen/Innenabstand */
*    { margin:0; padding:0; text-align:left; }

/* Immer Scrollbalken vertikal */
html { overflow-y: scroll; }

body { background:transparent;
       overflow-x:hidden;
     }

.clear,
.left,
.right { clear:both; }

#site-wrap { width:95%; margin:0; }     

header#site-header
{ position:fixed;
  width:100%;
  background:#2fac44;
  height:40px;
  padding:5px;
  text-decoration: none;
  z-index: 1;
}

main#content {
  width:90%;
  padding:20px;
  margin:0;
}

/* # signalisiert ID */
#logo
{ display:none;
}

#mobil-logo{
  float:right;
  margin-right:1em;
  width:66px;
  height:40px;
}
        
nav#site-nav
{ position:fixed;
  width:201px;
  background:#2fac44;
  color:#fff;
  padding:20px 0 80px 0;
  margin:0;
  background:#2fac44;
  color:#fff;
  opacity: 0;
  left: 0px;
  top: 0px;
  z-index: 0;
  width: 70%;
  height: 100%;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  background: -moz-linear-gradient(top, #2fac44 0%, #00CC33 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2fac44), color-stop(100%, #00CC33));
  background: -webkit-linear-gradient(top, #2fac44 0%, #00CC33 100%);
  background: -o-linear-gradient(top, #2fac44 0%, #00CC33 100%);
  background: -ms-linear-gradient(top, #2fac44 0%, #00CC33 100%);
  background: linear-gradient(to bottom, #2fac44 0%, #00CC33 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#2fac44', endColorstr='#00CC33', GradientType=0);
}
nav ul
{
  list-style: none;
  margin: 0;
  width: 100%;
  padding: 0;
}

nav#site-nav ul li
{
  position: relative;
    font-size: 1em;
    font-weight: bold;
    
    padding: 15px;
}

nav#site-nav ul li a:link,
nav#site-nav ul li a:active,
nav#site-nav ul li a:visited
{
  color: #fff;
  text-decoration: none;
}

nav#site-nav ul li a:hover
{
  color:#040;
  text-decoration:underline;
}

h1,h2,h3,h4,h5,h6
{
  color:#060;
  margin:1em 0;
}

p {
  margin: 1em 0;
}



ul{
  list-style-type:square;
  margin-left:15px;
  color:#070;
}

ul span{
  color:black;
}

footer {
  background:#2fac44;
  color:#040;
  padding:20px;
  margin-top:2em;
  width:100%;
}

#KONTAKTFORM            {  width:100%; margin:50px auto; }
.frm_div                {  max-width:45%; min-width:320px; margin:20px 0px; }
.frm_header             {  font-size:1.25em; margin-top:15px; }
.frm_spmscr             {  display:none; visibility:hidden; }
.pflichtfeld            {  margin-left:3px; color:#e00; }
input[type="text"],
input[type="email"],
input[type="phone"]     {  padding:0.5em 0.5em; width:320px; background:#efefef; border:1px solid #fefefe; box-shadow: 5px 5px 0px #336600; color:#777777; }
input[type="submit"]    {  text-transform:uppercase; padding:0.5em 0.5em; width:315px; background:#336600; border:1px solid #336600; padding:0.5em; text-align:center; color:#fff; cursor:pointer;}
input[type="submit"]:hover
                        {  color:#ffffff; background:#0271fb; }
textarea[name="frm_nachricht"]  
                        {  padding:0.5em 0.5em; width:300px; height:320px; background:#efefef; box-shadow: 5px 5px 0px #336600; color:#777777; border:1px solid #fefefe;}                

  
.kontakt_vc             { float:left; background:#eee; width:320px; margin:25px 10px 25px 0px; padding:5px;}
.kontakt_vc img         { float:left; margin-right:10px; }
.vcr_download           { font-size:0.75em; text-decoration:none; }
.vcr_download i         { color:#007700; }     

a[href^="tel"]:link,
a[href^="tel"]:visited,
a[href^="tel"]:hover    { text-decoration: none; color: #777; cursor:default; }

/*
using background color is important to cover the menu
position absolute isset to cover the whole viewport
*/
#content {
    background-color: #FFFFFF;
    padding: 52px 10px 10px 10px;
    position: relative;
    width: auto;
    height: 100%;
    -webkit-box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
    box-shadow: -10px 0px 9px 0px rgba(0, 0, 0, 0.4);
}

/*
the hamburger button with a little gradient effekt
*/
#hamburger {
    float:left;
    margin-right:20px;
    cursor: pointer;
    display: block;
    height: 25px;
    padding: 3px;
    width: 30px;
    background: transparent;
}

/*
The white stripes in the hamburger button
*/
#hamburger div {
    background-color: #fff;
    border: 2px solid #fff;
    border-radius: 2px 2px 2px 2px;
    height: 2px;
    margin-top: 3px;
    width: 90%;
}

#contentLayer {
    display: none;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 30%;
    z-index: 5;
}

}