calendar.css

/*
 * Thanks to brilliant design of visual elements from Monthly 2.1.0 by Kevin Thornbloom
 * licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.
 * https://github.com/kthornbloom/Monthly
 *
 * Simplified and restructured by Cindy Le and Xueyan Xie.
 */

body{
	background-color: #fffBBf;
}

/*Calendar*/

.calendar{
	position: relative;
	width: 50%;
	margin: 0 auto;
}



/*Header*/
.header {
	position: relative;
	text-align:center;
	padding:10px;
	background: #fff;
	height: 40px;
	box-sizing: border-box;
}

.header-title {
	font-size:13px;
	text-transform: uppercase;
	display: inline-block;
	border: 1px solid #ccc;
	color: #545454;
	text-decoration: none;
	font-size: 11px;
	height: 25px;
	padding: 3px 10px 0 10px;
	box-sizing: border-box;
	transition:background .1s;
	border-top-left-radius:15px;
	border-bottom-left-radius:15px;
	border-top-right-radius:15px;
	border-bottom-right-radius:15px;
	background: #F3F3F5;
}

.header-title button:hover {
	background: #8b8b8b;
	border:1px solid #8b8b8b;
	color:#fff;
}

.header-title button:active {
	background: #222;
	border:1px solid #222;
	transition:none;
}

.header-title-date{
	font-size: 15px;
}

/*Buttons*/

.prev {
	position: absolute;
	top:0;
	left:0;
	width:50px;
	height:100%;
	opacity: .5;
}
.prev:hover {
	opacity: 1;
}

.prev:after{
	content:'';
	position: absolute;
	top:50%;
	left:50%;
	border-left:2px solid #222;
	border-bottom:2px solid #222;
	width:5px;
	height:5px;
	margin:-3px 0 0 -5px;
	-webkit-transform:rotate(45deg) ;
		-ms-transform:rotate(45deg) ;
	        transform:rotate(45deg) ;
}

.next {
	position: absolute;
	top:0;
	right:0;
	width:50px;
	height:100%;
	opacity: .5;
}

.next:hover {
	opacity: 1;
}

.next:after{
	content:'';
	position: absolute;
	top:50%;
	left:50%;
	border-right:2px solid #222;
	border-top:2px solid #222;
	width:5px;
	height:5px;
	margin:-3px 0 0 -5px;
	-webkit-transform:rotate(45deg) ;
		-ms-transform:rotate(45deg) ;
	        transform:rotate(45deg) ;
}

.prev{
	border: hidden;
	background: none;
}

.next{
	border: hidden;
	background: none;
}

/*Day titles*/

.day-title-wrap {
	display:table;
	table-layout:fixed;
	width:100%;
	background: #fff;
	color: #545454;
	border-bottom: 1px solid #EBEBEB;
}

.day-title-wrap div {
	width: 14.28%!important;
	display:table-cell;
	box-sizing:border-box;
	position: relative;
	font-weight: bold;
	text-align:center;
	text-transform: uppercase;
	font-size:14px;
}

/*Day blocks*/

.day-wrap {
	display:table;
	table-layout:fixed;
	width:100%;
	overflow: hidden;
}
.week {
	display:table-row;
	width:100%;
}

.day, .day-blank {
	width: 14.28%!important;
	display:table-cell;
	vertical-align: top;
	box-sizing:border-box;
	position: relative;
	font-weight: bold;
	color:inherit;
	background: #fff;
	box-shadow: 0 0 0 1px #EBEBEB;
	-webkit-transition: .25s;
	transition:.25s;
	padding:0;
	text-decoration: none;
}

.day:before {
	content: "";
	display: block;
	padding-top: 100%;
	float: left;
}

.day-blank {
	background:#F3F3F5;
}

.day-number {
	color: #585858;
	position: relative;
	line-height: 20px;
	margin: 3px;
	font-size:11px;
}

/*Today*/

.today .day-number {
	color: #FFF;
	background: #EA6565;
	border-radius: 21px;
	width: 20px;
	height: 20px;
}

/*Day numbers*/

@media (min-width: 400px) {
	.day-number {
		top: 5px;
		left: 5px;
		font-size: 18px;
	
}

/*Events*/

@media (max-width: 600px) {
	.indicator-wrap{
		display: none;
	}

}

@media (min-width: 600px) {
	.indicator-wrap{
		display: block;
		border: none;
		padding: 2px;
		position: relative;
		text-align: center;
		line-height: normal;
		margin:0 auto;
		top: 2px;
		bottom: 2px;
		font-size: 14px;
		border-radius:0;
		overflow: hidden;
		text-overflow: ellipsis;
		color:#ffffff;
		text-shadow:0 0 2px rgba(0,0,0,.2);
		text-decoration: none;
		white-space: nowrap;
		box-sizing: border-box;
		width: 100%;
		height:20px;
	}
	.indicator-wrap:before {
		padding-top: 77%;
	}
	
}

.AddEvent{
	position: absolute;
	top:260px;
	right:16px;
	margin: auto;
}

.AfterLogIn{
	position: absolute;
	top:2px;
	right:16px;
	margin: auto;
}

.Login{
	position: absolute;
	top:2px;
	right:16px;
	margin: auto;
}

.Category{
	position: absolute;
	top:100px;
	right:16px;
	margin: auto;
}

@media (max-width: 1000px) {
	.AddEvent{
		position: relative;
		width: 50%;
		margin: 0 auto;
	}
	
	.AfterLogIn{
		position: relative;
		width: 50%;
		margin: 0 auto;
	}
	
	.Login{
		position: relative;
		width: 50%;
		margin: 0 auto;
	}
	
	.Category{
		position: relative;
		width: 50%;
		margin: 0 auto;
	}
}