@charset "utf-8"; body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-weight: normal; background-image: url(../images/back.gif); margin: 0; background-position: left top; /*text-align: center;*/ color: #6E376E; } #container { background-image: url(../images/main-achtergrond.png); position: absolute; left: 52px; margin: 0px; padding: 0px; } #top { background-image: url(../images/top-achtergrond.png); height: 258px; width: 930px; } #main { top: 258px; width: 930px; } #mainvoet p{ font-size:9px; } #topmain { background-image:url(../images/top-achtergrond.png) float: left; height: 258px; width: 880px; padding-left: 25px; } #topmain #topmainleft { float: left; height: 258px; width:407px; } #topmain #topmainleft #flash-home { position:relative; float:left; width: 407px; height: 184px; } #topmain #topmainright { } #topmain #topmainleft #menu { height: 74px; width: 568px; background-color: #FFF; position: absolute; left: 26px; top: 184px; } #main #mainlinks{ float: left; width:708px; } #mainlinks p, h1, h2, h3 { padding-left: 45px; padding-right:10px; } #mainlinks h1 { font-size:16px; } #mainlinks h2 { font-size:14px; } #mainlinks h3 { font-size:12px; } #mainlinks ul { padding-left: 55px; padding-right:10px; } #mainlinks ol { padding-left: 55px; padding-right:10px; } #mainlinks a { font-weight:bold; } #mainlinks a:link { color:#6E376E; text-decoration: none; } #mainlinks a:visited { color:#066; text-decoration: none; } #mainlinks a:hover { color:#066; text-decoration:underline; } #mainlinks a:active { } #main #mainrechts { } #mainrechts table, tr, td{ background-color: none; margin: 0px; width:auto; } table{ width:90%; margin-left: 45px; } .clearfloat { /* dit exemplaar van class moet op een element div of break zijn geplaatst en dient het laatste element te zijn vóór de afsluiting van een container (hoofdobject) die op zijn beurt onderliggende zwevende objecten dient te bevatten */ clear:both; height:0; font-size: 1px; line-height: 0px; } /* deze code kopieren en inplakken in de van de pagina */ /* of opnemen in extern stylesheet bij meerdere pagina's */ /* styles om met één image een heel knoppenblok te bedienen */ /* gevonden op: http://home.tiscali.nl/developerscorner/port-hole/knoppenblok.htm */ /* ©francky; freeware, svp deze bronvermelding intact laten voor gebruik door anderen */ /* eerst de eigenschappen voor alle list-items
  • van het knoppenblok */ #menu{ margin:0px; padding:0px; } #menu ul { margin:0px 0px 0px -40px;} #knoppenblok li { /* DEZE CODES KUNNEN ONVERANDERD BLIJVEN */ list-style-type: none; /* lijst zonder stipjes ervoor */ float:left ; /*margin-left: 0px; begin van elke knop moet nu naar links om vooraan te beginnen */ margin-bottom: 0px; /* onder elke knop 2px tussenruimte */ font-size: 1px; /* InternetExplorer denkt dat een knop tekst-hoogte heeft, */ line-height: 1px; /* en gaat anders te grote waarden hiervoor instellen */ } /* dan de eigenschappen voor alle links in het knoppenblok */ #knoppenblok li a { /* WIJZIGEN: vindplaats/naam van het plaatje met alle knoppen */ background-image:url(../images/SO-Organized-menu.png); display: block; /* NIET WIJZIGEN: hele knop tonen, hele knop is klikbaar */ } /* nu voor elke knop de normale positie in het knoppenblok aangeven, */ /* en daarna de positie bij hover (mouse-over) */ #knop1 a { width: 81px; /* WIJZIGEN: breedte van knop 1 */ height: 31px; /* WIJZIGEN: hoogte van knop 1 */ background-position: 0 0; } #knop1 a:hover { background-position: 0px -32px; } #knop1sel a { width: 81px; /* WIJZIGEN: breedte van knop 1 */ height: 31px; /* WIJZIGEN: hoogte van knop 1 */ background-position: 0px -32px; } #knop2 a { width: 81px; /* WIJZIGEN: breedte van knop 2 */ height: 31px; /* WIJZIGEN: hoogte van knop 2 */ background-position: -81px 0px; } #knop2 a:hover { background-position: -81px -32px; } #knop2sel a { width: 81px; /* WIJZIGEN: breedte van knop 2 */ height: 31px; /* WIJZIGEN: hoogte van knop 2 */ background-position: -81px -32px; } #knop3 a { width: 81px; /* WIJZIGEN: breedte van knop 2 */ height: 31px; /* WIJZIGEN: hoogte van knop 2 */ background-position: -162px 0px; } #knop3 a:hover { background-position: -162px -32px; } #knop3sel a { width: 81px; /* WIJZIGEN: breedte van knop 2 */ height: 31px; /* WIJZIGEN: hoogte van knop 2 */ background-position: -162px -32px; } #knop4 a { width: 81px; /* WIJZIGEN: breedte van knop 3 */ height: 31px; /* WIJZIGEN: hoogte van knop 3 */ background-position: -243px 0px; } #knop4 a:hover { background-position: -243px -32px; } #knop4sel a { width: 81px; /* WIJZIGEN: breedte van knop 3 */ height: 31px; /* WIJZIGEN: hoogte van knop 3 */ background-position: -243px -32px; } #knop5 a { width: 81px; /* WIJZIGEN: breedte van knop 2 */ height: 31px; /* WIJZIGEN: hoogte van knop 2 */ background-position: -324px 0px; } #knop5 a:hover { background-position: -324px -32px; } #knop5sel a{ width: 81px; /* WIJZIGEN: breedte van knop 2 */ height: 31px; /* WIJZIGEN: hoogte van knop 2 */ background-position: -324px -32px; } #knop6 a { width: 81px; /* WIJZIGEN: breedte van knop 3 */ height: 31px; /* WIJZIGEN: hoogte van knop 3 */ background-position: -405px 0px; } #knop6 a:hover { background-position: -405px -32px; } #knop6sel a { width: 81px; /* WIJZIGEN: breedte van knop 3 */ height: 31px; /* WIJZIGEN: hoogte van knop 3 */ background-position: -405px -32px; } #knop7 a { width: 81px; /* WIJZIGEN: breedte van knop 2 */ height: 31px; /* WIJZIGEN: hoogte van knop 2 */ background-position: 81px 0px; } #knop7 a:hover { background-position: 81px -32px; } #knop7sel a { width: 81px; /* WIJZIGEN: breedte van knop 2 */ height: 31px; /* WIJZIGEN: hoogte van knop 2 */ background-position: 81px -32px; }