/*********
	* Mitchell and Webb - k sommers, 2006-09 - updated 2008
	*/			
	
/********
   * Positioning
	*/

	/** you might need to finnese the banner in to position using padding & margins */
	#grid-banner
		{
		/** first value is top margin, second right, third bottom, forth left */
		margin: 10px 0 19px 10px;  
		} 
			#grid-banner-article
			{
		/** first value is top margin, second right, third bottom, forth left */
		margin: 15px 0 19px 10px;  
		} 
		
		#page-brand-article
	
	/********
	* Font
	*/
	#grid-column-1 .nth-child-1
	{ color: #000000; }
			
/********
   * Colour Scheme
	*/

	/** page background colour */		
	body
	 	{ background-color: #333366; }

	/** paint the canvas of the brand article body, these two properties should be the same value */
	.not-page-brand-home div.grid-columns
	 { background-color: #ffffff; border-color: #ffffff; }
	 
	  /** heading colour in the main body areas of the page */			
	#grid-columns h3, #grid-column-1 .li h3 
	 	{ color: #000000; }
			
   /** link colour in the main body areas of the page */			
	#grid-columns a, #grid-columns a:link, #grid-columns a:visited
	 	{ color: #000000; }	
	
	#grid-column-1 a
	 	{ color: #000000; }
		
	div#grid-columns #grid-column-1 p a, #grid-columns #grid-column-1 p a:link, #grid-columns #grid-column-1 a:visited, #grid-columns #grid-column-1 a:hover
	 	{ color: #000000; }

	/** left-hand navigation link colour */
	#grid-column-0 .menu-brand dt, #grid-column-0 .menu-brand dd, #grid-column-0 .menu-brand dd a, grid-column-0 .menu-brand dd a:link
		{ color: #C6C4B2; }
		
	/** left-hand navigation link 'hover' colour */		
	#grid-column-0 .menu-brand dd a:hover
		{ color: #ffffff; }
	 
	/** colour of the audio/video box text */
	#grid-av
		{ color: #ffffff; background-color: #CCCC99; }

	/** colour of the audio/video box link */
	#grid-av a, #grid-av a:link
		{ color: #ffffff; }
		
		/**  font color of article body headers */
	.grid-columns h2, #grid-head h1
		{ color: #000000; }

   /** background-colour of the boxes in the right-hand column */
	.box
		{ background-color: #CCCCFF; font-size: 0.9em; }
	
	.box a
		{ color: #000000; }

	/** colour of external link disclaimer */	
	.box .disclaimer
		{ color: #000000; }

	/** color of the 'buttons' in the right hand column */
	#grid-column-2 .box a.button
		{ background-color: #000000; color: #ffffff; }
		
		/** url to icon in button used as the item divider - make these images 8px by 9px */
	#grid-column-2 .box a.button
		{ background-image: url(/staticarchive/43a39f703b4745d79255de162a27b518598451e6.gif); }
		
		/** font color of headings in right hand column */
			#grid-column-2 .box-type-2 h4
		{ color: #000000; font-size: 0.9em; }
		
	#grid-column-2 .box-type-2 h5
		{ color: #000000; font-weight: bold; font-size: 0.9em; }
		
	#grid-column-2 .box-type-2 h6
		{ color: #000000; font-weight: bold; font-size: 0.9em; }	
		
				
	/** colour of the horizontal rules across the site */				
	hr, .hr, h1, #page-brand-index ul.index-list li, .widget-page, #grid-column-2 .box-type-2 h4, #grid-column-2 .box-type-1 , #grid-column-2 .box-type-2 h3
	 	{ border-color: #000000; }
		
	/** colour of the horizontal rules across the site */				
	 #grid-column-2 .box-type-1 h3, #grid-column-2 .box-type-2 h3
	 	{ 
		border-bottom: 1px solid #ffffff; 
		}
	
	#grid-column-2 .box-type-2 h4
	 	{ 
		border-top: 1px solid #ffffff; 
		}	
		
	#grid-column-2 .box-type-2 h6
	 	{ 
		border-top: 1px solid #ffffff; 
		}	

	/** color of the crumb trail background */		
	ul.widget-crumb
		{ background-color: #000000; }
		
	/** crumb trail link colours */	
	ul.widget-crumb a, ul.widget-crumb a:link, ul.widget-crumb a:visited
		{ color: #ffffff; font-weight: normal;}
	
	ul.widget-crumb .last-child
		{ color: #ffffff; font-weight: bold; }

	/** link colours of the left-hand navigation */
	#grid-column-0, #grid-column-0 a, #grid-column-0 a:link
		{ color: #ffffff; }
	
	/** link colour of crumb 'BBC Homepage' link */
	.bbcpageCrumb a
		{ color: #ffffff; }

	/** text colour of the 'Like this page?' */
	.bbcpageServices font
		{ color: #dddddd; }

   /** link colours of the top left and bottom left service links */
	a.bbcpageServices, .bbcpageToplefttd, .bbcpageToplefttd a, .bbcpageToplefttd font
		{ color: #ffffff; }
	
	/** link colours of the footer */
	.bbcpageFooter, a.bbcpageFooter
		{ color: #ffffff; }
		
		
	/** background & font color more strip on home page */
	#grid-more h3
		{ background-color: #000000; color: #ffffff; }

	/** color of the horizontal dividers between the more boxes */
	#grid-more li
		{ border-color: #eee; }
		
	/** links beneath the 'more' box */
	#grid-more a, #grid-more a:link, #grid-more a:visited
		{ color: #ffffff; } 
	
	/** color of the horizontal dividers between the more boxes */
	#grid-more li
		{ border-color: #eee; }
		
	/** links beneath the 'more' box */
	#grid-more a, #grid-more a:link, #grid-more a:visited
		{ color: #ffffff; } 
	
	/** background & font color more strip on home page */
	#grid-also h3
		{ background-color: none; color: #ffffff;  }

	/** colour of the bullets in the more section */
	#grid-also ul
		{ color: #ffffff; }

	/** colours of the links beneath the also box */
	#grid-also a, #grid-also a:link, #grid-also a:visited
		{ color: #ffffff; }		
		
	/** the toolbar colour of the gallery next/back bar */
	#gallery-toolbar
		{ background-color: #ffffff; }

	/** the toolbar colour of the slideshow functions */		
	#slideshow-toolbar
		{ background-color: #ffffff; }
		
/********
   * Icons and Images
	*/
	
	/** url for video icon graphic */
	.icon-video
	 { background-image: url("/staticarchive/80d68b99593cfff06d0bebb22ea8fd306afb79d2.gif");}

	/** url to icon used as the item divider - make these images 8px by 9px */
	ul.widget-crumb li
		{ background-image: url(/staticarchive/75a58878fdda6f7fe5f979ffa63d4b7896425615.gif); }
		

	/** background for a article/indexes.
		 set this to 'background-color: #000000;' (no quotes) 
		 where no sub-page is given */
	body
		{ background-image: url("/staticarchive/00b2c80cdc9782dc0140ad43f63868a592d4b34e.jpg"); }
			
	/** homepage background images */
	body#page-brand-home
		{ background-image: url("/staticarchive/85f39e30a6daa384ebc557bbcf21573d62662c9e.jpg"); }


/********
   * Brand Angled Boxes
	*/
	
	/** path to homepage box top ...
		 the path needs entering in both the statements below
		 - filter & background-image */
	#page-brand-home #grid-column-1-narrow .container-angle-top
		{
		bac\kground-image: none; /* url('/comedy/css/1/screen/vanilla/assets/cleese-70pc-1D1210png');
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/comedy/thatmitchellandwebbsite/images/brand/home_box_top.png'); */		
		}
		
	/** ... likewise the equivalent box in the left-hand navigation */
	.container-angle-top { /* resevered bug fix to ensure next rule works in firefox */ }
	#page-brand-home #grid-column-0 .container-angle-top
		{ 
		bac\kground-image: none; /* url(''/staticarchive/1b52d5d9263525b2e56b2a76386b022032fa37cb.png');
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/comedy/thatmitchellandwebbsite/images/brand/home_box_nav_top.png'); */
		}		

	/** ... and for the bottom of the box ... */
	#page-brand-home #grid-column-1-narrow .container-angle-bottom
		{ 
		bac\kground-image: none; /* url('/staticarchive/1b52d5d9263525b2e56b2a76386b022032fa37cb.png);
		_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='/comedy/thatmitchellandwebbsite/images/brand/home_box_bottom.png'); */
		}
		
	/** then you need to visually cue the box by increasing, decreasing 
		 the following two values, firstly the main column, secondly the left-navigation */
	#page-brand-home #grid-column-1-narrow .container-angle-top	
		{ margin-top: 22px; }
	#page-brand-home #grid-column-0 .container-angle-top	
		{ margin-top: 0px; }

***************

	* Transparent Box

	*/
	
	/** set the box to a plain colour */

	#page-brand-home #grid-column-1-narrow ul, #grid-column-0 .menu-brand

	  	{ background-color: black;  /* opera5, ie4, macie5 etc. */ }
	

	/* display the PNG */

	#page-brand-home #grid-column-1-narrow ul, #grid-column-0 .menu-brand

		{

		bac\kground-image: url('/staticarchive/1b52d5d9263525b2e56b2a76386b022032fa37cb.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/1b52d5d9263525b2e56b2a76386b022032fa37cb.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'); }		
		

/*********
	* Headings
	* defined image replacements - http://www.mezzoblue.com/tests/revised-image-replacement/
	*/
	
	/** width/height/url of first heading in left hand navigation */
	.menu-brand .nth-child-1 h3
	 	{
	 	width: 150px; /* image width */
	 	height: 22px;  /* image height */
		background-image: url(/staticarchive/05a198393c6fc8917355c02fa2616f1461590968.gif); 
		}
				
	/** width and height of first, second & third homepage item headings */
	#page-brand-home ul h3
	 	{ width: 297px; height: 21px; }

	/** the first homepage item */
	#page-brand-home ul .nth-child-1 h3
	 	{ background-image: url(/staticarchive/b760ce30928ef0b95a567317bb3a27be009f9cd3.gif); }

	/** the second homepage item */
	#page-brand-home ul .nth-child-2 h3
	 	{ background-image: url(/staticarchive/f88effac9705e28657be31d42c57badb136c862e.gif); }

	/** the third homepage item */	
	#page-brand-home ul .nth-child-3 h3
	 	{ background-image: url(/staticarchive/494e6da95a2b24bc57ef02c3ed1ac7ffa2c30928.gif); }

/*************************

/** Text and link colour in homepage transparent box */
	ul.index-list
		{
		color: #000000
		}
	
	.grid-columns #grid-column-1-narrow ul.index-list 
		{ 
		color: #ffffff;
				}
	
	ul.index-list a
		{
		color: #000000;
		}