.calendar_box   {               width: 100%;
                                margin: auto auto;
                                text-align: center;
                                }

.calendar_third			{		width: 30%;
								float: left;
								margin-right: 3%;}

.quarter			{			width: 23%;
								float: left;
								margin: 1%;
								}

.s-half, .l-half{				width: 45%;
								float: left;
								margin: 1%;}

.l-full{						width: 98%;
								margin: 1%;}

.findBox select {				width: 100%; display: block;}


.right {						text-align: right; }


.month { 						text-align: center;
								font-size: 12px;
                                height: 280px;
								}
.month h4 {						width: 100%;
								color: White;
								font-weight: bold;
								background-color: #3366CC;
								margin:0;
								font-size: 1.4em;
								}
.month table {					width: 100%;
								}
.month table tr { background-color: #CCCCCC; }
.month table tr td {			text-align: center;
								border: 1px solid white;
								height: 34px;
								font-weight: bold;
								font-size: 1.2em;
								width: 6%;
								margin: 0;
								padding: 0;
								border-right: none;
								color: white;
								
								}
.month table tr th {			width: 7%;
								border-left: none;
								}
.month table tr.days a    {     display: block;
                                height: 16px;
								text-align: center;
								text-decoration: none;
								color: white;
                                }
.month .days th{			    background-color: #000000;
								color: white;
								border: 1px solid white;
								text-align: center;
								}



.key {							margin-bottom: 10px;
								width: 100%;
								color: white;
								}								
.key div {						padding: 10px 1px 10px 1px;
								text-align: center;
								font-weight:bold;
								width: 20%;
								float:left;
								}
.ktitle {						color: white; background-color: black; with: 100%; text-align: center; padding: 10px; margin: 20px 0 0 0; font-weight: bold;}


#calendar_form {				background-color: #FFFFCC;
								width: 100%;
								margin-bottom: 8px;
								padding: 10px;
								}
#calendar_form .head {			text-align: center;
								color: White;
								font-size: 160%;
								font-weight: bold;
								background-color: #3366CC;
								margin-bottom: 8px;
								padding: 4px;
								}
.warning	{					color: white;
								background-color: red;
								padding: 6px;
								font-weight: bold;
								}

#calendar_form input + input[type="submit"],
#calendar_form input[type="submit"] {
								padding: 14px 28px;
								border-radius: 25px;
								margin: 50px 10px 0 0;
								color: white;
								}

#calendar_form .ccol {			width:25%;padding:0 10px 0 0;float:left; }
#calendar_form .description {	width:100%; }

.apartment_enquiry_form {		position: fixed;
								top: 0;
								left: 0;
								width: 90%;
								margin: 5%;
								z-index: 10;
								background-color: #DEDEFF;
								box-shadow: 0 0 10px #000;
								padding: 10px;
								border: 1px solid #999;
								overflow: auto;
								}
.apartment_enquiry_form.closed{ display: none; }

#apartment_enquire_button {		cursor: pointer; }


@media only screen and (max-width: 800px) {
	.calendar_third {			width: 100%;}
	.quarter {					width: 100%;}
	.l-half {					width: 100%;}
	.key div {					width: 50%;}
}





/* ---------------- day backgrounds ----------------
0 : available - #006600
1 : reserved - orange
2 : booked - red
3 : unavailable - #333333 (dark grey)
4 : unbookable - #000099 (blue)
--------------------------------------------------- */

.d00 { background-color: #006600; }
.d00s { background: linear-gradient(-45deg, #006600 45%, white 50%, #006600 55%); }
.d01 { background: linear-gradient(-45deg, orange 45%, white 50%, #006600 55%); }
.d02 { background: linear-gradient(-45deg, red 45%, white 50%, #006600 55%); }
.d03 { background: linear-gradient(-45deg, #333333 45%, white 50%, #006600 55%); }
.d04 { background: linear-gradient(-45deg, #000099 45%, white 50%, #006600 55%); }

.d10 { background: linear-gradient(-45deg, #006600 45%, white 50%, orange 55%) }
.d11 { background-color: orange; }
.d11s { background: linear-gradient(-45deg, orange 45%, white 50%, orange 55%) }
.d12 { background: linear-gradient(-45deg, red 45%, white 50%, orange 55%) }
.d13 { background: linear-gradient(-45deg, #333333 45%, white 50%, orange 55%) }
.d14 { background: linear-gradient(-45deg, #000099 45%, white 50%, orange 55%) }

.d20 { background: linear-gradient(-45deg, #006600 45%, white 50%, red 55%) }
.d21 { background: linear-gradient(-45deg, orange 45%, white 50%, red 55%) }
.d22 { background-color: red; }
.d22s { background: linear-gradient(-45deg, red 45%, white 50%, red 55%) }
.d23 { background: linear-gradient(-45deg, #333333 45%, white 50%, red 55%) }
.d24 { background: linear-gradient(-45deg, #000099 45%, white 50%, red 55%) }

.d30 { background: linear-gradient(-45deg, #006600 45%, white 50%, #333333 55%) }
.d31 { background: linear-gradient(-45deg, orange 45%, white 50%, #333333 55%) }
.d32 { background: linear-gradient(-45deg, red 45%, white 50%, #333333 55%) }
.d33 { background-color: #333333; }
.d33s { background: linear-gradient(-45deg, #333333 45%, white 50%, #333333 55%) }
.d34 { background: linear-gradient(-45deg, #000099 45%, white 50%, #333333 55%) }

.d40 { background: linear-gradient(-45deg, #006600 45%, white 50%, #000099 55%) }
.d41 { background: linear-gradient(-45deg, orange 45%, white 50%, #000099 55%) }
.d42 { background: linear-gradient(-45deg, red 45%, white 50%, #000099 55%) }
.d43 { background: linear-gradient(-45deg, #333333 45%, white 50%, #000099 55%) }
.d44 { background-color: #000099; }
.d44s { background: linear-gradient(-45deg, #000099 45%, white 50%, #000099 55%) }

/* ---------------- day backgrounds ------------------------ */

.month td {color: white; font-weight: bold; font-size: 1.2em;}
.month td a {width: 50%; height: 100%; float:left; display: block; z-index: 10; position: absolute; left: 0; top: 0;}