/* CSS */
#controls {
	position:absolute;
	top:0;
	left:0;
	right:0;
	height:10%;
	z-index: 1;
	
	background-color:#fff;
}
	#controls h1{
		position:absolute;
		bottom:0;
		right:1.28%;
		font-size:6vh;
		margin-bottom: 0;
	}
#weekend-left {
	z-index: -1;
	position:absolute;
	top:0;
	bottom:0;
	width:14.28%;
	left:0;
	
	background:#F8F8F8;
}
#weekend-right {
	z-index: -1;
	position:absolute;
	top:0;
	bottom:0;
	width:14.28%;
	right:0;
	
	background:#F8F8F8;
}

#calendar {
	position:absolute;
	top:0;
	right:0;
	bottom:0;
	left:0;
	padding:0.64% 0;
	z-index: 0;
}
#calendar .flex-container {
	padding: 0;
	margin: 0;
	list-style: none;
	height:14.28%;
	
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-flex-flow: row wrap;
	justify-content: flex-start;
  
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
}
#calendar .flex-item {
	color: black;
	font-weight: bold;  
	font-size:1em;
  
	padding:0.64%;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box;    
	box-sizing: border-box;        
  
	width: 13%;
	margin: 0.64%;
/*  width: 14.28%;
  margin: 0%;*/
  	
	text-align: left;
	overflow:hidden;
	-webkit-box-shadow: inset 0px 3px 0px 0px #eee;
	-moz-box-shadow: inset 0px 3px 0px 0px #eee;
	box-shadow: inset 0px 3px 0px 0px #eee;
}
	#calendar .flex-item:hover {
		cursor:pointer;
		
	-webkit-box-shadow: inset 0px 3px 0px 0px #666;
	-moz-box-shadow: inset 0px 3px 0px 0px #666;
	box-shadow: inset 0px 3px 0px 0px #666;
	
background: -moz-linear-gradient(top,  rgba(209,209,209,0.34) 0%, rgba(244,244,244,0) 67%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(209,209,209,0.34)), color-stop(67%,rgba(244,244,244,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(209,209,209,0.34) 0%,rgba(244,244,244,0) 67%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(209,209,209,0.34) 0%,rgba(244,244,244,0) 67%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(209,209,209,0.34) 0%,rgba(244,244,244,0) 67%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(209,209,209,0.34) 0%,rgba(244,244,244,0) 67%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#57d1d1d1', endColorstr='#00f4f4f4',GradientType=0 ); /* IE6-9 */

		
	}
	
	/* First row (day of week) cells */	
	#calendar .flex-container:first-of-type{
	    -webkit-align-content: flex-end;
		-ms-flex-line-pack: flex-end;
		align-content: flex-end;
	}
	#calendar .flex-container:first-of-type .flex-item{
		font-size:2em;
		padding:0 0.64%;
		position:relative;
		
		-webkit-box-shadow: inset 0px 0px 0px 0px #eee;
		-moz-box-shadow: inset 0px 0px 0px 0px #eee;
		box-shadow: inset 0px 0px 0px 0px #eee;
	
		margin-bottom: 0;
		
		overflow: visible;
	}
	#calendar .flex-container:first-of-type .flex-item p{
		margin-bottom:0;
		font-size:3.5vh;
		
		position: absolute;
		bottom: 0;
	}

#calendar .flex-item.empty, #calendar .flex-item.empty:hover{
	background:none;
		-webkit-box-shadow: none;
		-moz-box-shadow: 	none;
		box-shadow: 		none;
}
#calendar .selected {
/*	background:#F90000;
	color:white;*/
		-webkit-box-shadow: inset 0px 3px 0px 0px #f90000;
		-moz-box-shadow: 	inset 0px 3px 0px 0px #f90000;
		box-shadow: 		inset 0px 3px 0px 0px #f90000;
		
		background: #f4d9d9; /* Old browsers */
background: -moz-linear-gradient(top, #f4d9d9 0%, #ffffff 67%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f4d9d9), color-stop(67%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f4d9d9 0%,#ffffff 67%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f4d9d9 0%,#ffffff 67%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f4d9d9 0%,#ffffff 67%); /* IE10+ */
background: linear-gradient(to bottom, #f4d9d9 0%,#ffffff 67%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f4d9d9', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
}