/* ----------------------------------------------------------
Site: All 'Programmes' sites
Filename: s-pagetype-content.css
URL:
Author: Robert Kerr
Version: 2008.05.09
Description: Layout and cosmetic 
Comments: This stylesheet provides styling ONLY SPECIFIC TO content-type pages.

Notes:

KEY: 
n1. Where pngs are used, the rule must be replicated in the sibling css file (s-ie-png.css) with the appropriate ie-specific filter.
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).
n4. Themes - ROWS: Borders on rows require reduction in LH padding on .p-mod element, otherwise, they will break the visual language and also float wrongly (last one will possibly wrap).
n5. Themes - PROMOS: Borders on promos require reduction in L and R padding (at least) on .promo element, otherwise, they will break the visual language and also float wrongly (last one will possibly wrap).
n6. Themes - any cosmetic styling is usually zeroed in these common sheets, and set in site-specific stylesheets - but occasionally there is a default setting here which can be overridden locally per site.

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 (p-grp, p-mod, prg-content, promo etc) 
	Rows, modules, promos and other re-useable elements
=COMMONLY RE-USED COMPONENTS & SMALLER ELEMENTS - intros, 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
--------------------------------------------- */

	/* Hide non-JS quiz from JS users and vice versa */
		.p-quiz-js { /* hide the JS quiz by default */
			display: none;
		}
		.js .p-quiz-no-js { /* if the namespace is JS, hide the non-JS quiz */
			display: none;
		}
		.js .p-quiz-js { /* Finally, show the JS quiz in the JS namespace */
			display: block;
		}


/* =CORE PAGE STRUCTURE ELEMENTS
--------------------------------------------- */
	.prg-content .prg-wrapper .p-grp {
			position: relative;
		}
			.prg-content .prg-wrapper .related-content .p-grp h2 {
				position: absolute;
				top: 0;
				left: 0;
			}

/* =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
	-- */
	
		/* all content page rows contain a heading and a single module.  That module needs padding
		as it contains basic html element descendants as well as grid containers */
			.prg-content .prg-wrapper .p-grp .p-mod {
				/*padding: 10px 0 10px;*/
			}
		
		/* Composite (rich) content */
		/* Parent container for basic promo */
			.prg-content .prg-wrapper .p-grp .p-mod-content { 
				overflow:hidden;
				float:right;
				width:446px;
				margin:0;	
				padding:10px 10px 10px 14px; /* Padding rather than margins, so we can have a background image in the p-mod, e.g. vertical separators. */
			}	



/* =COMMONLY RE-USED SMALLER COMPONENTS - EMP, Cast list, Images, Quiz, Vote, Quote boxes, etc
--------------------------------------------- */

	/*  
	Rich/composite content components 
	*/
	
		/* Introductory text */
			.prg-content .p-intro p {
				font-weight: bold;
				margin-bottom: 10px;
			}
	
			/* List (unordered) */
			.prg-content .p-list {
				margin: 10px 0 10px 20px;
			}
			.prg-content .p-list-ul {
			}
				.prg-content .p-list ul {
					list-style-type: disc;
					margin-left: 20px;
				}
	
		/* Detail list (e.g. crime details) */
			.prg-content .p-detail-list {
				margin: 10px 0;
			}
	
				.prg-content .p-detail-list-style-1 { /* n1 */
					padding: 10px; 
				}
	
				.prg-content .p-detail-list table {
				}
	
				.prg-content .p-detail-list-image {
					overflow: hidden;
				}
				.prg-content .p-detail-list-image img {
					float: right;
				}
	
				.prg-content .p-detail-list-style-1 table {
					width: 100%;
				}
	
				.prg-content .p-detail-list-style-2 table {
					width: 206px;
				}
	
				.prg-content .p-detail-list table tr { /* n1 */
					overflow: hidden;
				}
				.prg-content .p-detail-list table tr.last-row {
					border-bottom: 0px;
				}
				.prg-content .p-detail-list table tr.last-row td {
					padding-bottom: 0;
				}
	
				.prg-content .p-detail-list table td {
					padding: 5px 0 5px 10px;
					vertical-align: top;
				}
				.prg-content .p-detail-list table tr.first-row td {
					padding-top: 0;
				}
	
				.prg-content .p-detail-list table td.first-column {
					width: 40%;
					border-right: 1px solid #000;
					padding-left: 0;
				}
	
		/* Cast List, or other key / value pairings */
			.prg-content .p-keyvalue {
				margin: 10px 0;
			}
	
				.prg-content .p-keyvalue dl {
				}
	
				.prg-content .p-keyvalue dl dt { /* n1 */
					float: left;
					width: 240px;
				}
				.prg-content .p-keyvalue dl dt span.keyvalue-key {
	
				}
	
		/* Image components */
			.prg-content .p-image { /* n1 */
				margin: 10px 0;
				position: relative;
			}
		
			/* Image caption */
			.prg-content .p-image p.image-caption {
				font-size: 0.8em;
				line-height: 1.3em;
			}
			
				/* Image component layout options */
				.prg-content .p-image-layout-1 { /* Full width image with caption */
					margin-bottom: 5px;
					width: 446px;
				}
		
					.prg-content .p-image-layout-1 img {
						margin-bottom: 0px;
						display:block;
					}
		
					.prg-content .p-image-layout-1 p {
						margin:10px;
						position: relative;
						padding-bottom: 10px;
					}
		
					.prg-content .p-image-layout-1 p span.p-image-copyright {
						display: block;
						text-align: right;
					}
		
		
				.prg-content .p-image-layout-2 {  /* half-width container; image 206px wide; aligned right */
					width: 206px;
					float: left;
					clear: left;
					margin: 0 10px 10px 0;
				}
		
				.prg-content .p-image-layout-3 {  /* half-width container; image 206px wide; aligned left */
					width: 206px;
					float: right;
					clear: right;
					margin: 0 0 10px 10px;
				}
				
				* html .prg-content .p-image-layout-2,
				* html .prg-content .p-image-layout-3 {  /*  fix IE margin doubling */
					margin-bottom: 0px; 
				}
				
		
					.prg-content .p-image-layout-2 img,
					.prg-content .p-image-layout-3 img {
						display: block;
						margin: 0;
					}
		
					.prg-content .p-image-layout-2 p,
					.prg-content .p-image-layout-3 p {
						margin: 5px 10px 5px 10px;
						padding: 0;
					}
	
	
		/* Quiz component */
			.prg-content .p-quiz {
			}
		
			.prg-content .p-quiz .p-quiz-question { /* A single question block */
				margin: 10px 0;
				padding: 7px 10px 10px;
			}
		
			.prg-content .p-quiz .p-quiz-question p { /* The question text */
				margin: 0 0 10px;
			}
		
			.prg-content .p-quiz .p-quiz-question .p-quiz-option { /* A single option in the question responses */
				text-align: left;
				vertical-align: middle;
				margin-top: 10px;
			}
		
			.prg-content .p-quiz .p-quiz-question .p-quiz-option input[type="radio"] { /* A radio button option */
				position: relative;
				top: 0.25em;
				margin: 0 5px 0 0;
			}
		
			.prg-content .p-quiz .p-quiz-buttons { /* Container for the Submission and Reset buttons */
				text-align: right;
				margin: 10px 0;
			}
		
			.prg-content .p-quiz .p-quiz-buttons .p-quiz-button {  /* The quiz buttons */
				margin-left: 5px;
			}
		
			.prg-content .p-quiz .p-quiz-buttons .p-quiz-button-submit {  /* The submit button */
			}
		
			.prg-content .p-quiz .p-quiz-buttons .p-quiz-button-reset {  /* The reset button */
			}
	
	
		/* Navigation dropdown component */
			.prg-content .p-dropnav {
				margin: 10px 0;
			}
		
				.prg-content .p-dropnav label {
					font-weight: bold;
				}
		
				.prg-content .p-dropnav select {
					width: 314px;
				}
	
	
		/* EMP component */
			.prg-content .p-emp {
				margin: 10px 0;
			}
			.prg-content .p-emp-with-carousel {
				margin: 10px 0 0;
			}
			
			
			/* EMP embed component */
			.prg-content .p-embed {
				margin: 10px 0;
			}
		
			.prg-content .p-embed label {
				font-weight: bold;
				margin-right: 10px;
			}
		
		
			/* EMP carousel component */
			.prg-content .p-emp-carousel {
				margin-bottom: 0;
			}
		
			.prg-content .p-emp-carousel ul {
				width: 446px;
			}
		
			.prg-content .p-emp-carousel ul li {
				width: 126px;
				float: left;
				margin: 8px 4px 8px 6px;
			}
		
			.prg-content .p-emp-carousel ul li img {
		
			}
		
			.prg-content .p-emp-carousel ul li h3 {
				margin-bottom: 0;
			}
		
			.prg-content .p-emp-carousel ul li p {
				margin-top: 0;
			}
		
		
		/* 3rd Party content component */
			.prg-content p-third-party {
				margin: 10px 0 0;
			}
		
		
		/* News item component */
			.prg-content .p-newsitem {
				margin: 0 0 10px;
				overflow: hidden;
			}
		
			.prg-content .p-newsitem img {
				float: left;
				margin: 0 10px 0 0;
			}
		
			.prg-content .p-newsitem h3 {
				margin: 0;
			}
		
			.prg-content .p-newsitem p {
				margin: 2px 0 0;
			}
		
		
		/* Webform component */
			.prg-content .p-form {
				margin: 10px 0;
			}
		
			.prg-content .p-form-text,
			.prg-content .p-form-textarea,
			.prg-content .p-form-radiogroup,
			.prg-content .p-form-checkgroup {
				margin: 5px 0;
			}
			.prg-content .p-form-text,
			.prg-content .p-form-textarea {
				overflow:hidden;
				position: relative;
			}
		
			.prg-content .p-form-text input {
				width: 230px;
				float:right;
			}
		
			.prg-content .p-form-text label {
				width:200px;
				font-weight: bold;
				text-align: left;
				float: left;
			}
			.prg-content .p-form-text label:after {
			    content:"."; 
			    display:block; 
			    height:0;
			    clear:both; 
			    visibility:hidden;
			}
				/* Hides from IE-mac \*/
				* html .prg-content .p-form-text label:after {
					height:1%;
				} 
				.prg-content .p-form-textarea textarea {
					width: 230px;
					float:right;
				}
		
			.prg-content .p-form-textarea label {
				width:200px;
				font-weight: bold;
				float: left;
			}
			.prg-content .p-form-textarea label:after {
			    content:"."; 
			    display:block; 
			    height:0;
			    clear:both; 
			    visibility:hidden;
			}
				/* Hides from IE-mac \*/
				* html .prg-content .p-form-textarea label:after {
					height:1%;
				} 
		
			.prg-content .p-form-radiogroup,
			.prg-content .p-form-checkgroup {
				padding: 5px;
			}
		
			.prg-content .p-form-radiogroup p,
			.prg-content .p-form-checkgroup p {
				font-weight: bold;
			}
		
			.prg-content .p-form-radiogroup .radio-option,
			.prg-content .p-form-checkgroup .check-option {
				padding: 5px 5px 5px;
				vertical-align: middle;
			}
		
			.prg-content .p-form-radiogroup .radio-option input {
				position: relative;
				top: 0.2em;
			}
		
			.prg-content .p-form-radiogroup .radio-option input,
			.prg-content .p-form-checkgroup .check-option input {
				margin-right: 5px;
			}
		
			.prg-content .p-form-radiogroup .radio-option label,
			.prg-content .p-form-checkgroup .check-option label {
				font-weight: bold;
			}
		
			.prg-content .p-form-buttons {
				margin: 10px 0;
				text-align: right;
			}
		
			.prg-content .p-form-buttons input {
				margin-left: 5px;
			}
		
			.prg-content .p-form-buttons .p-form-button {
			}
		
			.prg-content .p-form-buttons .p-form-button .p-form-button-submit {
			}
		
			.prg-content .p-form-buttons .p-form-button .p-form-button-reset {
			}

		/* Callout box */
			.prg-content .p-callout {
				margin: 10px 0;
				background-color: #000;
				color: #FFF;
				overflow: hidden;
			}
			.prg-content .p-callout-layout-1 {
				clear: both;
			}
			.prg-content .p-callout-layout-2 {
				float: left;
				clear: left;
				width: 206px;
				margin: 0 10px 10px 0;
			}	
			.prg-content .p-callout-layout-3 {
				float: right;
				clear: right;
				width: 206px;
				margin: 0 0 10px 10px;
			}
			.prg-content .p-callout img {
				float: left;
				margin: 10px;
			}
			.prg-content .p-callout p {
				margin: 10px 10px;
				color: #FFF;
			}
			.prg-content .p-callout p a:link,
			.prg-content .p-callout p a:visited,
			.prg-content .p-callout p a:active {
				color: #FFF;
			}
		
		
	
		/* wallpaper gallery */
			.prg-content .wallpaper-gallery li {
				float:left;
				padding-right:20px;
				margin-bottom:10px;
				width:126px;
			}
		
			.prg-content .wpLightbox {
				overflow:hidden;
			}
		
			.prg-content .p-comments {
				overflow:hidden;
			}
		
			.prg-content .glow-panel .glow-panel-hd {
				margin:0 10px;
				padding: 5px 0;
				border-bottom: 1px dotted #b0b0b0;
			}
		
			.prg-content .glow-panel #glow-panel-hd-bottom {
				border-top: 1px dotted #b0b0b0;
				padding: 10px 0 0;
				font-weight: bold;
				clear:both; font-size:1.1em;
			}
		
			.prg-content .glow-panel #glow-panel-hd-bottom h4 {
				margin:0 0 10px;
			}
		
			.prg-content .glow-panel #glow-panel-hd-bottom a,
			.prg-content .glow-panel #glow-panel-hd-bottom a:hover,
			.prg-content .glow-panel #glow-panel-hd-bottom a:link,
			.prg-content .glow-panel #glow-panel-hd-bottom a:visited {
				color:#FFFFFF;
				text-decoration:none;
				margin-right:11px;
			}
		
			.prg-content .glow-panel .wp-large {
				padding:0;
				padding-left:26px;
				margin:0;
			}
		
			.prg-content .wp-image {
				margin:15px 15px 15px 0;
				float:left;
			}
		
			.prg-content .wp-description {
				float:left;
				width:195px;
				margin:13px 5px 15px 0;
			}
			
			.prg-content .wp-description h3 {
				margin-top:0;
				font-size:1.3em;
			}
		
			.prg-content .wp-description p {
				font-size:1.3em;
				line-height:1.2em;
			}
	
	
		/* Video Gallery */
			.prg-content .prg-wrapper .p-grp .p-mod-content-videogallery {
				padding-right:0px;
				padding-left:0px;
				padding-top:0px;
				width:456px;
			}
		
			.prg-content .prg-wrapper .p-grp .p-mod-content-videogallery .p-video {
				width: 126px;
				float:left;
			}
		
			.prg-content .prg-wrapper .p-grp .p-mod-content-videogallery .p-video .promo {
				padding:10px 0;
			}
			.prg-content .prg-wrapper .p-grp .p-mod-content-videogallery .p-video .promo img {
				margin-right:0;
			}
			
			.prg-content .prg-wrapper .p-grp .p-mod-content-videogallery .p-video-left {
				margin-right:25px;
			}
			.prg-content .prg-wrapper .p-grp .p-mod-content-videogallery .p-video-center {
				margin:0 10px;
			}
			.prg-content .prg-wrapper .p-grp .p-mod-content-videogallery .p-video-right {
				margin-left:25px;
			}


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


	
/* =DEPRECATED */