/* DEFAULT PROGRAM STYLESHEET */
/* SAINT PAUL SUNDAY */

/* ========================================================================
   ========================================================================

   Some notes on the styles in this sheet:

   Most pages will have the same basic structure:

   The main background is a 770x150 image sliced into:
   - a 770x84 image that is used as the background for table#programBanner;
   - a 770x66 image that is used as the background for div#programPageArea.

   For the home page, program rundowns, and artist profiles (i.e., files where
   div#programPageArea has an .isHome, .isProgram, or .isArtist class), the
   background sohould be 770x300, sliced into 770x84 and 770x216.

   For the home page, program pages, and artist pages: background images and
   colors will be set in the <style> block of the HTML file.

   div#programPageArea has a large top padding to let the background image fade
   into the actual content. Within div#programPageArea are two floated columns,
   #content and #sidebar. #programPageArea should always have the .autoclear
   class so that it properly contains the floated columns.

   #content will contain a series of either .fullsection (600px wide) or
   .halfsection (300px wide, floated) divs.

   Within #content:
      <h1> is set in large bold type. Use it for the page's main headline.
      <h2> will have a highlighted background. Use it for section banners.
      <h3> is set in large bold type. Use it for section titles.
      <h4> is set in small plain type. Use it for subtitles. (In general,
           you'll also want to put its text in all-caps.) (just to be on the
           safe side, <h5> and <h6> look just like <h4>.)

   Occasionally you may run into a situation where floated .halfcolumns (or
   .photo divs on program pages) don't seem to line up properly, or throw off
   the content that comes after them. You might want to try putting in a
   dummy clearing element (like <div class="clearout">&nbsp;</div>) to flush
   the alignment.

   ========================================================================
   ======================================================================== */



/* change background color/add background image to control page background area */
body.programBody {
	background: #eee;
	margin: 0;
	padding: 0;
}

/* ======================================== */
/* ======================================== */
/* HEADER STYLES                            */
/* ======================================== */
/* ======================================== */

/* REQUIRED */
/* change background color/add background image to control search box background area */
table#programSearch td#programSearchBackground {
	background-color: #005c96;
}

/* REQUIRED */
/* change color to control search box label text color */
td#programSearchBackground label#programSearchLabel {
	color: #fff;
}

/* REQUIRED if using default search banner */
/* change background color/add background image to control program banner background area */		
table#programBanner {
	width: 770px;
	height: 84px;
	margin: 0;
	padding: 0;
	background-color: #005c96;
	background-image: url(../../images/apm001/bg_top.jpg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top left;
}		

/* REQUIRED if using default search banner */
/* do not change */
table#programBanner td#programWordmark {
	width: 512px;
	height: 84px;
	vertical-align: top;
}			

/* REQUIRED if using default search banner */
table#programBanner td#programNav {
	width: 258px;
	padding: 10px 0 0 0;
}

/* REQUIRED if using default search banner */
table#programNav {
	width: 258px;
}

/* REQUIRED if using default search banner */
table#programNav td {
	width: 86px;
}

/* REQUIRED if using default search banner */
td.programNavList ul {			
	margin: 0;
	padding: 0;
}

/* REQUIRED if using default search banner */
td.programNavList li {	
	line-height: 14px;
	list-style-type: none;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 11px;
}

/* REQUIRED if using default search banner */
/* change color/add link attributes to control display of nav links */	
td.programNavList a {			
	color: #fff;
}

/* REQUIRED if using default search banner */
/* do not change */
table#programBanner img {
	border: 0;
}

img#programWordmark {
 padding: 20px 0 0 105px;
 border: 0;
}


/* ======================================== */
/* ======================================== */
/* GENERAL STYLES                           */
/* ======================================== */
/* ======================================== */

div#programPageArea {
	position: relative;
	clear: both;
	width: 770px;
	margin: 0;
	border: 0;
	padding: 46px 0 20px 0;
	background-color: #edfbff;
	background-image: url(../../images/apm001/bg_bottom.jpg);
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top left;
	color: #000;
	font-family: verdana, arial, helvetica, sans-serif;
	font-size: 12px;
}

div#programPageArea p {
	margin: 0 0 1em 0;
}

div#programPageArea img {
	border: 0;
}

div#programPageArea ul, div#programPageArea ol {
	margin: 1em 0;
	padding: 0;
}
div#programPageArea ul li, div#programPageArea ol li {
	margin: 0 0 0.5em 1.25em;
	padding: 0;
}

/*
 * There are lots of times when you want a list, but don't want the bullets.
 * If that's the case, put an "unstyled" class on the <ul>.
 */
div#programPageArea ul.unstyled {
	margin: 1em 0;
	padding: 0;
	display:none;
}
div#programPageArea ul.unstyled li {
	margin: 0;
	list-style: none;
}

div#programPageArea h1, div#programPageArea h3 {
	margin: 0 0 5px 0;
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 20px;
	font-weight: bold;
	line-height: 22px;
}

div#programPageArea h4, div#programPageArea h5, div#programPageArea h6 {
	margin: 0;
	font-size: 10px;
	font-weight: normal;
	text-transform: uppercase;
}

div#programPageArea h4.byline {
	margin: 1.0em 0;
}

div#programPageArea a:link,
div#programPageArea a:hover,
div#programPageArea a:visited,
div#programPageArea a:active {
	background-color: transparent;
	color: #000;
}

/* for dummy elements used to clear floating divs. */
.clearout {
	clear: both;
	height: 1%;
	font-size: 2px;
}

/* For clearing floaters without having to put in dummy elements
 * (http://www.positioniseverything.net/easyclearing.html)
 */
.autoclear:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.autoclear {display: inline-table;}
/* Hides from IE-mac \*/
* html .autoclear {height: 1%;}
.autoclear {display: block;}
/* End hide from IE-mac */


/* ================================ */
/* ================================ */
/* CONTENT AREA STYLES              */
/* ================================ */
/* ================================ */

#content {
	clear: both;
	float: left;
	width: 602px;
	margin: 0;
}

#content .fullsection {
	clear: both;
	width: 562px;
	margin: 0;
	padding: 0 20px;
}

#content .halfsection {
	display: inline;
	float: left;
	width: 260px;
	margin: 0 1px 0 0;
	padding: 20px 20px 20px 20px;
	background-color: transparent;
	background-image: none;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top left;
	color: inherit;
}

#content h2 {
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	margin: 0;
	padding: 15px 0 15px 20px;
	background-color: #005c96;
	color: #fff;
}

/* An h2 inside a .fullsection or .halfsection needs to be stretched out to fill the #content area. */
#content .fullsection h2 {
	width: 581px;
	margin: 0 -20px 1em -20px;
}
#content .halfsection h2 {
	width: 280px;
	margin: 0 -20px 1em -20px;
}

.note, .caption {
	font-size: 10px;
}


/* ================================ */
/* ================================ */
/* SIDEBAR STYLES                   */
/* ================================ */
/* ================================ */


div#programPageArea #sidebar {
	display: inline; /* Fix for IE Bug: {http://www.positioniseverything.net/explorer/doubled-margin.html} */
	float: right;
	width: 128px;
	margin: 0 20px;
}
div#programPageArea #sidebar h2 {
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	margin: 15px 0;
	text-transform: uppercase;
}

div#programPageArea #sidebar > h2 {
	display:none;
}

div#programPageArea #sidebar ul {
	margin: 0;
	padding: 0;
	font-size: 12px;
}
div#programPageArea #sidebar ul li {
	display: block;
	margin: 1em 0 0 0;
	padding: 0;
	list-style: none;
}

div#programPageArea #sidebar ul.unstyled li {
	margin: 0;
}


/* ========================================================================
   ========================================================================

   HOME PAGE STYLES

   The home page works very differently from other pages.  Most importantly,
   there's a #lede div before #content and #sidebar. 

   The home page also contains a bunch of .promo divs that have extra padding
   to accomodate background images that may (or may not) fade out behind the
   text. The images should be 300x100, plus any extra height needed for the
   fade.

   ========================================================================
   ======================================================================== */

div#programPageArea.isHome {
	padding-top: 0;
	background-image: none;
}

div#programPageArea.isHome #lede {
	position: relative;
	width: 770px;
	margin: 0;
	padding: 176px 0 0 0;
	background-color: #000;
	background-image: none;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top left;
	color: #fff;
}
div#programPageArea.isHome #lede .wrapper {
	width: 770px;
	padding: 0 0 10px 0;
}
div#programPageArea.isHome #lede .halfsection {
	display: inline;
	float: left;
	width: 345px;
	margin: 0 20px 0 20px;
	padding: 0;
	background-color: transparent;
	color: #fff;
}

div#programPageArea.isHome #lede .fullsection {
	display: inline;
	float: left;
	width: 620px;
	margin: 0 20px 0 20px;
	padding: 0;
	background-color: transparent;
	color: #fff;
}

div#programPageArea.isHome #lede .halfsection h3 {
	font-family: helvetica, verdana, arial, sans-serif;
	font-size: 24px;
	font-weight: bold;
	line-height: 26px;
}

div#programPageArea.isHome #lede a:link, div#programPageArea.isHome #lede a:hover, div#programPageArea.isHome #lede a:visited, div#programPageArea.isHome #lede a:active {
	background-color: transparent;
	color: #fff;
}


div#programPageArea.isHome #content h2 {
	background-color: transparent;
	color: #000;
}

div#programPageArea.isHome .halfsection {
	width: 300px;
	margin: 0 1px 0 0;
	padding: 0;
}
div#programPageArea.isHome .halfsection h2 {
	width: 280px;
	margin: 0;
	padding: 15px 0 15px 20px;
}

/* Promo blocks need room at the top for the fancy background images. */
div#programPageArea.isHome #content .promo {
	width: 260px;
	padding: 120px 20px 20px 20px;
	background-color: transparent;
	background-image: none;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top left;
	color: #000;
}

/*
 * The section for the two recent programs is a <table> in order to make sure
 * the colored columns line up. background-color, background-image, and color
 * will be overridden in the page.
 */
table#recentProgramsTable { }
table#recentProgramsTable td {
	vertical-align: top;
	background-color: transparent;
	background-image: none;
	background-repeat: no-repeat;
	background-attachment: scroll;
	background-position: top left;
	color: #000;
}
#recentProgramLeft { }
#recentProgramSpacer { }
#recentProgramRight { }


/* ========================================================================
   ========================================================================

   PROGRAM PAGE STYLES

   Program pages will contain a #photosection that holds a set of .photo divs
   (300px wide, floated). The graphic that's shown in the .photo div should be
   300x100.

   ========================================================================
   ======================================================================== */

.fullsection#photosection {
	width: 602px;
	padding: 0;
}
.fullsection#photosection h2 {
	margin: 0;
}

.photo {
	display: inline;
	float: left;
	width: 300px;
	margin: 0 1px 0 0;
	padding: 0;
}
.photo .image {
	margin: 0;
}
.photo .caption {
	margin: 15px 0;
	padding: 0 0 0 20px;
}


div#programPageArea.isProgram #content,
div#programPageArea.isProgram #sidebar,
div#programPageArea.isArtist #content,
div#programPageArea.isArtist #sidebar {
	margin-top: 130px;
}


/* ====== STATIONS LISTING STYLES ====== */
div#programPageArea table.carriageTable {
}
div#programPageArea table.carriageTable td.carriageHeader {
	padding: 0 5px 0 0;
	font-weight: bold;
}
div#programPageArea table.carriageTable td.carriageText {
	padding: 0 5px 0 0;
	vertical-align: top;
}


/* OLD STYLES */

.storyhead, .storyhead2 {
	font-weight: bold;
}
.storycaption, .storytextsm {
	font-size: 10px;
}
.topnews2 {
	font-weight: bold;
	font-size: 14px;
}

/*used by Google Maps*/
#loading {
    position: absolute;
    color:#000000;
    text-align: center;
    padding: 2em;
    border: 1px solid #005C96;
    background-color: #B2CEDF;
    z-index: 100;
    opacity: .85;
    filter: alpha(opacity=85);
    width:250px;
   	left: 140px;
	top: 240px;
}
#map {
	border: 1px solid #000000;
	width: 550px;
	height: 300px;
}
.left {
	float:left;
}
.right {
	float:right;
}
.clear {
	clear:both;
}
.overlaySize {
	width:220px;
	min-height:80px;
}
.overlayText {
	font-size:12px;
	padding:0;
}
div#mapContainer {
	width: 550px;
}