@import "reset.css";
@import "default.css";
@import "navigation.css";
body {background: #E12526 url(img/background.jpg) repeat-x; font-family: Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.6em; color: #000;}
body, html {height: 100%;}
body.home { text-align: center; }
body.home #content { margin-top: -8px; }
.winkelmandje {margin-left: 50px; width: 500px; }
#winkelmandje_wrapper { width: 550px; height: 260px; overflow-y: auto; overflow-x: hidden;}
.winkelmandje input.text { border: 1px solid #C0AD69; height: 19px; padding: 2px 5px 0 5px; width: 90px;-moz-border-radius: 6px; }
.winkelmandje td {padding-top: 5px;}
.winkelmandje td.first-child, .winkelmandje td.last-child {width: 85px;}
.winkelmandje td.last-child {color: #d2232a; padding-left: 5px;}
.winkelmandje td.last-child span {color: #000;}
.winkelmandje td.middle {border-bottom: 1px solid #000; padding-right: 15px;}
.winkelmandje td.middle h5 {float: left; margin-bottom: 5px;}
.winkelmandje td.middle input {display: inline; float: left;}
.winkelmandje td.middle select {display: inline; float: right; margin-right: 5px;}
a.button {background: url(img/button.gif) no-repeat; color: #fff; display: block; float: right; font-weight: bolder; height: 25px; line-height: 25px; margin-right: 10px; text-align: center; text-decoration: none; width: 141px;}
div.large-canvas {background: url(img/large_canvas.png) no-repeat; height: 526px; margin: 10px auto; overflow: hidden; padding: 30px 50px 40px 40px; width: 840px;}
div.large-canvas h1 {color: #c0ad69; font-weight: bolder; line-height: 1.4em;}
div.large-canvas span {background: url(img/sauzen.jpg) left bottom no-repeat; display: block; height: 479px;}
div.medium-canvas {background: url(img/medium_canvas.png) no-repeat; height: 524px; margin: 40px auto; overflow: hidden; position: relative; width: 565px;}
div.medium-canvas h1 {color: #c0ad69; font-size: 1.8em; font-weight: bolder; line-height: 1.8em; text-align: center;}
dl.product {background: url(img/small_canvas.png); float: left; height: 264px; margin-bottom: 25px; margin-right: 10px; overflow: hidden; position: relative; width: 213px;}
dl.product dd {height: 235px; position: relative;}
dl.product dd a.info {background: url(img/info_button.gif); bottom: 8px; display: block; float: left; height: 28px; left: 10px; overflow: hidden; position: absolute; text-indent: -59px; width: 59px;}
dl.product dd a.winkelmand {background: url(img/winkelmand_button.gif); bottom: 8px; display: block; float: left; height: 28px; overflow: hidden; position: absolute; right: 10px; text-indent: -132px; width: 132px;}
dl.product dd span.image {height: 155px; left: 3px; position: absolute; width: 207px;}
dl.product dd span.image select.aantal {bottom: 5px; position: absolute; right: 5px; width: 40px; z-index: 2;}
dl.product dd span.image select.maat {bottom: 5px; position: absolute; right: 50px; width: 40px; z-index: 2;}   
dl.product dd span.image select.geslacht {bottom: 5px; position: absolute; right: 95px; width: 65px; z-index: 2;}
dl.product dd ul {bottom: 40px; left: 18px; position: absolute; width: 180px;}
dl.product dd ul label, dl.product dd ul span {display: block; float: left; font-size: 1.1em; position: relative; text-align: right; width: 50%; z-index: 2;}
dl.product dd ul li {height: 20px;}
dl.product dd ul span {color: #000;}
dl.product dd ul span.action {color: #d2232a;}
dl.product dt {color: #fff; font-size: 1.3em; font-weight: bolder; height: 25px; line-height: 27px; text-align: center;}
dl.product img.product-photo {position: absolute; top: 0; z-index: 1;}
#content {height: 610px; left: 51px; overflow: hidden; position: absolute; top: 110px; width: 960px;}
#total {bottom: 20px; position: absolute; right: 32px; width: 488px;}
#total label {float: left; font-weight: bolder; padding-right: 10px; text-align: right; width: 410px; display: inline; }
#total li a {color: #0000FF; line-height: 1em; text-decoration: underline;}
#total li.buttons a { border: none; cursor: pointer; height: 30px; margin-top: 2.5px; overflow: hidden; text-indent: -999px;  text-align: left; float: right; display: block;}
#total a.order { background: url(img/winkelmand_buttons.png) -144px 0 no-repeat; width: 121px;}
#total a.shopping {background: url(img/winkelmand_buttons.png) 0 0 no-repeat; margin-right: 5px; width: 138px;}
#total li span.float-left {color: #000; line-height: 1.2em; margin-left: 35px; text-align: left;}
#total li.buttons {background: url(img/ideal.gif) left center no-repeat; overflow: auto; text-align: right; height: 35px;}
#total span {color: #d2232a;}
#total span.strike {color: #000;}
#wrapper {background: url(img/content_bg.jpg) repeat-y; height: 750px; margin: 0 auto; overflow: hidden; position: relative; width: 1050px;}
body.bestellen #content {padding-left: 20px; padding-top: 10px;}
span.message { padding: 15px; display: block;}

div.large-canvas-bg { background: url(img/large_canvas_bg.png); width: 830px; padding: 0 0 0 100px;}
div.large-canvas-top { background: url(img/large_canvas.png); height: 30px; width: 930px;}
div.large-canvas-bottom {background: url(img/large_canvas.png) left bottom; height: 30px; width: 930px;}

div.medium-canvas-bg { background: url(img/medium_canvas_bg.png); width: 495px; padding: 0 30px 0 40px}
div.medium-canvas-top { background: url(img/medium_canvas.png); height: 10px; width: 565px;}
div.medium-canvas-bottom {background: url(img/medium_canvas.png) left bottom; height: 20px; width: 565px;}

#checkout label { width: 300px; font-size: 1.1em;}

.red {color:#D2232A;}
#total span.black,
.black { color: #000;}
.large-canvas-bg span { padding: 0 5px 0 0;}
.large-canvas-bg h2,
.medium-canvas-bg h2 { color: #c0ad69; font-size: 1.5em; line-height: 1.8em;}
#checkout ul li { padding: 4px 0;}
#checkout input,
.large-labels input { color: #666; padding: 2px; border: 1px solid #C0AD69; -moz-border-radius: 6px; } 

 input.small { width: 40px; margin-right: 5px;}
 input.medium { width: 94px; margin-right: 5px; }
 input.large { width: 292px; margin-right: 5px; }
 input.x-large {width: 400px;}
#checkout div.float-right { margin-right: 45px; }
#checkout div.float-right a { display: block; height: 30px; width: 144px; float: left; background-image: url(img/buttons.png); color: #fff; line-height: 30px; font-weight: bolder; text-align: center; font-size: 1.3em;}
#checkout div.float-right a:hover { text-decoration: none; }
#checkout div.float-right a.next-button { background-position: -162px 0; margin-left: 10px;}
form .verplicht { background: #DDD;}

#checkout ul li { height: 22px; overflow: hidden;}

body.thankyou #content,
body.payment #content { padding: 10px 0 0 200px;}
img.small-ideal { width: 22px; height: auto;}

input.radio { margin-right: 10px; float: left;}
#payment-form label { width: 20px; }
#payment-form .large-labels label { width: 190px;}
div.medium-canvas-bg a {  display: block; height: 30px; width: 144px; float: right; background-image: url(img/buttons.png); color: #fff; line-height: 30px; font-weight: bolder; text-align: center; font-size: 1.3em; margin-right: 7px;}
div.medium-canvas-bg a:hover { text-decoration: none; }
.large-labels li { padding: 5px 0;}
li.ideal { border-bottom: 1px solid #C0AD69; padding-bottom: 10px;}
li.machtiging { padding-top: 10px;}

ul.dot { list-style: disc; margin-left: 1em;}
ul.dot ol { list-style: decimal; margin-left: 2em; }

/* FANCY BOX */

#fancy_inner h2 { text-align: center; color: #c0ad69; font-weight: bolder; }
#fancy_ajax { position: relative; }
#fancy_inner .product_info { width: 30%; position: absolute; bottom: 10px; right: 0;}
#fancy_inner .product_info label { width: 50%; text-align: right; float: left;}
#fancy_inner .product_info span { width: 43%; text-align: left; display: block; float: left; padding-left: 2%;}
div#fancy_inner { border: 2px solid #C0AD69; -moz-border-radius: 6px;}

input.check { background: url(img/check2.png) 75px center no-repeat; }

div.scroll { overflow: auto; height: 450px; }
div.scroll strong { font-weight: bolder; }

div.scroll a[href="vragen#top"] { color:blue; }

#order_issuer { margin-top: 3px; margin-left: 8px;}

div.large-canvas form li { padding: 2px 0;}
div.large-canvas form li span { background: none; height: auto;  }
div.large-canvas form li label { width: 190px; text-align: right; padding-right: 10px;}
div.large-canvas form li input.text { width: 280px; }
div.large-canvas form li textarea { width: 273px;  height: 70px;}
div.large-canvas form li select { width: 280px; }
div.large-canvas strong { font-weight: bolder; }

#tellafriend-form {  margin: 20px 0 0 0;}
#tellafriend-form input { width: 300px; padding: 2px; margin-bottom: 2px; }
input[type=text],
textarea { border-top: 1px solid #abadb3; border-left: 1px solid #e3e9ef; border-right: 1px solid #e3e9ef; border-bottom: 1px solid #e3e9ef;}
input[type=text]:focus,
textarea:focus { border-top: 1px solid #3d7bad; border-left: 1px solid #b7d9ed; border-right: 1px solid #b7d9ed; border-bottom: 1px solid #b7d9ed;}

#tellafriend-form input.submit { width: 100px; padding: 2px 5px;margin: 20px 0 0 0; }

a { cursor: pointer; }