/* Basic HTML */

html, body {
	margin: 0;
	padding: 0;
	font: normal 14px/20px Arial, Verdana, Helvetica, sans-serif;
	color: black;
	text-align: center;
	background: white url(../img/bg.gif) repeat-x top;
}

a, 
a:link,
a:active,
a:focus { 
	color: #e20d1e;
	text-decoration: none;
}
a:visited { 
	color: #aa000c;
}
a:hover {
	text-decoration: underline;
}
a:focus {
	outline: 1px dotted invert;
}
a img {
	text-decoration: none;
	border: 0 none;
	text-align: right;
}

img { border: none; }


/* Headings */

h1 {
	font-size: 22px;
	line-height: 30px;
	color: #e10010;	
	text-transform: uppercase;
	padding-bottom: 25px;
}

h2 {
	font-size: 14px;	
	color: #e10010;	
	font-weight: bold;
}

#detail-heading {
		float:left;
		width: 480px;
		border-bottom: 1px solid #bfbfbf;
		border-right: 1px solid #bfbfbf;		
		padding: 10px 13px 0px 17px;		
		
}

#detail-heading h1 {
	font-size: 22px;
	color: #e10010;	
	text-transform: uppercase;
	padding: 0px;
}

#detail-heading h1 span {
	font-size: 15px;
	color: black;	
}

input.input, textarea {
	border: 1px solid #bbdaad;
}
textarea{
	width: 350px;
}

#contact td {
	vertical-align: top;
	padding-bottom: 10px;	
}
/* Spacing */

ol {
	list-style: decimal;
}
ul {
	list-style: disc;
	list-style-position: inside;	
}
li {
	margin-left: 0px;
}
p, dl, dt, hr, ol, ul, pre, table, address, fieldset {
	margin-bottom: 18px;
}

table {
	background-color: #ebfde2;
	font-size: 11px;
}

td {
	padding-left: 5px;
}


/* Layout */

#header, #navigation, #footer {
	float: left;		
	clear: both;
}

#container {
	width: 920px;
	margin: 0 auto;
	text-align: left;
	padding-bottom: 0px;		
}


#header {
	width: 920px;
	height: 67px;
	background-image: url(../img/bgHeader.gif);
	background-repeat: no-repeat;
	background-position: top right;
}

	#header .headerText, #header .headerButton {
		float: right;
		margin-top: 27px;
		margin-left: 30px;
		text-transform: uppercase;
		font-weight: bold;
	}

	#header .headerText a,
	#header .headerText a:link,
	#header .headerText a:active,
	#header .headerText a:focus { 
		color: black;
		text-decoration: underline;
	}
	
	#header .headerText a:hover {
		color: #e20d1e;	
		text-decoration: underline;
	}	
	
	#header .headerButton {
		float: right;
		margin-left: 3px;
	}


#navigation {
	width: 100%;
	height: 100px;
	background: white url(../img/bgNav.gif) repeat-x;
	border-left: 1px solid #f5f5f5;
	border-right: 1px solid #f5f5f5;
}

#content, #contentScrollWrapper {

	width: 920px;
	float: left;		
	border-left: 1px solid #bfbfbf;
	border-right: 1px solid #bfbfbf;
	background-image: url(../img/bgContent.gif);
	background-repeat: repeat-x;
	margin-top: 0px;
}

#contentScrollWrapper {
	width: 900px;
	border-right:none;	
}

	#detail-wrapper {
		width: 100%;
		border-bottom: 1px solid #bfbfbf;
	}
	
	#detail {
		float: left;
		width: 480px;
		height: 100%;
		border-right: 1px solid #bfbfbf;		
		padding: 22px 13px 10px 17px;
	}
	
	#photoLarge {
		float: right;
	}
	
	#moreDetails {
		float: left;
		width: 868px;
		border-top: 1px solid #bfbfbf;
		border-left: 1px solid #bfbfbf;
		border-right: 1px solid #bfbfbf;		
		padding: 17px;
	}
	
	.detail-image {
		float: right;
		border: 1px solid #979797;
		margin-left: 20px;
	}
	
	#contentIntro, #contentIntroScroll {
		width: 500px;
		float: left;
		margin: 22px 0px 0px 17px;
	}
	
	#contentIntroScroll {
		overflow-y:scroll;
		margin: 0px 0px 0px 17px;
		padding-top: 22px;
		height:453px;
		scrollbar-face-color: #bbdaad;
		scrollbar-highlight-color: #e7fbde;
		scrollbar-shadow-color: #708368;
		scrollbar-3dlight-color: #e7fbde;
		scrollbar-arrow-color: #white;
		scrollbar-track-color: #e9f9d9;
		scrollbar-darkshadow-color: #708368;			
	}
	
	#contentOverzicht {
		width: 100%;
		float: left;
		margin: 22px 17px 0px 17px;
	}	
	
	#contentOverzichtScroll {	
		overflow-y:scroll;
		height:500px;
		padding: 22px 0px 0px 17px;
		scrollbar-face-color: #bbdaad;
		scrollbar-highlight-color: #e7fbde;
		scrollbar-shadow-color: #708368;
		scrollbar-3dlight-color: #e7fbde;
		scrollbar-arrow-color: #white;
		scrollbar-track-color: #e9f9d9;
		scrollbar-darkshadow-color: #708368;		
	}
	
	#contentScroll {
		float:left;
		width: 920px;
		overflow-y:scroll;
		height:500px;
		scrollbar-face-color: #bbdaad;
		scrollbar-highlight-color: #e7fbde;
		scrollbar-shadow-color: #708368;
		scrollbar-3dlight-color: #e7fbde;
		scrollbar-arrow-color: #white;
		scrollbar-track-color: #e9f9d9;
		scrollbar-darkshadow-color: #708368;		
	}
	
#footer {
	width: 100%;
	height: 30px;
	background-color: #3b3b3b;	
	text-align: center;
	line-height: 30px;	
	border: 1px solid #898989;
}

	#footer p {
		color: white;
		font-size: 15px;
		font-weight: bold;
		margin: 0;
		padding: 0;
	}


/* Navigation */
#navigation ul {
	margin: 0;
	padding: 0 0px 0 0px;
	width: 183px;
	height: 100px;
	float: left;
	list-style: none;
	list-style-position: outside;
	text-align: center;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	border-right: 1px solid #eff1ee;
}

#navigation ul li {
	margin: 0;
	padding: 0;
	width: 100%;
}

.navUnderline {
	background-image: url(../img/navItemUnderline.gif);
	background-repeat: repeat-x;
	background-position: bottom;
}
	
#navigation ul li .navHeader,	
#navigation ul li a {
	line-height: 20px;
	display: block;
	width: 100%;
}

.navBgActive { 
	background: white url(../img/bgNavActive.gif) repeat-x;
}

.navCategory .navHeader,
.navCategory a, 
.navCategory a:link,
.navCategory a:active,
.navCategory a:focus { 
	font-size: 14px;
	height: 21px;
	display: block;
	padding-top: 9px;
	color: black;
}

.navCategoryActive .navHeader,
.navCategoryActive a, 
.navCategoryActive a:link,
.navCategoryActive a:active,
.navCategoryActive a:focus {
	background-color: #e20d1e;
	font-size: 14px;
	height: 21px;
	display: block;
	color: white !important;
	padding-top: 7px;		
	border-bottom: 2px solid #bbdaad;
	border-top: 2px solid #efefef;
}

.navItemActive {
	background: white url(../img/bgNavItem.gif) repeat-y;
	background-position: bottom;
}


/* Elements */

.product-container, .product-container-right, .product-container500 {
	width: 420px;
	float: left;
	border: 1px solid #a1a1a1;
	background: white url(../img/bgProduct.gif) repeat-x;
	margin-bottom: 30px;
	margin-right: 20px;
	display:inline-block;
}

.product-container-right {
	margin-right: 0;
}
.product-container500 {
	width: 470px; 
}
	.product-image {
		float: left;
		border-right: 1px solid #a1a1a1;
		background-color:#009900;
	}
	.product-container img, .product-container500 img, .product-container-right img  {
		float: left;
		border: 5px solid #d1d1d1;
	}
	
.product500 {
		width: 307px;
		float: left;
		padding: 7px 0px 8px 13px;
		display: inline-block;
	}

.product {
		width: 252px;
		float: left;
		display: inline-block;		
		padding: 7px 0px 8px 13px;
	}
	
		.product h1, .product500 h1 {
			font-size: 16px;
			line-height: 16px;
			margin: 0;
			padding: 0;
			padding-bottom: 15px;
		}
		
		.product strong, .product500 strong {
			font-weight: bold;
			font-size: 16px;
			float: left;
		}
		
		.productButton img, .productButton500 img {
			float: right;
			border: none;
		}


/* Helpers */
.wide { width: 400px; }

.listTitle { margin: 0; padding:0; text-transform: uppercase; font-weight: bold;  }
.clear	{ clear: both; }
.left	{ float: left; }
.right	{ float: right; }

.txtSmall 	{ font-size: 10px; }
.txtBig 	{ font-size: 10px; }

.detailPrice {
	font-size: 20px;
	font-weight: bold;
	color: #E10010;
	line-height: 24px;
}

.noBorder {
	border: none;
}

.red {
		color: #e10010;	
}

#contact table{
	background-color: #FFFFFF;
	margin-bottom: 10px;
}
#contact table img{
	padding-right: 5px;
}
.productIntro{
	height: 75px;
}
.product500 p{
	height: 75px;
}
