/* ---- Container ---- */


#whats_on {
  width:210px;
	min-height:410px;
  height: auto !important;
  xborder:1px solid green;
}


/* ---- The Calendar ---- */

#whats_on table{
  width:190px;
}

#whats_on_calendar {
  	float: left;
  	width:190px;
  	padding: 0px 10px 0px 10px;
  	xborder:1px dotted #DDD;
  	margin-bottom: 0px;
	display: inline;
	overflow: hidden;
}

/* ---- Calendar AJAX Loader ---- */

#whats_on_spinner {
  position:absolute;
  width:60px;
  
}

.trans_box {
  font-family:verdana;
  font-weight:bold;
  padding:42px 70px;
  margin:0px;
  /* Mozilla ignores crazy MS image filters, so it will skip the following */
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/images/75p_white.png');
}
/* IE ignores styles with [attributes], so it will skip the following. */
.trans_box[class] {
  background-image:url(/images/75p_white.png);
}


/* ---- The Day Chooser ---- */

#whats_on_day {
  	float: left;
  	width:189px;
  	padding: 2px 0px 2px 0px;
	height: auto !important;
	min-height: 20px;
  	background-color: #BFBFBF;
  	margin-bottom: 3px;
	display: inline;
	
	border-bottom: 1px solid #FFF;
	text-transform: uppercase;
}


.left_button a {
	float: left;
  	width:17px;
	height: 21px;
  	padding: 0px;
  	background-color: #BFBFBF;
	background-image: url(../images/left_arrow.jpg);
	background-repeat:no-repeat;
  	margin-bottom: 0px;
	display: inline;
	overflow: hidden;
}

.left_button a:hover {
	background-image: url(../images/left_arrow_hov.jpg);
}

.whats_on_date_title {
	float: left;
  	width:150px;
	padding: 5px 0px 0px 0px;
	height: auto !important;
	min-height: 20px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 12px;
	color: #333;
	display: inline;
	overflow: hidden;
	text-align: center;
}

.right_button a {
	float: right;
  	width:17px;
	height: 21px;
  	padding: 0px;
  	background-color: #BFBFBF;
	background-image: url(../images/right_arrow.jpg);
	background-repeat:no-repeat;
  	margin-bottom: 0px;
	display: inline;
	overflow: hidden;
}

.right_button a:hover {
	background-image: url(../images/right_arrow_hov.jpg);
}


/* ---- The Viewings ---- */


#whats_on_viewings {
  	float: left;
  	width:190px;
  	padding: 0px 10px 0px 10px;
  	xborder:1px dotted #DDD;
  	margin-bottom: 3px;
		height: auto !important;
		min-height: 20px;
}

#whats_on_viewings_list {
  background-color: #FFF;
	height: auto !important;
	min-height: 20px;
}


/* ---- Each Individual Viewing ---- */

.whats_on_viewing {
  border-left:10px solid #852158;
  margin-bottom: 1px;
  width: 179px;
  padding: 0px;
  xborder-bottom:1px solid #FFF;
  background-color: #CCCCCC;
	height: auto !important;
	min-height: 40px;
}

.whats_on_viewing .date {
	font-weight: bold;
	padding: 5px 5px 0px 10px;
}

.whats_on_viewing .title a {
	display: block;
    text-decoration: underline;
	font-weight: normal;
	text-transform: normal;
	padding: 0px 5px 5px 10px;
	height: auto !important;
	min-height: 25px;
	width: 164px;
}

.whats_on_viewing .title a:hover {
	color: #000;
}

.whats_on_viewing .details {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	line-height: 14px;
	padding: 5px 5px 5px 10px;
}

.whats_on_viewing .details a {
	font-weight: normal;
	text-decoration: underline;
}

.whats_on_viewing .details a:hover {
	color: #000;
}

#whats_on_viewing_more {
  background-color: #CCCCCC;
}


/* ---- Earlier and Later Buttons ---- */


#whats_on_prev, #whats_on_next {
  border-bottom:1px solid #FFF;
  background-color: #606060;
  color: #CCC;
  margin:0px 0;
  padding:5px 0px 5px 20px;
  width:169px;
	height: auto !important;
	min-height: 10px;
}


#whats_on_prev a:link, #whats_on_prev a:visited {
	color:#FFF;
	text-decoration: underline;
	background: #606060 url(../images/up_arrow.jpg) no-repeat right top;
	padding:0px 15px 0px 0px;
}

#whats_on_next a:link, #whats_on_next a:visited  {
	color:#FFF;
	text-decoration: underline;
	background: #606060 url(../images/down_arrow.jpg) no-repeat right top;
	padding:0px 15px 0px 0px;
}

#whats_on_prev a:active, #whats_on_prev a:hover {
  background: #606060 url(../images/up_arrow_hov.jpg) no-repeat right top;
}

#whats_on_next a:active, #whats_on_next a:hover  {
  background: #606060 url(../images/down_arrow_hov.jpg) no-repeat right top;
}