/* daniel mee © 2008

> subset of common.css

TODO
- clipped logo in ie6 due to negative margin.
- header links don't work in ie6 due to png fix on playhead background and presenter which then hides the links.
- horizontal scrollbar appears in safari due to text-indent on ".storyplayer em" declaration.
- work out how to wrap the url in the podcast help or work out some other technique.

*/


/* LINK STYLES -------------------------------------------------------------------------------------------------------- */

#main h1 + p a {color:#a68e86; font-weight:bold;}

/* BUTTON STYLES ------------------------------------------------------------------------------------------------ */


/* STORYPAGE STRUCTURE ------------------------------------------------------------------------------------------------ */

#main {
	padding-top: 0;
	padding-left: 0;
	padding-right: 0;
	width: 700px;
	background: #fff;
	}

	#main h3.fullstory { 
		margin-left: 10px;
		background-color: #000;	
		background-position: 15px 20px;
		margin: 0;
		padding: 20px 0 20px 20px;
		}

#main h1 {
	font: normal 32px/38px Georgia, serif;
	color:#fff;
	background: #4B354A;
	margin: 0;
	padding: 12px 10px;
}

#main p.publishing {
	margin: 0 0 35px 0;
	padding: 8px 5px 9px 10px;
	font: 11px Arial, Helvetica, sans-serif;
	color: #94819D;
	background-color: #D1D1D1;
	}
	
	#main p.publishing a { color: #94819D; }

#article {
	position:relative;
	width: 450px;
	float:right;
	margin-bottom:35px;  /* For some reason the margin top declaration on #comments or "#comments h3" wasn't working */
	display: inline; /* ie6 double margin bug fix */
}

	#article p { color: #000; }

.storyplayerpage, #sundries, #extras {
	position:relative;
	width: 210px;
	float:left;
	margin: 0 0 0 10px;
	display: inline;
	}

	#sundries ul { 
		background: #111;
		border-top: 1px solid #333 !important;	
		}
		
		#sundries ul li {
			border-bottom: 1px solid #333;
			}
			
			#sundries ul li a:hover { background-color: #333; }
	
		
	
		

#comments {
	clear:both;
	position:relative;
}


/* MAIN -------------------------------------------------------------------------------------------------------- */

#article .intro {font: bold 16px/23px Georgia, serif; margin-bottom:20px;}


/* INTERACTIVE LEFT -------------------------------------------------------------------------------------------------------- */


#fullstoryplayer {
	display:block;
	height: 30px;
	width: 190px;
	background:url(../i/button-audioplayer.png) no-repeat;
	overflow: hidden;
	line-height: 100px;   /*Send it off... */
}

#fullstoryplayer em {	/* so that a duration can be displayed on the 'click here' graphic of the player, but not all the other text, I've done a trick that doesn't work on ie6 */
	position:absolute;
	/*right:18px; */
	top:7px;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	font-size:14px;
	color:#a57598;
	text-decoration:none;
	line-height: 16px;   /* Bring it back... */
}

.alternateaudio {
	font: bold 8px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color: #D3C1D9;
	padding: 5px 0 5px 5px;
}

.alternateaudio a {color: #D3C1D9;}

#sundries {
	height: 131px;
	/*background: url(../i/bgrnd-sundries.png) no-repeat;
	padding: 81px 0 78px;*/
	padding: 40px 0;
}

#sundries ul {
	border-top: 1px solid #E7E6E1 !important;
	background: #fff;
	}
		
li.sundry-moretoadd a {background: url(../i/icon-sundries-alert.png) 5px 5px no-repeat;}
li.sundry-print a {background: url(../i/icon-sundries-print.png) 5px 5px no-repeat;}
li.sundry-email a {background: url(../i/icon-sundries-email.png) 5px 5px no-repeat;}
li.sundry-bookmark a {background: url(../i/icon-sundries-bookmark.png) 5px 5px no-repeat;}
li.sundry-twitter a {background: url(../i/icon-sundries-twitter.png) 5px 50% no-repeat;}
li.sundry-facebook a {background: url(../i/icon-sundries-facebook.png) 5px 50% no-repeat;}
/* Comments sundry icons located in the common.css */

li.nocomments {display:none;} /* This needs to be displayed if the story has not recieved any comments yet. This will probably be done using js */
#sundries li {
	display:block;
	position:relative;
	border-bottom: solid 1px #E7E6E1 !important;
}
#sundries li a {
	color: #93727B;
	display: block;
	font: 9px Arial, Helvetica, sans-serif;
	padding: 8px 10px 8px 30px;
	position: relative;
	text-decoration: none;
	text-transform: uppercase;
}

#sundries li a:hover {
	font-weight:bold;
	background-color: #E7E6E1 !important;
}

	#sundries li a:hover span { font-weight: normal; }

#sundries li a span {
	position:absolute;
	right:10px; top:8px;
	color: #FF8057 !important;
	font-size:17px;
	line-height:9px;
	cursor:pointer;
}
#sundries li a span.sundrylinktext {text-decoration:underline; font-size:9px;}

#extras h4 {
	color: #fff;
	font: bold 14px Arial, Helvetica, sans-serif;
	padding:0 10px;
	line-height: 48px;
	background-repeat:no-repeat;
	background-position: right;
}

#extras ul {
	position:relative;
	background: url(../i/bgrnd-extras-listing.png) bottom no-repeat;
	padding: 0 10px 35px;
	/*border-top: solid 1px #e2d8db;*/
	font: 12px/15px Arial, Helvetica, sans-serif;
	color:#4e1f19;
}
#extras li {
	display:inline;
}

#extras /*ul:not(#imageslisting)*/ li a {
	display:block;
	padding: 10px 30px 10px 0;
	border-bottom: solid 1px #666;
	border-top: solid 1px #666;
	position:relative;
	background: url(../i/icon-extras-arrow-closed.png) right center no-repeat;
	color: #5E0547;
}
#extras li a:hover { color: #D5C1D9; }

#extras #links + p { font:10px Arial, Helvetica, sans-serif; margin:-15px 45px 15px 10px;}

#imageslisting li, #imageslisting li a {display:inline; padding:0; background-image:none; border-bottom:none;}
#imageslisting img {width:93px;}
#imageslisting li:first-child {display:block;padding:5px 0;}

#imageslisting img:hover { -khtml-opacity:.50; -moz-opacity:.50; -ms-filter:"alpha(opacity=50)"; filter:alpha(opacity=50); opacity:.50; }

#main h4 {margin:0;}
h4#links { background-image: url(../i/icon-extras-links.png); color: #000; }
#extras p { color: #999; }
h4#audio {background-image: url(../i/icon-extras-audio.png);}
h4#video {background-image: url(../i/icon-extras-video.png);}
h4#images {background-image: url(../i/icon-extras-images.png);}

/* COMMENTS ------------------------------------------------------------------------------------------------------ */
#comments h3 {
	height:20px;
	width: 630px;
	margin: 0 0 8px;
	padding:2px 0;
	background: url(../i/title-comments.png) no-repeat;
	border-bottom:solid 3px #aa5ba9;
	overflow:hidden;
	line-height: 100px;
}

#footer { background: none; }

#comments h3 span {line-height: -100px;}