/* Typografie
-------------------------------------------------------------- */
html, body 						{ height: 100%;}
body 							{ font-size: 12px; background:url(../images/bg_body.gif) repeat-x #EEEEEE;}
body,h1,h2,h3,h4,h5,h6,
p,ul,ol,dl,input,textarea 		{ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; color:#4C4C4C; line-height:18px;}

a								{ color:#AE1E23}
/* Titels
-------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6 				{ font-weight: normal; line-height:16px}
h1								{ font-size: 20px; margin-bottom: 30px; color:#666; font-weight:bold}
h2 								{ font-size: 16px; margin: 10px 0; color:#666; font-weight:bold}
h3 								{ font-size: 20px; color:#666; margin: 0 0 30px; line-height: 24px;}
h4 								{ font-size: 1em; line-height: 1.25; margin-bottom: 2em; }
h5 								{ font-size: 1em; margin-bottom: 1.5em; }
h6 								{ font-size: 1em; }

/* Layout
------------------------------------------------------------- */
.clear							{ clear:both;}
#page							{ margin: 0 auto; width: 900px; background: url(../images/bg_page.png) repeat-y; 
								  min-height: 100%; height:auto !important; height:100%;}

#header							{ position:relative; height: 140px; }
#logo							{ position:absolute; top: 16px; left: 36px;}
#top_image						{ position:absolute; top: 0px; right: 36px;}
#top_menu						{ position:absolute; top: 94px; right:36px; width: 620px; height: 25px; background-color:#AE1E23}
#top_menu ul li					{ list-style-type: none; display: inline;}
#top_menu ul li a				{ display:inline-block; padding: 3px 10px; text-decoration:none; color:#FFF; text-transform:uppercase; font-weight: bold}
#top_menu ul li a:hover			{ text-decoration:underline;}

#wrapper						{ }

#ingelogd						{ color:#666; float: right; font-size: 11px; line-height:11px}
#ingelogd a						{ color:#666;}

#sidebar						{ float:left; width: 225px; margin-left: 36px; display:inline; }
#stap							{ width:200px;}
#stap li						{ width: 200px; height: 44px; list-style:none; margin-bottom:10px;}
#stap1							{ background:url(../images/stappen_sprite.gif) no-repeat; background-position: 0 -88px}
#stap .active1					{ background-position: 0 0;}
#stap2							{ background:url(../images/stappen_sprite.gif) no-repeat; background-position: -200px -88px}
#stap .active2					{ background-position: -200px 0;}
#stap3							{ background:url(../images/stappen_sprite.gif) no-repeat; background-position: -400px -88px}
#stap .active3					{ background-position: -400px 0;}
#stap4							{ background:url(../images/stappen_sprite.gif) no-repeat; background-position: -600px -88px}
#stap .active4					{ background-position: -600px 0;}
#btw_verz						{ padding: 8px; background-color:#AE1E23; width: 176px; color:#FFF; margin-bottom:10px;}

#content						{ float:left; width: 603px;}
#content ul						{ list-style:disc; margin-left:30px;margin-bottom: 10px; }
/* #content p						{ margin-bottom: 18px;} */
.start							{ margin-bottom: 20px;}
.start p						{ display: block; float: left; width:300px; margin-left:20px;}
.start a						{ display: block; float: left;}

#pakketlijst					{ border: 1px solid #ccc; background-color:#eee;}
#pakketlijst td					{ padding: 5px; vertical-align:top}
#pakketlijst a					{ text-decoration:none; color:#666;}
#pakketlijst a:hover			{ color:#AE1E23; }
#pakketlijst img				{ margin: 0 3px -2px 0;}

.producten						{ background-color:#eee; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px;}
.wijnafb						{ width: 160px; background-color:#fff;padding:5px;border: 1px solid #ccc; text-align:center; float:left;}
.productkaart					{ float: right; width: 380px;}
.productkaart a					{ float: right; display:block;}
.prijs							{ font-size:18px; font-weight:bold; margin: 10px; color:#AE1E23}

#voorbeeldimage					{ width: 603px; height: 263px; border: 1px solid #000; }

#overzicht,
#overzicht td					{ padding: 3px; border: 1px solid #ccc; margin-bottom: 20px;}
#overzicht td.om				{ background-color:#eee;}

label.error						{ margin-left:8px; color:red; }
#leverdatum						{ width: 200px; float:left; margin-left:170px; font-size:10px; line-height:10px; margin-bottom:20px;}

/* datum field
--------------------------------------------------------- */
table.jCalendar {
	border: 1px solid #000;
	background: #aaa;
    border-collapse: separate;
    border-spacing: 2px;
}
table.jCalendar th {
	background: #333;
	color: #fff;
	font-weight: bold;
	padding: 3px 5px;
}

table.jCalendar td {
	background: #ccc;
	color: #000;
	padding: 3px 5px;
	text-align: center;
}
table.jCalendar td.other-month {
	background: #ddd;
	color: #aaa;
}
table.jCalendar td.today {
	background: #666;
	color: #fff;
}
table.jCalendar td.selected {
	background: #f66;
	color: #fff;
}
table.jCalendar td.selected.dp-hover {
	background: #f33;
	color: #fff;
}
table.jCalendar td.dp-hover,
table.jCalendar tr.activeWeekHover td {
	background: #fff;
	color: #000;
}
table.jCalendar tr.selectedWeek td {
	background: #f66;
	color: #fff;
}
table.jCalendar td.disabled, table.jCalendar td.disabled.dp-hover {
	background: #bbb;
	color: #888;
}
table.jCalendar td.unselectable,
table.jCalendar td.unselectable:hover,
table.jCalendar td.unselectable.dp-hover {
	background: #bbb;
	color: #888;
}

/* For the popup */

/* NOTE - you will probably want to style a.dp-choose-date - see how I did it in demo.css */

div.dp-popup {
	position: relative;
	background: #ccc;
	font-size: 10px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 2px;
	/*width: 185px;*/
	line-height: 1.2em;
}
div#dp-popup {
	position: absolute;
	z-index: 199;
}
div.dp-popup h2 {
	font-size: 12px;
	text-align: center;
	margin: 2px 0;
	padding: 0;
}
a#dp-close {
	font-size: 11px;
	padding: 4px 0;
	text-align: center;
	display: block;
}
a#dp-close:hover {
	text-decoration: underline;
}
div.dp-popup a {
	color: #000;
	text-decoration: none;
	padding: 3px 2px 0;
}
div.dp-popup div.dp-nav-prev {
	position: absolute;
	top: 2px;
	left: 4px;
	width: 100px;
}
div.dp-popup div.dp-nav-prev a {
	float: left;
}
/* Opera needs the rules to be this specific otherwise it doesn't change the cursor back to pointer after you have disabled and re-enabled a link */
div.dp-popup div.dp-nav-prev a, div.dp-popup div.dp-nav-next a {
	cursor: pointer;
}
div.dp-popup div.dp-nav-prev a.disabled, div.dp-popup div.dp-nav-next a.disabled {
	cursor: default;
}
div.dp-popup div.dp-nav-next {
	position: absolute;
	top: 2px;
	right: 4px;
	width: 100px;
}
div.dp-popup div.dp-nav-next a {
	float: right;
}
div.dp-popup a.disabled {
	cursor: default;
	color: #aaa;
}
div.dp-popup td {
	cursor: pointer;
}
div.dp-popup td.disabled {
	cursor: default;
}

a.dp-choose-date {
	width: 16px;
	height: 16px;
	padding: 0;
	float:left;
	margin: 2px 5px;
	display: block;
	text-indent: -2000px;
	overflow: hidden;
	background: url(../images/icons/icon_calendar.png) no-repeat;
}
a.dp-choose-date.dp-disabled {
	background-position: 0 -20px;
	cursor: default;
}
/* makes the input field shorter once the date picker code
 * has run (to allow space for the calendar icon
 */
input.dp-applied {
	width: 140px;
	float: left;
}

/* formulier 
-------------------------------------------------------------- */
#formulier						{ margin-top: 20px;}
#formulier label 				{ width: 120px; float: left; margin-bottom: 5px; padding:3px; text-align: right; padding-right: 10px;}
#formulier .input, 
#formulier .box					{ width: 300px; float: left; margin-bottom: 5px; padding:3px; border: 1px solid #900;}
#formulier .box					{ height: 100px;} 
#formulier br					{ clear: left;}
#formulier .button				{ margin-left:130px; width:100px; border:1px solid #900; background-color:#eee; display:inline; height: 20px;}