/* CSS Document */


#calendarHolder {
	width:100%; 
	margin: auto;
	text-align: center;
}

.calendarCell {
	display:inline-block;
	width:12%;
	height: 200px;
	border:1px solid #f4f4f4; 
	vertical-align: top;
}

.calendarCellHeader {
	display:inline-block;
	/*width: 150px;
	height: 150px;*/
	width:12%;
	border:1px solid #f4f4f4; font-weight: bold;
	line-height: 50px;
}

.calendarContent {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 5px;
	font-size: .8rem;
	text-align: left;
	color: #76beea;
}

.calendarContentMobile {
    display:none;
    padding_top:3px;
}

.calendarContent a {
	color: #333;
	text-decoration: none;
}

.calendarContent a:hover {
	text-decoration: underline;
	color:blue;
}

.calendarDate {
	border-right:1px solid #f4f4f4;
	border-bottom:1px solid #f4f4f4;
	border-collapse: collapse;
	color:#c0c0c0; 
	font-size:10px;
	font-weight: bold;
	height: 15px;
	width: 20px;
}

.calendarFull {
	display:inline-block;
	width:98%;
	max-width: 300px;
	height: auto;
	min-height: 500px;
	border:3px solid #f4f4f4; 
	vertical-align: top;
	margin: 3px;
	padding: 1em;
	text-align: left;
}

.calendarFullDetail {
	width:90%;
	max-width: 600px;
	margin: auto;
	text-align: left;
}

/* On screens that are 900px or less */
@media screen and (max-width: 900px) {
  .calendarCell {
        display:inline-block;
        border:1px solid #f4f4f4; 
        vertical-align: top;
        height: 70px;
    }
    
    .calendarContent {
        display: none;
    }
    
    .calendarContentMobile {
        display: block;
        font-size: 14px;
    }
    
}

@media screen and (max-width: 600px) {
    
    .calendarContent {
        display: none;
    }
    
    .calendarContentMobile {
        font-size: 10px;
    }
}