/*  GENERIC
    STRUCTURE
    HEADER
    MENU
    SEARCH
    SUBMENU
    PRODUCT OVERVIEW
    PRODUCT DETAIL
    RECEPTEN
    KALENDER
    CONTACT FORM
    ERROR MESSAGE
    OK MESSAGE
    SEARCH RESULTS
    PRINT
*/

/* =GENERIC
   ---------------------------------------------------- */

html, body
{
    margin: 0px;
    padding: 0px;
        
    font-family: Verdana, Arial, Times New Roman;
    color: #000000;
    
    background-image: url(../images/background.jpg);
    background-repeat: repeat-x;
    background-color: #FFFFFF;
}

body
{
    font-size: 0.75em;
}

h1
{
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    font-weight: normal;
    font-size: 1.34em;
}

h2
{
    margin: 0 0 10px 0;
    padding: 6px 4px 15px 15px;
    color: #000000;
    font-size: 1.17em;    
    background-color: #E9E9E9;
    background-image: url(../images/header1-background.jpg);
    background-repeat: repeat-x;
}

h3
{
    margin: 0 0 0 0;
    padding: 0;
    font-size: 1.5em;
    color: #7CB506;
}

h4
{
    margin: 15px 0 6px 0;
    padding: 0;
    font-size: 1.2em;
    text-transform: uppercase;
}

h5
{
    margin: 15px 0 5px 0;
    padding: 0;
    
    font-size: 1.67em;
    color: #7CB506;
}

/*h2
{
    margin: 10px 0 0 0;
    padding: 0;
    
    text-transform: uppercase;
    font-size: 1em;  
}*/

a
{
    color: #000000;
    /*text-decoration: none;*/
}

a:hover
{
    color: #7CB506;
}

img
{
    border: 0;
}

.clearBoth
{
     clear: both;
     display: block;
     overflow: auto;
     width: 0;
     height: 0;
}

.invisible
{
    display: none;
}

/* =STRUCTURE
   ---------------------------------------------------- */

#wrapper 
{
    margin: 0 auto;
    padding: 8px 0 0 0;
    width: 970px;
}

#content
{
    float: right;
    display: inline;
    margin: 12px 0 0 0;
    padding: 0;
    width: 800px;
    background-color: #FFFFFF;
    border: solid 3px #86AF15;
}

#contentReal /* waarom we dit doen cfr. webapi.js (*1) */
{
    margin: 0 auto;
    width: 92%;
    padding: 10px 0 15px 0;
    /*border: solid 1px #000000;*/
}

#home
{
    margin: 0 auto;
    padding: 10px 0 60px 0;
    width: 600px;
    line-height: 2.5em; 
    background-image: url(../images/home-background.jpg);
    background-repeat: no-repeat;
    background-position: center center;  
}

#uppercaseW
{
    font-weight: bold;
    font-size: 2.34em;
    color: #7cb506;
    text-transform: uppercase;
}

/* =HEADER
   ---------------------------------------------------- */

#header
{
    display: block;
    margin: 0 0 15px 0;
    padding: 0;
    background-color: #030000;
    background-image: url(../images/header-background.jpg);
    overflow: auto;
    height: 1%;
    /*border: solid 1px yellow;*/
}

#header img
{
    display: block;
}

#logo
{
    float: left;
}

#headerSlideShow
{
    float: left;
    margin: 0;
    padding: 0;
    list-style: none;
}

#headerSlideShow li
{
    margin: 0;
    padding: 0;
}

/* =MENU
   ---------------------------------------------------- */

#menuWrapper
{
    float: left;
    width: 150px;
    /*background-color: #7CB11B;    */
}

#menu
{
    margin: 0;
    padding: 0;
    list-style: none;
}

#menu li
{
    margin: 0;
    padding: 0;
    font-size: 1.17em; 
    color: #FFFFFF;
}

#menu li a
{
    text-decoration: none;
}

#menuTop /* We doen dit zo omdat IE (6 én 7) whitespace toevoegen */
{
    height: 40px;
    background-image: url(../images/menu-top.jpg);
    background-repeat: no-repeat;
}

#menuZoeken
{
    height: 81px;
    background-image: url(../images/menu-bottom.jpg);
    background-repeat: repeat-x;
}

#zoeken
{
    margin: 0;
    padding: 45px 0 0 20px;
    font-weight: bold;
    text-transform: uppercase;
}
    
#menu li img
{
    /*display: block;*/
}

#menu li a
{
    height: 1%; /* IE 6 zet anders enorm veel whitespace tussen li's. Cfr hasLayout */
    display: block;
    margin: 0;
    padding: 10px 7px 13px 20px;
    color: #FFFFFF;
    background-color: #7BB01A;
    text-transform: uppercase;
    background-image: url(../images/menu-item-background.jpg);
    background-repeat: repeat-x;
}

#menu li a:hover
{
    color: #FFFFFF;
    background-color: #7BB01A;
    background-image: url(../images/menu-item-over-background.jpg);
    background-repeat: repeat-x;    
}

#menu li a.selected
{
    color: #FFFFFF;
    background-color: #7BB01A;
    background-image: url(../images/menu-item-over-background.jpg);
    background-repeat: repeat-x;        
}

/* =SEARCH
   ---------------------------------------------------- */

#search
{
    height: 150px;
    padding: 6px 5px 0 6px;
    background-image: url(../images/search-background.jpg);
    background-repeat: no-repeat;
    /*border: solid 1px red;*/
}

.searchTextBox
{
    margin: 0 0 0 10px;
    width: 115px;
    height: 14px;
    font-size: 10px;
    border: 0px;
}

/* =SUBMENU
   ---------------------------------------------------- */

#submenu
{
    width: 480px;
    float: right;
    position: relative;
    margin: 71px 0 0 0;
    padding: 0;
    color: #FFFFFF;
}

#homeButton
{
    position: absolute;
    top: -5px;
    right: 112px;
}

#talen
{
    position: absolute;
    top: 2px;
    right: 23px;
}

/* =PRODUCT OVERVIEW
   ---------------------------------------------------- */

.productOverviewColumn
{
    width: 200px;
    float: left;
}

.productOverviewColumn a
{
    text-decoration: none;
}

ul.productOverview
{
    margin: 0 0 0 15px;
    padding: 0;
    list-style: none;    
}

ul.productOverview li
{
    margin: 0;
    padding: 0 0 10px 0;
}

ul.productOverview li ul
{
    margin: 0 0 0px 0;
    padding: 0;
    list-style: none;  
}

ul.productOverview li ul li
{
    padding: 10px 0 0 15px;
    font-size: 0.84em;
}

/* =PRODUCT DETAIL
   ---------------------------------------------------- */

/*h1.productTitle
{
    margin: 15px 0 0 0;
    padding: 0;
    font-size: 1.5em;
    color: #7CB506;
    background-color: Transparent;
    background-image: none;
}*/

#overzichtsMenu a
{
    text-decoration: none;
}
    

#productDetail
{
    float: left;
    width: 470px;
    font-size: 0.92em;
    line-height: 1.7em;
    text-align: justify;
    /*border: solid 1px #000000;*/
}

#productDetail table td
{
    padding: 5px 10px 5px 0;
}

#productDetailMore
{
    float: right;
    width: 220px;
    font-size: 0.92em;
    /*border: solid 1px yellow;*/
}

#productImage
{
    float: right;
    margin: 90px 90px 0 0;
    /*margin: 10px 0 0 0;*/
    /*width: 335px;*/
}

.backToMenu
{
    display: block;
    text-align: right;
    text-decoration: none;
    margin: 0 0 0 auto;
    padding: 0;
    font-weight: bold;
    text-transform: lowercase;
}

#variantenblokjes
{
    margin: 10px 0 0 0;
    padding: 0;
    list-style: none;
}

#variantenblokjes li
{
    margin: 0;
    padding: 0;
    float: left;
}

#variantenblokjes li.variantSelected a
{
    color: #86AF15;
    background-color: #86AF15;
}
    
#variantenblokjes li a
{
    display: block;
    margin: 0 0 0 5px;
    width: 10px;
    height: 10px;
    color: #000000;
    background-color: #000000;
}

#variantenblokjes li a:hover
{
    color: #86AF15;
    background-color: #86AF15;
}

#variantblokjes li a.variantSelected
{
    color: #86AF15;
    background-color: #86AF15;
}
    
#ctl00_cphBody_ctlProductDetail_divRecepten ul li a
{
    text-decoration: none;
}

#ctl00_cphBody_ctlProductDetail_divVarianten ul li a
{
    text-decoration: none;
}
    
/* =RECEPTEN
   ---------------------------------------------------- */

ul.recepten
{
    margin: 0 0 0 15px;
    padding: 0;
    list-style: none;
}

ul.recepten li
{
    padding: 0 0 10px 0;
}

ul.recepten li a
{
    text-decoration: none;
}

.receptenColumn
{
    width: 350px;
    float: left;
    /*border: solid 1px #000000;*/
}

/* =KALENDER
   ---------------------------------------------------- */

#kalender
{
    margin: 0 auto;
    width: 96%;
    padding: 10px 0 15px 0;
    
    /*border: solid 1px #000000;*/ 
}

.kalender
{
    clear: both;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    
}

.kalender li
{
    float: left;
    display: inline;
    margin: 0 17px 0 16px;
    padding: 6px 0 20px 0;
    width: 94px;
    text-transform: uppercase;
    text-align: center;
    background-image: url(../images/kalender-background.jpg);
    background-repeat: no-repeat;
}

.kalender li a
{
    color: #FFFFFF;
    text-decoration: none;
}

.kalender li a:hover
{
    color: #000000;
}

#teelttips
{
    float: left;
    display: inline;
    width: 350px;
    margin: 0 0 0 15px;
    font-size: 0.92em;
    line-height: 1.7em;
    text-align: justify;    
}

#kooktips
{
    float: left;
    display: inline;
    width: 350px;
    margin: 0 0 0 30px;
    font-size: 0.92em;
    line-height: 1.7em;
    text-align: justify;    
}

.tips
{
    
}

.tips li
{
    padding: 10px 0 10px 0;
    border-bottom: solid 1px #CCCCCC;
}

/* =KALENDER EXTENDED
   ---------------------------------------------------- */

.kalenderExtended
{
    clear: both;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.kalenderExtended li
{
    float: left;
    display: inline;
    margin: 0 0 0 11px;
    padding: 6px 0 20px 0;
    width: 114px;
    text-transform: uppercase;
    text-align: center;
    background-image: url(../images/kalender-extended-background.jpg);
    background-repeat: no-repeat;
}

.kalenderExtended li a
{
    color: #FFFFFF;
    text-decoration: none;
}

.kalenderExtended li a:hover
{
    color: #000000;
}
   

/* =CONTACT FORM
   ---------------------------------------------------- */

fieldset 
{  
    float: left;  
    clear: left;  
    width: 100%; 
    margin: 1.5em 0px 0px 0px;  
    padding: 0;
    border: 0;
    /*border: solid 1px #E2E2E2;
    background-color: #F4F4F4;*/
}

legend 
{  
    margin-left: 1em;  
    padding: 0px;
    color: #000000;  
    font-weight: bold;
    font-size: 11px;
}

fieldset ol 
{  
	margin: 0;
    padding: 1em 1em 0 1em;  
    list-style: none;
}

fieldset li 
{  
    float: left;
    clear: left;
    width: 100%;
    padding-bottom: 1em;
}

fieldset.submit 
{  
    float: none;
    width: auto;
    border-style: none;
    padding-left: 12em; 
    background-color: Transparent;
}

label
{
    float: left;
    width: 10em;
    text-align: right;
    margin-right: 1em;
    color: #000000;
    /*position: relative;*/
}

label em
{
    /*position: absolute;
    left: 0;  
    top: 0; */
}

fieldset.error
{
	color: #FF260B;
	border: solid 1px #FF260B;
	background-color: #FFD9D5;
}

fieldset.ok 
{
	color: #117100;
	border: solid 1px #23E000;
	background-color: #D9FFD2;
}

.TextBox
{
    width: 300px;
    padding: 3px;
    border: solid 1px #999999;
}

.TextBoxLarge
{
    width: 300px;
    height: 15em;
    padding: 3px;
    border: solid 1px #999999;
}    

.error
{
	background-color: #FAE7E0;
}

.ok
{
	background-color: #FFFFFF;
}

.Button
{
    padding: 5px;
    color: #FFFFFF;
    border: solid 1px #815532;
    background-color: #9F693D;
}

.TextBoxError
{
    background-color: #FAE7E0;
}

/* =ERROR MESSAGE
   ---------------------------------------------------- */  

#error
{
    color: #FF260B;
    padding: 5px;
    text-align: center;
    background-color: #FFD9D5;    
}

/* =OK MESSAGE
   ---------------------------------------------------- */ 

#ok
{
    color: #169300;
    padding: 5px;
    text-align: center;    
    background-color: #D9FFD2;
}

/* =SEARCH RESULTS
   ---------------------------------------------------- */ 
.searching
{
    margin: 5px 0 0 0;
    text-align: center;
    /*position: absolute;
    top: -35px;
    right: 15px;*/
}

#zoekTerm
{
    width: 95%;
    margin: 0 auto 15px auto;
    padding: 0;
    font-weight: bold;
}

.searchCategorieHeader
{
    margin: 0 auto;
    width: 95%;
    border-bottom: solid 1px #CCCCCC;
}

.searchCategorie
{
    float: left;
    padding: 0 0 5px 0;
    width: 400px;
    font-weight: bold;
}

.searchTotalItems
{
    float: right;
    padding: 0 0 5px 0;
    width: 200px;
    text-align: right;
}

.searchResults 
{
    width: 95%;
    margin: 15px auto 15px auto;
    padding: 0;
    list-style: none;
}

.searchResults a
{
    text-decoration: none;
}

/* =PRINT
   ---------------------------------------------------- */ 

#printWrapper
{
    margin: 0 10px 0 10px;
    padding: 0;
    background-color: #FFFFFF;
}

#printlogo
{
    position: absolute;
    right: 15px;
    bottom: 0;
}


/*tom's stuff*/

.taallink
{
    color: #FFFFFF;
    text-decoration: none;
}

.taallink:hover
{
    color: #FFFFFF;
    text-decoration: underline;
}