/* ----------------------------------------------------------
Site: All 'Programmes' sites
Filename: s-pagetype-index.css
URL:
Author: Luca De Angeli
Version: 2008.05.11
Description: Layout and cosmetic 
Comments: This stylesheet provides models for index-type pages.

Notes:

KEY: 
n1. [Cosmetic styling in this rule - theme statements delivered per site rather than from common css]
n2. ....etc...

Index:
=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.
=CORE PAGE STRUCTURE ELEMENTS
	Basic page framework - main content area containers, etc;
=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) ---
	* --- CONTEXT: 'EXTRA' CONTENT AREA ( = RH Content) AREA) ---
=VISIONAPPS 
	comments, galleries, uploader etc	
=DEPRECATE - 
	Anything to be replaced/revised/removed
	
---------------------------------------------------------- */


/* =JS NAMESPACE
--------------------------------------------- */



/* =CORE PAGE STRUCTURE ELEMENTS
--------------------------------------------- */

	/* Wide page variant (no '#prg-wrapper-extra' container ) */
		.prg-index-b #prg-wrapper-featured {
			width:946px;
		}

	/* box with a background-color/image, h1 and two modules */
		.prg-index .prg-wrapper .prg-featured-lead-bg h2 {
			padding:0 10px;
		}
		
		#prg-wrapper-featured .prg-featured-lead-bg {
			position: relative;
			overflow: hidden;
			height:470px;
			margin-bottom: 10px;
		}
		.prg-index .prg-wrapper .prg-featured-lead .p-grp-aa .p-mod {
			float:left;
			/*margin-left:34px;*/
			width:306px;
		}
		.prg-index #prg-wrapper-shell .p-grp-aa .nth-child-1 {
			float:left;
		}


/* =STANDALONE ELEMENTS (OUTSIDE LH and RH AREAS)
--------------------------------------------- */




/* 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)
		Supplementary classes extending basic .p-grp, .p-mod and .promo selectors.
		Note: Higher specificity than the standard class, to extend/override basic selector rules correctly.
	-- */
		
		/* Single p-mod (horizontal index only) */
		.prg-index-b .p-grp-a .p-mod {
			width:946px;
			margin-left:0;
			padding-left:0;
			border-left-width:0;
		}
	
		/* Single p-mod that takes the room of two mods in a 3-mod row */
			.prg-index-b .p-grp-aaa .p-mod-2a {
				width:626px;
			}	
			.prg-index-b .p-grp-aaa .p-mod-2a p {
				padding-left: 10px;
			}
			.prg-index-b .p-grp-aaa .p-mod-2a .prg-carousel-content p {
				padding-left: 0;
			}	
		
		
	
	

/* =COMMONLY RE-USED SMALLER COMPONENTS - quote boxes, etc
--------------------------------------------- */
	
	/* promoDetails  */
		.prg-index .prg-wrapper .p-grp-a .promoDetails img.image {
			margin-right:10px;
		}
			* html .prg-index .prg-wrapper .p-grp-a .promoDetails .listCopy {
				margin-left:10px;
			}

	/* Vote */
		.prg-index .vote-option {
			margin-top: 7px;
		}
		
		.prg-index .vote-option input[type="radio"] {
			margin-right: 5px;
			position: relative;
			top: 0.25em;
		}
		



/* =SPECIFIC CONTEXTS AND USAGES
--------------------------------------------- */
	
	/* --
	CONTEXT: 'FEATURED CONTENT' AREA ( = 'Main' content area)
	-- */
	
	
	/* --
	CONTEXT: 'EXTRA CONTENT' AREA ( = RH content area)
	-- */


	
/* =DEPRECATED
--------------------------------------------- */
	/* box with a background-color/image, h1 and two modules */
		/* Should be 'featured' */
		.prg-index .prg-wrapper .prg-feature-lead {
			/*padding:10px;*/
		}
		
		.prg-index .prg-wrapper .prg-feature-lead .p-grp-aa .p-mod {
			/*float:right;
			width:280px;*/
		}
		
		
		/* Smaller Carousel inside the content area */
			/*.prg-index .prg-wrapper .prg-carousel-content {
				padding:5px 0 5px 6px;
			}*/
		
		/* Stuff the Glow carousel needs */  
			/*.prg-index .prg-carousel ul.visionAppsCarousel {
				width:756px;
				height:70px;
				overflow:hidden;
				position:relative;
			}*/
			
			/*.prg-index .prg-carousel-content ul.visionAppsCarousel {
				width:504px;
				height:110px;
				overflow:hidden;
				position:relative;
			} */
		
		/* Carousel (3 cols)
		- - - override, to be merged into core - - -  */
			/*.prg-index .prg-carousel {
				padding:0 0 0 40px;
			}*/
		
			/*.prg-index .prg-carousel ul.carousel-strip li {
				padding-left:0px;
			}*/
		/*- - - end override - - -  */