/*	screen.css | De Geluksdruif
**	Lodewijk Schutte | Low
**	v1.1 | 20101007
**	---------------------------------------------------------------------- */

/*	Global reset, based on http://meyerweb.com/eric/tools/css/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 {
	background:transparent;
	border:0;
	font-size:100%;
	margin:0;
	padding:0;
	vertical-align:baseline;
}

ol, ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

/*	Body
**	---------------------------------------------------------------------- */

body {
	background:#bdf url(../images/bg-body.png) repeat-x;
	color:#000;
	font:12px/1.5 'trebuchet ms', arial, sans-serif;
}

/*	Layout
**	---------------------------------------------------------------------- */

#top {
	background:url(../images/happy-grape.png) 95% -3px no-repeat;
	margin:0 auto;
	width:960px;
}

/*	Header
**	---------------------------------------------------------------------- */

#header {
	background:url(../images/logo.png) 25px 75% no-repeat;
	padding:40px 0 20px;
	margin-bottom:0;
}

#header h1 {
	color:#063;
	font:italic normal 3em/normal georgia,serif;
	text-shadow:1px 1px 1px rgba(255,255,255,.5);
	text-indent:25px;
	visibility:hidden;
}

/*	Nav
**	---------------------------------------------------------------------- */

#nav {
	/*background:#cfe7ff;*/
	background:rgba(255,255,255,0.5);
	margin:0 10px;
	padding:5px 10px;
	position:relative;
	z-index:5;
	-moz-border-radius:5px 5px 0 0;
	-webkit-border-top-left-radius:5px;
	-webkit-border-top-right-radius:5px;
	-moz-box-shadow:0 0 3px rgba(0,0,0,.25);
	-webkit-box-shadow:0 0 3px rgba(0,0,0,.25);
}

#nav ul {
	margin-bottom:0;
}

#nav li {
	display:inline;
	margin:0 10px;
}

#nav a {
	color:#000;
	color:rgba(0,0,0,.75);
	font:bold 1em 'trebuchet ms', sans-serif;
	text-transform:uppercase;
	text-decoration:none;
	letter-spacing:1px;
	text-shadow:1px 1px 1px #fff;
}

#nav a:hover,
body.home #nav-home a,
body.wijnen #nav-wijnen a,
body.proeverij #nav-proeverij a,
body.blog #nav-blog a,
body.over #nav-over a,
body.contact #nav-contact a {
	color:#396;
}

/*	Content
**	---------------------------------------------------------------------- */

#content {
	background:#fff url(../images/bg-content.png) 100% 0 repeat-y;
	overflow:hidden;
	position:relative;
	z-index:10;
	-moz-box-shadow:0 0 3px rgba(0,0,0,.5);
	-webkit-box-shadow:0 0 3px rgba(0,0,0,.5);
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

#content a {
	color:#069;
}

#content a:hover {
	color:#396;
}

/*	Default content styles
**	---------------------------------------------------------------------- */

p, ul, ol, dl,
table, pre, blockquote {
	margin-bottom:1.5em;
}

ul ul, ul ol, ol ol, ol ul {
	margin-bottom:0;
}


/*	Primary
**	---------------------------------------------------------------------- */

#primary {
	float:left;
	width:575px;
	/*padding:25px 40px 25px 25px;*/
	padding:25px;
	width:590px;
}

h2, h3, h4 {
	font:1.5em/1 georgia, serif;
	margin-bottom:1em;
}

#primary h2 {
	color:#444;
	font-size:2em;
	line-height:normal;
	font-style:italic;
}

#primary h2 em {
	font-style:normal;
	color:#396;
}

#primary .intro {
	color:#444;
	font-size:1.333em;
	line-height:1.5;
	margin-bottom:1.5em;
}

#primary.story p {
	margin-bottom:1.5em;
}

#primary div.special {
	color:#444;
	font-size:1.333em;
	font-style:italic;
	line-height:1.5;
	margin:1.5em 3em 1.5em 1.5em;
}

/*	Wine Item
**	---------------------------------------------------------------------- */

.item {
	background:#def;
	/*overflow:hidden;*/
	margin-bottom:25px;
	padding:18px;
	position:relative;
	float:left;
	width:554px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-moz-box-shadow:1px 1px 2px rgba(0,0,0,.4);
	-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.4);
}

.item .col1 {
	float:left;
	width:250px;
}

.item .col2 {
	float:right;
	width:250px;
}

.item table {
	width:100%;
}

.item table {
	margin-bottom:3em;
}

.item table.producer:last-child {
	margin-bottom:0;
}

.item table col.name {
	width:55%;
}

.item table col.taste {
	width:35%;
}

.item table col.price {
	width:10%;
}

.item table caption {
	text-align:left;
	font-style:italic;
}

.item table.producer caption {
	text-align:left;
	font:normal 1.333em/1.125 georgia, serif;
	margin-bottom:0.5625em;
}

.item table.producer caption em {
	font-style:italic;
}

.item table th {
	text-align:left;
	font-weight:normal;
	color:#888;
}

.item table col.key {
	width:34%;
}

.item table col.val {
	width:66%;
}

.item:last-child {
	margin-bottom:0;
}

.item table img {
	vertical-align:middle;
	margin:0 4px 0 -16px;
}

.item img.special {
	position:absolute;
	right:5px;
	top:-30px;
}



/*	Home item
**	---------------------------------------------------------------------- */

.home .item ul ul {
	color:#999;
	list-style:square outside;
	padding-left:1.5em;
}

.home .item ul strong {
	display:block;
	margin-top:1.5em;
}

.home .item ul.specials {
	margin-bottom:3em;
}

.home .item ul.specials li {
	background:url(../images/star.png) 0 50% no-repeat;
	padding-left:18px;
}

/*	Call To Action link
**	---------------------------------------------------------------------- */

.item a.cta {
	background:#fff;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.5, #eee), to(#ccc));
	border:1px solid #ddd;
	text-decoration:none;
	font-weight:bold;
	padding:5px 10px;
	text-align:center;
	float:left;
	text-shadow:1px 1px 1px #fff;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.item a.cta:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.5, #fff), to(#ddd));
}

/*	Images
**	---------------------------------------------------------------------- */

span.image {
	display:block;
}

span.image.left {
	float:left;
	margin:0 1.5em 0 0;
}

span.image.right {
	float:right;
	margin:0 0 0 1.5em;
}

span.image.center img {
	display:block;
	margin:0 auto;
}


/*	Aside
**	---------------------------------------------------------------------- */

#aside {
	color:#444;
	float:right;
	width:270px;
	padding:25px;
	min-height:300px;
}

#aside .section {
	padding:25px 0;
	border-bottom:1px solid #ddd;
	border-top:1px solid #fff;

}

#aside .section:first-child {
	border-top:none;
	padding-top:0;
}

#aside .section:last-child {
	border-bottom:none;
	padding-bottom:0;
}
#aside .filter ul {
	overflow:hidden;
	border-bottom:1px dotted #ccc;
}

#aside .filter li {
	border-top:1px dotted #ccc;
}

#aside .filter a, #aside .filter strong {
	padding:3px 0;
	display:block;
	text-decoration:none;
}

#aside .filter a:hover {
	background:#f6f6f6;
}

#aside .filter li.active a {
	font-weight:bold;
	color:#666;
}

#aside .filter strong {
	border-top:2px solid #ddd;
	margin-top:-1px;
}

#aside .filter ul ul {
	border:none;

}

/*	Contact form
**	---------------------------------------------------------------------- */

#contactform fieldset input, #contactform fieldset textarea, #contactform fieldset button {
	border:1px solid #999;
	font:1.5em/normal georgia, serif;
	margin-bottom:1em;
	width:400px;
}

#contactform fieldset label {
	float:left;
	width:125px;
	font:1.5em/normal georgia, serif;
	color:#666;
}

#contactform fieldset button {
	background:#ddd;
	margin:0 0 0 125px;
	font:bold 1em/normal 'trebuchet ms', sans-serif;
	padding:5px 8px;
	width:auto;
	cursor:pointer;
	text-shadow:1px 1px 1px #fff;
}

#contactform fieldset br {
	clear:both;
}

#contactform fieldset .error {
	border-color:#966;
	background:#fcc !important;
}

/*	Toggle form
**	---------------------------------------------------------------------- */

.togglestock {
	clear:both;
}

.togglestock fieldset {
	text-align:right;
}

/*	Forms in Aside div
**	---------------------------------------------------------------------- */

.js-on #aside fieldset {
	background:#fff;
	border:1px solid #ddd;
	color:#ccc;
	overflow:hidden;
	position:relative;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
}

.js-on #aside fieldset label {
	display:none;
}

.js-on #aside fieldset input {
	background:none;
	border:none;
	width:175px;
	padding:4px;
	float:left;
	font:1.5em/normal georgia, serif;
	color:#ccc;
	margin:1px;
}

.js-on #aside fieldset input:focus {
	color:#444;
}

.js-on #aside fieldset button {
	border:none;
	border-left:1px solid #ddd;
	background:#f6f6f6;
	color:#666;
	cursor:pointer;
	float:right;
	font:bold 1em/normal 'trebuchet ms';
	margin:0;
	width:80px;
	padding:7px 0;
}

.webkit #aside fieldset button {padding:9px 0 8px;}

.js-on #aside fieldset button:focus, .js-on #aside fieldset button:hover {
	background:#def;
	color:#000;
}

/*	Searchform results
**	---------------------------------------------------------------------- */

#quickresults {
	margin-top:1.5em;
}

#quickresults ul {
	list-style:square outside;
	padding-left:1.5em;
	color:#666;
}

#quickresults li.more {
	font-weight:bold;
	list-style:none;
	text-align:right;
	margin-top:.75em;
}

/*	Footer
**	---------------------------------------------------------------------- */

#footer {
	background:url(../images/happy-grape2.png) 40px -30px no-repeat;
	height:130px;
	color:#666;
	font-size:.833em;
	line-height:normal;
	padding:10px 25px 0;
	text-align:right;
	text-shadow:1px 1px 1px rgba(255,255,255,.5);
	position:relative;
	z-index:5;
}

/*	Popups
**	---------------------------------------------------------------------- */

#overlay {
	background:transparent;
	background:rgba(0,0,0,.4);
	height:100%;
	position:fixed;
	width:100%;
	top:0;
	left:0;
	z-index:8888;
}

#popup {
	position:fixed;
	width:580px;
	top:75px;
	left:50%;
	margin-left:-290px;
	z-index:9999;
}

#popup #contactform {
	-moz-box-shadow:0 0 5px #000;
	-webkit-box-shadow:0 0 5px #000;
}

#contactform #closepopup {
	margin-left:5px;
}

#popup .loading {
	text-indent:-9999em;
	width:60px;
	height:60px;
	margin:50px auto;
	background:#fff url(../images/ani-throbber.gif) 50% 50% no-repeat;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-moz-box-shadow:0 0 5px #000;
	-webkit-box-shadow:0 0 5px #000;
}