body { font-family: verdana, arial, helvetica, sans-serif; font-size: 10pt; margin: 0; padding: 0; background: #ffffff; }

.left { float: left; }
.right { float: right; }
.both { clear: both; }

#header { width: 900px; margin: 5px auto 0; }
    #header #bannerfb { width: 900px; margin: 5px auto 0; position: relative; }
    #header #banner { margin: 0; background: url( ../images/webbannerHM10.png ) no-repeat left top; background-size: 100%; height: 300px; width: 690px; border-radius: 4px; }
    #header .fbwrapper { width: 200px; position: absolute; top: 0; right: 0; margin-left: 10px; height: 300px; }

    #header #navigation {  background-color: green; overflow: hidden; display: block; border-radius: 4px; margin-top: 5px; }
        #header #navigation ul { list-style: none; padding: 0; margin: 0; overflow: hidden; }
        #header #navigation ul li { float: left; overflow: hidden; border-left: 1px  }
        #header #navigation ul li:first-child { border-radius: 4px 0 0 4px; }
        #header #navigation ul li a { color: white; text-decoration: none; padding: 5px 10px; display: block; }
        #header #navigation ul li:hover a { background-color: #4292D9; }
        #header #navigation ul li a.active { background-color: #4292D9; }

        #header #navigation ul li.facebook { background-color: #3B5998;  }
        #header #navigation ul li.facebook a:hover { background-color: #D8DFEA; }
        #header #navigation ul li.twitter { background-color: #00A0D1;  }
        #header #navigation ul li.twitter a:hover { background-color: #C0DEED ;  }
        #header #navigation ul li.rss { background-color: #ff8c00; }
        #header #navigation ul li.rss a:hover { background-color: #FFE9C3; }
        #header #navigation ul li.hm { background-color: #808080; }
        #header #navigation ul li.hm a:hover { background-color: #dcdcdc; }
        #header #navigation ul li.noborder { border-radius: 0; }
    #header #pathnav { margin: 5px; font-size: 8pt; }
        #header #pathnav a { color: green; text-decoration: none; }
        #header #pathnav a:hover { color: #4292D9; }

#content { width: 900px; margin: 5px auto 0; position: relative; }

    #content #title { border-radius: 4px; height: 180px; width: 900px; }

    #content #title.praktisch { background: url( ../images/pages/praktisch.jpg ) left top; }
    #content #title.code { background: url( ../images/pages/code.jpg ) left top; }
    #content #title.km30 { background: url( ../images/pages/35km.jpg ) left top; }
    #content #title.km40 { background: url( ../images/pages/45km.jpg ) left top; }
    #content #title.km60 { background: url( ../images/pages/60km.jpg ) left top; }
    #content #title.km80 { background: url( ../images/pages/80km.jpg ) left top; }
    #content #title.km100 { background: url( ../images/pages/100km.jpg ) left top; }
    #content #title.km120 { background: url( ../images/pages/120km.jpg ) left top; }
    #content #title.optie { background: url( ../images/pages/optielus.jpg ) left top; }
    #content #title.kids { background: url( ../images/pages/kids.jpg ) left top; }
    #content #title.fotos { background: url( ../images/pages/fotos.jpg ) left top; }

    #content #title #text { top: 120px; left: 0; position: absolute; border-radius: 0 0 4px 4px; height: 60px; width: 900px; background-color: rgba( 0,0,0,0.6 );  }
    #content #title #text {
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)"; /* IE8 */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);   /* IE6 & 7 */
        zoom: 1;
    }
    #content #title #text #place { color: #ffffff; font-size: 18px; margin-left: 10px; margin-top: 10px; }
    #content #title #text #date { color: #ffffff; font-size: 13px; margin-left: 10px; }

    #content #report { border-radius: 4px; border-bottom: 1px solid #808080; background-color: #dcdcdc; margin-top: 10px; padding: 15px; }
    #content #report div.block { margin-bottom: 10px; }
    #content #report h2:first-child, #content #report h3:first-child { margin-top: 0; }
    #content #report h2.first, #content #report h3.first { margin-top: 0; }
    #content #report a { color: green; text-decoration: underline; font-weight: bold; }
    #content #report a:hover { color: #4292D9; }

    #content #report.highlite div.block { margin-bottom: 5px; font-size: 14px; }

    #content #sportograf { border-radius: 4px; border-bottom: 1px solid #808080; background-color: #dcdcdc; margin-top: 10px; padding: 15px; }
    #content #sportograf div.block { margin-bottom: 10px; }
    #content #sportograf h2:first-child, #content #report h3:first-child { margin-top: 0; }
    #content #sportograf h2.first, #content #report h3.first { margin-top: 0; }
    #content #sportograf a { color: green; text-decoration: underline; font-weight: bold; }
    #content #sportograf a:hover { color: #4292D9; }

    #content #massage { border-radius: 4px; border-bottom: 1px solid #808080; background-color: #dcdcdc; margin-top: 10px; padding: 15px; }
    #content #massage div.block { margin-bottom: 10px; }
    #content #massage h2:first-child, #content #report h3:first-child { margin-top: 0; }
    #content #massage h2.first, #content #report h3.first { margin-top: 0; }
    #content #massage a { color: green; text-decoration: underline; font-weight: bold; }
    #content #massage a:hover { color: #4292D9; }


    #content #ngi { margin: 20px 0; }
    #content #ngi img { border-radius: 4px; width: 900px; }

    #content #left { margin-right: 200px; }
        #content #left #title { border-radius: 4px; height: 180px; width: 700px; background: url( ../images/webbannerHM10.png ) left -140px; background-size: 100%; }
        #content #left #title #text { top: 120px; left: 0; position: absolute; border-radius: 0 0 4px 4px; height: 60px; width: 700px; background-color: rgba( 0,0,0,0.8 ); }
        #content #left #title #text #place { color: #ffffff; font-size: 18px; margin-left: 10px; margin-top: 10px; }
        #content #left #title #text #date { color: #ffffff; font-size: 13px; margin-left: 10px; }

        #content #left #report { border-radius: 4px; border-bottom: 1px solid #808080; width: 690px; background-color: #dcdcdc; margin-top: 10px; padding: 5px; }

    #content #right { width: 190px; position: absolute; top: 0; right: 0; margin-left: 10px; }

    #content #right #recent { background-color: rgba( 66,146,217,0.5 ); color: white; border-radius: 4px; padding-bottom: 5px; }
        #content #right #recent .title { background-color: #4292D9; padding: 3px 6px; border-radius: 4px 4px 0 0; }
            #content #right .story { margin-top: 5px; background-image: url( http://www.herders.be/images/foto/2012/astene/home.jpg ); }
            #content #right .story .bg { background-color: rgba( 0,0,0,0.5 ); }
            #content #right .story .bg:hover { background-color: rgba( 0,0,0,0.3 ); cursor: pointer; }
                #content #right .story .bg .place { color: #ffffff; font-size: 13px; padding: 3px 6px; }
                #content #right .story .bg .date { color: #ffffff; font-size: 11px; padding: 3px 6px; }

    #content #right #hm { background-color: rgba( 66,146,217,0.5 ); color: white; border-radius: 4px; padding-bottom: 5px; margin-top: 15px; }
        #content #right #hm .title { background-color: #4292D9; padding: 3px 6px; border-radius: 4px 4px 0 0; }

#footnote { width: 900px; margin: 10px auto; text-align: center; border-radius: 4px; background-color: green; color: white; }

#sponsor { width: 900px; margin: 10px auto; }
    #sponsor .sponsor { margin-bottom: 15px; margin-right: 12px; float: left; border-radius: 4px; border: 1px solid #eeeeee; background-repeat: no-repeat; }
        #sponsor .sponsor.sixtie { height: 60px; }
        #sponsor .sponsor.onetwenty { height: 120px; }
        #sponsor .sponsor.decathlon { background-image: url( ../images/sponsor/decathlon.gif ); width: 188px; }
        #sponsor .sponsor.imschoot { background-image: url( ../images/sponsor/imschoot.gif ); width: 321px;  }
        #sponsor .sponsor.i4you { background-image: url( ../images/sponsor/irepairforyou.jpg ); width: 239px;  }
        #sponsor .sponsor.aed { background-image: url( ../images/sponsor/ADConsultancy.jpg ); width: 187px; }
        #sponsor .sponsor.maarkedal { background-image: url( ../images/sponsor/maarkedal.jpg ); width: 125px; }
        #sponsor .sponsor.fyffes { background-image: url( ../images/sponsor/fyffes.jpg ); width: 102px; }
        #sponsor .sponsor.os { background-image: url( ../images/sponsor/o-silence.gif ); width: 145px; }
        #sponsor .sponsor.wildkarblick { background-image: url( ../images/sponsor/wildkarblick.jpg ); width: 125px; }
        #sponsor .sponsor.jwire { background-image: url( ../images/sponsor/j-wire.gif ); width: 113px; }
        #sponsor .sponsor.netserve { background-image: url( ../images/sponsor/netserve.gif ); width: 150px; }
        #sponsor .sponsor.chalet { background-image: url( ../images/sponsor/chaletradar.jpg ); width: 140px; }
        /*#sponsor .sponsor.tereos { background-image: url( ../images/sponsor/syral.jpg ); width: 85px; }*/
        #sponsor .sponsor.kbc { background-image: url( ../images/sponsor/kbc.jpg ); width: 77px; }
        #sponsor .sponsor.bm { background-image: url( ../images/sponsor/bm.jpg ); width: 166px; }
        #sponsor .sponsor.sport { background-image: url( ../images/sponsor/sportograf.png ); width: 170px; }
        #sponsor .sponsor.bikeking { background-image: url( ../images/sponsor/bikeking.png ); width: 220px; }
        /*#sponsor .sponsor.lotus { background-image: url( ../images/sponsor/lotus.gif ); width: 100px; }*/
        /*#sponsor .sponsor.boesman { background-image: url( ../images/sponsor/boesman.gif ); width: 130px; }*/
        #sponsor .sponsor.etixx { background-image: url( ../images/sponsor/etixx.png ); width: 235px; }
        #sponsor .sponsor.biover { background-image: url( ../images/sponsor/biover.png ); width: 222px; }
        #sponsor .sponsor.wbv { background-image: url( ../images/sponsor/wbv.png ); width: 112px; }
        #sponsor .sponsor.vwb { background-image: url( ../images/sponsor/vwb.jpg ); width: 112px; }
        /*#sponsor .sponsor.chaleth { background-image: url( ../images/sponsor/chalet.jpg ); width: 180px; }*/
        #sponsor .sponsor.vhdb { background-image: url( ../images/sponsor/vhdb.png ); width: 225px; }
        #sponsor .sponsor.dop { background-image: url( ../images/sponsor/dop.jpg ); width: 166px; }
        #sponsor .sponsor.vm { background-image: url( ../images/sponsor/vm.jpg ); width: 231px; }
        #sponsor .sponsor.rem { background-image: url( ../images/sponsor/rem.png ); width: 232px; }

@media only screen and (max-width: 769px)
{
    body { margin: 5px; }
    #header { width: 100% }
    #header #bannerfb { width: 100%; position: relative; }
    #header #banner { height: 42vw; width: 100%; margin-bottom: 10px; }
    #header .fbwrapper { display: none; }

    #content { width: 100%; }
    #content #title { width: 100%; }
    #content #title #text { width: 100%; }

    /*#content #report { width: 100%; }*/
    /*#content #sportograf { width: 100%; }*/
    /*#content #massage { width: 100%; }*/

    #footnote { width: 100%; }
    #sponsor { width: 100%; }
}