/*
	Filename         :	global.css
	Created by       :	Peter Hammans /Jaran Finn
	Last modified by :	BFI Webteam
	bfi mods by      :  Danny Birchall and Gareth de Walters & Jaran Finn
	Created          :	
	Last Updated     :	30 August 2006
	Comments         :	Provides generic information for any given template (menus, content areas etc).


bfi changelog:
07/03/2006
[Chaplin Resources related] 'mediumCaption', a new style added for images larger than 80px wide but 
smaller than 420px that require side by side display.

21/02/2006 
[Film & TV DB related] Sub-classed the usual ' #header a' selector so that there is a version of the 
rule to put in the bfi logo in the top left of the viewport with an absolute URL: ' #header a.ftvdb'

11/01/2006
The Chaplin website cannibalises the space on the rhs of the screen which is normally always occupied 
by the search & 'New On Site' boxes to display an image. That image shouldn't have a border hence the
new rule img.noborder

16/12/05
inserted theme stylings from theme.css
added bold to current link (removed)
added rules for #themetitle h3 a for link omitted in original prec design
removed explicit lack of upper right and lower margins for #content ul
#content ol rules added to match #content ul rules, with 1.7 em margin to match 1.3 em

20/12/05
renamed 'area' class to 'thincol' (class is for images to one side of a paragraph)-- more descriptive

4/01/05
line 707: increased size of main nav items border fom 1px to 1.2px
line 550: added primaryNav link to hover with underline like crumbtrail
line 836: added bolding for new class 'headlink': first link in primaryNav ul

6/01/05
- added class for branding of 'bfi' text.
- added phpErrorAlert div to layout, text and colouration sections

7/01/05
dpb - added class for helpblock for acrobat assistance etc.
gdw - added class for hidden elements to textual styling section

20/01/05
gdw - added class [#content .noblt] for presentation of lists with no bullets

25/01/05
gdw - added DIV for styling captioned images.

26/01/05
gdw - added two classes to style definition lists.

11/05/05
gsw - added 'smallprint' class.

14/07/05
added #header a  { text-decoration: none; } & span.invisible { visibility: hidden; }
to put text in link above background logo.gif, to satisfy WAI checkpoint 13.1 
& then make it invisible 

12/09/05 dpb
added div. class 'lhpartnerblock' to govern display of sponsor/partner logo in left hand nav column
*/

	/*
	 *********************************************************************************************************
	 * Structural wrapper, divs etc (without coloration or border information). Padding, margin, width etc.
	 *********************************************************************************************************	 
	 */	
	
	/* Styles for body */
	/* Notes: Page sits flush against browser window */
	body 
	{
		padding:0;
		margin:0;	
	}
	 
	/* Contains section title of page (for example "Sight & Sound") */
	/* Notes: Negative margin to reposition with respect to logo */
	#title {
		width:591px;
		margin:-47px 0 0 159px;
		padding:0;		
	}	
	
	/* Containing div for the top level navigation */
	#sections {
		width:100%;
		margin:0;
	}	
	
	
	/* Div used to position page details right with regards to breadcrumb */		
	.date {
		float:right;
		width:170px;
		padding-right:5px;	
	}		
	
	/* Key div used to clear some floats in specific places where some browsers have trouble */
	/* Notes: This should not be changed */
	div.clear {
		clear: both !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		font-size: 1px !important;
		height: 1px !important;
	}		

	/* Div used to position PHP error messages */
	/* Notes: Border rule for this div exists in colouration section */	
	div#phpErrorAlert {
		margin:0 0 1.3em 0;
		padding:4px;
		width:340px;
	}
	
	/* Div used to position help blocks */
	/* Notes: Border rule for this div exists in colouration section */	
	div.helpblock {
		margin:0;
		padding:4px;
	}

	div.helpblock img{
		border: 0;
	}	

	
	
	/*
	 *********************************************************************************************************
	 * Non-textual styles for ALL elements (except structural divs etc). Padding, margin, width etc.
	 *********************************************************************************************************	 
	 */			
	 
	/* No margin or padding to be on any form unless explicitly specified at another point */
	form {
		padding:0;
		margin:0;
	}
	
	/* No border to be on any fieldsets unless explicitly specified at another point */
	fieldset {
		border:none;
	}
	
	/* General width for table elements (should be contained in the content area) */
	table {
		width:418px;	
	}
	
	/* Default padding for table cells */
	td {
		padding:3px;	
	}	
	
	/* Default padding for table cells (should be contained in the content area) */
	h4, h5 { margin: 1em 0 0.3em 0; }
	
	/* Section title styles */		
	#title h1 {
		padding:12px 0 5px 0;
		margin:0 5px 0 5px;
		height:1.5em;
	}
	
	/* Unordered list styles for the top level navigation (sections) */
	#sections ul {
		list-style-type: none;		
		margin: 0;
		padding: 0;
	}

	/* Floats top level navigation list items left due to problems in some browsers with displaying inline */
	#sections li {
	 	float:left;
		margin:0;
	}
	
	/* Sets the top level navigation links to display block so that both vertical and horizontal padding can be used */
	#sections li a {		
		display:block;
	 	padding:.4em;
	}	
	
	* html #navigation>#sections {
		height:1.6em;	
	}
	
	* html #sections ul>li a {
		display:inline; /**MAC Hack**/
	}	

	* html #sections ul>li {		
		height:1.3em; /**MAC Hack**/	
	}	
	
	#content dl.bibliography dd {
		margin-top:0px;
		margin-left:0px;
	}
	
	/* Spaces promotional images */
	.promos img {
		border:none;
		margin-top:2px;
	}
	
	/*
	 *********************************************************************************************************
	 * Textual styling for ALL elements (including structural divs). Font family, font size, text align etc.
	 *********************************************************************************************************	 
	 */	
	 
	/* Font family for all elements contained on pages	 */
	* {
		font-family: Verdana, Arial, Helvetica, sans-serif;
	}
	
	/* Body font size settings */
	/* Notes: Uses text-align to center contained div (wrapper) */	
	body {
		font-size: 70%;		
		text-align: center;	
	}		

	/* Small font size for small print like T&Cs and data permissions */
	.smallprint {
		font-size:85%;
	}
		
	/* Standard font size for all headings */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-size:100%;	
	}
	
	
	/* Text decoration for all heading links (not underlined) */
	h1 a,
	h2 a,
	h3 a,
	h4 a,
	h5 a,
	h6 a {
		text-decoration:none;	
	}		
	
	h4{
		
		font-weight:normal;
	}	
	
	h3 {
		
		font-weight:bold;
	}		
	
	/* Fix for IE 5 where text becomes centered because text is aligned to center in body */
	#wrapper {
		text-align: left;
	}
	
	/* Align text to right to be flush with border of containing div */
	.date {
		text-align:right;		
	}	
	
	/* Text settings for top level navigation links (sections) */
	#sections li a {
		text-decoration: none;		
	 	font-size:11px;		
	}
	
	/* Textual styles of section titles (such as "Sight & Sound") */
	#title h1 {		
		font-size:200%;
		font-weight:bold;
	}
	
	/* In some cases where it is logical to have headings some differently formatted text is required in the string */
	.standard {
        font-weight:normal;
	}
	
	.date {
		font-size:92%;	
	}
	
	/* Div used to position PHP error messages */	
	div#phpErrorAlert .alertHeading {
		font-style: normal;
		font-size: medium;
		font-weight: bold;
		color: #f00;
		line-height: 1.4em;
	}
	
	div#phpErrorAlert .alertMessage {
		font-style: normal;
		line-height: 1.2em;
	}
	
	span.invisible {
		visibility: hidden;
	}
	
	.hide {
		display: none;
	}

	div.smlCaption { /* Standard DIV for captioned images. Accepts images 80px wide only. */	
		width:88px;
		padding:0 4px 0 0;
  		float: left;
  	}
	
	div.caption { /* Standard DIV for captioned images. Accepts 185x135px images only. */	
		width:193px;
		padding:0 4px 0 0;
  		float: left;
  	}
	
	div.mediumCaption { /* Standard DIV for captioned images. Accepts images 124px wide only. */	
		width:140px;
		padding:0 8px 0 0;
  		float: left;
	}
	
	div.lrgThumbsWrapper { /* Standard DIV for captioned images. Accepts images 200px wide only. */	
		width:590px;
		padding:0px 0px 12px 0px;
	}
	
	div.lrgThumbsWrapper  a { 
	  	text-decoration:none;
	}
	
	div.lrgCaption { /* Standard DIV for captioned images. Accepts images 420px wide only. */	
		width:420px;
		padding:0;
  	}

	div.smlCaption p, div.caption p, div.lrgCaption p {
		clear:left;		
   		text-align: left;
		font-size:85%;
   	}  

	div.lhpartnerblock {
		margin-top: 30px;
		font-size: 85%;
	}	
	
		#content ol {
		/* margin-left:1.7em; */
		margin-left:2em; /* GdW - margin incr for IE6 */
		padding:0;
	}

	#content li { /* GdW - added 10/02/05 */
		padding-bottom: .5em;
	}

	#content ul.noblt {
		list-style: none;
		margin-left: -1em;
		padding-left: 1em;
	}

	#content dl.em, dl.strong, dl.noident, dl.bibliography {
		margin: 0 0 15px 0;
		padding: 0;
	}
	
	#content dl.em dt {
		margin: 1em 0 0 0;
		padding: 0 0;
		font-style: italic;
	}

	#content dl.noident dt {
		margin: 1em 0 0 0;
		padding: 0 0;
	}

	#content dl.strong dt {
		margin: 1em 0 0 0;
		padding: 0 0;
		font-weight: bold;
	}
	
	#content dl.em dd, dl.strong dd, dl.noident dd {
		margin: .7em 0 0 0;
		padding: 0;
	}

	#content dl.bibliography dt {
		margin-bottom:0px; 
		margin-top: 1em;
	}
	

	
	/*
	 *********************************************************************************************************
	 * Coloration for ALL elements (including structural divs). Color, borders, background images etc.
	 *********************************************************************************************************	 
	 */	
	
	
	/* Style for horizontal rulers used in the content area to divide some particular sections */
	hr {
		border-bottom: 1px solid #DFDFDF; 
	    border-top: 0 solid #f0f0f0; 
	    border-left: 0 solid #f0f0f0; 
	    border-right: 0 solid #f0f0f0;
	}
	
	/* Border styles for the border surrounding images within the page */
	img {
		border:1px solid #CCCCCC;
	}

	img.noborder {
		border:none;
	}
	
	#mainContent div.extrawide div.lrgThumbsWrapper div p.thumbcaption	{
	  clear:both;
	  margin-left:6px;
	  margin-right:6px;
	  width:173px;
	  font-size:85%;
	}/* Note fully qualified '#mainContent div.extrawide' reqd to avoid selector*/
	 /* precedence clash on '<p>' tags as laid down by a CSS rule elsewhere*/
	

	div.lrgThumbsWrapper div.triColThumbLeft {
	  float:left;
	  width:200px;
	  padding-right:0px;
	}
	div.lrgThumbsWrapper div.triColThumbMid {
	  float:left; 
	  position:relative; 
	  left:0px; 
	  width:190px;
	  padding-right:0px; 
	}
	div.lrgThumbsWrapper div.triColThumbRight {
	  float:right; 
	  width:185px; 
	  border: 0px solid white;
	  padding:0px !important;
	  margin:0px;
    }  
		
	div.triColThumbRight img,  div.triColThumbMid img,  div.triColThumbLeft img {
	  padding: 0px !important;
	  margin: 0px !important;
	  margin-bottom: 10px !important;
	}
		  
	#content div.lrgThumbsWrapper div img.triColThumbs {
	    float:left;
		margin:0px 0px 10px 0px; border: none;
	}  /* Watch out for this it is stuffing up explorer */
	
/*    img.tricolthumbs { width:185px; margin: 0px; border: none; } */
	
	/* Creates the white borders to seperate top level links (sections) */
	#sections li {
		border-right:1.2px solid #FFFFFF; /*dpb mod: increased to 1.2px to stop it occasionally collapsing*/
		border-top:1px solid #FFFFFF;
		background-color:#FFFFFF;		
	}	
	
	/* Border styles of any images (such as "Sight & Sound" logo */
	#header a img,
	#header img {
		border:none;
	}	
	
	.date {
		color:#999999;	
	}

	/* Div used to position PHP error messages */
	div#phpErrorAlert {
		border:1px solid #f00;
	}
	
	/* Div used for help messages on pages, eg acrobat */
	div.helpblock {
		border:1px solid #aaa;
		margin: 10px 0 10px 0;
	}
	
	
/* Style for the link of the currently on/active page */	



	/* This is required for the div clear class as a workaround in only one scenario for a couple of browsers
		which have issues with the body background color and contained floating elements */ 
	div.cMenu {
		background-color:#FFFFFF !important;	
	}		
	/* End: Color stylings */
	
	/*
	*********************************************************************************************************
	* THEMES: Title styles for a template's theme image and heading (contained in primaryWrapper div) 
	*********************************************************************************************************	 
	*/
	
	#themeTitle {
		padding:5px;
		margin-top:.1em;
		margin-bottom:10px;
		background-color:#CCCCCC;			
	}	
	
	#themeTitle h3{		
		width:140px;
		padding:0;
		margin:0;
		font-size:130%;
		color:#FFFFFF;
		background-color:#CCCCCC;
	}	
	
	#themeTitle h3 a {		
		width:140px;
		padding:0;
		margin:0;
		color:#FFFFFF;
		font-size:100%;		
		background-color:#CCCCCC;
		text-transform: none;
	}	

	
	
	/* This is a work around using line-height for those browsers which were not evenly separating images */
	#themeImage {
		font-size:1px;
		line-height:100%;
	}
		
	
	/*

	 *********************************************************************************************************
	 * IE5/Win-specific box-model fixes
	 *********************************************************************************************************	 
	 */

	@media tty {
	i{content:"\";/*" "*/}} @import 'global-ie5win.css'; /*";}
	}/* */	
	

/*===========================================================================================================*/
	
	/*
	*********************************************************************************************************
	* STYLES MODIFIED BY THE GUILD
	*********************************************************************************************************	 
	*/
	
	/* General color for text and the background color of the body */
	body {
		color: #3d3d3d;	
		background: #585151 url(/images/global/layout/bg_content.gif) repeat-y center top;
	}
	
	#mainContent
	{
		width: 750px;
		float: left;
		margin-top: 185px;
		padding: 0 15px 0 15px;
	}
	
		/* Wrapper for the pages navigation containing links to specific child pages */
	/* Notes: Floated left relevant to the main content area (part of 3 column effect) */
	#primaryWrapper {
		float:left;
		width:151px;
		margin-bottom: 20px;
	}
	
	/* Wrapper for secondary navigation, search box, related links, promos etc */
	/* Notes: Floated right relevent to main content area (part of 3 column effect) */
	#secondaryWrapper
	{
		float: right;
		width: 151px;
		margin-bottom: 20px;
		margin-left:-15px;
	}
	
	/* Content wrapper containing the pages main content area, page title and page title images */


	/* Content area containing text, images, information etc relevent to the page */
	/* Notes: Floated left relevent to secondary wrapper (part of 3 column effect) */
	#content
	{
		float: left;
		width: 420px;
		/* background: #fff url(/images/db.jpg) center no-repeat fixed; color: black; */
		line-height: 15px;
		margin: 0 13px 20px 13px;
	}
	
	#mainContent div.extrawide {  /*First used in Chaplin resource thumbs gallery pages */
	  float:left;
	  width:576px;
	  margin-left:10px;
	  padding:0px;
	} /*Note to use this style a custom 'commonpage.inc.php' is reqd if doing PHP pages */
	
	#mainContent div.fullCanvas {  /*First used in Chaplin resource enlargement pages (i.e. no lh /rh navs) */
	  float:left;
	  width:720px;
	  margin-left:10px;
	  padding:0px;
	  margin-top:-36px;
	} /*Note to use this style a custom 'commonpage.inc.php' is reqd if doing PHP pages */

	/* Default text color of links wihtin the page */
	a
	{
		color: #6A7C96;
		font-weight: bold;
		text-decoration: none;
	}
	
	a:hover
	{
		text-decoration: underline;
	}
	
	/* Generic wrapper used to contain all other HTML elements in the document body */
	/* Notes: positions to center of page */	
	#wrapper {
		margin: 0 auto;
		width: 780px;
	}
	
	/* Set the width for the header wrapperm, contained row elements and the footer wrapper */	
	#footerWrapper 
	#headerWrapper,
	#header
	{	
		width:780px;
	}
	
	/* Set the width for the header wrapperm, contained row elements and the footer wrapper */	
	#headerWrapper
	{
		left: 50%;
		position: absolute;
		top: 0px;
	}
	
	#header
	{
/*		background: url(/images/global/layout/bg_logo_content_00.jpg) no-repeat #000; */
		background: #000;
		height: 131px;
		font-family: Arial, Helvetica, sans-serif;
		top: 0px;
		left: -390px;
		position: absolute;
	}

	#header_logo
	{
		top: 5px;
		left: 5px;
		width: 120px;
		height: 120px;
		position: absolute;
	}
		
	#header_logo a {
		display: block;
		text-decoration: none;	
		width: 120px;
		height: 120px;
	}

	#main_nav
	{
		width: 190px;
		height: 110px;
		left: 215px;
		position: absolute;
		top: 10px;
		padding: 0;
		margin: 0;
	}
	
	.ident ul
	{
		padding: 0;
		margin-left: 20px;
		margin-top: 0;
	}


	.ident li
	{
		list-style: url(/images/global/layout/main_nav_li_arrow.gif);
		color: white;
		font-family: Arial, Helvetica, Verdana, sans-serif;
		font-size: 16px;
		text-transform: uppercase;
	}
	
	.ident a
	{
		color: white;
		text-decoration: none;
		font-family: Arial, Helvetica, Verdana, sans-serif;
		font-weight: normal;
	}

	.ident a:hover
	{
		color: #b9ceec;
		text-decoration: none;
		font-family: Arial, Helvetica, Verdana, sans-serif;
	}
	
	#bfi_nav
	{
		width: 140px;
		height: 100px;
		top: 10px;
		left: 380px;
		position: absolute;
	}
	
	#bfi_nav ul
	{
		padding: 0;
		margin-left: 40px;
		margin-top: 0;
	}
	
	#bfi_nav li
	{
		list-style: none;
		line-height: 18px;
		color: white;
		font-family: Arial, Helvetica, Verdana, sans-serif;
		font-size: 12px;
		text-transform: lowercase;
		font-weight: bold;
	}
	
	#bfi_nav a
	{
		color: white;
		text-decoration: none;
		font-family: Arial, Helvetica, Verdana, sans-serif;
	}

	#bfi_nav a:hover
	{
		color: #b9ceec;
		text-decoration: none;
		font-family: Arial, Helvetica, Verdana, sans-serif;
	}
	
	#headerSearchbox
	{
		width: 160px;
		height: 40px;
		display: block;
		position: absolute;
		top: 10px;
		left: 530px;
	}
	
	#headerSearchbox p
	{
		font-weight: bold;
		font-family: Arial, Helvetica, Verdana, sans-serif;
		padding: 0;
		color: white;
	}	
	
			
	input.inputHeader
	{
		width: 146px;
		height: 14px;
		background: #e4e4e4 url(/images/global/layout/bg_search_text.gif);
		border: white 1px solid;
		padding: 2px;
		margin: 4px 0 4px 0;
	}
	
	#headerSearchbox a
	{
		color: #B7C6D9;
		font-family: Arial, Helvetica, Verdana, sans-serif;
	}
	
	#goHeader
	{
		position: absolute;
		top: 9px;
		left: 680px;
	}
	
	input.goHeader
	{
		width: 72px;
		height: 36px;
		background: transparent url(/images/global/layout/go_header.gif);
		border-width: 0px;
		margin: 10px;
	}
	
	input.goHeader:hover { background: url(/images/global/layout/go_header_hover.gif); }
		
	#header_tagline
	{
		position: absolute;
		top: 100px;
		left: 530px;
	}
	
	/* Wrapper for breadcrumb and page last modified details */
	#breadcrumbWrapper
	{
		width: 780px;
		min-height: 24px;
		padding-bottom: 10px;
		background-image: url(/images/global/layout/bg_crumbtrail_general.gif);
		border-top: 1px solid #888888;
		border-bottom: 1px solid #888888;
		top: 131px;
		position: absolute;
	}
	
	/* Link and general text settings for both the breadcrumb and primary navigation */	
	#primaryNav a,
		#breadcrumb a,
		#breadcrumb
	{
		font-size: 11px;
		text-decoration: none;
		font-weight: bold;
	}
	
	#breadcrumbWrapper a:hover,
	#primaryNav a:hover {
		text-decoration:underline;		
	}	
	
	/* Color or the links and text in the breadcrumb */		
	#breadcrumbWrapper,
	#breadcrumbWrapper a {
		color:#ffffff;		
	}
	

	/* Div used to position breadcrumb list left with regards to page details */
	#breadcrumb
	{
		/* width:500px; */
		width: auto;
		/* added GdW -20050224 */
		padding: 10px 10px 10px 10px;
	}

	/* Styles for unordered list containing breadcrumb links */
	#breadcrumb ul {
		list-style: none;
		margin:0;
		padding:0;
	}
	
	/* List items floated left to tile across page */
	#breadcrumb ul li, 	#breadcrumb ul li a
	{
		float: left;
		padding: 0 3px 0 0;
		font-size: 10px;
	}	


	#primaryNav a.current {
		color:#ffffff;
	}
	
	#breadcrumb a.current {
		color:#000000;
	}
	

	
	/* Sty;es for the primary nav div */
	#primaryNav
	{
		display: block;
		width: 129px;
		background-image: url(/images/global/layout/bg_navbar_genaral.gif);
		border-width: 1px 1px 0px 1px;
		border-style: solid;
		border-color: #888888;
		padding: 10px 10px 1px 10px;
	}
	
	/* Color of the links for a page's child page navigation unordered list */
	#primaryNav a {
		color:black;
	}
	
/* Style for the link of index page in the primary nav */	

	#primaryNav a.headlink {
		font-family: Arial, Helvetica, Verdana, sans-serif;
		font-size: 13px;
		color: white;
		font-weight: bold;
		margin: 12px 0 10px 0;		
	}
	
	#primaryNav a.headlnk:hover 
	{
		border-bottom: 1px #666 dashed;
		text-decoration: none;
	}
	
	#primaryNav a { font-size: 10px; }

	#primaryNav ul li
	{
		color: black;
		line-height: 15px;
		font-weight: bold;
		list-style: url(/images/global/layout/side_nav_li_arrow.gif);
		font-size: 10px;
	}
	
	#primaryNav li
	{ margin-bottom: 0.3em; margin-left: -3em; padding-left: 0;}
	
	#primaryNav h2, #primaryNav h2 a
	{
		font-family: Arial, Helvetica, Verdana, sans-serif;
		font-size: 18px;
		color: white;
		font-weight: normal;
		margin: 5px 0 10px 0;
	}
		
	#primaryNav h2 .black
	{
		color: black;
		font-family:  Arial, Helvetica, Verdana, sans-serif;
	}

	#primaryNav h3
	{
		font-family: Arial, Helvetica, Verdana, sans-serif;
		font-size: 14px;
		text-transform: lowercase;
		background-color: transparent;
		padding: 0;
		color: white;
		line-height: 16px;
		border-style: none;
		margin: 14px 0 -5px 0;
	}

	#primaryNav hr
	{
		height: 1px;
		border-style: none;
		background-color: #b3c1d5;
		color: #b3c1d5;
		margin: 0px -10px 5px -10px;
	}


	.primaryNav_bottom_corner
	{
		background-image: url(/images/global/layout/bg_nav_bottom_corner_general.gif);
		display: block;
		width: 151px;
		height: 19px;
		margin-bottom: 20px;
		overflow: default;
	}

	/* Colors for headings in all other divs in the secondary wrapper other than the search & ftvdbsearch box */
	.promos h3,
	.promos p,
	.stories h3,
	.stories p, 
	.relatedLinks h3, 
	.relatedLinks p
	{
		color: black;
		background-color: #899FBD;
		background-image: url(/images/global/layout/bg_secondary_box.gif);
		border: 1px solid #9db5ce;
		margin: 0 0 3px 0;
	}
	
	/* Borders for related links and stories navigation
	.stories,
	.relatedLinks {
		border:1px solid #888888;
	} */
	
	/* Second class to apply global styles to any boxes contained in the secondary wrapper
	.secondaryBox {
		margin-bottom: 1.0em;
	} */
	
	/* Styles for headings contained within all secondary wrapper divs */
	.secondaryBox h3, p
	{
		padding: 3px 5px 3px 5px;
		margin: 0;
	}	

	/* Styles for unordered lists contained within all secondary wrapper divs (related links, promos etc) */				
	.secondaryBox ul.links,
	.secondaryBox ul.images,
	.associatedBox ul.links,
	.associatedBox ul.images
	{
		list-style: url(/images/global/layout/side_nav_li_arrow.gif);
		line-height: 15px;
		margin: 0px 0px 0px 0px;
		background-color: #e4e4e4;
		border-color: #9DB5CE;
		border-width: 1px;
		border-style: solid solid none solid;
	}
	
	.secondaryBox ul.links, .associatedBox ul.links
	{
		padding: 0 10px 0 16px;
		font-size: 10px;
	}
	
	.secondaryBox ul.images, .associatedBox ul.images {
		padding:0;	
	}	
	
.secondaryBox ul.links li, .associatedBox ul.links li  {	
		margin-bottom: 3px;		
	}
	

	
	/* Used to correct for discrepencies between the spacing of images in lists in browsers */
	.secondaryBox ul.images li, .associatedBox ul.images li {
		font-size:1px;
		line-height:100%;
	}	
	
	/* Styles heading text in all secondary wrapper divs to be uppercase */
	.secondaryBox h3, .associatedBox h3
	{
		font-size: 100%;
		color: black;
		font-weight: bold;
		margin: 0 0 3px 5px;
		border-style: none;
	}			
	
	.secondaryBox p, .associatedBox p {
		font-size:100%;	
		font-weight:bold;		
	}	
	

	.relatedLinks_bottom_corner
	{
		background-image: url(/images/global/layout/bg_rellinks_bottom_corner.gif);
		display: block;
		width: 151px;
		height: 19px;
		margin: -3px 0 15px 0;
	}

	/* Where it is necessary to have uppercase letters the text for "bfi" must be styled lowercase. */ 
	/* dpb mod missing 'span' after h3 in Hammans' original
	.secondaryBox h3 span, 
	p span,
	li span {
		text-transform:lowercase;			
	}*/

	/* Background images are used here to create the effect of a bullet point with the non-standard hyphen
	.secondaryBox ul.links li  {	
		background-image: url(/images/global/layout/bg_list.gif);
		background-position: 0 .6em;
		background-repeat: no-repeat;
	}	 */
	
	#relatedWrapper
	{
		position: relative;
		top: 20px;
		left: 10px;
	}

	#associatedWrapper
	{
		position: relative;
		width: 151px;
		margin-top: 10px;
		left: -15px;
		float: right;
	}
	
	.sidebarFloater p
	{
		font-size: 10px;
		line-height: 15px;
		padding: 5px 0px 0px 0px;
		margin: 0 0 20px 0;
	}

	.sidebarFloater h3
	{
		font-weight: bold;
		font-size: 11px;
		border-style: none;
		padding: 0;
		margin: 0;
		color: black;
	}
	
	.sidebarFloater img
	{
		padding: 5px 0 0 0;
		float: left;
		border-style: none;
	}

	/* Right column text area */	
	/* Notes: Floated right of any images displayed on left of content area */ 
	#content .thincol {
		width:305px;	
		float:right;
	}	
	
	/* Wrapper for page title */
	#content #titleWrapper {
		margin-bottom:.5em;
	}
	
	/* Contains heading text for page title */
	#content #titleText {
		width:163px;
		height:179px;
		float:left;
	}			


	/* Floats large page title images left */
    #content #titleWrapper img {
		border:none;
		float:left;	
		margin-right:1px;
	}				
	
	#content #titleText p {
		padding:10px;
	}		

	/* Styles for a page specific title */
	#content h2
	{
		margin: 5px 0 10px 0;
	}	

	/* General styles for paragraphs contained in the content area */		
	#content p {
		padding:0;
		margin:0 0 1em 0;
	}

	/* General styles for images contained in the content area */		
	#content img
	{
		float: left;
		margin: 0 1em 1em 0;
	}

	/* Overiding styles for images contained in the area columns floated right of content images */		
    #content .thincol img {
		margin:0;
    }
		
	
	/* Styles the heading of a page */
	#content h2
	{
		font-weight: normal;
		font-size: 22px;
		line-height: 26px;
	}
	
	/* Used to affect the size of certain text within page headings */
	/*
	#content h2 span {
		font-size:70%;
		font-weight:bold;
	}
	*/
	
	/* Styles the text contained next to the large title image in some templates */
	#content #titleText {
		font-weight:bold;
	}		
	
	#content h5
	{
		font-size: 115%;
		font-weight: bold;
	}		
	
	/* Title text color and background of parent element (next to large title image) */
	#content #titleText {
		background-color:#A3A38E;
		color:#FFFFFF;
	}
	
	#content h2, h2 .bfi 
	{
		color: #999;
		font-family: Arial, Helvetica, Verdana, sans-serif;
	}	
	
	/* Defintion for content area filled headings */
	h3	{
		color: #999;
		margin: 0px 0px 10px 0px;
		border-bottom: 1px black solid;
		padding: 5px 0 5px 0;
		font-size: 14px;
		font-weight: bold;
	}

	h4	{
		color: #999;
		margin: 0px 0px 10px 0px;
		border-bottom: 1px black solid;
		padding: 5px 0 5px 0;
		font-size: 14px;
		font-weight: normal;
	}

	/* BFI-text branding */
	.bfi {
	text-transform: uppercase;
	}
	
	#bfi_nav .bfi
	{
		font-family: Arial, Helvetica, Verdana, sans-serif;
	}
	

	/* Styles for unordered lists contained within all secondary wrapper divs (related links, promos etc) */				
	.associatedBox,
	.associatedBox ul.links,
	.associatedBox ul.images
	{
		background: #b3c1d5;
	}
	
	.associatedLinks_bottom_corner
	{
		background-image: url(/images/global/layout/bg_assoclinks_bottom_corner.gif);
		display: block;
		width: 151px;
		height: 19px;
		position: relative;
		margin: -3px 0 15px 0;
	}

	/* Wrapper for page footer elements */
	#footerWrapper
	{
		border-top: 1px solid #9fb6cf;
		padding-top: 0.5em;
		margin: 10px -10px 0 -10px;
	}
	
	#footer {
		float:left;
		width:569px;
	}
	
	/* Styles for unordered list containing footer links */
	#footer ul
	{
		list-style: none;
		margin: 0;
		padding: 0 0 5px 10px;
	}
		
	/* List items floated left to tile across page */
	#footer ul li {
		display: inline;
	}
	
	/* Styles for footer links */
	#footer ul li a {
		padding: 0 0.7em 0 0.5em;
	}		
				
	/* Styles for footer unordered list */
	#footer ul {	
		line-height: 130%;	
		font-size: 9px;	
	}
	
	/* Styles for links in the footer div */	
	#footer ul li a
	{
		text-decoration: none;
		white-space: nowrap;
		font-weight: normal;
	}
	
	/* Underline footer heading links on hover */		
	#footer ul li a:hover {
		text-decoration: underline;
	}	
	
	/* Styles for footer links */
	#footer ul li a {
		color: #666666;	
		border-right:1px solid #666666;
		padding:0 0.7em 0 0.5em;			
	}	
	
	/* Overiding style for last list item */
	#footer ul li#lastItem a {
		border:none;
	}	
	
	/* Div used to position page details right with regards to breadcrumb */		

	.footerTagline
	{
		float: right;
		width: 191px;
		padding-right: 10px;
		background: url(/images/global/layout/tagline_footer.gif) no-repeat;
	}		
	
	input.associatedBox, input.secondaryBox, .text
	{
		background: #e4e4e4 url(/images/global/layout/bg_search_text.gif);
		border: white 1px solid;
		padding: 2px;
		margin: 3px 3px 3px 0;
	}
		
	input.associatedBox, input.secondaryBox, .text
	{
		width: 128px;
		height: 13px;
	}
	
	.associatedBox select
	{
		width: 128px;
	}
		

	
	input.goContent
	{
		width: 56px;
		height: 23px;
		background: transparent url(/images/global/layout/go_content.gif) no-repeat;
		border-width: 0px;
		margin: 3px 0 3px 80px;
		display: block;
	}
	
	input.goContent:hover { background: url(/images/global/layout/go_content_hover.gif) no-repeat; }
	
		/* Content row area */
	#content .full
	{
		width: 418px;
		padding: 0;
		margin-top: 5px 0 5px 0;
	}
	
	/* Styles for thumbnail images contained in shaded headings for both full column and 2 column layouts */
	#content .full h3 img,
	#content .halfWrapper h3 img
	{
		float: left;
		padding: 2px 8px 5px 0;
		background-color: white;
		border-style: none;
	}	
	
	/* Seperates the thumbnail image using margins from the boundary of its parent element (shaded heading - full column) */
	#content .full h3 img { margin: 2px 0px 7px 0px; }

	#content .full h3,
	#content .halfWrapper h3
	{
		color: #999;
		margin-bottom: 5px;
		border-bottom: 1px #999 solid;
		padding: 5px 0 5px 0;
		font-size: 14px;
		font-weight: bold;
	}

	#content .full h3 a,
	#content .halfWrapper h3 a { font-weight: bold; }
		
	/* Wrapper for 2 column text layout */
	/* Notes: Floated left relative to contained (floated) elements to fix some browsers issues */ 	
	#content .halfWrapper
	{
		float: left;
		padding: 0 1px 1px 1px;
		margin: 5px 0 5px 0;
		width: 418px;
	}	

	/* Left and right columns for the 2 column text layout */	
	#content .halfLeft,
	#content .halfRight {		
		width:205px;
	}
	
	/* Floated left relative to right hand text column */
	#content .halfLeft {
		float:left;		
	}

	/* Floated right relative to left hand text column */	
	#content .halfRight {
		float:right;
	}
	
	/* Repositions the thumbnails in the 2 column layout to be flush against left and top borders of parent element 
		(compensates for general h3 padding by using negative margins) */		
	#content .halfWrapper h3 img { margin: 2px 0px 7px -6px; }
	
	#content .halfWrapper h3
	{
		padding: 5px;
		margin: 0 8px 0 8px;
	}	
	
	/* Ensures 2 column layout paragraphs are indented and do not wrap around the thumbnail image (effectively column) */
	#content .halfWrapper p { padding: 5px 5px 5px 70px !important; }		
	
	/* Background image here is used as a workaround for the border for each column of the 2 column layout. 
		Conent length varies yet the box must be the same height so background image of borders is applied to
		the wrapper which will size based on the largest element. (left,right and bottom border) */
	#content .halfWrapper {
		background: #CCCCCC url(/images/global/layout/bg_areabox_border.gif) no-repeat left bottom;					
	}	
	
	/* Overide default border style for images */
	#content .halfWrapper img {
		border:none;
	}		
	
	/* Border here to complete the box for each column. Top border can be used here because the top of each 
		column cell (left and right) will always line up regardless of content length. */
	#content .halfLeft,
	#content .halfRight {
		border-top:1px solid #DFDFDF;
	}	
	
	blockquote
	{
		border-left: #b3c1d5 2px solid;
		padding-left: 10px;
		margin-left: 25px;
	}
	
	/*
	*********************************************************************************************************
	* STYLES ADDED BY THE GUILD
	*********************************************************************************************************	 
	*/

	/*
	*********************************************************************************************************
	* STYLES DEPRECATED BY THE GUILD
	*********************************************************************************************************	 
	*/

	/* Background colors required where floating in some browsers causes elements to move outside parent */
	/*  divs and bodies grey background appears */
/*	#wrapper,
	#headerWrapper,
	#mainContent,
	#sections ul,
	.secondaryBox ul.links,
	.secondaryBox ul.images   {
		background-color: #FFFFFF;		
	}	 */
	
	
	/* General styles for lists contained in the content area */
	#content ul {
		margin-left:1.3em;
		padding:0;
	}

	/*
	*********************************************************************************************************
	* FTVDB STYLES (SNIPPED OUT NAUGHTILY BY THE GUILD AND REINSTATED HERE)
	*********************************************************************************************************	 
	*/

	/* NO LONGER NEEEDED ???
    #content div.ftvdb h3 {
        padding-left: 0em;
    }
	*/
	/* Watch out make sure it doesn't clash when H3's are called upon in full and half stander boxes */
	
    #content div.ftvdb p.ftvdbdate {
        font-weight: bold;
        font-size: 112%;
    }
	
	#content div.ftvdb dl, #content div.ftvdb dt, #content div.ftvdb dd { 
        margin: 0;padding: 0;
    }	
    
     #content div.ftvdb .infosiblings ul,
	 #content div.ftvdb .infosiblings ol,
	 #content div.ftvdb dl { 
        margin-top: 0em; margin-bottom: 1em; padding: 0em; width: 37.25em; float: left;
    }
    
   #content div.ftvdb .infosiblings ul,  #content div.ftvdb .infosiblings ol {
        list-style-type: none; margin-left: 0em; padding-left: 0px;
    }
	
   #content div.ftvdb .infosiblings ul.bullet {
        list-style-type: disc;margin-left: 1.5em; margin-top: -0.25em;
    }

    #content div.ftvdb .infosiblings { clear: both; }
    
    #content div.ftvdb .infosiblings p  { font-weight:bold; margin-top: 0px; margin-bottom: 0.09em;} 
    #content div.ftvdb .infosiblings p.plain  { font-weight:normal;  margin-top: 0px; margin-bottom: 0px; }
	
	#content div.ftvdb .subheadedpara { 
	  margin: 1em 0px 1em 0px;
	}
	
	#content div.ftvdb .subheadedpara span { 
	  text-decoration: none;
	  display: block;
	  font-weight: bold; 
	  padding-bottom: 5px;
	  text-transform:none
	}
	  
    #content div.ftvdb .infosiblings dl  {
        margin: 0em 0em 1em 0em;
    	width: 37.25em;
	} 
	
    #content div.ftvdb dl.indent dt,
	#content div.ftvdb ul.indent li {
        padding-left: 0.50em;
	} 

    #content div.ftvdb .infosiblings li.rightcolumn {
	  position: relative;
	  left: 16.05em;
	  width: 19em;
	  top: -1.9em;
      margin-top: -0.25em;
      padding-left: 0.44em;
      border:1px solid #636563;
      border-width: 0px 0px 0px 1px;  

    }
	
    #content div.ftvdb .infosiblings dt {    
    	position: relative;
	    left: 0;
    	top: 1.1em;
    	width: 16em;
	    font-weight: bold;
    	margin-top: -0.6em;
    }

    #content div.ftvdb .infosiblings dt.wide {    
    	width: 20em;
    }
	
    #content div.ftvdb .infosiblings dd.narrow {
        margin: 0 0 0 20em;
    }
	
    #content div.ftvdb .infosiblings dd {
        margin: 0 0 0 19em;
        padding: 0 0 0 .5em;
    border:1px solid #636563;
    border-width: 0px 0px 0px 1px; 
    }

	/* Styles for search box form elements (contained within secondary wrapper) */
	/* 21/03/2006 Also obtains to the Film & TV Info DB's 'Search the DB' box so the
	/* majority of the styles of have been cannobolised. */
	.search fieldset, .ftvdbsearch fieldset {
		padding:.2em .5em .5em .5em;
	}
	
	.search input.text, .ftvdbsearch input.text {
		width:90px;
	}
	
	.search select.list, .ftvdbsearch select.list {
		width:90px;
	}
	
	.search input.submit, .ftvdbsearch input.submit {
		width:auto;
		padding:.1em;
	}		
	
	/* Form element text styles for the search div */
	.search input.submit, .ftvdbsearch input.submit {
		font-weight:bold;
		font-size:100%; 
	}
	
	 .ftvdbsearch a {
		display:block;
		letter-spacing: 0.01em;
		text-decoration:none;
		color: #FFFFFF; 
		padding-top:5px; 
		font-size: 1.02em; 
		margin-top: 10px; 
		border:0px solid #FFFFFF;
		border-top-width:1px
	 }		

	/* The pages for Film & TV DB Info on the Sigmer servers (outside of the bfi.org.uk domain) require absolute links */
    #header a.ftvdb  {
		background: url(http://www.bfi.org.uk/images/global/layout/bg_logo.gif) no-repeat 0px 8px;
	}	

	.ftvdbsearch input.submit {
		border: 1px solid #FFFFFF;
		background-color: #CCCCCC;
		color: #000000;
		margin-top: 7px;
	}
	
	.ftvdbsearch {
		background-color: #ACACAC;
		color: #FFFFFF;
		letter-spacing: 0.05em;
	}	
	
	/* NO LONGER NEEEDED ???
	#content div.ftvdb h2 {
		padding:0;		
		margin-bottom:0.35em;
	}
	*/