/******************************************
Website : www.bijkon.nl
CSS : Lautenbag Reclame (Diederik Dijkstra)
E-mail: info@lautenbag.nl
WWW: http://www.lautenbag.nl
---------------------------------------
CSS bestand vrijgegeven onder C.C. licentie:
http://creativecommons.org/licenses/by-sa/2.0/nl/
******************************************/

html,body { margin:0; padding:0;}
a img { border: 0; }
:-moz-any-link:focus { outline: none; }

/*LAYOUT
******************************************/

body{
	font: normal 12px/18px Arial, sans-serif;
	text-align: center;
	background: transparent url('/img/bg.jpg') center top fixed no-repeat;}

div#top{
	height: 33px;
	margin: 0 auto;
	background: transparent url('/img/top.jpg') left top no-repeat;}

div#header{
	width: 780px;
	height:80px;
	line-height:80px;
	margin: 0 0 0 80px;
	padding:0;
	height: 120px;
	width: 780px;
	background: transparent url('/img/header.png') left top no-repeat;}

div#menu{
	height: 50px;
	width: 780px;
	margin: 0 0 20px 80px;
	padding: 0;
	background: transparent url('/img/menu.jpg') center top no-repeat;}

div#container{
	width:940px;
	margin:0 auto;
	text-align:left}

div#content{
	float:left;
	display: inline;
	width:540px;
	margin: 0 0 0 80px;}

div#sidebar{
	float:right;
	display: inline;
	width:220px;
	margin: 0 80px 0 0;}

div#table{
	background: transparent url('/img/table.png') left bottom no-repeat;
	margin: 0;
	clear:both;
	width:940px;}

div#actueleprojecten{
	margin: 0;
	background: #fff url('/img/actueleprojecten.jpg') left -1px repeat-x;}

div#actueleprojecten table{
	margin: 15px 0 0 0;}
	
div#footer{
	height: 90px;
	background: transparent url('/img/footer.png') left -20px no-repeat;
	color: #FFF}

/*HOME
******************************************/

div#home{
	float: left;
	display: inline;
	height: 250px;
	width: 540px;
	margin: 0 0 20px;
	background: transparent url('/img/slideshow.png') center top no-repeat;}
	
div#slideshow{
	float: left;
	display: inline;
	width: 518px;
	height: 228px;
	z-index: 0;
	margin: 11px 0 0 11px;}	

div#aanbieding{
	float: left;
	display: inline;
	width: 220px;
	height: 250px;
	margin: 0;
	background: transparent url('/img/aanbieding.png') left top no-repeat;}

div#aanbiedingcontent{
	overflow:scroll;
  overflow-x:hidden;
	height: 195px;
	margin: 0 0 0 5px;
	width: 205px;
	font: normal 11px/15px Arial, sans-serif;
	color: #333;}
	
/*JQUERY
******************************************/	
div#jquery{
	margin: 0 0 15px;}

div.thumbs{
	text-align: center;
	padding: 2px;}
		
div#table div#jquery img{
	margin: 0;}

#largeImg {
	border: solid 1px #0a306f;}
	
.thumbs img {
	border: solid 1px #fff;
	background-color: #fff;
	width: 48px;
	height: 48px;
	padding: 1px;
	margin: 0;}
	
.thumbs img:hover {
	border-color: #0a306f;}

/*TABEL
******************************************/

table#inhoud{
	width: 540px;
	margin-bottom: 20px;
	color: #333;}

table#inhoud tr,
table#inhoud tr td{
	margin: 0;
	padding: 0;}

table#inhoud tr td.zk{
	background: #efefef url('/img/table_zk.gif') bottom left repeat-x;}

table#inhoud tr td.zk2{
	background: #efefef url('/img/table_zk2.gif') bottom left repeat-x;}
		
table#inhoud img{
	margin: 0;
	padding: 0;}		

img.projectthumb{
	float: left;
	display: inline;
	margin: 0;
	padding: 0;
	border: solid 1px #0a306f;}

/*TYPOGRAFIE
******************************************/

p{ margin: 0 0 15px; padding: 0;}
div#aanbiedingcontent p{ margin: 0; padding: 0;}

/*TITEL*/
div.titel, div.blauwtitel{
	width: 100%;
	height: 50px;
	background-color: transparent}

div.titel table, div.blauwtitel table{
	border: 0;
	width: 100%;
	height: 35px;
	background-color: transparent}

div.titel table tr td.links{
	width: 10px;
	background: transparent url('/img/titel_l.png') left top no-repeat;}

div.blauwtitel table tr td.links{
	width: 10px;
	background: transparent url('/img/blauwtitel_l.jpg') left top no-repeat;}

div.titel table tr td{
	background: transparent url('/img/titel.jpg') left top repeat-x;}

div.blauwtitel table tr td{
	background: transparent url('/img/blauwtitel.jpg') left top repeat-x;}

div.titel table tr td.rechts{
	width: 55px;
	background: transparent url('/img/titel_r.png') left top no-repeat;}

div.blauwtitel table tr td.rechts{
	width: 55px;
	background: transparent url('/img/blauwtitel_r.jpg') left top no-repeat;}

h1, h2, h3{
	font-family: Tahoma, Verdana, Arial, sans-serif;
	font-weight: bold;
	margin: 0;
	padding: 0;
	font-weight: bold;
	color: #0a306f}

div.blauwtitel h1,
div.blauwtitel h2{
	color: #fff;}

h1{font-size: 28px; line-height: 35px; letter-spacing: -1px;}
h2{font-size: 18px; line-height: 35px;}
h3{font-size: 14px; line-height: 35px;}

table#inhoud h3{
	line-height: 18px;}

table#inhoud h3 a {         text-decoration: none; color: #0a306f;}
table#inhoud h3 a:hover {   text-decoration: none; color: #c1001f;}

table#inhoud a.leesverder {         text-decoration: none; color: #c1001f;}
table#inhoud a.leesverder:hover {   text-decoration: none; color: #0a306f;}

table#inhoud p{
	margin: 5px 0;
	padding: 0;}

/*LINKS*/
a {         text-decoration: underline; font-weight: bold;}
a:hover {   text-decoration: none;}

td.content a, td.sidebar a{ color: #fff;}
td.informatie a{ color: #333;}

/*LIJSTJES*/
td.content ul,
td.sidebar ul,
td.informatie ul{
	list-style-type: disc;
	margin: 0 0 15px;
	padding: 0 0 0 15px;}

td.content ul li,
td.sidebar ul li,
td.informatie ul li{
	padding: 0 0 0 5px;}

td.content ol,
td.sidebar ol,
td.informatie ol{
	list-style-type: decimal;
	margin: 0 0 15px;
	padding: 0 0 0 25px;}

td.content ol li,
td.sidebar ol li,
td.informatie ol li{
	padding: 0 0 0 10px;
	margin: 0; }

td.content ul.buttons,
td.sidebar ul.buttons,
td.informatie ul.buttons{
	margin: 0 0 15px;
	padding: 0;
	height: 35px;}

td.content ul.buttons li,
td.sidebar ul.buttons li,
td.informatie ul.buttons li{
	margin: 0 ;
	padding: 0;}

/*FOOTER*/
span.footertxt {
	margin: 0 0 0 80px;
	line-height: 40px;
	color: #0a306f}

span.footertxt a {         text-decoration: underline; font-weight: bold;}
span.footertxt a:link {    color: #0a306f;}
span.footertxt a:visited { color: #0a306f;}
span.footertxt a:hover {   color: #0a306f; text-decoration: none;}
span.footertxt a:active {  color: #0a306f;}

/*CONTENT
******************************************/

td.content{
	color:#fff;}

td.sidebar{
	font: normal 11px/15px Arial, sans-serif;
	color:#fff;}

td.informatie{
	font: normal 11px/15px Arial, sans-serif;
	color:#333;}

td.informatie{
	background: transparent url('/img/bal_witbg.jpg') left bottom no-repeat;}

td.informatie div.blauwtitel{
	margin: 0 0 15px;}

/*MENU
******************************************/

#menu ul {
	float: left;
	display: inline;
	width: 770px;
	height: 40px;
	text-align: center;
	margin: 16px 0 0 5px;
	padding: 0;}

#menu li {
	display: inline;}
	
#menu li a {
	padding: 7px 0 6px 10px;
	color: #fff;
	text-decoration: none;
	font-weight: bold;}
	
#menu li a:hover {
	color: #c1001f;
	background: transparent url('/img/menu_hover.jpg') left top no-repeat;}

#menu li a span {
	padding: 7px 10px 6px 0;}
	
#menu li a:hover span {
	color: #fff;
	background: transparent url('/img/menu_hover.jpg') right top no-repeat;}

/*CLASS=HIER*/
#menu li.hier a {
	padding: 7px 0 6px 10px;
	color: #0a306f;
	text-decoration: none;
	font-weight: bold;
	background: transparent url('/img/menu_hier.jpg') left top no-repeat;}
	
#menu li.hier a:hover {
	color: #c1001f;}

#menu li.hier a span {
	background: transparent url('/img/menu_hier.jpg') right top no-repeat;}

#menu li.hier a:hover span {
	color: #c1001f}

/*NAVMENU
*****************************************/
ul#projecten{
	margin: 0;
	padding: 0;
	white-space: nowrap;}

ul#projecten li{
	float: left;
	display: inline;
	list-style-type: none;
	height: 180px;
	margin: 20px 15px 15px 0;
	text-align: left;}

ul#projecten a{
	float: left;
	display: inline;
	padding: 0;
	margin: 0;
	font-weight: normal;
	font-size: 11px;
	height: 180px;
	width: 140px;}

ul#projecten a:link,
ul#projecten a:visited{
	color: #fff;
	background: transparent url("/img/thumbsprojecten.jpg") left top no-repeat;
	text-decoration: none;}

ul#projecten a:hover{
	color: #fff;
	background: transparent url("/img/thumbsprojecten.jpg") -143px top no-repeat;
	text-decoration: none;}
	
ul#projecten a:active{
	color: #fff;
	background: transparent url("/img/thumbsprojecten.jpg") left top no-repeat;
	text-decoration: none;}

ul#projecten li a img{
	float: left;
	display: inline;
	margin: 10px 10px 15px;
	border: 2px solid #fff;}

ul#projecten li a:hover img{
	border: 2px solid #d8d8d8;}

ul#projecten li a span.titel{
	float: left;
	display: inline;
	width: 140px;
	text-align: center;
	clear: both;
    color: #c1001f}

ul#projecten li a:hover span.titel{
    color: #0a306f;}

/*ROUTEBESCHRIJVING
******************************************/
     
div#top ul{
	width: auto; 
	width: 96px;
	margin: 0 0 0 764px;
	padding: 0;
	line-height: 20px;
	list-style: none;}
   
div#top li{
	float: left;
    display: inline;
   	list-style: none;
    margin: 4px 0 0 0;
    padding: 0; 
    line-height: 20px;
    height: 20px;}
        
div#top a,
div#top a:link,
div#top a:active,
div#top a:visited{
	display: inline-block;
    /* hide from ie/mac \*/
    display: block;
    /* end hide */
    font-weight: bold;
    text-decoration: none;
    padding: 0;
    margin: 0;
    height: 20px;}

div#top a:hover{
	text-decoration: none;
    margin: 0;
    height: 20px;}
    
div#top strong{
	display: inline-block;
    /* hide from ie/mac \*/
    display: block;
    /* end hide */
    color: white;}   

/*ROUTEBESCHRIJVING*/
div#top li.routebeschrijving a,
div#top li.routebeschrijving a:link,
div#top li.routebeschrijving a:active,
div#top li.routebeschrijving a:visited,
div#top li.routebeschrijving a:hover{
	background: url('/img/btn_routebeschrijving.jpg');
    width: 96px;}

div#top li.routebeschrijving a:hover{
	background-position: 96px 0px;}

/*MEER INFORMATIE
******************************************/
     
div#aanbieding ul{
	width: auto; 
	width: 96px;
	margin: 0;
	padding: 0;
	line-height: 20px;
	list-style: none;}
   
div#aanbieding li{
	float: left;
    display: inline;
   	list-style: none;
    margin: 4px 0 0 0;
    padding: 0; 
    line-height: 20px;
    height: 20px;}
        
div#aanbieding a,
div#aanbieding a:link,
div#aanbieding a:active,
div#aanbieding a:visited{
	display: inline-block;
    /* hide from ie/mac \*/
    display: block;
    /* end hide */
    font-weight: bold;
    text-decoration: none;
    padding: 0;
    margin: 0;
    height: 20px;}

div#aanbieding a:hover{
	text-decoration: none;
    margin: 0;
    height: 20px;}
    
/*MEERINFORMATIE*/
div#aanbieding li.meerinformatie a,
div#aanbieding li.meerinformatie a:link,
div#aanbieding li.meerinformatie a:active,
div#aanbieding li.meerinformatie a:visited,
div#aanbieding li.meerinformatie a:hover{
	background: url('/img/btn_meerinformatie.jpg');
    width: 96px;}

div#aanbieding li.meerinformatie a:hover{
	background-position: 96px 0px;}

/*BUTTONS
******************************************/
     
ul.buttons{
	width: auto; 
	width: 100%;
	height: 35px;
	margin: 0;
	padding: 0 0 0 0;
	line-height: 20px;
	list-style: none;}
   
ul.buttons li{
	float: left;
    display: inline;
   	list-style: none;
    margin: 4px 0 0;
    padding: 0 0 0 0; 
    line-height: 20px;
    height: 20px;}
        
ul.buttons a,
ul.buttons a:link,
ul.buttons a:active,
ul.buttons a:visited{
	display: inline-block;
    /* hide from ie/mac \*/
    display: block;
    /* end hide */
    font-weight: bold;
    text-decoration: none;
    padding: 0;
    margin: 0 10px 0 0;
    height: 20px;}

ul.buttons a:hover{
	text-decoration: none;
    margin: 0 10px 0 0;
    height: 20px;}
    
/*LEESVERDER*/
ul.buttons li.leesverder a,
ul.buttons li.leesverder a:link,
ul.buttons li.leesverder a:active,
ul.buttons li.leesverder a:visited,
ul.buttons li.leesverder a:hover{
	background: url('/img/btn_leesverder.gif');
    width: 60px;}

ul.buttons li.leesverder a:hover{
	background-position: 60px 0px;}

/*VACATURES*/
ul.buttons li.vacatures a,
ul.buttons li.vacatures a:link,
ul.buttons li.vacatures a:active,
ul.buttons li.vacatures a:visited,
ul.buttons li.vacatures a:hover{
	background: url('/img/btn_vacatures.gif');
    width: 88px;}

ul.buttons li.vacatures a:hover{
	background-position: 88px 0px;}

/*PROJECTOVERZICHT*/
ul.buttons li.projectoverzicht a,
ul.buttons li.projectoverzicht a:link,
ul.buttons li.projectoverzicht a:active,
ul.buttons li.projectoverzicht a:visited,
ul.buttons li.projectoverzicht a:hover{
	background: url('/img/btn_projectoverzicht.jpg');
    width: 88px;}

ul.buttons li.projectoverzicht a:hover{
	background-position: 88px 0px;}

/*REFERENTIES*/
ul.buttons li.referenties a,
ul.buttons li.referenties a:link,
ul.buttons li.referenties a:active,
ul.buttons li.referenties a:visited,
ul.buttons li.referenties a:hover{
	background: url('/img/btn_referenties.gif');
    width: 61px;}

ul.buttons li.referenties a:hover{
	background-position: 61px 0px;}
	
/*terug*/
ul.buttons li.terug a,
ul.buttons li.terug a:link,
ul.buttons li.terug a:active,
ul.buttons li.terug a:visited,
ul.buttons li.terug a:hover{
	background: url('/img/btn_terug.gif');
    width: 60px;}

ul.buttons li.terug a:hover{
	background-position: 60px 0px;}