@import url("reset.css");

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


legend {
    display:none;
}

body {
    font-family:Arial;
    font-size:11px;
    color:#0000;
    padding:0;
    margin:0;
    overflow: -moz-scrollbars-vertical;

}

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

a:hover{
    text-decoration:none;
    color:white;
    
}

strong {
    font-weight: bold;
}

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

#overviewLink{
    width:150px;
    display:block;
    float:right;
            position:relative;
        margin: 0 10px 0 0;
}
#overviewLink a{
        color:#2E86BA;
        font-style:italic;
        float:right;

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

#container{
    margin:0 auto 0 auto;
    padding:0;
    min-height:702px;
    height:auto !important;
    height:702px;
    width:1003px;
    position:relative;  
}
#header{
    position:relative;
}

#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;
        float:left;
        position:relative;
        background: url('../images/li.gif') 0 5px no-repeat;   
    }
    #header #topnav li.first{
       background:none;  
    }    

    #header #topnav li a:hover{
        text-decoration:none;
    } 

    #header #topnav li input.zoekVeld{
        width:80px;
        height:12px;                    
        font-size: 9px;
        padding:0;
        
        vertical-align: top;
    }
    #header #topnav li span#zoekButton{
        width:15px;
        height:15px;
        margin: 0px 0px 0px 0px;
        vertical-align: top;
        color: #ffffff;        
    }
    #header #topnav li span#zoekButton a{
        font-weight:bold;     
    }
    
    #header #topnav li form {  
    }

img.pngImg {
    background-image: expression(
        this.runtimeStyle.backgroundImage = "none",
        this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='scale')",
        this.src = "images/blank.gif"
    );
}
   
#header #logo{   
    width:302px;
    height:58px;
    top:30px;
    left:15px;          
    position:relative;
    z-index:100;
    
}
    #header #logo a {
        display:block;
        width:302px;
        height:58px;             
    } 
    #header #logo img{
        width:302px;
        height:58px;     
    }
    #header #logo a:hover{
        cursor:pointer;
    }
    #header #logo a span{
        visibility:hidden;
    }                       

    .headerLinks{
        color:#FFF;
        height:30px;
        padding:20px 0 0 20px;
        display:block;
        width:675px;
        float:right; 
        font-size:12px;
    }

        .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;
        }         
        #bureauCategorieen.headerLinks strong a:hover{
           color:#FFF;
        }        
        .headerLinks strong a{
            color:#FFF; 
        }
    
       #visiePunten.headerLinks {
           padding:20px 0 0 20px;
        }
        #visiePunten.headerLinks strong{
           background: url('../images/li-orange.gif') 0 5px no-repeat;
           color:#FFF;
        }
        #visiePunten.headerLinks strong a{
           color:#000;
        }
        #visiePunten.headerLinks a:hover{
           color:#2E86BA;
        }            
        #projectenCategorieen.headerLinks strong a{
           color:#FFF;
        }         
        #projectenCategorieen.headerLinks strong a:hover{
           color:#97C3DD;
        }  
    
    
#wrapper{
    position: relative;      
    padding: 70px 0 0 0;
}                      
#wrapper #banners{
    position:absolute;
    clear:both;
    top:140px;
    right:0;
    _right:-1px;
    
}

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

#wrapper #banners li.banner_bureau a{  
    background:url('../images/buttons/homepage1-transparant.png');
    _background-image: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/buttons/homepage1-transparant.png');   
}
    #wrapper #banners li.banner_bureau a:hover{
    background:url('../images/buttons/homepage1-full.png');  
            _background-image: none;
            _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/buttons/homepage1-full.png');
            cursor:pointer;   
    } 
#wrapper #banners li.banner_visie a{
    background:url('../images/buttons/homepage2-transparant.png');  
    _background-image: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/buttons/homepage2-transparant.png');     
}
    #wrapper #banners li.banner_visie a:hover{
        background:url('../images/buttons/homepage2-full.png');  
        _background-image: none;   
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/buttons/homepage2-full.png');
         cursor:pointer;        
    }
#wrapper #banners li.banner_projecten a{
    background:url('../images/buttons/homepage3-transparant.png');  
    _background-image: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/buttons/homepage3-transparant.png');    
}
    #wrapper #banners li.banner_projecten a:hover{
        background:url('../images/buttons/homepage3-full.png');  
        _background-image: none;   
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/buttons/homepage3-full.png'); 
        cursor:pointer;      
    }
#wrapper #banners li.banner_nieuws a{
    background:url('../images/buttons/homepage4-transparant.png');  
    _background-image: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/buttons/homepage4-transparant.png');   
}
    #wrapper #banners li.banner_nieuws a:hover{
        background:url('../images/buttons/homepage4-full.png');  
        _background-image: none;   
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/buttons/homepage4-full.png');     
                cursor:pointer;    
    }
#wrapper #banners li.banner_contact a{
    background:url('../images/buttons/homepage5-transparant.png');  
    _background-image: none;
    _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/buttons/homepage5-transparant.png');   
}
    #wrapper #banners li.banner_contact a:hover{
        background:url('../images/buttons/homepage5-full.png');  
        _background-image: none;   
        _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='../images/buttons/homepage5-full.png');    
        cursor:pointer;       
    }


#wrapper #banners span{
    visibility:hidden;   
}

/** Breadcrumb **/
#wrapper #breadcrumb{
    margin:0 0 0 30px;
}
 #wrapper #breadcrumb a:hover{
    color:#000;
 }
/** Project navigatie buttons **/

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


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

    
    _margin-top: 100px;
    width: 100%;
    height: 68px;      
    margin: 20px 0 0 0;    
}

    div .projecten{
        background:url('../images/menubg-project.gif'); 
        
    }
    div .other{
        background:url('../images/menubg-other.gif'); 
    }        
    div .bureau{
        background:url('../images/menubg-bureau.gif'); 
    }  
    div .visie{
        background:url('../images/menubg-visie.gif');
    }
    div .nieuws{
        background:url('../images/menubg-nieuws.gif');
    }
    div .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;       
    }
        #menu #buttons ul li a{
            color:#FFF;     
        }

/** Content **/
#content{
    margin:30px 0 0 0;

    position:relative;
    min-height:603px;
    height:auto !important;
    _height:603px;
} 
    #content h2{
        font-size:12px;
        font-weight:bold;
        margin:3px;
        color:#2E86BA;
    } 
/** Projecten pagina **/
#leftColumn{
    width:196px;
    height:881px;
    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;   
    _margin: 0 0 0 15px;
    border:0;   

}
    #leftColumnFoto .image{
        margin:0 0 20px 0;
        border:0;
        
    }
    #leftColumnAlgemeen .image {
        margin: 0 0 10px 0;
    }
 
#midColumn{
    width:392px;
    height:881px;
    float:left;
    margin:0;
    background:url('../images/midcolumn-bg.gif'); 
    position:relative;
}

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

#rightColumn{
     float: left;
     margin:0 0 10px 40px;
     padding: 0 0 20px 0;
     width: 370px;
     border-bottom:1px solid #b2831a;
}
#rightColumn a{
    color:#5786BA;
}
    #rightColumn p.inleiding{
        color:#2E86BA;
        margin-top:0px;
    }
    #rightColumn strong{
        font-weight:bold;
        color:#2E86BA;
        background: url('../images/project-bullet.gif') 0 5px no-repeat;
        padding:0 0 0 10px;
    }
    #rightColumn li{
              background: url('../images/project-bullet.gif') 0 5px no-repeat;
              padding:0 0 0 10px
    }
#rightColumn #projectNav{
    margin-top:40px;
    float:right;
}
#pageContent{
    margin:0 0 10px 20px;
    width: 675px;
    float:left;
    padding:0 0 5px 0;
    border-bottom:1px solid #B2831A;        
}    
    #pageContent a{
        color:#5786BA;
    }   
    #pageContent p{
        margin:0;
        padding:0;
    }
#pageContent h2{
    font-size:13px;
    margin:0 0 5px 0;
}
#pageContent ul li{
    font-family:Arial;
    font-size:11px;
    color:#0000;
    padding:0;
    margin:0;

}   
#fotoViewer{
    overflow:hidden;
}

#projectInfo{
    clear:both;
    width:347px;
    border-top:1px solid #B2831A;
    margin:5px 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;
    }
    
    #projectInfo a:hover{
        color:#5786BA;   
        
    }
    #projectInfoLeft{
        float:left;
        width:160px;
        margin:15px 0 0 0;
    }   
    #projectInfoRight{
        float:left;
        width:160px;
        margin:15px 0 0 0;
    }
    #projectInfo a:hover{
        text-decoration:underline;
    }
     #projectInfo div.aibas{
     
     }
    #projectInfo div.aibas ul li{
        font-size:11px;
        background: url('../images/project-bullet-blue.gif') 0 5px no-repeat;
        padding:0 0 0 8px;
        margin:0 5px 0 0;       
        float:left;
    }
    #projectInfo div.aibas ul li.active a{
        color:#2e86ba;
    }
/** GOEGOL MAPS KAARTJE **/
#project_map{
    position:absolute;
    bottom:0;
    right:0;
    width: 196px;
    height:196px;
    overflow:hidden;
}

/**
    Projecten scroller
**/
#projectThumbs {
    margin: 12px 0 0 27px;;
    position: relative;
    height: 368px;
    overflow: hidden;
    width: 950px;
    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: 908px;
    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: 50px;
    height: 350px; 
}

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

.arrowLeft{
    position: absolute;                         
    z-index: 3;
    bottom:15px;
    left:13px;   
}
.arrowRight{
    position: absolute; 
    left: 915px;                            
    z-index: 3;
    bottom:15px;
      
}

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

}

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

#projectThumbs #scroller img {
    background: url("../images/bg_moviethumb.gif") no-repeat; 
    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;
    _width:68px;
    float:left;
    margin:0 25px 0 0;
}
span.projectThumbTitle{
    display:block;
    height:35px;
}
    .thumb-scroller{
        float:left;
        width:68px;
        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:0;
             padding:0;
        }
 
.scrollerImg{
    padding:0 2px 3px 0;
    background:url('../images/scrollerimgbg.png');
    width:100px;
}
.scrollerImg img{
    margin:0;
    padding: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:0 10px 20px 0;
}
    #dropdowns form{
        float:left;
    }
    #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;
        font-size:12px;
        height:14px;
        display:block;
        background: url('../images/li-lightblue.gif') 0 5px no-repeat; 
        color:#FFF; 
 }
 #subnav li.active{
    font-weight:bold;
 }

 /** Bureau **/
 #pageContent strong{
     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;
 }
 
 li.vacature a{
    background:transparent url(../images/project-bullet.gif) no-repeat scroll 0 5px;
    padding:0 0 0 10px; 
 }
 li.vacature a:hover{
    color:#2E86BA;
 
 }
 
 /** 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 {             
    width: 300px;            
    float: left;  
                
    margin: 0 20px 0 0;        
} 
    #routeLeft #route_leiden {      
        height: 300px;
        width: 300px;
    }
    #routeLeft #text_leiden {
        margin: 10px 0 0 0;
    } 
    #routeLeft 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;   
    }

#routeRight {          
    width: 300px;
    float: left; 
}   
    #routeRight #route_arnhem {   
        height: 300px;
        width: 300px;  
    }
    #routeRight #text_arnhem {
        margin: 10px 0 0 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;; 
    overflow: hidden;
    width: 980px;
    z-index: 2;
    border-bottom:1px solid #B2831A;
    clear:both; 
}

#newsItem{
    width:480px;
    height:150px;
    float:left;
    padding: 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;
        font-style:normal;
        background: url('../images/li-orange.gif') 0 5px no-repeat;   
    } 
    #newsItem a:hover{
        cursor:pointer;
    }
    #newsItem img{
        float:left;
    }
    #newsItem p{
        float:left;
        width:160px;
        margin:0 0 0 20px;
    }
    #newsItem a{
        color:#2E86BA;
        font-style:italic;
    }
    
/** Nieuwsarchief **/
  
  #nieuwsarchief {
       list-style:none;
       margin:0 0 0 20px;
       font-size:12px;
  }
        #nieuwsarchief li a{
            font-weight:normal;
            padding:0 0 0 9px;
            background:transparent url(../images/li-orange.gif) no-repeat scroll 0 5px;
            color:#2E86BA;
        }
        #nieuwsarchief li a:hover{
            color:#000;
        } 

/** Nieuwsbrief **/
    #mainNieuwsbriefTekst{
        margin:5px 0 0 0;
        float:left;
        width:150px;
    }
    #mainNieuwsbriefTekst h3{
        font-weight:bold;
        color:#2E86BA;
        padding:0 0 0 9px;
        background:transparent url(../images/li-orange.gif) no-repeat scroll 0 5px;
    }
    #mainNieuwsbriefTekst span.download{
        display:block;
    }
    #mainNieuwsbriefTekst span.download a{
        font-weight:bold;
        color:#000;
    }  
    #mainNieuwsbriefTekst span.download a:hover{
        text-decoration:underline;
    }       
    #nieuwsbrieven{
        margin:5px 0 0 25px;
        width:500px;
        float:left;
    }
    
    #nieuwsbriefItem{
        width:125px;
        float:left;
        margin:0 0 15px 45px;
    }
    #nieuwsbriefItem.first{  
       margin:0 0 0 0;
    }
        #nieuwsbriefItem span.title{
            font-weight:bold;
            color:#2E86BA;
            padding:0 0 0 9px;
            background:transparent url(../images/li-orange.gif) no-repeat scroll 0 5px;
        }
  

  #nieuwsbriefItem span.download{
    display:block;
  }
        #nieuwsbriefItem span.download a{
            font-weight:bold;
            color:#000;
        }  
        #nieuwsbriefItem span.download a:hover{
            text-decoration:underline;
        }           
   
   div.nieuwsBriefNavigatie{
        margin:0 35px 0 0;
        position:absolute;
        top:-20px;
        right:10px;
        color:#000;
   } 
   div.nieuwsBriefNavigatie a{
        color:#000 !important;
   }    
   div.nieuwsBriefNavigatie a.selected{
        color:#2E86BA !important;
   }
   
   div.nieuwsNavigatie{
        margin:0 35px 0 0;
       position:absolute;
        color:#000;
        z-index:999;
        top:-30px; right:0;
  
        
   } 
   div.nieuwsNavigatie a{
        color:#000 !important;
   }    
   div.nieuwsNavigatie a.selected{
        color:#2E86BA !important;
   }
/** Sitemap **/
  
  #sitemap {
       list-style:none;
       margin:0 0 0 20px;
       font-size:12px;
  }
    #sitemap li.kop{
            font-weight:normal;
            padding:0 0 0 9px;
            background:transparent url(../images/li-lightblue.gif) no-repeat scroll 0 5px;
            color:#2E86BA !important;
            padding:0 0 0 9px;

    }
    #sitemap li.kop a{
       color:#2E86BA !important;     
    }
        #sitemap li a:hover{
            color:#000;
        }

    #sitemap ul{
        margin:0 0 0 20px;
    }
        #sitemap ul li{
            font-weight:normal;
            padding:0 0 0 9px;
            background:transparent url(../images/li-orange.gif) no-repeat scroll 0 5px;
            color:#2E86BA;
            padding:0 0 0 9px;
        }
        #sitemap ul li a:hover{
            color:#000;
        }
     

/** ZOEKEN **/

.navigatie a:hover{
    color:#2E86BA;
}