/* ====================================================
	Title:		Main Style Sheet - WeAgree
	Author:		Harm Wimmenhove
	Site:		http://www.siyou.nl
	Date:		2008.10.22
/* =Contents =======================================

=1: Layout
=2: Navigation
=3: Content
	=3.1: Maincontent
	=3.1.1: Forms
	=3.2: Sidebar
	=3.2.1: Sidebar book navigation 
	=3.3: Shortcuts
	=3.4: Sitemap
	=3.5: Footer
=4: Typography

==================================================== */
/* =1: Layout
==================================================== */
#container {
	width: 970px;
	margin: 18px auto 0 auto;
	padding: 14px 0 0 0;
	color: #fff;
	text-align: left;
	background: url(../img/header_tab.png) 0 0 no-repeat;
}
	#header { position: relative; height: 112px; background: #8d8c86 url(../img/bg_header.gif) 0 0 repeat-x; z-index: 100; }
		h1 a { width: 210px; height: 60px; float: left; margin: 16px 0 0 23px; background: url(../img/logo_weagree.png); }
		#flashnav { position: absolute; left: 0; top: 0; width: 100%; height: 112px; overflow: hidden; z-index: 100; }
		#flashhome { position: relative; }
/* =2: Navigation
==================================================== */	
		#navigation { position: absolute; left: 0; bottom: 0; width: 650px; padding: 0 0 0 320px; border-bottom: solid 23px #fff; }
			#navigation li { margin: 0 5px 0 0;  float: left; display: inline; }
				#navigation li a { width: 120px; height: 18px; padding: 2px 0 0 0; margin: 15px 0 0 0; color: #fff; text-align: center; text-decoration: none; display: block; }
				#navigation li a.active,
				#navigation li a:hover { height: 33px; margin: 0; }
				
		#about #navigation { border-color: #28b4e4; }
			#about #navigation a { background: #007bba; }
			#about #navigation a.active {background: #28b4e4;}	
			#about .submit { background: #28b4e4; }
			#about .list-reacties span a { color: #28b4e4; }
		#hyperlinks #navigation { border-color: #ff7e00; }
			#hyperlinks #navigation a { background: #ff5100; }
			#hyperlinks #navigation a.active { background: #ff7e00; }
			#hyperlinks .submit { background: #ff7e00; }
			#hyperlinks .list-reacties span a { color: #ff7e00; }
		#principles #navigation { border-color: #77c71e; }
			#principles #navigation a { background: #60ac00; }
			#principles #navigation a.active { background: #77c71e; }
			#principles .submit { background: #77c71e; }
			#principles .list-reacties span a { color: #77c71e; }
		#services #navigation { border-color: #ffd106; }
			#services #navigation a { background: #ebbe10; }
			#services #navigation a.active { background: #ffd106; }
			#services .submit { background: #ffd106; }
			#services .list-reacties span a { color: #ffd106; }
		#wizard #navigation,
		#home #navigation { border-color: #e20076; }
			#wizard #navigation a,
			#home #navigation a { background: #a00054; }
			#wizard #navigation a.active,
			#home #navigation a.active { background: #e20076; }
			#wizard .submit { background: #e20076; }
			#wizard .list-reacties span a { color: #e20076; }
			
		#language {
			position: absolute;
			top: 25px;
			right: 10px;
			color: #001e27;
		}	
			#language li { float: left; display: inline; margin: 0 5px 0 0; }
			#language a { text-decoration: none; color: #001e27; }
			#language a.active {color: #fff; }

/* =3: Content
==================================================== */			
	#content {  padding: 0 0 24px 0; min-height: 460px; background: #e0e0df url(../img/bg_content.png) 0 0 repeat-x; overflow: hidden; z-index: 1; }
		#home #content { background: #001e26 url(../img/home_bottom.gif) left bottom no-repeat; }
		#home #bottom { background: #001e26 url(../img/home_bottom.gif) left bottom no-repeat; }
		#content #sidebar,
		#content #maincontent { float: left; display: inline; }
	
	/* =3.1: Maincontent */	
	#maincontent { position: relative; width: 570px; padding: 34px 0 0 0; }
		#maincontent hr { width: 125px; height: 1px; margin: 10px 0 20px 0; border: 0; border-top: 1px solid #001e27; overflow: hidden; float: left; clear: left; }
		#maincontent p,
		#maincontent ul,
		#maincontent ol { margin: 0 0 20px 0; color: #001e27; clear: left;  }	
		
		#maincontent h3,
		#maincontent h4,
		#maincontent h5,
		#maincontent h6 { clear: left; margin: 0 0 10px 0; z-index: 20; }
		#maincontent h3 span,
		#maincontent h4 span {
			float: left;
			width: 45px; margin: 0 10px 0 0;
		}
		#maincontent h5, 
		#maincontent h6 { font-style: italic; } 
		#maincontent h6 { text-align: center; font-weight: normal; }
		#maincontent p.postdetails { padding: 0 0 10px 0; }
		#maincontent p.postdetails,
		.postdetails a { color: #6a645e; }
		.postdetails a:hover { text-decoration: none; }
		
		#maincontent .img {
			position: relative;
			top: -20px;
			margin: 0 0 0 40px;
			float: right;	
		}
		#maincontent ol li { 
			margin: 0 0 0 20px; 
			list-style: decimal; 
		}
		#maincontent ul li {
			margin: 0 0 0 15px;
			list-style: disc;
		}
		
		/* weblog-detail */
		.list-reacties span { color: #999;}
		.list-reacties span a,
		.list-reacties cite {
			font-weight: bold;
			font-style: normal;
			color: #77c71e;
		}
		.list-reacties li {
			margin: 0 0 7px 0;
			padding: 0 0 7px 0;
			border-bottom: 1px dotted #999;
		}
		.list-reacties span { font-weight: bold; }
		#maincontent .list-reacties p {
			margin: 5px 0;
			padding: 0;
		}
		.frm_react { padding: 10px 0; }
		.frm_react span { font-style: italic; }
		.frm_react span { color: #001e27; }
		
		#maincontent h2.we { position: absolute; z-index: 10; }
		#maincontent hr.we { margin: 40px 0 100px 0; }
		#maincontent .we-header { position: absolute; left: 0; top: 25px; height: 140px; z-index: 1; overflow: hidden; }
		
	blockquote { padding: 10px 20px; font-style: italic; color: #1b2832; border: 1px solid #fff; }
	#principles blockquote { margin: 0 0 20px 0; }
	
	/* treeview */
	#treeview {
		clear: left;
	}
		#maincontent #treeview h3 {
			font-size: 12px;
			font-weight: bold;
			margin: 0 0 0 5px;
			clear: none;
		}
		#maincontent #treeview ul {
			margin: 0;
		}
		#maincontent #treeview li,
		#maincontent fieldset li {
			list-style-type: none;
			margin-left: 0;
		}
		#treeview ul li,
		#treeview ul li a {
			color: #001e27;
		} 
	
		.treeview .hitarea {
			height: 16px;
			width: 16px;
			margin-left: -16px;
			float: left;
			cursor: pointer;
		}
		
		.treeview li { 
			margin: 0;
			padding: 3px 0pt 3px 16px;
		}
			.treeview ul ul li { padding: 3px 0;}
		
		#treecontrol { margin: 1em 0; display: none; }
		
		.treeview .hover { cursor: pointer; }
		
		.treeview li.collapsable, .treeview li.expandable { background: none; background-repeat: no-repeat; }
		
		.treeview .expandable-hitarea { background: url(../img/plus3.gif); }
		
		.treeview li.lastCollapsable,
		.treeview .collapsable-hitarea  { background: url(../img/min3.gif) 0 3px no-repeat; }
		
		.treeview .collapsable { background: url(../img/subs.gif) 0 2px no-repeat; }
		
		.treeview ul li .expandable-hitarea { background: url(../img/subs.gif) 0 -28px no-repeat; }
		.treeview ul li .collapsable-hitarea { background: url(../img/subs.gif) 0 4px no-repeat; }
		
		.treeview li.lastExpandable,
		.collapsable .hitarea  { background-position: 0px 0px; }
		
		.treeview li.lastExpandable,
		.treeview ul li.collapsable { background: none; }
		
		#maincontent .treeview ul li.collapsable { font-weight: bold; }
		#maincontent .treeview ul li.collapsable p { font-weight: normal; }
		
		/* book treeview */
		#sidebar .treeview .hitarea {
			position: absolute;
			height: 13px;
			width: 14px;
			margin-left: -13px;
		}
		#sidebar .treeview li { 
			margin: 0;
			padding: 0 0 0 16px;
		}	
		#sidebar .treeview ul li .expandable-hitarea { background: url(../img/subs.gif) 0 -28px no-repeat; }
		#sidebar .treeview ul li .collapsable-hitarea { background: url(../img/subs.gif) 0 4px no-repeat; }
		
		#sidebar .treeview li.lastExpandable,
		#sidebar .collapsable .hitarea  { background-position: 0px 0px }
		
		#sidebar .treeview li.lastExpandable,
		#sidebar .treeview ul li.collapsable { background: none; }
		
		
		/* =3.1.1: Forms */
		form { clear: left; margin: 0 0 20px 0; }
		form ul li { margin: 0 0 5px 0; }
		label { width: 100px; color: #001e27; float: left; display: inline; }
		.lbl { color: #333; float: none; }
		.tf, select { width: 250px; }
		.ta { width: 250px; height: 100px; }
		.submit { margin: 10px 0 0 100px; padding: 2px 4px; color: #fff; border: 0; display: block; cursor: pointer; float: left;  }
		
	/* =3.2: Sidebar */	
	#sidebar { width: 133px; margin: 15px 40px 0 36px; padding: 64px 0 0 0; }
		#about #sidebar { background: url(../img/icon_about.png) 40px 7px no-repeat;}	
		#hyperlinks #sidebar { background: url(../img/icon_hyperlinks.png) 40px 9px no-repeat;}
		#principles #sidebar { background: url(../img/icon_principles.png) 45px 3px no-repeat;}
		#services #sidebar { background: url(../img/icon_services.png) 38px 1px no-repeat;}
		#wizard #sidebar { background: url(../img/icon_wizard.png) 43px 3px no-repeat;}
	
		#sidebar ul { border-top: 1px solid #001e27; text-align: center; }		
			#sidebar li { position: relative; list-style: none; }
			#sidebar li a { width: 115px; padding: 6px 9px; color: #001e27; text-decoration: none; border-bottom: 1px solid #001e27; display: block; }
			#sidebar li span { position: absolute; right: 0px; top: 9px; width: 10px; height: 10px;  display: block; cursor: pointer; }
			#sidebar li a:hover { color: #fff; }
			#sidebar li a.active { color: #fff; border-bottom: 1px solid #fff; }
			
			#content #sidebar li a.last { border: 0; }
			
			#sidebar li span { background: url(../img/subs.gif) 0 -30px no-repeat; }
			#sidebar li span.open { background: url(../img/subs.gif) 0 2px no-repeat; }
			
		
			#sidebar ul ul { border: 0; padding: 5px 0; border-bottom: 1px solid #fff; }
			#sidebar ul ul a { border: 0; padding: 2px 9px; }
			
			#sidebar ul.book ul a { padding-left: 2px; }
			
			#sidebar a.btn_home { width: 25px; height: 25px; margin: 10px auto; background: url(../img/btn_home.gif) 0 0 no-repeat; }
			
		/* =3.2.1: Sidebar book navigation */
		#container #sidebar ul.book {
			position: relative;
			left: -29px;
			width: 192px;
			overflow: hidden;
			border: 0;
			padding: 0;
			margin: 0 -29px 0 0;
			background: #a5a4a0;
		}
			#sidebar ul.book a { position: relative; width: 153px; padding: 0 5px 0 20px; text-align: left; color: #fff; font-weight: bold; font-size: 11px; }
				#sidebar ul.book a span { position: absolute;  left: 0px; top: 0px;  width: 15px; text-align: right; }		
						
				#sidebar ul li.part1top { padding-top: 26px; background: url(../img/book_top.gif) 0 0 no-repeat; }
				#sidebar ul li.part2top { border-top: 9px solid #a5a4a0; padding-top: 16px; background: url(../img/book_top2.gif) 0 0 no-repeat #8f8e88; }
				#sidebar ul li.part3top { border-top: 9px solid #8f8e88; padding-top: 16px; background: url(../img/book_top3.gif) 0 0 no-repeat; }
				
				#sidebar ul li.part1top,
				#sidebar ul li.part2top,
				#sidebar ul li.part3top {
					width: 192px; 
				}
				#sidebar li.part1top a,
				#sidebar li.part2top a,
				#sidebar li.part3top a { border: 0; }		
				
					/* plus and min for opening and closing book navigation parts 1 & 3 */
					#sidebar .part1 .expandable-hitarea,
					#sidebar .part3 .expandable-hitarea,
					#sidebar .part1top .expandable-hitarea,
					#sidebar .part3top .expandable-hitarea { 
						background: #a5a4a0 url(../img/plusmin1.gif) 0px 1px no-repeat; 
					}
					
					#sidebar .part1 .collapsable-hitarea,
					#sidebar .part3 .collapsable-hitarea,
					#sidebar .part1top .collapsable-hitarea,
					#sidebar .part3top .collapsable-hitarea { 
				 		background: #a5a4a0 url(../img/plusmin1.gif) 0px -38px no-repeat;
					}	
					
					/* plus and min for opening and closing book navigation part 2 */
					#sidebar .part2 .expandable-hitarea,
					#sidebar .part2top .expandable-hitarea { 
						background: #8f8e88 url(../img/plusmin2.gif) 0px 1px no-repeat; 
					}					
					#sidebar .part2 .collapsable-hitarea,
					#sidebar .part2top .collapsable-hitarea { 
						background: #8f8e88 url(../img/plusmin2.gif) 0px -38px no-repeat; 
					}
						/* sub subs */
						#sidebar ul.book ul { border: 0; }
							#sidebar ul.book .part2,
							#sidebar ul.book .part2 ul,
							#sidebar ul.book .part2top ul {
								background-color: #8f8e88;
							}
							#sidebar ul.book ul a { color: #001e27; font-weight: normal; }
							#sidebar ul.book ul ul li { padding: 2px 0; }
							#sidebar ul.book ul ul a { font-style: italic; }
			
						#sidebar .part1 ul a.closed, 
						#sidebar .part2 ul a.closed,
						#sidebar .part3 ul a.closed,
						#sidebar .part1top ul a.closed,
						#sidebar .part2top ul a.closed,
						#sidebar .part3top ul a.closed { background: url(../img/subsubs.gif) 20px 0px no-repeat; }
												
						#sidebar .part1 ul a.open, 
						#sidebar .part2 ul a.open,
						#sidebar .part3 ul a.open,
						#sidebar .part1top ul a.open,
						#sidebar .part2top ul a.open,
						#sidebar .part3top ul a.open { background: url(../img/subsubs.gif) 20px -240px no-repeat; }		
			
			#sidebar li.bookbottom { width: 192px; height: 10px; background: url(../img/book_bottom.gif); }
	
	/* =3.3: Shortcuts */	
	#shortcuts {
		float: right;
		width: 133px;
		margin: 53px 26px 0 0;
	}
		#shortcuts h4 {
			width: 95px;
			margin: 25px 0 10px 0;
			padding: 0 0 10px 0;
			border-bottom: 1px solid #001e27;	
		}
		#shortcuts li {
			margin: 0 0 5px 0;
		}
			#shortcuts li a {
				text-decoration: none;
			}
			#shortcuts li a:hover {
				text-decoration: underline;
			}
		a.rss {
			height: 17px;
			padding: 1px 0 0 23px;
			color: #2f2f2e;
			text-decoration: none;
			background: url(../img/rss.png) 0 0 no-repeat;
			display: block;
			font-size: 11px;
		}
	/* =3.4: Sitemap */	
	#sitemap { clear: left; }	
		#maincontent #sitemap li { list-style: none; }
		#sitemap .mainlevel { margin: 15px 0 0 0; }
		#sitemap li,
		#treeview li { list-style: none; margin-left: 0; }
		#sitemap li a { line-height:1.3em; }
			/* sublevel */
			#sitemap ul li a { padding: 0 0 0 20px; }
			#sitemap ul li a.last { background: url(../img/sitemap_sublast.gif) no-repeat 2px 4px; }
			#sitemap ul li a { background:url(../img/sitemap_sub.gif) no-repeat 2px 4px; }
				/* sub subs */
				#sitemap ul ul { margin: 0 0 3px 0; }
				#sitemap ul ul li { margin: 0 0 0 20px; }
	
		/* sitemap op home */
		#home #content {
			text-align: center;
		}
		#home #sitemap {
			width: 800px;
			margin: 40px 0 0 110px;
			text-align: left;
		}
		#home #sitemap a { color: #fff; }
			
	
		.ico_0 { padding: 70px 0 0; background: url(../img/ico_we.jpg) center top no-repeat; }
		.ico_1 { padding: 70px 0 0; background: url(../img/ico_wizard.jpg) center top no-repeat; }
		.ico_2 { padding: 70px 0 0; background: url(../img/ico_services.jpg) center top no-repeat; }
		.ico_3 { padding: 70px 0 0; background: url(../img/ico_principles.jpg) center top no-repeat; }
		.ico_4 { padding: 70px 0 0; background: url(../img/ico_links.jpg) center top no-repeat; }								
		
		#home #sitemap li {
			width: 130px; 
			margin: 0 30px 0 0;
			float: left; 
			display: inline;
		}
			#home #sitemap li a {
				font-size: 1.5em; 
				height: 75px;
				font-weight: normal;
				color: #66787d;
				text-decoration: none;
				text-align: center;
				display: block;
			}
				#home #sitemap li a:hover {
					color: #fff;
				}
				#home #sitemap ul {
					border-top: 1px solid #66787d;
				}
					#home #sitemap ul ul {
						display: none;
					}
				#home #sitemap ul li a {
					height: auto;
					color: #66787d;
					font-size: 12px;
					padding: 5px 0;
					display: block;
					background: none;
					font-weight: normal;
					border-bottom: 1px solid #66787d;
				}
				#home #sitemap ul li a:hover {
					color: #fff;
					border-bottom: 1px solid #fff;
				}
				

				
	/* =3.5: Footer */		
	#bttm { width: 970px; height: 12px; background: url(../img/bottom.png); }
	#footer { width: 970px; margin: 10px 0; padding: 0 0 0 2px; text-align: center;  }
		#footer li.first { background: none; padding: 0; }
		#footer li { color: #a6b0b4; display: inline; margin: 0 7px 0 0; padding: 0 0 0 9px; background: url(../img/li_footer.gif) 0 3px no-repeat; }
		#footer a { color: #a6b0b4; text-decoration: none; }
		#footer a:hover { text-decoration: underline; }
	
	
/* =4: Typography
==================================================== */	
#maincontent .list-reacties span,
#maincontent .frm_react span { font-size: 0.9em; }
#footer { font-size: 1.1em; line-height: 1.2em; }
#content,
#header { 
	font-size: 1.2em;
	line-height: 1.2em;
}
#maincontent h5 { font-size: 1.2em; }
#maincontent p,
#maincontent li,
#maincontent blockquote { line-height: 1.4em; }
h3,
h4 { font-size: 1.5em; line-height: 1.4em; font-weight: normal; }	
/* 25px / 12 = 2.083 */
h2 { font-size: 2.1em; line-height: 1.4em; font-weight: normal; }
		
.submit { font-size: 1.1em; line-height: 1.4em; font-weight: bold; }		

/* hide */
.hide { display: none; }
h1 a,
.btn_home {
	display: block;
	text-indent: -9999px;
	overflow: hidden;
}

/* =5: Popup */
#popup {padding:25px 25px 0 25px; font-size:12px; line-height:16px; background:#3e3e3e;}
#popup #container span {padding:5px 0 5px 0; float:left; clear:both; width:100%;}
#popup #container {background:none; width:auto; padding:0; margin:0;}
#popup #container form{display:inline-block; margin:0 0 10px 0;} 
#popup #container label {color:#fff;float:left; padding:4px 0 0 0;}
#popup #container input {float:right;}
#popup #container .forminput {width:300px; float:right;}
#popup #container .forminfo {font-size:11px;}
#downloadformContainer {padding:15px 15px 5px 15px; float:left; margin:20px 0 20px 0; background:#8b8983 url('../img/bg_header.gif') repeat-x; width:440px; background-position:bottom left;}
#downloadformContainer ul{ display:inline-block;}
#downloadformContainer ul li{display:inline-block; width:100%; padding:0 0 5px 0;}
#popup #submit {background: url('../img/Clause_InsertBelow.png') no-repeat; background-position:top right; padding:0 30px 2px 10px; margin:0 10px 0 0; border:0; color:#fff; cursor:pointer; width: 90px; height:22px; font-weight:bold; border:1px solid #fe0176;}
#popup #cancel {background: url('../img/TCT_Clear.png') no-repeat; background-position:top right; padding:0 30px 2px 10px; margin:0; border:0; color:#fff; cursor:pointer; width: 90px; height:22px; font-weight:bold; border:1px solid #fe0176; }
#popup #return {background: url('../img/arrow_left.jpg') no-repeat; background-position:top right; padding:0 30px 2px 10px; margin:0; border:0; color:#fff; cursor:pointer; width: 90px; height:22px; font-weight:bold; border:1px solid #fe0176; float:left !important;}