/*-----------------------------------------------------------------------------
Website: Chirodesselgem.be
Auteur: Webpixel.be
Laatst gewijzigd: 23-10-2010
-----------------------------------------------------------------------------*/

/*------------------------------- START HTML BODY -------------------------------*/
html, body { background: #f1f1eb url(../Graphics/Body_bg.gif) repeat-x top left; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; line-height: 16px; color: #2e2822; text-align: center; }
/*------------------------------- END HTML BODY -------------------------------*/

/*------------------------------- START TITLES -------------------------------*/
h1, h2, h2, h4, h5, h6 { font-family: Arial, Helvetica, Verdana, sans-serif; }
h1 { font-size: 25px; color: #c40b35; font-weight: bold; letter-spacing: -1px; margin: 0 0 20px; }
h2 { font-size: 20px; color: #c40b35; font-weight: bold; letter-spacing: -1px; margin: 0 0 10px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
/*------------------------------- END TITLES -------------------------------*/

/*------------------------------- START LINKS -------------------------------*/
a:link, a:visited, a:active { color: #c40b35; }
a:hover { color: #ac192e; }
/*------------------------------- END LINKS -------------------------------*/

/*------------------------------- START CONTAINER -------------------------------*/
#container { width: 960px; margin: 0 auto; text-align: left; }
html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }
/*------------------------------- END CONTAINER -------------------------------*/

/*------------------------------- START HEADER -------------------------------*/
#header { position: relative; width: 960px; height: 200px; }

/* Logo */
#header a#logo { position: absolute; top: 30px; left: 0; display: block; width: 322px; height: 86px; background: url(../Graphics/Logo.png) no-repeat top left; text-indent: -9999px; }
#header a:hover#logo { background-position: bottom left; }

/* Mainnav */
#header ul#mainnav { position: absolute; bottom: 7px; left:0; height: 33px; }
#header ul#mainnav li { display: inline; }
#header ul#mainnav li.divider { float: left; display: block; height: 33px; width: 2px; background: url(../Graphics/Mainnav_divider.gif) repeat-y top left; text-indent: -9999px; }
#header ul#mainnav li a { float: left; display: block; height: 33px; line-height: 33px; margin: 0 2px; padding: 0 15px; color: #f1f1eb; text-decoration: none;  }
#header ul#mainnav li a:hover { text-decoration: underline; }
#header ul#mainnav li a:hover.active { text-decoration: none; }
#header ul#mainnav li a.active { background: #f1f1eb; -moz-border-radius: 5px; color: #2e2822; }

/* Login */
#header #login { position: absolute; top: 0; right: -5px; width: 126px; heigth: 26px; line-height: 26px; background: url(../Graphics/Login_bg.png) no-repeat top left; text-align: center; }
#header #login a { display: block; width: 116px; height: 26px; line-height: 26px; margin: 0 0 0 5px; text-decoration: none; color: #2e2822; }
#header #login a:hover { color: #c40b35; }
/*------------------------------- END HEADER -------------------------------*/

/*------------------------------- START MAIN -------------------------------*/
#main { width: 960px; padding: 0 0 150px 0; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #2e2822; }
/*------------------------------- END MAIN -------------------------------*/

/*------------------------------- START CONTENT -------------------------------*/
#content { float: left; width: 600px; margin: 0 30px 0 0; }

/* News post */
.news_post { margin: 30px 0 0 0; overflow: hidden; }
.news_post p.posted_by { margin: 0 0 15px 0; color: #757570; }
.news_post p.posted_by a.reactions { background: url(../Graphics/Comment_icon.gif) no-repeat center left; padding: 0 0 0 20px; }
.news_post p.post_reaction { margin: 15px 0 0 0; padding: 8px 8px 8px 25px; background: #f8f8f1 url(../Graphics/Comment_add_icon.gif) no-repeat 5px 9px; border: 1px solid #d9dad5; }
.last { margin-bottom: 30px; }
.news_post p img.img_right { float: right; margin: 0 0 15px 15px; padding: 1px; border: 2px solid #d9dad5; }
.news_post p img.img_left { float: left; margin: 0 15px 15px 0; padding: 1px; border: 2px solid #d9dad5; }

/* Pagination */
ul#pagination { clear: both; margin: 0 0 30px 0; list-style: none; }
ul#pagination li { display: inline; }
ul#pagination li a { padding: 5px 10px; background: #f8f8f1; border: 1px solid #d9dad5; }
ul#pagination li a.first_last { text-decoration: none; }
ul#pagination li a.current { font-weight: bold; border: 1px solid #c5c6c3; }

/* Over ons & Werking */
#over_ons, #werking { margin: 30px 0; }
#over_ons h3, #werking h3 { margin: 20px 0; }
#over_ons ul, #werking ul { margin: 10px 0 10px 15px; list-style-type: square; list-style-position: inside; }
#over_ons ol, #werking ol { margin: 10px 0 10px 20px; }
#werking p img { float: left; margin: 0 15px 0 0; padding: 1px; border: 2px solid #d9dad5; }

#werking .inline_thumb_box { margin: 10px 0; padding: 10px; border: 1px dotted #d9dad5; }
#werking .inline_thumb_box a img { margin: 0 5px 5px 0; border: 2px solid #d9dad5; }

/* Afdelingen */
#afdelingen { clear: both; margin: 30px 0; }
#afdelingen .afdeling { margin: 0 0 10px 0; padding: 10px; background: #f8f8f1; border: 1px solid #d9dad5; overflow: hidden; }
#afdelingen .afdeling p { line-height: 20px; }
#afdelingen .afdeling h3 { margin-bottom: 10px; }
#afdelingen .afdeling p img { float: left; margin: 0 15px 0 0; padding: 1px; border: 2px solid #d9dad5; }

/* Foto-album */
#foto_album { margin: 30px 0; }
#foto_album h3 { margin-bottom: 10px; }
#foto_album .thumb_container { margin: 10px 0; padding: 10px 0; overflow: hidden; border-bottom: 1px dotted #d9dad5; }
#foto_album .thumb_container .thumb { float: left; position: relative; width: 100px; height: 100px; margin: 0 10px 10px 0; background: #f8f8f1; border: 2px solid #d9dad5; }
#foto_album .thumb_container .thumb:hover { border: 2px solid #c40b35; }
#foto_album .thumb_container .thumb span.title { position: absolute; bottom: 2px; left: 2px; display: block; width: 96px;  height: 20px; line-height: 20px; background: #f8f8f1; text-align: center; font-size: 10px; }

/* Agenda */
#agenda { margin: 30px 0 0 0; }
.agenda_item { margin: 0 0 10px 0; }
.agenda_item p { display: inline-block; }
.agenda_item h3 { display: block; height: 35px; line-height: 35px; margin: 0 0 10px 0 !important; padding: 0; }
.agenda_item h3 span.marker { display: inline-block; width: 35px; height: 35px; line-height: 35px; margin: 0 5px 0 0; text-align: center; background: #c40b35; color: #fff; }

ul.month_selection { width: auto; height: 25px;  margin: 20px 0 !important; padding: 10px; background: #f8f8f1; border: 1px solid #c5c6c3; overflow: hidden; }
ul.month_selection li { display: inline; }
ul.month_selection li a { float: left; display: block; height: 25px; line-height: 25px; margin: 0 2px 0 0; padding: 0 10px; text-decoration: none; font-weight: bold; }
ul.month_selection li a.active { background: #c40b35; color: #fff; }

/* Contact */
#contact { margin: 30px 0; }

/* Buttons */
.buttons {
	margin: 20px 0;
	overflow: hidden;
}
.buttons a { 
	float: left;
	margin: 0 30px 0 0;
}
.buttons a img { border: none; }

/* Reservations */

table.reservations {
	width: 100%;
	margin: 20px 0;
	border: 1px solid #dbdcd7;
	background: #fff;
	
}
table.reservations thead th {
	font-weight: bold;
	padding: 5px 10px;
	text-align: left;
}
table.reservations tbody td {
	padding: 5px 10px;
	text-align: left;
}

table.reservations tbody tr.dark td { background: #f1f1eb; }

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

/*------------------------------- START FORMS -------------------------------*/
.styled_form { margin: 0; padding: 10px; background: #f8f8f1; border: 1px solid #c5c6c3; }
.styled_form p { padding: 10px; }
.styled_form label { display: block; width: auto; height: 20px; line-height: 20px; }
.styled_form .input,
.styled_form .input_error { width: 300px; padding: 5px; background: #fff; border: 1px solid #c5c6c3; }
.styled_form .input:focus { border: 1px solid #abadaa; }
.styled_form .input_error { border: 1px solid #c00; }
.styled_form .textarea,
.styled_form .textarea_error { width: 300px; height: 200px; padding: 5px; background: #fff; border: 1px solid #c5c6c3; overflow: auto; } 
.styled_form .textarea_error { border: 1px solid #c00; }
.styled_form #submit { background: #f1f1eb; padding: 5px 10px; border: 1px solid #c5c6c3; cursor: pointer; }
 
.styled_form label,
.styled_form .input,
.styled_form .input_error,
.styled_form .textarea,
.styled_form .textarea_error { font-family: Arial, Helvetica, Verdana, sans-serif; font-size: 12px; }

.styled_form span.required { color: #c40b35; font-weight: bold; }

.styled_form p#validation_error { background: #ffdfdf; border: 1px solid #c00; }
.styled_form p#validation { background: #f1f1eb; border: 1px solid #c5c6c3; }

div#succevol_verzonden { margin: 20px 0; }
div#succevol_verzonden h3 { margin: 0 0 10px 0; }
/*------------------------------- END FORMS -------------------------------*/

/*------------------------------- START SIDEBAR -------------------------------*/
#sidebar { float: left; position: relative; width: 330px; padding: 110px 0 0 0; }

/* photo_scroller_home */
#sidebar #photo_scroller_home { position: absolute; top: -120px; left: -10px; width: 350px; height: 220px; background: url(../Graphics/Photo_scroller_home_bg.png) no-repeat top left; overflow: hidden; }
#sidebar #photo_scroller_home .fader { margin: 10px 0 0 20px; }

/* Buttons */
.button { width: 330px; height: 50px; margin: 0 0 10px 0; }

/* Sidebar nav */
#sidebar ul.sidebar_nav { list-style: none; margin: 15px 0; }
#sidebar ul li a { display: block; height: 30px; line-height: 30px; padding: 0 0 0 10px; border-bottom: 1px solid #d9dad5; text-decoration: none; }
#sidebar ul li a:hover, #sidebar ul li a.active { padding: 0 0 0 20px; background: #f8f8f1 url(../Graphics/Sidebar_nav_arrow.gif) no-repeat 10px 13px; text-decoration: none; font-weight: bold; }

/* Sidebar photobox */
#sidebar #sidebar_photobox { width: 330px; overflow: hidden; }
#sidebar #sidebar_photobox a { float: left; width: 100px; height: 100px; margin: 0 15px 15px 0; }
#sidebar #sidebar_photobox a.no_right_margin { margin: 0 0 10px 0; }

/* Sidebar contactinfo */
#sidebar #sidebar_contactinfo {}
/*------------------------------- END SIDEBAR -------------------------------*/

/*------------------------------- START FOOTER -------------------------------*/
#footer { position: relative; margin: -150px 0 0 0; height: 149px; clear: both; background: #f8f8f1; border-top: 1px solid #d9dad5; font-family: Arial, Verdana, Helvetica, sans-serif; font-size: 12px; color: #2e2822; }
#footer #inner_footer { width: 960px; height: 149px; margin: 0 auto; text-align: left; }

#footer #inner_footer .column { float: left; width: 300px; margin: 0 30px 0 0; padding: 15px 0; }
#footer #inner_footer .column h3 { margin: 0 0 15px 0; }
#footer #inner_footer .column h3 a { color: #2e2822; text-decoration: none; }
#footer #inner_footer .column h3 a:hover { color: #c40b35; text-decoration: underline; }

#footer #inner_footer .column h3.info { height: 32px; line-height: 32px; background: url(../Graphics/Info_icon.png) no-repeat center left; padding: 0 0 0 40px; }
#footer #inner_footer .column h3.agenda { height: 32px; line-height: 32px; background: url(../Graphics/Agenda_icon.png) no-repeat center left; padding: 0 0 0 40px; }
#footer #inner_footer .column h3.contact { height: 32px; line-height: 32px; background: url(../Graphics/Contact_icon.png) no-repeat center left; padding: 0 0 0 40px; }

#footer #inner_footer .last { margin: 0; }
/*------------------------------- END FOOTER -------------------------------*/

/*------------------------------- START OTHER CLASSES -------------------------------*/
.clear { clear: both; }
.hidden { display: none; }
.top_top { clear: both; padding: 5px 5px 5px 20px; background: #f8f8f1 url(../Graphics/To_top.png) no-repeat center left; border: 1px solid #d9dad5; }
.bold { font-weight: bold; }
/*------------------------------- 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 -------------------------------*/