﻿/*
Title:      	Lommel master styles for screen media
Author:     	vpa, © 2008 anaXis nv.
Updated:        August 08 2008
*/

/* RESET */
* { margin: 0; padding: 0; }
* div[width] { width: 100% !important;} /* stupid hack for eyes cms and because IE6 doesn't understand auto */
html>body div[width] { width: auto !important; } /* stupid hack for eyes cms */
a img { border: 0; }

/*** IMAGES ***/ 

.image_top_left {display: block; margin-bottom: 15px;}
.image_top_middle {display: block; margin: 0 auto 15px auto;}
.image_bottom_left {display: block; margin-top: 15px;}
.image_bottom_middle {display: block; margin: 15px auto 0 auto;}
.image_align_right {float: right; padding: 0 0 0 15px;}
.image_align_left {float: left; padding: 0 15px 0 0;}

/* PAGE-WIDE */
a { text-decoration: none; color: #51c4e1; }
a:hover { text-decoration: underline; }
body { font-size: 62.5%; }
body { background: #e5eff0 url("images/colorbartopwhite.png") repeat-x top center; }
/* offset the background image when logged in */
body.login { background-position: center 78px; }
.error { color: #FF0000; }

/*
colors:

bg sand: faf5e9
above photo block: ece6d8
sidebar blocks: f8eed5

topbar blocks:
1 / 4 / 7 - orange: dark e1b447 light f4dda5 text b78409
2 / 5 / 8 - green : dark 99ad62 light daeda6 text 637239
3 / 6     - blue  : dark 68a3ae light b7e9f2 text 357581
*/

/* ---- [ typography & font color ] ------------ */
body { font-family: "Arial", "Verdana", sans-serif; }
#functions { color: #666666; }
#basiclinks { font-weight: bold; color: #9c9c9c; }
#topnavigation ul { font-family: "Arial Narrow"; color: #000000; }
#navigation h1 { font-size: 1.3em; letter-spacing: -0.03em; }
#breadcrumb .trailintro { font-weight: bold; }
#maincontent { font-size: 1.1em; color: #666666; }
#maincontent p { margin-right: 20px; }
#maincontent h1 { font-family: "Arial Rounded MT Bold"; font-weight: normal; font-size: 1.7em; }
#maincontent h2 { font-family: "Arial Rounded MT Bold"; font-weight: normal; font-size: 1.5em; }	
#footer address { font-style: normal; line-height: 1.4em; letter-spacing: 0.1em; }
#sidebar .sidebar .block { font-family: "Arial Rounded MT Bold"; font-size: 1.5em; }
#sidebar .sidebar h3 { font-family: "Arial Rounded MT Bold"; font-weight: normal; font-size: 1.7em; }
#sidebar #search .text { font: normal 62.5%/1.5em Arial, Verdana, sans-serif; font-size: 1em; }
#sidebar .calendar .m-cal { font-family: Tahoma, Arial, Sans-Serif; }
#sidebar .news div { font-family: Tahoma, Arial, Sans-Serif; }
#sidebar .newslink { font-weight: bold; }
#sidebar .sidebar ul { list-style-type: none; }
#sidebar #widget_link { float: left; width: 238px; }

/*	top
--------------------------------*/
#wrapper { background: #FFFFFF; width: 960px; margin: auto; font-size: 1.1em; }
#top { height: 185px; float: left; width: 952px; margin: 0; padding: 0 4px;}
#bottom { background: #FFFFFF url("images/colorBar.png") no-repeat 4px top; float: left; width: 952px; margin: 0; padding: 9px 4px 4px 4px; }

#top { background: url("images/floral.jpg") no-repeat 238px 10px; }

#col1 { float: left; width: 238px; }
#col1 a { color: #666666; }
#functions { background-color: #d7d7d7; }
#functions ul { height: 19px; padding: 5px 10px 6px 10px; margin-bottom: 4px; }
#functions ul li { display: inline; }
#functions ul li a img { position: relative; top: 2px; }
#functions .separator { padding: 0 5px; }

#photo { position: relative; }
#photo, #photo img { width: 238px; height: 150px; }
#upload_photo { position: absolute; bottom: 10px; right: 10px; width: 26px; height: 21px; }
#upload_photo a { display: block; }
#upload_photo img { width: 26px; height: 21px; }

#col2 { float: left; width: 238px; }
#col2 a { color: #9c9c9c; }
#basiclinks { border-bottom: dotted 1px #9c9c9c; height: 19px; margin: 6px 10px 4px 8px; padding: 0 0 5px 5px; }
#basiclinks .separator { padding: 0 8px; }
#basiclinks ul.lang { display: inline; }
#basiclinks ul.lang li { display: inline; list-style-type: none; }
#basiclinks ul.lang span { padding: 0 3px; }

#col3 { display: none; }
#col3 { float: left; text-align: center; }
#col3 img { width: 235px; padding-top: 20px; }

#topnavigation ul { list-style-type: none; letter-spacing: 0.1em; } /* TEST LETTER SPACING! */
#topnavigation ul li { margin: 8px 10px 0 8px; padding-left: 2px; border-bottom: dotted 1px #000000; text-transform: uppercase; }
#topnavigation ul a { color: #000000; }
#topnavigation a:hover { color: #666666; text-decoration: none; }

#titleLogo { float: right; }

/* bottom
--------------------------------*/
#content { float: right; width: 714px; }
#footer { clear: both; float: left; width: 952px; }

/* navigation blocks
--------------------------------*/
#navigation { float: left; }
#navigation h1 { padding-left: 35px; padding-top: 5px; height: 2.5em; }
#navigation .aqua h1 { padding-left: 32px; letter-spacing: -0.05em;}
#navigation ul li { display: inline; float: left; width: 118px; border-left: 1px solid #e5f1f2; padding-bottom: 5px; height: 94px; overflow: hidden; }
#navigation ul ul { display: block; }
#navigation ul ul li { margin-left: 5px; padding-bottom: 0px; line-height: 1.2em; height: auto; border: none; }

#navigation ul .blue { color: #923893; background: #bfdbdf url("images/glaszand.jpg") no-repeat; width: 119px; border-left: none; }
#navigation ul .aqua { color: #b5841d; background: #bfdbdf url("images/beziensw.jpg") no-repeat; }
#navigation ul .red { color: #008397; background: #bfdbdf url("images/recrea.jpg") no-repeat; }
#navigation ul .green { color: #bb595c; background: #bfdbdf url("images/verblijf.jpg") no-repeat; }
#navigation ul .yellow { color: #669100; background: #bfdbdf url("images/info.jpg") no-repeat; }
#navigation ul .purple { color: #008397; background: #bfdbdf url("images/groep.jpg") no-repeat; }
#navigation ul .lime { color: #923893; background: #bfdbdf url("images/gift.jpg") no-repeat; }
#navigation ul .fuchsia { color: #bb595c; background: #bfdbdf url("images/link.jpg") no-repeat; }

#navigation ul a { color: #ffffff; }

#navigation ul .blue a:hover { color: #923893; }
#navigation ul .aqua a:hover { color: #b5841d; }
#navigation ul .red a:hover { color: #008397; }
#navigation ul .green a:hover { color: #bb595c; }
#navigation ul .yellow a:hover { color: #669100; }
#navigation ul .purple a:hover { color: #008397; }
#navigation ul .lime a:hover { color: #923893; }
#navigation ul .fuchsia a:hover { color: #bb595c; }

#navigation ul .blue h1 a { color: #923893; }
#navigation ul .aqua h1 a { color: #b5841d; }
#navigation ul .red h1 a { color: #008397; }
#navigation ul .green h1 a { color: #bb595c; }
#navigation ul .yellow h1 a { color: #669100; }
#navigation ul .purple h1 a { color: #008397; }
#navigation ul .lime h1 a { color: #923893; }
#navigation ul .fuchsia h1 a { color: #bb595c; }

/* content
--------------------------------*/
#contentarea { margin-top: 4px; margin-bottom: 4px; float: left; width: 952px; clear: both; }
#breadcrumb { border-bottom: dotted 1px #9c9c9c; color: #9c9c9c; margin: 21px 5px 8px 5px; padding-bottom: 5px; }
#logof{margin: 0px 0px -14px 5px;}

#maincontent { margin-left: 15px; margin-top: 15px; }
#maincontent p { padding-bottom: 5px; }
#maincontent h1 { padding: 20px 0 10px 28px; color: #043c79; background: url("images/iconNaald.png") no-repeat -5px bottom; }
#maincontent h2 { color: #51c4e1; padding: 5px 0; }
#maincontent a { color: #51c4e1; }

#contentarea .section { border-bottom: dotted 1px #9c9c9c; margin-bottom: 10px;}
#content #maincontent .news { background-image: url("images/iconNaaldHeet.png"); padding-top: 30px; }

#maincontent ul, #maincontent ol { margin: 5px 10px 5px 30px; }
#maincontent ul { list-style-image: url("images/list-style-image.png"); }
#maincontent table { border: solid 1px #9C9C9C; margin: 10px 0; border-collapse: collapse; }
#maincontent fieldset table, #maincontent fieldset th, #maincontent fieldset tr, #maincontent fieldset td { border: 0; }
#maincontent th { border: solid 1px #9C9C9C; padding: 5px 10px; border-bottom-width: 2px; }
#maincontent tr, #maincontent td { border: solid 1px #9C9C9C; padding: 3px 10px; }

#colorbar { height: 26px; background-color: #9c9c9c; margin-bottom: 4px; }
#footer address { background-color: #205e67; color: #c6c6c6; padding: 12px 10px 25px 12px; }
#footer address p { padding-bottom: 3px; }
#footer .separator { padding: 0 8px; }
#footer a { color: #9c9c9c; text-decoration: underline; }

#maincontent #eventData, #maincontent #eventData th, #maincontent #eventData tr, #maincontent #eventData td { border: 0; }

/*	sidebar
--------------------------------*/
#sidebar { width: 238px; float: left; }
#sidebar .sidebar * { padding: 5px; }
#sidebar .sidebar * * { padding: 0px; }
#sidebar .sidebar .block { color: #51c4e1; padding: 10px; background-color: #ebebeb; }
#sidebar .sidebar .block a { padding: 2px 30px 2px 0; background: url("images/iconMeer.jpg") no-repeat right center; }
#sidebar .sidebar h3 { color: #043c79; padding: 10px 5px 5px 5px; }

#sidebar .news { float: left; width: 238px; }

/* search */
#sidebar fieldset { border: 0; }
#sidebar #search { background-color: #ebebeb; }
#sidebar #search .button { width: 20px; height: 20px; position: relative; top: 5px; left: 5px; }
#sidebar #search .text { width: 13em; background: url("images/searchbar.png") no-repeat; margin: 8px 0 8px 10px; padding: 3px 5px; color: #666666; border: solid 1px #9C9C9C; }

/* calendar */
#sidebar .calendar div .m-cal { margin: 0 auto; font-size: 1.1em; border-collapse: collapse; }
#sidebar .calendar .titelStyle { font-weight: bold; font-size: 1.1em; }
#sidebar .calendar .titelStyle td { padding: 0 5px; }
#sidebar .calendar .titelStyle a { color: #000000; }
#sidebar .calendar .todayDayStyle { color: #FFFFFF; background-color: #51c4e1; font-weight: bold; }
#sidebar .calendar .todayDayStyle a { color: #FFFFFF; }
#sidebar .calendar td, #sidebar .calendar th { padding: 0 4px 2px 0; text-align: right; }
#sidebar .calendar .dayHeaderStyle { font-weight: normal; }
#sidebar .calendar .dayStyle { color: #666666; }
#sidebar .calendar .otherMonthStyle { color: #000000; }
#sidebar .calendar .selectedDayStyle { background-color: #f8eed5; font-weight: bold; }
#sidebar .calendar .selectorStyle { border: solid 1px #f8eed5; }

/* tree */
#sidebar .tree, #sidebar .tree ul { list-style-type: none; }
#sidebar .tree .lvl1 a { color: #043c79; font-size: 1.3em; font-weight: bold; display: block; margin-top: 4px; padding: 8px 10px; background-color: #ebebeb; }
#sidebar .tree .lvl2 a, #sidebar .tree .lvl3 a { color: #666666; font-size: 1.1em; font-weight: bold; background-color: #ffffff; }
#sidebar .tree .lvl2 a:hover, #sidebar .tree .lvl3 a:hover { text-decoration: none; color: #9c9c9c; }

#sidebar .tree .lvl2 a { padding: 0 0 0 20px; }
#sidebar .tree .lvl3 a { padding: 0 0 0 35px; }
#sidebar .tree .lvl4 a { padding: 0 0 0 50px; }

#sidebar .tree ul { display: none; }
#sidebar .tree ul.open { display: block; }

/*  DIFFERENT MARKUP FOR CONTENT PAGES:
------------------------------------------*/

#colorbar { background-color: #c99519; background-image: url("images/bottombar.png"); }

/*body.blue #colorbar { background-color: #035294; }
body.aqua #colorbar { background-color: #51c4e1; }
body.red #colorbar { background-color: #d4050f; }
body.green #colorbar { background-color: #006425; }
body.yellow #colorbar { background-color: #f5a603; }
body.purple #colorbar { background-color: #7f3584; }
body.lime #colorbar { background-color: #85bc20; }
body.fuchsia #colorbar { background-color: #ab124a; }*/

body.blue #sidebar .tree .lvl1 a { color: #923893; }
body.aqua #sidebar .tree .lvl1 a { color: #b5841d; }
body.red #sidebar .tree .lvl1 a { color: #008397; }
body.green #sidebar .tree .lvl1 a { color: #bb595c; }
body.yellow #sidebar .tree .lvl1 a { color: #669100; }
body.purple #sidebar .tree .lvl1 a { color: #008397; }
body.lime #sidebar .tree .lvl1 a { color: #923893; }
body.fuchsia #sidebar .tree .lvl1 a { color: #bb595c; }

body.blue #sidebar .tree .lvl2 a { color: #666666; }
body.aqua #sidebar .tree .lvl2 a { color: #666666; }
body.red #sidebar .tree .lvl2 a { color: #666666; }
body.green #sidebar .tree .lvl2 a { color: #666666; }
body.yellow #sidebar .tree .lvl2 a { color: #666666; }
body.purple #sidebar .tree .lvl2 a { color: #666666; }
body.lime #sidebar .tree .lvl2 a { color: #666666; }
body.fuchsia #sidebar .tree .lvl2 a { color: #666666; }

body #sidebar #tree ul .lvl2 a, body #tree ul .lvl3 a { background-color: #ffffff; }
body #sidebar #tree .open .current .open a { color: #666666; }

body.blue #tree .open .current a, body.blue #sidebar #tree .lvl2 a:hover, body.blue #sidebar #tree .lvl3 a:hover { color: #923893; }
body.aqua #tree .open .current a, body.aqua #sidebar #tree .lvl2 a:hover, body.aqua #sidebar #tree .lvl3 a:hover { color: #b5841d; }
body.red #tree .open .current a, body.red #sidebar #tree .lvl2 a:hover, body.red #sidebar #tree .lvl3 a:hover { color: #008397; }
body.green #tree .open .current a, body.green #sidebar #tree .lvl2 a:hover, body.green #sidebar #tree .lvl3 a:hover { color: #bb595c; }
body.yellow #tree .open .current a, body.yellow #sidebar #tree .lvl2 a:hover, body.yellow #sidebar #tree .lvl3 a:hover { color: #669100; }
body.purple #tree .open .current a, body.purple #sidebar #tree .lvl2 a:hover, body.purple #sidebar #tree .lvl3 a:hover { color: #008397; }
body.lime #tree .open .current a, body.lime #sidebar #tree .lvl2 a:hover, body.lime #sidebar #tree .lvl3 a:hover { color: #923893; }
body.fuchsia #tree .open .current a, body.fuchsia #sidebar #tree .lvl2 a:hover, body.fuchsia #sidebar #tree .lvl3 a:hover { color: #bb595c; }

body.detail #navigation ul li { height: 35px; display: block; }
body.detail #contentarea { margin-top: 4px; }
/*body.blue #navigation ul .blue { margin-left: 0px; }
body.aqua #navigation ul .aqua { margin-left: 119px; }
body.red #navigation ul .red { margin-left: 238px; }
body.green #navigation ul .green { margin-left: 357px; }
body.yellow #navigation ul .yellow { margin-left: 476px; }
body.purple #navigation ul .purple { margin-left: 595px; }
body.lime #navigation ul .lime { margin-left: 714px; }
body.fuchsia #navigation ul .fuchsia { margin-left: 833px; }*/

/*	created
--------------------------------*/
#created { width: 960px; margin: auto; text-align: right; padding-top: 5px; }
#created span { height: 22px; padding-bottom: 25px;}
#created img { vertical-align: middle; padding-left: 5px; }

/*	forms
--------------------------------*/
.form-container fieldset { padding: 5px 0 5px 5px; width: 80%; margin: 5px 0; }
.form-container fieldset legend { margin-left: 10px; padding: 0 5px; color: #666666; }
.form-container fieldset .fieldrow { padding-bottom: 5px; }
.form-container fieldset .fieldrow a { padding-left: 5px; }
.form-container fieldset div { margin-bottom: 5px; }
.form-container fieldset div div { margin-bottom: 0; }
.form-container .btnForm { margin-top: 10px; }
.form-container .resultrow { margin-left: 10px; margin-top: 5px; font-style: italic; }
.form-results h2 b { color: #666666; font-size: 0.9em; font-weight: normal; margin-right: 10px; }
.form-results dl { margin-top: 10px; }
.form-results dl dt { font-size: 1.2em; }
.form-results dl dd em { margin-right: 3px;}
.form-pager { text-align: center; }
.form-pager div { float: left; padding: 0 10px; }
.form-pager div a { padding: 0 2px; }
.elo_Label { padding: 0 3px; }
.fieldrow label.lblfgtpass{float:left;width:113px;}
.fieldrowinv label { padding-left: 5px; }

.error { color: #ff0000; }

acronym, abbr, dfn { border-bottom: dashed 1px #666666; }
q { font-style: italic; }

/* -----[ CSS editing ] ----------------	*/
#eyeEditMenu *, 
#eyeEditMenu table { margin: 0 !important; border: 0 !important; }
#eyeEditMenu a { cursor: pointer; }
