/* --------------------------------------------------------------------------------------------------------
html en body
---------------------------------------------------------------------------------------------------------*/

html {
	/* voor het tonen van de (non)actieve scrolbar, zodat de pagina niet verschuift */
	height: 					100%;
	overflow: 				-moz-scrollbars-vertical; 
}

body {
	background:				#CCC url("../images/bg.gif") scroll 0px 0px;
	text-align:				center; /* voor het centreren van de pagewrapper tov de achtergrond */
	margin:					0px; /* de afstand tussen de randen van browser en de pagewrapper */
	font:						normal 0.7em/150% Trebuchet MS, Arial, Verdana, Tahoma; /* geldt voor de hele pagina */
}


/* --------------------------------------------------------------------------------------------------------
pagewrapper (de ruimte waarin alle onderdelen komen binnen de achtergrond)
---------------------------------------------------------------------------------------------------------*/

div.container {
	margin:					auto; /* voor het centreren van de pagewrapper tov de achtergrond in FF */
	width:					984px; /* dit is de breedte van de pagewrapper, voor 800x600 -> 760px, voor 1024x768 -> 984px */
	height:					100%;
	border:					solid #808080 1px;
	background:				transparent url("../images/bg_content.gif") scroll 0px 40px;
	text-align:				left; /* zonder deze zou alles IN de pagewrapper ook gecentreerd worden */
	margin-top:				20px;
}

/* --------------------------------------------------------------------------------------------------------
Landing en main
---------------------------------------------------------------------------------------------------------*/

div.main {
	padding: 				20px 0px 50px 35px;
	height: 					100%;
	width: 					540px;
}

div.introbox {
	border: 					solid #CCC 1px; 
	margin:					0 15px 15px 0;		
	width: 					163px;
	height: 					140px;
}

div.introbox-header {
	height: 					24px;
	background-image: 	url(../images/bg_introheader.gif);
	padding: 				2px 0 0px 10px;
}

div.introbox-text {
	padding:		 			0 10px 0 10px;
}

div.overallmain {
	width: 					779px;
}

div.footer {
	clear: 					both;
	padding:					0px 30px 5px 30px;
	color:					#A7A386;
	font-size:				10px;
}

div.form-white {
	width: 					460px;
	padding: 				20px 20px 20px 20px;
}

/* --------------------------------------------------------------------------------------------------------
secnav header
--------------------------------------------------------------------------------------------------------*/

div.secnav a {
	border-right: 			solid #dcd9d3 1px;
	padding:		 			0 10px 0 35px;
}

div.secnav {
	padding:		 			20px 20px 0 0;
	height: 					23px;
}

div.header {
	border-bottom: 		solid #808080 1px;
	background-color: 	#FFF;
}


/* --------------------------------------------------------------------------------------------------------
headings
---------------------------------------------------------------------------------------------------------*/

h1, h2, h3, h4, h5, h6 {
	
}

h1 {
	font-size: 				2.7em;
	font-weight:			normal;
	color:					#b5dc11;
	padding-bottom:		0px;
}

h2 {
	font-size:				11px;
	line-height:			11px;
	font-weight:			bold;
	color:					#000;
	padding-bottom:		0px;
}

h3, h4, h5, h6 {
	font-size: 				1em;
	font-weight: 			bold;
	margin: 					0;
}

p.textright {
	text-align:				right;
	padding:					0 5px 0 0;
}

p.textleft {
	text-align:				left;
	padding:					0 0 0 5px;
}

/* --------------------------------------------------------------------------------------------------------
buttons met plaatje ervoor (herbruikbare elementen)
---------------------------------------------------------------------------------------------------------*/

a.globale {
	background: 			transparent url("../images/intro_globale.gif") no-repeat 0px 0;
	padding-left: 			30px;
	text-decoration:		none;
}

span.language {
	background: 			transparent url("../images/ic_taal.gif") no-repeat 10px 0;
	padding:		 			0 10px 0 35px;
}

a.logout {
	background: 			transparent url("../images/ic_afmelden.gif") no-repeat 10px 0;
}

a.close {
	margin-right:			20px;
}

a.email {
	background: 			transparent url("../images/ic_mail.gif") no-repeat 10px 0;	
}

a.login {
	background: 			transparent url("../images/ic_inloggen.gif") no-repeat 0 0;
	padding:		 			0 0 0 20px;
	font-size: 				1.2em;
}

a.cancel {
	background: 			transparent url("../images/ic_annuleer.gif") no-repeat 0 0;
	padding:		 			0 0 0 20px;
}

a.edit {
	background: 			transparent url("../images/ic_bewerken.gif") no-repeat 0 center;
	padding:		 			0 0 0 18px;
	margin-right: 			20px;
	float: 					right;
}

a.save {
	background: 			transparent url("../images/ic_opslaan.gif") no-repeat 0 0;
	padding:		 			0 0 0 20px;
}

a.saveandnew {
	background: 			transparent url("../images/ic_opslaannieuw.gif") no-repeat 0 0;
	padding:		 			0 0 0 20px;
}

a.account-add {
	background: 			transparent url("../images/ic_acctoevoegen.gif") no-repeat 0 0;
	padding:		 			0 0 0 20px;
}

a.remove {
	background: 			transparent url("../images/ic_verwijder.gif") no-repeat 0 0;
	padding:		 			0 0 0 20px;
}

a.help {
	background: 			transparent url("../images/ic_hulp.gif") no-repeat 0 0;
	padding:		 			0 0 0 20px;
}

a.previous {
	background: 			transparent url("../images/pijltje_links.gif") no-repeat 0 0;
	padding:		 			0 0 0 12px;
	margin:					0 10px 0 0;
}

a.next {
	background: 			transparent url("../images/pijltje_rechts.gif") no-repeat right 0;
	padding:		 			0 12px 0 0;
	margin:					0 0 0 10px;
}

div.buttonbox {
	padding: 				10px 0;
	margin:					5px 0;
}

div.buttonbox a {
	margin: 					0 0 0 20px;
}

div.clickpath a {
	margin: 					0 2px;
	padding:					0 2px;
}

/* --------------------------------------------------------------------------------------------------------
basis, onderstaande geldt voor alle benoemde tags in het html document
---------------------------------------------------------------------------------------------------------*/

.test {
	border: #000 solid 1px;
	margin: 0;
}

table {
	border:					0;
	border-collapse:		collapse;
	margin:					0;
	padding:					0;
}

td {
	vertical-align:		top;
}

.alignleft {
	text-align: 			left;
	padding: 				0 0 0 5px;
}

.alignright {
	text-align:				right;
	padding:					0 5px 0 0;
}

form {
	margin:					0;
	padding:					0;
	display:					inline;
}

img {
	border:					0;
	padding: 				0;
	margin: 					0;
}

img.search {
	vertical-align: 		bottom;
}

ul {
	/* dit zorgt ervoor dat de lijst in FF en IE er hetzelfde uitziet en netjes links aan de pagina lijnt, zonder inspringen */
	margin:					0 0 0 15px;
	padding:					0;
}

a, a:visited {
	color:					#000;
	font-weight:			normal;
	text-decoration:		underline;
}

a:hover, a:active {
	color:					#000;
	font-weight:			normal;
	text-decoration:		underline;
}

select, textarea, input, button {
	font:						normal 1em Trebuchet MS, Arial, Verdana, Tahoma;
}

/* --------------------------------------------------------------------------------------------------------
basis layout hulpmiddelen
---------------------------------------------------------------------------------------------------------*/

.left {
	float:					left;
}

.right {
	float:					right;
}

.wrapper {
	width:					100%;
	overflow:				hidden;
}

.clear {
	clear:					both;
}

.relative {
	position: 				relative;
}

.absolute {
	position: 				absolute;
}

/* --------------------------------------------------------------------------------------------------------
formulier elementen
---------------------------------------------------------------------------------------------------------*/

div.form-header-true {
	background-image: 	url("../images/bg_formulier_true.gif");
	width: 					520px;
	height:					23px;
	border-bottom: 		solid #bfbfbf 1px;
	border-top: 			solid #bfbfbf 1px;
	padding: 				0 0 0 20px;
	line-height: 			23px;
}

div.form-header-false {
	background-image: 	url("../images/bg_formulier_false.gif");
	width: 					520px;
	height:					23px;
	border-bottom: 		solid #bfbfbf 1px;
	border-top: 			solid #bfbfbf 1px;
	padding: 				0 0 0 20px;
	line-height: 			23px;
}

/* --------------------------------------------------------------------------------------------------------
alsosee balk elementen
---------------------------------------------------------------------------------------------------------*/

div.alsosee {
	width:					155px;
	padding: 				20px 0 0 20px;
}

div.alsosee-elements {
	padding:					10px 0 10px 0;
	border-bottom:			solid #dcd9d3 1px;
}

h3.favorite {
	background: 			transparent url("../images/ic_favoriet.gif") no-repeat 0 0;
	padding:		 			0 0 0 25px;
}

h3.addaccount {
	background: 			transparent url("../images/ic_pagina.gif") no-repeat 0 0;
	padding:		 			0 0 0 25px;
}

div.alsosee ul {
	padding: 				10px 0 10px 30px;
}

/* --------------------------------------------------------------------------------------------------------
primary navigation
---------------------------------------------------------------------------------------------------------*/

div.mainnav {
	width:					200px;
	border-right: 			solid #808080 1px;
}


ul.mainnav, ul.subnav {
	margin:					0;
	padding:					0;
	list-style-type:		none;
}

ul.mainnav a, ul.mainnav a:visited {
	line-height: 			24px;
	padding:					0 32px;
	height:					24px;
	text-decoration: 		none;
	color:					#50470d;
	display:					block;
	background:				transparent url("../images/nav_false.gif") no-repeat scroll 0 0;
}

ul.mainnav a:hover {
	color:					#50470d;
	background:				transparent url("../images/nav_true.gif") no-repeat scroll 0 0;
	text-decoration:		underline;
}

ul.mainnav a.true, ul.mainnav a.true:visited {
	line-height: 			24px;
	padding:					0 32px;
	height:					24px;
	text-decoration:		none;
	color:					#50470d;
	display:					block;
	background:				transparent url("../images/nav_true.gif") no-repeat scroll 0 0;
}

/*subnav*/
ul.subnav {
	background: 			#f7fbff url("../images/sub_bg.gif") no-repeat scroll 0 0;
	border-bottom: 		solid #808080 1px;
}

ul.subnav a, ul.subnav a:visited {
	line-height: 			24px;
	padding:					0px 0 0px 45px;
	height:					24px;
	color:					#000;
	display:					block;
	text-decoration: 		none;
	background:				none;
}

ul.subnav a:hover {
	text-decoration:		underline;
	color:					#50470d;
	background:				none;
}

ul.subnav a.true, ul.subnav a.true:visited {
	font-weight: 			bold;
	padding:					0px 0 0px 45px;
	background:				none;
}

/* --------------------------------------------------------------------------------------------------------
adminoverzicht
---------------------------------------------------------------------------------------------------------*/

div.main-large {
	padding: 				20px 35px 0 35px;
	height: 					100%;
	width: 					710px;
	padding-bottom: 		50px;
}


table.table1 th {
	background: 			#f7f6f5 url(../images/bg_formulier_false.gif) repeat-x left bottom;
	border-top:				solid #DCD9D3 1px;
	text-align: 			left;
	padding-left: 			5px;
	margin:					10px 0;
}

tr.collapseheader {
	background: 			#d7ebff url(../images/bg_formulier_true.gif) repeat-x left bottom;
	border-top:				solid #DCD9D3 1px;
}

tr.table-linewhite {
	background-color: 	#FFF;	
}

tr.table-linegrey {
	background-color: 	#fafaf9;
}


.table-form1 {
	width:					100%;
}

.table-form0 input.textfield {
	width:					250px;
}

.table-form1 input.textfield {
	width:					250px;
}

table.table1 td, th {
	padding:					5px;
	border-bottom:			solid #DCD9D3 1px;
}

table.table2 td, th {
	padding:					5px 0px 5px 10px;
	border-bottom:			solid #e5e6e5 1px;
	background-color: 	#f3f9ff;
}

table.table2 {
	border-bottom:			solid #e5e6e5 3px;
}

table.table2 tr.rb0 td {
	background-color: 	#F9FCFF;
}

table.table3 td, th {
	padding:					3px 5px 3px 20px;
}

table.table3 {
	margin:					10px 0;
}

table.table3 input.textfield {
	width:					200px;
}

/* --------------------------------------------------------------------------------------------------------
login scherm
---------------------------------------------------------------------------------------------------------*/

div.login {
	margin:					auto;
	width: 					450px;
	background-color: 	#FFF;
	border:					solid #808080 1px;
	text-align:				left;
	margin-top:				100px;
	padding: 				30px;
}

div.logintext {
	padding-top:			20px;
}

div.line-above {
	margin-top: 			30px;
	padding:					5px 0 0 0;
	border-top:				solid #dcd9d3 1px;
}


/* --------------------------------------------------------------------------------------------------------
popup
---------------------------------------------------------------------------------------------------------*/

div.popup {
	margin:					auto; /* voor het centreren van de pagewrapper tov de achtergrond in FF */
	width:					500px; /* dit is de breedte van de pagewrapper, voor 800x600 -> 760px, voor 1024x768 -> 984px */
	background-color: 	#FFF;
	border:					solid #808080 1px;
	text-align:				left; /* zonder deze zou alles IN de pagewrapper ook gecentreerd worden */
	margin-top:				20px;
}

div.popup-header {
	background-color:		#d7ebff;
	height:					30px;
	border-bottom: 		solid #bfbfbf 1px;
	padding: 				5px 0 0 20px;
	line-height: 			23px;
}

div.popup-content {
	padding:					0 20px 20px 20px;
}

/* -----uitklap gesorteerd-----------------------------------------------------------------*/
td.sorted {
	background-color:		#f3f9ff;
}

td.sorted0 {
	background-color:		#f7f8fa;
}

table.table1 th.sorted {
	background: 			#d7ebff url(../images/bg_formulier_true.gif) repeat-x 0 0;
}





