/** 3. CSS site Chene de Lux **/

body 
    {
        font-family:Arial;
        font-size:18px;
        }

/* horizontale lijnen uit voor mobile media */
#versieringBoven{
        display:none;    
        }
.kleur {display:none;}
.wit {display:none;}

/* Verdere opbouw site mobiel */
.sitewidth {
            max-width: 900px;
            margin:0 auto;
            position:relative;
        }
header {
        display:block;
        
        }
#navi {
        margin-right: 66px;  
        padding-top: 3%;

        
        }
        
#navi a {
        color:#af8554;
        text-align: center;
        font-size: 1em;
        width: 33%;
        float:left;
        }

#navi #currentpage   
       {
        color:#9ac4dc;
        font-weight: bold;}
       
#language {
        width: 65px;
        float:right;  
        
       }

#language a {
       color:#336699;
       width:33%;
       float:left;
       }  
       
#language #currenttaal {
       color:#9ac4dc;    
       }
.fotoeik img {vertical-align:text-bottom;}
/*keuze banner boven */
#BannerMobiel {
    display:block;
    position:relative;
    border-bottom: solid 5px #dcc80e;
    }
#BannerNormaal {
    display:none;
}
.fotoeik img {width:100%;
              
}
.fotoeik .logo {position:absolute;
           left:10%;
           width:20%;
           top:10%;
           bottom:10%;
            }
section {display:block;}

#subnav {display:none;}
#subnav #currentsubpage   
       {
        color:#9ac4dc;
        //font-weight: bold;
       }


#slideshow {display:block;
            width:80%;
            margin:0 auto;
            padding:10px 0;
}
#slideshow img{width:90%;
               margin:0 auto;
               //padding-left: 10%;

    }

#tekst {width:90%;
        margin:0 auto;
        padding:20px 0;
}
#tekst p{color:#7799bb;
         padding-bottom: 15px;
  
  
}
#tekst a{color:#8cba26;}
#tekst h1 {font-size: 1em;
           color:#8cba26;
}
#tekst2 {width:90%;
        margin:0 auto;
        padding:20px 0;
}
#tekst2 p{color:#7799bb;
         padding-bottom: 15px;}
#tekst2 h1 {font-size: 1em;
           color:#8cba26;
           text-align: center;
           font-weight: bold;
}         
#tekst3 h1 {font-size: 1em;
           color:#8cba26;
           text-align: center;
           font-weight: bold;
           display: block;
          padding-top: 15px;}
footer {background-image: url('../img/footergroot.jpg');
        background-repeat: repeat-y;
        //background-attachment: fixed;
        background-position: center; 
        //background-size: 100%;
        
}
footer p {width:90%;
          margin:0 auto;
          color:#ffffff;
          text-align: center;
          font-size: 0.6em;
          font-weight: bold;
          
}
#ConceptM{text-align: right;
          font-size: 0.6em;
          color:#dcc80e;
          text-decoration: none;}
#ConceptM a{color:#dcc80e;
            font-weight: bold;
}
#ConceptM a:visited {color:#dcc80e;
                     font-weight: bold;
}

#product {width:100%;}
.soort {width:100%;}
.soort img{display: block;
           width:90%;
           margin:0 auto;
           padding: 10px;
}
.soort a{display:block;
         color:#dcc80e;
         text-align: center;
}

.soort p{color:#8cba26;
        padding:10px;
}

.deelvak1 {width:90%;
          margin: 0 auto;
}
.deelvak2 {width:90%;
          margin:0 auto;
}
.deelvak3 {width:90%;
          margin: 0 auto;
}
.deelvak4 {width:90%;
          margin:0 auto;
}

//CSS contact
form 	{ text-align: center;
        line-height: 130%;
        color:#8cba26;
        width:100%;}

form label{width:30%;}

form input.grootte{width:100%;}

textarea {width:100%;}

label.schooner{display:block;
               border-bottom:solid 2px #dcc80e;
               margin:0 auto;
               text-align:center;
               margin-top:10px;
               width:100%;
           	   }	
#inhoud p{color:#7799bb;}
#inhoud label {color:#336699;}
section .deelvak4 p {text-align:left;}
.deelvak3 img {margin:0 auto;
                display:block;}


@media screen and (min-width: 400px){

footer{background-repeat: no-repeat;}            
#oplossing {width:50%;
            float:left;
            padding:1em 0;
}        
#oplossing2 {width:50%;
             margin-left:50%;
             padding:1em 0;             
}
.soort {width:50%;
       float:left;
       //border: 2px solid #dcc80e;
       border-collapse: collapse;
       height:430px;
}
}

@media screen and (min-width: 550px){

#BannerMobiel {
    display:none;
    }
#BannerNormaal {
    display:block;
}
    

#versieringBoven{
        display:block;
        height:2px;
        border-top:solid 4px #dcc80e;
        border-bottom:solid 4px #dcc80e;
        border-left:solid 3px #dcc80e;
        border-right: solid 3px #dcc80e;
        height: 10px;
        margin:0;
        }
        
.kleur {display:block;
        color: #dcc80e;
        background-color: #dcc80e;
        height: 4px;
        margin:0 auto;
        width:100%;
}
.wit {display:block;
      height:4px;
      margin:0;
}
#subnav {display:block;
}

#subnav ul {
        width: 100%;  
        margin:0 auto;
        }
        
#subnav a {
        color:#8cba26;
        text-align: center;
        font-size: 1em;
        width: 33%;
        float:left;
        height:3em;
        vertical-align: middle;
        display: table-cell;
        }

#subnav a.hoover {color:yellow;}

#inhoud {
        border-left:3px solid #dcc80e;
        border-right:3px solid #dcc80e;  
        border-bottom:3px solid #dcc80e; 
        border-collapse: collapse;
}

        
}
@media screen and (min-width: 682px){
#subnav a {height:2em;}

#slideshow {margin:0;
            padding:20px 0;
            width:40%;
            float:left;
}
#tekst {width:60%;
        margin-left: 40%;
        //padding:10px;
}   
.soort {width:33%;
       height: 425px;
}

//CSS contact
form{padding: 0;
	  margin:0;}
label.schooner{border-bottom:none;
               border-top:solid 2px #dcc80e;
               text-align:left;}

form label {width:30%;
			text-align: left;
			padding: 5px 0;
			display: inline-block;}

form input.grootte {width: 68%;
					display: inline-block;
				    }
}
@media screen and (min-width: 900px){
#oplossing{padding:1.5em 0;}
#oplossing2{padding:1.5em 0;}
.oplossing3 {width:49%;
            float:left;
}        
.oplossing4 {width:49%;
             margin-left: 50%;
}
/* .soort{width:24.8%;
      border-right:2px solid #dcc80e;
      height: 400px;
}
div.soort:last-child{border:none;}
*/


/*css contact*/
.deelvak1{float:left;
          width:36%;
          margin-left:10px;
          padding:10px 0;
        }
.deelvak2{float:right;
          width:58%;
          margin-right:10px;
          padding:10px 0;
          
}
section .deelvak1 p {text-align:left;}
form { text-align: left;
       width:100%;}
form label{width:70%;
		   }

form input.grootte{width:70%;}
label.schooner{border-bottom:solid 2px #dcc80e;
               border-top:none;
               margin-top:0;}
textarea {width:100%;}
.deelvak3{float:left;
          width:33%;
          margin-left:10px;
          padding:10px 0;
        }
.deelvak4{float:right;
          width:62%;
          margin-right:10px;
          padding:10px 0;
          
}


@media screen and (min-width: 1020px){
#navi {
        margin-right: 0px;  
        padding-top: 0%;
 
        }  
#language {
        width: 65px;
        clear:both;  
        
       }
#navi ul {
        width: 30%;  
        padding-top: 1%;
        padding-bottom:1%;
        float:right;
        }
        
#navi a {
        color:#af8554;
        text-align: center;
        font-size: 1em;
        width: 33%;
        float:left;
        }
    
#language ul {
        width: 20%;
        max-width: 65px;
        position: absolute;
        left:900px;
        top:8px;
       
       }

#language a {
       color:#336699;
       width:1.1em;
       float:left;


}  
#language li {
           text-align: center; 
           width:100%;
}    
}