@import url('css-reset.css');

html {
	height:				100%;
	width:				100%;
	}
	
body {
	height:				100%;
	width:				100%;
	background:			url('../images/layout/body-bg.gif') repeat top left;
	font:0.7em/1.4em "Trebuchet MS", Trebuchet MS, sans serif; 
	}

/**
*			TOP
**************************************/

#top {
	position:			absolute;
	top:				0;
	left:				0;
	width:				100%;
	background:			url('../images/layout/top-bg.gif') repeat-x top left;
	height:				13px;
	z-index:			100;
	}

#top img {
	position:			absolute;
	top:				0px;
	left:				50%;
	margin-left:		-457px;
	}

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

#wrapper {
	position: 			relative;
	width:				100%;
	min-height: 		100%;
	/*background:			url('../images/layout/wrapper-bg.gif') repeat-y top center;*/
	z-index:			10;
	}

* html #wrapper {
	height: 			100%;
	}

/**
*			CONTAINER
**************************************/

#container {
	padding-bottom:		65px;
	width:				915px;
	margin:				0 auto;
	}

/**
*			HEADER
**************************************/

#header {
	height:				232px;
	width:				100%;
	position:			relative;
	background:			url('../images/layout/header-bg.gif') repeat-x top left;
	}

#header-container {
	width:915px;
	position:relative;
	margin:0 auto;
	}

#header-container #logo {
	width:196px;
	height:227px;
	background:url('../images/layout/logo-devoted.gif') no-repeat top left;
	}
	
#header-container #page-image {
	width:719px;
	height:227px;
	position:absolute;
	left:196px;
	top:0;
	}
	
#header-container #page-image img {
	width:719px;
	height:227px;
	}

/**
*			COLUMNS
**************************************/

#left-column,
#center-column,
#right-column {
	float:				left;
	}
	
#left-column {
	width:				196px;
	}
	
#center-column {
	width:				719px;
	background:			url('../images/layout/wrapper-bg.gif') repeat top left;
	padding-bottom:25px;
	}

#right-column {
	/*width:				180px;*/
	
	}

/**
*			MENU
**************************************/

#menu {
	margin:				25px 10px 20px 10px;
	}

#menu li {
	margin-bottom:		10px;
	}
	
#menu li a,
#menu li a:visited {
	font-size:			17px;
	color:				#fff;
	text-decoration:	none;
	display:block;
	height:28px;
	line-height:28px;
	padding-left:15px;
	}
	
#menu li a:hover, 
#menu li.active a,
#menu li.active a:visited,
#menu li.active a:hover {
	background:#522f61;
	border:1px solid #fff;
	height:26px;
	line-height:26px;
	padding-left:14px;
	}

#left-contact {
	width:160px;
	margin-left:27px;
	margin-bottom:25px;
	color:#fff;
	font-size:110%;
	}
	
#left-contact h3{
	font-style:italic;
	font-weight:bold;
	color:#522f61;
	font-size:120%;
	}

#left-contact span {
color:				#b5a190;
}

/**
*			CONTENT
**************************************/

#content {
	width:				660px;
	margin:				10px auto 0 40px;
	color:				#fff;
	padding-top:20px;
	font-family:"Trebuchet MS", Trebuchet MS;
	}
	
#content h1 {
	
	font-size:			20px;
	font-style:			italic;
	font-weight:		bold;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:				#522f61;
	margin-bottom:		5px;
	}

#content h2 {
	font-size:			12px;
	font-weight:		bold;
	color:				#b5a190;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	margin-bottom:		3px;
	}
	
#content p {
	color:				#fff;
	width:440px;
	font-size:			11px;
	line-height:		18px;
	margin-bottom:		15px;
	}

#content a,
#content a:visited {
	font-size:			12px;
	color:				#3c7db6;
	text-decoration:	none;
	}
	
#content a:hover {
	text-decoration:	underline;
	}
	
#content ul,
#content ol {
	margin-left:		15px;
	list-style:			disc;
	color:				#fff;
	}
	
#content ol {
	list-style:			decimal;
	}

#content ul li,
#content ol li {
	margin-bottom:		5px;
	}

#content img {
	float:				right;
	clear:				both;
	margin-bottom:		20px;
	}

.content-block {
	width:				400px;
	padding:			10px 20px;
	border:				1px solid #fff;
	color:				#fff;
	margin:				15px 0;
	font-weight:		bold;
	}
	
.content-block h3 {
	font-size:			18px;
	font-weight:		bold;
	color:				#522f61;
	margin-bottom:		5px;
	}

.content-block h3.message {
	margin-bottom:		0;
	}
	
.content-block span {
	color:				#522f61;
	}


.content-block .block-left {
	width:				48%;
	float:				left;
	border-right:		1px solid #522f61;
	}
	
.content-block .block-right {
	width:				48%;
	float:				right;
	}
	
.block-clearer {
	width:				400px;
	clear:				left;
	height:				1px;
	}


/**
*			CONTACTFORMULIER
**************************************/

#content form {
	margin:				15px 0;
	}
	
#content form label {
	margin-bottom:		10px;
	display:			block;
	height:				26px;
	}
	
#content form label span {
	display:			block;
	width:				150px;
	font-size:			13px;
	float:				left;
	line-height:		22px;
	}

#content form label input.text-input {
	display:			block;
	float:				left;
	border:				1px solid #fff;
	background:			#522f61;
	width:				210px;
	padding:			4px;
	font-size:			12px;
	color:				#fff;
	height:				14px;
	}

#content form label textarea.textarea-input {
	display:			block;
	float:				left;
	border:				1px solid #fff;
	background:			#522f61;
	width:				210px;
	padding:			4px;
	font-size:			11px;
	color:				#fff;
	height:				90px;
	font-family:		"Trebuchet MS", Trebuchet MS, sans serif; 
	}

#content form div {
	clear:				both;
	margin-left:		150px;
	padding-top:		10px;
	}
	
#content form input.button {
	display:			block;
	float:				left;
	border:				1px solid #fff;
	background:			#522f61;
	width:				90px;
	padding:			2px;
	font-size:			12px;
	color:				#fff;
	height:				24px;
	margin-right:		15px;
	font-weight:		bold;
	}
	
/**
*			FOOTER
**************************************/
	
#footer {
	width:				100%;
	height:				65px;
	position: 			absolute;
	bottom: 			0;
	background:			#fff url('../images/layout/footer-bg.gif') repeat-x top left;
	}
	
#footer div {
	position:			absolute;
	top:				0px;
	left:				50%;
	margin-left:		-457px;
	height:				65px;
	width:				915px;
	text-align:			left;
	line-height:		65px;
	color:				#522f61;
	font-size:			11px;
	background:			url('../images/layout/footer-bg.gif') repeat-x top left;
	}
	
/**
*			OVERIGE
**************************************/

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