@import url(blankcanvas.css);
@import url(base-typography.css);
@import url(base-datasets.css);
@import url(assets/global.css);

@media screen {

	/* */
	body { background:#000 url(/release/images/country-roads/layout/bg-repeat.jpg) top repeat-x; }
	
	/* */
	div#container { width:970px; margin:0 auto; background:url(/release/images/country-roads/layout/bg-soil.jpg) left 137px no-repeat; } /* This disgusts me */
	
	/* */
	div#header { position:relative; height:137px; background:url(/release/images/country-roads/layout/bg-grass.jpg) left top no-repeat; }
	div#header p#branding { position:absolute; top:42px; left:2px; }
	div#header p#branding span { position:absolute; left:-10000px; }
	
	/* */
	div#header ul#primary-navigation { float:left; margin-top:8px; }
				
	div#header ul#primary-navigation li { float:left; height:13px; padding:3px 10px 0 6px; background:url(/release/images/country-roads/layout/primary-navigation-pipe.png) right top no-repeat; }		
	div#header ul#primary-navigation li.first { padding-left:0; }
	div#header ul#primary-navigation li.last { background:none; }
	
	div#header ul#primary-navigation li a { display:block; height:10px; background-image:url(/release/images/country-roads/layout/primary-navigation.png); }
	div#header ul#primary-navigation li a span { position:absolute; left:-10000px; }
	
	div#header ul#primary-navigation li a.home{ width:34px; background-position:0 0; }			
	div#header ul#primary-navigation li a.active,
	div#header ul#primary-navigation li a:hover { background-position:0 -10px; }
	
	div#header ul#primary-navigation li a.drink-driving { width:91px; background-position:-53px 0; }			
	div#header ul#primary-navigation li a.drink-driving-active,
	div#header ul#primary-navigation li a:hover.drink-driving { background-position:-53px -10px; }
	
	div#header ul#primary-navigation li a.motorbikes { width:76px; background-position:-165px 0; }			
	div#header ul#primary-navigation li a.motorbikes-active,
	div#header ul#primary-navigation li a:hover.motorbikes { width:76px; background-position:-165px -10px; }			
	
	div#header ul#primary-navigation li a.country-roads { width:96px;  background-position:-261px 0; }
	div#header ul#primary-navigation li a.country-roads-active,
	div#header ul#primary-navigation li a:hover.country-roads { width:96px; background-position:-261px -10px; }
	
	div#header ul#primary-navigation li a.seatbelts { width:65px;  background-position:-376px 0; }
	div#header ul#primary-navigation li a.seatbelts-active,
	div#header ul#primary-navigation li a:hover.seatbelts { width:65px; background-position:-376px -10px; }
	
	/* */
	div#header ul#secondary-navigation { float:right; margin-top:89px; }
	
	div#header ul#secondary-navigation li { float:left; height:14px; padding:2px 10px 0 6px; background:url(/release/images/country-roads/layout/secondary-navigation-pipe.png) right top no-repeat; }		
	div#header ul#secondary-navigation li.last { background:none; }
	
	div#header ul#secondary-navigation li a { display:block; height:12px; background-image:url(/release/images/country-roads/layout/secondary-navigation.png); }
	div#header ul#secondary-navigation li a span { position:absolute; left:-10000px; }
	
	div#header ul#secondary-navigation li a.country-roads-home { width:34px; background-position:0 0px; }				
	div#header ul#secondary-navigation li a.country-roads-home-active,
	div#header ul#secondary-navigation li a:hover.country-roads-home { width:34px; background-position:0 -12px; }
	
	div#header ul#secondary-navigation li a.country-roads-facts-and-figures { width:196px; background-position:-53px 0px; }				
	div#header ul#secondary-navigation li a.country-roads-facts-and-figures-active, 
	div#header ul#secondary-navigation li a:hover.country-roads-facts-and-figures { width:196px; background-position:-53px -12px; }			
	
	div#header ul#secondary-navigation li a.country-roads-cinema-adverts { width:122px; background-position:-267px 0px; }
	div#header ul#secondary-navigation li a.country-roads-cinema-adverts-active,
	div#header ul#secondary-navigation li a:hover.country-roads-cinema-adverts { width:122px; background-position:-267px -12px; }
		
	div#header ul#secondary-navigation li a.country-roads-postcode-map { width:67px; background-position:-408px 0px; }
	div#header ul#secondary-navigation li a.country-roads-postcode-map-active,
	div#header ul#secondary-navigation li a:hover.country-roads-postcode-map { width:67px; background-position:-408px -12px; }
		
	div#header ul#secondary-navigation li a.country-roads-interactive-test { width:106px; background-position:-496px 0px; }
	div#header ul#secondary-navigation li a.country-roads-interactive-test-active,
	div#header ul#secondary-navigation li a:hover.country-roads-interactive-test { width:106px; background-position:-496px -12px; }
		
	/* */
	div#content { display:inline-block; padding-top:15px; width:100%; }
	
	div#content-main { position:relative; }	
	/*div#content-main span.top { position:absolute; top:0; width:960px; height:42px;  }*/
	
	body.fullwidth div#content-main { width:100%; }
	
	body.content div#content-main { float:left; width:640px; margin-right:10px; background:none; padding:20px; }
	body.content div#content-related { float:left; width:280px; }
	
	/* */	
	div#footer { margin-top:20px; clear:left; border-top:solid 2px #FFF; padding-top:0.5625em; height:7em; }
	
	div#footer ul { float:left; font-size:0.6875em; }	
	div#footer ul li { float:left; margin-right:0.875em; }	
	div#footer ul li a { text-decoration:none; color:#FFF; }
	div#footer ul li a { text-decoration:underline; }
	
	div#footer div#footericons { float:right; margin-right:30px; }
	div#footer div#footericons img { margin-left:1.5em; }
	
	/* */
	div#content-main h2 { font-size:1.125em; color:#00baff; margin-bottom:1em; font-weight:bold; }
	div#content-main h3 { font-size:1em; color:#FFF; margin-bottom:1em; font-weight:bold; }
	
	div#content-main p { color:#FFF; font-size:0.875em; line-height:1.428571em; margin-bottom:1.5em; }
	div#content-main p a { color:#FFF; }
	div#content-main ul li { color:#ffffff; font-weight:bold; font-size:0.875em; margin-bottom:1em; line-height:1.2em; }
	
	/* */
	
	div#content-related div.panel { position:relative; float:left; width:280px; height:230px; margin-bottom:10px; }
	div#content-related div.panel a { overflow:hidden; }
	
	div#content-related div.panel.cinema-adverts { background:url(/release/images/country-roads/assets/panel-cinema-adverts.jpg) left top no-repeat; cursor:pointer; }
	div#content-related div.panel.your-area { background:url(/release/images/country-roads/assets/panel-your-area-bg.jpg) left top no-repeat;  }
	div#content-related div.panel.interactive-test { background:url(/release/images/country-roads/assets/panel-interactive-test.jpg) left top no-repeat; cursor:pointer; }
					
	div#content-related div.panel.cinema-adverts a { position:absolute; left:10px; bottom:7px; width:153px; height:7px; font-size:0.75em; font-weight:bold; color:#000; text-decoration:none; padding:5px 20px 11px 9px; }
	div#content-related div.panel.cinema-adverts a:hover { text-decoration:underline; } /* branch base-typography for cr */
	
	div#content-related div.panel.interactive-test a { position:absolute; left:10px; bottom:8px; width:153px; height:7px; font-size:0.75em; font-weight:bold; color:#000; text-decoration:none; padding:5px 20px 11px 9px; }
	div#content-related div.panel.interactive-test a:hover { text-decoration:underline; } /* branch base-typography for cr */

	div#content-related div.panel.your-area div.container { position:absolute; bottom:10px; left:10px; width:240px; height:50px; padding:10px; background:#151d25; }
	div#content-related div.panel.your-area div.container p { color:#FFF; font-size:0.75em; font-weight:bold; }		
	div#content-related div.panel.your-area div.container form { position:relative; }
	div#content-related div.panel.your-area div.container form label { margin-right:10px; }
	div#content-related div.panel.your-area div.container form label span { color:#00baff; font-size:0.75em; font-weight:bold; }		
	div#content-related div.panel.your-area div.container form label input.submit { position:absolute; top:17px; right:0; }
	
	/* */
	iframe { position:absolute; }
	a#rsLogo {
		position: absolute;
		right: 0;
		top: 0;
	}
}