@import url(css-reset.css);

body {
	text-align:				center;
	background:				#fff url('../images/layout/body-bg.gif') no-repeat top center;
	font:					10px/10px Verdana, Arial, Helvetica, sans-serif;
	color:					#fff;
	}

/**
		WRAPPER		
************************************/

#wrapper {
	width:					760px;
	height:					550px;
	margin:					57px auto 0 auto;
	text-align:				left;
	position:				relative;
	}

h1 {
	display:				block;
	width:					283px;
	height:					54px;
	text-indent:			-3000px;
	background: 			url('../images/layout/bloemenparket_logo.jpg') no-repeat top left;
	position:				absolute;
	top:					16px;
	left:					10px;
	}

h2 {
	text-indent:			12px;
	background: 			url('../images/layout/h2-block.gif') no-repeat left 2px;
	margin-bottom:			5px;
	font-weight:			bold;
	text-transform:			uppercase;
	}

/**
		CONTAINERS		
************************************/

#big-container {
	width:					416px;
	height:					416px;
	position:				absolute;
	top:					87px;
	left:					10px;
	border:					1px solid #fff;
	z-index:				10px;
	background:				#4d4d4d;
	}

#big-flash-container {
	width:					416px;
	height:					416px;
	}
	
#big-content {
	margin:					5px 12px 12px 12px;
	width:					285px;
	height:					380px;
	}

#big-content a,
#big-content a:visited {
	color:#fff;
	text-decoration:underline;
	}
	
#big-content a:hover {
	color:					#8f6c57;
	font-weight:			bold;
	text-decoration:		none;
	}
	
.big-img {
	width:					416px;
	height:					416px;
	}
	
#small-container {
	width:					220px;
	height:					220px;
	position:				absolute;
	top:					255px;
	left:					315px;
	border:					1px solid #fff;
	z-index:				15px;
	background:				#4d4d4d;
	}

#small-flash-container {
	width:					220px;
	height:					220px;
	}

#small-content {
	margin:					6px;
	height:					210px;
	overflow:				hidden;
	}

#small-content h2 {
	padding-left:10px;
	text-indent:0px;
	}

#big-container h2.title {
	margin:					12px 0 0 12px;
	}

#homepage-slideshow {
	width:					425px;
	height:					416px;
	position:				absolute;
	top:					87px;
	left:					0;
	z-index:				10px;
	}

/**
		CUSTOM SCROLLBAR STYLES	
************************************/

.scrollgeneric {
	line-height: 			1px;
	font-size: 				1px;
	position: 				absolute;
	top: 					0; 
	left: 					0;
	}

.vscrollerbase {
	width: 					10px;
	background-color: 		#4d4d4d;
	}
	
.vscrollerbar {
	width: 					10px;
	background-color: 		#fff;
	}

.hscrollerbase {
	height: 				10px;
	background-color: 		#4d4d4d;
	}

.hscrollerbar {
	height: 				10px;
	background-color: 		#fff;
	}

.scrollerjogbox {
	width: 					10px;
	height: 				10px;
	top: 					auto; 
	left: 					auto;
	bottom: 				0px; 
	right: 					0px;
	background-color: 		#4d4d4d;
	}

/**
		ITEMS LIST	
************************************/

#items-list {
	margin-top:				15px;
	}

#items-list li {
	margin:					5px 0;
	}

#items-list li a,
#items-list li a:visited {
	color:					#fff;
	text-decoration:		none;
	}
	
#items-list li a:hover {
	color:					#8f6c57;
	text-decoration:		underline;
	}

#items-list li.active a,
#items-list li.active a:visited,
#items-list li.active a:hover {
	color:					#8f6c57;
	font-weight:			bold;
	}

/**
		MEDIA PLAYER	
************************************/

#mediaplayer {
	position:				absolute;
	left:					10px;
	top:					183px;
	background:				#fff;
	width:					397px;
	height:					224px;
	}
	
.media-title {
	position:				absolute;
	left:					10px;
	top:					163px;	
	}


/**
		NAVIGATION	
************************************/

#navigation {
	position:				absolute;
	top:					87px;
	left:					565px;
	}
	
#menu li {
	display:				block;
	height:					20px;
	line-height:			20px;
	text-indent:			20px;
	position:				relative;
	z-index:				25;
	}
	
#menu li a,
#menu li a:visited {
	color:					#fff;
	text-decoration:		none;
	}	
	
#menu li a:hover,
#menu li.active a.menu-link,
#menu li.active a.menu-link:visited,
#menu li.active a.menu-link:hover {
	color:					#8f6c57;
	font-weight:			bold;
	}

#menu li ul.sub {
	width:					230px;
	background:				#000;
	border:					1px solid #fff;
	position:				absolute;
	top:					0;
	left:					-220px;
	z-index:				30;
	}

#menu li ul.sub li {
	padding:				0 5px;
	text-align:				right;
	width:					95%;
	}

#menu li ul.sub li.active a.sub-link,
#menu li ul.sub li.active a.sub-link:visited,
#menu li ul.sub li.active a.sublink:hover {
	color:					#8f6c57;
	font-weight:			bold;
	}

/**
		LINKs		
************************************/

a.back-link,
a:visited.back-link {
	color:#fff;
	text-decoration:underline;
	display:block;
	padding:10px 0;
	}
	
a:hover.back-link {
	color:					#8f6c57;
	font-weight:			bold;
	text-decoration:none;
	}
	
a.flash-link,
a:visited.flash-link {
	color:#fff;
	text-decoration:none;
	padding-right:5px;
	}
	
a:hover.flash-link {
	color:					#8f6c57;
	font-weight:			bold;
	text-decoration:underline;
	}
	
/**
		NEWS BLOCK		
************************************/

#news-block {
	width:					180px;
	height:					70px;
	background:				#8f6c57;
	position:				absolute;
	left:					555px;
	top:					435px;
	}
	
#news-block a,
#news-block a:visited {
	display:				block;
	line-height:			20px;
	font-weight:			bold;
	color:					#fff;
	text-decoration:		none;
	font-size:				13px;
	position:				relative;
	left:					20px;
	top:					15px;
	width:					150px;
	}
	
#news-block a:hover {
	text-decoration:		underline;
	}

/**
		CONTACT FORMULIER
************************************/

#contact-info {
	margin:15px 0;
	line-height:20px;
	}

#contact-form {
	width:					400px;
	position:				relative;
	}

#contact-form .form-spacer {
	margin-bottom:			10px;
	clear:					left;
	}
	
#contact-form .form-spacer span {
	display:				block;
	float:					left;
	width:					120px;
	line-height:			20px;
	font-weight:			bold;
	}

#contact-form .form-spacer span.checkbox-label {
	width:					200px;
	display:				block;
	line-height:			14px;
	}

#contact-form .form-spacer .text-input,
#contact-form .form-spacer .textarea-input {
	width:					200px;
	padding:				2px;
	font:					12px/12px Verdana, Arial, Helvetica, sans-serif;
	}
	
#contact-form .form-spacer .checkbox-input {
	float:					left;
	position:				relative;
	left:					-5px;
	top:					-2px;
	}

#contact-form .form-spacer .submit-btn {
	display:				block;
	margin-top:				10px;
	width:					8em;
	height:					2.2em;
	padding-bottom:			2px;
	}

.contact-info {
	margin:10px 0;
	}

.error {
	font-weight:bold;
	color:#f04141;
	}
	
.success {
	font-weight:bold;
	color:#96e790;
	}
	
.contact-info ul {
	list-style:disc;
	padding-left:15px;
	}
	
.contact-info ul li {
	padding-bottom:5px;
	}

/**
		FOOTER		
************************************/

#footer {
	position:				absolute;
	left:					10px;
	top:					515px;
	color:					#000;
	text-transform:			uppercase;
	height:30px;
	width:100%;
	font-size:				8px;
	/*
	background:				url('../images/layout/footer-block.gif') no-repeat center left;
	*/
	background:				url('../images/layout/adresregel.jpg') no-repeat top left;
	
	}

.footer-spacer {
	padding:				0 0 0 4px;
	}
	
/**
		OVERIGE STYLES		
************************************/

#vpl-logo {
	position:				absolute;
	top:					300px;
	left:					585px;
	}

.clearer {
	width:					100%;
	height:					1px;
	clear:					both;
	}