/* the Semantic Grid System - Awesomeness! */
.pie { behavior: url(pie/PIE.htc); }


@import 'grid.less';
@import 'mixins.less';

@columns: 12;
@column-width: 60;
@gutter-width: 20;

/* COMMON CSS */

@grey: #555555;

.right { float: right; }
.left { float: left; } 
.bold { font-weight: bold; }

article, aside, header, nav, section { display: block; }

img { border: 0px; }
iframe { border: 0px; }
fieldset { border-width: 0px; }

.clearfix:after { content: "."; display: block; height: 0;  clear: both; visibility: hidden; } /* Clearfix */
.clearfix { display:block; } /*opera & safari */

#admin-menu { position: fixed !important; } /* Fixed admin menu */
#admin-menu:hover{ top: 0px; }

/* Admin stuff */

div.contextual-links-wrapper { z-index: 1; }
nav.tabs{h2{display:none;}}
ul.tabs.primary {
  margin:20px 0px 0px;
  padding:0px;
  li{
    display: inline-block;
    list-style-image:none;
    list-style:none;
    padding:3px 5px;
    margin:0px 5px;
    background:@maincolor;
    opacity:0.6;

      a{
          color:@maincolorcontrast;
            opacity:1;
            text-decoration:none;
      }

      &:hover{
        background:@secondarycolor;
      }
  }

 }

/* For different resolutions */

@media only screen
and (max-width: 519px) {
  /* Single Fluid Width Column (iPhone) */
}
 
@media only screen
and (min-width: 520px)
and (max-width: 759px) {
  /* Single Fixed Width Column */
}
 
@media only screen
and (min-width: 760px)
and (max-width: 959px) {
  /* Two Fixed Width Columns, Medium Padding (iPad) */
}
 
@media only screen 
and (min-width: 960px) {
  /* Two Fixed Width Columns, Large Padding (Desktop) */
}

/* ********************************* */
/* SITE-SPECIFIC CSS - BUILD ON THIS */
/* ********************************* */

/*@maincolor:#a8b329;*/
@maincolor: #006633;
@maincolorcontrast:#FFF;

@secondarycolor:#70781A;

@darkcolor:#262626;
@lightcolor:#a0a0a0;


/* Mixin */

.font{
  font-family: 'Abel', sans-serif;
}

.inputfield{
  .radius_all(3px);
  width: 149px;
  height: 20px;
  padding: 3px;
  border: 1px solid @lightcolor;
  .box_shadow(inset 1px 2px 4px @lightcolor);
}

.labeltext{
width: 112px;
display: block;
float: left;
margin-right:5px;

}

.button{
  .radius_all(3px);
  padding:10px;
  color: @maincolorcontrast;
  background: @maincolor;
  border:none;
  .font();
margin: 10px 30px;
font-size: 30px;
}

body{overflow-x: hidden;}

a{
  text-decoration:none;
  color:@secondarycolor;
}

.container {
  top:20px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  color:@darkcolor;
  .font;
  max-width:960px;
}

.gradient{
    position: fixed;
    width:100%;
    height:100%;
    .gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.3));
    overflow-y: auto;
    overflow-x:hidden;
    top:0px;
    left:0px;
      margin: 0 auto;
}

.ie8 .gradient{
  opacity:0.1;
}

.main{
  width:625px;
  float:left;
  margin-right:0px;

}

.formside{
width:335px;
float:left;
margin-left:0px;
}

footer{
 width:64%;
 float:left;
border-top: 1px solid @darkcolor;
padding: 5px 0px;
margin-bottom: 50px;

a{
  color:@darkcolor;
  text-decoration: none;
  &:hover{border-bottom:1px solid @maincolor; color:@maincolor;}

}

  #block-menu-menu-footer{
    padding-left:10px;
    float:left;
      ul{
        list-style: none;
        list-style-image: none;
        margin:0px;
        padding:0px;
        li{
          display: inline-block;
        }
      }
  }
  .block-the-aim-company-logo {
    float:right;
    padding-right:10px;
     a:hover{border:none;}
  }

}

.logo{
  height: 40px;
  width:100%;
  float:left;
  margin-bottom:15px;
  padding-left: 15px;
  figure{
    margin:0px;
    float:left;
      img{
        height:40px;  
      }

  }

  span{
    float:left;
    font-size: 24px;
    padding: 5px;
    color:@darkcolor;
  }

}

#block-system-main-menu{
  ul{
    padding:0px 0px 0px 30px;
    margin:0px 0px 9px;
      li{
        display:inline-block;
        padding:5px 10px 5px; 
        font-size:14px;
        text-transform:uppercase;
        &.active-trail{background: @maincolor;
          a{color:@maincolorcontrast; 
            &:hover{border-bottom: 1px solid @maincolorcontrast;}}}
      
          a{
            text-decoration:none;
            color:@darkcolor;
            &:hover{border-bottom: 1px solid @darkcolor;}
          }
      }
    }

}

.formside{

  h2{
    position: absolute;
    background: @maincolor;
    color:@maincolorcontrast;
    text-transform: uppercase;
    font-size:17px;
    height: 92px;
    display: block;
    margin: 0px;
    line-height: 115px;
    text-align: center;
    .radius(5px, 100px, 0px, 0px);
    .box_shadow(6px -1px 6px #595959);
    width:335px;
      .pie;
  }

  .webform-client-form{
    position: relative;
    float:left;
    top:92px;
    background: white;
    padding-top: 25px;
    padding-bottom: 100px;
      .box_shadow(7px 10px 8px #595959);
      overflow: hidden;
      width:100%;
        .pie;
  }

  .form-item{
    padding:10px 30px 5px;
    width: 285px;
  }

  .webform-component-textfield input,.webform-component-webform_email input,.webform-component-webform_number input{
    .inputfield();
  }

  .webform-component-webform_number input{
    width:50px;
    text-align: center;
  }

  .webform-component-textfield label,.webform-component-webform_email label, .webform-component-webform_number label{
    .labeltext();
  }

  .webform-component-textarea label{ float:left;width:100%;}

  .webform-component-radios .form-radios{
    padding-top:10px;
    padding-bottom:10px;
    float:left;
  }

  .webform-component-managed_file input{
    .button();
    font-size:14px;
    margin:5px 0px;
  }

  .webform-component-radios > label{
   width:100%;
   float:left;
  }

  .webform-component-radios .form-type-radio{
    width:100%;
    float:left;
  }


  .fieldset-legend{
    display: none;
  }

  fieldset{
    margin:0px;
    padding:0px;
  }

  .form-textarea-wrapper textarea{
     .inputfield();
    height:100px;
    width:280px;
        font-family:arial;
  }

  #webform-component-isolatie{
    display: none;
  }

  #webform-component-saneren{
    display: none;
  }

  .form-actions input{
    .button();
    background: #006633;
    width:285px;
    cursor: pointer;
  }
}

.region-bottom{
  background:white;
  margin-right: 20px;
  margin-top:30px;
  padding:10px 30px;

  a{
    color:@maincolor;
    text-decoration: none;

    &:hover{border-bottom:1px solid @maincolor;}
  }
}

.region-contentextra{
    float:left;
    width: 43%;
}

#block-block-1{
  float:left;
  background:white;
  padding: 5px 20px;
  margin-top:20px;

  h2{
    color: @maincolor;
  }

  a{
    color:@maincolor;
    text-decoration: none;

    &:hover{border-bottom:1px solid @maincolor;}
  }
}

#block-block-2{
  float:left;
  background:@maincolor;
  padding: 5px 20px;
  margin-top:20px;
  color:@maincolorcontrast;
}

.region-main-menu{
  float:left;
}

.region-content{
  .content{
    line-height:22px;
  }
}

.main header{
  float:left;
}

.main article{
  float:left;
}

.region-content-wrapper{
  float: left;
  width: 585px;
  padding: 20px 20px 20px 0;

}

#block-block-1{
  ul{
    margin:0px;
    padding:0px;
    list-style: none;
    list-style-image: none;

    li{
      padding:10px 0px;
      line-height: 20px
    }
  }
}


h1 { .font; font-size: 24px; padding:0px; margin:0px; }
h2 {font-size:20px; text-transform: uppercase;  padding:10px 0px 5px; margin:0px; }
h3 {font-size:16px;  padding:5px; margin:0px;}

header nav { .column(9); }

body { .font; background:url(../img/bggrey.jpg); }

header {
 background:url(../img/bgdark.jpg); 
 height:250px;
 position: relative;

 .title{
top: 50px;
position: absolute;
right: 50px;
color: white;
font-size: 30px;
text-transform: uppercase;
background: black;
opacity: 0.8;
padding: 0px 10px;

 }

  .slogan{
top: 95px;
position: absolute;
right: 50px;
color: white;
max-width: 300px;
font-size: 16px;
text-align: right;
background: black;
opacity: 0.8;
padding: 0px 10px;
 }

}

  body.page-node-1{
      #webform-component-isolatie{
      display: block;
    }
  }
  
  body.page-node-3{
      #webform-component-saneren{
      display: block;
    }
  }

  #webform-client-form-6{
  .form-item label{
    display:block;
  }

  .form-item input{
    .inputfield();
  }

  div.description{
    font-size:14px;
    padding:5px 0px;
  }

  .form-actions input{
    .button();
    width:200px;
    font-size:16px;
    margin:0px;

  }

  textarea{
    .inputfield();
    height:100px;
    width:320px;
    max-width:320px;
    font-family:arial;
  }
}

.mollom-privacy{
  padding:10px 20px 10px 30px;
}



#webform-component-titel {
  overflow: hidden;
  > label {
    width: 112px;
    display: block;
    float: left;
    margin-right: 5px
  }
  .form-radios {
    width: 150px;
    padding: 0;
    .form-type-radio {
      width: 50%;
      float: left;
      label {
        float: left;
      }
    }
  }
}
.webform-component-radios {
  .form-type-radio {
    label {
      width: auto;
      display: inherit;
    }
  }
}

form label.required:after {
  content: " *";
  color: red;
}

.contactinfo {
  margin-top: 50px;
  img {
    float: left;
    margin-right: 50px;
  }
  a {
    color: @maincolor;
  }
  a:hover {
    text-decoration: underline;
  }
}

.formside h2 {
  background: #006633;
  width: 260px;
  text-align: left;
  padding: 15px 50px 0 25px;
  font-size: 27px;
  line-height: 1.25em;
}

aside {
  margin-bottom: 50px;
}

.front h1 { display: none; }