/* 	Stylesheet 	Groovie Kids
				http://www.grooviekids.nl
	Datum: 		02/12/2007
	Auteur: 	Michiel Heijmans
				Carlos Gallupa BV
				http://carlosgallupa.com
	------------------------------------
	Versie:		1.0
	
	Blauw		252ED5
	Rood		FD0100
	Geel		F8BD01
	Groen		72D500
	
*/

*		{margin:0;padding:0;}
html	{overflow: -moz-scrollbars-vertical;}
body	{font:62.6% "comic sans ms", arial, sans-serif; color:#000;background-color:#FFF;overflow-x:hidden;}
h1 span	{display:none;}
h2		{font:2.6em "century gothic", "trebuchet ms", arial, sans-serif;letter-spacing:-1px;color:#252ED5;padding: 0 0 0 40px;margin:5px 0 20px;background:url(../layout/blocks.png) no-repeat top left;}
h3		{font:1.8em "century gothic", "trebuchet ms", arial, sans-serif;color:#72D500;padding:20px 0;}
h4		{font:bold 1.1em "comic sans ms", arial, sans-serif;color:#000;margin-bottom:10px;}
a		{color:#FD0100;text-decoration:underline;}
a:hover	{text-decoration:none;}
img		{border:0;}
fieldset{border:0;}
input,select,textarea {font:1em arial, sans-serif; color:#333;}
td		{vertical-align:top;}

/* Voor foutieve invoer - overrulen van span en fonts */
.text span {font:1em "comic sans ms", arial, sans-serif !important;color:#000;}
.text span font {font:1em "comic sans ms", arial, sans-serif !important;color:#000;}

#container {font-size:1.2em;}
#header	{height:108px;background:url(../layout/fullheader.jpg) no-repeat right;}
#header img {float:right;}
#path {background-color:#F8BD01;border:1px solid #FFF;border-width:1px 0;color:#FFF;padding:4px 10px 0; height:25px}
#path a {color:#FFF; text-decoration:none;}
#path a:hover {text-decoration:underline;}
#path .fb-like {float:right; padding:}
#content {position:relative;background:url(../layout/bg-content.jpg) repeat-x top;}
.crumble {color:#333; position:absolute; top:3px; left:190px;}
.crumble a {color:#333;}
#menu {width:166px;float:left;margin-top:20px;font:1.2em "century gothic", "trebuchet ms", arial, sans-serif;color:#252ED5;padding:0 20px 20px 1px;background:url(../layout/bg-sidebar.png) no-repeat 70% 0;text-transform:lowercase;}
#inmenu {padding:0 0 20px 0;}
#menu ul {margin:5px 0 0 5px;}
ul.mainmenu {list-style:none;width:166px;padding:0 0 30px 0;}
ul.mainmenu li a {color:#252ED5;text-decoration:none;display:block;width:120px;}
ul.mainmenu li a:hover {text-decoration:underline;}
ul#brands {list-style:none;width:166px;padding-bottom:30px;} 
ul#brands a {color:#000;text-decoration:none;}
ul#brands li a:hover {text-decoration:underline;}
ul.mainmenu li, ul#brands li {padding-bottom:5px;margin-left:25px;}
li.blue {margin-left:20px;padding:0 20px 5px 0px;list-style-image:url(../layout/li-blauw.gif);}
li.red {margin-left:20px;padding-left:0px;list-style-image:url(../layout/li-rood.gif);}
li.green {margin-left:20px;padding-left:0px;list-style-image:url(../layout/li-groen.gif);}
li.yellow {margin-left:20px;padding-left:0px;list-style-image:url(../layout/li-geel.gif);}
#menu h3, #searchblock h3 {background:url(../layout/bg-kopje-blauw-klein.png) no-repeat top center;font-size:1em;color:#FFF;padding:4px 0 12px 45px;}
#menu h3.blue {background:url(../layout/bg-kopje-blauw-klein.png) no-repeat top center;}
#menu h3.red {background:url(../layout/bg-kopje-rood-klein.png) no-repeat top center;}
#menu h3.green {background:url(../layout/bg-kopje-groen-klein.png) no-repeat top center;}
#menu h3.yellow {background:url(../layout/bg-kopje-geel-klein.png) no-repeat top center;}

.social {width:150px;padding:0; margin:0 0 0 10px; font-size:12px; text-transform:none;}

#main {padding:20px 224px 20px 188px;line-height:1.5em;}
.text {}
.text p {padding-bottom:25px;}
.text a {color:#FD0100;}
.text ul {margin:0 0 25px 20px;}
.text ul li {padding-left:10px;list-style-image:url(../layout/li.gif);}
.text ol {margin:0 0 25px 30px;}

/* PRODUCTS */
#pricetag {float:right;padding:20px;margin:0 0 20px 20px;background:url(../layout/bg-sidebar.png) no-repeat center top;width:120px;}
#pricetag .small {font-size:0.9em;}
#pricetag .van {text-decoration:line-through;}
#pricetag .large {font-size:2em;margin-top:10px;color:#252ED5; line-height:normal; }
#pricetag input, #pricetag select {width:120px;}
#pricetag select option {padding-right:20px;}
#pricetag .bestel input {margin:10px 0 0;padding:2px;font-weight:bold;}
#pricetag #msg {width:90px;margin:10px 0 0;color:#FD0100;}

#place-order {margin-top:20px;}
input.buttons {margin-left:10px;}

#productrange {width:99%;}
* html #productrange {width:90%;}

#productrange div {background-color:#FFF;display:block;float:left;width:120px;height:200px;padding:5px;border:1px solid #F8BD01;margin:0 10px 10px 0;text-align:center;}
#productrange div .small {font-size:0.8em;}

/* nog alleen bij merk */
#productrange div.product {background-color:#FFF;display:block;float:left;width:120px;height:240px;padding:5px;border:1px solid #F8BD01;margin:0 10px 10px 0;text-align:center;}
#productrange div.text {background-color:transparent;height:55px;padding:5px;border:0;margin:10px 0 0;text-align:left;overflow:hidden;}
#productrange div.small {float:right;background-color:#F8BD01;width:auto;overflow:visible; white-space:nowrap; height:auto;padding:5px;border:0;margin:10px 3px 10px 30px;text-align:center;color:#666;}

#productrange div a {color:#000;text-decoration:none;}
img.prodimg {margin:0 0 10px 10px;padding:5px;background-color:#F8BD01;border:1px solid #FFF;}
a img.prodimg {text-decoration:none;}

#productcolors {width:99%;margin-top:20px;}
* html #productcolors {width:85%;}
#productcolors div {background-color:#FFF;display:block;float:left;width:120px;height:120px;padding:5px;border:1px solid #F8BD01;margin:0 10px 10px 0;text-align:center;}
#productcolors div:hover {border:1px solid #FD0100;}
#productcolors div .small {font-size:0.8em;}
#productcolors div a {color:#000;text-decoration:none;}

#right {width:216px;float:right;margin-top:20px;}
#cart {background:url(../layout/winkelwagen.png) no-repeat left top;}
table.shoppingcard {padding:0 0 20px;width:216px;text-align:center;}
*+html table.shoppingcard {padding:20px 0;}
* html table.shoppingcard {padding:20px 0;}
table.shoppingcard td, table.shoppingcard th {font:1.4em "century gothic", "trebuchet ms", arial, sans-serif;}
table.shoppingcard th {color:#FD0100;padding:10px 0;}
table.shoppingcard td.linktocard {padding:10px 0 10px 10px;width:200px;font-size:0.9em;}
table.shoppingcard td.linktocard a {color:#FFF;text-decoration:none;display:block;padding:0;}

#searchblock {
	width:204px;
	float:right;
	margin:0 0 40px 12px;
	color: #252ED5; 
	font:1.2em "century gothic", "trebuchet ms", arial, sans-serif;
	background-color:#FFF;}
#searchblock .search {padding: 0 19px;}	
#searchblock h3.blue{background:url(../layout/bg-kopje-blauw.png) no-repeat top left;color:#FFF;padding:2px 0 8px 55px;}
#searchblock h3.green {background:url(../layout/bg-kopje-groen.png) no-repeat top left;color:#FFF;padding:2px 0 8px 55px;}
#searchblock h3.red {background:url(../layout/bg-kopje-rood.png) no-repeat top left;color:#FFF;padding:2px 0 8px 55px;}
#rest {width:204px;float:right;margin:0 0 0 12px;}
#inrest {margin-right:3px;}
#rest h3.tips {background:url(../layout/bg-kopje-rood.png) no-repeat top left;font-size:1.2em;color:#FFF;padding:2px 0 8px 55px;}
#rest h3.top5 {background:url(../layout/bg-kopje-blauw.png) no-repeat top left;font-size:1.2em;color:#FFF;padding:2px 0 8px 55px;}

#rest ul#offer1, #rest ul#offer2, #rest ul#offer3 {padding:0 19px;list-style:none;}
#rest ul#offer1 li a, #rest ul#offer2 li a, #rest ul#offer3 li a {text-decoration:none;}
#rest ul#offer1 li a:hover, #rest ul#offer2 li a:hover, #rest ul#offer3 li a:hover {text-decoration:underline;}
#rest ul#offer1 li strong, #rest ul#offer2 li strong, #rest ul#offer3 li strong {font:normal 1.1em "century gothic", "trebuchet ms", arial, sans-serif;color:#252ED5;display:block;padding-bottom:8px;text-align:center;}
#rest ul#offer1 li img, #rest ul#offer2 li img, #rest ul#offer3 li img {width:120px;}
#rest ol {padding:0 15px 19px 40px;list-style-position:outside;}

/* winkelmandje */
.winkelmand {width:99%;}
* html .winkelmand {width:85%;}
.winkelmand td {padding:10px 10px 0 0;}
.winkelmand thead td {font-weight:bold;padding:0 10px 10px 0;}
.winkelmand td.product, .winkelmand td.color, .winkelmand td.size, .winkelmand td.quantity, .winkelmand td.pprice, .winkelmand td.tprice {padding:10px 10px 0 0;border-top:1px solid #CCC;}
.winkelmand thead td.product, .winkelmand thead td.color, .winkelmand thead td.size, .winkelmand thead td.quantity, .winkelmand thead td.pprice, .winkelmand thead td.tprice {border-top:0;padding:0 10px 10px 0;}
.winkelmand td.packgift {padding:0;margin:0;}
.winkelmand img {border:1px solid #F8BD01;margin-bottom:10px;}
.winkelmand td.packgift img {padding:0;margin:0;border:0;}
.winkelmand .subtotal {padding-top:20px;border-top:1px solid #CCC;}
.winkelmand .shipping {padding-bottom:20px;}
.winkelmand .total {padding-top:20px;border-top:3px double #CCC;}
.cartdetails label {display:block;float:left;width:160px;}
.cartdetails label.right {display:inline;float:none;width:auto;padding-left:10px;}
.cartdetails input {width:240px;padding:2px;}
.cartdetails select {width:248px;padding:2px;}
.cartdetails textarea {width:240px;height:100px;padding:2px;font-family:inherit;}
.cartdetails input.crb {width:auto;}
.cartdetails .btns {padding-top:20px;padding-left:160px;}
.cartdetails .btns input {width:auto;}

form div {margin:0 0 2px;}

.warning ul {margin:0 0 10px 20px;}
.warning li {list-style:square outside;color:#FD0100;}

.search input.text {width:140px;padding:0 3px;color:#999;}
.search input.button {width:auto;font-size:12px;padding:2px;}

#footer {clear:both;background:url(../layout/bg-footer-all.gif) repeat-x left;padding:0;margin:0;height:45px;color:#FFF;z-index:99;}
#footer img {float:left;}
#footer a {text-decoration:none;color:#FFF;}
#footer a:hover {text-decoration:underline;}
.links {background:url(../layout/bg-footer.gif) no-repeat right;height:45px;}
.links span {float:right;padding-right:60px;}
.inlinks {padding-top:12px;}

.cb {clear:both;}

/* IE 6 / 7 extra */
* html h2 {background:url(../layout/blocks.gif) no-repeat top left;}
* html #menu {background:url(../layout/bg-sidebar.png) no-repeat 84% 0;}
* html #menu ul {margin:5px 0 0 0;}
*+html #menu ul {margin:5px 0 0 0;}
* html #menu li.blue {padding:0 20px 5px 10px;}
* html #menu li.red {padding-left:10px;}
* html #menu li.green {padding-left:10px;}
* html #menu li.yellow {padding-left:10px;}
*+html #menu li.blue {padding:0 20px 5px 10px;}
*+html #menu li.red {padding-left:10px;}
*+html #menu li.green {padding-left:10px;}
*+html #menu li.yellow {padding-left:10px;}
* html #menu h3 {background:url(../layout/bg-kopje-blauw-klein.gif) no-repeat top center;}
* html #menu h3.blue {background:url(../layout/bg-kopje-blauw-klein.gif) no-repeat top center;}
* html #menu h3.red {background:url(../layout/bg-kopje-rood-klein.gif) no-repeat top center;}
* html #menu h3.green {background:url(../layout/bg-kopje-groen-klein.gif) no-repeat top center;}
* html #menu h3.yellow {background:url(../layout/bg-kopje-geel-klein.gif) no-repeat top center;}
#cart {background:url(../layout/winkelwagen.gif) no-repeat left top;}
#rest h3.tips {background:url(../layout/bg-kopje-rood.gif) no-repeat top left;}
#rest h3.top5 {background:url(../layout/bg-kopje-blauw.gif) no-repeat top left;}

/* tell a friend */
#tafform fieldset {border:0;margin:0 0 20px;}
#tafform fieldset div {margin:0 0 2px;}

#tafform label {display:block;float:left;width:160px;}
#tafform input.text {width:240px;padding:2px;}
#tafform input.button {width:auto;padding:2px;}
#tafform textarea {width:240px;height:100px;padding:2px;}

#cart {background:url(../layout/winkelmand.png) no-repeat left top;}
table.shoppingcard {padding:0 0 20px;width:216px;text-align:center;}
*+html table.shoppingcard {padding:20px 0;}
* html table.shoppingcard {padding:20px 0;}
table.shoppingcard td, table.shoppingcard th {font:1.4em "century gothic", "trebuchet ms", arial, sans-serif;}
table.shoppingcard th {color:#FD0100;padding:10px 0;}
table.shoppingcard td.linktocard {padding:10px 0 10px 10px;width:200px;font-size:0.9em;}
table.shoppingcard td.linktocard a {color:#FFF;text-decoration:none;display:block;padding:0;}

#gastbutton, #tafbutton, #nbrbutton {background:url(../layout/tellafriend.png) no-repeat left top;height:120px;}
#nbrbutton {background-image:url(../layout/nieuwsbrief.png);}
#gastbutton {background-image:url(../layout/guestbook.png);}
#gastbutton th, #tafbutton th, #nbrbutton th {font:1.4em "century gothic", "trebuchet ms", arial, sans-serif;color:#FD0100;padding:10px 0;}
.taftext {padding:0 10px 0 30px;}

/* PK 25-08-2008: sale prices */
span.vanvoor { text-decoration: line-through; font-size:0.9em; line-height:normal; }

/* -------------------
	gastenboek
------------------- */
.gastenboek { width:508px; background-color:#fff;border:1px solid #DDD;padding:10px 5px 10px 10px;margin:0 0 20px 0;}
.gastenboek .details {
	float:right;
	width:120px;
	font-size:11px;
	border-left:1px dotted #DDD;
	padding:0 0 0 10px;
	margin:0 0 0 10px;}
.gastenboek .details .name {display:block;color:#999;}
.gastenboek .details .date {display:block;color:#999;}
.gsbtext {}
.gsbsign {margin:10px 0 20px;}

.gsbform {padding:20px;margin:0;}
.gsbform fieldset {border:0;}
.gsbform div {margin:0 0 5px;}
.gsbform label {display:block;float:left;width:180px;}
.gsbform label:first-letter {text-transform:uppercase;}
.gsbform .frm_gsb label {float:none;display:inline;margin:10px;}
.gsbform form input.text, .gsbform form textarea {border:1px solid #CCC;padding:5px!important;width:250px;}
.gsbform form textarea {width:430px;height:100px;padding:5px;}
.gsbform form input.text:focus, .gsbform form textarea:focus {border:1px solid #999;}
.gsbform form .button {width:auto;padding:2px 5px;color:#000;}
.gsbform .bericht {float:none;}

