@import "/_makeitwork/script-datepicker.css";
/*
Copyright Make IT Work 2009
Last updated: 17/12/2009

Make sure this CSS is loaded FIRST and then only your private CSS file !
This way, you can overule default CSS settings
*/

html { font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif; font-size:12px; }

img
{
	image-rendering: optimizeQuality;  /* Firefox 3.6+; default behavior is optimizeQuality - optimizeSpeed*/
	-ms-interpolation-mode: bicubic;   /* Internet Explorer 7.0; default in IE8+ */
}
/* = CALENDAR ======================================== */

.calendar { background-color:#FFF; margin:2px; border-spacing:5px; border:none; font-size:11px;}
.calendarmini { background-color:#FFF; margin:2px; border-spacing:5px; border:none; font-size:11px;}

.calendarMonth, .calendarThisMonth { font-weight:bold; padding:4px; background-color:#C6E2FF; } /* bvb September 2010 */
.calendarDayHeader { font-weight:bold; background-color:#E8F2FF; }
.calendarday1 { background-color:#FFFFFF; padding:2px; margin:0px; margin-top:1px; margin-right:1px; border:solid 1px #CCCCCC; }
.calendarday0 { background-color:#F3F3F3; padding:2px; margin:0px; margin-top:1px; margin-right:1px; border:solid 1px #CCCCCC; }

.calendarLink { background-color:#C6E2FF; } /* Color */
.calendarLink a.info { background-color:#C6E2FF; } /* Color of a day with an activity */
.calendarLink a.info:hover { background-color:#C6E2FF; color: #F00; } /* idem, when hovered */

.calendarToday, .calendarThisMonth { background-color:#C00; color: #FFF; } 
.calendarToday a.info { background-color:#C00; color: #FFF; }
.calendarToday a.info:hover { background-color:#C00; color: #000; }
.calendarSelected { background-color:#BBB; color: #FFF; }

/* = TABLES ========================================== */

.fancytable { font-size:11px; background-color:#F5F5F5;	color: #000000;	margin-bottom:5px;}
.fancytable .highlight1 { background-color: #EEEEEE; }
.fancytable .highlight0 { background-color: #F8F8F8; }
.fancytable .highlight0:hover, .fancytable .highlight1:hover { background-color: #C2E0F5; }
.fancytable thead, .fancytable th
{
	text-align:left;	
	font-weight:normal;	
	background-color: #C6E2FF; /*#C6E2FF;*/
	padding-left:2px;
	padding-right:2px;
	padding-top:4px;
	padding-bottom:2px;
	color: #333333;	
	border:none;
}

/* = Buttons ========================================== */

button, input, select { font-size:12px; }
label { font-weight:bold; display:block; margin-bottom:2px; color:#333} /* clear:both;
.button { cursor: pointer; }

/* = FIELDSET & LEGEND FIX =========================== */

/* Also put the following in HTML:
<style> fieldset { /border: 1px solid #CFCFC5; } </style>
*/

fieldset
{ -moz-border-radius: 6px; padding-left:8px; padding-right:8px; }

legend
{ color: #6085B2; margin-left: 5px; padding-left: 5px; padding-right: 5px; }

/* = ErrorsDiv for yav =============================== */

.innerError
{
	border: #FF8000 1px solid;
	background-color:#FFFFCC;
	color: #FF0000;
	padding:2px;
	margin-bottom:4px;
	font-size:10px;
}

.errorsDiv { width:900px; height:120px; overflow:auto; display:none; }

.error_box { border: 0px solid ThreeDShadow; -moz-border-radius: 10px; padding: 1em; -moz-box-shadow:0 0 5px 5px rgba(34,34,34,0.1);
}

.inputError { border:2px solid #FF0000; background-color:#FFECEC; }

.inputNormal { border:1px solid #CCCCCC; }

.verplicht
{
	border:#FF0000 solid 1px;
	/*background-color:#FFECEC;*/
}

.readonly
{
	color:#CCC;
}

/* = FEEDS ======================================= */

.rssfeed { font-size:11px; }
.feed_title { font-weight: bold; text-align:left; }
.feed_description { margin-top:4px; display:block; }
.feed_description a { text-decoration:none; }
.feed_description img { margin-right:4px; }
.feed_link { margin-top:6px; display:block; margin-bottom:6px; }
.feed_hr { height: 1px; color:#eeeeee; }

/* = FOTOALBUM ======================================= */

.quoted
{
	color:#999999;
	font-style:italic;
	text-align:justify;
	padding:10px;
	padding-left:45px;
	padding-top:25px;
	background-image: url(/_makeitwork/lib-pics/bg_quote2.gif);
	background-repeat: no-repeat;
	background-position: 5px 5px;
	margin:0 auto;
	position:relative;
}

.legenda { color:#666666; padding:2px; font-size:10px; }

#photo-breadcrumb
{
	float:left;
	/*width:47%;	*/
}

#photo-buttonbar
{
	float:right;
	text-align:right;
}

#photo-navigation-randomthumbnail
{
	float:left;
	display:block;
	width:48%;
	border:#DDD solid 1px;
	min-height:55px;
	margin-right:2px;
	margin-bottom:2px;
	padding:2px;
	font-size:9px;
}

#photo-navigation-randomthumbnail:hover
{
	background-color:#EEE;
}

#photo-navigation-randomthumbnail a
{
	font-size:12px;
}

#photo-content
{
	margin-top:5px;
	float:left;
	width:100%
}

#photo-albums
{
	/*clear:both;*/
}

#photo-thumb-navigation
{	
	width:100%;
	text-align:center;
	vertical-align:middle;
	background-color:#EEE;
}

.photo-kies-album { margin-bottom:6px;}

#photo-folder-bold { font-weight: bold; color:#EEEEEE; background-color:#EEEEEE; padding:1px; }
#photo-folder-normal { color:#000000; /*background-color:#EEEEEE; padding:2px; */ }

.photo_box { vertical-align:top; text-align:center; margin-left:2px; margin-right:2px; margin-top:2px; margin-bottom:2px; display:inline-block; }
.photo_box_photo { display:table-cell; text-align:center; vertical-align:bottom; padding-bottom:2px; }
.photo_box_legend { color:#666; font-size:10px; }
.photo_box_legend_admin { }

/* = CLEAR =========================================== */
.clear,.clearer {clear: both;}

/* = Mouse-over pop-up tooltip =======================
Also needed for mini-calendar 
Usage: This is <a class="info" href="javascript:void(null);">some text<div>This is the tooltip</div></a> which you have.
*/

a.infowide, a.info, a.info_small { position:relative; /*this is the key*/ z-index:24; text-decoration:none;}
a.infowide:hover, a.info:hover, a.info_small:hover {z-index:25;}
a.infowide:hover, a.info:hover, a.info_small:hover {z-index:25; background-color:#fff; text-decoration:none;} /* must be here for IE !!!??? */
a.infowide span, a.info span, a.info div, a.info_small span {display: none;}
a.infowide:hover span, a.info:hover span, a.info:hover div, a.info_small:hover span
{
    /*font-size: 11px;*/
	font-weight:normal;
	display:block;
	width:230px;	
    position:absolute;
    left:22px;
	top:-2px;	
    border:1px solid #CCCCCC;
    background-color:#FFFFEA;
	color:#000;
	padding:1px;	
	white-space:normal;
    text-align:left;
	text-decoration:none;
	padding-bottom:10px;
	padding-right:5px;
}
a.infowide img, a.info img
{	
	margin-right:6px;
}
a.info_small:hover span
{	
	left:15px;
	width:80px;
}
a.infowide:hover span
{
	text-align:right;
	top:-200px;
	left:-515px;
	width:500px;
}
a.infowide:hover span p, a.info:hover span p
{
	margin-top:0px;
	margin-bottom:1px;
	padding-top:2px;
}
.font10pix { font-size:10px; }
.font9pix { font-size:9px; }
.font8pix { font-size:8px; }
.font7pixfont { font-size:7px; }

/* tableSorter */

table.tablesorter {	
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;
	padding-right:18px;
}
table.tablesorter thead tr .header {
	background-image: url(/_makeitwork/lib-pics/tablesorter_none.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;	
}
table.tablesorter tbody tr.odd td, table.tablesorter tbody tr.highlight1 td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(/_makeitwork/lib-pics/tablesorter_asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(/_makeitwork/lib-pics/tablesorter_desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}

/* TAB BALK */
.tabContainer {
	padding-left:5px;
	position: absolute;
	margin-bottom: -1px;
	z-index: 100;
	width: auto; /*630px;*/
}
.tabContainer a {border:none; display: block; float: left; text-decoration: none !important; text-align: center; font-weight: bold;}
.tabContainer a.tabMedOn { width: 105px; height: 19px; margin: 0px 0px 0px 10px; padding: 11px 0px 0px 0px; background: url(/_makeitwork/lib-pics/bg_tabeenvoudig_on.gif) no-repeat 0px 0px;}
.tabContainer a.tabMedOff { width: 105px; height: 19px; margin: 0px 0px 0px 10px; padding: 11px 0px 0px 0px; background: url(/_makeitwork/lib-pics/bg_tabeenvoudig_off.gif) no-repeat 0px 0px;}
.tabContainer a.tabLargeOn { width: 135px; height: 19px; margin: 0px 0px 0px 5px; padding: 11px 0px 0px 0px; background: url(/_makeitwork/lib-pics/bg_tabuitgebreid_on.gif) no-repeat 0px 0px;}
.tabContainer a.tabLargeOff { width: 135px; height: 19px; margin: 0px 0px 0px 5px; padding: 11px 0px 0px 0px; background: url(/_makeitwork/lib-pics//bg_tabuitgebreid_off.gif) no-repeat 0px 0px;}

/* max 9 !! */
#tab01, #tab02, #tab03, #tab04, #tab05, #tab06, #tab07, #tab08, #tab09{ background: #fff /*url(/pics/bg_zoeken.jpg) repeat-y top right*/; position: relative; top: 29px;
width: auto; /*615px;*/
margin-bottom:40px; padding: 10px; border: #ccc 1px solid; overflow-x: hidden; overflow-y: auto; height: 500px;}