/*
Client		Eskatrans
Copyright	Robarov <http://www.robarov.be>
*/

/* MAIN LAYOUT */
/* body */
body {
	background: #333;
	color: #666;
	font: 14px/20px "Lucida Grande", Arial, sans-serif;
	}

/* typography */
h1, h2, h3, h4 {
	font-weight: normal;
	}
	h1 {
		color: #ae0b0c;
		font-size: 28px;
		font-weight: bold;
		line-height: 30px;
		padding-bottom: 18px;
		}

	h2 {
		border-bottom: 1px solid #d4d4d4;
		color: #333;
		font-size: 18px;
		letter-spacing: -0.4px;
		line-height: 20px;
		margin-bottom: 6px;
		padding: 0 0 6px 0;
		}
	h3 {
		color: #ae0b0c;
		font-size: 15px;
		font-weight: bold;
		line-height: 18px;
		padding: 0 0 6px 0;
		}

p, address, ul, ol, dl {padding: 0 0 15px;}
strong {
	font-weight: bold;
}
small {
	color: #aaa;
	font-size: 12px;
	}
em, address {font-style: normal;}
abbr,acronym {
	border-bottom:1px dotted #666;
	cursor:help;
	}
ol {
	padding-left: 20px;
	}
	ol li {
		list-style-type: decimal;
		}
ul li {
	background: url(../i/layout/bullet.gif) 0px 0px no-repeat;
	list-style-type: none;
	padding-left: 20px;
	}

/* links */
a { color: #0d69ab; }
a:hover {color: #ae0b0c;text-decoration: none; }

/* general classes */
.clear      { clear: both; }
.left       { float: left; }
.right      { float: right; }
img.left, img.right { display: inline; }
// img.left { margin-right: 10px; }
// img.right { margin-left: 10px; }

.gallery{
    clear: both;
    margin: 0 -5px;
    float: left;
    text-align: center;
    width: 100%;
}
.gallery img {
	max-width: 31%;
	display: block;
	float: left;
	margin: 10px 5px 10px;
}
.hide		{
	visibility: hidden;
	width: 0!important;
	height: 0!important;
	line-height: 0!important;
	padding: 0!important;
	margin: 0!important;
	}
.text-right { text-align: right; }
.block { display: block; }
.none { display: none; }
.border { border: 5px solid #e5e5e5; }
.certificaat { margin-right: 10px; display: inline; }
.certificaat.last { margin: 0; }
a.more {
	background: url(../i/layout/more.gif) 100% 50% no-repeat;
	padding-right: 10px;
	text-decoration: none;
	}
.half {
	width: 440px;
	padding-top: 40px;
}


/* header */
#headerwrap {
	background: #333;
	border-top: 5px solid #292929;
	height: 75px;
	overflow: hidden;
	}

#header {
	height: 75px;
	margin: 0 auto;
	position: relative;
	width: 960px;
	}
	#header h1 {
		background: url(../i/layout/logo.gif) 0 0 no-repeat;
		height: 30px;
		left: 0;
		padding: 0;
		position: absolute;
		top: 20px;
		width: 260px;
		z-index: 20;
		}
	#header h1 a {
		display: block;
		height: 30px;
		overflow: hidden;
		text-decoration: none;
		text-indent: -999em;
		width: 260px;
		}

/* nav */
#nav {
	padding: 0;
	position: absolute;
	right: 0px;
	top: 10px;
	width: 700px;
	z-index: 10;
    text-align: right;
	}
	#nav li {
		background: none;
		display: inline-block;
        vertical-align: middle;
		font-size: 13px;
		font-weight: bold;
        padding: 0;
        text-align: center;
	}
	#nav li.last {border: none;}
	#nav a {
		color: #ccc;
        display: block;
        padding: 10px 6px;
        max-width: 100px;
		position: relative;
		line-height: 16px;
		text-decoration: none;
		}
	#nav a:hover {
		color: #fff;
		}
	#nav li.active a, #nav li.active a:hover {
		background: #666;
		color: #fff;
	}

/* content */
#contentwrap {
	background: #ededed;
	border-bottom: 5px solid #d5d5d5;
	border-top: 15px solid #ae0b0c;
	padding-top: 20px;
	}

#content {
	background: #ededed;
	margin: 0 auto;
	padding-bottom: 40px;
	overflow: hidden;
	width: 960px;
	}
	#main {
		display: inline;
		float: left;
		width: 700px;
		}
	#sidebar {
		float: right;
		padding-top: 9px;
		width: 220px;
		}
	#sidebar img{
		margin-top: 20px;
	}
/* subnav */
#subnav {
	display: inline;
	float: left;
	padding: 0;
	margin-right: 20px;
	width: 185px;
	}
	#subnav ul {
		background: #95d2e7;
		float: none;
		margin: 0px;
		padding-top: 8px;
		padding-bottom: 5px;
		display: none;
		}
	#subnav li.active ul {display: block;}
	#subnav li {
		background: #09c;
		padding: 0px;
		margin: 0px;
		border-bottom: 1px solid #fff;
		}
	#subnav li a {
		background: #09c;
		color: #fff;
		display: block;
		font-size: 12px;
		font-weight: bold;
		line-height: 18px;
		margin: 0px;
		padding: 6px 10px;
		text-transform: uppercase;
		text-decoration: none;
		}
	#subnav li a:hover {background: #069;color: #fff;}
	#subnav li.active a {
		background: #002756;
		color: #89d9f5;
		}
	#subnav li.active li {
		background: #95d2e7 url(../i/layout/bullet-subnav.gif) 10px 0px no-repeat;
		border: 0px;
		margin-bottom: 3px;
		}
	#subnav li.active li a, #subnav li.active li a:hover {
		background: #95d2e7 url(../i/layout/bullet-subnav.gif) 10px 0px no-repeat;
		color: #069;
		padding: 0 10px 0 20px;
		text-transform: none;
		font-size: 12px;
		line-height: 14px;
		}
	#subnav li.active li a:hover {color: #002756;}
	#subnav li li.active a, #subnav li li.active a:hover {
		color: #002756;
		}

/* crumb */
#crumb {
	color: #666;
	cursor: default;
	border-bottom: 1px solid #e5e5e5;
	font-size: 12px;
	font-weight: bold;
	line-height: 18px;
	margin-bottom: 5px;
	padding: 6px 0;
	text-transform: uppercase;
	}
	#crumb a {
		color: #999;
		display: block;
		float: left;
		text-decoration: none;
		}
	#crumb a:hover {color: #333;}
	#crumb span {
		background: #fff url(../i/layout/crumb-sep.gif) 50% 50% no-repeat;
		float: left;
		width: 20px;
		position: relative;
		height: 0 !important;
		padding-top: 18px;
		overflow: hidden;
		}

/* footer */
#footer {
    background: #333;
    clear: both;
    color: #ccc;
    font-size: 12px;
    margin: 0 auto;
    padding: 20px 0 60px 0;
    text-align: center;
    position: relative;
    width: 960px;
	}
	#footer li {
		background: none;
		display: inline;
		padding: 0 20px;
		}
	#footer p, #footer p a {
		color: #999;
		font-size: 11px;
		}
	#footer li a { color: #ccc; }
	#footer a {
		text-decoration: none;
		}
	#footer a:hover {color: #fff;}



/* PAGES */
/* home */
#intro {
	background: url(../i/layout/bg-intro.jpg) 0 0 no-repeat #333333;
	color: #efefef;
	height: 240px;
	margin-bottom: 20px;
	padding: 100px 40px 20px 580px;
	width: 360px;
	}
	#intro h1 {
		border-bottom: 1px solid #505151;
		color: #fff;
		font-size: 20px;
		padding-bottom: 9px;
		margin-bottom: 9px;
		text-transform: uppercase;
		}

#attention {
    clear: both;
    border: solid #F00 1px;
    margin: 20px 0;
    padding: 10px 10px 0;
    font-weight: bold;
}
.box {
	background: #fff url(../i/layout/bg-box.gif) 0 0 no-repeat;
	border: 1px solid #d4d4d4;
	display: inline;
	float: left;
	margin-right: 20px;
	padding: 19px;
	padding-top: 180px;
	position: relative;
	width: 280px;
	padding-bottom: 30px;
	}
	.box img {
		left: 24px;
		position: absolute;
		top: 25px;
		}

	.box p { padding: 0; }
    .industry {
        left: auto !important;
        top: auto !important;
        position: relative !important;
    }
#jobbox, #contactbox {
	margin: 0;
	padding-top: 10px;
	width: 240px;
	padding-bottom: 16px;
	}
#jobbox {
	background: #ae0b0c;
	border-color: #920505;
	margin-bottom: 15px;
	}
	#jobbox h2 {
		border-color: #920505;
		color: #fff;
	}
	#jobbox a { color: #ffb6b6; }
	#jobbox a:hover { color: #fff; }

#contactbox {
	background: #e7e7e7;
	margin-right: 20px;
	}

.slideshow {
	border: 5px solid #e5e5e5;
	float: right;
	height: 300px;
	margin-left: 10px;
	width: 400px;
}
.slideshow img {
	max-width: 400px;
}
.slideshow-section {
	width: 840px;
    margin: 0 auto;
}


/* contact */
form {
    background: #fff;
	border: 1px solid #d4d4d4;
    margin-bottom: 18px;
    padding:15px 0 20px 20px;
    overflow: hidden;
    width: 678px;
}

form fieldset { float: left; overflow: hidden; }

form fieldset div {
    float: left;
    display:block;
    margin-bottom: 9px;
	position: relative;
    width: 335px;
}
    form fieldset div.textarea {
        float: none;
        width: 670px;
        margin: 0;
    }

    form fieldset div label {
        float: left;
        width: 335px;
    }

        form fieldset div label em,
        form div.button em { color: #cf0101; }

    form fieldset div input, form fieldset div textarea {
        border: 1px solid #ddd;
        border-bottom-color: #ccc;
        border-right-color: #ccc;
        float: left;
        font: 13px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
		padding: 4px;
        width: 305px;
    }

    form fieldset div textarea {
        height: 120px;
        width: 640px;
    }
    form fieldset div.error input, form fieldset div.error textarea {
    	background: #fdefef;
    	border-color: #e13838;
    	border-bottom-color: #cf0101;
    	border-right-color: #cf0101;
    	}

    form fieldset div.errormsg {
        background: #e13838;
        color: #fff;
        float: right;
        font-size: 11px;
        height: 18px;
        position: absolute;
        right: 20px;
        text-align: center;
        top: 0px;
        width: auto;
        padding: 0px 3px;
    	}

        form fieldset div.errormsg p { padding:0; margin:0;}

        form div.button { clear: both; display: block; width: 900px;}
        form div.button input {background: #333;color:#fff; overflow:visible; font-size: 13px; font-weight:bold; border:0; padding: 0 10px; height:30px;float: left;margin-right: 20px;}
        form div.button p {float: left;padding: 0;line-height: 30px;font-size: 11px;}

#errors,
#success{
    background:#cf0101;
    color: #fff;
    padding: 10px;
    text-align: center;
	}
    #errors h3,
    #success h3{ color: #fff; }
    #errors p, #success p {padding: 0;}

#success {
    background: #AE0B0C;
    margin-bottom: 20px;
	}
#map {
    width: 960px;
    height: 320px;
    margin-bottom: 20px;
	}
.center{
	padding-top: 20px;
	text-align: center;
}