﻿/*
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;} /* Not the best way, but this a hack for eyes cms and because IE6 doesn't understand auto */
html>body div[width] { width: auto !important; } /* Not the best way, but this is a hack for eyes cms */
a img { border: 0; }

/* PAGE-WIDE */
a { text-decoration: none; color: #51c4e1; }
a:hover { text-decoration: underline; }
body { font-size: 62.5%; }
body { background: #e4e2e3 url("images/colorbartopwhite.png") repeat-x top center; }
/* offset the background image when logged in */
body.login { background-position: center 78px; }

/*** 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;}

/* ---- [ 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; }

#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 12px; }

#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; }

#col3 { display: 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 .yellow h1 { padding-left: 30px; }
#navigation ul li { display: inline; float: left; width: 119px; 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; }

#navigation ul .blue { color: #035294; background: #bfd4e5 url("images/iconBeleid.jpg") no-repeat; }
#navigation ul .aqua { color: #51c4e1; background: #d4f1f7 url("images/iconDiensten.jpg") no-repeat; }
#navigation ul .red { color: #d4050f; background: #f4c0c2 url("images/iconWonen.jpg") no-repeat; }
#navigation ul .green { color: #006425; background: #c0d8c8 url("images/iconMilieu.jpg") no-repeat; }
#navigation ul .yellow { color: #f5a603; background: #fee8bf url("images/iconWerken.jpg") no-repeat; }
#navigation ul .purple { color: #7f3584; background: #dfcce0 url("images/iconCultuur.jpg") no-repeat; }
#navigation ul .lime { color: #85bc20; background: #dfeec7 url("images/iconToerisme.jpg") no-repeat; }
#navigation ul .fuchsia { color: #ab124a; background: #eac4d1 url("images/iconNews.jpg") no-repeat; }

#navigation ul .blue a { color: #035294; }
#navigation ul .aqua a { color: #51c4e1; }
#navigation ul .red a { color: #d4050f; }
#navigation ul .green a { color: #006425; }
#navigation ul .yellow a { color: #f5a603; }
#navigation ul .purple a { color: #7f3584; }
#navigation ul .lime a { color: #85bc20; }
#navigation ul .fuchsia a { color: #ab124a; }

/* content
--------------------------------21*/
#contentarea { margin-top: 4px; margin-bottom: 4px; float: left; width: 952px; clear: both; }
#breadcrumb { border-bottom: dotted 1px #9c9c9c; color: #9c9c9c; margin: 20px 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 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: #213651; color: #9c9c9c; 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; }

/* 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; }

#sidebar .news { float: left; width: 238px; }

/* 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: #ebebeb; font-weight: bold; }
#sidebar .calendar .selectorStyle { border: solid 1px #ebebeb; }

/* 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 { padding: 0 0 0 20px; }
#sidebar .tree .lvl3 a { padding: 0 0 0 35px; }

#sidebar .tree .lvl2 a:hover, #sidebar .tree .lvl3 a:hover { text-decoration: none; color: #9c9c9c; }

#sidebar .tree ul { display: none; }
#sidebar .tree ul.open { display: block; }

/*  DIFFERENT MARKUP FOR CONTENT PAGES:
------------------------------------------*/

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 #search, body.blue #tree .lvl1 a { background-color: #bfd4e5; }
body.aqua #sidebar #search, body.aqua #tree .lvl1 a  { background-color: #d4f1f7; }
body.red #sidebar #search, body.red #tree .lvl1 a  { background-color: #f4c0c2; }
body.green #sidebar #search, body.green #tree .lvl1 a  { background-color: #c0d8c8; }
body.yellow #sidebar #search, body.yellow #tree .lvl1 a  { background-color: #fee8bf; }
body.purple #sidebar #search, body.purple #tree .lvl1 a  { background-color: #dfcce0; }
body.lime #sidebar #search, body.lime #tree .lvl1 a  { background-color: #dfeec7; }
body.fuchsia #sidebar #search, body.fuchsia #tree .lvl1 a  { background-color: #eac4d1; }

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: #035294; }
body.aqua #tree .open .current a, body.aqua #sidebar #tree .lvl2 a:hover, body.aqua #sidebar #tree .lvl3 a:hover { color: #51c4e1; }
body.red #tree .open .current a, body.red #sidebar #tree .lvl2 a:hover, body.red #sidebar #tree .lvl3 a:hover { color: #d4050f; }
body.green #tree .open .current a, body.green #sidebar #tree .lvl2 a:hover, body.green #sidebar #tree .lvl3 a:hover { color: #006425; }
body.yellow #tree .open .current a, body.yellow #sidebar #tree .lvl2 a:hover, body.yellow #sidebar #tree .lvl3 a:hover { color: #f5a603; }
body.purple #tree .open .current a, body.purple #sidebar #tree .lvl2 a:hover, body.purple #sidebar #tree .lvl3 a:hover { color: #7f3584; }
body.lime #tree .open .current a, body.lime #sidebar #tree .lvl2 a:hover, body.lime #sidebar #tree .lvl3 a:hover { color: #85bc20; }
body.fuchsia #tree .open .current a, body.fuchsia #sidebar #tree .lvl2 a:hover, body.fuchsia #sidebar #tree .lvl3 a:hover { color: #ab124a; }

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; }
