/*----------------------------------------------------------------------------- 
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: #889e00 top center url(img/candybar-background.png) repeat-x;
	height: 305px;
	position: absolute;
	top: 170px;
	width: 100%;
}

#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: 170px;
	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: 0.75em;
	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 {
	display: block;
	height: 30px;
}

ul#header-navigation a:hover {
	color: #889e00;
}

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

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

ul#header-navigation span.invisible {
	display: none;
}

ul#header-navigation .nav-custom a {
	color: white;
	font-size: 9pt;
	font-weight: bold;
	height: 20px;
	padding: 9px 14px;
	text-shadow: #064260 1px 1px 0;
}

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

ul#header-navigation #nav-welkom a {
	background: center center url(img/nav/navigation-welkom.png) no-repeat;
	width: 75px;
}

ul#header-navigation #nav-welkom a:hover, ul#header-navigation #nav-welkom a.active {
	background-image: url(img/nav/navigation-welkom-active.png);
}

ul#header-navigation #nav-info a {
	background: center center url(img/nav/navigation-info.png) no-repeat;
	width: 49px;
}

ul#header-navigation #nav-info a:hover, ul#header-navigation #nav-info a.active {
	background-image: url(img/nav/navigation-info-active.png);
}

ul#header-navigation #nav-projecten a {
	background: center center url(img/nav/navigation-projecten.png) no-repeat;
	width: 86px;
}

ul#header-navigation #nav-projecten a:hover, ul#header-navigation #nav-projecten a.active {
	background-image: url(img/nav/navigation-projecten-active.png);
}

ul#header-navigation #nav-producten a {
	background: center center url(img/nav/navigation-producten.png) no-repeat;
	width: 90px;
}

ul#header-navigation #nav-producten a:hover, ul#header-navigation #nav-producten a.active {
	background-image: url(img/nav/navigation-producten-active.png);
}

ul#header-navigation #nav-verhuur a {
	background: center center url(img/nav/navigation-verhuur.png) no-repeat;
	width: 75px;
}

ul#header-navigation #nav-verhuur a:hover, ul#header-navigation #nav-verhuur a.active {
	background-image: url(img/nav/navigation-verhuur-active.png);
}

ul#header-navigation #nav-contact a {
	background: center center url(img/nav/navigation-contact.png) no-repeat;
	width: 71px;
}

ul#header-navigation #nav-contact a:hover, ul#header-navigation #nav-contact a.active {
	background-image: url(img/nav/navigation-contact-active.png);
}

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

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

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

#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: 2.4em;
	margin: -4px 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;
}

#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, #content div.project-wrapper p {
	font-size: 0.85em;
	line-height: 1.2em;
}

#candybar .candybar-item h2, #content div.project-wrapper h2 {
	font-size: 2.0em;
	letter-spacing: -0.05em;
	margin: 0 0 10px 0;
}

#candybar .candybar-item h3 {
	font-size: 1.2em;
	margin: 20px 0 5px 0;
}

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

#candybar .candybar-item ul.summary li, #content div.project-wrapper ul.summary li {
	font-size: 0.75em;
	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 {
	font-size: 1.0em;
	padding: 0;
	margin: 0;
}

#candybar .candybar-item .image, #content div.project-wrapper .image {
	background-color: white;
	border: 1px solid #bcca00;
	float: right;
	height: 220px;
	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: #011f2b;
	bottom: 1px;
	color: white;
	font-size: 1.0em;
	margin: 0 0 -2px 0;
	padding: 8px 16px;
	position: absolute;
	text-align: left;
	width: 268px;
	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.png) no-repeat;
	display: inline-block;
	float: left;
	height: 21px;
	margin: -2px 8px -3px -10px;
	overflow: hidden;
	width: 21px;
}

#candybar .img-prev {
	background-image: url(img/img-toggle-blue.png);
}

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

#candybar .img-next {
	background-image: url(img/img-toggle-blue.png);
}

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

#candybar #welkom h2 {
	background: left top url(img/title/candybar-welkom.png) no-repeat;
	height: 34px;
	width: 140px;
}

#candybar #informatie h2 {
	background: left top url(img/title/candybar-informatie.png) no-repeat;
	height: 34px;
	width: 215px;
}

#candybar #projecten h2 {
	background: left top url(img/title/candybar-projecten.png) no-repeat;
	height: 34px;
	width: 215px;
}

#candybar #producten h2 {
	background: left top url(img/title/candybar-producten.png) no-repeat;
	height: 34px;
	width: 231px;
}

#candybar #verhuur h2 {
	background: left top url(img/title/candybar-verhuur.png) no-repeat;
	height: 34px;
	width: 138px;
}

#candybar #contact h2 {
	background: left top url(img/title/candybar-contacteer-ons.png) no-repeat;
	height: 34px;
	width: 252px;
}

#candybar #h1-000 {
	background: left center url(img/title/000.png) no-repeat;
	height: 45px;
	margin: 0 0 20px 0;
	width: 262px;
}

#candybar #h1-403 {
	background: left center url(img/title/403.png) no-repeat;
	height: 45px;
	margin: 0 0 20px 0;
	width: 308px;
}

#candybar #h1-404 {
	background: left center url(img/title/404.png) no-repeat;
	height: 45px;
	margin: 0 0 20px 0;
	width: 336px;
}

#candybar #h1-500 {
	background: left top url(img/title/500.png) no-repeat;
	height: 45px;
	margin: 0 0 20px 0;
	width: 214px;
}

#candybar .candybar-item .button {
	background: white top center url(img/button-background.png) repeat-x;
	bottom: 0;
	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: 1.05em;
	margin: 0;
}

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

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

#candybar .candybar-item #info-informatie h3 a {
	background: center 15px url(img/title/candybar-info-informatie.png) no-repeat;
	width: 220px;
}

#candybar .candybar-item #info-projecten h3 a {
	background: center center url(img/title/candybar-info-projecten.png) no-repeat;
	width: 312px;
}

#candybar .candybar-item #info-producten h3 a {
	background: center center url(img/title/candybar-info-producten.png) no-repeat;
	width: 292px;
}

#candybar .candybar-item #info-verhuur h3 a {
	background: center 15px url(img/title/candybar-info-verhuur.png) no-repeat;
	width: 292px;
}

#candybar .candybar-item #info-contact h3 a {
	background: center center url(img/title/candybar-info-contact.png) no-repeat;
	width: 284px;
}

#candybar .candybar-item #keer-terug  h3 a{
	background: center center url(img/title/button-404.png) no-repeat;
	width: 267px;
}

/* 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;
	font-size: 1.8em;
	letter-spacing: -0.02em;
	margin: 8px 0 0 0;
	width: 600px;
}

#content h2, #content h3, #content h4, #content h5, #content h6 {
	margin: 12px 0 0 0;
}

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

#content  p {
	line-height: 1.3em;
}

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

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

#content ul li {
	font-size: 0.85em;
	line-height: 1.8em;
}

#content #h1-welkom {
	background: left top url(img/title/welkom.png) no-repeat;
	height: 32px;
	margin: 10px 0 -6px 0;
}

#content #h1-projecten {
	background: left top url(img/title/projecten.png) no-repeat;
	height: 32px;
	margin: 10px 0 -6px 0;
}

#content #h1-verhuur {
	background: left top url(img/title/materieel-verhuur.png) no-repeat;
	height: 22px;
	margin: 10px 0 12px 0;
	width: 251px;
}

#content #h1-producten {
	background: left top url(img/title/producten.png) no-repeat;
	height: 32px;
	margin: 10px 0 -6px 0;
}

#content #h1-contact {
	background: left top url(img/title/neem-contact-op.png) no-repeat;
	height: 32px;
	margin: 10px 0 -6px 0;
}

#content #h2-informatie {
	background: left bottom url(img/title/informatie.png) no-repeat;
	height: 22px;
}

#content #h2-bedrijfsgegevens {
	background: left top url(img/title/bedrijfsgegevens.png) no-repeat;
	height: 22px;
}

#content #h2-zakenrelaties {
	background: left bottom url(img/title/zakenrelaties.png) no-repeat;
	height: 22px;
}

#content #informatie-tekst {
	background: right top url(img/informatie-tekst.png) no-repeat;
}

#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 div.background-informatie {
	background: bottom center url(img/informatie-background.png) no-repeat;
	padding-bottom: 20px;
}

#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 h4 {
	background: none;
}

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

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

#content div.project-wrapper .image p {
	background-color: #889e00;
}

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

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

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

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

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

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

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

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

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

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

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

#content div.product p {
	margin-top: 20px;
	margin-left: 180px;
	width: 420px;
}

/* Verhuur
-----------------------------------------------------------------------------*/
.materieel-verhuur {
	background: top center url(img/content-background-big.png) no-repeat;
	padding: 40px 0;
}

	.materieel-verhuur img {
		margin: 0;
	}

	.materieel-verhuur .info {
		float: right;
		position: relative;
		width: 600px;
	}

		#content .materieel-verhuur .info h2 {
			background: 0;
			padding: 0 0 10px 0;
		}

	.materieel-verhuur .tekst {
		float: left;
		margin: 10px 40px 0 0;
		width: 340px;
	}

	.materieel-verhuur .prijzen {
		float: left;
		padding: 0;
			margin: -10px 0 0 0;
		width: 220px;
	}
	
		#content .materieel-verhuur .prijzen h3 {
			background: 0;
			margin: 15px 0 0 0;
		}
		
		#content .materieel-verhuur .prijzen table {
			margin: 10px 0;
		}
		
			#content .materieel-verhuur .prijzen table td{
				padding: 4px 16px 4px 0;
			}
		
		#content .materieel-verhuur .prijzen ul {
			margin: 5px 0;
		}

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

#content td.error {

}

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

#content div.error h2 {
	margin: 20px 20px 0 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 {
	font-size: 1em;
}

#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 {
	color: white;
	font-size: 0.75em;
	line-height: 1.2em;
}

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