/*
	SOF HEADER STYLES
	This stylesheet sets rules for the new SOF Header, designed & implemented March 2010
	by Andy Dayton.   
	
	Tested in the following browsers:
	- Firefox 3.6 Mac / 3.5 Windows
	- Google Chrome 5.0 Mac / 4.0 Windows
	- Internet Explorer 8 / 7 / 6 Windows
	
	Dependancies/Techniques Used: 
	- CSS Background Image Sprites
		<http://www.alistapart.com/articles/sprites/>
	- DD_belatedPNG IE6 .png transparency fix 
		<http://www.dillerdesign.com/experiment/DD_belatedPNG/>
	- TypeKit hosted embeddable fonts
    <http://typekit.com/> 

	Known Issues:
	- The location of the "Search" button is not consistent between browsers
	- This design is not compatible with IE5.5 and below 
	- The searchbox opacity rollover doesn't work in IE6. This will need to be fixed
		via JavaScript
*/

/*
	This resets the default background to white. The new APM stylesheet sets the background
	color as #eee, but on many sites we left the body background-color rule out for white
	(which was the old APM default).
*/
.programBody {
	background-color: #fff;
} 

#sofProgramBanner {
	width: 770px;
	height: 84px;
	background: transparent; 
}

/*
	SOF WORDMARK
  The different colors of the SOF wordmark are achieved using an image sprite
	with three different colors: BLACK, WHITE, and GOLD (GOLD is primarily for the
	rollover state). Changing to a different color is achieved using background
	positioning. This can be set in the program stylesheet by using the following
	rules (WHITE is currently the default):
	
	BLACK wordmark:
	html body #sofProgramBanner h1 a { background-position: 0 0px; }
	
	WHITE wordmark:
  html body #sofProgramBanner h1 a { background-position: 0 -50px; }
  
	GOLD wordmark:
	html body #sofProgramBanner h1 a { background-position: 0 -100px; }

*/
 
#sofProgramBanner h1,
#sofProgramBanner h1 a {
	margin: 0;
	padding: 0;
	float: left;
	width: 400px;
	height: 50px;
	overflow: hidden;
	text-indent: -9999px;
	display: block; 
}
/* defaults to WHITE wordmark */
#sofProgramBanner h1 a {
	background: transparent url(/images/sof_header/sof-wordmark.png) 0px -50px no-repeat; 
}
/* default rollover to GOLD */
#sofProgramBanner h1 a:hover,
#secondary #sofProgramBanner h1 a:hover {
	background-position: 0 -100px;
}

/*
	SOF GIVE BUTTON
	Similar to the SOF wordmark, this can be switched between BLACK and WHITE
	text depending on the background color (defaults to WHITE). These changes should
	always be made in the program style sheet.

	WHITE text + icon:
	html body a#sof_give_button { color: #fff; background-position: 2px -16px; }  
	
	BLACK text + icon:
	html body a#sof_give_button { color: #000; background-position: 2px 0px; }

*/

a#sof_give_button {
	float: left;
	display: block;
  margin: 24px 0 0 67px;
	padding: 0 6px 0 20px;
	height: 16px;
	font: 12px "ff-speak-web-pro-1","ff-speak-web-pro-2", Verdana, sans-serif; 
	line-height: 1.3em;
	text-decoration: none;
	text-transform: lowercase;
  /* defaults to WHITE text + icon */
	background: transparent url(/images/sof_header/give-icon.png) 2px -16px no-repeat;
	color: #fff; 
}
a#sof_give_button:hover,  
#secondary a#sof_give_button:hover {
	background-position: 2px 0px;
	background-color: #f3c827; /* (SOF yellow) */
	color: #000;  
}


/*
	SOF SEARCHBOX
*/

form#searchbox {
	padding: 18px 0 0 0;
	margin: 0 0 0 518px;    
}


form#searchbox fieldset {
	padding: 0;
	margin: 0;
  border: 1px solid #ddd;
	height: 22px;       
	width: 240px;
	background: #fff url(/images/sof_header/search-bg.gif) 0px 0px no-repeat;
	opacity: 0.8;
	-moz-opacity: 0.8;
	filter:alpha(opacity=80);
	overflow: hidden;
}

form#searchbox fieldset:hover {
	background-position: 0px -20px;
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}                   
 
form#searchbox input.text {
	height: 18px;
	margin: 1px 0 0 22px;
	border: none;
	width: 150px;
	font-size: 13px;
	font-weight: normal;
	font-style: italic;
	color: #555;
}                                  

form#searchbox input.text.active {
	color: #000;  
	font-weight: normal;
	font-style: italic;   
	opacity: 1;
	-moz-opacity: 1;
	filter:alpha(opacity=100);
}
            
form#searchbox button.submit {
	border: none;
	margin: 1px 0 1px 8px;
	font: 12px "ff-speak-web-pro-1","ff-speak-web-pro-2", Verdana, sans-serif;
  text-transform: uppercase;
	color: #fff;
	background-color: #545454;
	height: 20px;
	width: 53px;
	line-height: 1.5em;
	cursor: pointer;
}

form#searchbox button.submit:hover { 
	background-color: #f3c827; color: #555;
} 


/*
	SOF MAIN NAVIGATION
*/

div#sofMainNavigation {
	clear: both;
	background: transparent url(/images/sof_header/sofProgramBanner-overlay.png) 0px 0px repeat;
	margin: 13px 10px 0 10px;
	height: 30px; 
}    

/* IE6 Hack! */
* html div#sofMainNavigation { margin-top: 4px; }
 
ul#sofMainNavButtons {
	padding: 0;
	margin: 0;
	list-style: none;
	height: 24px;
}
ul#sofMainNavButtons li {
	display: block;
	float: left;
	height: 24px;
	margin: 3px 3px 0 0;
}
ul#sofMainNavButtons li a {
	font: 16px "ff-speak-web-pro-1","ff-speak-web-pro-2", Verdana, sans-serif; 
	text-transform: uppercase; 
	text-decoration: none;
	text-align: center;
	color: #fff;
	display: block;
	height: 24px;
	line-height: 1.5em;
	background-color: #4D4D4D;
	background-position: 5px 0px;
	background-repeat: no-repeat;
}
ul#sofMainNavButtons li a:hover { background-color: #f3c827; color: #000; }

/* Main Buttons */
ul#sofMainNavButtons li.main a {  height: 24px; background-color: #393939; }
ul#sofMainNavButtons li.main a:hover { background-color: #f3c827; }

ul#sofMainNavButtons li#sof_shows_button a { width: 64px; margin-left: 3px;}                   
ul#sofMainNavButtons li#sof_blog_button a { width: 52px; }
ul#sofMainNavButtons li#sof_about_button a { width: 61px; }

/* Icon Buttons */
ul#sofMainNavButtons li.icon a {
	padding-left: 31px;
	background-position: 5px 0px;
	text-align: left;	
}
ul#sofMainNavButtons li.icon a:hover { background-position: 5px -24px; }

ul#sofMainNavButtons li#sof_stations_button a {
	background-image: url(/images/sof_header/stations-icon.png);
	width: 52px;	
}
ul#sofMainNavButtons li#sof_podcast_button a {
	background-image: url(/images/sof_header/podcast-icon.png);
	width: 73px;	
}
ul#sofMainNavButtons li#sof_newsletter_button a {
	background-image: url(/images/sof_header/newsletter-icon.png);
	background-color: #585858;
	width: 69px;
} 
ul#sofMainNavButtons li#sof_newsletter_button a:hover { background-color: #f3c827; }
ul#sofMainNavButtons li#sof_contact_button a {
	background-image: url(/images/sof_header/contact-icon.png);
	background-color: #6D6D6D;
	width: 73px;	
}
ul#sofMainNavButtons li#sof_contact_button a:hover { background-color: #f3c827; }  


/* Social Media Button Container */
li#sof_social_media { 
	padding: 0;
	background-color: #878787;
	height: 24px;
	width: 154px;
}
/* IE6 Hack! */
* html li#sof_social_media { width: 152px; margin-right: 0; }

li#sof_social_media ul { padding: 0; margin: 4px 3px; }
* html li#sof_social_media ul { margin-right: 0; }  

/* Social Media Buttons */
li#sof_social_media li {
	margin-top: 0;
	margin-left: 2px;
	padding: 0;
	display: block;
	float: left;
	width: 16px;
	height: 16px;
	text-indent: -9999px;
	overflow: hidden;
}
li#sof_social_media li a {
	display: block;
	background: transparent;
	width: 16px;
	height: 16px;
}

li#sof_social_media li.facebook a { background: transparent url(/images/sof_header/social-icons/facebook.png) 0px 0px no-repeat;}
li#sof_social_media li.twitter a { background: transparent url(/images/sof_header/social-icons/twitter.png) 0px 0px no-repeat;}
li#sof_social_media li.vimeo a { background: transparent url(/images/sof_header/social-icons/vimeo.png) 0px 0px no-repeat;}
li#sof_social_media li.tumblr a { background: transparent url(/images/sof_header/social-icons/tumblr.png) 0px 0px no-repeat;}
li#sof_social_media li.youtube a { background: transparent url(/images/sof_header/social-icons/youtube.png) 0px 0px no-repeat;}
li#sof_social_media li.flickr a { background: transparent url(/images/sof_header/social-icons/flickr.png) 0px 0px no-repeat;}
li#sof_social_media li.posterous a { background: transparent url(/images/sof_header/social-icons/posterous.png) 0px 0px no-repeat;}

li#sof_social_media li a:hover { background-position: -16px 0px; background-color: transparent;}

br.clear_all {
	height: 0px;
	clear: both;
}