/* Graphite */
.graphite
{
	background: linear-gradient(#EEEEEE, rgba(255, 255, 255, 0) 100px);
	box-shadow: 0px 1px 3px #DDDDDD;
	border-top: 1px solid #DDDDDD;
	border-right: 1px solid #B0B0B0;
	border-bottom: 1px solid #A0A0A0;
	border-left: 1px solid #DDDDDD;
	border-radius: 20px 20px 2px 2px;
	padding: 5px;
}

.graphite .calendar table
{
	border-radius: 7px;
	table-layout: fixed;
	width: 100%;
}

/* div for month name */
.graphite .header
{
	font-family: Exo;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	padding: 0px;
}
.graphite .header .title
{
	font-size: 26px;
}

/* Navigation */
.graphite .navigation
{
	border: 1px solid #75B6EF;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	background: #DEE8F1 linear-gradient(#FFFFFF, #DEE8F1 30px);
	box-shadow: 0px 1px 3px #BBBBBB;
	text-align: center;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	margin: -6px -8px 0px;
	padding: 3px 0px;
}
.graphite .navigation .controls
{
	font-family: Exo;
	vertical-align: top;
	display: inline-block;
	margin-top: 2px;
	padding: 0px 10px;
}
.graphite .navigation .controls .previous
{
	display: inline-block;
	margin: 1px 50px 1px 0px;
}
.graphite .navigation .controls .previous input
{
	margin-right: 5px;
}
.graphite .navigation .controls .next
{
	display: inline-block;
	margin: 1px 0px 1px 50px;
}
.graphite .navigation .controls .next input
{
	margin-left: 5px;
}
.graphite .navigation .date
{
	vertical-align: top;
	display: inline-block;
	width: 190px;
}
.graphite .navigation .date .month
{
	line-height: 24px;
	font-size: 26px;
}
.graphite .navigation .date .year
{
	line-height: 24px;
	font-size: 12px;
	margin-left: 8px;
}
.graphite .navigation .right
{
	float: right;
	margin: 7px 10px 7px 0px;
}
.graphite .navigation .right *
{
	margin-left: 5px;
}

/* td */
.graphite .calendar .day
{
	vertical-align: top;
	width: 14.2857%;
	height: 110px;
	background: rgba(255, 255, 255, 0.6);
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #C4C4C4;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #A4A4A4;
}
.graphite .calendar .day.sunday,
.graphite .calendar .day.saturday
{
	background: linear-gradient(rgba(204, 204, 204, 0.2) 10px) repeat;
	border-left: 1px solid #FFFFFF;
	border-right: 1px solid #CCCCCC;
	border-top: 1px solid #FFFFFF;
	border-bottom: 1px solid #BBBBBB;
}
.graphite .calendar .day.target
{
	background: #F6F6F6 linear-gradient(#FFEEBB, #F6F6F6 70px) repeat-x;
	border-right: 1px solid #EECCAA;
	border-bottom: 1px solid #DDAA66;
}
.graphite .calendar .day.today
{
	background: #FFF0E8 linear-gradient(#FFFFFF, #FFF0E8 70px) repeat-x;
	border-right: 1px solid #C4B4AA;
	border-bottom: 1px solid #A4948A;
}
.graphite .calendar .day.empty
{
	background: rgba(192, 192, 192, 0.6);
	border-right: 1px solid #E2E2E2;
	border-bottom: 1px solid #929292;
}
.graphite .calendar .day .controls
{
	float: right;
}
.graphite .calendar .day .controls *
{
	margin-left: 5px;
}
.graphite .calendar .day .controls *:first-child
{
	margin-left: 0px;
}

/* div at top */
.graphite .calendar .header-row .weekday
{
	text-align: center;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	border-bottom: 1px solid #DDDDDD;
	
	padding: 3px;
}
.graphite .calendar .day
{
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	background: linear-gradient(#FFFFFF, #B3D3EF) no-repeat;
	background-size: 100% 20px;
	font-size: 10px;
	font-weight: bold;
	color: #666;
	line-height: 16px;
	border-bottom: 1px solid #9AC6ED;
	padding: 2px 2px 0px 2px;
}
.graphite .calendar .day .day-content
{
	padding-top: 2px;
}
.graphite .calendar .day .controls
{
	float: right;
}
.graphite .calendar .day .controls *
{
	margin-left: 5px;
}
.graphite .calendar .day .controls *:first-child
{
	margin-left: 0px;
}
.graphite .calendar .day.sunday,
.graphite .calendar .day.saturday
{
	text-shadow: none;
	background: linear-gradient(#FFFFFF, #CCCCCC) no-repeat;
	background-size: 100% 20px;
	color: #999999;
	border-bottom: 1px solid #AAAAAA;
}
.graphite .calendar .day.empty
{
	text-shadow: none;
	background: linear-gradient(#FFFFFF, #EEEEEE) no-repeat;
	background-size: 100% 20px;
	color: #CCCCCC;
	border-bottom: 1px solid #DDDDDD;
}
.graphite .calendar .day.target
{
	background: linear-gradient(#FFFFFF, #B3D3EF) no-repeat;
	color: #EB8F00;
	border-bottom: 1px solid #AAAAAA;
}
.graphite .calendar .day.today
{
	background: linear-gradient(#FFFFFF, #FFCC33) no-repeat;
	color: #333333;
	border-bottom: 1px solid #AAAAAA;
}
.graphite .calendar .day:first-child
{
	border-left: 1px solid #DDDDDD;
}
.graphite .calendar .day a.anchor
{
	position: absolute;
	margin-top: -150px;
}

/* div inside td */
.graphite .calendar .day .event
{
	position: relative;
	color: #333;
	font-size: 11px;
	text-shadow: none;
	background: #EEEEEE linear-gradient(#AAAAAA, #EEEEEE 20px) repeat-x;
	border: 1px solid #666;
	border-radius: 5px;
	box-shadow: 0px 0px 3px 1px #FFF inset;
	display: block;
	margin: 4px 2px;
	padding: 2px 4px;

	behavior: url(PIE.htc);
}
.graphite .calendar .day .event.reply
{
	color: #363;
	background: #EEEEEE linear-gradient(#ACDDAA, #EEEEEE 20px) repeat-x;
	border: 1px solid #696;
	border-radius: 5px;
	box-shadow: 0px 0px 3px 1px #FFF inset;
	margin: 4px;
	padding: 2px 4px;

	behavior: url(PIE.htc);
}
.graphite .calendar .day .event.red
{
	background: #EEEEEE linear-gradient(#CC6666, #EEEEEE 20px) repeat-x;
	border-color: #993333;
	color: #661111;
}
.graphite .calendar .day .event.green
{
	background: #EEEEEE linear-gradient(#66CC66, #EEEEEE 20px) repeat-x;
	border-color: #339933;
	color: #116611;
}
.graphite .calendar .day .event.blue
{
	background: #EEEEEE linear-gradient(#7799DD, #EEEEEE 20px) repeat-x;
	border-color: #114499;
	color: #114488;
}

.graphite .calendar .day .event img
{
	vertical-align: top;
	margin-right: 3px;
}

.graphite .calendar .day .item
{
	display: block;
	overflow: hidden;
	white-space: nowrap;
	max-width: 100%;
}