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

Notes:

KEY: 
n1. Where pngs are used, the rule must be replicated in the sibling css file (e.g. s-ie-png.css) with the appropriate ie-specific filters.
n2. Relative positioning in parent element, so we can use absolute positioning to sit a child footer caption box over the image.
n3. Positioned offscreen: content hidden from some users (but still available to screen readers).
[CMN] :  Can't be customised - part of locked-down CSS common to all programmes index pages
[LCL] : Can be customised - local ownership of 'themes' stylesheet

Index:
=EXTERNAL STYLESHEET IMPORTS
=JS NAMESPACE - 
	A set of rules for javascript-enabled use - non-js users don't get them as the html.js context is written in with Javascript.
=PROGS B GLOBAL/UNIVERSAL STYLING
	Any rules applied at a universal level FOR PROGS B CONTENT ONLY - use Progs B hooks to do this (e.g. .prg-wrapper, #prg-wrapper-shell etc)
	Barlesque page area styles separately in /css/[version number]/styles/s-blq.css
=CORE PAGE STRUCTURE ELEMENTS
	Basic page framework - main content area containers, etc;
	Any high-level selectors for these contexts.
=STANDALONE ELEMENTS (OUTSIDE LH and RH AREAS) 
	e.g. masthead, main nav strip, social bookmarking etc
=COMMONLY RE-USED CONTENT MODULES (prg-grp, p-grp, p-mod, promo etc) 
	* --- Rows, modules, promos and other re-useable elements ---
	* --- Variants on the basic modules (eg rows with 1, 2, 3, 4, 6 promo modules) ---
=COMMONLY RE-USED SMALLER ELEMENTS - quote boxes, etc
=SPECIFIC CONTEXTS AND USAGES
	* --- CONTEXT: 'FEATURED CONTENT' AREA ( = 'Main' content area); (all pagetypes) ---
	* --- CONTEXT: 'EXTRA CONTENT' AREA ( = RH Content) AREA); Vertical index pagetype and subindex pagetype; content pagetype). ---
=MISCELLANEOUS - 
	Any elements not covered elsewhere in this sheet.
=VISIONAPPS 
	Comments, galleries, uploader etc	
=DEPRECATE - 
	Anything to be replaced/revised/removed

	
---------------------------------------------------------- */

/* =EXTERNAL STYLESHEET IMPORTS
--------------------------------------------- */
	/* Social bookmarks */
	@import '/staticarchive/9ee0787b7fd4c968de8fe17a5c36c89f749525d9.css'; 
	

/* =JS NAMESPACE
--------------------------------------------- */
/* 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;

}



	.js body #prg-wrapper-shell .selected {
		display:block;
	}
	.js body #prg-wrapper-shell .hidden {
		display:none;
	}

	/* CAROUSEL */
	
	.js #carousel-main {
		width:756px;
		height:70px;
		vertical-align:middle;
	}	

	.js .prg-carousel ul.carousel-strip {
		height:70px;
	}	
	
	.js .prg-carousel-content {
		overflow:hidden;
	}
		.js .prg-carousel-content ul#carousel-video.visionAppsCarousel {
			margin-top:10px;
			width:418px;
		}
		.js .prg-carousel-content ul.video-carousel-height1 {
			height:114px;
		}
		.js .prg-carousel-content ul.video-carousel-height2 {
			height:99px;
		}
		.js .prg-carousel-content ul.video-carousel-height3 {
			height:81px;
		}
		.js .prg-carousel-content-448 ul#carousel-video.visionAppsCarousel {
			width:354px;
		} 
		.js .prg-carousel-content-nobuttons .prg-carousel-content-448 ul#carousel-video.visionAppsCarousel {
			width:417px;
		}
		
	
	/* EMP */
		/* Ensure the emp container is always cleared properly. */
		.js .prg-wrapper .p-emp,
		.js .prg-wrapper .p-emp * {
			display:block;
			margin:auto;
			overflow:hidden;
		}
		.js #emp_carousel {
			overflow:hidden;
		}		
		.js #emp_carousel:after {
			content:"."; 
		    display:block; 
		    height:0;
		    clear:both; 
		    visibility:hidden;
		}
			/* Hides from IE-mac \*/
			* html .js #emp_carousel {
				height:1%;
			}  
h1.accessible { display:none; }
		
/* =PROGS B GLOBAL/UNIVERSAL STYLING (e.g. links)  
--------------------------------------------- */	
	.prg-wrapper a,
	.prg-wrapper a:link,
	.prg-wrapper a:visited,
	.prg-wrapper a:active {
		text-decoration:underline;
	}
	.prg-wrapper a:hover {
		text-decoration:none;
	}
	


/* =CORE PAGE STRUCTURE ELEMENTS
--------------------------------------------- */
	
	/* Outer 'Programmes' container for everything between Barlesque opening and closing content. */
	#prg-wrapper-shell {
		font-family: Verdana, sans-serif;
	}
	@media all and (min-width: 0px){ /* Target Opera 9+ */
	#prg-wrapper-shell {
		font-size: 100%;
	}
	}
	
	.prg-wrapper h1, 
	.prg-wrapper h2, 
	.prg-wrapper h3 {
		font-family: Helvetica, sans-serif;
	}

	.prg-wrapper {
		clear:both;
		overflow:hidden;
		margin:0;
		padding:0 14px 14px 14px;
	}
	.prg-wrapper h2.standalone {
		clear:both;
		margin:0 0 10px 0;
		padding:10px;
	}
	
	
/* =STANDALONE ELEMENTS (OUTSIDE LH and RH AREAS) 
--------------------------------------------- */		

	/* Masthead (banner) */
		#prg-masthead {	
			position:relative;
			height: 30px;
			clear:both;
			overflow:hidden;
			margin:0 0 10px 0;	
			padding:10px 10px 10px 10px;
			background-color:#eaeaea;
			border-bottom:1px solid #ccc;
		}
		
		#prg-masthead #logo-channel {
			float:right;
		}
	 
	/* Main nav strip (usu. top of page) */ 
		#prg-nav-main {
			margin:0 auto 10px auto;
			padding:0;
			text-align:center;
			overflow:hidden;
		}
		#prg-nav-main ul.nav-strip {
			margin:0;
			padding:0;
			overflow:hidden;
			text-align: center;
		}
		#prg-nav-main ul.nav-strip li {
			display: inline-block;
			display: -moz-inline-box;
			padding:0 0 0 1px;
		}
		#prg-nav-main ul.nav-strip li a {
			display:block;
			padding:9px 5px;
			float:none;
		}


	/* Main header within page content - Can optionally contain h1; or h1 can go in masthead/banner; h1 must be unique though.*/
		#prg-header-main h1 span.h1-extra {
			font-size:0.7em;
		}
		#prg-header-main p {
			padding-bottom:3px;
			padding-top:3px;
			margin-bottom:0px;
			
		}	
		.prg-header {
			margin:0 0 10px 0;
			padding:10px;
		}

	
	
/* =COMMONLY RE-USED CONTENT MODULES (prg-grp, p-grp, p-mod, promo etc)
--------------------------------------------- */	

	/* ---
	Groups, Rows, modules, promos and other re-useable elements
	--- */
	
		/* 'Super-group' - parent group for sets of grouped items - usu. p-grp */
			.prg-grp {
				
			}	


		/* 'Row' container for single or multiple promos */
			.p-grp {	

				clear:both;
				margin:0 0 10px 0;
				padding:0;
			}
		
			/* Ensure the core p-grp container is always cleared properly. */
			.p-grp:after {
			    content:"."; 
			    display:block; 
			    height:0;
			    clear:both; 
			    visibility:hidden;
			}
			/* Hides from IE-mac \*/
			* html .p-grp:after {
				height:1%;
			} 
	
			.prg-wrapper .p-grp h2 { /* Greater specificity than standalone h2 */
				margin:5px 0 0 0;
				padding:0 0 0 10px;
			}	
	
			/* Parent container for a basic promo */
			.p-mod { 
				overflow:hidden;
				width:320px;
				wid\th:306px; /* Box model hack - because we have some hz padding */
				float:left;
				margin:0;	
				padding:0 0 0 14px; /* Padding rather than margins, so we can have a background image in the p-mod, e.g. vertical separators. */
			}
			
			/* Ensure all components within a p-mod get hasLayout */
			.p-mod .p-comp {
				overflow: hidden;
			}
		
	
			/* Basic all-purpose promo */
			.promo {
				overflow:hidden;
				margin:0;
				padding:10px;
			}
		
			.promo .overlay-footer p {
				padding: 0 6px 6px;
				margin-bottom: 0;
			}
		
			.promo img {
				/*float:left;*/
				margin:0;
			}
			/* Targeting editorially significant images in a promo - so we can style those and only those (so avoid styling furniture, buttons etc). */
			.promo .image {
				overflow:hidden;
				float:left;
				margin:0 10px 2px 0;
			}
			
			.promo .linkImage {
				float:left;
			}
		
			.promo h3 {
				font-family:Verdana, Arial, sans-serif;
				margin:0 0 2px 0;
				padding:0;
			}
			.promo h4 {
				font-family:Verdana, Arial, sans-serif;
				margin:0 0 1px 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 .btns-standalone {
				clear:both;
				overflow:hidden;
				margin:0 0 0 0;
				padding:0 0 3px 0;
			}
			.promo .btns-standalone img {
				padding:0 7px 0 0;
			}
			
			.promo p.readMore, 
			.promo div.readMore {
				padding:0 0 0 10px;
				background-image:url(/staticarchive/44750b43bc509d1dedae57580e85cae16d6a80d7.gif);
				background-position:left center;
				background-repeat:no-repeat;
			}
			.promo .promoDetails { /* n2. */
				/*width:286px;*/
				margin:0;
				padding:0;
				position:relative;
				overflow:hidden;
			}
			.promo .promoDetails .image { /* n2. */
				position:relative;
				margin:5px 0 0 0;
				padding:0;
			}
			.promo .promoDetails .overlay-footer { /* n2. */
				position:absolute;
				bottom:0;
				left:0;
				width: 101%;
				padding-top: 6px;
			}


	/* --- 
	
	--- */
	
	/* ---
	Module variants - 
		Variants on the basic modules (eg rows with 1, 2, 3, 4, 6 promo modules) 
		These are supplementary classes extending basic .p-grp, .p-mod and .promo selectors.
		Classes applied to row element but affect child elements through cascade.
		Note: Higher specificity than the standard class, to extend/override basic selector rules correctly.
	--- */	
	
	
	/* p-grp */
	
		/* to ensure the core p-grp-a[n] container is always cleared properly. */
		.p-grp:after,
		.p-grp-a:after,
		.p-grp-aa:after,
		.p-grp-aaa:after,
		.p-grp-aaaa:after,
		.p-grp-aaaaaa:after {
		    content:"."; 
		    display:block; 
		    height:0;
		    clear:both; 
		    visibility:hidden;
		}
		/* Hides from IE-mac \*/
		* html .p-grp:after,
		* html .p-grp-a:after,
		* html .p-grp-aa:after,
		* html .p-grp-aaa:after,
		* html .p-grp-aaaa:after,
		* html .p-grp-aaaaaa:after {
			height:1%;
		} 

		/* Knock out default LH margin if it's the first child in a row. Note relatively high specificity */
		#prg-wrapper-shell .p-grp .nth-child-1 {
			margin-left:0;
			padding-left:0;
		}	
	
	
	/* p-grp - basic row model containin 1, 2, 3, 4 or 6 promo modules */
	
		/* Row with single p-mod */
		.prg-wrapper .p-grp-a {
		}
		
		/* Row with 2 p-mods */
		.prg-wrapper .p-grp-aa {
			
		}
		/* Row with 3 p-mods */
		.prg-wrapper .p-grp-aaa {
		
		}			
		/* Row with 4 p-mods */
		.prg-wrapper .p-grp-aaaa {
			
		}
		/* Row with 6 p-mods */
		.prg-wrapper .p-grp-aaaaaa {
			
		}
		
	/* p-mod - parent container module for a single promo */

		/* Single p-mod */
			.p-grp-a .p-mod {
				width:626px;
				margin-left:0;
				padding-left:0;
			}
			.prg-subindex-b .p-grp-a .p-mod {
				width:946px;
				margin-left:0;
				padding-left:0;
			}			
	
		/* Composite (rich) content */			
			.prg-wrapper .p-grp-a-composite h2 {
				float:left;
				width:140px;
				wid\th:130px;
				padding-right:10px;
				margin-top:10px;
			}					
			.prg-wrapper .p-grp-a-composite .p-mod {
				float:right;
				width:446px;
			}	
	
		/* 2 p-mods in a row */
			.p-grp-aa .p-mod {
				/*width:306px;*/	
			}
			
		/* 2 p-mods in a row */
			.p-grp-aa .p-mod {
				/*width:306px;*/	
			}
		/* 3 p-mods in a row */
			.p-grp-aaa .p-mod {
				width:146px;	
			}
		/* 6 p-mods in a row */
			.p-grp-aaaa .p-mod {
				width:146px;	
			}			
	
	/* Promos - a single block of content (usu. text and optional image) */
		.p-grp-aa .p-mod .promo img.medium {
			display: block;
			float: none;
		}
		.p-grp-aaa .p-mod .promo img.medium {
			display: block;
			float: none;
		}
		.p-grp-aaaa .p-mod .promo img.small {
			display: block;
			float: none;
		}
	
		.p-grp-a .p-mod .promo img {
			/*margin:0;
			padding:0;*/
		}
					
		/* Composite (rich) content */				
		.p-grp-a-composite .p-mod .promo img {
			float:left;
			margin:0 9px 2px 0;
		}			
			

	 
/* =COMMONLY RE-USED SMALLER ELEMENTS - carousels, corner caps, quote boxes, etc
--------------------------------------------- */	

	/* Core rounded corner caps - basic stretchable - added 2008-06-14 PB. 
		To support addition of rounded corner html model across all templates
		default low-specificity settings to zero the html, so it must be explicitly styled per site if rounded corners are required. */
		
		div.cap-t,
		div.cap-b {
			overflow:hidden;
			background:none;
		}
	
		/* Top caps */
		div.cap-t .cnr-l,
		div.cap-t .cnr-r {
			overflow:hidden;
		}
		div.cap-t .cnr-l {
			margin-right:0; 
			background:none;	
		}
		div.cap-t .cnr-r {
			float:right;
			width:0;
			margin-left:0;
			background:none;		
		}			

		/* Bottom caps */
		div.cap-b .cnr-l,
		div.cap-b .cnr-r {
			overflow:hidden;
		}
		div.cap-b .cnr-l {
			margin-right:0;
			background:none;
		}
		div.cap-b .cnr-r {
			float:right;
			margin-left:0; 
			background:none;	
		}

	/* ---
	Carousel (See also .js namespaced rules above) 
	--- */
	
		.prg-carousel {
			margin:0 auto 10px auto;
			padding:0 0 0 40px;
			overflow:hidden; 
		}
		.prg-carousel a.navPrev,
		.prg-carousel a.navNext {	
			float:left;
			display:block;
			margin: 10px 0 0 0;
			vertical-align:middle;
		}
		.prg-carousel ul#carousel-main {
			overflow:hidden;
		}
		.prg-carousel ul.carousel-strip {
			float:left;
			overflow:hidden;
			margin:0 10px;
			padding:0;
			vertical-align:middle;
			width:756px;
		}
		.prg-carousel ul.carousel-strip li {
			float:left;
			padding-left:0px;
		}	
			.prg-carousel ul.carousel-strip li.nth-child-1 {
				padding-left:0;
			}
		
		/* Carousel content, components */
			.prg-carousel-content {
				background-position:0 0;
				background-repeat:repeat-x;
			}		
			
			.prg-wrapper .prg-carousel-content p {
				width:122px;
			}
		
			.prg-wrapper .prg-carousel-content-black p {
				color:#FFFFFF;
			}
		
			.prg-wrapper .prg-carousel-content-silver p {
				color:#000000;
			}
		
			.prg-wrapper .prg-carousel-content p.videoDesc {
				text-align: center;
			}			
	
		/* EMP CAROUSEL */
		
			.prg-wrapper .emp-carousel-description {
				width:508px;
				margin:auto;
				margin-bottom:3px;
				background-color:#cccccc;
			}
			.prg-wrapper .emp-carousel-description p {
				padding:10px;
				margin:0;
			}			
			.prg-wrapper .emp-carousel-description-448 {
				width:444px;
			}

			/* EMP carousel in 'Featured content' area */
			.prg-wrapper #prg-wrapper-featured .prg-carousel-content-448 {
				width:448px;
			}			
			/* Smaller carousel inside the 'Featured content' area */
				.prg-wrapper #prg-wrapper-featured .prg-carousel-normal {
					width:612px;
					padding:5px 0 5px 56px;
				}
			
				#prg-wrapper-featured .prg-carousel-normal ul.visionAppsCarousel {
					width:379px;
				}

			/* Carousel component */
			.prg-carousel-content-448 ul#carousel-video.visionAppsCarousel {
				width:326px;
			} 
	
			.prg-carousel-content-black {
				background-color:#000000;
			}
		
			.prg-carousel-content-silver {
				background-color:#FFFFFF;
			}
			
			/* Stuff the Glow carousel needs */  
			.prg-carousel ul.visionAppsCarousel {
				overflow:hidden;
				position:relative;
			}	
				.prg-carousel-content ul.visionAppsCarousel {
					width:458px;
				} 
			
				.prg-carousel-content ul#carousel-video.visionAppsCarousel {
					/*border-left:4px solid;*/
					margin:0 12px;
				}
				.prg-carousel-content-nobuttons ul#carousel-video.visionAppsCarousel {
					/*border-left:4px solid;*/
					margin:10px 48px 0;
					display:inline;
				}
				.prg-carousel-content-nobuttons .prg-carousel-content-448 ul#carousel-video.visionAppsCarousel {
					margin:10px 16px 0;
					display:inline;
				}
				.prg-carousel-content ul#carousel-video.visionAppsCarousel li {
					margin-right:25px;
				}
				.prg-carousel-content-nobuttons ul#carousel-video.visionAppsCarousel li {
					margin-left:25px;
					margin-right:0;
				}
				.prg-carousel-content ul#carousel-video.visionAppsCarousel li.nth-child-1 {
					margin-left:0;
				}
				.prg-carousel-content ul#carousel-video.visionAppsCarousel li img {
					border:1px solid #999999;
					clear:both;
				}
				.prg-carousel-content ul#carousel-video.visionAppsCarousel li .stick img {
					border:1px solid #FFFFFF;
				}
			

			
	/* Some list styles */		

		ul.listCopy,
		ol.listCopy {
			overflow:hidden;
			margin:5px 0 7px 0;
		}
		ol.listCopy {
			list-style-type:decimal;
			list-style-position:inside;
		}
		ul.listCopy {
			list-style-type:disc;
			list-style-position:inside;
		}	
		ul.listCopy li,
		ol.listCopy li {
			margin:0 0 2px 0;
			background:none;
		}
	
		.p-callout ul.listCopy,
		.p-callout ol.listCopy {
			margin:10px;
		}

	/* Ad compliance */
		.prg-wrapper .ad-compliance {
			font-size:0.8em
		}
	
	/* Generic 'play' components */
	.prg-wrapper .play {
		margin:0;
		padding:3px 0 3px 27px;
		background:none;
		background-image:url(/staticarchive/3aade5c827aa9d967d3d1fdd4658484d10b8205d.gif);
		background-position:0 50%;
		background-repeat:no-repeat;
	}

	/* Image caption */
		/* Simple single-par image caption. */
		p.image-caption {
			margin-top:0;
			padding:6px;
		}	
		/* Image caption container with multiple pars */
		div.image-caption {
			padding:6px;
		}
		div.image-caption p {
			margin:0 0 4px 0;;
			padding:0;
		}	

	/* Separators */
	hr {
		height: 1px;
		margin: 10px 10px;
		overflow:hidden;
		border: none;
		float:none;
		clear:both;
		color:#000000;
		background-color:#000000;
	}
	
	/* Basic quote (pullquote is an extension with specific usage in content page - some styling for that in s-pagetype-content-css.) */

		.p-quote {
			background-image: url(/staticarchive/371e9faf718d4a95281aab4acdfb3246c84b00ea.gif);
			background-position:left top;
			background-repeat:no-repeat;
		}
		.p-quote .quote-text {
			margin:0 0 0 25px;
			padding:10px 25px 10px 0;
			background-image: url(/staticarchive/cfe6661321c944df8e78b26a58dc2d3bc65a6b6a.gif);
			background-position:right bottom;
			background-repeat:no-repeat;
		}
		.p-quote .quote-text p {

		}		
		.p-quote .quote-attribution {
			margin-top:5px;
		}	

	/* EMP info */
		.prg-wrapper .p-emp-info {
		}
		
		body .prg-wrapper #prg-wrapper-featured .p-emp-info * {
			padding: 0;
		}
		
		.prg-wrapper .p-emp-info-large {
			width: 512px;
			margin: 0 auto;
		}
		.prg-wrapper .p-emp-info-medium {
			width: 448px;
			margin: 0 auto;
		}


/* =SPECIFIC CONTEXTS AND USAGES - LH and RH content areas etc.
--------------------------------------------- */
	
	/* ---
	'FEATURED CONTENT' AREA (= Main Content area). 
	--- */
	
		/*  Featured content area*/
		#prg-wrapper-featured {
			float:left;
			overflow:hidden;
			width:633px;
			margin:0 0 10px 0;
			padding:0;
			
		}
	
		/* prg-featured-lead - lead promos in this area */
		.prg-featured-lead {
			margin-bottom:10px;
		}

		.prg-featured-lead .nth-child-1 {
			padding-left:0px;
		}

		#prg-wrapper-featured img.scroll-buttons {
			border:0;
			padding:0;
		}

		.prg-wrapper .prg-carousel-content {
			padding:5px 0 5px 0;
			width:512px;
		}

		.prg-wrapper .rollover a.navPrev,
		.prg-wrapper .rollover a.navNext  {
			display:inline;
			width: 23px;
			text-decoration: none;
			border:0;
		}

		.prg-wrapper .rollover a.navPrev {
			margin-left:13px;
		}

		.prg-wrapper .rollover a.navPrev-black-1,
		.prg-wrapper .rollover a.navNext-black-1,
		.prg-wrapper .rollover a.navPrev-silver-1,
		.prg-wrapper .rollover a.navNext-silver-1 {
			height:104px;
		}
		.prg-wrapper .rollover a.navPrev-black-1:hover,
		.prg-wrapper .rollover a.navNext-black-1:hover,
		.prg-wrapper .rollover a.navPrev-silver-1:hover,
		.prg-wrapper .rollover a.navNext-silver-1:hover { 
			background-position: 0 -104px;
		}

		.prg-wrapper .rollover a.navPrev-black-2,
		.prg-wrapper .rollover a.navNext-black-2,
		.prg-wrapper .rollover a.navPrev-silver-2,
		.prg-wrapper .rollover a.navNext-silver-2 {
			height:89px;
		}
		.prg-wrapper .rollover a.navPrev-black-2:hover,
		.prg-wrapper .rollover a.navNext-black-2:hover,
		.prg-wrapper .rollover a.navPrev-silver-2:hover,
		.prg-wrapper .rollover a.navNext-silver-2:hover { 
			background-position: 0 -89px;
		}

		.prg-wrapper .rollover a.navPrev-black-3,
		.prg-wrapper .rollover a.navNext-black-3,
		.prg-wrapper .rollover a.navPrev-silver-3,
		.prg-wrapper .rollover a.navNext-silver-3 {
			height:70px;
		}
		.prg-wrapper .rollover a.navPrev-black-3:hover,
		.prg-wrapper .rollover a.navNext-black-3:hover,
		.prg-wrapper .rollover a.navPrev-silver-3:hover,
		.prg-wrapper .rollover a.navNext-silver-3:hover { 
			background-position: 0 -70px;
		}

		/* video-carousel buttons, override in local css */
			.prg-wrapper .rollover a.navPrev-black-1,
			.prg-wrapper .rollover a.navPrev-silver-1 {
				background: url('/staticarchive/6da15680a48fb39ca2d5e2704291a09580cfa10b.gif') 0 0 no-repeat;
			}
			.prg-wrapper .rollover a.navNext-black-1,
			.prg-wrapper .rollover a.navNext-silver-1 {
				background: url('/staticarchive/c9608202a63c209c85e4c854553d930b50da7fd1.gif') 0 0 no-repeat;
			}

			.prg-wrapper .rollover a.navPrev-black-2,
			.prg-wrapper .rollover a.navPrev-silver-2 {
				background: url('/staticarchive/566a51122c3025930e2e32bf7755d83c85b09e98.gif') 0 0 no-repeat;
			}
			.prg-wrapper .rollover a.navNext-black-2,
			.prg-wrapper .rollover a.navNext-silver-2 {
				background: url('/staticarchive/5d2254304e956b220259bcf0ba5448878504374a.gif') 0 0 no-repeat;
			}
			.prg-wrapper .rollover a.navPrev-black-3,
			.prg-wrapper .rollover a.navPrev-silver-3 {
				background: url('/staticarchive/c3174b51ce2aab61772450690d6f9fa0634c7e81.gif') 0 0 no-repeat;
			}
			.prg-wrapper .rollover a.navNext-black-3,
			.prg-wrapper .rollover a.navNext-silver-3 {
				background: url('/staticarchive/11d626412d6d18ef46bdd1f5cc95591eacf1d30b.gif') 0 0 no-repeat;
			}

	/* ---
	'EXTRA CONTENT' AREA (= RH Content area);  
	--- */

		#prg-wrapper-extra {
			float:right;
			overflow:hidden;
			width:306px;
		}

		/* APS */
		.p-aps .promo p.iplayer span {
			padding-right: 15px;
			margin-right: 5px;
			background-image: url(/staticarchive/492d7831e2713ff5e24e03b9958d23e063993997.gif);
			background-repeat: no-repeat;
			background-position: 100% 50%;
		}

		.prg-wrapper .p-aps h2 {
			background-image: url(/staticarchive/7432c044068a85bc8eb3c0b9a887d957135cb126.gif);
			background-repeat: no-repeat;
			background-position: 0% 50%;
		}
		
		/* MPU ad */
		#prg-wrapper-shell .p-ad-mpu {
			padding:3px;
		}	
		
		.p-ad-mpu img {
			display:block;
			/*overflow:hidden;*/
			margin:0;
			padding:0;
		}
					
	
		/* .prg-related - related content and similar groups within 'Extra' content area. */
		#prg-wrapper-extra .prg-related {
			margin-bottom:10px;
		}
		#prg-wrapper-extra .prg-related h2 {
			padding:0 0 0 10px;
		}
	
		/* p-grp in prg-wrapper-extra area: */
			#prg-wrapper-extra .prg-related .p-grp {
				margin-bottom:10px;
			}	
		
			/* p-mod in prg-wrapper-extra area: (no left margin) */
			#prg-wrapper-extra .p-mod {
				clear:both;
				margin-left:0;
				padding-left:0;
			}
			
			/* p-mod in prg-wrapper-extra area: (no left margin) */
			#prg-wrapper-extra .prg-related .p-mod {
				margin:0;
			}
			
			/* Promo in .prg-related area */
			#prg-wrapper-extra .prg-related .promo {
				padding-top:5px;
				padding-bottom:5px;
			}
			#prg-wrapper-extra .prg-related .promo img {
				float:left;
		
				overflow:hidden;
				/*margin-right:9px;*/
				margin-right:10px;
				margin-bottom:2px;
			}
			
			#prg-wrapper-extra .prg-related p.disclaimer {
				margin:0 10px 10px 10px;
				padding-bottom:10px;
				font-family: verdana, helvetica, sans-serif;
				font-size:0.9em;
				line-height:1.2em;
			}

	
/* =MISCELLANEOUS - any elements not covered elsewhere in this sheet.
--------------------------------------------- */

	
	
/* =VISIONAPPS - settings for Vision apps (e.g. gallery, comments, etc.)
--------------------------------------------- */

	/* Comments */	
		/* 'prg-wrapper' adds specificity */
		
		.prg-wrapper #vision-comments-add #vision-comments-form textarea {
			width:430px;
		}
			
		body #vision-comments-add h2 {
			display: none;
		}

	
	/* Gallery */
		body .prg-wrapper #vision-gallery-view ul#vision-gallery-grid {
			padding-left:2px;
			overflow:hidden;
		}
		
		body #vision-gallery-view h2 {
			display: none;
		}			

		body .prg-wrapper #vision-gallery-view ul#vision-gallery-grid li {
			width:134px;
		}

		body .prg-wrapper #vision-gallery-view ul#vision-gallery-grid li p {
			width:auto;
		}
		
		body .prg-wrapper #vision-gallery-view ul#vision-gallery-grid li img {
			margin:0;
			padding:0;
		}
	
		body .prg-wrapper #vision-gallery-view ul#vision-gallery-grid li div {
			width:134px;
		}
		
	/* UGC */	
		body .prg-wrapper #vision-ugc-add {
			overflow:hidden;
		}
	
		body .prg-wrapper #vision-ugc-add h2 {
			display: none;
		}		


/* =DEPRECATE - remove, poss. replace with something better...
--------------------------------------------- */

	/* Kill off borders all sides. */
	/* Lose these - they are presentationally-biased - styling should be done via semantic context throughout. Not used in any builds. */
		.prg-wrapper .borders-off {
			/*border:none;*/
		}
		/* Kill off all spacing (padding and margins). */
		.prg-wrapper .spacing-off {
			/*margin:0;
			padding:0;*/
		}
		/* Kill off margins only. */
		.prg-wrapper .margins-off {
			/*margin:0;*/
		}
		/* Kill off padding only. */
		.prg-wrapper .padding-off {
			/*padding:0;*/
		}	
		
		/* This now applies to all 'Extra content' h2s in a p-mod */
		#prg-wrapper-extra .p-mod h2 {
			/*padding-left:0;*/
		}