/*----------------------------------------------------------------------------- 
K&BT Screen Stylesheet
http://www.kraanenbaantechniek.nl/

version:   1.0
author:    Jelle Grunstra
website:   http://web.jellegrunstra.nl/

   Main style
-----------------------------------------------------------------------------*/
body {
	background: #011f2b bottom center url(img/footer-background.png) repeat-x;
	color: white;
	height: 100%;
	font-family: Arial, Tahoma, Verdana;
	width: 100%;
}

#body-wrapper {
	height: auto;
	margin: 0 auto;
	position: relative;
	width: 1020px;
	z-index: 9999;
}

/* Background
-----------------------------------------------------------------------------*/ 
#header-background {
	background: #023a51 top center url(img/header-background-repeat.png) repeat-x;
	height: 300px;
	position: absolute;
	top: 0;
	width: 100%;
}

#candybar-background {
	background: top center url(img/candybar-background.png) repeat-x;
	height: 265px;
	position: absolute;
	top: 160px;
	width: 100%;
}

	#candybar-background.big {
		background-image: url(img/candybar-big-background.png);
		height: 330px;
	}

#footer-background {
	background: bottom center url(img/footer-background.png) repeat-x;
	height: 130px;
	position: absolute;
	bottom: 0;
	width: 100%;
}

/* Header 
-----------------------------------------------------------------------------*/ 
#header {
	background: #011f2b top center url(img/header-background.png) no-repeat;
	height: 160px;
	position: relative;
}

#header #bedrijf-logo {
	background: center center url(img/header/bedrijf-logo.png) no-repeat;
	height: 58px;
	left: 40px;
	position: absolute;
	top: 63px;
	width: 132px;
}

#header #bedrijf-naam {
	background: center center url(img/header/bedrijf-naam.png) no-repeat;
	height: 32px;
	left: 120px;
	position: absolute;
	top: 69px;
	width: 389px;
}

#header #bedrijf-naam a {
	display: block;
	height: 28px;
	width: 389px;
}

#header #slogan-scroller {
	height: 14px;
	left: 184px;
	overflow: hidden;
	position: absolute;
	top: 100px;
	width: 420px;
}

#header #slogan-scroller ul {
	width: 9999px;
}

#header #slogan-scroller ul li {
	display: inline-block;
	float: left;
	font-size: 0.7em;
	height: 12px;
	text-shadow: #064260 1px 1px 0;
	width: 420px;
}

#header #bedrijf-slogan-1 {
	background: left top url(img/header/bedrijf-slogan-1.png) no-repeat;
}


#header #bedrijf-slogan-2 {
	background: left top url(img/header/bedrijf-slogan-2.png) no-repeat;
}


#header #bedrijf-slogan-3 {
	background: left top url(img/header/bedrijf-slogan-3.png) no-repeat;
}

/* Languages
-----------------------------------------------------------------------------*/
ul#language {
	bottom: 0;
	margin: 0 0 5px 0;
	position: absolute;
	right: 40px;
}

ul#language li {
	display: inline;
	font-size: 11px;
	margin: 0 0 0 10px;
}

ul#language li img {
	margin: 0 1px -1px 0;
	opacity: 0.75;
}

ul#language li a {
	color: #99ccff;
}

ul#language li a:hover, ul#language li a.active {
	color: white;
}

ul#language li a:hover img, ul#language li a.active img{
	opacity: 1;
}

/* Navigation 
-----------------------------------------------------------------------------*/ 
ul#header-navigation {
	position: absolute;
	right: 40px;
	top: 72px;
}

ul#header-navigation li {
	display: inline-block;
	height: 30px;
	overflow: hidden;
}

ul#header-navigation a {
	color: white;
	display: inline-block;
	font-family: 'Arvo', serif;
	font-size: 12px;
	height: 30px;
	padding: 9px 14px;
	text-shadow: #064260 1px 1px 0;
}

	ul#header-navigation a:hover, ul#header-navigation a.active {
		background: top center url(img/navigation-background.png) no-repeat;
		text-shadow: #4f5800 1px 1px 0;
	}
	
		ul#header-navigation li:hover .spaninv {
			background-image: url(img/navigation-background.png);
		}

	ul#header-navigation span.left {
		background: center left url(img/navigation-background.png) no-repeat;
		display: block;
		float: left;
		height: 30px;
		width: 2px;
	}

	ul#header-navigation span.right {
		background: center right url(img/navigation-background.png) no-repeat;
		display: block;
		float: right;
		height: 30px;
		width: 2px;
	}

	ul#header-navigation span.spaninv {
		background-image: none;
	}

/* Candybar 
-----------------------------------------------------------------------------*/ 
#candybar {
	background: top center url(img/candybar-background-middle.png) no-repeat;
	height: 265px;
	margin: 0 40px;
	overflow: hidden;
	position: relative;
	width: 940px;
}

	#candybar.big {
		background-image: url(img/candybar-background-middle-big.png);
		height: 330px;
	}

#candybar p a {
	color: white;
	text-decoration: underline;
}

#candybar p a:hover {
	text-decoration: none;
}

#candybar #candybar-wrapper {
	overflow: hidden;
	width: 940px;
}

#candybar #candybar-wrapper ul, #content div.project-wrapper .image ul {
	margin-top: 0;
	width: 9999px;
}

#candybar #candybar-wrapper ul li {
	display: inline-block;
	float: left;
}

#candybar .candybar-item {
	float: left;
	height: 220px;
	margin: 40px 0;
	position: relative;
	width: 940px;
}
		
#candybar .candybar-item p {
	line-height: 16px;
	text-shadow: 1px 1px 0px #819108;
}

#candybar .candybar-item h2 {
	font-family: 'Arvo', serif;
	font-size: 24px;
	letter-spacing: -0.02em;
	margin: 0 0 10px 0;
	text-shadow: 1px 1px 0px #728008;
}

#candybar .candybar-item h3 {
	font-family: 'Arvo', serif;
	font-size: 16px;
	margin: 20px 0 5px 0;
	text-shadow: 1px 1px 0px #728008;
}

#candybar .candybar-item ul.summary {
	float: right;
}

#candybar .candybar-item ul.summary li, #content div.project-wrapper ul.summary li {
	font-size: 11px;
	font-weight: bold;
	line-height: 2em;
	margin: 0 0 0 10px;
}

#candybar .candybar-item ul.summary li h4, #content div.project-wrapper ul.summary li h4 {
	padding: 0;
	margin: 0;
}

#candybar .candybar-item .image, #content div.project-wrapper .image {
	background-color: white;
	border: 1px solid #bcca00;
	float: right;
	height: 180px;
	margin: 0 0 0 40px;
	overflow: hidden;
	position: relative;
	text-align: center;
	width: 300px;
}

#candybar .candybar-item .image p, #content div.project-wrapper .image p {
	background-color: #022d3b;
	bottom: 1px;
	color: white;
	font-size: 1.0em;
	margin: 0 0 -2px 0;
	padding: 8px 16px;
	position: absolute;
	text-align: left;
	text-shadow: none;
	width: 268px;
	text-shadow: 1px 1px 0 #00161f;
	z-index: 9999;
}

#candybar .candybar-item .image p {
	font-size: 0.75em;
}

#candybar .img-prev, #content .img-prev {	
	background: left bottom url(img/img-toggle-blue.png) no-repeat;
	display: inline-block;
	float: left;
	height: 21px;
	margin: -2px 8px -3px -10px;
	overflow: hidden;
	width: 21px;
}

#candybar .img-next, #content .img-next {	
	background: right bottom url(img/img-toggle-blue.png) no-repeat;
	display: inline-block;
	float: right;
	height: 21px;
	margin: -2px -10px -3px 8px;
	overflow: hidden;
	width: 21px;
}

#candybar a.img-prev:hover, #content a.img-prev:hover {
	background-position: left top;
}

#candybar a.img-next:hover, #content a.img-next:hover {
	background-position: right top;
}

#candybar .candybar-item .image ul, #content div.project-wrapper .image ul {
	margin-top: 0;
	width: 9999px;
}

#candybar .candybar-item .image ul li, #content div.project-wrapper .image ul li {
	display: inline-block;
	float: left;
}

	/* Scroller */
	#candybar #toggle {
		background: center center url(img/toggle-background.png) no-repeat;
		bottom: 38px;
		height: 41px;
		overflow: hidden;
		position: absolute;
		width: 71px;
		z-index: 9999;
	}

	#candybar #toggle p {
		font-size: 24px;
		margin: 10px 0 0 0;
		text-align: center;
	}

	#candybar #toggle a {
		color: #011f2b;
		display: inline-block;
		text-decoration: none;
		width: 25px;
	}

	#candybar #toggle a:hover {
		color: #023a51;
	}

	#candybar #toggle p {
		color: #b0caca;
	}
	
	/* Button */
	#candybar .candybar-item .button {
		background: white top center url(img/button-background.png) repeat-x;
		bottom: 33px;
		height: 41px;
		overflow: hidden;
		position: absolute;
		right: 340px;
		width: auto;
	}

	#candybar .candybar-item .button .button-left {
		background: white top center url(img/button-left.png) no-repeat;
		height: 41px;
		left: 0;
		position: absolute;
		width: 2px;
	}

	#candybar .candybar-item .button .button-right {
		background: white top center url(img/button-right.png) no-repeat;
		height: 41px;
		right: 0;
		position: absolute;
		width: 2px;
	}

	#candybar .candybar-item .button h3 {
		color: #011f2b;
		font-size: 14px;
		margin: 0;
		text-shadow: none;
	}

	#candybar .candybar-item .button h3 a {
		color: #011f2b;
		display: block;
		height: 20px;
		padding: 14px 35px;
	}

	#candybar .candybar-item .button h3 a:hover {
		color: #023a51;
	}

	/* Video */
	#candybar #video-wrap {
		background: #011f2b center top url(img/video-background.png) repeat-x;
		border: 1px solid #cbd600;
		height: 280px;
		margin: 20px 0;
	}
	
		#candybar #video-wrap .right {
			height: 100%;
			width: 339px;
		}
		
			#candybar #video-wrap .right h2 {
				margin: 30px 40px 0 40px;
				padding: 0 0 8px 0;
			}
			
			#candybar #video-wrap .right p {
				font-size: 11px;
				margin: 10px 40px
			}
			
			#candybar #video-wrap  #video-select {
				background: #011f2b top center url(img/hr-background.png) repeat-x;
				bottom: 30px;
				height: 60px;
				overflow: hidden;
				position: absolute;
				text-align: right;
				width: 339px;
			}
			
				#candybar #video-wrap  #video-select ul {
					margin: 10px 10px 10px 0;
				}
				
				#candybar #video-wrap  #video-select ul li {
					display: inline;
					margin: 0 1px;
				}
				
					#candybar #video-wrap  #video-select ul li a {
						opacity: 0.5;
					}
				
					#candybar #video-wrap  #video-select ul li a:hover, #candybar #video-wrap  #video-select ul li a.active {
						opacity: 1;
					}
					
						#candybar #video-wrap  #video-select img {
							z-index: 1000;
						}
						
						#candybar #video-wrap  #video-select span {
							background: center center url(img/video-play.png) no-repeat;
							display: inline-block;
							height: 40px;
							margin: 0 0 0 -60px;
							position: absolute;
							width: 60px;
							z-index: 9999;
						}
						
							#candybar #video-wrap  #video-select span.invisible {
								display: none;
							}
		
		#candybar #video-wrap .left {
			background: #011f2b;
			height: 280px;
			float: left;
			overflow: hidden;
			text-align: center;
			width: 599px;
		}
		
			#candybar #video-wrap .left .hide {
				display: none;
			}

	/* Kerstboodschap 
	-------------------------------------------------------------------------*/ 
	#candybar #kerstboodschap {
		background: top center url(img/kerst-achtergrond.png) no-repeat;
		float: left;
		height: 265px;
		margin: 0;
		overflow: hidden;
		position: relative;
		text-align: center;
		top: 5px;
		width: 940px;
	}
	
		#candybar #kerstboodschap h2 {
			height: 34px;
			margin: 70px 0 0 0;
			width: 940px;
		}
		
		#candybar #kerstboodschap p {
			margin: 60px 0 0 0;
		}
		
			#candybar #kerstboodschap p#hide {
				bottom: 0;
				position: absolute;
				font-size: 10px;
				margin: 0 10px 10px 0;
				opacity: 0.5;
				right: 0;
			}

/* Content
-----------------------------------------------------------------------------*/ 
#content {
	background: top center url(img/content-background-top.png) no-repeat;
	margin: 1px 40px 60px 40px;
	padding: 40px 0 0 0;
	position: relative;
}

#content h1 {
	font-weight: normal;
	letter-spacing: -0.02em;
	margin: 8px 0 0 0;
	width: 600px;
}

#content h2, #content h3, #content h4, #content h5, #content h6 {
	margin: 15px 0 2px 0;
	padding: 0 0 6px 0;
}

#content h1.white a {
	color: white;
}

#content hr {
	height: 2px;
	border: 0;
	background: center center url(img/hr-background.png) repeat-x;
}

#content h1, #content h2, #content h3, #content p {
	text-shadow: 1px 1px 0 #00161f;
}

#content ul {
	margin: 5px 0 0 20px;
}

#content ul li {
	font-size: 12px;
	line-height: 20px;
	list-style-type: square;
}

#content div.right {
	margin-left: 40px;
	width: 300px;
}

#content div.right h2 {
	margin-top: 0;
}

#content img.right, #content div.right img {
	border: 1px solid #045a6e;
}

#content div.right p {
	margin: 10px 0;
}

#content img.margin-small {
	margin: 20px 0 40px 40px;
}

/* Projectenlijst
-----------------------------------------------------------------------------*/
#content div.project-wrapper {
	background: top center url(img/content-background-big.png) no-repeat;
	padding: 40px 0;
}

#content div.project-wrapper h2 {
	margin: 0 0 20px 0;
}

#content div.project-wrapper ul.summary {
	float: right;
	margin: 0 0 10px 0;
}

	#content div.project-wrapper ul.summary li {
		list-style-type: none;
	}

#content div.project-wrapper ul.summary h4 {
	background: none;
}

#content div.project-wrapper p {
	width: 480px;
}

#content div.project-wrapper .image {
	border: 1px solid #045a6e;
}

#content div.first {
	margin-top: 20px;
}

/* Item
-----------------------------------------------------------------------------*/
#content div.item {
	background: top center url(img/content-background-small.png) no-repeat;
	float: left;
	padding: 1px 0;
	position: relative;
	width: 600px;
}

	#content div.item-big {
		background: top center url(img/content-background-big.png) no-repeat;
		width: 940px;
	}

#content div.item h2 {
	margin: 40px 0 0 0;
}

#content div.item p {
	margin-top: 20px;
}

#content div.railtype-info {
}

	#content div.railtype-info table {
		margin: 0;
	}
	
		#content div.railtype-info table td.border-right {
			border-right: 1px dotted #034859;
		}
	
	#content div.railtype-info img {
		border: 0;
	}

#content div.item .img {
	float: left;
	height: 100px;
	margin: 40px 20px 40px 0;
	width: 140px;
}

	#content div.item .img-klein {
		height: 60px;
		width: 60px;
	}

#content div.item .product-documenten .icon-doc {
	background: left center url(img/icon/text.png) no-repeat;
	padding-left: 20px;
}

#content div.item .product-documenten  .word {
	background-image: url(img/icon/word.png);
}

#content a.info {
	background: right bottom url(img/info.png) no-repeat;
	display: block;
	float: right;
	height: 21px;
	margin: 40px 0;
	width: 79px;
}

	#content div.item a.info:hover {
		background-position: right top;
	}

	#content div.item a.info-active {
		background: left bottom url(img/info.png) no-repeat;
		width: 94px;
	}

	#content div.item a.info-active:hover {
		background-position: left top;
	}

#content .info-hide {
	display: none;
}

/* Form
-----------------------------------------------------------------------------*/ 
#content div.error {
	background-color: #889e00;
	border: 1px solid #bcca00;
	margin: 20px 0 10px 0;
	width: 598px;
}

#content td.error p {
	background-color: #889e00;
	border: 1px solid #bcca00;
	margin: 0;
	padding: 8px 10px;
}

#content div.error h2 {
	background: none;
	margin: 10px 20px;
	font-size: 1.2em;
}

#content div.error ul {
	margin: 10px 20px;
}

#content form table {
	margin-bottom: 40px;
}

#content form table td {
	padding: 5px 0;
	margin: 0;
}

#content form label span {
	color: #889e00;
}

#content form .input {
	background: left 0px url(img/form-input.png) repeat-x;
	border: 1px solid black;
	height: 15px;
	padding: 6px 8px;
	width: 342px;
}

#content form .input:active, #content form .input:focus, #content form .input:hover, #content form .active {
	background-position: left center;
}

#content form input.error, #content form textarea.error {
	border: 1px solid orange;
}

#content form textarea {
	background-color: #dcffdc;
	border: 1px solid #000f15;
	font-family: Arial, Tahoma, Verdana;
	font-size: 0.90em;
	height: 325px;
	padding: 20px;
	width: 560px;
}

#content form button {
	padding: 5px 12px;
}

#content form .submit {
	background: #dcffdc bottom center url(img/form-submit.png) no-repeat;
	border: 0;
	cursor: pointer;
	height: 31px;
	width: 241px;
}

#content form .submit-non {
	background: #dcffdc bottom center url(img/form-submit-non.png) repeat-x;
}

#content form .submit:hover, #content form button.active, #content form .submit-non:hover {
	background-position: top center;
}

/* Links
-----------------------------------------------------------------------------*/
#content .link {
	background: top center url(img/hr-background.png) repeat-x;
	padding-top: 10px;
}

#content .link h3 {
	margin: 10px 0 -5px 0;
}

#content .link h3 a {
	color: white;
}

#content .link p {
	margin: 0;
}

/* Footer 
-----------------------------------------------------------------------------*/ 
#footer {
	background: bottom center url(img/footer-background-main.png) no-repeat;
	height: 130px;
	margin: 0 40px;
	position: relative;
	width: 940px;
}

#footer ul#language {
	height: 20px;
	top: 5px;
	right: 0;
}

#footer ul#language li a{
	font-size: 11px;
}

#footer ul#language li a {
	color: #99ccff;
}

#footer ul#language li a:hover, #footer ul#language li a.active {
	color: white;
}

#footer h2, #footer h3 {
	color: white;
	font-size: 0.80em;
	font-weight: bold;
	line-height: 1.2em;
}

#footer p, #footer ul li a, #footer table, #footer a {
	color: white;
	font-size: 12px;
	line-height: 1.2em;
}

	#footer a.link {
		text-decoration: underline;
	}
	
	#footer a:hover {
		text-decoration: none;
	}

#footer .float {
	float: left;
	margin: 20px 40px 0 0;
}