/* ----------------------------------------------------------
Site: genres
Filename: s-core-models.css
URL:
Author: Peter Barclay
Version: 2008.03.03
Description: Layout and cosmetic 
Comments: This stylesheet provides global page models (e.g content framework, promo boxes of various sorts).

Notes:


KEY:
n1. Optional background: No background (transparent) | Plain hex background; Background gif/jpg | Semi-transparent background (png)
n2. Where pngs are used, the rule must be replicated in the sibling css file (s-ie-png.css) with the appropriate ie-specific filter.
n3. Relative positioning in parent element, so we can use absolute positioning to sit a child footer caption box over the image.
[GLO] :  Can't be customised - part of global CSS common to all genre index pages
[C-CSS] : Can be customised, but not by editorial staff in markup - Edit genre-level 's-themes.css' stylesheet
[C-M] : Can be customised per promo element in markup by editorial staff - usu. add classname to element

Index:
=JS namespace
=Grid layout - basic page framework
=Genre Content Global rules - apply to all content between page masthead and page footer.
=Modules - promos and other re-useable elements
=Module variants - variants on the basic modules
=Misc - miscellaneous smaller models
---------------------------------------------------------- */

/* =JS namespace (js-controlled show/hide functionality etc)
--------------------------------------------- */
/* A set of rules for javascript-enabled use - selectors don't apply for non-js users as there's no .js context. */
.blq-js #g-body .nonJs {
	display:none;
}

/* Universal show/hide */
.blq-js body #g-content-shell .selected {
	display:block;
}
.blq-js body #g-content-shell .hidden {
	display:none;
}
/* APS tabs - sets onload default style */
/*.js #aps-coming-up-wrapper {
	display:none;
}*/
/* APS carousel - js namespace because we want non-js users to see all the aps listings. */
.blq-js body #aps-content-coming-up, 
.blq-js body #aps-content-last-on {
	min-height:160px;
	overflow:hidden;
	position:relative;
}

.blq-js body #aps-coming-up h4,
.blq-js body #aps-last-on h4 {
	display:none;
}

/* for Lead promo - sets onload default style for tabbing functionality  */
.blq-js  #p-lead-b {
	display:none;
}
.blq-js #p-lead-c {
	display:none;
}
.blq-js #p-lead-d {
	display:none;
}
.blq-js #whatisabeta-p-lead {
	display:none;
}


/* =Grid layout
--------------------------------------------- */

/* Outer parent div for everything between template masthead and template footer (separate sheet for blq-specific stuff)
Also provides context for higher specificity, e.g. promo modules. 

NOTE: Alex Youngs amended 'font-size' from '1.1em' to '1.2em' 7th April 2008
-------- */
.g-content {
	clear:both;
	overflow:hidden;
	zoom:1;
	margin:0;
	padding:0 14px 0 14px;
	background:#e0e0e0;
	background-image:url(/staticarchive/9faf20cd948b8456e9b8fa20fe5ddb7bdda4cd15.gif);
	background-position:left top;
	background-repeat:repeat-x;
	font-size:1.2em;
	font-family:arial,helvetica, sans-serif;
}
	
/* Genre-level masthead (banner) 
-------- */
#g-masthead {	
	clear:both;
	overflow:hidden;
	zoom:1;
	margin:0;
	padding:0;
	padding:40px 10px 30px 35px;	
	background:#fff;
}

	#g-masthead h1 {
		background:none;
		margin:0;
		padding:0;
	}
	
	#g-masthead h1 a img {
		vertical-align:top;
		margin-left:10px;
	}

/* #g-content-featured: principal promos area. 
	Any combination of:
	lead (main) promo
	generic promos
-------- */
#g-content-featured {
	float:left;
	overflow:hidden;
	zoom:1;
	width:626px;
	background:none;
}

/* Genre featured promos a and b - principal promos sub-areas 
	Any combination of:
	generic promos
-------- */
#g-content-featured-a,
#g-content-featured-b {
	overflow:hidden;
	zoom:1;
	width:306px;
	background:none;
}		
#g-content-featured-a {
	float:left;
}	
#g-content-featured-b {
	float:right;
	overflow:hidden;
	zoom:1;
	width:306px;
}

/* #g-content-extra. 
	Any combination of:
	APS feed, 
	iPlayer, 
	MPU ad
	Genre directory
	Other promos 
-------- */
#g-content-extra {
	float:right;
	overflow:hidden;
	zoom:1;
	width:306px;
	background:none;
}	


/* =Genre Content Global rules - anywhere within the g-content area:
These should have a moderately high level of specificity - higher than rules for individual promos - so they will override promo-specific rules.
--------------------------------------------- */

body .g-content a {
	font-weight:bold;
	color:#000;
	text-decoration:none;
}
body .g-content a:hover {
	text-decoration:underline;
}
body .g-content .play {
	margin:0;
	padding:3px 0 3px 27px;
	background:none;
	background-image:url(/staticarchive/32aa315fc4731af36a10daf5f6e3a4624fa5105b.gif);
	background-position:0 50%;
	background-repeat:no-repeat;
}
body .g-content div.play {
	margin:0 0 12px 0;
}

/* alert/message - e.g. non-javascript, non-Flash */
body .g-content .alert {
	margin:0 0 12px 0;
	padding:20px 0 0 10px;
	text-align:center;
	vertical-align:middle;
}

body .g-content .cta-patch {
	clear:both;
	overflow:hidden;
	zoom:1;
}
body .g-content .cta-patch span {
	padding-right:2px;
}
body .g-content .cta-patch img {
	padding-right:3px;
}
body .g-content .cta-patch span img {
	padding-right:2px;
}	


/* =Modules
--------------------------------------------- */	

/* Lead promo ('featured' area):
-------- */			
.p-lead-shell {
	clear:both;
	overflow:hidden;
	zoom:1;	
	margin:0 0 14px 0;
	background:none;
}
	.p-lead-shell ul.pModLead {
		clear:both;
		width:626px;
		margin:0;
		padding:0;		
		overflow:hidden;
		zoom:1;
		background:#3b3b3b;
		color:#fff;
	}
	.p-lead-shell ul.pModLead li.promoLead {
		width:626px;
		height:260px;
		margin:0;
		padding:0;
		position:relative; /* See Note 3 */
		overflow:hidden;
		zoom:1;
	}
	* html .p-lead-shell ul.pModLead li.promoLead {
	  vertical-align: bottom; /* Correct IE-specific issue where closing </li> tag isn't recognised, causing erronious gaps below list items. [may affect IE7 too, in which case move to IE-specific stylesheet.] */
	}	
	.p-lead-shell ul.pModLead li h5 {
		margin:0 0 9px 0;
		background:none;
	}	
	.p-lead-shell ul.pModLead li p {
		margin:0 0 12px 0;
		background:none;
	}		
	.p-lead-shell ul.pModLead li a {
		color:#fff;
	}
	.p-lead-shell ul.pModLead li .promoAsset {
		float:left;
		width:400px;
		margin:0;
		padding:0;
		background:none;
	}
	.p-lead-shell ul.pModLead li .promoAsset img {
		float:left;
		margin:0;
	}	
	.p-lead-shell ul.pModLead li .promoCopy {
		float:left;
		width:200px;
		margin:0;
		padding:5px 5px 7px 10px;
		background:none;
	}
	.p-lead-shell ul.pModLead li.p-copy-foot .promoAsset img {
		border-width:0 0 1px 0;
		position:absolute;
		z-index:1;
	}
	.p-lead-shell ul.pModLead li.p-copy-foot h5,
	.p-lead-shell ul.pModLead li.p-copy-foot p {
		margin:0 0 6px 0;
	}		
	.p-lead-shell ul.pModLead li.p-copy-foot .promoCopy {
		position:absolute;
		bottom:0px;
		left:0px;
		z-index:9999;
		width:100%;
		/*height:55px; Amended by Alex Youngs April 11th 08 */
		height:25px;
		background:none;
		background-image:url(/staticarchive/17df96b5e0f3c9910fa76ae17e058a57ccfa71bb.png); /* Note n1, n2 */
		color:#000;
	}
	
	.p-lead-shell li.promoLead .promoCopy ul {
		overflow:hidden;
		margin:5px 0;
	}
	.p-lead-shell li.promoLead .promoCopy ul li {
		margin:0 0 3px 13px;
		background:none;
		list-style-type:disc;
		list-style-position:outside;
	}
	
	/* Lead promo tabs */
	/* Styling here is fairly complex -
	--- Basic tab ---
		* There can be 2 tabs 4 tabs or no tabs. 
		* Top padding so there is a gap between promo content and tab for unselected state; 
		* Bottom padding so background image will show (lower left and right corners)
		* Background image (bottom-aligned) is shallow so it won't extend up into the top padding
		* Background image has rounded corners btm left and btm right, but image is center-aligned and wider than the tab, so corners won't show for ordinary tabs (not leftmost or rightmost) 
		* Contains block-level elem (<div></div> tag) with its own graphic styling (e.g. gradient)
		* tab (li) background image is uniform hex colour which coincides with the hex value of the lowermost pixels in the container element's background gradient - 
		so there is a smooth transition between the two even though they are separate bgs.  
		* Variants:
			** Two- or four-tab versions - Default is 4, extensions for other variants below with different width settings.
			** Leftmost tab: rounded left corner - the background image is left aligned to show corner
			** Rightmost tab: rounded right corner - the background image is right aligned to show corner
	--- Selected tab ---	
		* Similar to unselected, but 
			** Different tab bg (btm aligned) - is higher than tab itself and extends the full height of the tab plus its top padding, so tab appears to be flush with promo above.
			** There is no gradient in the child element, the whole tab is a flat colour - child elem has 'background:none' so the parent bg shows through. 
	*/
	
	/* Container */
	.p-lead-shell ul#p-lead-tabs {
		margin:0;
		overflow:hidden;
		zoom:1;
		list-style-type:none;
		background:none;
	}		
	/* Tabs - basic */ 
	ul#p-lead-tabs li {
		width:157px;
		wid\th:154px;
		float:left;
		margin-right:3px;
		padding:3px 0 6px 0;
		background:none;
		background-image:url(/staticarchive/5085ee7916a3dc045eb5ee5c52fc3ad00cab1e0a.gif);
		background-position:center bottom;
		background-repeat:no-repeat;
	}
	/* The leftmost tab*/								
	ul#p-lead-tabs li#p-lead-tab-first {
		width:158px;
		wid\th:155px;
		background-position:left bottom;
	}
	/* The rightmost tab*/	
	ul#p-lead-tabs li#p-lead-tab-last {
		margin-right:0;
		background-position:right bottom;
	}
	/* When a tab is selected (not leftmost or rightmost) - the bg is deep enough to extend from the bottom of the li to the top, 
	including the top padding, so this tab appears to be flush with the promo content above.*/			
	ul#p-lead-tabs li.selected {
		background-image:url(/staticarchive/b4f2ff3d58d2f8436ee0b3b3882958edc52907b5.gif);
		background-position:center bottom;
		background-repeat:no-repeat;
	}								
	ul#p-lead-tabs li div {
		padding:8px 5px;
		min-height:16px;
		background:none;
		background-image:url(/staticarchive/db612e208e8898c16648dd7faa723f0815882696.gif);
		background-position:left bottom;
		background-repeat:repeat-x;
		text-align:center;
		vertical-align:middle;
	}	
	* html ul#p-lead-tabs li div {
		height:16px;
	}		
	ul#p-lead-tabs li div a {
		color:#fff;
		font-weight:normal;
		display:block;
	}	
		
	ul#p-lead-tabs li div a:hover {
		text-decoration:none;
	}	
	ul#p-lead-tabs li.selected div {
		background:none;
	}
	
	/* Tab width variants - 2 tabs or 4 */
		/* 2 tabs */
		.twoTabs ul#p-lead-tabs li {
			width:313px;
		}							
		.twoTabs ul#p-lead-tabs li#p-lead-tab-first {
			width:310px;
		}	
		/* 4 tabs */
		.fourTabs ul#p-lead-tabs li {
			width:157px;
			wid\th:154px;
		}							
		.fourTabs ul#p-lead-tabs li#p-lead-tab-first {
			width:158px;
			wid\th:155px;
		}
	
/* Basic all-purpose promo 
--------  */

/* Parent container for basic promo - 
contains top and bottom cap content 
and promo module 
--------  */
.pMod {	
	margin:0 0 15px 0;
	padding:0;
}	

/* Basic promo - contains any of:
	Image (full or thumb)
	Headings 
	Text copy
	Lists
	Links, stand-alone or in lists
	Forms with drop-down menus
	APS content
	MPU ad content
	Message board copy
	Directory listings
...
--------  */
.promo {
	overflow:hidden;
	zoom:1;
	margin:0;
	border-width:0;
	border-style:none;
	border-color:transparent;
	padding:10px;
	background:none;
	background-color:#fff;
}

.promo p {
	margin:0 0 10px 0;
}
.promo img {
	float:none;
	margin-bottom:7px;
	display:block;
}
.p-tn img {
	float:left;
}
.promo h2,
.promo h3 {
	margin:0 0 5px 0;
	padding:0;
}
.promo h4 {
	margin:0 0 4px 0;
	padding:0;
}

/* For icons in h3s not done as background images: */
.promo h3 img {
	margin:0 3px 0 0;
	padding:0;
	vertical-align:middle;
}

.promo form {
	margin: 0 0 10px 0;
}

.promo .readMore {
	padding:0 0 0 10px;
	background-image:url(/staticarchive/200ab331c1240c188adadd7ac52f9132b38a10b1.gif);
	background-position:left center;
	background-repeat:no-repeat;
}

.promo ul.listContent {
	margin:5px 0 10px 4px;
}	
.promo ul.listContent li {
	margin:0 0 3px 12px;
	list-style-type:disc;
	list-style-position:inside;
}

.promo form select {
	width:210px;
	margin:0;
	padding:0;
	vertical-align:middle;
}
.promo form input,
.promo form input.btn-submit  {
	margin:0 0 0 3px;
	padding:0;
	vertical-align:middle;
}
.promo form button {
	width:68px;
	height:26px;
	overflow:hidden;
	margin:0;
	border:none;
	padding:0;
	vertical-align:middle;
	background:none;
}

/* =Module variants - supplementary classes extending basic 'promo' rule.
Note: These all rely on a greater specificity than the standard .promo to extend/override .promo rules correctly, hence the .g-content context
--------------------------- */	

/* Graphical 'sweetie effect' on headings */

.g-content .graphic-heading h3,
.g-content .graphic-heading-p-tn h3 {
	background-image:url(/staticarchive/25ac5712d0f733a73105e9a655a756bfcb10683d.jpg);
	background-repeat:no-repeat;
	background-position:top center;
	margin:0 -10px 10px -10px;
	padding:8px 0 13px 10px;
}

* html .g-content .graphic-heading h3 {
	margin-top:-3px;
	padding-top:7px;
}
.g-content .graphic-heading-p-tn {
	padding-top:0;
}
.g-content .graphic-heading h3 a {
	display:block;
}

.g-content .graphic-heading img {
	margin-bottom:0;
}

/* Promo theme variants - e.g variant background colours, borders on/off etc */
.g-content .p-borders {
	border-width:1px;
	border-style:solid;
	border-color:#000;
	padding:9px;
}
.g-content .p-bg-trans {
	background:none;
}
.g-content .p-bg-semitrans {
	background:none;
	background-image:url(/staticarchive/17df96b5e0f3c9910fa76ae17e058a57ccfa71bb.png); /* See note n1 */
}

.g-content .p-bg-theme1 { /* Coloured background variant */
	background:#d2b4ac;
}
.g-content .p-bg-theme2 { /* Coloured background variant */
	background:#b0c4de;
}
.g-content .p-bg-theme3 { /* Coloured background variant */
	background:#8fbc8f;
}
.g-content .p-bg-theme4 { /* Coloured background variant */
	background:#fff;
}
.g-content .p-bg-theme5 { /* Coloured background variant */
	background:#fff;
	background-image:url(/staticarchive/3345c13468da4987cf4782052ce75a6fe1f37331.jpg);
	background-position:left top;
	background-repeat:repeat-x;
}
.g-content .p-bg-theme6 { /* Coloured background variant - change hex value as required: */
	background:#fff;
	background-image:url(/staticarchive/b5dbed3068c62f216e60fead7795e438c7d878a2.jpg);
	background-position:left top;
	background-repeat:repeat-y;
}
/* For headings with a background (where a promo has no image) */
.g-content h3.p-bg-theme1,
.g-content h3.p-bg-theme2,
.g-content h3.p-bg-theme3,
.g-content h3.p-bg-theme4,
.g-content h3.p-bg-theme5,
.g-content h3.p-bg-theme6 {
	margin:-10px -10px 10px -10px;
	padding: 5px 10px 5px 10px;
}
.g-content ul.p-bg-theme1,
.g-content ul.p-bg-theme2,
.g-content ul.p-bg-theme3,
.g-content ul.p-bg-theme4,
.g-content ul.p-bg-theme5,
.g-content ul.p-bg-theme6 {
	padding: 10px;
}

/* Bespoke promo - zero most of the styling for standard promo  */
.g-content .p-bespoke {
	background:none;
	border-width:0;
	border-style:none;
	border-color:transparent;
	padding:0;
}
.g-content .p-bespoke * {
	float:none;
	margin:0;
	border-width:0;
	border-style:none;
	border-color:transparent;
	padding:0;
	background:none;
}
	
/* icons */
/* Basic 'Look at me' icon */
.g-content h3.p-icon-highlight {
	padding:0 0 0 15px;
	background:none;
	background-image:url(/staticarchive/d6c5d59222d53fe0f0db2901a176443999d8d2b7.gif);
	background-position:left center;
	background-repeat:no-repeat;
}
/* Content-specific icons: */
/* Article */
.g-content h3.p-icon-article {
	padding:5px 0 5px 32px;
	background:none;
	background-image:url(/staticarchive/dd9de5168956dd1324ea426a82dbe51df25c00fa.gif);
	background-position:left center;
	background-repeat:no-repeat;
}
/* Gallery */
.g-content h3.p-icon-gallery {
	padding:5px 0 5px 32px;
	background:none;
	background-image:url(/staticarchive/6157f45e902ef112311876607ded0be4c8ad0e53.gif);
	background-position:left center;
	background-repeat:no-repeat;
}
/* Game */
.g-content h3.p-icon-game {
	padding:5px 0 5px 32px;
	background:none;
	background-image:url(/staticarchive/6abda8ed388d6d0cc8efb37eedffffc0317857b3.gif);
	background-position:left center;
	background-repeat:no-repeat;
}
/* Messageboard */
.g-content h3.p-icon-messageboard {
	padding:5px 0 5px 32px;
	background:none;
	background-image:url(/staticarchive/7c49687a069d847f46f384e7cfcbfc5a5507d163.gif);
	background-position:left center;
	background-repeat:no-repeat;
}
/* Mobile */
.g-content h3.p-icon-mobile {
	padding:5px 0 5px 32px;
	background:none;
	background-image:url(/staticarchive/0762f981a820f4bacb3baffa57b10e6cc1df92f4.gif);
	background-position:left center;
	background-repeat:no-repeat;
}
/* Newsletter */
.g-content h3.p-icon-newsletter {
	padding:5px 0 5px 32px;
	background:none;
	background-image:url(/staticarchive/afdd77bfed40df77add99f619d87e9e26b596f56.gif);
	background-position:left center;
	background-repeat:no-repeat;
}
/* Print */
.g-content h3.p-icon-print {
	padding:5px 0 5px 32px;
	background:none;
	background-image:url(/staticarchive/bc5021d822118986f999b95de5c8d236145d992e.gif);
	background-position:left center;
	background-repeat:no-repeat;
}
/* Movie */
.g-content h3.p-icon-movie {
	padding:5px 0 5px 32px;
	background:none;
	background-image:url(/staticarchive/ac33a1f6df454dd4a8729fd0114efc734120fcda.gif);
	background-position:left center;
	background-repeat:no-repeat;
}
/* TV */
.g-content h3.p-icon-tv {
	padding:5px 0 5px 32px;
	background:none;
	background-image:url(/staticarchive/ac33a1f6df454dd4a8729fd0114efc734120fcda.gif);
	background-position:left center;
	background-repeat:no-repeat;
}
/* Feeds */
.g-content h3.p-icon-feeds {
	padding:5px 0 5px 32px;
	background:none;
	background-image:url(/staticarchive/e8a4e149ba6b8c2f6e46e03a5851b5e005073277.gif);
	background-position:left center;
	background-repeat:no-repeat;
}

.g-content .p-feeds ul {
	margin:5px 0;
}	
.g-content .p-feeds ul li {
	margin:0 0 3px 12px;
	list-style-type:disc;
	list-style-position:outside;
}

/* smaller promo images */
.g-content .p-tn img {
	margin:0 9px 3px 0;
}

/* APS (automated programme service) */
/* APS shell */
.g-content .p-aps {
	padding:0px;
}
.g-content .p-aps ul {
	clear:both;
	overflow:hidden;
	zoom:1;
}

.g-content .p-aps .aps-header {
	padding:5px 10px 0 10px;
	background:gold;
}
.g-content .p-aps .aps-body {
	padding:15px 10px 0 10px;
	background:none;
}
.g-content .p-aps .aps-footer {
	padding:0 10px 10px 10px;
	background:none;
	text-align:right;
}

/*.g-content .p-aps #aps-content {
	background:none;
}*/

.g-content .p-aps #aps-body li h3,
.g-content .p-aps #aps-body li h4 {
	margin-bottom:6px;
	font-size:1.3em;
}

	/* APS nav - tabbing: */
	.g-content .p-aps #aps-tabs {
		margin:0 -10px 0 -10px;
		padding:0;
		background:none;
		background-image:url(/staticarchive/ecf840ccd17efbae522da2668aeda7239d8a971d.gif); /* Thin tramline behind tabs */
		background-position:left bottom;
		background-repeat:repeat-x;	
	}
	.g-content .p-aps #aps-tabs li {
		float:left;
		margin:0 0 0 10px;
		padding:0 0 0 0;
		background:#f1f1f1;
		border-width:1px;
		border-style:solid;
		border-color:#d4d4d4;
	}
	.g-content .p-aps #aps-tabs li.selected {
		border-bottom-color:#fff;  /* border-bottom-color should match background colour */
		background:#fff;
	}
	.g-content .p-aps #aps-tabs li a {
		display:block;
		float:left;
		padding:6px 5px 6px 5px;
		font-weight:bold;
	}
	.g-content .p-aps #aps-tabs li a:hover {
		text-decoration:none;
	}
	.g-content .p-aps #aps-tabs li.selected a {
		font-weight:lighter;
	}
	
	.g-content .p-aps #aps-tabs li span.availability {
		/* Edited to reflect (temporary) change in branding PB 2009-01-22) */
		/*
		width:9px;
		height:11px;
		background-image:url(/staticarchive/f9436db1f4ec42514a0d8a154b86218f2f87ec60.gif);
		background-position:center left;
		background-repeat:no-repeat;
		padding:0 3px 0 9px;
		padding:0 3px 0 0;
		*/
		width:0;
		margin:0;
		padding:0;
		
	}
	
	/* APS nav - carousel: */
	.g-content .p-aps .aps-earlier,
	.g-content .p-aps .aps-later {
		padding:5px 0;
		border:1px solid #000;
	}
	.g-content .p-aps .aps-earlier {
		margin:0 0 7px 0;
		border-width:0 0 1px 0;
	}
	.g-content .p-aps .aps-earlier a,
	.g-content .p-aps .aps-later a {
		display:block;
		background:transparent;
	}
	.g-content .p-aps .aps-earlier a {
		padding:10px 0 0 0;
		background-image:url(/staticarchive/311d9b1685567d01bb1ef603f240f4a359cf819f.gif);
		background-position:left top;
		background-repeat:no-repeat;
	}
	.g-content .p-aps .aps-later {
		margin:7px 0 7px 0;
		border-width:1px 0 0 0;
	}
	.g-content .p-aps .aps-later a {
		padding:0 0 10px 0;
		background-image:url(/staticarchive/0c3174512719c3c1847f5efd2d439b8fe82f456f.gif);
		background-position:left bottom;
		background-repeat:no-repeat;
	}
	
/* APS programme content: */
/* APS class- and ID names are 'out of the box' with aps includes and can't be changed, only re-styled. */
.g-content .p-aps ol.episodes li {
	clear:both;
	overflow:hidden;
	zoom:1;
	margin-bottom:11px;
	line-height:1.2em;
}
.g-content .p-aps .position,
.g-content .p-aps .episode {
	clear:both;
	overflow:hidden;
	zoom:1;
} 
.g-content .p-aps .position {
	padding:0 5px 0 0;
} 
.g-content .p-aps .episode {
	padding:2px 5px 2px 0;
}

.g-content .p-aps ol.episodes li .position .time,
.g-content .p-aps ol.episodes li .episode .availability {
	display:inline;
}

.g-content .p-aps ol.episodes li .episode .availability {
	background-image:url(/staticarchive/f9436db1f4ec42514a0d8a154b86218f2f87ec60.gif);
	background-position:center left;
	background-repeat:no-repeat;
	padding-left:11px;
	color:#DD047B;
}

.g-content .p-aps li#aps-coming-up .availability {
	display:none;
}

.g-content .p-aps ol.episodes li .position .time {
	margin-right:5px;
}
.g-content .p-aps ol.episodes li .description {
	position:absolute;
	left:-5000px;
}
.g-content .p-aps ol.episodes li .subtitle {
	position:absolute;
	left:-5000px;
}

.g-content .p-aps ol.episodes li .dtstart,
.g-content .p-aps ol.episodes li .dtend {
	border-style:none;
}

/* MPU ad*/
.g-content .p-ad-mpu {
	padding:3px;
}
.g-content .p-ad-mpu img {
	margin:0;
}

/* iPlayer */
/* Simple link to genre-specific iPlayer index */
.g-content .iplayer {                                                                                                     
	padding:0 0 9px 0;
	background:#545454;
	background-image:url(/staticarchive/fa45ea2d0d2f6362f9b5a12b48f7066343e16288.gif);
	background-position:top left;
	background-repeat:repeat-x;                                                                                                 
	text-align:center;
}

.g-content .iplayer img {
	padding:0;
	margin:0;
}

.g-content .iplayer span {    
	font-size:0.9em;
	font-weight:normal;
	color:#fff;
}

.g-content .iplayer a {
	color:#fff;
}



/* iPlayer patch */
.g-content .p-iplayer-cta-patch {                                                                                                     
	padding:3px 0 3px 0;
}
.g-content .p-iplayer img {                                                                                                     
	margin:0;
}

/* Directory listings */
.g-content .p-dir {
	background:#fff;
	padding:0px;
}
.g-content .p-dir-list-col {
	width:45%;
	float:left;
	padding:0 7px 0 0;
}
.g-content .p-dir-list-col-solo {
	width:100%;
	float:none;
	clear:both;
	overflow:hidden;
	zoom:1;
	padding:0;
}

.g-content .p-dir a.lead {
	font-weight:bold;
}

.g-content .p-dir a {
	font-weight:normal;
}

.g-content .p-dir-list-col h4,
.g-content .p-dir-list-col-solo h4 {
	font-size:1.2em;
	margin:0 0 5px 0;
}

.g-content .p-dir-list-col h3,
.g-content .p-dir-list-col-solo h3 {
	padding: 10px;
}

.g-content .p-dir-list-col ul,
.g-content .p-dir-list-col-solo ul {
	overflow:hidden;
	zoom:1;
	padding: 5px 10px 10px 5px;
	margin:5px 0 0 4px;
	list-style-type:square;
	list-style-position:inside;
}
.g-content .p-dir-list-col ul li,
.g-content .p-dir-list-col-solo ul li {
	overflow:hidden;
	padding:2px;
}

.g-content .p-dir-list-col ul li li,
.g-content .p-dir-list-col-solo ul li li {
	display:inline;
	padding:0 4px 2px 0;
}
.g-content .p-dir-list-col ul li h4,
.g-content .p-dir-list-col-solo ul li h4 {
	margin:0 0 5px 0;
	padding:0;
	/*padding:0 0 0 15px;
	background-image:url(f/bullet-square.gif);
	background-position:left center;
	background-repeat:no-repeat;*/
}
.g-content .p-dir-list-col ul li li a,
.g-content .p-dir-list-col-solo ul li li a {
	font-weight:normal;
}
.g-content ul.p-dir-links-other {
	padding:0 10px 10px 10px;
	clear:both;
	font-size: 10px;
}
.g-content ul.p-dir-links-other li {
	list-style-image:url(/staticarchive/200ab331c1240c188adadd7ac52f9132b38a10b1.gif);
}

/*Message boards*/

.g-content .p-mboard h3 {
	padding:0 0 10px 0;
}
.g-content .p-mboard blockquote {
	background:none;
	background-image:url(/staticarchive/f61bbec1e2dbe1ef8471e061c18c74fa21ed2b45.gif);
	background-repeat:no-repeat;
	background-position: left top;
	margin:0 0 7px 0;
	padding:0 0 0 30px;
}
.g-content .p-mboard blockquote .quote {
	background:none;
	background-image:url(/staticarchive/06419e2f38c98e5c3095499d396441936552da19.gif);
	background-repeat:no-repeat;
	background-position: right bottom;
	margin:0;
	padding:0 25px 0 0;
}
.g-content .p-mboard p.readMore {
	text-align:right;
	background:none;
}


/*Feeds*/
body .p-feed {

}

/* =Misc - Miscellaneous smaller models
--------------------------------------------- */

/* start of Programme Finder rules */

.g-content #p-aps-container .p-aps-header-container, 
.g-content .p-aps .aps-header {
	padding:8px 10px 5px 10px;
	background:gold;
}

.g-content #p-aps-container #p-aps-tabs li {
	float:left;
	margin:0 0 0 10px;
	padding:0 0 0 0;
	background:#f1f1f1;
	border-width:1px;
	border-style:solid;
	border-color:#d4d4d4;
}
.g-content #p-aps-container #p-aps-tabs li.selected {
	border-bottom-color:#fff;  /* border-bottom-color should match background colour */
	background:#fff;
}
.g-content #p-aps-container #p-aps-tabs li a {
	display:block;
	float:left;
	padding:10px 40px 8px 40px;
	font-weight:bold;
	font-size: 1.1em;
}

#g-content-shell #p-aps-container #p-aps-tabs li.selected a, 
#g-content-shell #p-aps-container #p-aps-tabs li.selected a:hover {
	text-decoration:none;
}

.g-content #p-aps-container .p-aps-tv-iplayerlinks li, 
.g-content #p-aps-container .p-aps-radio-iplayerlinks li {
	display: block;
	clear: both;
	overflow: hidden;
	margin-bottom: 3px;
	padding: 0;
}

.g-content #p-aps-container .p-aps-tv-iplayerlinks li .p-aps-tv-iplayerlink-imagelink img, 
.g-content #p-aps-container .p-aps-radio-iplayerlinks li .p-aps-radio-iplayerlink-imagelink img {
	float: left;
}

/*
.g-content #p-aps-container .p-aps-tv-iplayerlinks li .p-aps-tv-iplayerlink-imagelink, 
.g-content #p-aps-container .p-aps-radio-iplayerlinks li .p-aps-radio-iplayerlink-imagelink {
	float: left;
	clear: both;
}
*/

.g-content #p-aps-container #p-aps-tv-container, 
.g-content #p-aps-container #p-aps-radio-container {
	padding:15px 10px 0 10px;
	background:none;
}

.g-content #p-aps-container .p-aps-tv-links li, 
.g-content #p-aps-container .p-aps-radio-links li, 
.aps-body .p-aps-tv-links li, 
.aps-body .p-aps-radio-links li {
	padding: 0 0 8px 10px;
}

.g-content #p-aps-container .p-aps-tv-links li a, 
.g-content #p-aps-container .p-aps-radio-links li a, 
.aps-body .p-aps-tv-links li a,
.aps-body .p-aps-radio-links li a {
	font-size: 1.1em;
	font-weight: normal;
}

#p-aps-tv-container .p-aps-tv-iplayer-header-container a, 
#p-aps-radio-container .p-aps-radio-iplayer-header-container a, 
.aps-body .p-aps-tv-iplayer-header-container a {
	font-weight: normal;
	margin-bottom: 11px;
	display: block;
	background:transparent url(/staticarchive/421e473cc5c6d23a83f92643529a58799ef959fc.png) no-repeat scroll 0 1px;
	padding: 0 0 1px 105px;
	margin: 10px 0 12px 0;
}

.p-aps-tv-iplayerlink-textlink, 
.p-aps-radio-iplayerlink-textlink {
	padding: 0 0 0 24px;
	margin: 0 0 0 7px;
	display: block;
	text-align: left;
	float: left;
	width: 165px;
}

.programme-name, .episode-name {
	zoom: 1;
}

.separator {
	padding-bottom: 5px;
	display: block;
}

.promo p.p-aps-iplayer-morelink {
	padding: 10px 0 19px 0;
	display: block;
	margin-bottom: 0;
}