/* - - - - - - - - - - - - - - - - - - - - -
__      __   _                _    _____ _                  _               _     
\ \    / /  | |              | |  / ____| |                | |             | |    
 \ \  / /_ _| |_   _  ___  __| | | (___ | |_ __ _ _ __   __| | __ _ _ __ __| |___ 
  \ \/ / _` | | | | |/ _ \/ _` |  \___ \| __/ _` | '_ \ / _` |/ _` | '__/ _` / __|
   \  / (_| | | |_| |  __/ (_| |  ____) | || (_| | | | | (_| | (_| | | | (_| \__ \
    \/ \__,_|_|\__,_|\___|\__,_| |_____/ \__\__,_|_| |_|\__,_|\__,_|_|  \__,_|___/

Title : 	Englishproof style sheet
Author : 	David Hund - Valued Standards (c) 2009
URL : 		http://www.englishproof.NL
Modified : 	2009-05-22 - SVN: $Revision$

onDeploy:	 Make sure to have some fancy deploy method that automagically combines
			and compresses CSS and JS files! Or use something manually: e.g.
			- http://developer.yahoo.com/yui/compressor/
			- http://www.cleancss.com/
- - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - - - - - - - - -
INDEX:
	!!:		DIAGNOSTICS (disable/remove these!)
	C1:		Reset, Fixes, etc
	C2:		Broad Generics (body etc)
	C3:		Typography
	C4:		Generic Classes
	C5:		Headers
	C6:		Hyperlinks
	C7:		Logo
	C8:		Images
	C9:		Lists
	C10:	Base Structure (Div frame)
	C11:	Tables
	C12:	Forms
- - - - - - - - - - - - - - - - - - - - - */

/* - - - - - - - - - - - - - - - - - - - - -
COLORS USED:
	- Green 		#7fb539
	- Dark Green	#62911e
	- Dark Grey		#818285
	- Black			#363636
- - - - - - - - - - - - - - - - - - - - - */


/* -----------------------------------------
	C1: RESET [start from scratch]
	http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/
----------------------------------------- */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0; padding: 0; border: 0; outline: 0; 
	font-size: 100%;
	_font-size: 100.01%;
	vertical-align: baseline;
	background: transparent;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}

ins {text-decoration: underline; background: #FFFFCC;}
del {text-decoration: line-through;}

/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}


/* -----------------------------------------
	1.1: GENERIC FIXES [fixes clearing issues with floats]
	http://www.positioniseverything.net/easyclearing.html
----------------------------------------- */
.clearfix:after {content:"."; display:block; height:0; clear:both; visibility:hidden;}
.clearfix {display:inline-block;}
/* Hide from IE Mac \*/
.clearfix {display:block;}
/* End hide from IE Mac */


/* -----------------------------------------
	SIMPLER CLEARING?
	1.2: GENERIC FIXES [fixes clearing issues with floats]
	http://www.quirksmode.org/css/clearing.html
----------------------------------------- */
/* 	We ASSUME some auto-fixes such as the nav UL and other horizontal lists */
.wrapper, .innerwrapper, .columnwrapper, 
#tools, #branding, nav, #content, #content article, #content aside, footer,
#tools ul, nav ul, footer ul,
/* 	Standard clearing class */
.newClearfix{
	overflow: auto; /* Good browsers */
	/* overflow: hidden; *//* If you need IE/MAC or when there's scrollbars due to extra padding/marging/borders etc: */
	width: 100%; /* IE 6+ -> hasLayout, Opera fix too? */
	/* zoom: 1; *//* IE: Avoid width issues? */
}


/* -----------------------------------------
	C2: GENERICS [Generic type, .classes, etc]
----------------------------------------- */
body{
	background: #FFF;
	color: #363636;
	font-size: 62.5%;
	font-family: Helvetica, Arial, sans-serif;
}


/* -----------------------------------------
	C3: TYPOGRAPHY
----------------------------------------- */
div{font-size: 1em;} /* = 10px */

p, dl, td, th, li, pre, code, kbd, samp, pre, tt, input{
	font-size: 1.4em; /* 14px */
}
p{line-height: 1.5em;margin-bottom: 1em;}

strong{font-weight: bold;}
em{font-style: italic;}
cite{font-style: italic;}
abbr, acronym { cursor: help; text-transform: uppercase; font-size: 85%; letter-spacing: .1em; border-bottom: 1px dotted #999;}
pre { white-space: pre; }
pre * { font-size: 1.4em; line-height: 1.5em; white-space: pre; }
blockquote { border-top: 1px solid #999; border-bottom: 1px solid #999; color: #666; }
blockquote > *:before { content: "\201C"; }
blockquote > *:after { content: "\201D"; }
q { quotes: "\201C" "\201D" "\2018" "\2019"; }

address,
blockquote{margin: 1.5em 0;font-size: 1.4em;line-height: 1.5em;}
blockquote p{margin: 1em;}

/* Cascading font size should remain same! */
td td,li ul li,li ol li,td p,blockquote p,dd p, li p,ul li ul li,ul li ul li p,ol li ol li,ol li ol li p{font-size: 1em!important; line-height: 1.5em!important;}

.hr, hr { 
	display: block;
	background: transparent url('../img/divider_horizontal.gif') repeat-x 0 0;
	margin: 2em 0 1.8em 0;
	color: #FFF;
	width: 100%;
	height: 8px;
	border: none;
}
.hr hr { display: none !important; }

/* -----------------------------------------
	C4: GENERIC CLASSES
----------------------------------------- */
.hidden{display:none;}
.accessible_hide{margin: 0;padding: 0; line-height: 0; font-size: 0; list-style-type: none; list-style-position: inside; text-indent: -999em;}

.alignRight{text-align: right;}
.alignLeft{text-align: left;}
.alignCenter{text-align: center;}
.floatRight{float: right;}
.floatLeft{float: left;}

.error{background: transparent;color: #CC3333;}
.success{background: transparent;color: #006600;}

.message{ 
	background-color: #FFFFCC; 
	color: #363636;
	border-top: 1px dotted #FF9900; 
	border-bottom: 1px dotted #FF9900; 
	padding: 0 .5em; 
	line-height: 2em;
	text-align: left;
}
	.message.error{
		background-color: #FFD0D0; 
		color: #CC3333;
		border-color: #CC3333; 
	}
	.message.success{
		background-color: #99EE99; 
		color: #006600;
		border-color: #006600; 
	}

/* Vcard */
.vcard{margin-bottom: 1.4em;overflow: auto;background: transparent url('../img/divider_horizontal_sidebar.gif') repeat-x 0 100%;}
.vcard h4{margin-top: 0;}
.vcard h4 a:link,.vcard h4 a:visited{text-decoration: none;}
.vcard h4 a:link span,.vcard h4 a:visited span{color: #818285;}
/* Hide */
.vcard .adr{display: none;}

.contentbox{
	overflow: auto;
	_zoom: 1;
	background: transparent url('../img/footer_bg.gif') repeat-x 0 0;
	padding: 10px;
	border-right: 1px solid #EEE;
	border-bottom: 1px solid #EEE;
	border-left: 1px solid #EEE;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}



/* -----------------------------------------
	C5: HEADERS
----------------------------------------- */
h1, h2, h3, h4, h5, h6{
	font-family: Helvetica, Arial, sans-serif;
	color: #363636;
	margin: 1em 0 .5em 0;
	line-height: 1.2em;
}
h1{font-size: 2.4em;color: #62911e;font-weight: normal;}
	#tagline{
		width: 800px;height: 90px;
		background: transparent url('../img/tagline.png') no-repeat 0 0;
		margin: 60px 0 0 0;
		line-height: 0;
		text-indent: -999em;
	}
	body.en #tagline{background: transparent url('../img/tagline_en.png') no-repeat 0 0;}
	body.de #tagline{background: transparent url('../img/tagline_de.png') no-repeat 0 0;}

h2{font-size: 1.8em;color: #62911e;font-family: Helvetica, arial sans-serif;font-weight: normal;}

 	/* H1 is styled the same as H2 in #content #main */
	#content #main h1,
	#content #main h2{font-size: 1.8em;padding-top: .2em;background: transparent url('../img/bullet_24.gif') no-repeat 0 0;padding-left: 30px;}
	
h3{font-size: 1.6em;font-weight: normal;}
	#secondary h3{font-size: 1.6em;}
h4{font-size: 1.4em;font-weight: normal;}
h5{font-size: 1.4em;}
h6{font-size: 1.4em;font-style: italic;font-weight: normal;}

/* #content h1,
#content h2{text-shadow: #FEFEFE 1px 1px;} */
#content h1:first-child,
#content h2:first-child,
#content h3:first-child{margin-top: 0;}

/* -----------------------------------------
	C6: LINKS
----------------------------------------- */
a:link,
a:visited,
a:hover,
a:active{
	color: #7fb539;
	text-decoration: underline;
	-webkit-transition: color .25s linear;
}
a:hover,
a:active{color: #363636;}

ul.horizontal li a:link, ul.horizontal li a:visited, ul.horizontal li a:hover, ul.horizontal li a:active{display: block;padding: 0.5em;}

footer ul a:link,footer ul a:visited{color: #999;}
footer ul a:hover{color: #666;}

/* BUTTONS */
a.button:link, a.button:visited, a.button:hover, a.button:active{
	display: inline-block;
	width: 240px;
	padding: 6px 0;
	color: #FFF;
	text-align: center;
	text-decoration: none;
	text-shadow: #666 1px 1px;
	background: transparent url('../img/button.gif') no-repeat 0 0;
}

a.button:hover, a.button:active{text-shadow: #666 -1px -1px;}

/* -----------------------------------------
	C7: LOGO & Quote
----------------------------------------- */
#logo-and-quote{}
#logo{float: left;width: 255px;margin-right: 60px;line-height: 0;}
.quote{color: #C0C0C0;font-size: 1.5em;margin-top: .7em;margin-right: 30px;text-shadow: #FFF 1px 1px;}
.author{color: #DDD;}

/* -----------------------------------------
	C8: IMAGES
----------------------------------------- */
#main p img{border: 2px solid #DDD;}

#main p img,
#main p img.right,
#main p img[align="right"]{float: right;margin: 0 0 1em 1em;}

#main p img.left,
#main p img[align="left"]{float: left;margin: 0 1em 0 0;}



/* -----------------------------------------
	C9: LISTS
----------------------------------------- */
ul, ol{ 
	list-style-type: disc; 
	list-style-position: outside; 
	margin: 2em 0;
	margin-left: 1.5em;
}
#main ul, #main ol{margin-left: 30px;margin-bottom: 3em;}
ol{list-style-type: decimal;}
	ul li, ol li{margin: .5em 0;line-height: 1.5em;}

		ul li ul, ol li ol, ul li ol, ol li ul{margin: .5em 2em;}
			ul li ul li, ol li ol li, ul li ol li, ol li ul li{margin: 0;}

/* horizontal lists */
ul.horizontal,
ol.horizontal,
/* 	We ASSUME the #tools nav and footer lists are horizontal, so we should not need to set a 'horizontal' class on those */
#tools ul,
nav ul,
footer ul{list-style-position: inside; list-style-type: none; margin: 0;}

	ul.horizontal li,
	ol.horizontal li,
	
	#tools ul li,
	nav ul li,
	footer ul li{float: left;display: inline-block; margin-right: 1em;}

	/* TOOLS: exception */
	#tools ul{float: right;width: auto;font-size: .8em;}
	#tools #skip a{visibility: hidden;}
	#tools ul li a{text-decoration: none;}
	#tools #deutsch a{background: transparent url('../img/de.png') no-repeat 100% 0;padding-right: 20px;}
	#tools #english a{background: transparent url('../img/gb.png') no-repeat 100% 0;padding-right: 20px;}
	#tools #english{border-left: 1px solid #CCC;padding-left: .8em;}
	#tools #nederlands{border-left: 1px solid #CCC;padding-left: .8em;}
	#tools #nederlands a{background: transparent url('../img/nl.png') no-repeat 100% 0;padding-right: 20px;}

footer ul,
nav ul{width: 960px; margin: 0 auto;}

footer ul{padding: 1.5em 0;}
footer ul li{border-right: 1px solid #999;padding-right: 1em;font-size: 1em;}

	/* -----------------------------------------
		NAVIGATION
	----------------------------------------- */
	li.last{border: none;}

	nav ul{width: auto;padding: 0 12px;}
		nav ul li{margin: 2px 1em 0 0;}
			
			nav ul li a:link,
			nav ul li a:visited,
			nav ul li a:hover,
			nav ul li a:active{
				display: block;
				padding: .5em 1em 0.2em 0;
				text-decoration: none;
				color: #363636;
				background: transparent url('../img/nav_divider.png') no-repeat 100% 50%;
				text-shadow: #FFF 1px 1px;
			}

			nav ul li a:hover,
			nav ul li a:active{color: #62911e;}

			nav ul li.active{background: transparent url('../img/nav_arrow_active.gif') no-repeat 37% 100%;}

				nav ul li.active a:link,
				nav ul li.active a:visited,
				nav ul li.active a:hover,
				nav ul li.active a:active{color: #333;}

/* definition lists */
dl{margin: .5em 0;line-height: 2em;}
	dl dt{font-weight: bold;}
	dl dd{margin-left: 1em;}


/* -----------------------------------------
	C10: BASE STRUCTURE (Div frame)
----------------------------------------- */
/* 
	.outerWrapper and .innerWrapper are used in scenarios where you need a centered
	page but graphics that extend to both sides of the viewport.
	It is a 'row-based' look
	
	Otherwise, we can ditch the .innerWrapper and only use one .wrapper class
*/
	.outerWrapper{text-align: center;} /* row-based */
	.wrapper,
	.innerWrapper{
		width: 960px;
		margin: 0 auto;
		text-align: left;
	}

	/* Generic column classes */
	.columnwrapper{} /* Is also auto-clearfixed above! */
	.column{float: left;margin: 0;padding: 0;border: none;}
	.column.half{width: 50%;}
	.column.third{width: 30%;}
	.column.quarter{width: 25%;}

	#tools{width:960px;margin: 8px auto 0 auto;text-align: right;}
	#branding{background: #7fb539 url('../img/branding_bg.jpg') repeat-x 0 0;}
	#branding .wrapper{background: transparent url('../img/branding.jpg') no-repeat 0 0;}
	nav{margin: 42px 0 0 0;background: transparent url('../img/nav_bg.png') no-repeat 0 0;border-bottom: 1px solid #75af2a;}

	#content{background: transparent url('../img/content_bg.gif') repeat-x 0 0;padding-top: 30px;}
		#content #main{
			width: 630px;
			padding-right: 20px;
			padding-top: .2em;
			float: left;
			height: auto !important; /* real browsers */
			height: 440px; /* IE6: treated as min-height*/
			min-height: 440px; /* real browsers */		
		}
		#content #secondary{
			float: right;
			background: transparent url('../img/sidebar_box_bottom.gif') no-repeat 0 100%;
			width: 254px;
			padding: 20px;
		}
		/* Ugly extra markup but we needs it :( */
			#content #secondary .top{
				display: block;
				height: 3px;
				margin: -20px -20px 20px -20px;
				background: transparent url('../img/sidebar_box_top.gif') no-repeat 0 0;
			}
			
	footer{background: #FFF url('../img/footer_bg.gif') repeat-x 0 0px;margin-top: 30px;}


/* -----------------------------------------
	C11: TABLES
----------------------------------------- */
table{
	margin: 2em 0;
	width: 100%;
	border: 1px solid #363636;
	text-align: left;
}
	table caption{
		margin-bottom: -1em; /* table top-margin/2 reversed! */
		margin-top: 2em; /* table top-margin/2 reversed! */
		font-size: 1.2em;
		font-style: italic;
		color: #666;
		text-align: right;
	}
	table tr{}
	table thead{}
		table thead tr{background: #363636; color: #FFF;}
			table thead tr th,
			table tfoot tr th{
				border-bottom: 1px solid #363636;
				padding: .2em .5em;
				font-weight: bold;
			}
			table thead tr td,
			table tfoot tr td,
			table tfoot tr th{
				padding: .2em .5em;
				border-bottom: 1px solid #363636;
				border-right: 1px solid #363636;
			}
	table tbody{}
		table tbody tr{}
			table tbody tr th{
				border-bottom: 1px solid #363636;
				border-right: 1px solid #363636;
				padding: .2em .5em;
				font-weight: bold;
			}
			table tbody tr td{
				padding: .2em .5em;
				border-bottom: 1px solid #363636;
				border-right: 1px solid #363636;
			}


/* -----------------------------------------
	C12: FORMS
----------------------------------------- */
form{}
	legend,
	label,
	.help_text{
		font-family: Helvetica, Arial, sans-serif;
		font-weight: normal;
		display: block;
	}

	fieldset legend{margin-bottom:  .5em;font-size: 1.4em;}

		form p{
			margin: 1em 0;
			/* auto clearfixing: saves extraneous classnames */
			clear: both;
			overflow: hidden;
			zoom: 1;
		}
		

			/* Notices, Labels, Errors, Messages */
			label{font-weight: bold;}
			.help_text{display:block;font-style: italic;}
			.required{}
				.required label:after {content:" (Required)";} /* Content does not work in IE!? */
			.error{color: #CC3333;}
				.error label:after {content:" (Please correctly fill in this field!)";}
				.error input{background-color: #FFD0D0;color: #CC3333;border: 1px solid #CC3333;}

			/* Inputs */
			input,
			textarea{
				width: 50%;
				margin: 0;
				font-family: Helvetica, Arial, sans-serif;
				font-size: 1em;
				background: #FFF url('../img/content_bg.gif') repeat-x 0 -4px;
				color: #666;
				padding: .3em;
				border: 1px solid #62911E;
				border-radius: 2px;
				-webkit-border-radius: 2px;
				-moz-border-radius: 2px;
				-webkit-transition: border .4s linear;
			}
			
			textarea{
				width: 93%;
				height: 100px;
				overflow: auto;
			}
			
			input:focus,
			textarea:focus,
			input.focus,
			textarea.focus{border: 1px solid #111;color: #111;}

			input[type='button'], input[type='submit'], input[type='checkbox'], input[type='image'], input[type='radio'], input[type='reset'], select, button { cursor: pointer; }
			input[type='hidden'] { display:none; }

			/* No width etc. on certain types of input... */
			input[type='button'], input[type='submit'], input[type='reset'], input[type='image'],
			input.button, .submit input{padding: 0.3em;width: auto; border: 1px solid #62911E; background-image: none;background-color: #62911E; color: #FFF;font-size: 1.4em;border-radius: 3px;-webkit-border-radius: 3px;-moz-border-radius: 3px;}
				/* ... Checkboxes and radio buttons */
				input[type=checkbox],
				input[type=radio],
				input.check,
				input.radio{background: transparent;width: auto;float: left; /* !! */border: none;margin: 0;}

				p.checkbox label, p.radio label{margin-left: 1.5em;}
					p.checkbox input, p.radio input{margin-top: -1.5em;}

			select{ color: #333; border: 1px solid #333;}
				select option{}

.ddfmwrap{margin-bottom: 3em;}

.ddfmerrors{font-size: 1.6em;color: #CC3333;}
.errorlist{font-size: 1.4em;line-height: 1.5em;color: #CC3333;}