/**
 * Stylesheet for Watligteroponsdak.be
 * 
 * @media		screen, projection
 * @copyright	CR Solutions <http://www.crsolutions.be>
 * @author    	Tijs Verkoyen <tijs@crsolutions.be>
 */

/* Reset */
* { margin: 0; padding: 0; }
ol, ul { list-style: none; }
img { border:0; }
fieldset { margin: 0; padding: 0; border: 0; }
input, select, textarea { font-size: 100%; vertical-align: middle; }
table { border-collapse: collapse; border-spacing: 0; empty-cells: show; }
th { text-align: left; }
a:focus { overflow: hidden; }

/* Typography and text styles */
body { background: #F8F7F2 url('../images/bg.jpg') repeat-x center top; font: 300 13px Arial, Helvetica, sans-serif; line-height: 1.5; color: #87888A; }

/* Headings */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.1; font-family: Arial, Helvetica, sans-serif; color: #FFF; }
h1, h2 { font-size: 25px; color: #FFF; margin: 0 0 20px 0; font-weight: normal; }
h3 { font-size: 15px; margin: 0 0 12px 0; }
h4 { font-size: 13px; margin: 0 0 12px 0; font-weight: 700; }
p { padding: 0 0 12px 0; }
abbr, acronym { cursor: help; }
.content ul { list-style: disc; }
.content ol { list-style-type: decimal; }
	.content ul, .content ol { padding: 0 0 12px 24px; }
	.content li { padding: 0 0 5px 0; list-style-position: inline; }
	.content table { font-family: Arial, sans-serif; margin: 0 0 14px; border-top: 1px solid #CCC; border-left: 1px solid #CCC; }
	.content td, .content th { padding: 7px; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; font-size: 11px; }
	.content th { font-weight: 700; background: #F5F7F9; color: black; line-height: 1.2; text-align: left; }
	.content tr.rowOdd { background: #FFF; }
	.content tr.rowEven { background: #FCFCFC; }
	.content img { border: 1px solid #E0E0E0; -moz-border-radius: 4px; }
code { font-family: Monaco, "Courier New", monospace; font-size: 12px; line-height: 1.15; }
pre { padding: 7px 14px; background: #F5F5F5; margin: 0 0 14px; }
blockquote, q { font-style: italic; color: #666; }
blockquote { padding: 0 0 0 14px; }
cite { font-size: 11px; text-align: right; display: block; position: relative; top: -14px; height: 0; }

/* Links */
a { text-decoration: none; }
a:link, a:visited { color: #003F5E; border-bottom: 1px solid #003F5E; }
a:hover, a:active { color: #003F5E; border-bottom: 1px solid #003F5E; }

/* Form */
input, textarea { font-family: Arial, sans-serif; font-size: 12px; }
textarea.textarea { padding: 3px 2px; }
.formError { color: red; display: block; padding: 0 0 2px 0; }
.formSuccess { color: green; display: block; background: #CFC; padding: 8px; border: 1px solid green; margin: 0 0 10px; }
.forkForms label { display: block; font-weight: bold; margin: 0 0 5px 0; }
.forkForms p.inline label { float: left; width: 90px; }
.forkForms abbr { border: none; }

/* Fork defaults */
img.alignLeft { float: left; margin: 0 24px 10px 0; }
img.alignRight { float: right; margin: 0 0 25px 10px; }

/* Pattern: pagination */
.paginationWrap { width: 100%; overflow: hidden; }
.pagination { float: left; position: relative; left: 50%; }
.pagination ul { padding: 18px 0; z-index: 2; overflow: hidden; position: relative; left: -50%; }
.pagination li { float: left; list-style: none; margin: 0 5px 0 0; text-decoration: none; padding: 0; line-height: 15px; font-size: 12px; text-align: center; }
.pagination li span { float: left; display: block; padding: 4px 5px; color: #CCC; min-width: 12px; }
.pagination li.currentPage span { font-weight: 700; color: black; }
.pagination li.selected span { padding: 4px 5px; font-weight: 700; color: #000; }
.pagination li a:link, .pagination li a:visited { float: left; display: block; padding: 3px 4px; border: 1px solid #CCC; text-decoration: none; min-width: 12px; }
li.ellipsis { margin: 0; }
li.ellipsis span { color: black; }
.pagination li a:hover, .pagination li a:active { background: #EEE; border: 1px solid #AAA; color: black; }
.nextPage, .previousPage { font-size: 11px !important; }
.pagination li.nextPage { margin-left: 10px; }
.pagination li.previousPage { margin-right: 15px; }

/** Structure */
#container { margin: 0 auto; width: 970px; }

/** Header */
#header { height: 85px; margin: 0 0 25px 0; }
	#header h1 { float: left; }
	#header h1 a { display: block; width: 205px; height: 55px; margin: 15px 10px; background: url('../images/logo.gif') no-repeat top left; border: none; }
		#header h1 a span { display: none; }

		#counter { float: right; width: 432px; height: 57px; no-repeat top left; color: #FFF; font-size: 23px; line-height: 57px; }
			#counter #box { float: left; margin: 0 17px; }
				#box span { display: block; float: left; width: 21px; padding-right: 0 3px 0 0; text-align: center; font-size: 20px; }
				#box span.separator { width: 5px; margin-right: 1px; text-align: center; }


/** Main */
#main { }
	#spotlight { position: relative; background: transparent url('../images/spotlight.png') no-repeat top left; height: 375px; margin: 0 0 5px 0; padding: 30px 30px 0 60px; }
		.spotlightLeft { float: left; width: 350px; }
		.spotlightRight { float: right; width: 520px; }
	#spotlight .media { position: relative; }
	#spotlight .media img, #spotlight #videoPlayer, #spotlight #playHolder { position: absolute; top: 0; }
	#spotlight p.quoteDetails { color: #FFF; padding-bottom: 30px; }

	.play .shade, .play .button, .play .arrow {
		margin: 96px 0 0 199px;
		background-image: url(../images/play_big.png);
		background-repeat: no-repeat;
		width: 140px;
		height: 120px;
		position: absolute;
		top: 0;
		left: 0;
	}
	.play .shade { background-position: 0 -120px; z-index: 900; }
	.play .button { background-position: 0 0; z-index: 901; opacity: .66; filter: alpha(opacity=66); -ms-filter: "alpha(opacity=66)"; -khtml-opacity: .66; -moz-opacity: .66; }
	.play .arrow { background-position: 0 -240px; z-index: 902; }


	#becomeAReference { position: absolute; right: 10px; top: 240px; z-index: 9999999; }
		#becomeAReference a { display: block; width: 157px; height: 157px; background: transparent url('../images/become_a_reference.png') no-repeat top left; border: none !important; text-decoration: none; }
			#becomeAReference a span, #becomeAReferenceBlue a span { display: none; }
	#becomeAReferenceBlueHolder { height: 140px; }
	#becomeAReferenceBlue { position: absolute; top: -17px; }
		#becomeAReferenceBlue a { display: block; width: 157px; height: 157px; background: transparent url('../images/become_a_reference_blue.png') no-repeat top left; border: none !important; text-decoration: none; }

	#content { position: relative; }
	.items { position: absolute; }
	.item { float: left; background: #FFF; padding: 10px 10px 0px 10px; margin: 0 10px 10px 0; width: 296px;
				-webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }
		.itemLast { margin-right: 0; }
	
		.item img { float: left; margin: 0 5px 3px 0; width: 100px; }
		.item blockquote { float: left;  background: transparent url('../images/quote.jpg') no-repeat top left; width: 160px; padding: 0 0 0 25px }
		.item div { clear: both; }
			.item div p { font-size: 11px; float: left; width: 200px; }
				.item div p strong { color: #003f5e; }
			.item div .button { float: right; }

	
	#pagination { background-color: #FFF; padding: 15px;
					-webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }
	#pagination ul { display: inline; }
	#pagination li { float: left; }
	#pagination li span.bullet { display: block; width: 16px; height: 24px; background: transparent url('../images/bullets.jpg') no-repeat top left; }
	#pagination li.selected span.bullet { background-position: -20px 0; }
	
	
	a.button { background: transparent url('../images/buttons.jpg') repeat-x top left; font-weight: 700; border: 1px solid #FFF; padding: 5px 5px 4px 5px; margin-right: 5px; 
				-webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }
		a.button:hover { background-position: 0 -120px; border-color: #CCC; color: #FFF; }
	a.buttonGreen { background-position: 0 0; color: #FFF; }
		a.buttonGreen:hover { background-position: 0 -120px; }
	a.buttonGray { background-position: 0 -40px; color: #FFF; }
		a.buttonGray:hover { background-position: 0 -160px; }
	a.buttonBlue { background-position: 0 -80px; color: #FFF; }
		a.buttonBlue:hover { background-position: 0 -200px; }
	a.pdf { display: block; width: 56px; height: 65px; float: left; background: transparent url('../images/pdf.jpg') no-repeat top left; border: none !important; text-decoration: none; }
		a.pdf span { display: none; }
		
	div.pdf { height: 65px; position: relative; }
		div.pdf a.button { position: absolute; top: 27px; }

/** Detail */
#main.detail h1 { color: #C1D72E; font-size: 30px; margin-bottom: 7px;  }
#main.detail h3, h4 { color: #003F5E; font-weight: normal; }
#main.detail h3 { font-size: 20px; }
#main.detail h4 { font-size: 16px; }
#main.detail p.intro { font-size: 16px; margin-bottom: 10px; }
		
#main.detail div#detail { width: 700px; float: left; padding: 30px; }
	#main.detail div#detail .images { float: right; }
	#main.detail div#detail .images img { border: 1px solid #CCC; padding: 5px; }
#main.detail div#sidebar { width: 200px; float: right; font-size: 11px; }
		#main.detail #sidebar h3 { font-size: 18px; color: #888888; }
		#main.detail #sidebar a:link, #main.detail #sidebar a:visited{ color: #003f5e; border: none; }
		#main.detail #sidebar a:hover, #main.detail #sidebar a:active { border-bottom: 1px solid #003f5e; }
		

#main .box { position: relative; background: #FFF; padding: 10px 10px 0px 10px; margin: 0 10px 10px 0;
				-webkit-border-radius: 9px; -moz-border-radius: 9px; border-radius: 9px; }

#content ul { padding: 0 0 7px 20px; }
#content ul li { list-style: disc; }
		
		
/** Footer */
#footer { text-align: center; font-size: 11px; margin-top: 20px; }
	#crs { text-align: right; }

a.crs { background: transparent url('../images/icons.gif') no-repeat 0 -21px; padding: 0 0 0 17px; color: #CCC !important; border: none; font-size: 10px; }

/* Clearfix */
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }