/* Style sheet for the silver calendar (default) */

form {margin: 10px;}
/*body {font-family: Arial, Helvetica, sans-serif; color: #222;}*/
table {
font-family: Arial, Helvetica, sans-serif; /*color: #222;*/
}

td {
	font-family: Arial, Helvetica, sans-serif; 
	color: #fff; 
}

.monthtitle {
    font-size: 200%;
    letter-spacing: 8px;
    text-indent: 26px;
    padding: 12px;
    color: #222;
    background: rgb(96,113,139); /* IE6/7/8 */
    filter: alpha(opacity=70);   /* IE6/7/8 */
    background: rgba(96,113,139,0.7); /* Modern Browsers */
    position: relative; /* was absolute; avoid clipping in iframe */
    left: 0;
    margin-top: 0;      /* was -50px; ensure visible */
    width: 100%;        /* full width header */
    text-align: left;   /* was right */
    box-sizing: border-box;
}

/* Background images for tables */
.tbll	{background: url(images/shadow_l.gif) no-repeat; width:8px}
.tblbot	{background: url(images/shadow_m.gif) repeat-x; width:100%}
.tblr	{background: url(images/shadow_r.gif) no-repeat; width:8px}

.alldaybg_1 {background: #50739B url(images/allday_1.gif) repeat-x; border-bottom: 1px solid #3C6080; min-height: 18px; padding-top: 5px; text-align: center;}
.alldaybg_2 {background: #53AB63 url(images/allday_2.gif) repeat-x; border-bottom: 1px solid #409050; min-height: 18px; padding-top: 5px; text-align: center;}
.alldaybg_3 {background: #FF592A url(images/allday_3.gif) repeat-x; border-bottom: 1px solid #E0401C; min-height: 18px; padding-top: 5px; text-align: center;}
.alldaybg_4 {background: #BE55AD url(images/allday_4.gif) repeat-x; border-bottom: 1px solid #984080; min-height: 18px; padding-top: 5px; text-align: center;}
.alldaybg_5 {background: #FF2B2A url(images/allday_5.gif) repeat-x; border-bottom: 1px solid #D01C18; min-height: 18px; padding-top: 5px; text-align: center;}
.alldaybg_6 {background: #BA900C url(images/allday_6.gif) repeat-x; border-bottom: 1px solid #A07400; min-height: 18px; padding-top: 5px; text-align: center;}
.alldaybg_7 {background: #959595 url(images/allday_7.gif) repeat-x; border-bottom: 1px solid #888888; min-height: 18px; padding-top: 5px; text-align: center;}

.rowOn			{ background-color: #B0E8B0; border-top: 1px solid #fff; border-left: 1px solid #fff; }
.rowOn2			{ background-color: #B0E8B0; border-top: 1px solid #fff; }
.rowOff			{ background-color: #E1E8F1; border-top: 1px solid #fff; border-left: 1px solid #fff; }
.rowOff2		{ background-color: #E1E8F1; border-top: 1px solid #fff; }
.rowToday		{ background-color: #B0E8E8; border-top: 1px solid #fff; border-left: 1px solid #fff; }

.padd			{ padding: 2px; }

/* Styles for day and week events */
.eventbg_1	 	{ background-color: #557CA3; padding: 2px;}
.eventbg_2	 	{ background-color: #53A062; padding: 2px;}
.eventbg_3	 	{ background-color: #E84F25; padding: 2px;}
.eventbg_4	 	{ background-color: #B257A2; padding: 2px;}
.eventbg_5	 	{ background-color: #D42020; padding: 2px;}
.eventbg_6	 	{ background-color: #B88F0B; padding: 2px;}
.eventbg_7	 	{ background-color: #73738C; padding: 2px;}

.allday a		{ font-size: 9px; color: #fff !important; font-weight: 900; text-decoration:none;}
.allday a:hover	{ text-decoration:underline;}

.eventbg2_1	 		{ background-color: #6699CC; border: 1px solid #557CA3; }
.eventbg2_2	 		{ background-color: #4FC464; border: 1px solid #53A062; }
.eventbg2_3	 		{ background-color: #FF6D3B; border: 1px solid #E84F25; }
.eventbg2_4	 		{ background-color: #EA62D4; border: 1px solid #B257A2; }
.eventbg2_5	 		{ background-color: #FF5E56; border: 1px solid #D42020; }
.eventbg2_6	 		{ background-color: #CCB21F; border: 1px solid #B88F0B; }
.eventbg2_7	 		{ background-color: #9292A1; border: 1px solid #73738C; }

.dayborder 		{ background-color: #fff; border-top: 1px solid #A1A5A9; }
.dayborder2 	{ background-color: #fff; border-top: 1px dashed #ccc; }
.dayborder3 	{ background-color: #fff; border-top: 1px dotted #888; }

.title  		{ background-image: url(images/time_bg.gif); padding: 5px; }
.title h1 		{ font-family: Helvetica, sans-serif; font-size: 18px; color: #000; margin: 0px;}

/* Main class used for all page wrapper tables */
.maintable		{ /*width: 780px;*/ width: 100% }

/* Week view */
.weektoday		{ background-color: #dff; }

/* Month View */

.monthback		{ 
	/*background-color: #A1A5A9; */
	padding-top: 0px; 
	margin-bottom: 0px;
	}
	
.monthreg		{ background-color: #fff; width: 90px; height: 90px; vertical-align: top; }
.monthoff		{ background-color: #F2F2F2; width: 90px; height: 90px; vertical-align: top; }
.monthon		{ background-color: #F2F9FF; width: 90px; height: 90px; vertical-align: top;  }
.montheventtop	{ background-image: url(images/side_bg.gif); border-top: 1px solid #A1A5A9; }
.montheventline	{ border-right: 1px dotted #A1A5A9; }
.monthon .daynumber { color: #FF9833; }

/* Year View */

.medtitle		{ background-image: url(images/side_bg.gif); height: 20px; margin-top: 3px; font-weight: 900; }
.yearreg		{ background-color: #fff; height: 30px; width: 30px; text-align: right; vertical-align: top; font-size: 9px; }
.yearoff		{ background-color: #F2F2F2; height: 30px; width: 30px; text-align: right;  vertical-align: top; font-size: 9px; }
.yearon			{ background-color: #F2F9FF; height: 30px; width: 30px; text-align: right;  vertical-align: top; font-size: 9px; }
.yearmonth		{ background-color: #ccc; }
.yearweek		{ background-color: #eee; width: 30px; font-size: 9px; font-weight: 900; text-align: center; height: 15px; }
.yearleft		{ padding-right: 5px; padding-top: 5px; padding-bottom: 5px; }
.yearmiddle		{ padding: 5px; }
.yearright		{ padding-left: 5px; padding-top: 5px; padding-bottom: 5px; }

/* older styles */

.eventborder	{ background-image: url(images/day_title.gif); border: 1px #006699 solid; }
.eventbg	 	{ background-color: #6699CC; }

.tfixed			{ table-layout: fixed; word-wrap: break-word; }
.calborder 		{ /*background-color: transparent;*/ border: 0px #A1A5A9 solid; }
.dateback		{ 
	/*background-color: #6C6D6F; */
	color: #ffffff;
/*	border-bottom: 1px solid #000000;*/
	text-indent: 5px;
		}
.weekborder 	{ border-left: 1px solid #A1A5A9; border-top: 1px dashed #ccc; }
.weekborder2 	{ border-left: 1px solid #A1A5A9; border-top: 1px solid #A1A5A9; }
.weekborder3 	{ border-left: 1px solid #A1A5A9; border-top: 1px dotted #888; }
.timeborder 	{ border-right: 1px solid #A1A5A9; border-top: 1px solid #A1A5A9; background-image: url(images/time_bg.gif); }
.timeborder2 	{ border-top: 1px solid #A1A5A9; background-image: url(images/time_bg.gif); }
.navback 		{ background-image: url(images/time_bg.gif); }
.sideback 		{ background-image: url(images/side_bg.gif); }


/* Link colors and attributes */
/* This is the main link style */
a.psf			{ text-decoration:	none; }
a.psf:link		{ color: #00A7F3; }
a.psf:visited	{ color: #00A7F3; }
a.psf:active	{ color: #00A7F3; }
a.psf:hover		{ color: #00A7F3; text-decoration: underline; }

/* This is the link style for the mini-cals */
a.ps2			{ text-decoration:	underline; }
a.ps2:link		{ color: #0066FF; }
a.ps2:visited	{ color: #0066FF; }
a.ps2:active	{ color: #3366CC; }
a.ps2:hover		{ color: #000099; }

/* This is the link style for year months */
a.ps3			{ text-decoration:	none; }
a.ps3:link		{ color: #000; }
a.ps3:visited	{ color: #000; }
a.ps3:active	{ color: #000; }
a.ps3:hover		{ color: #000; text-decoration: underline; }

/* This is the link style for events */
a.ps			{ text-decoration:	none; }
a.ps:link		{ color: #fff; }
a.ps:visited	{ color: #fff; }
a.ps:active		{ color: #fff; }
a.ps:hover		{ color: #fff; text-decoration: underline; }

/* CSS definitions for fonts */

.V9 			{ font-size: 9px; color: #000000; }
.V10W 			{ font-size: 10px; color: #FFFFFF; text-decoration:	none;}
.V9W 			{ font-size: 9px; color: #FFFFFF; text-decoration:	none;}
.V10WB 			{ font-size: 10px; color: #FFFFFF; font-weight: 900; }
.V9G 			{ font-size: 9px; color: #666666; }
.V10 			{ font-size: 10px; color: #000000; }
.V9BOLD 		{ font-size: 11px; /*font-weight: 900;*/ text-align: left;}
.G10 			{ font-size: 11px; color: #0066FF; }
.G10B 			{ font-size: 11px; color: #000000; }
.G10BOLD 		{ font-size: 11px; font-weight: 900; }
.G10G 			{ font-size: 11px; color: #A1A5A9; }
.V12 			{ font-size: 12px;  color: #000000; }
/*h1 				{ font-family: Helvetica, sans-serif; font-size: 18px; color: #000000; }*/
.eventfont 		{ font-size: 11px; color: #FFFFFF; }


/* Length of the form drop downs */

.query_style 	{ font-size: 11px;  width: 156px; margin-bottom: 0; }
.search_style 	{ font-size: 12px;  width: 134px; margin-bottom: 0; }
.login_style	{ font-size: 11px;  width: 80px; margin-bottom: 0; }


/* Make printed pages look nice */
@media print {
	.sidebar		{ width: 0px; display: none; }
	.footer			{ display: none; }
	.monthback		{ border-spacing: 0; }
	.monthback td	{ border: 1px solid #606060; }
	.calborder		{ border: 1px solid #606060; }
}

.daynumber {
	font-weight: bold;
	font-size: 42px; /* 45 */
	vertical-align: baseline;
	text-indent: 18px; /* 5 */
	margin-top: 24px; /* 15 */
}
.daystatus {
	font-size: 0.8em;
	text-indent: 18px;
	margin-top: 8px;
	text-transform: lowercase;
}

.monthlist {
	/*background-color: #FFF;*/
	margin-bottom: 20px;
/*	background-color: #FFCC88;*/

}

.BESCHIKBAAR {
	background-color: #60718B;
	color: #fff;
	border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.Sun, .Sat {
	background-color: #1D2E48;
	border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.GEBOEKT {
	background-color: #6c0603;
	color: #FFFFFF;
	border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.OPTIE {
    background-color: #00A7F3;
    color: #FFFFFF;
    border-right: 1px solid rgba(0, 0, 0, 0.3);
}

.month {
	border-bottom: 1px solid transparent;
}

.trweek .OPTIE, .trweek .BESCHIKBAAR, .trweek .GEBOEKT, .trweek .BESCHIKBAAR {
	border-bottom: 1px solid rgba(0, 0, 0, 0.3);
}

.trweek td.weeknumber {
/*	border-right: 0px solid #000000;*/
	/*background:transparent url(images/tabel_bg.png) repeat top left;*/
}


.weeknumber {	
	width: 24px;


	padding-left: 5px;
}

tr, td {
/*	margin: 3px 12px 3px 12px;*/
/*	padding: 3px 10px 3px 10px;*/
/*	margin: 4px 0px 4px 0px;*/
/*	padding: 4px 0px 4px 0px;*/
	}
	
#onderkant {
	/*height: 40px;*/
	/*background: #FFCC99;*/

}

.nextyear {
	color: #ffffff;
	font-weight: bold;
}
.callborder { width: 100%;  }
.thismonth, .nextyear, .month { 
	font-size: 10px;
	text-align: left;
/*	width: 50px;*/
/*	background: #FFCC99;*/
	padding: 4px;
/*	margin: 4px;*/
	}
.thismonth {
    color: #FF9833;
    font-size: 20px;.
}

/*
  Mobile tweaks: make the calendar fit small screens
  These rules only affect narrow viewports (phones), leaving desktop unchanged.
*/
@media (max-width: 600px) {
    /* Shrink day cells so 7 columns + weeknumber fit without horizontal scroll */
    .monthreg,
    .monthoff,
    .monthon { width: auto !important; height: 44px; }

    /* Narrow week number column */
    .weeknumber { width: 16px !important; }

    /* Smaller weekday header */
    .dateback { font-size: 9px; text-align: center; }

    /* Reduce big numbers inside the cells */
    .daynumber { font-size: 16px; text-indent: 4px; margin-top: 4px; }
    .daystatus { font-size: 9px; text-indent: 4px; margin-top: 1px; }

    /* Keep table constrained and avoid unexpected growth */
    .tfixed { table-layout: fixed !important; }
    .monthback { width: 100% !important; border-collapse: collapse !important; border-spacing: 0 !important; }
    .monthback td { overflow: hidden; padding: 1px !important; }
    .maintable { width: 100% !important; }

    /* Slightly smaller generic bold label used in headers */
    .V9BOLD { font-size: 9px; }

    /* Prevent auto text zooming on iOS that can break layout */
    body { -webkit-text-size-adjust: 100%; }
}

/* Even tighter on very small devices */
@media (max-width: 400px) {
    .monthreg,
    .monthoff,
    .monthon { height: 40px; }
    .weeknumber { width: 14px !important; }
    .daynumber { font-size: 14px; }
    .dateback { font-size: 8px; }
}