/*
Oranje: #F18E00
bgGrijs: #CCC
h2Grijs: #87898A
Tekstkleur: #646567
Donkerblauw: #004A98
*/

* {
    margin: 0;
    padding: 0;
    border: 0;
}

ul, li {
    list-style-type: none;
}

body {
    background-color: #CCC;
    font: 9pt/14pt verdana, arial, helvetica, sans-serif;
    color: #646567;
}

/*
De verpakking box
*/

#divWrapper {
    width: 770px;
    margin: 0 auto 0 auto;
    position: relative;
    background: #FFF url(../../Media/Bg/bgMain.jpg) repeat-y left top;
    z-index: 500;
}

/*
De Hoofdnavigatie box
*/

#divTop {
    height: 139px;
    width: 592px;
    background: #CCC url(../../Media/Bg/bgTop.jpg) no-repeat left top;
    padding-top: 25px;
    float: left;
    padding-left: 178px;
}

/*
De Buttons van de hoofdnavigatie
*/

#buHome {
    background-image: url(../../Media/Button/buHome.jpg);
    display: block;
    float: left;
    width: 135px;
    height: 139px;
}

#buHome:hover {
    background-image: url(../../Media/Button/buHomeOver.jpg);
}

#buProject {
    background-image: url(../../Media/Button/buProjecten.jpg);
    display: block;
    float: left;
    width: 135px;
    height: 139px;
}

#buProject:hover {
    background-image: url(../../Media/Button/buProjectenOver.jpg);
}

#buOnderhoud {
    background-image: url(../../Media/Button/buOnderhoud.jpg);
    display: block;
    float: left;
    width: 136px;
    height: 139px;
}

#buOnderhoud:hover {
    background-image: url(../../Media/Button/buOnderhoudOver.jpg);
}

#buGecertificeerd {
    background-image: url(../../Media/Button/buCertificering.jpg);
    display: block;
    float: left;
    width: 136px;
    height: 139px;
}

#buGecertificeerd:hover {
    background-image: url(../../Media/Button/buCertificeringOver.jpg);
}

a span {
    display: none;
}

/*
Positioneer de h1 op de absolute plek
*/

h1 {
    width: 235px;
    height: 190px;
    background: transparent url(../../Media/Bg/h1.jpg) no-repeat left top;
    position: absolute;
    left: -56px;
    top: 0;
    z-index: 1000;
}

h1 span {
    display: none;
}

/*
De Subnavigatie box. Maak deze expliciet 730px breed en lijn naar midden tov van de wrapper. Geef 5px afstand aan de onderkant om het content los te halen van de oranje border aan de onderkant.
 */

#divSubNavi {
    width: 730px;
    margin: 0 auto 5px auto;
    border-bottom: solid 1px #F18E00;
    clear: both;
}

#divSubNavi a:link, #divSubNavi a:visited {
    font-size: 8pt;
    color: #646567;
}

#divSubNavi a:hover {
    color: #F18E00;
}

/*
Geef padding-left anders schuift de SubNavigatie onder de h1 door
*/

.liSubNavigatie {
    height: 27px;
    padding-left: 160px;
}

.liSubNavigatie li {
    display: inline;
    margin: 0 15px 0 0;
    text-transform: lowercase;
}

#divContentMetStreep {
    width: 750px;
    background: #FFF url(../../Media/Bg/bgContent.gif) repeat-y left top;
    margin: 0 10px 0 10px;
}

/*
De box Links
*/

#divLinks {
    width: 150px;
    float: left;
    padding: 10px;
    height: 444px;
}

address {
    font-style: normal;
    margin-top: 10px;
    padding-bottom: 25px;
    border-bottom: solid 1px #C6C7C8;
}

address p {
    margin-bottom: 10px;
}

/*
De Box Rechts
*/

#divRechts {
    float: left;
    width: 570px;
    padding: 0 10px 0 0;
}

/*
Maak nu een box aan waarin het uiteindelijke content komt (tekst, plaatjes)
*/

#divContent {
    width: 550px;
    padding: 20px 10px 0 10px;
}

#divContent p {
    margin: 0 0 15px 0;
}

/*
Een aantal Classes hier
*/

.vet {
    font-weight: bold;
}

.block {
    display: block;
}

.imgBorder {
    border: 1px solid #000;
}

.certLogo {
    width: 105px;
}

.marginTop {
    margin-top: 20px;
}

.marginBottom {
    margin-bottom: 20px;
}

.kleineKop {
    font-weight: bold;
    color: #F18E00;
}

/*
h2 BreadCrum hier
*/

h2 {
    padding: 0 0 0 15px;
    font-size: 15px;
    height: 22px;
    color: #FFF;
    line-height: normal;
    text-transform: lowercase;
    background: #87898A url(../../Media/Bg/h2.gif) no-repeat left top;
}

h4 {
    font: 9pt/12pt verdana, arial, helvetica, sans-serif;
    font-weight: bold;
    color: #F18E00;
}

/*
Even de anchor tags stylen
*/

a:link, a:visited {
    font-weight: bold;
    color: #F18E00;
    text-decoration: none;
}

a:hover {
    color: #004A98;
}

/*
Maak de footer box aan
*/

#divFoot {
    height: 20px;
    background: #CCC url(../../Media/Bg/bgBottom.jpg) no-repeat left top;
    padding-top: 30px;
    text-align: center;
    clear: both;
}

#divFoot a:link, #divFoot a:visited {
    font: 9pt/14pt verdana, arial, helvetica, sans-serif;
    color: #646567;
    text-decoration: none;
}

#divFoot a:hover {
    text-decoration: underline;
}

/*
Een aantal Classes en styling tbv TextBox en Tabels
*/

.tblLayOut {
    margin: 10px auto auto 0;
}

.tblLayOut td {
    text-align: left;
    vertical-align: top;
    padding: 2px 3px 2px 3px;
}

.txt200 {
    width: 200px;
    border: 1px solid #F18E00;
    padding: 2px;
}

.buttonNormaal {
    border: 1px solid #F18E00;
    padding: 2px;
    color: #666;
}

textarea {
    border: 1px solid #F18E00;
    width: 415px;
    height: 100px;
    font: 9pt/14pt verdana, geneva, arial, sans serif;
    padding: 2px;
}

/*
Projecten
*/

.divImageThumb {
    border: 1px solid #000;
    width: 160px;
    height: 120px;
    text-align: center;
    background-color: #FFF;
}

.divImageProjectDetail {
    width: 320px;
    height: 240px;
    text-align: center;
    background-color: #FFF;
    margin: 20px auto 20px 0;
    border: 1px solid #000;
}

#tblProjectResult td {
    padding: 5px 10px 10px 0;
    text-align: left;
    vertical-align: top;
}

#tblNieuwsResult td {
    padding: 2px 10px 2px 0;
    text-align: left;
    vertical-align: top;
}

#divClear {
    clear: both;
}

/*
Pagina onderhoud
*/

.liOnderhoud {
    margin: 15px 0 15px 0;
    padding-left: 20px;
    list-style-image: url(../../Media/Bg/liOnderhoud.gif);
}

.liOnderhoud li {
    height: 20px;
}