/***************
   * Unstyle.
	* Set of rules to clean/standardise the default styles in browsers  
	* including classes given in the bbc page-layout templates.
   */

	/** remove margins, font-weighting element wide */
	body,ul,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input,dl,dt,dd,div
		{ margin:0px; padding:0px; font-weight: normal; }	
	
	/** give default body settings */
	body
		{ background-color: #ffffff; color: #000000; margin: 0px 0px 30px 0px; }
		
	/** remove all list bullets */
	ul,li,ol
		{ list-style: none; }

	/** remove linked image borders */	
	a img,a:link img,a:visited img
		{ border: none; }

	/** remove link styling */	
	a,a:link,a:hover,a:visited
		{ text-decoration: none; }

	/** add cursor for label - http://todo/ */	
	label
		{ cursor: pointer; cursor: hand; }
	
	/** standardise font sizes */
	h1,h2,h3,h4,p
		{ font-size: 1.0em; }	
		
	/** draw to attention 'bad' html is a rather ugly and obvious way, though limit to #grid-columns */
	.grid-columns font, .grid-columns b, .grid-columns i, .grid-columns center, .grid-columns s, .grid-columns u 
		{ display: block; border: 10px solid #ff0000; text-decoration: blink; }

	/** we never need to repeat a background, always anchor top left */
	body
		{ background-repeat: no-repeat; background-position: top left; }
	
 /** place holder stylings for page-layout templates */

	/** top left of page. date, accessibility etc. links */
	.bbcpageToplefttd, .bbcpageToplefttd a, .bbcpageToplefttd font
		{ /* */ }
	
	/** crumb after homepage link in left-hand navigation */
	.bbcpageCrumb a
		{ /* */ }
		
	/** services bottom left - contact us, send to friend etc. */
	a.bbcpageServices, .bbcpageServices font
		{ /* */ }

	/** services hr is picking up default hr styling of page, so remove */
	.bbcpageServices hr 
		{ visibility: hidden; }
	
	/** bottom of page. terms & conditions etc. */
	.bbcpageFooter, a.bbcpageFooter
		{ /* */ }

	/** initially hide the extra-div's */
	.extra-div
		{ display: none; }		
		
/***************
   * Seperator.
	* AKA horizontal or vertical rules, named from xhtml lingo.
	* usage: basic/default - <hr />
	* usage: patterned - <div class="seperator-pattern"><hr /></div>
	* usage: no semantics - <div class="hr"></div>
	* usage: patterned no semantics - <div class="seperator-pattern"></div>
   */

 /** default, hr styled purely through css */
 
   /** remove, then apply border along one side of box */
	hr, .hr
		{ border-width: 0px 0 0 0; border-top: 2px dotted #336699; }

   /** hide the seperator, and add right-hand padding */	
	hr, div.hr
		{ clear: both; display: block; }

	/** margins need truncating where used in first grid column */
	#grid-column-1 hr
		{ margin-right: 5;  }		
		
 /** patterned, where horizontal rule needs custom livery */		

	/** default sytles for patterned seperator, subsequent rules can just specify a bg-image */		
	div.seperator-pattern 
		{ 
		height: 10px;  /* give enough scope for variety of rule designs */
		background-image: url(/staticarchive/0015ca99a53a71f3d0418eb62ef34975abfbe0e6.gif); /* TODO. some default image */
		background-repeat: repeat-x;
		background-position-x: center;
		}
		
	/** where patterning hide the descendent hr */	
	div.seperator-pattern hr
		{ display: none; }
		
	
/***************
   * Icon.
	* Handles images adjacent to text. 
	* usage : block level icons - <p class="icon-[]"> txt <a href=""> lnk </a> txt </p>
	* usage : single icons - <a href="[]" class="icon-[]"> lnk </a>	
   */
	
	/** default for all icon types */
	.icon-video, icon-audio
		{
		display: block;
		background-position: left center;
		padding-left: 30px;		
		background-repeat: no-repeat;
		}

	/** each icon type is give it's own graphic */
	.icon-video
		{ /* reserved */ }
	
	.icon-audio
		{ /* reserved */ }
	
	/** where icons attached to clickable paragraphs 
		 this will give the users a visual clue when hovered, but you 
		 need to attach on onclick handler also */
	#grid-av .icon-video, #grid-av .icon-video:hover
		{ cursor: hand; cursor: pointer; }
				
		
/***************
   * Typography.
	* Rules governing the textual properties of the site. 
   */

	/* */
	*
		{ font-family: verdana, arial, sans-serif; }
	
	h1 
		{ 
		clear: both;
		font-size: 1.3em;
		border-bottom: 2px dotted #000;
		margin-bottom: 0.5em;
		padding-bottom: 0.5em;
		margin-right: 5px;
		}
		
	h2 
		{ position: relative; font-size: 0.9em; }
			
	h3 , h4
		{ font-size: 0.8em; }

	/** */
   #page-brand-article h2 
		{ margin-bottom: 0.5em; }
				
	p, #grid-column-0, .widget-page li, .widget-crumb li, div#grid-column-1 dl, #page-brand-home #grid-column-1-narrow li.nth-child-4 li, #grid-foot li, .box a.button, .box li, #gallery-toolbar li
		{ font-size: 0.78em; }	/* */

	/** fix instances of previous statement where nested elements will cause reduction inheritance of font size */
	#gallery-toolbar li li
		{ font-size: 1em; }
	
	/** the only text that should be small */
	.disclaimer
    { font-size: 0.65em; }
	 	
	/** as specified in the styleguide - 1st paragraph to be bold */
	#page-brand-article p.nth-child-1
		{ font-weight: bold; }
	
	h1, h2, h3, h4
		{ font-weight: bold; }	
		
	#page-brand-article #grid-column-1 p, #page-brand-article #grid-column-1-full p
		{ line-height: 1.5em; }	
	
	span.first-letter
		{ /* reserved */ }
	
	span.first-word
		{ /* reserved */ }
			
	.nth-child-1, .nth-child-2, .nth-child-3, .nth-child-last
		{ /* reserved */ }

   .nth-child-odd, .nth-child.even
	   { /* reserved */ }
			
	a, a:link, a:visited, a:hover
		{ font-weight: bold; }
	
	#grid-column-1 p, #grid-column-1-full p
		{ margin: 0.8em 0 0.8em 0; }
	

/***************
   * Grid.
	* definition of layout, the structural elements 
   */

	/** page-layout banner strip */		
	div#grid-banner
		{ position: relative; }	
	
	/** av box */
	div#grid-av
		{
		position: absolute;		
		top: 0px;
		padding: 5px;
		width: 12em;  /* em's so stretch is horizontal, not vertical. fixed px width cause text to wrap and the box to grow in height obscuring the content below */
		left: 420px;
		_height: 50px;  /* _ie, followed by min-height for moz, opera ... */
      height: auto;
		min-height: 50px;
		}
	
	/** links within the av box */	
	#grid-av a, #grid-av a:link
	   { display: block;	} 	/* TODO ?? */

			
   /** page-layout crumb wrapper */
	div#grid-crumb	/* crumb */	
		{ clear: both; }

	/** page footer */	
	div#grid-foot
		{ clear: both; margin: 0.5em 0 3em 10px; }  /* clear floated columns */			

	/** page heading level 1 */		
	h1#grid-head
		{ position: relative; } /* fix peekaboo IE */ 
	
	/** on homepage we need to hide the gutter, to save us writing 
	    a new .site file for this purpose we can just 'display:none' the table cell */
	#page-brand-home .bbcpageGutter
		{ display: none; }			
		
	/** wrapper around columns 1 & 2 in main body */
	.not-page-brand-home div.grid-columns 
		{ border-left: 5px solid #ffffff; padding: 5px 0 0 0; /* hide from mac ie5 \*/ _height: 105%; /** ie 5/5.5 chopping descendant columns */ }
				
	/** far left column, contained with the page-layout .graphic file */
	div#grid-column-0 /* left-hand navigation column */
	 	{ /* reserved */ } 
	
	/** float the main article so column-2 appears to the right */
	div#grid-column-1	 /* main article */
		{ float: left; width: 403px; }
						
	/** main article, where right-hand yields for wider pages
	    nb. doesn't need floating. needs 5px right margin. */
	div#grid-column-1-full 
		{ width: 100%; margin-right: 5; }
	
	/** main article for the brand homepage, slightly narrower than the rest of the site */
	div#grid-column-1-narrow 
		{ float: left;  }
		
	/** right-hand navigation column */	
	div#grid-column-2
		{ float: left; margin-left: 8px; width: 204px; }

 /** about box & more stuff boxes */
	
   /** clearing of margins */
	#grid-also, #grid-more
		{ clear: both; }

	/** */
	#grid-more h3, #grid-also h3
		{ padding: 0 0 0.1em 0.3em; margin-bottom: 0.3em; }
		
	/** */
	#grid-more li
		{ float: left; width: 190px; border-left: 1px solid #000; padding-left: 1em; }	
	
	/** */
	#grid-more li.nth-child-1
		{ border: none; padding-left: 0.3em; }
	
	/** */	
	#grid-also
		{ margin-top: 2em; position: relative; }

	/** limit the width of this box as grid-bbcpromo is sat beside it */
	#grid-also ul
		{ width: 370px; }
		
	/** by default turn bullets back on for this list */
	#grid-also li
		 { margin-left: 2em; list-style-type: disc; }

	#grid-also li
		 { margin-left: 2em; list-style-type: disc; }

	#grid-bbcpromo
	  	{ top: 1.5em; right: 0; position: absolute; }		 

/***************
   * Credits
	* contents makes a definition list look like a book appendix (or contents) page
	* which is useful for cast/crew credits etc. 
   */
	
	/**  */
	.contents
		{ margin-left: 10px; margin: 1em 0 1em 0; }

	/** float each of the terms so the dd wrap directly to the right */
	.contents dt
		{ float: left; }

	/** give a background image to both the term and definition.
		 the bg-image is a series of repeating dots - eg. ....... */	
	.contents dt, .contents dd
		{ 
		background-image: url(/staticarchive/c3e95fbc0867cb2bc178a10d84e0f241b87a7e1d.gif);
		background-position: left bottom;
		background-repeat: repeat-x;
		}
	
	/** optional. but in most cases we want the dd text to flush right */
	.contents dd
		{ margin-bottom: 0.2em; text-align: right; }
	
	/** where we applied a bg image above we need to set a 
		 background colour in the textual items to stop the dots showing through
		 for this reason non linked nodes needs <span> wrapping */
	.contents span, .contents a
		{ background-color: white;  }

	/** fixes ie bug, TODO - didn't document this when written need to rediscover */
	.contents a
		{ _position: relative; }
			
				
/***************
	* Widgets
	* functional parts of the screen 
	*/
		
  /** pagintaion widget - list containing next/back and center column of .. page 1 of 4 .. information */

   /** anchor wrapper element to the page flow */
	/* hide from mac ie 5 \*/
	.widget-page, .widget-page-info
		{ position: relative; }
	/* */
	
	/** default styling & height */
	.widget-page
		{
		margin: 10 0 10 0;
		border-top: 2px solid #000;
		border-bottom: 2px solid #000;
		_height: 17px; /*  */
		min-height: 17px;
		}
		
	/** center column aligned to center */
	.widget-page-info
		{
		text-align: center;
		padding: 0 80 0 80; /* stop absolute positioning overlaying next/back on top of page number info 80px = enough space for 'next' (i.e 4 characters) */ 		/* hide from mac ie 5 \*/
		_margin-top: -3px;
		z-index: 0;  /* safari needs this  */
		}
	
	/** next/back links shared style */
	.widget-page-back, .widget-page-next
		{ position: absolute; top: 0; z-index: 1; }
	
	/** make 'back' the left-most link */
	.widget-page-back
		{ left: 0; text-align: left; padding-left: 1px; }
	
	/** make 'next' the right-most link */
	.widget-page-next
		{ text-align: right; right: 0; padding-right: 1px; }
	/* */

 /** crumb widget - styles the crumb trail list at the top of most pages */
	
	/**  */
	ul.widget-crumb
		{
		height: 1em; /* neatens crumb bottom margins across browsers */
		padding: 3px 0 0 5px;
		margin: 0 5px 5px 0; /* 5px added to base to compensate heavy bgcolor */
		_height: 22px;
		min-height: 18px;
		}
	
	/** adds a icon seperating each item in the crumb trail */
	ul.widget-crumb li
		{
		background-image: url(/staticarchive/9650317f0d006718b2a2d9085078ea6133c0e66d.gif);
		background-position: left center;
		background-repeat: no-repeat;
		float: left;  /* vetical crumb */
		padding-right: 6;
		padding-left: 13px;
		margin: 0px;
		}
		
	/** disables background style for first node for crumb */
	ul.widget-crumb li.nth-child-1
		{ padding-left: 0px; background-image: none; }

	/** the last child in the crumb list is never a link, but it retains a bold styling */
	ul.widget-crumb .last-child
		{ font-weight: bold; }
		

/***************
	* Lists
	*/		
	
 /** left-hand navigation (ie. grid-column-0) */
	
	/** following styles all just cater for padding, margins */
	#grid-column-0 dl, #grid-column-0 ul
		{ margin: 10 0 10 0; padding-left: 8px; }
		
	#grid-column-0 .menu-brand
		{ padding-bottom: 3px; padding-top: 10px; margin-top: 0px;  }
		
	#grid-column-0 li, #grid-column-0 dt, #grid-column-0 dd
		{ margin-bottom: 3px; }
	
	#grid-column-0 dt
		{ margin-top: 8px; }
	
	#grid-column-0 dt.nth-child-1
		{ margin-top: 0px; }
		
 /** list style for brand homepage (ie. page-brand-home) */

   /** spacing top/bottom */
   ul.index-list
		{ margin: 0; padding: 10 0 10px 0; }
 
   /** spacing for individual list items */
   ul.index-list li
		{ padding-bottom: 10px; /* hide from mac ie5 \*/ position: relative; /* */ }

	/** index list have bottom border pattern, but not last child */
	#page-brand-index ul.index-list li
		{ border-bottom: 2px dotted #000; }
	#page-brand-index ul.index-list li.last-child
		{ border-bottom: none; }
				
	/** position promo images absolutely to the left */
   ul.index-list img
	  {
	  display: block; left: 0px; margin: 0;
	  /* hide from mac ie5 \*/ position: absolute; /* */ top: 4px; /* small offset. visually pleasing */
     }

	/** image spacing for all list items */	
	#page-brand-home #grid-column-1-narrow ul li,  
	 	{ /* hide from mac ie5 \*/ padding-left: 67px; /* */ }
		
	/** larger image spacing for first list item */	
	#page-brand-home #grid-column-1-narrow ul li.nth-child-1, ul.index-list li
		{ /* hide from mac ie5 \*/ padding-left: 130px; /* */ }
	
	/** add a gutter between left-nav and the promo list */
	#page-brand-home #grid-column-1-narrow ul
		{ padding-left: 10px; }

	/** fix the minimum height of the li item boxes.
	    firstly stops boxes overlapping when small amounts of text are placed.
		 secondly fixes an ie bug where above padding-left margins are ignored */
	#page-brand-home #grid-column-1-narrow ul li
		{ min-height: 50px; height: auto; _height: 50px; }

	#page-brand-home #grid-column-1-narrow ul li.nth-child-1, ul.index-list li
		{ min-height: 100px; height: auto; _height: 100px; }

   /** for page-brand-index, as h3 elements do not appear above images */
	#page-brand-index #grid-column-1-narrow ul li.nth-child-1, ul.index-list li
		{ min-height: 85px; height: auto; _height: 85px; }	
		
	/** */
	ul.index-list p
		{ margin-top: 0.4em; }
		
	#page-brand-home #grid-column-1-narrow ul img
		{ margin-top: 25px; /* max height according to the styleguide */ }
		
	/** */
	#page-brand-home #grid-column-1-narrow ul h3
		{ /* \*/ margin-left: -131px; _margin-left: -68px; /* */ }
				
	/** now override some of the above as first list item is always larger */
	#page-brand-home #grid-column-1-narrow li.nth-child-1 h3
		{ /* \*/ margin-left: -131px; /* */ }

	#page-brand-home #grid-column-1-narrow ul[class] p
		{ margin-left: -58px; width: 200px;  }
	#page-brand-home #grid-column-1-narrow ul[class] li.nth-child-1 p /** TODO */
		{ margin-left: 0; width: 160px; }
				
	/** optional angles on TOP of the homepage box */
	#page-brand-home #grid-column-1-narrow .container-angle-top, #page-brand-home #grid-column-0 .container-angle-top, #page-brand-home #grid-column-1-narrow .container-angle-bottom
		{ display: block; height: 30px; }

	/** the width of the list */
	#page-brand-home #grid-column-1-narrow .container-angle-top, #page-brand-home #grid-column-1-narrow .container-angle-bottom
		{ width: 310px; }

   #page-brand-home #grid-column-1-narrow .container-angle-bottom
		{ display: block; margin-bottom: 10px; clear: both; }

		
 /** rules for inline menu items (ie. no graphics / headings ).*/
 
	/** firstly the below rule removes the heavy styling above */
	#page-brand-home #grid-column-1-narrow li.nth-child-4, #page-brand-home #grid-column-1-narrow li.nth-child-4 h3, #page-brand-home #grid-column-1-narrow li.nth-child-4 li, #page-brand-home #grid-column-1-narrow li.nth-child-4 ul
		{ padding: 0; margin: 0; min-height: 1em; height: auto;  _height: 1em; }
	
	/** likewise, add back the standard line-heights we had to remove */
	#page-brand-home #grid-column-1-narrow li.nth-child-4 li
	   { line-height: 1.2em; }
		
/***************
	* Transparent Box
	*/		
		
	/** set the box to a plain colour */
	#page-brand-home #grid-column-1-narrow ul, #grid-column-0 .menu-brand
	  	{ background-color: white;  /* opera5, ie4, macie5 etc. */ }

	/** hard-wire a box width required by IE, otherwise png render fails. so value needs to be overridden if box is used elsewhere. */
	#page-brand-home #grid-column-1-narrow ul
	  { _width: 300px; }
	#grid-column-0 .menu-brand
	  { _width: 140px; }
	
	/* display the PNG */
	#page-brand-home #grid-column-1-narrow ul, #grid-column-0 .menu-brand
		{
		bac\kground-image: url('/staticarchive/e0cb9ea28a5bab7747c9c7126b788cecd9ea623c.png'); /* PNG24 support. ie4/5 op5 css backslash filter - http://centricle.com/ref/css/filters/tests/sbmh/ */
		_bac\kground-image: none;  /* negate bg-image on ie6 . http://www.daltonlp.com/daltonlp.cgi?item_id=217 */
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/staticarchive/e0cb9ea28a5bab7747c9c7126b788cecd9ea623c.png');
		}					

	/* hide from mac ie5 \*/
	#page-brand-home #grid-column-1-narrow ul, #grid-column-0 .menu-brand
		{ bac\kground-color: transparent; }
	/* */

	/** ensure we don't overlay png on nested lists */
	#page-brand-home #grid-column-1-narrow ul ul
		{ background-image: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/f/t.gif'); }
		
  /** */
  .menu-brand a
  		{ position: relative; }
  
 			
/***************
   * Boxes
	* Set of rules to clean/standardise the default styles in browsers  
	* including classes given in the bbc page-layout templates.
   */

	/** basic box applied to everything in the right-hand navigation */
	#grid-column-2 .box
		{ margin: 5px; padding: 10px; /* TODO - remove debug code - border: 1px solid red; background: blue; */ }

	#grid-column-2 .box p
		{ margin-bottom: 0.7em; }

	/** box to contain paragraphs */		
	#grid-column-2 .box-type-1
		{ /* reserved */ }

	/** box to contain links */
	#grid-column-2 .box-type-2
		{ /* reserved */ }

	#grid-column-2 .box-type-2 ul
		{ margin-bottom: 0.5em; }
		
	#grid-column-2 .box-type-2 li
		{ margin-bottom: 0.3em; }
				
	#grid-column-2 .box-type-2 a
		{ display: block; }

	#grid-column-2 .box-type-2 h4
		{ padding-bottom: 0.2em; padding-top: 0.3em; border-top: 2px dotted #000; }

	/** undo border for */
	#grid-column-2 .box-type-2 h4.nth-child-1
		{ border: none; }
				
	/** plain box - text aligned to the left */
	#grid-column-2 .box-type-1 h3, #grid-column-2 .box-type-2 h3
		{ border-bottom: 2px dotted #000; margin-bottom: 0.5em; padding-bottom: 0.5em; }
		
/***************
	* Misc.
	*/				
				
  /** add border to images within the column structure */
  .grid-columns a img, .grid-columns a:link img, .grid-columns a:visited img
    { border: 1px solid #000000; }		

  /** button code for link */ 		
  a.button, a:link button
  	 { 
	 display: block; 
	 margin: 5 0 0.8em 0;
	 padding: 0.2em;
	 padding-left: 30px;
	 background-position: center left;
	 background-repeat: no-repeat;
	 background-image: url("/staticarchive/767b58b092155411b43d2b5412b52c77ebe5e57c.gif");
	 _width: 100%; /* tells IE to make the icon graphic clickable */
	 }
	 
	 
/************
   * Gallery
	*/

 /** thumbnails box */
 
  /** increase size of header for thumbnail box to jump it below toolbar */
  #page-brand-gallery #grid-column-2 .box
	 { margin-top: 57px; padding: 10 0 10 7px; /* override the box padding */ }

  /** margins and borders for individual thumbnail images */
  #page-brand-gallery #grid-column-2 .box img
	 { margin: 0 3px 7 0; border: 2px solid #cccccc;	}