html, body {height: 100%; margin: 0; font-family: Calibri, Arial; background: #d7d7d7;}

img {border: none;}

/* The container element contains all content and is centered in the viewport */

#container {position: absolute; left: 50%; top: 50%; height: 580px; width: 900px; margin-left: -450px; margin-top: -290px; font-size: 12px;}

#home, #coaching_visie, #coaching_telecoaching, #training_visie, #training_mindfulness, #waarom_finestra, #tarieven_particulier, #tarieven_zakelijk, #roland_feenstra, #contact, #links, #inspiratie, #talent_motivatie_analyse {float: left; height: 550px; width: 550px; color: #ffffff;}

#home {background: #ff6600;}
#coaching_visie {background: #b3cb68;}
#coaching_telecoaching {background: #99ca3c;}
#training_visie {background: #d41d51;}
#training_mindfulness {background: #92afeb;}
#waarom_finestra {background: #424448;}
#tarieven_particulier {background: #b20e3b;}
#tarieven_zakelijk {background: #a88969;}
#roland_feenstra {background: #9d9faf;}
#contact {background: #f9a11b;}
#links {background: #927780;}

/* New items were added at 12/06/2011 */
#talent_motivatie_analyse {background: #adb6bc;}
#inspiratie {background: #9b8376;}

/* Textarea */

#wn {position: absolute; left: 35px; bottom: 65px; width: 445px; height: 300px; font-size: 13px; overflow: hidden;}

/* The space between two paragraphs is 2 times the height of a line */

p {line-height: 15px; margin-top: 15px; margin-bottom: 15px;}

h1, h2 {font-size: 13px; font-weight: bold; line-height: 15px; margin-top: 15px; margin-bottom: 15px;}

ul {margin-top: 0px; margin-bottom: 0px;}

ul li {line-height: 15px;}

/* Contact page */

#table1 {position: absolute; left: 0px; top: 0px; width: 445px;}

#table2 {position: absolute; left: 0px; bottom: 0px;}

#table1 td {vertical-align: top; padding: 5px 0px 5px 0px;}

#table2 td {vertical-align: top; padding: 0px 0px 5px 0px;}

/* Contact form page */

#table_form {width: 445px;}

#table_form td {vertical-align: top; padding: 5px 0px 5px 0px;}

input, textarea {width: 220px; font-family: Calibri, Arial; font-size: 13px;}

/* Links */

a:link, a:visited, a:hover, a:active {font-weight: bold; color: #ffffff; text-decoration: underline;}

/* Scroll buttons */

#scrollLinks {position: absolute; left: 505px; bottom: 65px; width: 20px;}

/* Two pictures */

.picture {float: right; width: 350px;} 

/* Logo */

#logo {position: absolute; left: 378px; top: 35px; z-index: 1;}

/* Footer */

#footer_l {position: absolute; left: 0px; bottom: 0px; color: #ffffff; font-weight: bold;}

#footer_r {position: absolute; right: 0px; bottom: 0px; color: #ffffff; font-weight: bold;}

#footer_l a:link, #footer_r a:link, #footer_l a:visited, #footer_r a:visited, #footer_l a:hover, #footer_r a:hover, #footer_l a:active, #footer_r a:active {text-decoration: none; color: #666668;}

/* Menu */

#navigation {position: absolute; left: 35px; top: 35px; width: 120px; font-size: 14px; font-weight: bold;}

/*Main Menu*/

#navigation ul {margin: 0px; padding: 0px; list-style: none;}

#navigation ul li {cursor: pointer; display: block; line-height: 1.25;}

#navigation ul li a:link, #navigation ul li a:visited, #navigation ul li a:active {text-decoration: none; color: #ffffff;}

#navigation ul li a:hover {text-decoration: none; color: #666668;}

#navigation ul li:hover {position: relative;}

/*Sub Menu*/

#navigation ul ul {display: none; position: absolute; left: 100%; top: 0px;}

#navigation ul li:hover ul {display: block;}

#navigation ul ul li {width: 130px; float: left; display: inline;}