/*
achtergrond
#CCAA99
/*
#CCCCBB	//grijs achtergrond
#76827B //grijze header achtergrond
#EFF4F0	//lichtgrijs page achtergrond
#212a2a //top border achtergrond

#2E3735 //grijze content text color

#9194a5 // nog een ander tintje grijs
#E63C1E // leuk rood tintje

*/

body
{
	margin: 0;
	padding: 0;
	color: #2E3735;
	font: normal 0.625em/130% verdana, arial, helvetica, sans-serif;
	background: #CCCCBB;
 	border-top: 10px solid #212a2a;
}

html
{
	font-size: 1em;
}

html, body
{
	height: 100%;
}

div, ul, li, dl, dd, dt, h1, h2, h3, h4, h5, h6, th, td, tr, table, p, span
{
	padding: 0;
	margin: 0;
}

p
{
	margin: 0 0 0 0;
	padding: 0.2em 0 0.5em 0;
}

p.italic
{
	font-style: italic;
}

p.formContent
{
	background: #EEEEEE;
	padding: 10px;
}

h1
{
	font: bold 2.2em/110% arial, verdana, helvetica, sans-serif;
	padding: 0 0 0.2em 0;
	color: #777777;
}

h2
{
	font: normal 2em/110% verdana, arial, helvetica, sans-serif;
	padding: 0 0 0.3em 0;
	color: #777777;
	height: 20px;
}

h3
{
	padding: 0 0 0.3em 0;
}

h4
{
	font: normal 1em/110% verdana, arial, helvetica, sans-serif;
	font-weight: bold;
}

#logoContainer h1, #logoContainer h2, #titleContainer h2
{
	color: #00FF99;
}

#logoContainer p
{
	font: bold 1em/100% verdana, arial, helvetica, sans-serif;
}


#menuContainer h2
{
	color: #00FF99;
	font: normal 1.5em/90% verdana, arial, helvetica, sans-serif;
}

p.footNote
{
	margin: 5px 0 0 0;
	padding: 0.2em;
	float: right;
	background: #AAAAAA;
	color: #000000;
}

#demoInfo {
	margin: 5px;
	padding: 5px;
}

span.statusPeriodEmployee {
	font-weight: bold;
}

.inactive {
	color: #AAAAAA;
}

p.voorkeurenContainer {
	background-color: #E6C3C2;
	padding: 0.5em 1em;
}

p.mainText {
	font: 1.3em/100% trebuchet, arial, verdana, helvetica, sans-serif;
	margin: 5px;
	padding: 5px;
}

tr#AbsentiesTekstContainer td span#AbsentiesTekst {
	padding: 5px;
	float: left;
}

/* ---  Alle links  ---*/
a:link, a:visited {
	text-decoration: none;
}
#headerContainer a:link, #headerContainer a:visited { color: #CCCC99;}
#headerContainer a:hover, #headerContainer a:active { background-color: #CCCC99; color: #000000;}

#contentContainer a:link, #contentContainer a:visited { color: #FF0000;}
#contentContainer a:hover, #contentContainer a:active { background-color: #666; color: #FFFFFF;}

#contentContainer .dayHeader a:link, #contentContainer .dayHeader a:visited { color: #CCC;}
#contentContainer .dayHeader a:hover, #contentContainer .dayHeader a:active { background-color: #666; color: #CCC;}

/*-- ------------------- tables --------------------------- --*/

table
{
	width: 100%;
	padding: 0;
	margin-left: 0%;
	margin-right: 0%;
	font: 1em/1.2em "Trebuchet MS",Verdana,sans-serif;
	border-collapse: collapse;
	clear: both;
}

th{
	border-left: 0;
	padding: 5px;
}

td {
	border-left: 0;
}

thead th, tr.thead th {
	font-weight: bold;
	background-color: #C30;
	color: #FFB3A6;
	text-align: center;
}

tr.thead th#tekstHeaderCell {
	text-align: left;
}

tr.thead th#tekstHeaderCell span {
	font: 1.7em "Trebuchet MS",Verdana,sans-serif;
}

thead th table tr td, tr.thead th table tr td {
	text-align: left;
}

thead th table tr td, tr.thead th table tr td {
	background-color: #C30;
	color: #FFB3A6;
	align: left;
}

.dayHeader th{
	text-transform: none;
	text-align: left;
}

.dayHeader th div.datum {
	font: 1.7em "Trebuchet MS",Verdana,sans-serif;
	padding: 0 4px 0 0;
	width: 160px;
	height: 100%;
	float:left;
}

.columnTitles th {
	padding: 0 4px 0 0;
}

.dayHeader th div.notavs {
	color: #333;
}

#tableJobs tr td span {
	display:block;
	float:left;
	padding: 3px;
}

span.BeginTijd {
	text-align: right;
	padding: 3px;
}

tr.job div.indicator {
 	font: 0.6em/0.3em "Trebuchet MS",Verdana,sans-serif;
	padding-top: 0px;
	padding-bottom: 0px;
}

tr.job div.indicator span.BeginTijd, tr.job div.indicator span.EindTijd {
	padding: 3px;
}

tr.job div.indicator span.Job {
 	background:#780602;
	padding: 0px!important;
	margin: 3px 0 3px 0;
}

tr.job div.description{
	float: left;
	clear: left;
	overflow: visible;
	white-space: wrap;
}

span.Job {
	border: 0px solid #780602;
	white-space: nowrap;
	overflow: hidden;
}

span.Job.assignError label a:link,
span.Job.assignError label a:visited {
	color: #FFFFFF!important;
}

span.Job.notAssigned {
	border: 3px solid #FF0000;
	Xbackground-color: #FF0000;
	Xcolor: #FFFFFF;
}

span.Job.assignError {
	Xborder: 3px solid #FF0000;
	background-color: #FF0000;
	color: #FFFFFF;
}

span.EindTijd {
	padding: 3px 3px 3px 4px;
}

.columnBegin { width: 50px; overflow: hidden;}
.columnEnd { width: 50px; overflow: hidden;}
.columnTitle { width: 160px; overflow: hidden;}
.columnName { width: 160px; overflow: hidden; }
.columnSchedule { width: 160px; overflow: hidden; }
.columnLocation { width: 160px; overflow: hidden; }

tr#AbsentiesTekstContainer td, tr#VoorkeurenTekstContainer td {
	padding: 2px;
}

tr#AbsentiesWarningContainer td {
	margin: 0 0 2em 2em;
	padding: 5px;
	color: #780602;
	border: 1px solid #780602;
	background: #E6C3C2;
}

td input#Straat { width: 131px; }
td input#Huisnummer { width: 60px;}
td input#Postcode { width: 60px; }
td input#Woonplaats{ width: 131px;}

#tableEmployees tr td#notifyContainer  {
	background-color: #FFE51E;
	color: #000000;
	text-align: center;
 	font: 1.2em/1em "Trebuchet MS",Verdana,sans-serif;
	font-weight: bold;
	padding: 5px 0 5px 0;
}

#tableEmployees tr td.filtered {
	color: red;
}

#tableEmployees tr th.telefoonNummer {
	width: 85px;
}

tbody th {
	padding: 0 0 0 10px;
}

tbody td {
	padding: 2px 0 2px 10px;
}

tbody tr {
	background-color: #EFF4F0;
	color: #444;
}

tbody tr td table tr {
	border-bottom: 0px;
}

tbody tr.odd, tbody tr.odd td table tr, tr.weekend {
	background-color: #BBBBBB;
}

tbody tr.inactief, tbody tr.odd .inactief {
	color: #999999;
}

tbody a {
	padding: 1px 2px;
	color: #333;
	text-decoration: none;
}

tbody a:active,tbody a:hover,tbody a:focus,tbody a:visited {
	color: #666
}

tbody tr:hover {
	background-color: #DDD;
	color: #333;
}

tbody tr:hover a {
	background-color: #666;
}

.bgcolor td
{
	background-color: #FFF;
}

tbody tr td select {
	float: left;
}

tbody tr td span.postfix {
	clear: left;

}

tbody tr td img {
	vertical-align:middle;
}

ul.tooltipList {
	list-style: none;
}

.jobTooltip ul {
	float: left;
	padding: 0 0 0 5px;
}

.jobTooltip .tooltipFoto {
	float: left;
}

.employeeTooltip {
	width: 400px;
}

.employeeTooltip img {
	float: left;
	padding: 0 5px 5px 0;
}

.employeeTooltip ul {
	list-style: none;
}

.employeeTooltip ul li span {
	float: left;
	font-style: italic;
	font-weight: bold;
	width: 85px;
}

.employeeTooltip ul li span.comment {
	width: auto;
}

.employeeTooltip ul li.tooltipHeader {
	font: 1.7em "Trebuchet MS",Verdana,sans-serif;
}

.employeeTooltip ul li.tooltipPeriodHeader {
	font: 1.2em "Trebuchet MS",Verdana,sans-serif;
	font-weight: bold;
}

.employeeTooltip .phone, .employeeTooltip .straat {
	padding: 5px 0 0 0;
}

.employeeTooltip .email {
	padding: 0 0 8px 0;
}

/*-- ----------------- table statistieken ----------------- --*/
#tableCatering .dayHeader th div.cateringTotals {
	font: 1.7em "Trebuchet MS",Verdana,sans-serif;
}

#tableCatering tr.dayHeader {
	font-weight: bold;
	background: #FFB3A6;
}

#tableCatering tr td.totalColumn {
	width: 150px;
	text-align: right
}

#tableCatering tr td.cateringLunchDiner {
	width: 100px;
}

#tableStats .dayHeader th div.cateringTotals {
	font: 1.7em "Trebuchet MS",Verdana,sans-serif;
}

#statistiekenContainer .level1Container {
	font: 1.7em "Trebuchet MS",Verdana,sans-serif;
	color: #FFB3A6;
	background-color: #CC3300;
	padding: 5px;
}

#statistiekenContainer div {
	padding: 2px;
}

#statistiekenContainer .level2Container {
	font-weight: bold;
	background: #FFB3A6;
	margin: 0 0 0 1em;
}

#statistiekenContainer .level3Container {
	width: auto;
	background-color: #EFF4F0;
	color: #444444;
	margin: 0 0 0 2em;
}

#statistiekenContainer .level3Container td {
	vertical-align:top;
	width: 150px;
}


/*-- ----------------- table checkboxes ------------------- --*/
th.markCheckBox, td.markCheckBox {
	padding: 0 0 0 5px;
	width: 16px;
}


/*-- ----------------- table buttons ------------------- --*/
td.smallButton, th.smallButton, div.smallButton  {
	padding: 1px 0 0 1px!important;
	width: 16px;
	vertical-align: middle;
	background-color: #EEE;
}

td.smallButton a, th.smallButton a, div.smallButton a {
	display: block;
	height: 18px;
	width: 16px;
	text-decoration: none;
	background-color: #EEE;
}

td.smallButton a span, th.smallButton a span, div.smallButton a span {
	display: block;
	text-indent: -666666px;
}
td.edit a { background: url(../images/edit_button.jpg) no-repeat 0 0;}
td.edit a:hover { background: url(../images/edit_button_hover.jpg) no-repeat 0 0; }

td.copy a { background: url(../images/copy_button.jpg) no-repeat 0 0;}
td.copy a:hover { background: url(../images/copy_button_hover.jpg) no-repeat 0 0; }

td.delete a { background: url(../images/delete_button.jpg) no-repeat 0 0;}
td.delete a:hover { background: url(../images/delete_button_hover.jpg) no-repeat 0 0; }

th.new a { background: url(../images/new_button.jpg) no-repeat 0 0;}
th.new a:hover { background: url(../images/new_button_hover.jpg) no-repeat 0 0; }

div.assign a { background: url(../images/assign_button.jpg) no-repeat 0 0;}
div.assign a:hover { background: url(../images/assign_button_hover.jpg) no-repeat 0 0; }

.buttonVoorkeur {
	cursor: pointer;
	font-style: italic;
}

/*-- ------------------- layout --------------------------- --*/

#header
{
	height:42px;
	background: #76827B;
}

#bodyLogin #header
{
	height:42px;
}

#headerContainer
{
	width: 797px;
	margin: 0 auto 0 auto;
	overflow: hidden;
}

#logoContainer
{
	Xbackground-image: url(../images/festivalroosters3.jpg);
	clear: left;
	float: left;
	Xheight: 58px;
	width: 220px;
	overflow: hidden;
	color: #00FF99;
}

#logoContainer span#franksoftware
{
	font-style: italic;
	margin: 0 0 0 2px;
}

#menuContainer
{
	float: left;
	height: 42px;
	width: 574px;
	overflow: hidden;
}

#container
{
	width: 797px;
	margin: 0 auto 0 auto;
}

#contentContainer
{
	clear: left;
	float: left;
	font-size: 1.1em;
	line-height: 1.3em;
	width: 100%;
	min-height:300px;
	background: #CCCCBB;
}

#content
{
	clear: left;
	min-height:400px;
}

#footer {
	float: left;
	width: 100%;
	margin: 30px 0 0 0;
}

#footer p {
	text-align: center;
}

#loginFormContainer, #aanmeldFormContainer
{
	float: left;
	clear: left;
	padding: 30px 0 0 0;
	margin: 0 auto 0 auto;
	width: 400px;
	min-height:300px;
}

#pageHeader {
	clear: left;
	float: left;
	width: 100%;
}

#pageHeader div {
	float: left;
	clear: none;
}

#pageTitle {
	clear: left;
	float: left;
	width: 120px;
}

#filterFormContainer {
	float: left;
	clear: left;
}

#preHeader .helpLink {
	float: right;
}

#subHeader {
	clear: left;
	float: left;
}

#tableCommandContainer
{
	padding: 5px 5px 2px 0;
	float:left;
	clear:left;
}
#tableViewSelectContainer
{
	padding: 5px 5px 2px 0;
	float:right;
}

.clear
{

	overflow: hidden;
	clear:both;
	height:0;
	margin:0;
	font-size: 1px;
	line-height: 0px;
}

.hidden {
	display: none;
}

.visible {
	display: block;
}

.onlyPrint {
	display: none;
}

tr.visible {
	display: table-row;
}

ul li ul {
	position: relative;
	left: 40px;
}

/*-- ------------------- menu --------------------------- --*/
#topMenu
{
	height: 20px;
	width: 574px;
	overflow: hidden;
}
#leftMenu
{
	float: left;
}
#rightMenu
{
	float: right;
}
#mainMenu
{
	font-size: 1.7em;
	line-height: 115%;
}

#mainMenu li
{
	float: left;
	display: block;
	height: 20px;
	margin: 2px 0 2px 0;
	padding: 0 4px 0 2px;
}

#mainMenu li a
{
	height: 20px;
	padding: 0 2px 0 2px;
	text-decoration: none;
}

#mainMenu a:link, #mainMenu a:visited { color: #FFFFFF; }
#mainMenu a.active, #mainMenu li a:hover {	color: #000000; background: #CCCCBB; }

#demoMessage, #demoInfo {
	background: #E6C3C2;
	font-weight: bold;
	border: 1px solid red;
	cursor: pointer;
}

div#demoInfo {
///	display: none;
	margin: 0pt;
	padding: 10px;
}

div#demoInfo h3 span {
	font-size: 0.6em;
}

div#demoInfo ul {
	padding: 0 0 0 10px;
}

.helpTopContainer {
	margin: 0.5em 2em;
	padding: 5px;
	background: #00A0B6;
	font-weight: bold;
	border: 1px solid #00638F;
}

.helpTopContainer h3 span {
	color: #FFFFFF;
	float: right;
	cursor: pointer;
}

.helpTopContainer ol {
	margin: 0;
}

.helpTopContainer ul li span {
	width: 80px;
	float: left;
}

/*-- --------------- errors and messages ------------------ --*/


#messageContainer
{
	font: bold 1.4em/130% verdana, arial, helvetica, sans-serif;
	margin: 0.5em;
	padding: 0.5em;
}

#messageContainer .notifyMessage
{
	color: #212a2a;
	background: #94DF6F;
}

.notifyError, .error
{
	color: #780602;
	border: 1px solid #780602;
	background: #E6C3C2;
}

#messageContainer li
{
	margin: 0 0 0 20px;
	list-style: none;
}

//span#AutoAdjustMessage {
//	color: #780602;
//	border: 1px solid #780602;
//	background: #E6C3C2;
//}
/*-- ------------------- squares --------------------------- --*/

.paddingBox
{
	padding: 0;
}

#container .paddingBox
{
	padding: 10px 18px 10px 18px;
}

#bodyEmployees #container .paddingBox
{
	padding: 0px 18px 10px 18px;
}

/*-- ------------------- forms --------------------------- --*/
fieldset {
	border: 1px solid #333333;
	padding: 5px;
}

fieldset legend
{
	padding: 0 8px;
	color: #333333;
}

fieldset div {
	padding: 10px;
	background-color: #EEEEEE;
}

fieldset table tbody tr td
{
	padding-top: 5px;
}

input {
	width: 200px;
	margin: 0 5px 0 0;
}

input.toggleRoosterImg {
	width: 10px;
}

input#Onderwerp {
	width: 550px;
}

input#zoekterm {
	width: 200px;
	margin: 0 0 0 0;
	color: #AAAAAA;
}

span#Email, span#NickName {
	float: left;
	clear: both;
	width: 200px;
}

input.number{
	width: 40px;
}

tr.radio input {
	width: 40px;
}

tr.checkboxes input {
	width: 40px;
}

textarea {
	height: 60px;
	width: 100%;
}

select {
	margin: 0 5px 0 0;
}

textarea#Bericht {
	height: 120px;
	width: 550px;
}


input.checkbox{
	width: auto;
}

input.radiobutton{
	width: auto;
}

div#filterFormTopBorder {
	clear: left;
	height: 10px;
}

div#filterFormTopBorder a {
	float: right;
	margin-right: 20px;
	font: normal 0.6em/100% verdana, arial, helvetica, sans-serif;
}

form#filterForm .menu
{
	font-size: 0.8em;
	line-height: 80%;
	height: 11px;
}

form#filterForm .menu li
{
	float: left;
	display: block;
	height: 12px;
	margin: 2px 0 2px 0;
	padding: 0 4px 0 2px;
	border-left: 1px solid red;
	border-top: 1px solid red;
	border-right: 1px solid red;
}

form#filterForm .menu li a
{
	height: 12px;
	padding: 0 2px 0 2px;
	text-decoration: none;
}

form#filterForm .menu a:link, form#filterForm .menu a:visited { color: #000000; }
form#filterForm .menu a.active, form#filterForm .menu li a:hover {	color: #FFFFFF; background: #76827B; }

form#filterForm, #pagingContainer {
	float: right;
	clear: both;
}

form#filterForm div, #pagingContainer div {
	float: left;
	clear: none;
}

form#filterForm div div{
	clear: left;
}

span#FilterBeginDateMsg, span#FilterEndDateMsg  {
	display: none;
}

span#FilterBeginDateMsg.error, span#FilterEndDateMsg.error {
	display: inline;
}

#filterFormDates  {
	padding: -10px 0 0 0 ;
}

form#filterForm select{
	width: 100px;
	font-size:10px;
}

form#pagingForm select#pagingNumberOfItems {
	width: 40px!important;
	font-size:10px;
}

form#commandForm select{
	font-size:10px;
	margin: 2px 0 0 0;
}

form#filterForm {
	display: inline;
	float: right;
	clear: both;
}

form#filterForm input {
	width: 40px;
	font-size:10px;
}

form#filterForm input {
	width: 70px;
	font-size:10px;
}

form#filterForm .fullDateDisplay{
	font-size:8px;
}

form#filterForm .error{
	background: #FF0000;
	color: #FFFFFF;
}

form#filterForm select#ShowActive {
	width: 180px;
}

div#tableViewSelectContainer select {
	font-size:10px;
}

#tableJobs select.assignSelect {
	width: 55px;
	font-size:10px;
}


input#BeginDate, input#EndDate, input#BeginTime, input#EndTime, input#AanmeldAbsentiesVanafDate, input#AanmeldAbsentiesTotDate {
	width: 85px;
}

input#BeginTimes, input#EndTimes {
	width: 400px;
}

input#Hours, input#WorkedHours, input#Duur {
	width: 30px;
}

/*#TitleContainer td {
	padding: 20px 0 0 10px;
}*/

span#username {
	width: 200px;
}

#filterInfo {
	font-weight: bold;
}

#pagingBottomContainer {
	text-align: center;
	font: 1.5em/2em "Trebuchet MS",Verdana,sans-serif;
}

#pagingBottomContainer p span.previousPageLink {
	float: left;
}

#pagingBottomContainer p span.nextPageLink {
	float: right;
}

tr#PreferenceScheduleIdContainer td span.postfix {
	background-color: #E6C3C2;
	color: #FF0000;
}

tr#fotoContainer td img {
	display: block;
	float: left;
	width: auto;
	margin: 0 10px 0 0;
}

tr#fotoContainer td span.field {
	line-height: 3em;
}

tr.validationRequired td.notifyColumn, tr.validationRequiredMessage span.validationRequiredIcon {
	background: url(../images/exclamation_mark14.jpg) no-repeat 0px 8px;
}
tr.validationRequiredMessage span.right {
	float: right;
	text-align: right;
	padding: 0 5px 0 5px;
}

tr.validationRequiredMessage span span.validationRequiredIcon {
	background-position: 0px 0px;
	display: inline-block;
	width: 14px;
	margin: 0 2px 0 2px;
}

/*-- ------------------- buttons ------------------------ --*/

.button1span{
	width: 150px;
}

form#filterForm .button {
	width: 30px;
}

.linkbutton{
cursor:pointer;
border:solid 0px #ccc;
xbackground:#999;
color:#666;
font-weight:bold;
width: auto;
xpadding: 1px 2px;
background:url(images/spacer.gif) repeat-x left top;
}
/*-- ------------------- colorpicker -------------------- --*/
#colorpicker table {
	width: 500px;
	padding: 0;
	font: 1em/1.2em "Trebuchet MS",Verdana,sans-serif;
	border-collapse: collapse;
}

#colorpicker td {
	background: #FFFFFF;
	border: 0px solid #000;
	width: 15px;
	padding: 4px 0 4px  0;
}

span.prefix a#BgColor {
	margin: 0 5px 0 0;
}

input#BgColorfield  {
	width: 180px;
}

span#BgColorlabel  {
	display: none;
}

/*-- ------------------- import -------------------- --*/
table#importFieldNames {
	width: 300px;
	margin: 10px;
	font: 1em/1.2em "Trebuchet MS",Verdana,sans-serif;
	border-collapse: collapse;
}

table#importFieldNames tr.thead th, table#importFieldNames tr.thead th {
	text-align: left;
}

h3#titleLocationsForJobs {
	margin-top: 20px;
}

table#tableLocationsForJobs th {
	text-align: left;
}

/*-- ------------------- aanmeldForm -------------------- --*/

#RoosterOmschrijvingenButtonContainer {
	text-indent: 10px;
}

.roosterTitel {
	text-indent: 20px;
}

.roosterOmschrijving td {
	padding-left: 40px;
}

/*-- ------------------- pages -------------------- --*/

#pageChangeLog ul li {
	list-style: none;
}

#pageChangeLog ul li span {
	margin-left: 1em;
	float: left;
	width: 200px;
}