/**
 * Stylesheet for C&J
 *
 * @media	screen, projection
 * @copyright	Netlash <http://www.netlash.com>
 * @author	Bramus! <bramus@netlash.com>
 */

/**
 * = Global reset
 * ----------------------------------------------------------
 */

	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, 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-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		vertical-align: baseline;
	}

	body {
		line-height: 1;
		color: black;
		background: white;
	}

	ol, ul {
		list-style: none;
	}

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

	caption, th, td {
		text-align: left;
		font-weight: normal;
	}

/**
 * = Clearfix
 * ----------------------------------------------------------
 * @see http://www.positioniseverything.net/easyclearing.html
 */

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

/**
 * =  Firefox Fixes
 * ----------------------------------------------------------
 */

	/* force scrollbar */
	/**::-moz-any-link html,*/ html {
		min-height: 100%;
		margin-bottom: 1px;
	}

	/* remove big outlines on links */
	/**::-moz-any-link a,*/ a {
		overflow: hidden;
	}


/**
 * =  General positioning & colorz
 * ----------------------------------------------------------
 */

	body {
		background: #FFF url(../images/bg_regular.gif) repeat-x top left;
		text-align: center;
	}

	body.home {
		background-image: url(../images/bg_home.gif);
	}

	#container {
		width: 808px;
		margin: 0 auto 0;
		text-align: left;
	}

	#header {
		height: 209px;
		position: relative;
	}

	.home #header {
		height: 236px;
	}

/**
 * =  Header
 * ----------------------------------------------------------
 */

	#header h1 {
		display: block;
		height: 160px;
		width: 113px;
		position: absolute;
		left: 28px;
		top: 20px;
	}

	#header h1 a {
		display: block;
		height: 160px;
		width: 113px;
		text-indent: -9999px;
		background: transparent url(../images/logo.jpg) no-repeat top left;
	}

	#header img {
		display: block;
		position: absolute;
		bottom: 0;
		right: 0;
		border: 1px solid #e0e8ed;
	}

/**
 * =  Navigation
 * ----------------------------------------------------------
 */

	#navigation {
		display: block;
	 	float: left;
		width: 185px;
	}

	/* 1st level */
	#navigation ul {
	 	margin-top: 55px;
	}

	#navigation ul li {
	 	display: block;
		background: #FFF;
	}

	#navigation ul li a {
	 	display: block;
		border-bottom: 1px solid #e1e9ed;
		padding-left: 20px;
		text-decoration: none;
		color: #467492;
		background: #FFF url(../images/navigation_regular.gif) no-repeat 10px 10px;
		font: normal 14px/18px "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
		padding: 5px 0 5px 20px;
	}

	#navigation ul li.title a, #navigation ul li.title a:hover {
		color: #FFF;
		background: #467492 url(../images/navigation_white.gif) no-repeat 10px 10px;
	}

	#navigation ul li.selected a {
		background-color: #e7edf1;
	}

	#navigation ul li a:hover {
		background-color: #e7edf1;
	}

	/* 2nd level */
	#navigation ul ul {
		display: none;
	}

	#navigation ul li.selected ul {
		display: block;
	}

	#navigation ul ul, .home #navigation ul ul {
	 	margin: 5px 0 25px 30px;
	}

	#navigation ul ul li a {
		color: #71a9ce;
		border-bottom: 0px;
		padding-bottom: 1px;
		background: #FFF url(../images/navigation_sub.gif) no-repeat 10px 10px;
	}

	#navigation ul li.selected li a {
		background-color: #FFF;
	}

	#navigation ul li.selected li.selected a {
		text-decoration: underline;
	}

	#navigation ul ul li a:hover {
		text-decoration: underline;
		background-color: #FFF;
	}

/**
 * =  Language Choice
 * ----------------------------------------------------------
 */

	#language {
		position: absolute;
		right: -22px;
		top: 28px;
		z-index: 100;
		height: 100px;
		width: 20px;
	}

	.home #language {
		top: 27px;
	}

	#language ul {
		height: 40px;
		padding: 2px 0;
	}

	#language ul li {
		height:18px;
		width: 18px;
		border: 1px solid #e1e9ed;
		text-align: center;
		margin-bottom: 1px;
	}

	#language ul li.selected {
		border-color: #467492;
	}

	#language ul li a {
		display: block;
		height:18px;
		width: 16px;
		padding: 0 0 0 2px;
		margin: 0;
		color: #467492;
		text-decoration: none;
		font: normal 9px/18px "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
		text-align: center;
		background: #F6F7F9;
	}

	#language ul li a:hover {
		background: #e7edf1;
	}

	#language ul li.selected a {
		 background: #467492;
		 color: #FFF;
	}

/**
 * =  Content
 * ----------------------------------------------------------
 */

	#content {
		display: block;
	 	float: left;
		width: 556px;
		padding: 55px 0 20px 67px;
		min-height: 535px;
		height: auto !important;
		height: 535px;
		background: transparent url(../images/bg_content.gif) no-repeat 50% 40px;
	}

	#content {
		font: normal 12px/20px Arial, Helvetica, sans-serif;
	}

	#content a {
		color: #467492;
	}

	#content h2 {
		font: normal 18px/20px "Lucida Grande", "Lucida Sans", "Myriad Pro";
		color: #467492;
		margin-bottom: 16px;
	}

	#content h3 {
		font: normal 14px/20px "Lucida Grande", "Lucida Sans", "Myriad Pro";
		color: #48718D;
		margin-bottom: 16px;
	}

	#content ul {
		margin-bottom: 16px;
		margin-left: 10px;
		list-style: disc;
	}
	
	#content ol {
		margin-bottom: 16px;
		margin-left: 10px;
	}

	#content p {
		color: #000;
		margin-bottom: 16px;
		padding-left: 0;
	}

	#content strong {
		font-weight: bold;
	}

/*	#content img {
		padding: 2px;
		border: 1px solid #ccc;
	}
*/
	#content p img.left {
		display: block;
		float: left;
		margin: 0 15px 10px 0;
	}

	#content p img.right {
		display: block;
		float: right;
		margin: 0 0 10px 15px;
	}

/**
 * =  Quote (on Homepage)
 * ----------------------------------------------------------
 */

	#quote {
		height: 120px;
		position: relative;
	}

	#quote em {
		color: #467492;
		font: italic 30px/42px Georgia;
		font-weight: -200;
		text-align: right;
		position: absolute;
		right: 40px;
		top: 30px;
		height: 42px;
		white-space: nowrap;
		letter-spacing: -1px;
		width: 760px;
	}

	#quote span {
		color: #467492;
		font: italic 18px/22px Georgia;
		position: absolute;
		right: 0;
		bottom: 30px;
		height: 22px;
		white-space: nowrap;
		letter-spacing: -1px;
	}


/**
 * =  Content (on Homepage)
 * ----------------------------------------------------------
 */

	.home #content {
		padding: 0 0 0 42px;
		width: 581px;
	}

/**
 * =  Introtext (on Homepage)
 * ----------------------------------------------------------
 */

	#introtext {
		min-height: 128px;
		height: auto !important;
		height: 128px;
		background: transparent url(../images/bg_introtext.gif) repeat-x top left;
		margin-bottom: 15px;
		padding: 20px 25px;
	}

	#introtext h2 {
		display: block;
		width: 168px;
		height: 18px;
		overflow: hidden;
		text-indent: -9999px;
		background: transparent url(../images/introtext_title.gif) no-repeat top left;
	}

	#introtext p {
		font: italic 13px/18px "Trebuchet MS", Trebuchet, Arial, Helvetica, sans-serif;
		color: #FFF;
	}

/**
 * =  News (on Homepage)
 * ----------------------------------------------------------
 */

 	#news {
 		padding: 0 20px 20px 20px;
 	}

	#news h3 {
		font: normal 18px/20px "Lucida Grande", "Lucida Sans", "Myriad Pro";
		color: #467492;
		margin-bottom: 16px;
	}

	#news .newsarticle h3, #news .newsarticle h3 a {
		font: bold 12px/20px Arial, Helvetica, sans-serif;
		color: #000;
	}

	.newsarticle {
		margin-bottom: 15px;
	}

	.newsarticle .meta {
		font: italic 11px/20px Arial, Helvetica, sans-serif;
		color: #467492;
	}

	.newsarticle .meta a {
		display: none;
	}

	.newsarticle .more {
		margin-top: -30px;
		margin-bottom: 45px;
	}

	#content .newsarticle .more a, #news .archive {
		display: block;
		float: right;
		background: #648ba5;
		padding: 0 6px;
		color: #FFF;
		font: normal 11px/16px Arial, Helvetica, sans-serif;
		text-decoration: none;
	}

	#content .newsarticle .more a:hover, #news .archive:hover {
		text-decoration: underline;
	}

	#news .archive {
		float: left;
		background: #4A718E;
	}

/**
 * =  Pagination
 * ----------------------------------------------------------
 */

	.pagination ul{
		list-style:none;
		margin:0;
		padding:0;
	}
	.pagination li{
		border:1px solid #eff2df;
		float:left;
		margin:0 10px 0 0;
		background:#809900;
	}
	.pagination li span {
		float:left;
		background: #648ba5;
		color: #FFF;
		font: normal 11px/16px Arial, Helvetica, sans-serif;
		text-decoration: none;
		border: 1px solid #648ba5;
	}
	.pagination li.selected span {
		padding: 0 6px;
	}
	.pagination li span a {
		display: block;
		background: #FFF;
		padding: 0 6px;
		text-decoration: none;
	}
	.pagination li span a:hover{
		background:#E7EDF1;
		color:#fff;
		text-decoration: underline;
	}
	/*
	.pagination {
		float: left;
		position: relative;
		left: 50%;
	}
	.pagination ul{
		position:relative;
		left:-50%;
	}
	*/

/**
 * =  Sitemap
 * ----------------------------------------------------------
 */

	#sitemap ul li {
		margin-top: 15px;
		font: normal 12px/15px Arial, Helvetica, sans-serif;
	}

	#sitemap ul {
		padding-left: 25px;
	}

	#sitemap ul ul li {
		margin-top: 0;
	}

	#sitemap a {
		text-decoration: none;
	}

	#sitemap a:hover {
		text-decoration: underline;
	}

	#sitemap ul ul li a {
		color: #71A9CE;
	}
	
	
/**
 * = Kostenberekening tabel
 * ----------------------------------------------------------
 */

table.kostenberekening {
	border-left: 1px solid #E0E8ED;
	border-top: 1px solid #E0E8ED;
	width: 100%;
}

table.kostenberekening th {
	font-weight: 700;
	font-size: 11px;
	background: #F5F7F7;
}

table td.small {
	font-size: 11px;
}

table.kostenberekening td,
table.kostenberekening th {
	padding: 3px 6px;
	border-bottom: 1px solid #E0E8ED;
	border-right: 1px solid #E0E8ED;
}

div.leftcol {
	width: 30%;
	float: left;
}
div.leftcol input {
	width: 100px;
}
div.leftcol input.input-button {
	width: auto;
	overflow: visible;
}
div.rightcol {
	width: 68%;
	padding-left: 2%;
	float: left;
}

/**
 * =  Footer
 * ----------------------------------------------------------
 */

	#footer {
		text-align: center;
		height: 25px;
		background: #FFF url(../images/footer.gif) repeat-x bottom left;
		padding-bottom: 6px;
	}

	#footer ul {
		background: #FFF;
		padding: 0 0 10px 185px;
	}

	#footer li {
		display: inline;
		padding: 0 5px;
	}

	#footer a {
		color: #467492;
		font: normal 11px/15px Arial, Helvetica, sans-serif;
	}

/**
 * = Sticky footer
 * ----------------------------------------------------------
 * @see http://www.netlash.com/log/sticky_footer_tutorial
 */

	html, body {
		height: 100%;
	}

	#container {
		min-height: 100%;
		height: auto !important;
		height: 100%;
		margin: 0 auto -31px auto;
		position: relative;
	}

	#footer {
		position: relative;
	}

	#push {
		height: 31px;
	}

/**
 * = Forms
 * ----------------------------------------------------------
 */

	input, textarea {
		padding: 2px;
		font-size: 11px;
	}

	textarea {
		height: 80px;
	}

	form {
		padding: 0 0 20px 0;
	}

	label {
		color: #000000;
		font-size: 11px;
		font-weight: bold;
	}

	form dl dt {
		padding: 0 0 2px;
	}

	form dl dd {
		padding: 0 0 8px;
	}

	#name {
		width: 200px;
	}

	#email {
		width: 300px;
	}

	#message {
		width: 400px;
	}

	span.form-error {
		display: block;
		padding: 5px 0 0 0;
		color: red;
		font-size: 11px;
		line-height: 1.2;
	}

	span.form-success {
		color: green;
		display: block;
		background: #CFC;
		padding: 8px;
		border: 1px solid green;
		margin: 0 0 10px;
		font: normal 12px/15px Arial, Helvetica, sans-serif;
	}

/**
 * =  sIFR
 * ----------------------------------------------------------
 */

	/* These are standard sIFR styles... do not modify */

	.sIFR-flash {
		visibility: visible !important;
		margin: 0;
	}

	.sIFR-replaced {
		visibility: visible !important;
	}

	span.sIFR-alternate {
		position: absolute;
		left: 0;
		top: 0;
		width: 0;
		height: 0;
		display: block;
		overflow: hidden;
	}

	/* Hide Adblock Object tab: the text should show up just fine, not poorly with a tab laid over it. */
	.sIFR-flash + div[adblocktab=true] {
	  display: none !important;
	}