/*guisy2 gebaseerd op stephane tartelin z'n pagina*/

* {
  margin: 0;
}

body, ol, ul {
  padding: 0;
}

ul {
  list-style: none;
}

img {
  border: 0;
  vertical-align: bottom;
}

a[href$=".pdf"] {
  line-height: 1.88em;
  padding-right: 29px;
  background: url(../images/pdf-icon.gif) no-repeat right center;
}
*+html a[href$=".pdf"] {display: inline-block;}

a[title]:focus:after { 
  content: " " attr(title);
}
a[title]:focus:hover:after {
  content: "";
}

.clear {
  clear: both;
}


/****************************/
html, body {
  height: 100%;
}

body {
  font-size: 100%; /*IE*/
  background: #fbf075 url(img/stucco.gif);
}

#header {
  float: left;
  width: 195px;
  height: 100%;
  position: relative; /*voor #access*/
}
/*anything position: relative acts like position: fixed in IE*/
* html #header {margin-right: -3px; position: static;} /*3 pixel jog; pos: rel een probleem in IE*/

.access {
  position: absolute;
  left: -999em; /*konq wraps to the right with -9999em*/
  top: 0;
}
	#header a.access {
	  width: 9em;
	  font: 1.2em georgia, serif;
	  text-decoration: none;
	  text-align: center;
 	  color: #000;
	  background-color: #fff;
	  border: 1px solid #ff7f01;
	}
		#header a.access:focus, #header a.access:active {
		  left: 260px;
		  top: 5px;
		  outline: 0;
		}

#header p {
  width: 180px;
  height: 60px;
  padding-top: 107px;
  font: 2em "cooper black", "comic sans ms", helvetica, sans-serif;
  text-align: center;
  position: relative;
}
* html #header p {padding-top: 120px;}/*andere afbeelding IE6*/

	#header p a {
	  position: absolute;
	  left: 2px;
	  top: -15px;
	  width: 239px;
	  height: 190px;
	  z-index: 10;
	  background: url(img/guisyeu.png) 0 0 no-repeat;
	}
* html #header p a {left: 0; top: 0; background-image: url(img/guisyeu.gif);}

#header ul {
  width: 170px;
  margin: 0 auto;
  padding: 0 0 20px 0;
  background: url(img/stucco.gif) -30px 0 no-repeat; 
  overflow: hidden;
}
	#header ul li {
	  float: left;
	  width: 160px;
	  padding-left: 10px;
	}
		#header ul li.huidig {
		  background: url(img/arrow.gif) 5px 50% no-repeat;
		}
	#header ul a {
	  position: relative;
	  float: left;
	  width: 150px;
	  height: 33px;
	  margin-top: 2px;
	  margin-left: 9px;
	  color: #000;
	  font: bold .9em "bitstream vera sans", verdana, sans-serif;
	  text-align: center;
	  text-decoration: none;
	}
		#header ul a:focus, #header ul a:hover, #header ul a:active, #header ul li.huidig a {
		  color: #ff7f01;
		  text-decoration: underline;
		} 
	#header ul a span {
	  position: absolute;
	  left: 0;
	  top: 0;
	  width: 100%;
	  height: 100%;
	  background: url(img/menu.gif) no-repeat;
	}
		#header ul a.k span {
		  background-position: 25px 0px;
		}
			#header ul a.k:focus span, #header ul a.k:hover span {
			  background-position: -165px -3px;
			}
		#header ul a.s span {
		  background-position: 40px -48px;
		}
			#header ul a.s:focus span, #header ul a.s:hover span {
			  background-position: -165px -48px;
			}
	#header ul a.kp {
	  height: 45px;
	}
		#header ul a.kp span {
		  background-position: -2px -88px;
		}
			#header ul a.kp:focus span, #header ul a.kp:hover span {
			  background-position: -160px -85px;
			}
	#header ul a.sp {
	  height: 38px;
	}
		#header ul a.sp span {
		  background-position: 20px -145px;
		}
			#header ul a.sp:focus span, #header ul a.sp:hover span {
			  background: url(img/menuguisrolls.gif) 10px 0;
			}
	#header ul a.ka {
	  height: 43px;
	}
		#header ul a.ka span {
	 	  background-position: 20px -191px;
		}
			#header ul a.ka:focus span, #header ul a.ka:hover span {
			  background-position: -170px -188px;
			}
	#header ul a.w {
	  height: 38px;
	}
		#header ul a.w span {
		  background-position: 20px -232px;
		}
			#header ul a.w:focus span, #header ul a.w:hover span {
			  background-position: -170px -236px;
			}



#sliderwrap {
  width: auto;
  height: 100%;
  font-family: helvetica, arial, sans-serif;
  overflow: auto;
}

#sliderwrap a {
  color: #ff7301;
}
	#sliderwrap a:visited {
	  color: #747373;
	}
	#sliderwrap p.button a:visited {
          color: #000;
	}
	#sliderwrap a:focus, #sliderwrap a:hover {
	  color: #c91801;
	  text-decoration: none;
	}

	#sliderwrap .boxhouder p.button {
	  padding-left: 5px;
	  text-align: center;
	  background: url(img/button.gif) 0 0 no-repeat;
	}
	#sliderwrap .boxhouder p.button a {
	  display: block;
          min-height: 30px;
	  padding-right: 5px;
       	  font: bold .9em/30px "comic sans ms", helvetica, arial, sans-serif;
	  color: #000;
  	  text-decoration: none;
	  background: url(img/button.gif) 100% 0 no-repeat;
	}
		#sliderwrap .boxhouder p.button:hover {
	          background-position: 0 -30px;
		}
		#sliderwrap .boxhouder p.button a:focus,  
		#sliderwrap .boxhouder p.button a:hover {
	          color: #000;
	  	  background-color: #ffe179;
	          background-position: 100% -30px;
		}

	#strips p.button {
	  display: -moz-inline-box;
	  display: inline-block;
	  margin-left: .5em;
	}
	* html #strips p.button {display: inline;}
	*+html #strips p.button {display: inline;}

p.tag {
  margin: 0 1em 0 2em;
  padding: 2px;
  color: #000;
  font: bold 1.5em "marker felt", "comic sans ms", helvetica, arial, sans-serif;
  white-space: normal;
  background-color: #fff;
  border: 1px solid #000;
}
	p.tag a {
	  font-size: .8em;
	}

#index .boxhouder div p {
  margin: 10px 20px;
  font: 1.2em "comic sans ms", helvetica, arial, sans-serif;
}
        #index .boxhouder div.marketing h2 {
          font: bold 1.1em georgia, "palatino linotype", "urw palladio l", serif;
        } 
        #index .boxhouder div.marketing p {
          margin: 2px 20px;
          font: .9em verdana, "bitstream vera sans", "dejavu sans", helvetica, arial, sans-serif;
        }
        #index .boxhouder .marketing p.nota {
          font-style: italic;
          font-size: .8em;
        }
                .boxhouder .marketing p kbd {
                  font-weight: bold;
                }

h1 {
  text-align: center;
  color: #c91801;
  font: bold 2em/2em "cooper black bt", "marker felt", "arial rounded mt bold", "arial black", futura, helvetica, arial, sans-serif;
  text-shadow: -2px -2px 0.1em #000; /*left, top, fuzzy, kleur*/ /*Opera, Saffy, Konq*/
}

        h1 a {
          float: left;
          width: 62px;
          height: 63px;
          margin-left: 1.5em;
          text-indent: -999px; /*kan geen Gilder-Levin hier doen... IE problemen met pos: rel en pos: abso*/
          background: url(img/dubbeltwitz-k.png) 0 0 no-repeat;
          overflow: hidden;
        }
        * html h1 a {text-indent: -250px; margin-left: 50px; background-image: url(img/dubbeltwitz-k.gif);}

                h1 a:focus, h1 a:hover, h1 a:active {
                  background-position: 0 -63px;
                }
        
	

.boxhouder {
  float: left;
  margin: 0 -999em 20px 0;
  white-space: nowrap;
}
        #winkel3 .boxhouder {
          padding-top: 1em;
        }
	.boxhouder div {
	  float: left;
	  width: auto;
	  margin: 5px 10px;
	  padding: 1em .5em 2em;
	  background-color: #fff;
	  border: 1px solid #000;
	}
		#index .boxhouder div {
		  width: 400px;
		  min-height: 430px;
		  padding: 5px;
		  white-space: normal;
		}
		* html #index .boxhouder div {height: 430px;}
                
                #index .boxhouder div.breed {
                  width: 725px;
                  text-align: center;
                }

		/*winkelwagen tabel*/
		#winkel2 .boxhouder div {
		  width: 42em; 
        	  padding: 0 2em;
        	}


#breadcrumb {
  margin-left: 2em;
}
	#breadcrumb li, #contact #breadcrumb li {
	  float: none;
	  display: inline;
	  margin: 0;
	  padding-left: 5px;
	  font-style: italic;
	  font-size: .9em;
	}

.rubriek div img, #index .boxhouder div img {
  display: block;
  margin: 10px auto;
}
.boxhouder div img.rechts {
  float: right;
}


h2 {
  text-indent: 1em;
  font: bold 1.4em "cooper black bt", "marker felt", "comic sans ms", futura, helvetica, arial, sans-serif;
}
        .breed h2.fancy {
          color: #c00;
          font: italic bold 1.6em georgia, "palatino linotype", "urw palladio l", serif;
          text-align: left;
        }

h3 {
  font-size: 1em;
  text-align: center;
}

/*kleurplaatje*/
#kleurplaat a img { 
  background: 0 0 no-repeat;
} 
#kleurplaat a.pasen1 img {
  background-image: url(img/guisyvindteitjes-k.png);
}
	#kleurplaat a.pasen1:focus img, #kleurplaat a.pasen1:hover img {
	    background-position: 0 -200px;
	}
#kleurplaat a.pasen2 img {
  background-image: url(img/hungryguisy-k.png);
}
	#kleurplaat a.pasen2:focus img, #kleurplaat a.pasen2:hover img {
	    background-position: 0 -123px;
	}
#kleurplaat a.kerst img {
  background-image: url(img/kerst-k.png);
}
	#kleurplaat a.kerst:focus img, #kleurplaat a.kerst:hover img {
	    background-position: 0 -207px;
	}
#kleurplaat a.gkp1 img {
  background-image: url(img/guisymu-k.png);
}
	#kleurplaat a.gkp1:focus img, #kleurplaat a.gkp1:hover img {
	    background-position: 0 -120px;
	}
#kleurplaat a.gkp2 img {
    background-image: url(img/guisykijktenstuitert-k.png);
}
	#kleurplaat a.gkp2:focus img, #kleurplaat a.gkp2:hover img {
	    background-position: -200px 0;
	}
#kleurplaat a.gkp3 img {
    background-image: url(img/guisyvraagt-k.png);
}
	#kleurplaat a.gkp3:focus img, #kleurplaat a.gkp3:hover img {
	    background-position: -200px 0;
	}
#kleurplaat a.gkp4 img {
    background-image: url(img/tweeguisies-k.png);
}
	#kleurplaat a.gkp4:focus img, #kleurplaat a.gkp4:hover img {
	    background-position: -200px 0;
	}
#kleurplaat a.gkp5 img {
    background-image: url(img/guisystrand-k.png);
}
	#kleurplaat a.gkp5:focus img, #kleurplaat a.gkp5:hover img {
	    background-position: 0 -150px;
	}
#kleurplaat a.gkp6 img {
    background-image: url(img/guisyspudz-k.png);
}
	#kleurplaat a.gkp6:focus img, #kleurplaat a.gkp6:hover img {
	    background-position: 0 -120px;
	}
#kleurplaat a.skp1 img {
    background-image: url(img/sheepkleurplaat-k.png);
}
	#kleurplaat a.skp1:focus img, #kleurplaat a.skp1:hover img {
	    background-position: -200px 0;
	}
#kleurplaat a.skp2 img {
    background-image: url(img/sheepsit-k.png);
}
	#kleurplaat a.skp2:focus img, #kleurplaat a.skp2:hover img {
	    background-position: -200px 0;
	}
#kleurplaat a.skp3 img {
    background-image: url(img/wafkleurplaat-k.png);
}
	#kleurplaat a.skp3:focus img, #kleurplaat a.skp3:hover img {
	    background-position: -200px 0;
	}

#kleurplaat a.akp1 img {
    background-image: url(img/apen1-k.png);
}
	#kleurplaat a.akp1:focus img, #kleurplaat a.akp1:hover img {
	    background-position: -190px 0;
	}
#kleurplaat a.akp2 img {
    background-image: url(img/apen2-k.png);
}
	#kleurplaat a.akp2:focus img, #kleurplaat a.akp2:hover img {
	    background-position: 0 -144px;
	}
#kleurplaat a.akp3 img {
    background-image: url(img/apenschuldig-k.png);
}
	#kleurplaat a.akp3:focus img, #kleurplaat a.akp3:hover img {
	    background-position: 0 -133px;
	}
#kleurplaat a.mkp1 img {
    background-image: url(img/monnikkat-k.png);
}
	#kleurplaat a.mkp1:focus img, #kleurplaat a.mkp1:hover img {
	    background-position: -200px 0;
	}
#kleurplaat a.mkp2 img {
    background-image: url(img/monnikbloem-k.png);
}
	#kleurplaat a.mkp2:focus img, #kleurplaat a.mkp2:hover img {
	    background-position: -200px 0;
	}
#kleurplaat a.bvp1 img {
    background-image: url(img/buurvrouw-k.png);
}
	#kleurplaat a.bvp1:focus img, #kleurplaat a.bvp1:hover img {
	    background-position: -200px 0;
	}
#kleurplaat a.bvp2 img {
    background-image: url(img/buurvrouwrat-k.png);
}
	#kleurplaat a.bvp2:focus img, #kleurplaat a.bvp2:hover img {
	    background-position: -180px 0;
	}
#kleurplaat a.ratp1 img {
    background-image: url(img/ratplaat-k.png);
}
	#kleurplaat a.ratp1:focus img, #kleurplaat a.ratp1:hover img {
	    background-position: 0 -249px;
	}
#kleurplaat a.ratp2 img {
    background-image: url(img/ratsleep-k.png);
}
	#kleurplaat a.ratp2:focus img, #kleurplaat a.ratp2:hover img {
	    background-position: 0 -179px;
	}

/*producten, winkel1*/
.rubriek {
  min-height: 500px;
}
* html .rubriek {height: 500px;}

.rubriek div {
  width: 170px;
  margin: 5px;
  padding: 5px;
  white-space: normal;
  border: 1px solid #c91801;
}

.rubriek a img {
  padding: 1px;
}
	.rubriek a:focus img, .rubriek a:hover img {
	  padding: 0;
	  border: 1px solid #ff7301;
	}

.rubriek label span {
  float: left;
  width: 5em;
  padding-right: 1em;
  line-height: 150%;
  text-align: right;
}
.rubriek p.descript {
  clear: left;
  min-height: 16em;
  font: .8em verdana, "bitstream vera sans", sans-serif;
}
* html .rubriek p.descript {height: 16em;}

	.rubriek p.prijs {
	  text-align: right;
	  font: bold 1.1em serif;
	}
	.rubriek p.thumbs {
	  min-height: 105px;
	  margin-top: 1em;
	  overflow: hidden;/*wrap floats*/
	}
	* html .rubriek p.thumbs {height: 105px;}

		.rubriek div p.thumbs a img {
		  float: left;
		  margin: 0 4px 2px 0;
		}
	.rubriek p.button {
	  margin: 1em auto 0;
	  font-size: 1.2em;
	}
	.rubriek p.toegevoegd {
	  width: 6em;
	  margin: 1em auto 0;
	  padding-left: 25px;
	  text-align: center;
	  font-size: 1.2em;
	  line-height: 1.8em;
	  background: #fff url(img/checkbox.gif) 0 50% no-repeat;
	}
.rubriek p.winkellink {
  clear: left;
  color: #c91801;
  font-weight: bold;
  text-align: right;
}
	.rubriek p.winkellink a {
	  font: normal 1em "comic sans ms", helvetica, arial, sans-serif;
	}

/*lightbox stuff*/
#lightbox {
  padding: 10px;
  background-color:#eee;
  border-bottom: 2px solid #666;
  border-right: 2px solid #666;
}
#lightboxDetails {
  padding-top: 0.4em;
  font-size: 0.8em;
}	
#lightboxCaption { 
  float: left; 
}
#keyboardMsg { 
  float: right; 
}
#closeButton { 
  top: 5px; 
  right: 5px; 
}

#lightbox img {
  clear: both;
}  

#overlay { 
  background-image: url(img/overlay.png); 
}

* html #overlay{
  background: #333 url(img/blank.gif);
  filter:alpha(opacity=80);
}
/*eind*/

/*contact pagina*/
#contact .boxhouder div {
  padding-left: 2em;
  white-space: normal;
}
#contact h2 {
  margin-left: 0;
}
#contact h3, #bestel h3, #winkel4 h3 {
  margin-top: 1em;
  text-align: left;
  font: bold 1.1em "comic sans ms", helvetica, arial, sans-serif; 
}
  
#contact .boxhouder ul {
  font-family: helvetica, arial, sans-serif;
}
	#contact .boxhouder li {
	  float: left;
	  min-height: 9em;
	  margin: 0 0 .5em .8em;
          padding: 5px;
	}
	#contact .boxhouder li p.center {
	  text-align: center;
	}

#contact dl {
  width: 22em;
  overflow: hidden;
}
	#contact dt {
	  clear: left;
	  float: left;
	  width: 6em;
	  margin-bottom: .2em;
	  padding-right: 1em;
	  text-align: right;
	  font-weight: bold;
	}
	#contact dd {
	  margin: 0 0 .2em 7em;
	}
		#contact dd.onder {
	  	  margin-top: 1.3em;
		}

/*winkel4/gegevens controleren*/
#winkel4 .boxhouder div  {
  width: 43em;
  padding-left: 2em;
  white-space: normal;
}
* html #winkel4 .boxhouder div {width: 36em;}

#winkel4 .boxhouder div p {
  margin-bottom: 1em;
}
        #winkel4 p.center {
          text-align: center;
        }
        #winkel4 p span {
          font-weight: bold;
        }

/*voorwaarden*/
#voorwaarden .boxhouder div, #bestel .boxhouder div {
  width: 46em;
  white-space: normal;
}
* html #voorwaarden .boxhouder div, * html #bestel .boxhouder div {width: 36em;}

#voorwaarden h2 {
  margin-top: 1.5em;
}
#voorwaarden h3 {
  text-align: left;
}

#voorwaarden ol {
  width: 96%; /*IE*/
  list-style-type: decimal;
  margin-left: 0;
  padding-left: 2em;
}
	ol li {
          margin-bottom: 1em;
	}

#voorwaarden ol.alpha {
  list-style-type: lower-alpha;
}

#voorwaarden ol li.nobullet {
  list-style: none;
}
#voorwaarden .boxhouder div p {
  margin: 0 1em;
}

#voorwaarden img.links {
  float: left;
  margin: 10px 5px 5px 0;
}

/*winkel3, winkeladres en fouten*/
#winkel3 .boxhouder p, #foutlijst {
  margin-left: 2em;
  margin-bottom: .5em;
  padding: .2em;
  background-color: #fff;
  border: 1px solid #ff7301;
}
        #winkel3 .boxhouder p span {
          font-weight: bold;
          color: #f00;
        }
#foutlijst {
  width: 30em;
  padding: .2em .2em 1em 2em;
  white-space: normal;
}
	#foutlijst li {
	  display: list-item;
	  list-style-type: circle;
	}
        #foutlijst a {
          font-weight: bold;
        }

#winkel3 form a.waarschuwing {
  clear: left;
  display: block;
  margin-top: 1.8em;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background-color: #f00;
}
* html #winkel3 form a.waarschuwing strong {color: #fff;}
  
/*forms*/
#winkel3 form {
  width: 30em;
  margin-top: 1em;
  padding-top: 1em;
  background-color: #fff;
  border: 1px solid #000;
}

fieldset {
  border: 0;
  white-space: normal;
}

legend span {
  display: block;
  margin-top: -1.8em; /*werkt niet in Saffy-Chrome, Konqueror of FF2/K-meleon*/
  margin-left: 2em; 
  padding: 0 .5em;
  color: #000;/*IE*/
  font-weight: bold;
  background-color: #ffe179;
  border: 1px solid #ff7301;
}
/*legend toont helemaal niet als display: block in IE*/
* html #formAdres legend span {display: inline-block; height: 1em; margin-top: 0;}
*+html #formAdres legend span {display: inline-block;}

/*de verwijder knop*/
td label {
  font-size: .9em;
  white-space: nowrap;
}

#formAdres label {
  clear: left;
  display: block;
  margin: .2em .5em .2em 2em;
  padding: .2em;
  font: bold 1.1em "cooper black bt", "comic sans ms", helvetica, arial, sans-serif;
  background-color: #ffe179;
  border: 1px solid #ff7301;
}
        #formAdres label span {
          float: left;
          width: 10.8em;
        }
	label input {
	  vertical-align: middle;
	}

	#formAdres input.rij {
          display: block;
          width: 13em;
          margin: 5px auto 3em;
	}
                #formAdres input.betaal {
                  width: 8em;
                }


/*winkelwagen, winkel2, winkel4*/
table {
  clear: left;
  margin: 0 auto;
  white-space: normal;
  border-collapse: collapse;
  border-bottom: 1px solid #eceaea;
}
        #winkel4 table {
          margin: 1em auto 0;
        }

caption {
  margin-bottom: 1em;
}

th, td {
  padding: 0 4px;
  border: 1px solid #eceaea;
}
        #winkel4 th {
          min-width: 8em;
        }
	th.verberg {
	  text-indent: -9999em;
	}
	table th.artikel {
	  width: 10em;
	  text-align: left;
	}
	th span.nw {
	  display: block;
	  white-space: nowrap;
	}

td {
  text-align: center;
}
	td.beschrijf {
	  vertical-align: top;
	  text-align: left;
	}
	td.aantal input {
	  width: 2em;
	  text-align: center;
	}
	td.geld {
	  text-align: right;
	}

/*order totals, prijzen*/
dl.totals {
  float: right;
  width: 13em;
  margin: 1em 1em 0 0;
  overflow: hidden;
}
        #winkel4 dl.totals {
          margin-right: 3em;
        }
	.totals dt {
	  float: left;
	  clear: left;
	  font-weight: bold;
	}
	.totals dd {
	  text-align: right;
	}
p.totals {
  clear: right;
  float: right;
  margin: 0 1em 1em 0;
  font-style: italic;
  text-align: right;
}
        #winkel4 p.totals {
          margin-right: 3em;
        }

#winkel2 #herbereken {
  float: left;
  width: 25em;
  margin: 1em 0 .5em .5em;
  padding: 0;
  border: 0;
}

	#herberken label {
	  vertical-align: middle;
	  font-size: .9em;
	}
	#herbereken input {
       	  font: bold .9em/30px "comic sans ms", helvetica, arial, sans-serif;
	}

#winkel2 #inputs, #winkel4 #inputs {
  clear: both;
  float: none;
  width: 98%;
  margin: 0 .2em 2em .2em;
  padding: 0;
  border: 0;
  overflow: hidden;
}
        #winkel4 #inputs {
          width: 90%;
          margin: 0 auto 2em;
        }
	#inputs p.terug {
	  float: left;
	}
	#inputs .submit {
	  float: right;
	  min-height: 30px;
       	  font: bold .9em/30px "comic sans ms", helvetica, arial, sans-serif;
	}

noscript {
  position: absolute;
  left: -99em;
  bottom: 0;
}




/*--------------------------------------------------------------------------------------------------------------------*/
/* Toegevoegd door Alex! */
.boxhouder2 {
  float: left;
  margin: 0 -999em 20px 0;
  white-space: nowrap;
}
    
	.ideal {
	  float: left;
	  margin: 25px 10px;
	  width: 800px;
	  min-height: 430px;
	  padding: 5px;
	  white-space: normal;
	  background-color: #fff;
	  border: 1px solid #000;
	}
	
h3.bestelling {
	text-align: left;
	padding-top: 20px;
}

div.idealdiv {
	border: 1px solid #000000;
}

table.idealtabel {
	margin: 0px;
}

p.check {
  padding-top: 7px;
  padding-bottom: 7px;
}

br.check {
  line-height: 3px;
}