/* Design and CSS by Geert De Deckere <geertdd@gmail.com> */

/* Global text */
body { font-size:87.5%;/*14px*/ font-family:georgia,serif; line-height:1.4285em;/*20px*/ color:#2F2808; }
html > body { font-size:14px; }
p, ul, ol, table { margin-bottom:1.4285em;/*20px*/ }
em { font-style:italic; }
strong, li.strong { font-weight:bold; color:#544D2A; }

/* General classes */
.clear { clear:both; }
.floatleft { float:left; }
.floatright { float:right; }
.left { text-align:left; }
.right { text-align:right; }
.center { text-align:center; }

/* Headings */
h1 { clear:both; margin-top:2em;/*60px*/ margin-bottom:0.6666em;/*20px*/ font-size:2.1428em;/*30px*/ line-height:1.3333em;/*40px*/ }
h2 { margin-top:2.2222em;/*40px*/ margin-bottom:1.1111em;/*20px*/ font-size:1.2857em;/*18px*/ font-weight:bold; color:#797250; text-transform:uppercase; }
h1 + h2 { margin-top:0; }
h3 { margin-bottom:1.4285em;/*20px*/ font-weight:bold; }

/* Links */
a { border-bottom:1px solid #AE9179; color:#641A14; text-decoration:none; }
a.info { padding-left:20px; background:url(../img/layout/info-icon-small.png) no-repeat 0 50%; border:0; font-style:italic; }
a:visited { border-style:dotted; }
a:hover { background-color:#55140F; border-color:#55140F; color:#F7F4E7; }

/* Figures */
.figure { margin:0 0 1em;/*14px*/ padding:9px; background:#D2C997; border:1px solid #C9BF8A; border-radius:4px; }
	.figure img { display:block; width:100%; }
	.figure small { display:block; position:relative; top:0.4em;/*5px*/ font-size:0.8571em;/*12px*/ text-align:left; }
		.figure em { margin:0 1px 0 0; font-size:0.8333em;/*10px*/ font-family:helvetica,arial,sans-serif; font-weight:bold; font-style:normal; text-transform:uppercase; }
.a { clear:left; float:left; margin-right:2em;/*28px*/ }
.b { clear:right; float:right; margin-left:2em;/*28px*/ }
.xsmall { width:80px; }
.small { width:200px; }
.medium { width:320px; }
.large { width:460px; }
.clean, .clean:hover { padding:0; background:none; border:0; } /* Used for links and figures */

/* Tables */
.alt1 { background:#d3ca9a; }
.alt2 { background:#dcd5aa; }
table { width:100%; border:1px solid #C9BF8A; border-width:1px 0; }
	th, td { padding:10px 5px; border-bottom:1px solid #C9BF8A; vertical-align:middle; }
.no-padding { padding-left:0; padding-right:0; }
.no-right-padding { padding-right:0; }
.no-left-padding { padding-left:0; }

/* Add to cart links or submit button */
.add-to-cart { opacity:0.75; }
.add-to-cart:hover, .add-to-cart:focus { opacity:1; }

/* Layout wrapper */
body { margin:0; padding:0 0 100px; background:#301E12 url(../img/layout/hout.jpg) repeat 59% -135px; }
#wrap { position:relative; margin:80px auto 0; width:960px; background:#EDE5C5 url(../img/layout/oud-papier.jpg) repeat-y; }
@media screen and (max-height:1024px) {
	body { padding-bottom:40px; }
	#wrap { margin-top:40px; }
}
@media screen and (max-height:768px) {
	body { padding-bottom:0; }
	#wrap { margin-top:0; }
}

/* Promobar */
#promobar { background:#1A1007; }
	#promobar p { margin:0 auto; padding:0.8em 0 0.8em 60px; width:900px; background:url(../img/layout/hulst.png) no-repeat 0 50%; font-size:1.4286em;/*20px*/ font-style:italic; color:#766d45; }
		#promobar p strong { margin:0 0.25em; font-size:1.1em;/*22px*/ font-variant:small-caps; letter-spacing:0.02em; color:#BFB578; }

/* Header */
#identity { margin:0; height:280px; background:url(../img/layout/wijngaard.jpg) no-repeat 0 0; }
	#identity strong { position:absolute; top:30px; left:73px; width:96px; height:250px; background:url(../img/layout/wijnglas.png) no-repeat; }
		#identity a { position:absolute; top:10px; left:167px; width:249px; height:72px; background:url(../img/layout/natuurlijke-wijnen.png) no-repeat; border:0; text-indent:-9999px; }

/* Main navigation */
#nav { z-index:1; position:absolute; top:180px; left:240px; }
	#nav li { display:inline;/* Safari and IE fix */ }
		#nav a {
			float:left; margin:0 10px 0 0; padding:9px; background:#D2C997; border:1px solid #C9BF8A; border-radius:4px; font-weight:bold; text-transform:uppercase; text-decoration:none; color:#2F2808;
			-webkit-transition:all 0.1s ease-in-out;
			   -moz-transition:all 0.1s ease-in-out;
			        transition:all 0.1s ease-in-out;
			-webkit-box-shadow:0 1px 1px rgba(0,0,0,0.2);
			   -moz-box-shadow:0 1px 1px rgba(0,0,0,0.2);
			        box-shadow:0 1px 1px rgba(0,0,0,0.2);
		}
		#nav a:hover { background:#641A14; border-color:#544D2A; color:#F7F4E7; }
		#nav a:active, #nav a.current { background:#2F2808; border-color:#2F2808; color:#F7F4E7; }

/* Flash box */
#flash { margin-bottom:4em; padding:1.5em 240px 1em 320px; background:#86B604 url(../img/layout/confirm-icon.png) no-repeat 240px 50%; border:1px solid #6EA703; border-width:1px 0; font-size:1.1428em;/*16px*/ color:#FFF; }
	#flash h1 { margin:0 0 1em; padding-bottom:0.25em;/*4px*/ border-bottom:1px solid #aacb50; font-size:1em; font-weight:bold; text-transform:uppercase; }
	#flash p { margin-bottom:0.5em; }
	#flash a { border-color:#fff; color:#fff; }
	#flash a:hover { background:#fff; color:#6EA703; }
#flash.info { background-image:url(../img/layout/info-icon.png); }
#flash.alert { background-color:#9B140F; background-image:url(../img/layout/alert-icon.png); border-color:#88110d; }
	#flash.alert h1 { border-color:#af433f; }
	#flash.alert a:hover { color:#88110d; }

/* Main content */
#content { float:left; position:relative; margin:0 0 0 60px; width:480px; }
	#content h1:first-child { margin-top:0; }
	#content h2 { /*margin-left:1.5555em;/*28px*/ }
	#content h3 { /*margin-left:2em;/*28px*/ }
		#content table h3 { margin:0; }
	#content p { /*text-indent:2em;/*28px*/ }
	#content ul { margin-left:2em;/*28px*/ list-style-image:url(../img/layout/bullet.gif); }
	#content ol { margin-left:2em;/*28px*/ list-style-type:decimal; }

	/* Intro paragraphs */
	#content .intro { margin-bottom:2.5em;/*40px*/ margin-left:1.75em;/*28px*/ margin-right:120px; padding-bottom:1.1875em;/*19px*/ border-bottom:1px solid #C2BD9A; font-size:1.1428em;/*16px*/ font-style:italic; color:#766d45; text-indent:0; }
	#content .intro:first-letter { float:left; margin-right:0.25em;/*8px*/ font-size:2em;/*32px*/ font-family:'imprint mt shadow'; }

	/* Warnings */
	#content .warning { padding:14px 14px 14px 72px; background:#fce812 url(../img/layout/alert-icon.png) no-repeat 10px 50%; border:1px solid #fdd300; text-indent:0; color:#000; }

	/* Wine page */
	#content img.wine-bottle { background:url(../img/layout/achtergrond-wijnfles.jpg) no-repeat 50% 50%; }
	#content form.add-wine { float:left; margin:0 0 2.8571em;/*40px*/ padding:9px; width:200px; background:#D2C997; border:1px solid #C9BF8A; border-radius:4px; text-align:center; }
		#content form.add-wine p { margin:0; padding:0; text-indent:0; }
		#content form.add-wine label { float:none; display:block; margin:0; width:auto; }
		#content form.add-wine input#quantity { width:3.5em; text-align:center; }
		#content form.add-wine input.submit { margin-left:0.5em; vertical-align:middle; }

	/* Cart form */
	#cartform th { background:#dcd5aa; border-bottom:2px solid #544D2A; }
	#sub-total td { border-top:2px solid #544D2A; }
	#grand-total td { padding:; background:#2F2808; border:0; }
	#grand-total strong { font-size:1.2857em;/*18px*/ color:#F7F4E7; }
	#cartform #submit { padding:0; text-align:right; }
		#cartform #submit input { margin:10px 5px 0 5px; }

	/* Form (errors) */
	#formerrors { margin-bottom:1.4285em;/*20px*/ padding:18px 80px 0 0; background:#9c1510 url(../img/layout/alert-icon.png) no-repeat 400px 50%; border:1px solid #88110d; color:#fff; }
		#formerrors h3 { font-size:0.8571em;/*12px*/ text-transform:uppercase; margin-left:2.3333em;/*28px*/ }
		#formerrors ul { padding-left:1em;/*14px*/ list-style:square; }

	input[type="text"] { width:70%; }
	#content form p { clear:both; padding-left:160px; text-indent:0; }
	#content form p.error { padding-top:0.5em; padding-bottom:0.5em; background:#9c1510 url(../img/layout/alert-icon-small.png) no-repeat 5px 0.7em; border:1px solid #88110d; color:#fff; }
		#content form p.error small { color:#fff; }
		#content form label { float:left; margin-left:-132px; width:132px; font-weight:bold; }
		#content form label.inline { float:none; display:inline; margin:0; width:auto; font-weight:normal; }
		#content form small { display:block; margin:2px 0 0; font-size:0.8571em;/*12px*/ color:#544D2B; line-height:1; }
		#content form textarea { width:306px; line-height:1.2; }

/* Sidebars */
.sidebar { float:left; margin:60px 0 0 60px; width:120px; }
	.sidebar h2 { margin-top:0; font-size:0.7857em;/*11px*/ }
	.sidebar ul { list-style-image:url(../img/layout/bullet.gif); }
	.sidebar ol { list-style:decimal; }

	/* Shopping cart */
	#cart { padding-left:42px; min-height:26px; background:url(../img/layout/winkelkarretje.png) no-repeat 0 50%; }

/* Footer */
#footer { clear:both; margin-left:268px; padding:40px 0 20px; font-size:0.8571em;/*12px*/ color:#544D2B; }
	#bottomnav { padding-top:19px; width:332px; border-top:1px solid #C2BD9A; }
		#bottomnav li { display:inline; margin-right:1em; }

/* Vine */
#vine { position:absolute; top:20px; right:0; width:499px; height:350px; background:url(../img/layout/wijntak.png) no-repeat; }
@media screen and (max-width:1200px) { #vine { width:450px; }}
@media screen and (max-width:1024px) { #vine { width:400px; }}