@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; }

/* = CALENDAR ======================================== */

.calendar { 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; }
.calendarLink a.info { background-color:#C6E2FF; }
.calendarLink a.info:hover { background-color:#C6E2FF; color: #f00; }

.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, .roundedboxGONE { 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;
}

#photo-buttonbar
{
	float:right;	
}

#photo-navigation
{
	visibility:hidden; /* vervangen door photo-navigation-randomthumbnail */
	
	clear:left;
	overflow-y:hidden;
	overflow-y:auto;
	/*height:39px;*/	
	width:580px;
	width:700px;
	float:left;
	display:block;	
	margin-bottom:6px;	
}

#photo-navigation-randomthumbnail
{
	float:left;
	display:block;
	width:45%;
	border:#DDD solid 1px;
	height:47px;
	margin-right:2px;
	margin-bottom:2px;
	padding:2px;
}

#photo-content
{	
	width:100%;
	float:left;
	display:block;	
	/*padding-bottom:100px;*/
	clear:both;
}

#photo-thumb-navigation
{
	width:100%;
	text-align:center;
	float:left;
	display:block;
	text-align:center;	
}

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

/* = 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.info, a.info_small { position:relative; /*this is the key*/ z-index:24; }
a.info:hover, a.info_small:hover {z-index:25;}
a.info:hover, a.info_small:hover {z-index:25; background-color:#fff;} /* must be here for IE !!!??? */
a.info span, a.info div, a.info_small span {display: none;}
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:#FFFFFF;
	color:#000;
	padding:1px;	
	white-space:normal;
    text-align:left;
	text-decoration:none;
}
a.info img
{	
	margin-right:6px;
}
a.info_small:hover span
{	
	left:15px;
	width:80px;
}
a.info:hover span p
{
	margin-top:0px;
	margin-bottom:1px;
	padding-top:5px;
}
.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;
}