/* Document properties
 ******************************************************************************/
html,
body,
#siteContainer {
	min-height: 100%;
	height: 100%;
}

html>body,
html>body #siteContainer {
	height: auto;
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #0b3926;
}

body {
    background: url(../gfx/bg_site.jpg) no-repeat center top;
}


/* Main blocks
 ******************************************************************************/

/*
#container {
   position: relative;
   top: 0;
   border: 1px solid #ff0000;
   width: 100%;
   background: url(../gfx/driehoekjes.gif) no-repeat right bottom;
}
*/

#siteContainer {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -335px;
    width: 671px;
    
    border-left: 1px solid #01130C;
    border-right: 1px solid #01130C;
    background: url(../gfx/bg_right.gif) #DFE3BA repeat-y right;
}

#leftColumn {
    float: left;
    width: 480px;
    padding-bottom: 18px;
}

#rightColumn {
    float: right;
    width: 189px;
    height: 344px;
    background: url(../gfx/bgRight/pand.jpg) no-repeat;
}

/* Header
 ******************************************************************************/
h1 {
    position: relative;
    margin: 0;
    padding: 0;
    height: 55px;
    background: url(../gfx/bg_header.jpg) #DFE3BA no-repeat right top;
}
   h1 img {
      margin-top: 13px;
      margin-left: 10px;
   }
   #topMenu {
      position: absolute;
      top: 4px;
      right: 8px;
      color: #0b3926;
      font-weight: normal;
   }
      #topMenu a {
         color: #0b3926;
         font-weight: bold;
         text-decoration: none;
      }
         #topMenu a:hover {
            color: #A0410A;
         }
   
#projectHeader,
#projectHeader img {
   float: left;
   height: 100px;
}
#projectHeader {
   border-top: 1px solid #0E3222;
   height: 100px;
}
#projectTitle {
   position: absolute;
   top: 130px;
   right: 10px;
   z-index: 10;
   padding: 3px 6px;
   background-color: #dfe3ba;
   border: 1px solid #052a1b;
}
   #projectTitle a {
      color: #052a1b;
      text-decoration: none;
   }

/* MainMenu
 ******************************************************************************/
#mainMenu {
    float: left;
    width: 100%;
    border-top: 2px solid #0E3222;
    /* Weggehaald ivm breedte menu
      background: url(../gfx/bg_menu_pebe.gif) #A0410A no-repeat 98% 50%;
    */
    background-color: #A0410A;
}
   #mainMenu ul {
       margin: 0;
       padding: 0;
       list-style: none;
       margin-left: 4px;
   }
   #mainMenu li {
       float: left;
       margin: 0;
       padding: 0;
   }
   #mainMenu a {
       display: block;
   }
      #mainMenu a:hover,
      #mainMenu a.active {
          background: url(../gfx/mainMenu/active.gif) no-repeat center bottom;
      }
      #mainMenu a img {
          margin: 8px 7px 6px 7px;
      }

/* SubMenu
 ******************************************************************************/
#subMenu {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #0b3926;
}
   #subMenu li {
       margin: 0;
       padding: 0;
       border-bottom: 1px solid #0b3926;
   }
   #subMenu a {
       display: block;
       width: 179px;
       padding: 4px 0px 5px 10px;
       background-color: #87905A;
       color: #0b3926;
       text-decoration: none;
   }
      #subMenu a:hover, #subMenu a.active {
          background-color: #ADB583;
          color: #000000;
      }


/* ProjectenMenu
 ******************************************************************************/
#projectenMenu {
   position: relative;
   z-index: 5;
   margin: 0;
   padding: 0;
   list-style-image: url(../gfx/list_style.gif);
   border-top: 1px solid #0b3926;
}
   #projectenMenu li {
      margin: 5px 0px 5px 18px;
   }
   #projectenMenu a {
       color: #0b3926;
       text-decoration: none;
   }
      #projectenMenu a:hover {
         color: #A0410A;
         text-decoration: underline;
      }
      #projectenMenu li a.active {
         color: #A0410A;
      }
         #projectenMenu li a:hover.active {
            text-decoration: none;
         }

/* Content block
 ******************************************************************************/
#content {
	margin: 20px 10px 0px 10px;
   padding: 0;
	height: auto;
}

/* Footer
 ******************************************************************************/
#footer {
    width: 480px;
	 position: absolute;
	 bottom: 4px;
    color: #7E3003;
    text-align: center;
}
   #footer a {
       color: #7E3003;
       text-decoration: underline;
   }
      #footer a:hover {
          color: #0b3926;
          text-decoration: none;
      }

/* Tangram
 ******************************************************************************/
#tangram {
    height: 189px;
    width: 189px;
	 position: absolute;
	 z-index: 2;
	 bottom: 0px;
	 /*right: 44px;
	 background: url(../gfx/tangram.gif);*/
}

#logoElement {
   position: absolute;
   bottom: 0px;
   left: -60px;
}


#qforma {
   display: block;
   position: absolute;
   bottom: 6px;
   right: -30px;
}