/*------------------------------------------------------------------------------------
 * {bedrijfsnaam} Website Screen Presentation Layer
 * Author:	{naam}
 * Created:	{datum} 
 * Notes:	{notities, bugs, etc.}
-------------------------------------------------------------------------------------*/

/* ################################################################################# */
/*                                                                                   */
/*                                		BODY	                                     */
/*                                                                                   */
/* ################################################################################# */


/*------------------------------------------------------------------------------------
 * 
 * Alleen gebruiken wanneer de footer van de website altijd 
 * tegen de onderkant van de browser aan moet staan of onderaan de content

html, body {
	height: 			100%;
}

html {
	font-size: 			100%;
	overflow-y:			scroll;
}

-------------------------------------------------------------------------------------*/

html, body { margin: 0; padding: 0; height: 100%;}

html {
	overflow-y:			scroll;
}

body {
	background: 		#333 url(../images/bg_body.jpg) top left repeat-x;
	_background: 		#333;
	font-family: 		Verdana !important;
	font-size: 			62.5%; /* 62.5%, standaard font grootte is nu 10px, dus 1.2em = 12px */
	font-weight:		normal;
	color:				#333;
	line-height: 		140%; /* standaard: 140% */
	margin: 			0px;
	padding: 			0px;
}

/* ################################################################################# */
/*                                                                                   */
/*                                VLAKVERDELING                                      */
/*                                                                                   */
/* ################################################################################# */



#wrapper {
	background:			url(../images/bg_wrapper.png) top left repeat-y;
	_background:			url(../images/bg_wrapper_ie6.png) top left repeat-y;
	clear:				both;
	min-height: 		100%;
	height: 			auto !important;
	height: 			100%;
	margin: 			0 auto -82px auto; /* the bottom margin is the negative value of the footer's height */
	width:				900px;
}

#header {
	background:			#FF0000;
	clear:				both;
	margin:				0 auto;
}

#content {
	background:			#FFF;
	clear:				both;
	margin:				0 auto;
}

#footer {
	background:			url(../images/bg_footer.jpg) top left no-repeat;
	clear:				both;
	margin:				0 auto;
}

#footer, #footerclearer {
	height: 			82px; /* .footerclearer must be the same height as .footer */
	margin:				0 auto;
	width:				900px;
}




/* ################################################################################# */
/*                                                                                   */
/*                                   DEFAULT                                         */
/*                                                                                   */
/* ################################################################################# */

/*------------------------------------------------------------------------------------
 * 
 * Gebruik font-size alleen bij html tags en niet bij classes en id's,
 * dit mag slechts bij uitzondering.
 *
 * Deze eigenschap zal altijd blijven ondanks verdere classes
 * 		!important
 * IE 6 and below
 *     	* html {}
 * IE 7 and below
 *     	*:first-child+html {} * html {}
 * IE 7 only
 *     	*:first-child+html {}
 * IE 7 and modern browsers only
 *     	html>body {}
 * Modern browsers only (not IE 7)
 *     	html>/**/body {}
 /*
 * Recent Opera versions 9 and below
 *     html:first-child {}
 *
-------------------------------------------------------------------------------------*/

h1 {
	font-family:		"Century Gothic", Verdana;
	margin: 			0;
	padding: 			0;
	letter-spacing: 	0;
	border-bottom: 		0 !important;
}

h2, h3, h4, h5, h6 {
	font-family: 		Verdana, Helvetica, sans-serif !important;
	margin: 			0;
	padding: 			0;
	letter-spacing: 	0;
	border-bottom: 		0 !important;
}

button, input, option, select, textarea {
	font-family: 		Verdana, Helvetica, sans-serif !important;
	color:				#333333;
	letter-spacing: 	0;
	margin: 			0;
	padding: 			2px;
}

a {
	color: 				#434343;
	text-decoration:	underline;
}

a:active {
	color:				#EC79A2;
	text-decoration:	underline;
}

a:hover {
	color:				#EC79A2;
	text-decoration:	underline;
}

a:visited {
	color:				#EC79A2;
	text-decoration:	underline;
}

p {
	font-size:			1.1em;
	line-height:		1.5em;
	margin:				10px 0 0 0;
}

/* ################################################################################# */
/*                                                                                   */
/*                             CUSTOM STYLES                                         */
/*                                                                                   */
/* ################################################################################# */

h1 {
	color:				#333;
	font-size:			1.7em;
	text-transform:		uppercase;
}

h2 {
	color:				#E96593;
	font-size:			1.1em;
}

input {
	border:				1px solid #999;
	font-family: 		Verdana, Helvetica, sans-serif;
	font-size:			1.0em;
	padding:			2px;
	width:				270px;
}

input.button {
	width:				auto;
	border:				1px solid #666;
	height:				29px;
	padding:			0;
	width:				110px;
}

textarea {
	border:				1px solid #999;
	font-family: 		Verdana, Helvetica, sans-serif;
	font-size:			1.0em;
	padding:			2px;
	width:				270px;
}
/* ################################################################################# */
/*                                                                                   */
/*                             BOXEN		                                         */
/*                                                                                   */
/* ################################################################################# */

#box-left, #box-right {
	float:				left;
}

#box-left {
	_background-color:	#333;
	padding:			30px 0 0 0;
	text-align:			right;
	width:				247px;
}

#box-right {
	width:				653px;
}




/* ################################################################################# */
/*                                                                                   */
/*                             BOX-LEFT		                                         */
/*                                                                                   */
/* ################################################################################# */

img.logo {
	padding:  			0 20px 30px 0;
	_padding:  			0 0 30px 0;
}

ul.navigatie {
	margin:				30px 0 0 0;
}

.submenu {
	background-color:	#565656;
	border-left:		1px solid #373737;
	border-bottom:		1px solid #373737;
	color:				#a3a3a3;
	float:				right;
	text-align:			left;
	margin:				-3px 0 0 0;
	width:				209px;
}

.submenu a {
	color:				#a3a3a3;
	text-decoration:	none;
}

.submenu a:hover, .submenu ul li.active a {
	color:				#EC79A2;
	text-decoration:	none;
}

.submenu ul {
	padding:			10px 0 10px 20px;
}

.submenu ul li {
	display:			block;
	line-height:		2em;
}

a.menu {
	cursor:				pointer;
}

.nav {
}

/* ################################################################################# */
/*                                                                                   */
/*                             BOX-RIGHT	                                         */
/*                                                                                   */
/* ################################################################################# */

.topbar {
	background-color:	#434343;
	color:				#FFF;
	font-size:			1.0em;
	height:				20px;
	padding:			7px 20px 3px 0;
	text-align:			right;
	width:				582px;
}

.content {
	background:			url(../images/bg_content.png) top right repeat-y;
	_background:			url(../images/bg_content_ie6.png) top right repeat-y;
	padding:			30px;
	width:				552px;
	_margin-top:		-2px;
}

.content ul {
	margin:				10px 0;
}

.content li {
	background:			url(../images/bullit.jpg) left top no-repeat;
	font-size:			1.1em;
	padding:			0 0 8px 20px;
}

.content li.sub {
	background:			url(../images/bullit.jpg) left top no-repeat;
	font-size:			1.1em;
	margin:				0 0 0 20px;
}

.foto {
}

.content td {
	padding:			2px;
	font-size:			1.1em;
}

/* ################################################################################# */
/*                                                                                   */
/*                            FOOTER			                                     */
/*                                                                                   */
/* ################################################################################# */

#footer .bar1 {
	clear:				both;
	color:				#c2c2c2;
	text-align:			right;
	padding:			8px 65px 0 0;
}

#footer .footerright, 
#footer .footerleft {
	float:				right;
}

#footer .footerleft {
	text-align:			left;
	padding:			0 0 0 20px;
	width:				370px;
}

#footer .footerright {
}

img.certi {
	margin:				 0 10px;
}

.bar2 {
	padding:			30px 0 0 250px;
	width:				600px;
}

.bar2 ul.footernav {
	padding:			15px 0 0 20px;
}

.bar2 ul.footernav li {
	color:				#FFF;
	display:			inline;
	text-transform:		uppercase;
	padding:			0 10px 0 5px;
}

.bar2 a {
	color:				#FFF;
	text-decoration:	none;
}

.bar2 a:hover {
	color:				#EC79A2;
	text-decoration:	none;
}