/*************************************************


    Richmond Ozone
	http://www.richmondozone.com
    
	Design and Code : Switch Interactive
	Author Homepage : http://www.switchinteractive.com	
	Created : October 1st 2009
	Last Updated : January 25th 2010
	


***************************************************
	GENERIC
	
	*/


HTML {
	font: 62.5%/160% Helvetica, Helvetica Neue, Arial, sans-serif;   
	background:#FFF url("../images/footer-bkg.gif") bottom center no-repeat;
	color: #454545;
	}
	
BODY {
	margin: 0px;
	padding: 0px;
	text-align: center;
	}

body { behavior: url("http://www.richmondozone.com/csshover3.htc"); } 
	
 
/***************************************************
	WRAPPER
	
	 */
	 
#wrapper {
	width:964px; /*952 if borders disabled */
	margin: 0px auto;
	text-align:left;
	padding:0;
	background:url("../images/bkg.gif") repeat-y;
	position:relative;
	}
	
#inner-wrapper {background:url("../images/ozone-footer.gif") 30px bottom no-repeat;
display:inline-block;
	}
		
.logo {
    width:134px;
    height:141px;
    display:block;
    background:url("../images/logo.gif") no-repeat;
	margin:10px auto 0px auto;
    text-indent:-999em;
	text-align:left;
	}
 
/***************************************************
	SIDEMENU
	
	*/
	
 #sidemenu {
 	list-style:none;
	margin:43px 0 0 0;
	padding:0;
	}
 
#sidemenu LI {
 	list-style:none;
	margin:0;
	padding:0;
	display:block;


	}

#sidemenu LI A{
	color:#FFF;
	text-decoration:none;	
	font-size:120%;
	background:url("../images/sidemenu.gif") no-repeat;
	text-indent:-999em;
	display:block;
	text-align:left;
	height:30px;
	width:auto;
	
	}

#sidemenu LI #nav-home{background-position:0 0px}
#sidemenu LI #nav-the-ozone{background-position:0 -30px}
#sidemenu LI #nav-calendar{background-position:0 -60px}
#sidemenu LI #nav-programming{background-position:0 -90px}
#sidemenu LI #nav-news{background-position:0 -120px}
#sidemenu LI #nav-media{background-position:0 -150px}
#sidemenu LI #nav-vip{background-position:0 -180px}

#sidemenu LI #nav-home:hover,
#sidemenu LI #nav-home.selected{background-position:-177px -0px}

#sidemenu LI #nav-the-ozone:hover,
#sidemenu LI #nav-the-ozone.selected{background-position:-177px -30px}

#sidemenu LI #nav-calendar:hover,
#sidemenu LI #nav-calendar.selected{background-position:-177px -60px}

#sidemenu LI #nav-programming:hover,
#sidemenu LI #nav-programming.selected{background-position:-177px -90px}

#sidemenu LI #nav-news:hover,
#sidemenu LI #nav-news.selected{background-position:-177px -120px}

#sidemenu LI #nav-media:hover,
#sidemenu LI #nav-media.selected{background-position:-177px -150px}

#sidemenu LI #nav-vip:hover,
#sidemenu LI #nav-vip.selected{background-position:-177px -180px}

#sidemenu UL {
	margin:10px 0px;
	}
		
#sidemenu LI LI A {
	background:none;
	text-indent:0;
	text-align:right;
	height:auto;
	margin:4px 5px;
	padding:0 15px;
	display:block;
	height:16px;
	}	
	
#sidemenu LI LI A:hover {text-decoration:underline;}
	
#sidemenu LI LI A.selected {background:url("../images/sidemenu-arrow.gif") center right no-repeat;
	}	

/***************************************************
	UTILITY
	
	*/	 
	
#utility {
	list-style:none;
	margin:60px 20px 20px 20px;
	padding:0;
	}
	
#utility A {
	text-decoration:none;
	color:#fff;
	}

#utility A:hover {text-decoration:underline;}
	
/***************************************************
	HOMEPAGE > VIDEO PLAYER
	
	disabled as of Oct 1 2009
	
	*/	 	
	
#video-player H2 {background:url("../images/header-icon-play.gif") 0 3px no-repeat;
	}
	
#video-player H4 {margin-top:20px;}	
	
/*	
#video-player DIV {
	margin:0 0 0 25px;  
	width:417px;
	}	
*/	

/***************************************************
	STRUCTURE
	
	*/
	
#rightcolumn {
	float:left;
	width:740px;
	padding:20px 0 591px;
	}
	
#leftcolumn {
	float:left;
	width:177px;
	margin:0 35px 0 0;
	text-align:right;
	min-height:1050px;
	height:auto !important; /*IE6 Min-height hack */
  	height:1050px;
	}

.content {
	min-height:650px;
	height:auto !important;
	height:650px;
	}
	
.inner-left {
	float:left;
	width:270px;
	margin:0 30px 0 0;
	}
	
.inner-right {
	width:440px;
	float:left;
	}	
	
/***************************************************
	HEADER
	
	 */
	 
#header {
	height:393px;
	position:relative;
	}
	
/* The intro is a brief snippet of text on the homepage */
#intro {
	margin:30px 0 70px;
	color:#2e2e2e;
	}
	
#intro H1 {
	margin:0 0 8px;	
	line-height:120%;
	}	
	
/***************************************************
	HOMEPAGE > ROTATING FEATURES

	Uses Cycle Lite Jquery Plugin
	
	 */
 .photo-overlay {background:url("../images/photo-overlay.png");
	width:740px;
	height:393px;
	position:absolute;
	z-index:99;
	left:0;
	text-indent:-999em;
	display:none;
	top:0;
	}
	
#feature {
	list-style:none;
	margin:0;
	padding:0;
	display:none;
	height:400px;
	}
	
#feature H3 {
	position:absolute;
	top:250px;
	left:0;
	z-index:10;
	color:#fff;
	font-size:320%;
	background:url("../images/60-black.png") ;
	padding:10px 20px;
	display:block;
	width:700px;
	height:122px;
	line-height:120%;
	}
	
#feature-arrows {
	position:absolute;
	left:20px;
	bottom:12px;
	z-index:100;
	}
	
#feature-arrows A{
	display:block;
	text-indent:-999em;
	width:27px;
	height:27px;
	background:url("../images/feature-arrows.png");
	float:left;
	
	}

#feature-arrows #prev:hover{background-position:bottom left;}
#feature-arrows #next{background-position:top right; margin-left:5px;}
#feature-arrows #next:hover{background-position:bottom right;}

/***************************************************
	Feature Pagination
	
	*/	

#feature-pagination{
	list-style:none;
	margin:0;
	padding:0;
	position:absolute;
	right:20px;
	bottom:12px;
	z-index:100;
	width:auto;
	}
	
#feature-pagination LI {float:left;}
		
.feature-button {background:url("../images/feature-button.png") no-repeat;
	width:27px;
	height:27px;
	line-height:27px;
	text-align:center;
	color:#0078c5;
	display:block;
	margin:0 0 0 5px;
	font-size:120%;
	}
	
.feature-button:hover,
LI.selected .feature-button {
	background-position:bottom left;
	color:#fff;
	}
	
/***************************************************
	HOMEPAGE > WIDGETS
	
	 */
	 
.widget {
	margin: 0 0 50px 0;
	}
	
.widget H2 {
	border-bottom:solid 1px #e5e5e5;
	padding:4px 0 0 35px;
	background:url("../images/header-icon.gif") 0 3px no-repeat;
	}
	
.widget H4 {
	margin:0 0 5px 0;
	}
	
.widget P {
	font-size:120%;
	line-height:160%;
	}
	
/***************************************************
	CONTENT
	
	uses a lot of the widget styles - but kept separate for
	easy maintenance
	
	 */

.content H1 {
	font-style:italic;
	text-transform:uppercase;
	}	
	
.content H2 {
	border-bottom:solid 1px #e5e5e5;
	padding:4px 0 0 35px;
	background:url("../images/header-icon.gif") 0 3px no-repeat;
	}
		
.content P, .content li {
	font-size:120%;
	line-height:160%;
	}	

#public-transit-routes p {font-size:100%;}

#public-transit-routes h4 {font-size:130%;}
	
/***************************************************
	HOMEPAGE > NEWS WIDGET
	
	
	 
	 disabled because of rss icon.
	 no rss as of oct 1st 2009.
	 
#newsfeed H2 {background:url("http://www.richmondozone.com/images/header-icon-rss.gif) 0 3px no-repeat;
	} 
	
	
	*/
	
#newsfeed UL {
	list-style:none;
	margin:0;
	padding:0;
	}
	
#newsfeed LI {
	margin:0 0 10px 0;
	}
	
#newsfeed H4 A {
	color:#204d70;
	text-decoration:none;	
	}
	
#newsfeed H4 A:hover {text-decoration:underline;}
	
#newsfeed SMALL {font-weight:bold;}
	
/***************************************************
	PAGINATION
	
	jQuery Pagination Plugin styling. Used for newsfeed paging on homepage
	
	 */
	 
#pager {
	float:right;
	width:auto;	
	margin:12px 5px 0 5px;
	}
	
.qp_counter {
	display:block;
	width:auto;
	float:left;
	text-align:center;
	margin:0 15px;
	}
	
.qp_next {background:url("../images/newsfeed-arrows.gif") top left no-repeat;
	width:10px;
	height:13px;
	float:left;
	text-indent:-999em;
	display:block; 
	}
		
.qp_next:hover {
	background-position:bottom left;
	}
	
.qp_prev {
	float:left;
	background:url("../images/newsfeed-arrows.gif") top right no-repeat;
	width:10px;
	height:13px;
	text-indent:-999em;
	display:block; 	
	}
	
.qp_prev:hover {
	background-position:bottom right;
	}

/***************************************************
	PAGINATION  (green)
	
	used on programming listings
	
	 */	
	 
.pagination {
	list-style:none;
	margin:0;
	padding:0;
	float:right;
	}
	
.pagination LI {float:left;}
	
OL.pagination A {
	margin:10px 5px;
	padding:0 5px;
	color:#26a62b;
	text-transform:uppercase;
	display:block;
	line-height:15px;
	}
	
OL.pagination A:hover {
	text-decoration:none;
	background:none;
	border-bottom:dotted 1px #26a62b;
	}
	
OL.pagination A.selected {
	color:#454545;
	border:none;
	}
	
/***************************************************
	HOMEPAGE > CONTEST SIGNUP
	
	 */	
	 
#contest-signup FORM {
	font-size:120%;
	margin:20px 0 0 20px;
	}	 
	
#contest-signup FORM .text{width:200px;}
	
#contest-signup FORM LI STRONG {
	font-size:80%;	
	font-style:italic;
	}
	
#contest-signup FORM #terms {
	color:#999999;
	font-size:80%;
	margin:0px 0 0 150px;
	padding:10px 0 0 0;	
	}
	
#contest-signup FORM #terms A{
	color:#999;
	text-decoration:underline;
	}
	
#contest-signup FORM #terms A:hover {text-decoration:none;}
	
.form-align {
	float:left;
	width:260px;
	margin:0 0 10px 0;
	}

#contest-signup FORM LI .submit {background:url("../images/enter.gif") no-repeat;
	text-indent:-999em;
	display:block;
	width:75px;
	height:30px;
	margin:15px 0 0 150px;
	border:none;
	font-size:0;
	line-height:0;
	overflow:hidden;
	}	
	
#contest-signup FORM LI .submit:hover {	
	background-position:bottom left;
	}
	

	CALENDAR
	
	
	 

#calendar {display:none;}

#calendar h3 {
     padding-bottom:0px;
     margin-bottom: 4px;
	}

.cal_column {
     width:185px;
     float:left;
	}

.cal_column2 {
     width:185px;
     float:left;
	}

.cal_column p {padding-right:15px;}

.calendar_theme {
	font-size: 12px;
	color: #001d3a;
	line-height: 18px;
	font-weight:normal;
	margin-bottom: 5px;
	}

.calendar_title1 {
	font-size:12px;
	color: #212121;
	font-weight:normal;
	text-align:right;
	}

.calendar_gates {
	font-size:14px;
	color: #252525;
	}

h3.calendar {
	font-size:11px;
	color:#212121;
	text-transform:uppercase;
	font-weight:bold;
	border-bottom: 1px solid #e1e1e1;
	}

.headliner {
	color:#001d3a;
	font-size:18px;
	padding-top:6px;
	margin-bottom:0px;
	line-height:28px;
	}

.subheadliner {
	color:#001d3a;
	font-size:12px;
	padding-top:0px;
	margin-bottom:0px;
	line-height:16px;
	padding-right:20px;
	}

.location {
	color:#262626;
	font-size:13px;
	}

p.time {
	color:#8c8c8c;
	font-size: 16px;
	margin-bottom:8px;
	}

p.time_sm {
	color:#252525;
	font-size: 12px;
	margin-bottom:8px;
	background:url(../images/calendar_icon_clock_sm.gif) repeat-y top left;
	padding-left:18px;
	line-height: 16px;
	}

.title_sm {
	font-size: 10px;
	color: #232323;
	font-weight:normal;
	}

#schedule {
	width:740px;
	/*background:url(../images/calendar_bg.gif) no-repeat top left; */
	}

.cal_header {
	width:101px;
	height:24px;
	float:left;
	border-top:3px solid #CF142B;
	border-bottom:solid 3px #CF142B;
	line-height:24px;
	padding:10px 0;
	}

.cal_header p {
	width:90px;
	text-align:left;
	font-size:14px;
	padding: 0 10px 0 0;
	color:#bfbfbf;
	font-weight:bold;
	text-align:right;
	}

.cal_day {
	width:100px;
	height:44px;
	border-left: 1px dashed #bfbfbf;
	border-top: 1px dashed #bfbfbf; 
	float:left;
	display:inline;
	}

.cal_day2 {
	width:100px;
	height:43px;
	border-left: 1px dashed #bfbfbf;
	border-top: 1px dashed #bfbfbf;
	border-bottom: 1px dashed #bfbfbf; 
	float:left;
	}

.cal_feb {
        display:block;
	width:100px;
	height:44px;
	background-color:#cf142b;
	border-left: 1px solid #cf142b;
	border-top: 1px solid #cf142b; 
	float:left;
	color:#fff;
	}

.cal_feb:hover {
display:block;
	width:100px;
	height:44px;
	background-color:#fff;
	border-left: 1px solid #fff;
	border-top: 1px solid #fff;
	float:left;
	cursor:pointer;
	color:#cf142b;
	}

.cal_day p, .cal_day2 p {
	text-align:left;
	font-size:14px;
	padding: 12px 0 0 60px;
	color:#bfbfbf;
	margin-bottom:0;
	}

.cal_feb p {
	margin-bottom:0;
	text-align:left;
	font-size:14px;
	padding: 12px 0 0 60px;
	}

/***************************************************

CALENDAR > WEEEKLY LIST
	
	Listing of all the weeks.  
	
	No longer in use as of Oct 1st 2009

	 */	
	 
.weekly-list {
	float:left;
	width:140px;
	margin:0 8px 0 0;	
	}
	
.weekly-list UL {
	margin:0;
	padding:0;
	list-style:none;
	font-size:140%;
	}
	
.weekly-list LI {
	margin:4px 0;
	}
	
.weekly-list A {
	color:#a4a4a4;
	text-transform:lowercase;
	}
	
.weekly-list A:hover {text-decoration:underline;}	
	
.weekly-list H3 {
	font-size:160%;
	font-style:italic;
	}
		
/***************************************************
	CALENDAR LIST
	
	 */
	 
.calendar-list {
	margin:40px 0 0px;
	}	 
	
.calendar-list TABLE {
	margin:0 0 40px;
	}

.calendar-list TH H3 {
	font-size:180%;
	font-weight:bold
	margin:0 0 10px 0;
	}
	
.calendar-list TH {
	font-weight:bold;
	font-style:italic;
	}
	
.calendar-list TD {
	font-size:140%;
	line-height:160%;
	}
	
.calendar-list TD.vitals {font-size:120%;}
	
/***************************************************
	BLUE TABLE (road closures table - no longer in use as of Oct. 1st 2009)
	
	*/	
	
.blue-table{
	width:100%;
	background:#0078c5 url("../images/blue-table-top.gif") no-repeat;
	color:#FFF;
	font-size:120%;
	margin:0 0 20px 0;
	}
	
.blue-table TH {
	border-bottom:solid 3px #FFF;
	font-size:140%;
	}
	
.blue-table THEAD TH {
	padding:22px 15px 15px;
	}
	
.blue-table TH,
.blue-table TD {
	padding:15px;
	border-right:solid 1px #fff;
	}
	
.blue-table-wrap{
	background:#0078c5 url("../images/blue-table-bottom.gif") bottom left no-repeat;
	padding:0 0 3px 0;	
	}
	
/***************************************************
	LISTING
		
	*/
	
.general-list UL{
	list-style:none;
	margin:0 0 0 -20px;
	padding:0;	
	}
	
.general-list IMG {
	float:left;
	margin:0 25px 0 0;
	}
	
.general-list A SMALL,
.general-list .link-fake  SMALL {
	font-weight:bold;
	display:block;
	}
	
.general-list A STRONG,
.general-list .link-fake  STRONG {
	font-size:160%;
	display:block;
	margin:4px 0 10px 0;
	color:#204d70;
	font-weight:normal;
	}
	
.general-list LI {	
	line-height:160%;
	font-size:120%;	
	}
	
.general-list A,
.general-list .link-fake {
	padding:25px;
	color:#454545;
	display:block;
	}
	
.general-list A:hover SMALL,
.general-list A:hover STRONG,
.general-list A:hover SPAN {color:#FFF;}
		
.general-list A:hover {
	background:#0078c5;
	text-decoration:none;
	}
	
/* The general list has overstates that make the
margin on the H2 useless */
.general-list H2{margin:0;}
	
/* the buffer list simply allows for a bit of extra space beetween LI's */
.buffer-list LI {
	margin:8px 50px 8px 0;
	}
	
/***************************************************
	GENERAL ITEMS
	
	random bits scattered around
	
	*/
	
#public-transit-routes H4 {margin:0;}
	
#public-transit-routes UL,
#designated-drop-off UL{
	list-style:none;
	margin:0;
	padding:0;
	}
	
#public-transit-routes LI,
#designated-drop-off LI{
	list-style:none;
	margin:8px 0;
	padding:0;
	}	
	
#public-transit-routes H2 {background:url("../images/header-icon-bus.gif") 0 3px no-repeat;}
#designated-drop-off H2 {background:url("../images/header-icon-stop.gif")  0 3px no-repeat;}
#pedestrian-transit-routes H2 {background:url("../images/header-icon-walk.gif")  0 3px no-repeat;}
#bike-routes H2 {background:url("../images/header-icon-bike.gif")  0 3px no-repeat;}
#road-closures H2 {background:url("../images/header-icon-x.gif")  0 3px no-repeat;}
#transportation H2 {background:url("../images/header-icon-arrow.gif")  0 3px no-repeat;}


/***************************************************
	FOOTER
	
	 */

#copyright {
	position:absolute;
	bottom:0;
	left:0;
	color:#FFF;
	width:177px;
	text-align:center;
	margin:0;
	padding:0;
	}
	
#footer {
	position:absolute;
	bottom:251px;
	right:15px;	
	height:272px;
	}
	
#footer P {float:left;}

/***************************************************
	PRIVACY POLICY (thickbox popup)
	
	 */

#privacy {
	text-align:left;
	padding:40px;
	background:#FFF;
	}
	
#privacy span {
	width:100%;
	overflow:hidden;
	position:relative;
	font-weight:bold;
	font-size:13px;
	margin:0;
	padding:0;
	margin-bottom:3px;
	}

#privacy .logo {
	background:none;
	text-indent:0;
	}

/***************************************************
	SOCIAL ICONS
	
	 */
#social {
	margin:20px;
	padding:0;
	list-style:none;
float:right;
_display:inline; /*double margin bug */
	}
#social LI {
	float:left;
	margin:0 0 0 5px;
	}
#social A {
	text-align:left;
	background:url(../images/social-2.jpg) no-repeat;
	height:20px;
	display:block;
	text-indent:-999em;
	width:20px;
	}
	
#social A.facebook {background-position:-60px 0px;}
#social A.flickr {background-position:-40px 0px;}
#social A.twitter {background-position:-20px 0px;}
#social A.youtube {background-position:0 0px;}

#social A.facebook:hover {background-position:-60px -22px;}
#social A.flickr:hover {background-position:-40px -22px;}
#social A.twitter:hover {background-position:-20px -22px;}
#social A.youtube:hover {background-position:0 -22px;}