body { margin-top: 80px; margin-left:0px; font-family: arial; font-size: 12px;}
#menu {float:left; margin-left: 20px; padding:0; width: 180px; overflow:hidden; text-align: left; margin-bottom: 136px;}
#menu A{font-size: 14px; color: #ffffff; font-weight: bold; text-decoration: none;}
#update {float: left; margin-left: 20px; font-size: 11px; color: #ffffff; font-weight: bold; }
#update A{color: #ffffff; text-decoration: none; }
#news {float: left; margin-left: 10px; width: 720px; text-align:left; margin-bottom: 0px;}
#homeimg{float: left; width: 210px;}
#newsimg A{float: left; padding: 5px 5px 5px 5px; border: 1px solid #ffffff;}
#newsimg A:hover{ border: 1px solid #cc0000;}
#newstitle { float: left; color: #CC0000; font-size: 14px; font-weight: bold; display: block; margin-bottom: 5px; width: 490px; margin-left: 10px;}
#newscontent {float: left; width: 490px; margin-left: 10px;}
#newscontent A{color: #CC0000;}
#pagetitle {color: #000000; font-size: 24px; font-weight: bold; width: 150px; float: right; text-transform: uppercase;}
#pagination {float: left; width: 580px; text-align: left; height: 40px; margin-left: 10px;}
#pagination A{color: #cc0000; font-weight: bold; font-size: 18px; text-decoration: none;}
.white {font-size: 14px; color: #ffffff; font-weight: bold; text-decoration: none;}
#activiteit {float: left; margin-left: 10px; width: 720px; text-align:left; margin-bottom: 10px;}
#activiteittitle { float: left; color: #CC0000; font-size: 14px; font-weight: bold; display: block; margin-bottom: 5px; width: 720px;}
#activiteitcontent {float: left; width: 720px;}

#projecten {float: left; margin-left: 10px; width: 720px; height: 552px; text-align:left; margin-bottom: 0px;}
#project A{ float: left; padding: 5px 5px 5px 5px; border: 1px solid #ffffff;}
#project A:hover{ border: 1px solid #cc0000;}
#projectthumbs {width: 500px; float: left; margin-left: 3px;}
.thumbs{margin-right: 3px; float: left; margin-bottom: 3px;}

#persoverview {float: left; margin-left: 10px; width: 720px; height: 560px; text-align:left; margin-bottom: 10px;}
#persdetail {float: left; margin-left: 10px; margin-top: 10px; width: 370px; text-align:left; margin-bottom: 10px; color:#ffffff}
#persdetail A{color: #ffffff; }
#pers A{ float: left; padding: 5px 5px 5px 5px; border: 1px solid #ffffff;}
#pers A:hover{ border: 1px solid #cc0000;}
#pers A.active{ border: 1px solid #cc0000;}

a.info{
    position:relative; /*this is the key*/
    z-index:24; 
    text-decoration:none
    }
a.info:hover{z-index:25; background-color:#fff}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em; width:200px;
    border:1px solid #cc0000;
    background-color:#fff; color:#000;
    text-align: left
    padding: 5px;
    margin-left: 5px;
    cursor: hand;
    }
a.info:hover span p{
    margin-left: 5px;
    cursor: hand;
    }
    
#linktitle { float: left; color: #CC0000; font-size: 14px; font-weight: bold; display: block; margin-bottom: 5px; margin-left: 10px; width: 720px; text-align: left; }
#linkname { float: left; color: #000000; font-size: 12px; display: block; margin-bottom: 5px; margin-left: 150px; width: 250px; text-align: left; }
#linkurl { float: left; color: #000000; font-size: 12px; display: block; margin-bottom: 5px; margin-left: 10px; width: 250px; text-align: left; }
#linkurl A{color: #CC0000;}
#contact {float: left; width: 350px; text-align:left; margin-bottom: 10px;}
#contacttitle { float: left; color: #CC0000; font-size: 14px; font-weight: bold; display: block; margin-bottom: 5px; width: 340px;}
#contactcontent {float: left; width: 350px;}