/* Stylesheet van website KoosRiepma.nl */

*
{
  margin           : 0;
  padding          : 0;
}

body
{
  font-family      : arial, sans-sarif;
  background       : #ffffff;
  color            : #333;
  font-size        : 12px;
}

h1
{
  color            : red;
  text-align       : center;
  margin           : 0;
  font-size        : 300%;
  font-style       : normal;
}

h2
{
  color            : red;
  text-align       : center;
  margin           : 0;
  font-size        : 200%;
  font-style       : normal;
}

h3
{
  color            : red;
  text-align       : center;
  margin           : 0;
  font-size        : 150%;
  font-style       : italic;
}

h4
{
  color            : red;
  text-align       : center;
  margin           : 0;
  font-size        : 120%;
  font-style       : italic;
}

h5
{
  color            : black;
  text-align       : center;
  margin           : 0;
  font-size        : 110%;
  font-style       : italic;
}

#container
{
  position         : absolute;
  left             : 50%;
  width            : 800px;
  height           : 800px;
  margin-left      : -400px;
  background       : #dde5f4 url(../afbeeldingen/verloop_menu.png) top left repeat-y;
}

#topvlak
{
  position         : absolute;
  top              : 0px;
  left             : 0px;
  display          : block;
  width            : 800px;
  height           : 82px;
  color            : red;
  border-style     : solid;
  border-width     : 1px;
  border-color     : red;
}

#topvlak h1
{
  padding          : 15px 20% 0 0;
}

#topvisual_left
{
  margin           : 0;
  padding          : 0;
  float            : left;
}

#topvisual_right
{
  margin           : 0;
  padding          : 0;
  float            : right;
}

#topnavigatie
{
  position         : absolute;
  top              : 85px;
  left             : 0px;
  width            : 800px;
  height           : 72px;
  border-style     : solid;
  border-width     : 1px;
  border-color     : red;
  padding          : 0 0 5px 0;
}

#topnavigatie ul
{
  list-style       : none;
}

#topnavigatie li
{
  text-align       : center;
  display          : block;
  margin           : 16px 15px 0 10px;
  float            : left;
}

#topnavigatie a
{
  text-decoration  : none;
  display          : block;
}

#topnavigatie a:link
{
  color            : #222;
}

#linkernavigatie
{
  position         : absolute;
  top              : 165px;
  left             : 0px;
  width            : 130px;
  height           : 635px;
  padding          : 0px 10px 0px 10px;
  border-style     : solid;
  border-width     : 1px;
  border-color     : red;
}

#linkernavigatie ul
{
  list-style       : none;
  margin           : 0;
  padding          : 0% 0% 0% 1%;
  font-size        : small;
  font-variant     : small-caps;
}

#linkernavigatie a
{
  text-decoration  : none;
  display          : block;
}

#linkernavigatie a:link
{
  color            : blue;
  border-style     : solid;
  border-width     : 1px 0 1px 0;
  border-color     : transparent;
}

#linkernavigatie a:hover
{
  border-style     : solid;
  border-width     : 1px 0 1px 0;
  border-color     : blue;
}

#inhoud
{
  position         : absolute;
  top              : 165px;
  left             : 153px;
  width            : 474px;
  height           : 635px;
  padding          : 0px 10px 0px 10px;
  background       : #dde5f4;
  border-style     : solid;
  border-width     : 1px;
  border-color     : red;
}

#verwijzing
{
  position         : absolute;
  top              : 165px;
  left             : 650px;
  width            : 130px;
  height           : 635px;
  padding          : 0px 10px 0px 10px;
  background       : #dde5f4;
  border-style     : solid;
  border-width     : 1px;
  border-color     : red;
  text-align       : center;
}


#team
{
  position         : relative;
  display          : block;
  width            : 461px;
  height           : 293px;
  background       : url(../afbeeldingen/heren3.jpg) no-repeat;
}

/* Opzetten van een definitielijst <dt><a> om het "hoveren" op het achtergrondplaatje mogelijk te maken*/
#team a#titel
{
  display          : block;
  width            : 461px;
  height           : 0;
  padding-top      : 293px;
  overflow         : hidden;
  position         : absolute;
  left             : 0;
  top              : 0;
  background       : transparent url(../afbeeldingen/heren3.jpg) no-repeat 461px 400px;
  cursor           : default;
}

/* de hack voor IE vooraf aan IE6 */
* html #team a#titel
{
  height           : 240px;
  he\ight          : 0;
}

/* de <dt><a> hover stijl om het achtergrondplaatje op positie 0,0 te krijgen */
#team a#titel:hover
{
  background-position: 0 0;
  z-index            : 10;
}

/* place the <dd>s in the correct absolute position */
#team dd
{
  position         : absolute;
  padding          : 0;
  margin           : 0;
}
#team #pic1
{
  left             : 380px;
  top              : 70px;
  z-index          : 20;
}
#team #pic2
{
  left             : 340px;
  top              : 70px;
  z-index          : 20;
}
#team #pic3
{
  left             : 300px;
  top              : 70px;
  z-index          : 20;
}
#team #pic4
{
  left             : 250px;
  top              : 80px;
  z-index          : 20;
}
#team #pic5
{
  left             : 210px;
  top              : 70px;
  z-index          : 20;
}
#team #pic6
{
  left             : 170px;
  top              : 80px;
  z-index          : 20;
}
#team #pic7
{
  left             : 130px;
  top              : 75px;
  z-index          : 20;
}
#team #pic8
{
  left             : 85px;
  top              : 65px;
  z-index          : 20;
}

/* Geef de <dd><a> links een fysieke grootte en het achtergrondplaatje voor het hoveren */
#team a#wil, #team a#klaas, #team a#rob, #team a#ej, #team a#willem, #team a#ronald, #team a#koos, #team a#stephen
{
  display          : block;
  width            : 40px;
  height           : 40px;
  background       : transparent url(../afbeeldingen/hover2.gif) -100px -100px no-repeat;
  text-decoration  : none;
  z-index          : 20;
}

/* Geef de span tekst een zodanige stijl dat de span tekst niet direct zichtbaar is */
#team a span, #team a:visited span
{
  display:none;
}

/* verplaats het achtergrondplaatje link naar positie 0 0 zodra deze is gehovered */
#team a#wil:hover, #team a#klaas:hover, #team a#rob:hover, #team a#ej:hover
{
  background-position: 0 0;
}

/* bepaal de normale stijl voor de span tekst */
#team a:hover span
{
  position         : absolute;  
  width            : 450px; 
  display          : block; 
/*  background       : #fff; */
  color            : #000; 
  border           : 1px solid red; 
  padding          : 5px;
}
/* the hack for IE pre IE6 */
* html #team a:hover span
{
  width            : 400px;
  w\idth           : 388px;
}

/* verplaats de span tekst naar de juiste positie */
#team a#wil:hover span
{
  left             : -380px; 
  top              : 230px;
}
#team a#klaas:hover span
{
  left             : -340px;
  top              : 230px;
}
#team a#rob:hover span
{
  left             : -300px; 
  top              : 230px;
}
#team a#ej:hover span
{
  left             : -250px; 
  top              : 220px;
}
#team a#willem:hover span
{
  left             : -210px; 
  top              : 230px;
}
#team a#ronald:hover span
{
  left             : -170px; 
  top              : 220px;
}
#team a#koos:hover span
{
  left             : -130px; 
  top              : 225px;
}
#team a#stephen:hover span
{
  left             : -85px; 
  top              : 235px;
}

/* Extra stijl voor de eerste regel */
#team a span:first-line
{
  font-weight      : bold; 
  font-style       : italic;
}

/* Foto's van de spelers laten floaten */
.speler
{
  float            : left;
  margin           : 0 10px 0 0;
}

.opsomming1
{
  list-style       : outside disc url(../afbeeldingen/button_blue.gif);
  margin-left      : 40px;
}

.under_construction
{
  padding          : 0% 0% 0% 25%;
}