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

Title : 	untitled style sheet
Author : 	David Hund - Valued Standards (c) 2009
URL : 		http://www.browserupgrade.info
Modified : 	2009-02-20 - 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:
	- blauwgrijs		#333C44
	- lichtblauw		#0099dd
	- donkerblauw		#336699
	- groen				#339900
	- rood				#CC3300
	- 
	- 
- - - - - - - - - - - - - - - - - - - - - */


/* -----------------------------------------
	!!: DIAGNOSTICS REMOVE THIS!
	It is just used to have a quick idea of structure when starting
----------------------------------------- */
/* .wrapper,.innerWrapper, #tools, #branding, #nav, #content, #main, #secondary, #footer
{border: 1px solid red !important;} */
/* .wrapper,.innerWrapper{background: url('../img/960grid.png') no-repeat 0 0;} */

/* -----------------------------------------
	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, #main, #secondary, #footer,
#tools ul, #nav ul, #footer ul,
/* 	Standard clearing class */
.newClearfix{
	overflow: hidden; /* 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 url('../img/blue_vert_gradient.jpg') repeat-x 0 0;
	color: #000;
	border-top: 4px solid #339900;
	padding: 2em 0;
	font-size: 62.5%;
	font-family: Arial, Helvetica, Verdana, sans-serif;
}
body.ie{border-top: 4px solid #ffcc33;}

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

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

strong{font-weight: bold;color: #333c44;}
a strong{color: inherit;}
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.3em; 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.3em;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 { display: block; background: #999; color: #999; width: 100%; height: 1px; border: none; }
hr {display: none;}

/* -----------------------------------------
	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: -999px;}

.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;}
.cta{/* cta = Call To Action */
	background: #FFF url('../img/grid_grey.gif') repeat 0 0;
	color: #FF9900;
	margin: 1em 0;
	padding: .5em;
	font-weight: bold;
	text-align:center;
	text-transform: uppercase;
	text-shadow: 1px 1px #FFF;
	border-top: 1px solid #FF9900;
	border-bottom: 1px solid #FF9900;
}

.codeblock{clear: both;margin: 1em 0; border: 1px solid #999;width: 480px;overflow: auto;background: #EEE;color:#666;}

.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; 
	}

.ie-message{
	display:none;
	background: transparent url('../img/grid_grey.gif') repeat 0 0;
	color: #000;
	margin: 2em 0 0 0;
	padding: 1em;
	border-top: 1px solid #ffcc33;
	border-bottom: 1px solid #ffcc33;
	overflow: auto;
	height: 1%;
}
.ie-message p{line-height: 2;margin: 0;padding-left: 70px;background: transparent url('../img/warning.png') no-repeat 0% 50%;}
.ie .ie-message{display:block;}

.ie-message img{width: 72px;}
.ie-message h3{margin: 0.5em 0;}

/* -----------------------------------------
	C5: HEADERS
----------------------------------------- */
h1, h2, h3, h4, h5, h6{
	font-family: Arial, verdana, sans-serif;
	font-weight: normal;
	margin: 1em 0 .5em 0;
	text-transform: uppercase;
}
h1{font-size: 2.4em;color: #333C44;}
#content h1{line-height: 1.2em;margin-top:.8em;}
h2{font-size: 2.0em;color: #333C44;}
.home h2{}
h3{font-size: 1.6em;color: #333C44;margin-top: 1.5em;}
h4{font-size: 1.4em;color: #333C44;}
h5{font-size: 1.4em; color: #333C44;font-weight: bold; font-style: italic;}
h6{font-size: 1.4em; color: #333C44;font-weight: bold;}

ul + h1,
ul + h2,
ul + h3,
ul + h4,
ul + h5,
ul + h6{margin-top: 2em;}

/* -----------------------------------------
	C6: LINKS
----------------------------------------- */
a:link,
a:visited,
a:hover,
a:active{
	color: #339900;
	text-decoration: underline;
}
a:hover,
a:active{color: #333C44;}

/* Large Green Button */
a.actionbutton:link,
a.actionbutton:visited,
a.actionbutton:hover,
a.actionbutton:active{
	display: block;
	background: #339900 url('../img/button_grad_vert_green.png') repeat-x 0 50%;
	color: #FFF;
	padding: .2em .5em;
	margin: .5em 0 0.25em 0;
	font-size: 2em;
	text-decoration: none;
	text-shadow: 1px 1px #336600;
	border: 1px solid #339900;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 5px;
}
a.actionbutton:hover,
a.actionbutton:active{
	background: #339900 url('../img/button_grad_vert_green.png') repeat-x 0 150%;
	text-shadow: 1px 1px #000;
	border: 1px solid #336600;
}
a.actionbutton img{vertical-align: middle;margin: 0 1em 0 0;}

/* -----------------------------------------
	C7: LOGO & TAGLINE
----------------------------------------- */
#logo{margin: 0;padding:0;text-indent: -999em;}
	#logo a:link, #logo a:visited, #logo a:hover, #logo a:active{
		display: block;
		width: 455px;
		height: 90px;
		background: #FFF url('../img/logo.png') no-repeat 0 0;
		padding: 0 0 10px 0;
		border-right: 1px solid #DDD;
	}

#tagline{margin: -4.3em 0 3.8em 475px;color: #333C44;}
#tagline{/* disable for now */text-indent: -999em;}
*:first-child+html #tagline{display: none;} /* Yes, a hack for IE7 */
#content-introduction{margin: -7.1em 0 3.5em 475px;color: #999;}

/* -----------------------------------------
	C8: IMAGES
----------------------------------------- */
img.left,
.figure img{float: left;margin: 0 1em 0 0;padding: 5px;border: 3px double #DDD;clear:both;}
.figure .legend{color: #666;}
.tools .figure{margin-bottom: 2em;overflow: auto;height:1%;}
.tools .figure img{margin-bottom: 1em;}
img.right{float: right;margin: 0 0 0 1em;padding: 5px;border: 3px double #DDD;}

/* -----------------------------------------
	C9: LISTS
----------------------------------------- */
#content ul, #content ol{margin: 2em 0 2em 1em;list-style-position: outside;}
#content ol{list-style-type: decimal;}
	#content ul li, #content ol li{margin: 0.5em 0;line-height: 1.5em;}
	#content ul li{padding-left: 24px;background: transparent url('../img/bullet.gif') no-repeat 0 .2em;}

		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{display: inline; float: left; margin-right: 1em;}

	/* TOOLS: exception */
	#tools ul li{float: right;margin: 0 0 0 1em;padding: 0 0 0 1em;border-left: 1px solid #DDD;color: #666;}
	#tools ul li:first-child{border: none;}

	/* FOOTER: exception */
	#footer ul{width: 900px;margin: 1em;overflow:hidden;}
	#footer ul li{float: left;margin: 0 0 0 1em;padding: 0 0 0 1em;border-left: 1px solid #CCC;}
	#footer ul li:first-child{border: none;margin-left:0;padding-left:0;}

	/* -----------------------------------------
		NAVIGATION
	----------------------------------------- */
	#nav ul{}
		#nav ul li{margin: 0.5em;}
		#nav ul li:first-child{margin-left: 1em;}
			#nav ul li.active{}
			#nav ul li.last{}
			
			#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;
				font-weight: bold;
				text-decoration: none;
				background: #EEE url('../img/button_grad_vert_grey.png') repeat-x bottom left;
				color: #333;
				text-shadow: 1px 1px #DDD;
				border: 1px solid #999;
				border-radius: 5px;
				-moz-border-radius: 5px;
				-webkit-border-radius: 5px;
			}

			#nav ul li a:hover,
			#nav ul li a:active,
			#nav ul li.active a:link, #nav ul li.active a:visited, #nav ul li.active a:hover, #nav ul li.active a:active{
				background-position: top left;
				color: #339900;
				border: 1px solid #339900;
			}


/* 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{
		background: #FFF;
		border: 1px solid #999;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		width: 920px;
		margin: 0 auto;
		padding: 20px;
		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{margin-bottom: 2em;}
	#branding{}
	#nav{background: #FFF url('../img/grid_grey.gif') repeat 0 0;}

	#content{padding-top: 1em;}

		#download{}
		#download dl{}
		#download dl dt{
			background: #339900;
			color: #a5d19f;
			border: 1px solid #339900;
			border-top-left-radius: 10px;
			-moz-border-radius-topleft: 10px;
			-webkit-border-top-left-radius: 10px;
			opacity: .8;
		}
		#download dl dt:hover,
		#download dl dt.recommended{opacity:1;}
		#download dl dt a:link,
		#download dl dt a:visited,
		#download dl dt a:hover,
		#download dl dt a:active{color: #FFF;font-size: 1.2em;font-weight: normal;margin-right: 1em;}
		#download dl dt a:hover,
		#download dl dt a:active{color: #FFF;text-decoration: none;}
		#download dl dt a:hover img{border-bottom: 2px solid #339900;}

		#download dl dt img{float: left;margin: 3em 2em 1.5em 1em;}
		#download dl dd{
			background: #FFF url('../img/grad_vert_green.png') repeat-x bottom left;
			color: #333C44;
			margin: 0 0 1em 0;
			padding: 1em 1em 1em 1em;
			border-bottom: 1px solid #DDD;
		}

		/* Hide non-win browser recommendations from IE users */
/* 		.ie #safari, .ie #safariquote{display: none;} */


		#main{
			width: 445px; /* Set these to pixels in a fixed-width design */
			float: left;
		}
			.home #main{width: 545px;text-align: justify;}
			.tools #main{width: 645px;}
		#secondary{
			width: 445px; /* Set these to pixels in a fixed-width design */
			float: right;
		}
		.home #secondary{
			width: 300px;
			background: #FFF url('../img/grid_grey.gif') repeat 0 0;
			padding: 0 2em 1em 2em;
			border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}
		.tools #secondary{
			width: 220px;
			background: #FFF url('../img/grid_grey.gif') repeat 0 0;
			padding: 0 2em 1em 2em;
			border-radius: 10px;
			-webkit-border-radius: 10px;
			-moz-border-radius: 10px;
		}

	#footer{background: #FFF url('../img/grid_grey.gif') repeat 0 0;margin: 2em 0 0 0;}


/* Upgrade-steps on /how-to-upgrade/ */
#upgrade-steps h3{margin: .5em 0;color: #339900;}
#upgrade-steps .figure{overflow: hidden;height: 1%;padding: 0 0 2em 0;margin: 0 0 2em 0;border-bottom: 1px solid #DDD;}
#upgrade-steps .figure img{width: 220px;}
#upgrade-steps .figure .legend{color: #666;}


/* -----------------------------------------
	C11: TABLES
----------------------------------------- */
table{
	margin: 2em 0;
	width: 100%;
	border: 1px solid #000;
	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: #000; color: #FFF;}
			table thead tr th,
			table tfoot tr th{
				border-bottom: 1px solid #000;
				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 #000;
				border-right: 1px solid #000;
			}
	table tbody{}
		table tbody tr{}
			table tbody tr th{
				border-bottom: 1px solid #000;
				border-right: 1px solid #000;
				padding: .2em .5em;
				font-weight: bold;
			}
			table tbody tr td{
				padding: .2em .5em;
				border-bottom: 1px solid #000;
				border-right: 1px solid #000;
			}


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

	fieldset{
		background: #FFF url('../img/grid_grey.gif') repeat 0 0;
		padding: 1em;
		border-radius: 10px;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
	}

	fieldset legend{margin: 0 0 0 0;font-size: 1.3em;background: #FFF;color: #666;}

		form p{
			margin: 1em 0;
			/* auto clearfixing: saves extraneous classnames */
			clear: both;
			overflow: hidden;
			zoom: 1;
			padding-bottom: 1em;
			border-bottom: 1px solid #999;
		}
		

			/* Notices, Labels, Errors, Messages */
			label{
				font-weight: bold;
				width: 10em;
				float: left;
			}
			.optgroup label{display: inline; width: auto;margin: 0 1em;}
			.optgroup label:first-child{margin-left: 0;}

			.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: Arial, Helvetica, Verdana, sans-serif;
				font-size: 1em;
				background: #FFF;
				color: #666;
				padding: .2em;
				border: 1px solid #999;
			}
			
			textarea{
				width: 93%;
				height: 100px;
				overflow: auto;
			}
			
			input:focus,
			textarea:focus,
			input.focus,
			textarea.focus{border: 1px solid #000;color: #000;}

			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{padding: 0.3em;width: auto; background: #339900; color: #FFF;border: 1px solid #336600; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
				/* ... Checkboxes and radio buttons */
				input[type=checkbox],
				input[type=radio],
				input.check,
				input.radio{background: transparent;width: auto;float: left; /* !! */border: none;margin: 0;}

				input.radio{margin: .2em .5em 0 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{}