/*****************************************************************************************************************/
/*                                                                                                               */
/* events.css                                                                                                    */
/*                                                                                                               */
/* Contains css for the events section.  Applicable only for the home page, contains the blackboard image.       */
/* Each event is contained in a list item:                                                                       */
/*                                                                                                               */
/* <ul>                                                                                                          */
/*     <li>                                                                                                      */
/*         <span class=heading>Event title</span>                                                                */
/*         <span class=detail>A paragraph of event detail.</span>                                                */
/*         ...                                                                                                   */
/*     </li>                                                                                                     */
/*     <li>                                                                                                      */
/*         <span class=heading>Event title</span>                                                                */
/*         <span class=detail>A paragraph of event detail.</span>                                                */
/*         ...                                                                                                   */
/*     </li>                                                                                                     */
/* </ul>                                                                                                         */
/*                                                                                                               */
/*****************************************************************************************************************/
#events
{
	float: right;

	background-image: url(../image/blackboard.gif);
	background-position: left top;
	background-repeat: no-repeat;
	
	margin: 2em 0 0 0;
	width: 320px;
}

#events ul
{
	margin: 20px 0 0 24px;
	padding: 0;
}

#events li
{
	list-style: none;
	width: 273px;
	height: 250px;
}

#events li .heading
{
	display: block;
		
	font: bold 13px/125% Arial, Sans-Serif;
	color: #fff;
	text-align: center;
	
	padding-bottom: 3px;
	border-bottom: solid 2px #fff;
}

#events li .detail
{
	display: block;
		
	font: bold 11px/125% Arial, Sans-Serif;
	letter-spacing: 2px;
	color: #aaa;
	
	margin-top: 5px;
	margin-bottom: 5px;
}

/*****************************************************************************************************************/
/* Hovering each event causes the detail to become white and bolded.                                             */
/*****************************************************************************************************************/
#events li:hover .detail
{
	font: bold 11px/125% Arial, Sans-Serif;
	
	color: #fff;
}

/*****************************************************************************************************************/
/* IE 6 Hacks                                                                                                    */
/*****************************************************************************************************************/
* html #events li .detail
{
	display: block;
		
	font: bold 11px/125% Arial, Sans-Serif;
	letter-spacing: 2px;
	color: #fff;
	
	margin-top: 5px;
	margin-bottom: 5px;
}