/* SIMPLE RESET */
/****************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; }
ol, ul { list-style: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table {	border-collapse: collapse; border-spacing: 0; }
a img { border:none; }

html, body, form { height:100%; }
.clear{ clear:both;}
.hide { display: none;}
/****************************************************/




/* NON-SEMANTIC HELPER CLASSES. PLEASE DEFINE YOUR STYLES BEFORE THIS SECTION. */
 /****************************************************/
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; }
.ir br { display: none; }
[hidden] { display: none; visibility: hidden; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }
/****************************************************/




/*INPUT EN TEXTAREA FIX*/
 /****************************************************/
input, textarea {
 -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
 -moz-box-sizing: border-box; /* Firefox, other Gecko */
 box-sizing: border-box; /* Opera/IE 8+ */
}
 /****************************************************/



 
/*CENTERFIX VOOR CHROME*/
 /****************************************************/
@media screen and (-webkit-min-device-pixel-ratio:0) 
{
	#nonFooter { background-position: 50.001% 0; }
	#mainContainer, #footTop { background-position: 49.999% 0; }
}
 /****************************************************/




/* STICKY FOOTER */
/****************************************************/
/* #nonFooter{ min-height:100%; height:auto !important; height:100%; margin:0 auto -105px;  background: url("../images/basisLayout/ContentBground.png") center top repeat-y;  } */
/* #push, #footer{ height:105px; } */
/****************************************************/




/* ERROR404 */
/****************************************************/
.error404{ margin-top:10px;}
/****************************************************/




/* PARAGRAFEN ALGEMEEN */
/****************************************************/
body, td, input, select, textarea{ font:normal 12px Arial,Tahoma,Verdana,Sans-serif; color:#ffffff; }
body{ background: url("../images/bgroundAll2.jpg") center top no-repeat fixed; }
body{ -webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover; background-size:cover;}
p, ul, ol{ margin: 5px 0 12px 0; }
ol{ margin-left: 20px; }

a{ font-weight:bold; color:#d03837; text-decoration:underline; }
a:hover{ color:#ffffff; text-decoration:none; }

h1{ font:normal 30px Arial,Tahoma,Verdana,Sans-serif; color:#d03837; margin:0 0 12px 0; }
h2{ font:normal 20px Arial,Tahoma,Verdana,Sans-serif; color:#ffffff; margin:0 0 10px 0; }
h3{ font:normal 18px Arial,Tahoma,Verdana,Sans-serif; color:#d03837; margin:0 0 10px 0; }
h4{ font:bold 14px Arial,Tahoma,Verdana,Sans-serif; color:#d03837; margin:0 0 8px 0; }
h5{ font:bold 14px Arial,Tahoma,Verdana,Sans-serif; color:#ffffff; margin:0 0 8px 0; }

ul li{ padding:0 0 0 15px; }
ol li{ padding:0; }
ul li{ background: url("../images/modules/tekst/bullet1.png") -7px -2px no-repeat; padding-left:10px; }
ol li{ list-style-type:decimal; }
ul li ul li { background: url("../images/modules/tekst/bullet2.png") -7px -2px no-repeat; }

input[type=text],input[type=file], select, textarea, select option{ border:1px solid #495044; background-color:#20231e;}
input[type=text]:focus,input[type=file]:focus, select:focus, textarea:focus { border:1px solid #d03837;}
/****************************************************/




/* LAYOUT ALGEMEEN */
/****************************************************/
/*Header*/
#header{ text-align:center; }
#head{ width:960px; height:180px; margin:0 auto; text-align:left; padding:0 10px; position:relative; top:0; right:0;}
#logo{ width:460px; height:175px; display: block; text-indent: -9999px; background: url("../images/logo.png") center top no-repeat;  position:absolute; top:0px; left:10px;}

#talen{ height: 17px; display: block; color: #ffffff; position:absolute; top:0; right:10px; }
#talen ul{ margin:0; padding:0; }
#talen li{ list-style: none; background:none;}
#talen li{ display:inline-block; padding-left:2px; *display:inline; *float:left;}
#talen li a{ background-color:#000000; }
#talen li a, #talen li .selected { width:22px; height:17px; font-weight:bold; color:#fff; text-decoration:none; display:block; text-align:center;}
#talen li a:hover, #talen li .selected{  color:#262626; background-color:#fff; }


/*Mandje*/
#mandje{ width:24.45%; height:17px; padding:8px 0; font-weight:bold; color:#fff; background:#1b1e1b; position:absolute; top:70px; right:10px;}
#mandje:hover{ background-color :#ce3736;}
#mandjeTitel{ width:200px; height:12px; position:absolute; top:-12px; font-weight:bold ; font-size:12px; text-transform:uppercase; color:#ffffff; }
#mandje a{width:100%; height:110px; padding-left:15px; position: absolute; z-index:2;top:-40px; right:-15px; display: inline-block;text-indent: -9999px; background: url("../images/basisLayout/MandjeIcon.png") right -120px no-repeat;}
#mandje a span{ background: url("../images/basisLayout/MandjeIcon.png") right top no-repeat;opacity: 0; filter:alpha(opacity=0);position: absolute; top:0; left:0; display:block; width:100%; height:100%;-webkit-transition:opacity 0.5s;-moz-transition:opacity 0.5s;-o-transition:opacity 0.5s;}
#mandje a:hover span{ opacity:1; filter:alpha(opacity=100);}
#mandjeProducten{ padding-left:8px; }
#mandjeBedrag{ text-indent: -9999px; float:left;}
#mandjeTotaal:before{  content:"- ";}

/*Main gedeelte*/
#mainContainer{ }

/*Hoofdmenu*/
#hoofdmenu{ height:60px; background: url("../images/menuBground.png") center top repeat-x; }
#hoofdmenu ul{ width:960px; margin:0 auto; padding:0; }
#hoofdmenu ul li{ margin:-5px 0 0 10px; list-style: none; float:left; font-size:16px; font-weight:bold; background:none; padding-left:0;}
#hoofdmenu ul li span, #hoofdmenu ul li a{  width:120px; height:48px; line-height:48px; display:block; text-align:center; text-decoration:none; }
#hoofdmenu ul li a{ color:#fff; background-position: center -460px;}
#hoofdmenu ul li span, #hoofdmenu ul li a:hover, #hoofdmenu ul li a.selected{ color:#ffffff; background: #cf3837 url("../images/basisLayout/sprite_repeatx.png") repeat-x scroll center -460px;}

/*Zoeken*/
#zoekenContainer{ width:240px; height:20px; position:absolute; top:188px; left:50%; margin-left:239px; }
#zoeken{ width:240px; height:20px; background-color:#000000;border:1px solid #ce3736;}
#zoeken input{ width:135px; height:20px; margin:0; padding:0 0 0 5px; color:#d03837; background-color:#000000; border:0; float:left;}
#zoeken a{height:18px; display:block; float:right; padding:2px 10px 0 10px; color:#fff; text-decoration:none;}
#zoeken a:hover{background-color:#d03837; }
#zoeken a .pijltjesRechts{ display:none; }

/*ContentContainer*/
#contentContainer{ width:980px; margin: 0 auto;}
#contentContainerTop{ background: url("../images/basisLayout/sprite_no_repeat.png") -10px -525px no-repeat; }
#contentContainerBottom{ margin:0 10px; background-color:#31372d; }

/*submenuEnNieuwsbrief gedeelte*/
#submenuEnNieuwsbrief{ width:240px; float:left; }

/*Content*/
#content{ min-height:100px; width:720px; float:right; display:block; margin-top:10px;}
#contentTextblockBoven{ margin:0 10px 0 10px; clear:both; }
#contentTextblockOnder{ margin:0 10px 0 10px; clear:both; }

/*submenu*/
#submenu{ width:230px; margin:10px 10px 0 10px; }
#submenuTop{ }
#submenu ul{ padding:0; margin:0;}
#submenu ul li.first{ background:none;}
#submenu ul li{ width:236px; height:33px;  margin:0 -3px; list-style: none; font-size:14px; font-weight:bold; background: url("../images/basisLayout/sprite_submenu.png") center -70px no-repeat;padding-left:0;}
#submenu ul li a, #submenu ul li a.selected{ height:30px; line-height:30px; padding:0 20px; margin-bottom:3px; display:block; overflow:hidden; text-decoration:none; }
#submenu ul li:hover, #submenu ul li.selected, #submenu ul li a:hover, #submenu ul li a.selected{ background: url("../images/basisLayout/sprite_submenu.png") center 0px no-repeat;  }
#submenu ul li:hover a, #submenu ul li a.selected{ margin-bottom:3px;}
#submenu ul li a{ color:#fff; }
#submenu ul li a:hover, #submenu ul li:hover a, #submenu ul li a.selected{ color:#fff; background-color:#d03837; }

/*Nieuw en promo menu*/
#nieuw_promo_container{ width:230px; margin:0 10px 10px 10px; background-color:#424f39;}
#nieuw_promo_container ul{ padding:0; margin:0; }
#nieuw_promo_container ul li{ height:33px; list-style: none; font-size:14px; font-weight:bold; background: url("../images/basisLayout/sprite_submenu.png") center -70px no-repeat;padding-left:0; }
#nieuw_promo_container ul li:first-child{ background:none;}
#nieuw_promo_container ul li a, #nieuw_promo_container ul li a.selected{ height:20px; padding:4px 20px 6px 20px; margin-bottom:3px; display:block; overflow:hidden; line-height:22px; text-decoration:none; }
#nieuw_promo_container ul li a{ color:#fff; }
#nieuw_promo_container ul li a:hover, #nieuw_promo_container ul li.selected a{ color:#fff; background-color:#e10000; }
#nieuw_promo_container ul li.linkPromo a:hover, #nieuw_promo_container ul li.linkPromo.selected a{ color:#fff; background-color:#262626; }

/*extraveld*/
#extraveld_container{ width:230px; margin:10px; }
#extraveld_container h3 { height:20px; margin:0; padding:10px 20px; color:white; background: #1f221e url("../images/basisLayout/sprite_repeatx.png") center -410px repeat-x; }
#extraveld_container ul{ padding:10px 0; margin:0; background-color:#20231e;}
.ie7 #extraveld_container ul{ width:220px; }
#extraveld_container ul li{ height:30px; margin:0; list-style: none; font-size:14px; font-weight:bold; background:none; padding-left:0;}
#extraveld_container ul li:hover, #extraveld_container ul li.selected{}
#extraveld_container ul li a{ height:20px; padding:5px 20px; display:block; text-decoration:none; color:#d03837;}
#extraveld_container ul li a:hover, #extraveld_container ul li:hover a, #extraveld_container ul li.selected a{ color:#ffffff; background-color:#d03837; }

/*Prijsklasse*/
#prijsklassen_container{ width:230px; margin:10px; }
#prijsklassen_container h3 { height:20px; margin:0; padding:10px 20px; color:white; background: #1f221e url("../images/basisLayout/sprite_repeatx.png") center -410px repeat-x; }
#prijsklassen_container ul{ padding:10px 0; margin:0; background-color:#20231e; }
.ie7 #prijsklassen_container ul{ width:220px; }
#prijsklassen_container ul li{ height:30px; margin:0; list-style: none; font-size:14px; font-weight:bold; background:none; padding-left:0;}
#prijsklassen_container ul li:hover, #prijsklassen_container ul li.selected{}
#prijsklassen_container ul li a{ height:20px; padding:5px 20px; display:block; text-decoration:none; color:#d03837;}
#prijsklassen_container ul li a:hover, #prijsklassen_container ul li:hover a, #prijsklassen_container ul li.selected a{ color:#ffffff; background-color:#d03837; }

/*blokMetTekstAa*/
#blokMetTekstAa{ width:230px; margin:10px; }
#blokMetTekstAaTop{ padding:18px; background-color:#1f221e; border:1px solid #1f221e; }

/*betaalmogelijkheden*/
#betaalmogelijkheden{ width:240px; margin:10px; overflow:auto;} /*Standaard positie bij vertikaal menu*/
#betaalmogelijkheden{ margin:0 0 0 240px; position:absolute; top:104px; left:50%;}	/*betaalmogelijkheden bij winkelmandje*/
#visa, #mastercard, #maestro, #ogone, #paypal, #dexia, #kbc, #ing, #ideal, #bancontact{ float:left;background-image: url("../images/basisLayout/betaalmogelijkheden.gif"); background-repeat:no-repeat; }
/*75 x 50*/
/* #visa, #mastercard, #maestro, #ogone, #paypal, #dexia, #kbc, #ing, #ideal, #bancontact{ width:75px; height:50px; margin:5px 20px; }
#visa { background-position: 0px 0px; }
#mastercard{ background-position: -80px 0px; }
#ogone{ background-position: -160px 0px; }
#paypal{ background-position: -240px 0px; }
#bancontact{ background-position:  -320px 0px; }
#ideal{ background-position: -400px 0px; }
#kbc{ background-position: -480px 0px ; display:none; }
#ing{ background-position: -560px 0px; display:none; }
#dexia{ background-position: -640px 0px; display:none; }
#maestro{ background-position: -720px 0px; display:none;} */
/*51 x 34*/
/* #visa, #mastercard, #maestro, #ogone, #paypal, #dexia, #kbc, #ing, #ideal, #bancontact{ width:51px; height:34px; margin:10px 12px;}
#visa { background-position: 0px -60px; }
#mastercard{ background-position: -60px -60px; }
#ogone{ background-position: -120px -60px; }
#paypal{ background-position: -180px -60px; }
#bancontact{ background-position:  -240px -60px; }
#ideal{ background-position: -300px -60px; }
#kbc{ background-position: -360px -60px ; display:none; }
#ing{ background-position: -420px -60px; display:none; }
#dexia{ background-position: -480px -60px; display:none; }
#maestro{ background-position: -560px -60px; display:none;} */
/*33 x 22*/
/* #visa, #mastercard, #maestro, #ogone, #paypal, #dexia, #kbc, #ing, #ideal, #bancontact{ width:33px; height:22px; margin:10px 12px;}
#visa { background-position: 0px -100px; }
#mastercard{ background-position: -40px -100px; }
#ogone{ background-position: -80px -100px; }
#paypal{ background-position: -120px -100px; }
#bancontact{ background-position:  -160px -100px; }
#ideal{ background-position: -200px -100px; }
#kbc{ background-position: -240px -100px ; display:none; }
#ing{ background-position: -280px -100px; display:none; }
#dexia{ background-position: -320px -100px; display:none; }
#maestro{ background-position: -360px -100px; display:none;} */
/*22 x 15*/
#visa, #mastercard, #maestro, #ogone, #paypal, #dexia, #kbc, #ing, #ideal, #bancontact{ width:22px; height:15px;margin:1px;}
#visa { background-position: 0px -130px; }
#mastercard{ background-position: -30px -130px; }
#ogone{ background-position: -60px -130px; display:none;}
#paypal{ background-position: -90px -130px; }
#bancontact{ background-position:  -120px -130px; display:none;}
#ideal{ background-position: -150px -130px; display:none;}
#kbc{ background-position: -180px -130px ; display:none; }
#ing{ background-position: -210px -130px; display:none; }
#dexia{ background-position: -240px -130px; display:none; }
#maestro{ background-position: -270px -130px; display:none;}

/*Nieuwsbrief*/
#Nieuwsbrief{ width:230px; margin:10px; }
#NieuwsbriefTop{background:#1f221e url("../images/basisLayout/sprite_no_repeat.png") 190px top no-repeat; }
#NieuwsbriefTop:hover{background-color:#d03837; }
#NieuwsbriefBottom a{ height:20px; padding:10px 20px; display:block; font-size:14px; text-decoration:none; background: url("../images/basisLayout/sprite_repeatx.png") center -510px repeat-x; color: #ffffff; }

/*footer*/
#foottekst .textblock, #foottekst .textblock p, #foottekst .textblock a, #foottekst .textblock a:hover, #foottekst .textblock td{ color:#fff; }
.footcredits, .footcredits a, .footcredits a:hover{ color:#ffffff; }
#footer{ text-align:center; }
#foottekst { width:960px; margin:0 auto; }
#foottekstTop{}
#foottekstBottom{ }
.footcredits{ height:40px; line-height:40px; }
/****************************************************/




/*TRANSITIONS*/
/****************************************************/
a{ transition: color 300ms ease-in-out, background 600ms ease-in-out; -moz-transition: color 300ms ease-in-out, background 600ms ease-in-out; -webkit-transition: color 300ms ease-in-out, background 600ms ease-in-out; }
a:hover{ transition: color 100ms ease-in-out, background 200ms ease-in-out; -moz-transition: color 100ms ease-in-out, background 200ms ease-in-out; -webkit-transition: color 100ms ease-in-out, background 200ms ease-in-out; }

#mandje{ transition: color 300ms ease-in-out, background 600ms ease-in-out; -moz-transition: color 300ms ease-in-out, background 600ms ease-in-out; -webkit-transition: color 100ms ease-in-out, background 100ms ease-in-out; }
#mandje:hover{ transition: color 100ms ease-in-out, background 200ms ease-in-out; -moz-transition: color 100ms ease-in-out, background 200ms ease-in-out; -webkit-transition: color 100ms ease-in-out, background 100ms ease-in-out; }

/*categorie en productpagina*/
.categorieItemTitel a,.productItemTitel a,.categorieItemTitel h3,.productItemTitel h3{ transition: color 100ms ease-in-out, background 200ms ease-in-out; -moz-transition: color 100ms ease-in-out, background 200ms ease-in-out; -webkit-transition: color 100ms ease-in-out, background 200ms ease-in-out; }
.categorieItemTitel a:hover,.productItemTitel a:hover, .categorieItemTitel h3:hover,.productItemTitel h3:hover{ transition: color 100ms ease-in-out, background 200ms ease-in-out; -moz-transition: color 100ms ease-in-out, background 200ms ease-in-out; -webkit-transition: color 100ms ease-in-out, background 200ms ease-in-out; }
/*CategorieOmschrijving*/
/*opacity xxxms= snelheid en linear xxms = vertraging voor de opacity start*/
.categorieItem:hover .categorieItemOmschrijving, .productItem:hover .productItemOmschrijving{  transition: opacity 200ms linear 100ms; -moz-transition: opacity 200ms linear 100ms; -webkit-transition: opacity 200ms linear 100ms ;}
/*opacity xxxms= snelheid en linear xxms = vertraging voor de opacity start*/
.categorieItem:hover .categorieItemOmschrijving:hover, .productItem:hover .productItemOmschrijving:hover{ transition: opacity 200ms linear 100ms; -moz-transition: opacity 200ms linear 100ms; -webkit-transition: opacity 200ms linear 100ms; }

/*submenu Transitions*/
#submenu ul li a { transition: color 200ms ease-in-out, background 400ms ease-in-out; -moz-transition: color 200ms ease-in-out, background 400ms ease-in-out; -webkit-transition: color 200ms ease-in-out, background 400ms ease-in-out; }
#submenu ul li a:hover { transition: color 50ms ease-in-out, background 100ms ease-in-out; -moz-transition: color 50ms ease-in-out, background 100ms ease-in-out; -webkit-transition: color 50ms ease-in-out, background 100ms ease-in-out; }

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