@import url("reset.css");

/*************************
    Standaard
**************************/


legend {
    display:none;
}

body {
    font-family:Arial;
    font-size:11px;
    color:#0000;
    padding:0;
    margin:0;
}

a{
    text-decoration: none;
    color:#000;
}

strong {
    font-weight: bold;
}

.selected {
    color: #2E86BA;
    font-weight: bold;
}

/*************************
    Site Structuur
**************************/

#container{
    margin:0 auto 0 auto;
    padding:0;
    height:703px;
    width:1003px;
    position:relative;
}
#header{
    position:relative;
    
    display:none;
}

#header #topnav{
    list-style:none;
    position:absolute;
    right:10px;
    top:5px;
    z-index:99;
}
    #header #topnav li{
        overflow:hidden;
        margin:0 3px;
        padding:0 0 0 9px;
        vertical-align:middle;
        display:block;
        float:left;
        position:relative;
        background: url('../images/li.gif') 0 5px no-repeat;   
    }
    #header #topnav li.first{
       background:none;  
    }    
    #header #topnav li.search{
       color:#fff;
       background:none;
       padding:0;
       margin:0 5px;  
    }
    #header #topnav li a:hover{
        text-decoration:underline;
    }
#header #topnav input{    
    height: 10px;
    width: 80px;
    
    background:#E2E3E5;   
    vertical-align: middle;
    border: 0;          
    margin:0 0 0 5px;
    padding: 0;
    
    font-size: 8px; 
    color: #000000;   
}
#header #topnav .zoekButton {
    background: transparent;
    width: 15px;    
}

#header #logo{
    background:url('../images/logo.png');
    behavior: url('libs/pngfix/iepngfix.htc');
    
    width:302px;
    height:58px;
    top:30px;
    left:15px;
    position:absolute;
    z-index:1;
}
    #header #logo a{
        display:block;
        height:58px;
        z-index:99;
    } 
    #header #logo a span{
        visibility:hidden;
    }

    .headerLinks{
        color:#FFF;
        height:30px;
        padding:10px 0 0 20px;
        display:block;
        width:675px;
        float:right;  
    }
        .headerLinks strong{
            margin:0 3px;
            padding:0 0 0 9px;
            vertical-align:middle;
            font-weight:normal;
            height:14px;
            display:block;
            float:left;
            background: url('../images/li-lightblue.gif') 0 5px no-repeat; 
            color:#FFF; 
        }
        #bureauCategorieen.headerLinks {
           padding:20px 0 0 20px;
        }
        #bureauCategorieen.headerLinks strong{
           background: url('../images/li-orange.gif') 0 5px no-repeat;
           color:#FFF;
        }
        #bureauCategorieen.headerLinks strong a{
           color:#000;
        }        
        .headerLinks strong a{
            color:#FFF; 
        }
    
    
    
#wrapper{
    position: relative;
    padding:125px 0 0 0;  
}                      
#wrapper #banners{
    position:absolute;
    clear:both;
    top:140px;
    right:0;
    
    visibility: hidden;
}

/* Banners */
#wrapper #banners li{
    height:56px;
    width:972px;            
}               
#wrapper #banners li a{ 
     display:block;
     height:56px;
}

#wrapper #banners li.bureau a{  
    background: url('../images/buttons/homepage1-transparant.png');     
}
#wrapper #banners li.bureau a:hover{
    background: url('../images/buttons/homepage1-full.png'); 
} 
#wrapper #banners li.visie a{
    background: url('../images/buttons/homepage2-transparant.png');     
}
#wrapper #banners li.visie a:hover{
    background: url('../images/buttons/homepage2-full.png');   
}
#wrapper #banners li.projecten a{
    background: url('../images/buttons/homepage3-transparant.png');     
}
#wrapper #banners li.projecten a:hover{
    background: url('../images/buttons/homepage3-full.png');   
}
#wrapper #banners li.nieuws a{
    background: url('../images/buttons/homepage4-transparant.png');     
}
#wrapper #banners li.nieuws a:hover{
    background: url('../images/buttons/homepage4-full.png');   
}
#wrapper #banners li.contact a{
    background: url('../images/buttons/homepage5-transparant.png');     
}
#wrapper #banners li.contact a:hover{
    background: url('../images/buttons/homepage5-full.png');   
}


#wrapper #banners span{
    visibility:hidden;   
}

/** Breadcrumb **/
#wrapper #breadcrumb{
    margin:0 0 0 30px; 
        
    visibility: hidden;
}

/** Project navigatie buttons **/

#projectButtons{
    position:absolute;
    bottom:60px;
    left:20px;      
    
    visibility: hidden;
}
#projectButtons a{
    margin:0 10px 0 0;
}


/** Menu **/
#menu{
    position: relative;

    _margin-top: 100px;
    width: 100%;
    height: 68px;      
    margin: 20px 0 0 0;    
    
    visibility: hidden;
}
    .projecten{
        background:url('../images/menubg-project.gif');
    }
    .other{
        background:url('../images/menubg-other.gif');
    }        
    .bureau{
        background:url('../images/menubg-bureau.gif');  
    }  
    .visie{
        background:url('../images/menubg-visie.gif');
    }
    .nieuws{
        background:url('../images/menubg-nieuws.gif');
    }
    .contact{
        background:url('../images/menubg-contact.gif');
    }

#menu #buttons{           
    margin: 0 0 0 32px;
}    
#menu #buttons ul{        
    _margin: 150px 0 0 0;
     margin:0;
     padding:0;
     list-style-type:none;
}
    #menu #buttons ul li{
        width:55px;
        vertical-align:middle;
        display:block;
        float:left;
        position:relative;       
    }

/** Content **/
#content{
    margin:30px 0 0 0;
} 
    #content h2{
        font-size:12px;
        font-weight:bold;
        margin:3px;
        color:#2E86BA;
    } 
/** Projecten pagina **/
#leftColumn{
    width:196px;
    height:851px;
    float:left;
    
    background:url('../images/leftcolumn-bg.gif');
    
    margin:0;
}
    #leftColumn.short{
        height: 200px;
    }
    #leftColumn #titleBlock{
        width:166px;
        font-size:19px;
        color:#FFF;
        font-weight:bold;
        padding:35px 15px 0 15px;
        text-align:center;
    }                           
#leftColumnFoto{
    width: 275px;      
    float:left;                                   
    margin: 0 0 0 30px;      
}
    #leftColumnAlgemeen .image {
        margin: 0 0 10px 0;
    }
    
#midColumn{
    width:392px;
    height:851px;
    float:left;
    margin:0;
    background:url('../images/midcolumn-bg.gif'); 
}

    .thumb1 {
        float:left;
        width:392px;
        height:294px;
        border:1px solid #B8B8B8;    
        margin:0 0 6px 0;
    }
    .thumb-small{
        float:left;
        width:68px;
        height:68px;
        margin:0 13px 0 0;
    }
    .thumb-last{
        float:left;
        width:68px;
        height:68px;
        margin:0; 
    }

#rightColumn{
     float:left;
     margin:0 0 0 40px;
     width:370px;
}
    #rightColumn p.inleiding{
        color:#2E86BA;
    }
    #rightColumn strong{
        font-weight:bold;
        color:#2E86BA;
        background: url('../images/project-bullet.gif') 0 5px no-repeat;
        padding:0 0 0 10px;
    }

#pageContent{
    margin:0 0 0 10px;
    width: 685px;
    float:left;
    padding:0;
}    
    #pageContent p{
        margin:0;
        padding:0;
    }
    
#fotoViewer{
    overflow:hidden;
}

#projectInfo{
    clear:both;
    width:347px;
    border-top:1px solid #B2831A;
    margin:15px 0 0 0;
    padding:5px 0 0 45px;
}  
    #projectInfo h2{
        color:#2E86BA;
        font-size:14px;
        font-weight:bold;
    }   
    #projectInfo h3{
        font-weight:bold;
        color:#B2831A;
        font-size:11px;
        background: url('../images/project-bullet.gif') 0 5px no-repeat;
        padding:0 0 0 10px;
        margin:10px 0 0 0;
    }
    
    #projectInfoLeft{
        float:left;
        width:160px;
        margin:30px 0 0 0;
    }   
    #projectInfoRight{
        float:left;
        width:160px;
        margin:30px 0 0 0;
    }
    #projectInfo a:hover{
        text-decoration:underline;
    }

/**
    Projecten scroller
**/
#projectThumbs {
    margin: 12px 0 0 12px;;
    position: relative;
    height: 368px;
    overflow: hidden;
    width: 980px;
    z-index: 2;
    border-bottom:1px solid #B2831A;
    clear:both; 
}

#projectThumbs #scrollLeft {       
    behavior: url('libs/pngfix/iepngfix.htc');
                  
    cursor: pointer;
    display:block;
    left: 8px;
    position: absolute;
    top: 20px;
    z-index: 4;      
    width: 30px;
    height: 350px;
}                
                 
#projectThumbs #scrollRight {       
    behavior: url('libs/pngfix/iepngfix.htc');
                 
    cursor: pointer;
    display:block;
    left: 950px;
    position: absolute;    
    top: 20px;    
    z-index: 4;   
    width:30px;
    height: 350px;  
}
                        
.fadeoutLeft,
.fadeoutRight {         
    behavior: url('libs/pngfix/iepngfix.htc');
    
    position: absolute;                         
    z-index: 3;
    _left:-20px;
    
    width: 100px;
    height: 350px; 
}

.fadeoutRight {    
    left: 880px;   
    _left: 880px;
}

#projectThumbs #scroller {
    height: 266px;
    left: 0;
    margin: 0 0 0 15px;
    position:absolute;
    width: 1460px;
    z-index: 1;

}

#projectThumbs #scroller a{
    display: block;
    width: 115px;
    float: left;
}

#projectThumbs #scroller img {
    background: url("../images/bg_moviethumb.gif") no-repeat;
    margin: 0 2px 0 0;    
    padding: 3px 10px 10px 2px;    
    display: block;
}
#projectThumbs #scroller .alt_tekst{
    padding: 3px;
    color: #8c8c8e;
    margin: 0 12px 0 3px;
    height: 50px;
    text-align: center;
    cursor: pointer;
    position: relative;
}
#projectThumbs #scroller a:hover{
    text-decoration: none;
}

#projectThumb{
    width:98px;
    float:left;
    margin:0 25px 0 0;
}
    .thumb-scroller{
        float:left;
        width:98px;
        height:148px;
        margin:0 13px 0 0;
    }
        .thumb-scroller a img{
                 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
                 -moz-opacity: 0.5;
        }
        .thumb-scroller a:hover img{
                 filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
                 -moz-opacity: 1.0;  
        }
        .thumb-scroller img{
            margin:10px 0 0 0;
        }
        
#teamThumb{
    width:105px;
    float:left;
    margin:0 25px 0 0;
}
        
.scrollerPopup {  
    background: url('../images/popup-bg.png');
}
.scrollerPopup h2{  
    font-weight:bold;
}
.scrollerPopup h3{    
    color:#FFF;
}
.scrollerPopup p{  
    color:#FFF;
}
.scrollerPopup a{  
    color:#FFF;
    position:absolute;
    bottom:15px;
}

#dropdowns{
    float:right;
    margin:-30px 0 20px 0;
}
    #dropdowns select{
       width:100px;
       height:20px;
       font-size:12px; 
    }
 
 /** Sub navigatie in header **/
 #subnav{
     color:#FFF;
     margin:40px 0 0 30px;
     font-size:14px;     
 }
 #subnav li{
        margin:5px 3px;
        padding:0 0 0 9px;
        vertical-align:middle;
        font-weight:normal;
        height:14px;
        display:block;
        background: url('../images/li-lightblue.gif') 0 5px no-repeat; 
        color:#FFF; 
 }
 #subnav li.active{
    font-weight:bold;
 }

 /** Bureau **/
 #pageContent h3{
     color:#2E86BA;
     font-weight:bold;
     margin: 10px 0 0 0;
     padding:0 0 0 9px;
     background: url('../images/li-orange.gif') 0 5px no-repeat;   
 }
 #pageContent p {
    margin: 0 0 10px 0;
 }
 
 /** Contactformulier **/
 
 .form {
    width: 250px;
    
    background-color: #97c3de;
    color: #ffffff;
    border: 0px;
 }
 .verzendButton {
    width: 100px;
    background: url('../images/buttonbg.gif') repeat-x;
    border: 1px solid #568ca6;
 }       
 .select {
    background-color: #97c3de;
    border: 1px solid #568ca6;  
 } 
 .option {
    background-color: #97c3de;
 }
 
 /** Route **/
#routeLeft {
    position: relative;

    margin: 0 0 0 10px;  
    width: 300px; 
    height: 600px;
    float: left;
    padding: 0;              
} 
#routeLeft #route_leiden {
    background-color: #eeeeee;
    height: 300px;
    width: 300px;
}
#routeLeft #route_arnhem {
    background-color: #ebebeb;
    height: 300px;
    width: 300px;
    
    margin: 10px 0 0 0;
}

#routeRight {
    margin:0 0 0 10px;
    width: 375px;
    float:left;
    padding:0;              
} 
     #routeRight h3{
         color:#2E86BA;
         font-weight:bold;
         margin: 10px 0 0 0;
         padding:0 0 0 9px;
         background: url('../images/li-orange.gif') 0 5px no-repeat;   
     }
 
 /** Nieuws **/
 #newsOverview {
    margin: 12px 0 0 12px;;
    position: relative;
    overflow: hidden;
    width: 980px;
    z-index: 2;
    border-bottom:1px solid #B2831A;
    clear:both; 
}

#newsItem{
    width:480px;
    float:left;
    margin: 0 0 60px 0;
}
    #newsItem h2{
        color:#2E86BA;
        font-weight:bold;
        margin:0 0 0 20px;
        float:left;
        width:160px;
        padding:0 0 0 9px; 
        overflow:hidden;
        vertical-align:middle;
        display:block;
        position:relative;
        background: url('../images/li-orange.gif') 0 5px no-repeat;   
    }
    #newsItem img{
        float:left;
    }
    #newsItem p{
        float:left;
        width:160px;
        margin:0 0 0 20px;
    }
    #newsItem a.sloped{
        color:#2E86BA;
        font-style:italic;
    }
      
/** Sitemap **/
  
  #sitemap {
       list-style:disc;
       margin:0 0 0 20px;
       font-size:12px;
  }
    #sitemap li{
        font-weight:bold;
    }
    #sitemap ul{
        margin:0 0 0 20px;
    }
        #sitemap ul li{
            font-weight:normal;
        }
     



#project_map{
    display:none;
}