/* Define basic HTML tags */

	html {
		height: 100%;
		width: 100%;
	}
	body {
		background-color: white;
		margin: 10px 0;
		padding: 0;
		height: 100%;
		width: 100%;
		font: 75% "Trebuchet MS", Arial, sans-serif;
		font-style: normal;
		font-weight: normal;
		color: #666666;
		line-height: 1.5em;
		text-align: center;
	}
	img {
		border: none;
	}
	a {
		color: #2fadeb;
		text-decoration: none;
	}
	a:hover {
		color: white;
		background-color: #2fadeb;
	}
	a.noHover:hover {
		background-color: transparent !important;
	}
	
	ul, li {
		/*padding: 0;
		margin: 0 0 0 20px;
		list-style-type: square;*/
	}
	form {
		margin: 0;
		padding: 0;
	}
	input {
		font: 100% "Trebuchet MS", Arial, sans-serif;
		color: #333333;
		border: 1px solid #abadb3;
	}
	select {
		font: 100% "Trebuchet MS", Arial, sans-serif;
		color: #333333;
	}
	textarea {
		font: 100% "Trebuchet MS", Arial, sans-serif;
		color: #333333;
	}
	h1 {
		font-size: 140%;
		color: #7499c5;
		font-style: italic;
		margin: 0;
	}	
	h2 {
		height: 36px;
		padding: 6px 0 0 54px;
		margin: 0;
		font: 20px Georgia, "Times New Roman", Times, serif;
		color: #333333;
	}
	h3 {
		margin: 0;
		font: 130% "Trebuchet MS", Arial, sans-serif;
		font-weight: bold;
		color: #333333;
	}
	
/* classes */

	.doClear {
		clear: both;
		height: 0;
		margin: 0;
		padding: 0;
		line-height: 0;
		overflow: hidden;
	}
	
	.thumb {border: 3px double #cccccc;}
	
	.toSite {vertical-align: middle;}
	
	img.ro:hover {
		background-color: white !important;
	}
		
/* layout */

	#top {visibility: hidden;}

	#container {
		width: 900px;
		margin: 0 auto;
		padding: 0 35px;
		border-top: 10px solid #0091b2;
		background-image: url(../images/header_bg.gif);
		background-repeat: repeat-x;
		background-position: top;
		text-align: left;
	}
	
		#header {
			position: relative;
			top: 28px;
			width: 100%;
		}
		
			#logo {
				position: absolute;
				left: 0;
			}
			
			#navigation {
				position: absolute;
				right: 0;
				margin: 0;
				padding: 0;
			}
			
			#navigation span {
				display: block;
				letter-spacing: -1px;
			}
			#navigation li {
				float: left;
				list-style-type: none;
			}

			ul.nl li {
				margin-left: 58px;
			}

			ul.en li {
				margin-left: 72px;
			}

			#navigation li a:hover {background-color: transparent;}
			#navigation .menuTitle {
				font: 175% "Trebuchet MS", Arial, sans-serif;
				font-weight: bold;
				color: #333333;
			}
			#navigation .menuTitleActive {
				font: 175% "Trebuchet MS", Arial, sans-serif;
				font-weight: bold;
				color: #2fadeb;
			}
			#navigation li a:hover .menuTitle {
				background-color: transparent;
				color: #2fadeb;
			}
			#navigation .menuSub {
				font: 14px "Trebuchet MS", Arial, sans-serif;
				color: #acacac;
				line-height: 100%;
			}
		
		#kiosk {
			width: 100%;
			height: 177px;
			margin: 112px 0 23px 0;
		}
		
		#main {margin-bottom: 10px;}
		
			.colA {
				float: left;
				width: 560px;
				border-right: 1px solid #e8e8e8;
				padding-right: 10px;
			}
			
			.colB {
				float: right;
				width: 319px;
			}

				#main div p, #main .actAsParagraph, #main div .actAsParagraph {
					background: url(../images/paragraph_bg.gif) repeat-x top;
					padding: 20px 20px 0 20px;
					margin: 0;
					text-align: justify;	
				}

				#main .colB p, #main .colB .actAsParagraph {
					padding: 20px 0 0 0;
					text-align: center;
				}

				#main .colB p .thumb {margin-bottom: 5px;}

				#main .colB p a {font-weight: bold;}
							
		#footer {
			border-top: 1px solid #ccc;
			padding: 18px 16px 0 11px;
		}
		
			#footer .colA {
				width: 520px;
				border: none;
				padding: 0;
			}
		
				#footer #footerLogo {
					float: left;
					margin-right: 8px;
				}
				
				#footer .copyright {font-weight: bold;}	

			#footer .colB {text-align: right;}
			#footer .colB img {vertical-align: middle;}
		
		#pageBottom {height: 20px;}
		
		#lang {
			position: fixed;
			bottom: 14px;
			right: 14px;
		}

			#lang a {
				display: block;
			}

		#lang {
			_display: none; /* don't show in IE6 */
		}

/* page specific: over ons */

		body#overons #overview {
			padding-top: 14px;
			border-top: 1px solid #ccc;	
		}
		
			body#overons #overview .viewMore {
				float: right;
				margin-right: 10px;
				line-height: 30px;
			}
			body#overons #overview .viewMore img {vertical-align: middle;}
			
			body#overons #projecten {
				clear: both;
				margin: 0;
				padding: 0;
			}
	
				body#overons #projecten li {
					float: left;
					width: 25%;
					border-right: 1px dotted #cccccc;
					list-style-type: none;
					text-align: center;
				}
				
				body#overons #projecten #last {
					width: 24%;
					margin-left: 4px;
					border-right: none;
				}
				
					body#overons #projecten li div {
						display: block;
						width: 200px;
						margin: 0 auto 10px auto;
						text-align: left;
					}
						body#overons #projecten li div .thumb {margin-bottom: 0.5em;}
						body#overons #projecten li div p {
							text-align: justify;
							margin: 1em 0 0.5em 0;
						}

/* end over ons */

/* page specific: diensten */

		body#diensten #main div .thumbRight {
			float: right;
			margin: 0 20px 0 40px;
		}
		body#diensten #main div .thumbLeft {
			float: left;
			margin: 0 40px 0 20px;
		}
		
		body#diensten #main .actAsParagraph {margin-bottom: 25px;}

/* end diensten */

/* page specific: portfolio */

		body#portfolio #main .colA p {margin-bottom: 20px;}
		body#portfolio #main .colA p span {display: block;}

		body#portfolio #main .colA p .clientName {
			font: 130% "Trebuchet MS", Arial, sans-serif;
			font-weight: bold;
			color: #333333;
		}
		body#portfolio #main .colA p .visit {
			white-space: nowrap;
		}
		body#portfolio #main .colA p .thumbRight {
			float: right;
			margin-left: 20px;
			border: 3px double #cccccc;
		}
		body#portfolio #main .colA p .thumbLeft {
			float: left;
			display: block;
			margin-right: 20px;
			border: 3px double #cccccc;
		}
		
		body#portfolio #myform {}
		body#portfolio #myform div {
			clear: left;
			border-bottom: 1px solid #e8e8e8;
			line-height: 26px;
			padding: 8px 15px;
			text-align: left;
		}
		body#portfolio label {
			float: left;
			width: 66px;
			text-align: left;
		}
		body#portfolio label.full {
			display: block;
			width: 100%;
			text-align: left;
		}
		body#portfolio #myform div input {
			width: 200px;
			display: inline;
			border: 1px solid #abadb3;
		}
		body#portfolio #myform div textarea {
			width: 99%;
			border: 1px solid #abadb3;
		}
		body#portfolio #myform #submit {
			float: right;
			width: auto;
			margin: 10px 15px 20px 15px;
			padding: 0.2em 1em;
			font-size: 120%;
			font-weight: bold;
			cursor: hand; /* For Internet Explorer Browser */
			cursor: pointer; /* For Firefox Browser */
		}
		body#portfolio #myform #submit:hover {
			color: #2fadeb;
		}
		body#portfolio .inputAsterisk {
			background-color: white;
			background-image: url(../images/input_asterisk.gif);
			background-repeat: no-repeat;
			background-position: right;
		}
		body#portfolio #myform span {
			float: left;
			height: 40px;
			line-height: 40px;
			margin-left: 25px;
		}

/* end portfolio */

/* page specific: contact */

		body#contact #myform {margin-top: 10px;}
		body#contact #myform div {
			clear: left;
			border-bottom: 1px solid #e8e8e8;
			line-height: 26px;
			padding: 8px 15px;
		}
		body#contact label {
			float: left;
			width: 66px;
			text-align: left;
		}
		body#contact label.full {
			display: block;
			width: 100%;
			text-align: left;
		}
		body#contact #myform div input {
			width: 300px;
			display: inline;
			border: 1px solid #abadb3;
		}
		body#contact #myform div textarea {
			width: 99%;
			border: 1px solid #abadb3;
		}
		body#contact #myform #submit {
			float: right;
			width: auto;
			margin: 10px 15px 20px 15px;
			padding: 0.2em 1em;
			font-size: 120%;
			font-weight: bold;
			cursor: hand; /* For Internet Explorer Browser */
			cursor: pointer; /* For Firefox Browser */
		}
		body#contact #myform #submit:hover {
			color: #2fadeb;
		}

		body#contact .inputAsterisk {
			background-color: white;
			background-image: url(../images/input_asterisk.gif);
			background-repeat: no-repeat;
			background-position: right;
		}
		body#contact #myform span {
			float: left;
			height: 40px;
			line-height: 40px;
			margin-left: 25px;
		}
		
		body#contact #main .colB div {
			padding: 20px 20px 0 20px;
			font: 110% "Trebuchet MS", Arial, sans-serif;
			text-align: left;
		}

		body#contact #main .colB div #googleMaps {
			margin-top: 29px;
			font: 100% "Trebuchet MS", Arial, sans-serif;
			text-align: center;
		}

/* end contact */

/* page specific: disclaimer */


/* end disclaimer */

/* icons */

	body#overons .overOns {background: url(../images/icon_overons.png) no-repeat top left;}
	body#overons .inDeKijker {background: url(../images/icon_indekijker.png) no-repeat top left;}	
	body#overons .laatsteProjecten {
		background: url(../images/icon_laatsteprojecten.png) no-repeat top left;
		float: left;
		padding-left: 58px;
	}

	body#diensten .diensten {background: url(../images/icon_diensten.png) no-repeat top left;}	

	body#portfolio .onzeLaatsteProjecten {background: url(../images/icon_laatsteprojecten.png) no-repeat top left;}	
	body#portfolio .offerte {background: url(../images/icon_offerte.png) no-repeat top left;}

	body#contact .contact {background: url(../images/icon_contact.png) no-repeat top left;}
	body#contact .locatie {background: url(../images/icon_locatie.png) no-repeat top left;}

	body#disclaimer .disclaimer {background: url(../images/icon_overons.png) no-repeat top left;}