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

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


html, body {
	height: 			100%;
}

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

body {
	background:			#A0A0A0 url(../images/bg_content.jpg) top left no-repeat;
	font-family: 		Arial, "Trebuchet MS", Verdana, Helvetica, sans-serif !important;
	font-size: 			62.5%; /* 62.5%, standaard font grootte is nu 10px, dus 1.2em = 12px */
	font-weight:		normal;
	color: 				#000;
	line-height: 		140%; /* standaard: 140% */
	margin: 			0px;
	padding: 			0px;
}

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


#header {
	height:				150px;
}

#content {
	float:				left;
	height: 			auto !important;
	height: 			100%;
	margin:				0;
}


#wrapper {
	min-height: 		100%;
	height: 			auto !important;
	height: 			100%;
	margin: 			0 auto -155px auto; /* the bottom margin is the negative value of the footer's height */
}

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





/* ################################################################################# */
/*                                                                                   */
/*                                   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, h2, h3, h4, h5, h6 {
	font-family: 		Arial,"Trebuchet MS", Verdana, Helvetica, sans-serif !important;
	margin: 			0;
	padding: 			0;
	letter-spacing: 	0;
	border-bottom: 		0 !important;
}

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

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

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

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

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

p {
	max-width:			330px;
	font-size:			1.2em;
	line-height:		1.6em;
	margin:				0 0 15px 0;
}

ul {
	margin:				0 0 15px 0;
}

ul ul {
	margin:				0 0 0 15px;
}

li {
	max-width:			330px;
	font-size:			1.2em;
	line-height:		1.6em;
}

li li {
	max-width:			330px;
	font-size:			1.0em;
	line-height:		1.6em;
}

td {
	font-size:			1.2em;
}

input, textarea {
	border:				1px solid #999;
}

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

#leftborder {
	float:				left;
	height:				100%;
	width:				80px;
}

/* ################################################################################# */
/*                                                                                   */
/*                             NAV	  STYLES                                         */
/*                                                                                   */
/* ################################################################################# */

#navigatie {
	float:				left;
	width:				200px;
}

ul.nav {
	margin:				35px 0 0 0;
}

ul.nav li {
	margin:				0 0 5px 0;
}

/* ################################################################################# */
/*                                                                                   */
/*                             CONTENT STYLES                                        */
/*                                                                                   */
/* ################################################################################# */

p.small {
	font-size:			0.85em;
	padding:			50px 0 0 0;
}

#box_content li {
	background:			url(../images/bullit.jpg) left 5px no-repeat;
	max-width:			330px;
	font-size:			1.2em;
	padding:			0 0 5px 12px;
	line-height:		1.6em;
}

#box_content li li {
	background:			none;
	max-width:			330px;
	font-size:			1.0em;
	padding:			0;
	line-height:		1.6em;
}

.rood {
	color:				#FF0000;
}

#content_home, #content_quickscan, #content_admin, #content_comm, #content_trans, #content_diensten, #content_contact {
	float:				left;
	height: 			auto !important;
	height: 			100%;
	padding:			0 0 15px 0;
	margin:				0;
}

#content_home {
	background:		url(../images/bg_content_home.jpg) 131px 150px no-repeat;
}

#content_quickscan{
	background:		url(../images/bg_content_quickscan.jpg) 131px 150px no-repeat;
}

#content_admin {
	background:		url(../images/bg_content_admin.jpg) 131px 150px no-repeat;
}

#content_comm {
	background:		url(../images/bg_content_comm.jpg) 131px 150px no-repeat;
}

#content_trans {
	background:		url(../images/bg_content_trans.jpg) 131px 150px no-repeat;
}

#content_diensten {
	background:		url(../images/bg_content_diensten.jpg) 131px 150px no-repeat;
}

#content_contact {
	background:		url(../images/bg_content_contact.jpg) 131px 150px no-repeat;
}

#box_content {
	float:				left;	
}

#box_content_home, #clearer_home,
#box_content_quickscan, #clearer_quickscan,
#box_content_admin, #clearer_admin,
#box_content_comm, #clearer_comm,
#box_content_trans, #clearer_trans,
#box_content_diensten, #clearer_diensten,
#box_content_contact, #clearer_contact {
	padding:			35px 20px 20px 30px;
	width:				645px;
}
/*
#box_content_home, #box_content_quickscan, #box_content_admin, #box_content_comm, 
#box_content_trans, #box_content_diensten, #box_content_contact {
	min-height:			184px;
}

#clearer_home, #clearer_quickscan, #clearer_admin, #clearer_comm,
#clearer_trans, #clearer_diensten, #clearer_contact {
	margin:				0 0 0 280px;
	height:				100px;
}

#clearer_home {
	background:			url(../images/bg_home_but.jpg) top right no-repeat;
}

#clearer_quickscan {
	background:			url(../images/bg_quick_but.jpg) top right no-repeat;
}

#clearer_admin {
	background:			url(../images/bg_admin_but.jpg) top right no-repeat;
}

#clearer_comm {
	background:			url(../images/bg_comm_but.jpg) top right no-repeat;
}

#clearer_trans {
	background:			url(../images/bg_trans_bot.jpg) top right no-repeat;
}

#clearer_diensten {
	background:			url(../images/bg_diensten_but.jpg) top right no-repeat;
}

#clearer_contact {
	background:			url(../images/bg_contact_but.jpg) top right no-repeat;
}

#box_content_home {
	background:			url(../images/bg_home_top.jpg) bottom right no-repeat;
}

#box_content_quickscan {
	background:			url(../images/bg_quick_top.jpg) bottom right no-repeat;
}

#box_content_admin {
	background:			url(../images/bg_admin_top.jpg) bottom right no-repeat;
}

#box_content_comm {
	background:			url(../images/bg_comm_top.jpg) bottom right no-repeat;
}

#box_content_trans {
	background:			url(../images/bg_trans_top.jpg) bottom right no-repeat;
}

#box_content_diensten {
	background:			url(../images/bg_diensten_top.jpg) bottom right no-repeat;
}

#box_content_contact {
	background:			url(../images/bg_contact_top.jpg) bottom right no-repeat;
} */