@color_pri: #008143;
@color_sec: #C2EADD;
@color_tri: #008143;
@color_hls: @color_tri;
@color_font_pri: #FFF;
@color_font_sec: #333;
@font_pri: 'Open Sans';

body {
  background:@color_tri;
  font-family:@font_pri;
  color: @color_font_sec;
  h1,h2,h3,h4,h5 {
    padding-bottom:14px;
    font-weight:600;
    .clr;
  }
  h1{
    padding-top:2px;
    font-size:20px;
  }
  h2 {
    padding-top:4px;
    font-size:18px;
  }
  h3 {
    padding-top:6px;
    font-size:16px;
	a {
		color:#004e29;
	}
  }
  h4 {
    padding-top:8px;
    font-size:16px;
  }
  h5 {
    padding-top:10px;
    font-size:14px;
  }
  p {
    padding:0 0 12px 0;
    line-height:1.3em;
    -moz-hyphens: auto;
    -o-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto; 
  }
  img {
    padding:4px 14px 4px 0;
  }
  p > img {


  }
  #header,
  #footer {
    position: relative;
  }
  #header .inside,
  #content .inside,
  #footer .inside {
    max-width:960px;
    margin:0 auto;
  }
  #header {
    background: url("../img/verlauf-green.jpg") repeat-x 0 0 #3AA361;
    min-height:105px;
    color:@color_font_pri;
    box-shadow: -1px 2px 2px #666;
    overflow:hidden;
    .inside {
      a {
        color:@color_font_pri;
        text-decoration: none;
      }
      #logo {
        padding: 34px 0 10px 0;
        img {
          height:90px;
        }
      }
      #slogan {
        margin-top: 100px;
        margin-left: -196px;
        margin-right: 18px;
        font-size: 16px;
        font-weight: 600;
        position: relative;
        text-shadow: 2px 2px 6px #222;
        input[name="search"] {
          border-radius: 6px;
          padding:6px;
          border: none;
          width: 94%;
          margin-top:20px;
        }
      }
      .mod_flexSlider {
        margin: 20px 18px 8px 18px;
        height: 172px;
        width: 230px;
        overflow:hidden;
        #slider {
          height:162px;
          width: 220px;
          overflow:hidden;
          img {
            padding:0;
          }
        }
      }
      #nav_main {
        height: 31px;
        .btn_navi {
          display:none;
          position: absolute;
          top: 10px;
          right:8px;
          .tshadow;
        }
        ul {
          font-size:14px;
          font-weight:600;
          .clr;
          li {
            margin-top:4px;
            list-style: disc;
            margin-right: 18px;
            padding:6px 4px 18px 0;

            /*.tshadow;*/
            .fleft;
          }
          li.active,
          li:hover {
            background: url("../img/sauthoff_arrow_small.png") no-repeat 5px 20px transparent;
            /*border-bottom:2px solid #fff;*/
          }
          li.first {
            list-style: none;
            margin-left:12px;
          }
        }
      }
      .search {
        display: none;
        margin: 8px 1%;
        padding: 1% 2%;
        background: white;
        border-radius: 12px;
        width: 93%;
        .icon,
        input {
        }
        .icon {
          color:#aeaeae;
          height:24px;
          padding-top: 0.5em;
          padding-left: 0.5em;
          padding-right: 0.5em;
          width:3%;
        }
        .text{
          width: 90%;
          input {
            border:none;
            height:29px;
            width:100%;
          }
        }
      }
    }
  }
  #content {
    min-height:300px;
    background:#DEEED6;
    h1 {
      color: darken(@color_hls, 15%);
    }
    h2 {
      color: darken(@color_hls, 10%);
    }
    h3 {
      color: darken(@color_hls, 4%);
    }
    h4 {
      color: @color_hls;
    }
    h5 {
      color: lighten(@color_hls, 4%);
    }
    .inside {
      padding:32px 0;
      #left {
        width:24%;
        padding:0 10px;
        .fleft;
        #nav_sidebar {
          /*border:1px solid darken(@color_sec,20%);*/
          border-radius: 8px;
          padding:8px;
          background: lighten(@color_sec,10%);
          ul {
          margin-left:22px;
          line-height:1.3em;
            li {
              color: darken(@color_tri, 10%);
              list-style: square;
              a {
                color:@color_tri;
                text-decoration:none;
                .tshadow_light;
              }
              a:hover {
                text-decoration: underline;
              }
            }
            li.last {
              border: none;
            }
          }
        }
      }
      #right{
        width:72%;
        .fright;
      }
      #main {
        margin-left: 10px;
        margin-right: 10px;
        img {
          .fright;
        }
        #bestellen {
          .formbody {
            width: 500px;
            label {
              .fleft;
              width:48%;
            }
            input[type="text"],
            input[type="number"],
            select,
            textarea {
              .fleft;
              width:48%;
            }
            input[type="submit"] {
              margin-right:18px;
              .fright;
            }
            br {
              .clr;
            }
          }
        }
      }
    }
  }
  #footer {
    background: url("../img/verlauf-green_reverse.jpg") repeat-x 0 0 @color_tri;
    min-height:120px;
    box-shadow: 1px -2px 2px #666;
    padding-top:12px;
    .inside {
      line-height:1.3em;
      color:@color_font_pri;
	  .homeinfobox {
		position: fixed;
		top: 5%;
		left: 50%;
		margin-left: -265px;
		display: none;
		z-index: 99999;
		background-color: #fff;
		img {
		  background-color: #fff;
		  margin-top: 60px;
		  padding-left: 24px;
		}
		.close {
		  position: absolute;
		  cursor: pointer;
		  color: #333;
		  margin: 32px 14px 0 14px;
		  left: 24px;
		  font-weight: bold;
		  display: none;
		  z-index: 99999;
		}
	  }
	  .overlay {
		background-color: #222;
		opacity: 0.8;
		position: fixed;
		display: none;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 99998;
	  }
      h1,h2,h3,h4,h5 {
        /*.tshadow_hard;*/
      }
      > address,
      > section {
		.item;
        width:25%;
      }
      a {
        color:@color_font_pri;
        text-decoration: none;
      }
      a:hover {
        text-decoration: underline;
      }
      .copy {
        width:100%;
        text-align: center;
        font-size:12px;
        margin-bottom:12px;
      }
    }
  }
}

@media only screen and (max-width : 810px) {
  html,
  body {
    overflow: hidden;
    overflow-y: scroll;
  }
  #header,
  #content,
  #footer {
    overflow:hidden;
  }
  body {
    #wrapper {
      touch-action: initial !important;
      height: 100%;
    }
    margin:0;
    #header {
      min-height:60px;
      .inside{
        #slogan {
          margin-top:0;
          top: 24px;
          display:none;
          .tshadow;
          input[name="search"] {
            display:none;
          }
        }
        .mod_flexSlider {
          display:none;
        }
        #logo {
          height: 60px;
        }
        #nav_main {
          height:0;
          .btn_navi {
            display:block;
            margin: 32px 6px 0 6px;
            padding: 4px;
            width: 38px;
            border-radius: 6px;
            font-size: 38px;
          }
          ul {
            display:none;
            font-weight: 600;
          }
        }
        .search {
          display:block;
        }
      }
    }
    #content {
      .inside {
        padding:16px 0;
        #left,
        #right{
          padding: 0 16px;
          width:94%;
          .fnone;
        }
        #left {
          #nav_sidebar {
            .mobile_nav;
			ul li span {
			  padding: 6px 12px;
			  display: block;
			  text-shadow: 1px 1px 1px #aaa;
			  cursor: default;
			}
          }
        }
        #main {
		  .ce_text > div {
		    float: none !important;
			width: auto !important;
		  }
          img {
            .fleft;
            padding-left:0;
			max-width:180px;
            /*margin:5% 5% 5% 5%;*/
          }
        }
      }
    }
    #footer {
      .inside {
        margin-left:0;
        padding: 2px;
        > address,
        > section {
          padding: 0 16px;
          margin-bottom:24px;
          margin-left:0;
          width:94%;
          .fnone;
        }
        .nav {
          .mobile_nav;
        }
        .search {
          display:none;
        }
      }
    }
  }
}

@media only screen and (max-width : 550px) {
  body {
    #header {
      .inside{
        #slogan {
          display:none;
          height:34px;
          .clr;
        }
      }
      #logo {
        padding: 34px 0 10px 0;
        img {
          height:60px !important;
        }
      }
    }
    #content {
      #main {
        #bestellen {
          .formbody {
            width: 100%;
            label,
            input[type="text"],
            input[type="number"],
            select,
            textarea {
              width:100% !important;
              .fnone;
              .clr;
            }
            input[type="submit"] {
              margin-right:18px;
              .fright;
            }
            br {
              .clr;
            }
          }
        }
        p,
        img {
          .fnone !important;
          .clr !important;
        }
      }
    }
  }
}

.ce_text {
  a { color:#008143; }
	strong { font-weight:bold; }
	ul {
		margin-bottom:16px;
		li {
	    list-style: square;
    	margin-left: 24px;
  	  line-height: 1.3em;
		}
	}
}

/* independent classes */
		.item {
        padding: 24px 2%;
        margin-right:2%;
		}
em { font-style:italic; }
table tr td { vertical-align: top;}
.invisible { display:none; }
.fleft { float:left; }
.fright { float:right; }
.fnone { float:none; }
.clear, .clr { clear:both;border:none; }
.tshadow { text-shadow: 1px 2px 1px #333; }
.tshadow_hard { text-shadow: 2px 2px 1px #222; }
.tshadow_light { text-shadow: 1px 1px 1px #aaa; }
.mobile_nav {;
  background: lighten(@color_sec,10%);
  border:1px solid darken(@color_sec,20%);
  border-radius: 8px;
  padding:0;
  overflow:hidden;
  width:94%;
  ul {
    margin:0;
    line-height:1.3em;
    li {
      color: darken(@color_tri, 10%);
      margin:0;
      list-style: none;
      overflow:hidden;
      a {
        border-bottom:1px solid darken(@color_sec,20%);
        color:@color_tri;
        text-decoration:none;
        background: url("../img/verlauf_btn.jpg") repeat-x 0 0 transparent;
        width:100%;
        display:block;
        padding:6px 12px;
        .tshadow_light;
      }
      a:hover {
        text-decoration: none;
        background: fade(@color_sec,15%);
        color: darken(@color_sec,20%);
      }
    }
    li.last {
      a {
        border: none;
      }
    }
  }
}
#HyphenatorToggleBox { display: none; }