/* root element for scrollable */
#calendar .vertical {
	/* required settings */
	position:relative;
	overflow:hidden;
	/* vertical scrollers have typically larger height than width */	
	height: 180px;
	width: 276px;
	
	/* sets the background image and border */
	background: url(../images/calendar-bg.png) no-repeat 0px 0px;
	border-right: 1px solid #C8D6DD;
	padding: 0px 0 0 20px;
}

/* root element for scrollable items */
#calendar .items {	
	position:absolute;
	
	/* this time we have very large space for height */	
	height:20000em;	
	margin: 0px;
}

/* single scrollable item */
#calendar .items div {
	margin: 0px 15px 0px;
	padding: 10px 0px 5px;
	font-size:12px;
	border-bottom: 1px dotted #C8D6DD;
	width: 246px;
	/*height:180px;*/
}

/* elements inside single item */
#calendar .items h2 {
	margin:0 0 5px 0;
	font-size:12px;
	color: #ee3124;
	font-weight:normal;
}
#calendar .items p {
	font-size: 10px;
	color: #666;
	margin: 0px;
}

/* the action buttons above the scrollable */
#calendar #more-events {
	text-align: right; 
	font-size: 10px;
	line-height: 14px;
	width:276px;
	margin: 0px 0 10px 20px;
	padding: 10px 0px 0px;
	border-bottom: 1px solid #C8D6DD; 
	border-right:1px solid #C8D6DD;
}
#calendar #more-events a.button {
	background-color: #E11E24;
	color: #FFF;
	display:block;
	float:right;
	margin-right:20px;
	padding:3px 10px;
	width:104px;
}
#calendar #more-events a.button:hover {background-color: #302D26;}
#calendar #actions {float: left; margin-left: 15px;}
#calendar #actions a {
	height: 14px;	
	cursor:pointer;
	display: block;
	background-color: #C1C1C1;
	float: left;
	padding: 3px 4px;
	margin-right: 3px;
}
#calendar #actions a:hover {background-color: #E11E24;}

#calendar .disabled {
	visibility:hidden;		
}

#calendar .nextPage {
	float:right;
}