@charset "utf-8";
@import url("/css/reset.css");
@import url("/css/typography.css");

html {
	overflow-y: scroll;
	overflow-x: hidden;
}

html, body {
	height: 100%;
}
	div#container {
		position: relative;
		min-height: 100%;
	}
		div#menu {
			padding-top: 270px;
		}
			div#menu ul, div#content, div#footer div {
				width: 912px;
			}
			div#menu ul, div#content {
				margin: 0 auto;
			}
				div#menu li {
					float: left;
				}
					div#menu a {
						display: block;
						padding: 0.75em 12px;
						font-weight: bold;
					}
						span#logo {
							position: absolute;
							top: 220px;
							left: 50%;
							z-index: 10;
							margin-left: 231px;
							display: block;
							width: 219px;
							height: 50px;
							padding-right: 9999em;
							background: #1e3499 url("/css/images/logo-tomeloos.gif") no-repeat top left;
						}
						
		div#content {
			margin-top: 2.25em;
			padding-bottom: 8.633em;
		}
			div#main {
				float: left;
				width: 503px;
			}
				div#less, div#more {
					padding-right: 24px;
				}
				div#more {
					padding-top: 1.4em;
					background: url("/css/images/bg_more.gif") no-repeat top right;
				}
					div#more li {
						float: left;
						margin-right: 22px;
						width: 145px;
					}
					div#more li.last {
						margin-right: 0;
					}
				div#main h1 {
					margin-bottom: 0.643em;
				}
				div#main p {
					margin-bottom: 1.4em;
				}
				div#main h2 {
					margin-bottom: 0.938em
				}
				body.werk div#main li, body.klanten div#main li {
					margin-bottom: 7px;
				}
					body.werk div#main ul a {
						display: block;
						width: 461px;
						overflow: hidden;
						padding: 7px 8px;
						border: 1px solid #e5e5e5;
					}
						body.werk div#main ul span {
							float: right;
							width: 310px;
						}
						body.werk div#main ul img {
							float: left;
						}
				body.werk div#main li.last {
					margin-bottom: 0;
				}
				body.klanten div#main li {
					float: left;
					margin-right: 7px;
				}
				body.klanten div#main li.last {
					margin-right: 0;
				}
					body.klanten div#main ul a {
						display: block;
						padding: 6px 5px;
						width: 143px;
						border: 1px solid #e5e5e5;
					}
					body.werk div#main ul a:focus, body.werk div#main ul a:hover, body.werk div#main ul a:active, body.klanten div#main ul a:focus, body.klanten div#main ul a:hover, body.klanten div#main ul a:active {
						border-color: #ccc;
					}
						body.klanten div#main ul img {
							display: block;
							margin-bottom: 8px;
						}
						body.klanten div#main ul br {
							display: none;
						}
				
			div#sub {
				float: right;
				width: 409px;
			}
				div#sub h2 {
					margin: 0.6875em 23px 0.6875em;
				}
				
				body.project div#sub h2 {
					margin-left: 19px;
				}
				
				body.werk div#sub h2, body.klanten div#sub h2, body.mensen div#sub h2 {
					margin-bottom: /*0.875*/0.375em;
				}
				body.contact div#sub h2 {
					margin-bottom: 1.3125em;
				}
				div#list {
					position: relative;
					border-left: 1px solid #e5e5e5;
					padding-bottom: 4em;
				}
				body.contact div#list {
					padding-left: 22px;
					padding-right: 22px;
				}
					div#list div.bg_top, div#list div.bg_bottom {
						position: absolute;
						left: -1px;
						width: 1px;
						background-repeat: no-repeat;
						background-position: top left;
					}
					div#list div.bg_top {
						top: 0;
						height: 23px;
						background-image: url("/css/images/bg_list_top.gif");
					}
					div#list div.bg_bottom {
						bottom: 0;
						height: 64px;
						background-image: url("/css/images/bg_list_bottom.gif");
					}
						div#sub li a {
							display: block;
							padding: 0.917em 22px 1em 0;
							background: url("/css/images/bg_list-item.gif") no-repeat bottom left;
						}
						div#sub li.active a {
							position: relative;
							left: -1px;
							padding-left: 1px;
							background-color: #fff;
						}
							div#sub li span {
								display: block;
								padding-left: 22px;
							}
							body.project div#sub li span {
								padding-left: 19px;
							}
							/*div#sub li a:focus span.background, div#sub li a:hover span.background, div#sub li a:active span.background {
								padding-right: 22px;
								background: url("/css/images/bg_link.gif") no-repeat center right;
							}*/
							div#sub li.active span.background {
								padding-right: 0;
								background-image: url("/css/images/bg_active.gif") !important;
								background-repeat: no-repeat;
								background-position: 5px center !important;
							}
							body.project div#sub li.active span.background {
								background-position: 5px 1.5em !important;
							}
						body.project div#sub li a {
							width: 386px;
							padding-bottom: 0.167em;
						}
							/*body.project div#sub li a:focus span.background, body.project div#sub li a:hover span.background, body.project div#sub li a:active span.background {
								background-position: top right;
							}
							body.project div#sub li.active a span.background {
								background-position: 5px top !important;
							}*/
							body.project div#sub li a span.text {
								display: inline-block;
								margin-top: 0;
								margin-bottom: 10px;
								padding: 0;
								background-color: #fff;
								vertical-align: middle;
							}
							body.project div#sub li span.image {
								display: inline-block;
								width: 46px;
								height: 46px;
								padding: 1px 5px 5px 2px;
								background: #fff url("/css/images/bg_project.gif") no-repeat top left;
								vertical-align: middle;
							}
					div#sub a.more {
						margin: 1.083em 22px 0;
					}
					body.contact div#sub a.more {
						margin: 0;
					}
					
		div#projects {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
			width: 100%;
			height: 270px;
			overflow: hidden;
			background-color: #fff;
		}
			div#projects ul {
				position: relative;
				width: 100%;
				height: 100%;
			}
				div#projects li {
					position: absolute;
					width: 100%;
					height: 100%;
					overflow: hidden;
				}
					div#projects h3 {
						position: absolute;
						bottom: 0;
						left: 50%;
						margin-left: -456px;
						width: 591px;
						height: 50px;
						overflow: hidden;
						padding: 0 81px 0 15px;
						background: url("/css/images/bg_projects_2.png") repeat top left;
						line-height: 50px;
						font-weight: bold;
						font-size: 1.5em;
						color: #fff;
					}
					div#projects img {
						position: relative;
						z-index: -2;
						width: 100%;
						min-width: 100%;
						min-height: 270px;
					}
					div#projects div.background {
						position: absolute;
						z-index: -2;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 64px;
						background: url("/css/images/bg_projects.png") repeat-x bottom left;
					}
			div#nav {
				position: absolute;
				z-index: 10;
				right: 50%;
				bottom: 0;
				margin-right: -216px;
				height: 50px;
				overflow: hidden;
			}
				div#nav button {
					position: relative;
					float: left;
					margin: 13px 0 0 1px;
					width: 25px;
					height: 24px;
					padding: 0;
					border: none;
					background-color: transparent;
					cursor: pointer;
					line-height: 24px; /* IE8 */
					text-indent: -9999em;
				}
					div#nav button span {
						position: absolute;
						left: 0;
						top: 0;
						width: 100%;
						height: 24px;
					}
						div#nav button span.ff {
							left: -3px;
							top: -5px;
						}
					div#nav button span.background {
						z-index: -1;
						opacity: 0.2;
						background-color: #000;
					}
					div#nav button span.foreground {
						z-index: 1;
						background-repeat: no-repeat;
						opacity: 0.5;
					}
						div#nav button.previous span.foreground {
							background-image: url("/css/images/bg_previous.png");
							background-position: 8px center;
						}
						div#nav button.next span.foreground {
							background-image: url("/css/images/bg_next.png");
							background-position: 10px center;
						}
					div#nav button:focus span.background, div#nav button:hover span.background, div#nav button:active  span.background {
						opacity: 0.3;
					}
					div#nav button:focus span.foreground, div#nav button:hover span.foreground, div#nav button:active  span.foreground {
						opacity: 1;
					}
					
		div#footer {
			position: absolute;
			bottom: 0;
			width: 100%;
			padding: 1.2em 0;
			border-top: 1px solid #e5e5e5;
			text-transform: uppercase;
		}
			div#footer div {
				margin: 0 auto;
			}
			div#footer address, div#footer p {
				display: inline;
			}
			div#footer span {
				padding-right: 1em;
				margin-right: 0.7em;
				border-right: 1px solid #e5e5e5;
			}
			div#footer br {
				display: none;
			}


a.more, a.back {
	display: inline-block;
	padding-left: 16px;
	background-repeat: no-repeat;
	background-position: center left;
}
a.more {
	background-image: url("/css/images/bg_link.gif")
}
a.back {
	background-image: url("/css/images/bg_back.gif")
}



/* LIGHTBOX */

/**
 * jQuery lightBox plugin
 * This jQuery plugin was inspired and based on Lightbox 2 by Lokesh Dhakar (http://www.huddletogether.com/projects/lightbox2/)
 * and adapted to me for use like a plugin from jQuery.
 * @name jquery-lightbox-0.5.css
 * @author Leandro Vieira Pinho - http://leandrovieira.com
 * @version 0.5
 * @date April 11, 2008
 * @category jQuery plugin
 * @copyright (c) 2008 Leandro Vieira Pinho (leandrovieira.com)
 * @license CC Attribution-No Derivative Works 2.5 Brazil - http://creativecommons.org/licenses/by-nd/2.5/br/deed.en_US
 * @example Visit http://leandrovieira.com/projects/jquery/lightbox/ for more informations about this jQuery plugin
 */
#jquery-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
}
#jquery-lightbox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
}
#jquery-lightbox a img { border: none; }
#lightbox-container-image-box {
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
}
#lightbox-container-image { padding: 10px; }
#lightbox-loading {
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
}
#lightbox-nav {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
}
#lightbox-container-image-box > #lightbox-nav { left: 0; }
#lightbox-nav a { outline: none;}
#lightbox-nav-btnPrev, #lightbox-nav-btnNext {
	width: 49%;
	height: 100%;
	/*zoom: 1;*/
	display: block;
}
#lightbox-nav-btnPrev { 
	left: 0; 
	float: left;
}
#lightbox-nav-btnNext { 
	right: 0; 
	float: right;
}
#lightbox-container-image-data-box {
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	overflow: auto;
	width: 100%;
	padding: 0 10px 0;
}
#lightbox-container-image-data {
	padding: 0 10px; 
	color: #666; 
}
#lightbox-container-image-data #lightbox-image-details { 
	width: 70%; 
	float: left; 
	text-align: left; 
}	
#lightbox-image-details-caption { font-weight: bold; }
#lightbox-image-details-currentNumber {
	display: block; 
	clear: left; 
	padding-bottom: 1.0em;	
}			
#lightbox-secNav-btnClose {
	width: 66px; 
	float: right;
	padding-bottom: 0.7em;	
}
#dropin { z-index: 100; }