/*-----------------------------------------------------------------------------

Website: www.haarlemseakademie.nl

Auteur: Webpixel.be

Laatst gewijzigd: 28-04-2009

-----------------------------------------------------------------------------*/



/*------------------------------- START RESET -------------------------------*/

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } 

/*------------------------------- END RESET -------------------------------*/



/*------------------------------- START HTML / BODY -------------------------------*/

html, body, #container { height: 100%; }

body { background: #e2e0dd url(../images/Body_bg.png) repeat-x top center; color: #484338; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; text-align: center; }

/*------------------------------- END HTML BODY -------------------------------*/



/*------------------------------- END DEFAULT LINK -------------------------------*/

a img { border: none; }

a:link, a:visited, a:active { color: #0abe96; text-decoration: underline; }

a:hover { color: #07b18b; text-decoration: none; }

a:focus { outline: none; }

/*------------------------------- END DEFAULT LINK -------------------------------*/



/*------------------------------- START HEADINGS -------------------------------*/

/*

h1 { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 20px; color: #07b18b; font-weight: bold; letter-spacing: -1px; } 

h2 { font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 16px; color: #544f46; font-weight: normal; line-height: 18px; }

*/

/*------------------------------- END HEADINGS -------------------------------*/



/*------------------------------- START CONTAINER -------------------------------*/

body > #container { height: auto; min-height: 100%; }

div#container { width: 900px; margin: 0 auto; text-align: left; }

/*------------------------------- END CONTAINER -------------------------------*/



/*------------------------------- START HEADER -------------------------------*/

div#header { position: relative; width: 900px; height: 231px; }



/* Logo*/

div#header a#logo { position: absolute; top: 30px; left: 0; width: 295px; height: 46px; background: url(../images/Logo.png) no-repeat top left; text-indent: -9999px; }



/* Mainnav */

div#header ul#mainnav { position: absolute; top: 100px; left: 0; width: auto; height: 30px; }

div#header ul#mainnav li { display: inline; }

div#header ul#mainnav li a:link,

div#header ul#mainnav li a:visited,

div#header ul#mainnav li a:active { float: left; display: block; width: auto; height: 30px; margin: 0 2px 0 0; background-position: top left; text-indent: -9999px; } 

div#header ul#mainnav li a#mainnav_home { width: 77px; background-image: url(../buttons/Mainnav_welkom.png); }

div#header ul#mainnav li a#mainnav_opleiding { width: 88px; background-image: url(../buttons/Mainnav_opleiding.png); }

div#header ul#mainnav li a#mainnav_aanmelden { width: 100px; background-image: url(../buttons/Mainnav_aanmelden.png); }

div#header ul#mainnav li a#mainnav_brochure { width: 88px; background-image: url(../buttons/Mainnav_brochure.png); }

div#header ul#mainnav li a#mainnav_route { width: 61px; background-image: url(../buttons/Mainnav_route.png); }

div#header ul#mainnav li a#mainnav_contact { width: 78px; background-image: url(../buttons/Mainnav_contact.png); }



div#header ul#mainnav li a:hover, div#header ul#mainnav li a.active { background-position: bottom left;  }

div#header ul#mainnav li a:focus { outline: none; }



/* Photoscroller */

div#header div#photoscroller { float: right; position: relative; width: 312px; height: 201px; margin: 30px 0 0 0;  background: url(../images/Photoscroller_bg.png) no-repeat top left; overflow: hidden; }

div#header div#photoscroller img { position: absolute; top: 5px; left: 5px; }

/*------------------------------- END HEADER -------------------------------*/



/*------------------------------- START CONTENT -------------------------------*/

div#content { padding-bottom: 52px; }



div#content div.tekstblok { float: left; width: 540px; height: auto; margin: -20px 0 25px 0; }

div#content div.tekstblok p { margin: 10px 0; color: #484338; line-height: 16px; }

div#content div.tekstblok p img { float: left; margin: 0 10px 5px 0; padding: 4px; border: 1px solid #cacac6; }



div#content div.opleiding_item { float: left; position: relative; margin: 0 0 10px 0; padding: 10px; background: #f5f4f1; border: 1px solid #cacac6; }

div#content div.opleiding_item span.titel { display: block; margin-bottom: 5px; font-weight: bold; }

div#content div.opleiding_item img { float: left; margin: 0 20px 0 0; padding: 3px; border: 1px solid #cacac6; }

div#content div.opleiding_item a.meer_info { position: absolute; bottom: 10px; right: -10px; width: 91px; height: 20px; padding: 13px 0 0 0; text-align: center; text-decoration: none; background: url(../images/Meer_info_bg.png) no-repeat top left; color: #484338; }

div#content div.opleiding_item a:hover.meer_info { text-decoration: underline; }



.kosten_info { display: block; padding: 0px 10px 10px 10px; margin: 0 0 5px 0; }

.kosten_info ul { padding-left: 20px; padding-top: 5px; list-style-image:url(../images/li_image2.png); }

.kosten_info li,.kosten_info li { padding: 2px;}

div#content div.kosten_item span.prijs { display: block; text-align: right; font-weight:bold; font-size: 16px; padding: 5px; }

div#content table.specialisaties {  float: left; position: relative;  padding: 0; background: #f5f4f1; border: 1px solid #6B6B6B; margin-bottom: 20px; width: 540px;  }

div#content table.specialisaties th { background-color:#e2e0dd; padding: 10px 10px 10px 5px; font-weight: bold;}

div#content table.specialisaties td { padding-left: 10px; padding-top: 10px;}

div#content table td.regels ul {  margin-left: 30px; padding: 5px; list-style-image:url(../images/li_image2.png);}



.tabel { width: 500px; margin-left: 20px; padding: 10px; float: left; position: relative; background:#f5f4f1; border: 1px solid #cacac6; }

.tabel td { padding: 2px; }

.textfield, .textfield_kleiner, .textfield_kleinst, .tabel textarea { border: 1px #CCCCCC solid; padding: 4px; font-size: 11px; color: #6B6B6B; }

.textfield { width: 280px; }

.textfield_kleiner { width: 150px; margin-left: 10px; }

.textfield_kleinst { width: 110px; }

.submit { width: 280px; text-align:center; font-variant: small-caps; background-color: #07b18b; border-width: 0px; color: white; }

.tabel textarea { height:60px; width:280px; }



.img { padding: 3px; border: 1px solid #6B6B6B; margin-left: 10px; }

.adres { font-weight:bold; margin-left: 20px; }

.kosten { font-variant: small-caps; font-size: 12px; font-weight: bold;  }



/*------------------------------- END CONTENT -------------------------------*/



/*------------------------------- START SIDEBAR -------------------------------*/

div#sidebar { float: right; width: 312px; height: auto; margin: 15px 0 0 0; padding: 0; }



/* Onze opleidingen */

div#sidebar div#onze_opleidingen h1, div#sidebar div#opendag h1, div#sidebar div#facebook h1 { display: block; width: 312px; height: 32px; margin: 0 0 15px 0; padding: 0 0 0 60px; background: url(../images/Sidebar_h1_bg.png) no-repeat top left; font-size: 16px; line-height: 27px; }

div#sidebar div#onze_opleidingen ul { list-style: none; margin: 0 0 15px 0; }

div#sidebar div#onze_opleidingen li a { display: block; width: 312px; height: 25px; line-height: 25px; margin: 5px 0; padding: 0 0 0 25px; background: url(../images/Arrow.png) no-repeat center left; font-size: 14px; color: #544f46; text-decoration: none; }

div#sidebar div#onze_opleidingen li a:hover { color: #00093c; text-decoration: underline; }

div#sidebar div#facebook { margin-bottom: 20px; }

/* Ons instituut */

div#sidebar div#ons_instituut { margin: 30px 0 0 0; }

div#sidebar div#ons_instituut h1 { display: block; width: 312px; height: 32px; margin: 0 0 15px 0; padding: 0 0 0 60px; background: url(../images/Sidebar_h1_bg.png) no-repeat top left; font-size: 16px; line-height: 27px; }

div#sidebar div#ons_instituut p { padding: 0 0 0 25px; line-height: 16px; font-size: 11px; }

/*------------------------------- END SIDEBAR -------------------------------*/



/*------------------------------- START FOOTER -------------------------------*/

div#footer { position: relative; margin-top: -52px; height: 52px; clear: both; background: url(../images/Footer_bg.png) repeat-x top left; }



/* Inner footer */

div#footer div#inner_footer { width: 900px; margin: 0 auto; line-height: 52px; }



div#footer div#inner_footer span.copyright { float: left; width: auto;  }

div#footer div#inner_footer span.persoonlijk_gesprek { float: right; width: auto; }

/*------------------------------- END FOOTER -------------------------------*/



/*------------------------------- START OTHER CLASSES -------------------------------*/



/* Button */

a:link.button, a:visited.button, a:active.button { display: inline-block; width: 109px; height: 32px; line-height: 32px; background: url(../buttons/Button.png) no-repeat top left; color: #554f46; font-size: 11px; text-decoration: none; text-align: center; } 

a:hover.button { color: #554f46; }



/* Arrow */

.arrow { display: block; width: 312px; height: 25px; line-height: 25px; margin: 5px 0; padding: 0 0 0 25px; background: url(../images/Arrow.png) no-repeat center left; font-size: 14px; color: #544f46; text-decoration: none; }

.arrow_spacer { padding: 3px; }







/*------------------------------- END OTHER CLASSES -------------------------------*/



/*------------------------------- START CLEARFIX -------------------------------*/

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } 

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/

* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* End hide from IE-mac */

/*------------------------------- END CLEARFIX -------------------------------*/