@charset "utf-8";
/* CSS Document */


/*
================================================================================
General responsive template.
Author:       Josh Shindler, Steve Mannon , Dylan Williams, Gwyn Jones
Created:      May 2012 
================================================================================
*/

/*--------------------------------------------------------------

----------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
1.0 - Branding banners
2.0 - News
3.0 - Quick links
4.0 - Promotions

--------------------------------------------------------------*/

.level0 #main-navigation{border-bottom:4px solid #c41d28!important;}
.level0 #content {background:#FFF; clear:both; width:100%; }

*.level0 {
	position: relative; /* Essential for the Global Search drop-down to be properly aligned*/
}

/*--------------------------------------------------------------
1.0 - Branding banners
--------------------------------------------------------------*/


.level0 #branding, .level0 #content, #promotions, .level0 #wrapper  {background:#FFF; clear:both; width:100%; }

#branding { border-bottom:4px solid #c41d28; display:inline-block; padding-left: 1%;}
#branding ul li {float:left; padding:1.666em 2.0833%; width:29%; position:relative;}
#branding ul li img {width:100%; }
#branding ul #records-branding {/*padding:0 1.9791%; margin:1.666em 0;*/ border-right:none;border-left:none; }
#branding ul #education-branding img{border-bottom:#CD5806 4px solid; }
#branding ul #records-branding img{border-bottom:#6D3678 4px solid; }
#branding ul #info-management-branding img{border-bottom:#00529B 4px solid; }
#branding ul li ul {margin:1em 0 1em 2.5%;color:#FFFFFF; padding:0.3em; z-index:1; position: absolute; font-size:1.5em; width:88%; height:75%; top:0px; left:0%; display:block;}
#branding ul #education-branding ul {background-color:#CD5806;}
#branding ul #records-branding ul {background-color:#6D3678; }
#branding ul #info-management-branding ul {background-color:#00529B;}
#branding ul li li {padding:0; margin:0; font-size:0.65em; font-weight:700; width:100%; clear:both; }
#branding ul li li h2 {font-size:1em; line-height:120%; padding:0 0 0 0; margin:45% 0 0 0; text-align:center; font-weight:bold;}
#branding ul li li h2 a {color:#FFF; text-decoration:none;}
#branding ul li li > a {display:none;}


/*--------------------------------------------------------------
2.0 - News
--------------------------------------------------------------*/

#news {width:100%; float:left; position:relative; margin-bottom: 10px;}
#news ul{width:49.7652%; float:left; margin:1em 0 ; border-right:#bfbfbf dotted 1px;}
#news .no-border {border:none;}
#news ul li {padding:0 6.2893%; float:left; display:block; width:87.4214%; }
#news ul .central-news-item {padding:1em 0; border-bottom:#bfbfbf dotted 1px;border-top:#bfbfbf dotted 1px; margin:1em 6.2893%;}
*html .level0 #wrapper #content #news ul .central-news-item { margin:1em 10px;}
#news ul li a, #popular-links ul li a  {color:#000; text-decoration:none;}
#news ul li a:hover, .level0 #wrapper #popular-links ul li a:hover {color:#000; text-decoration:underline;}
#news ul li img {float:left; margin:0 12px 0 0 ; border:#ccc 1px solid; }
#news h3, #popular-links h3{
	font-weight: bold;
background: rgb(219,219,219); /* Old browsers */
background: url("http://www.nationalarchives.gov.uk/images/global/h2-bg.jpg") repeat-x scroll left top #CDCDCD;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: -webkit-gradient(linear, left top, left bottom, color-stop(75%,rgb(219,219,219)), color-stop(100%,rgb(191,191,191))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(219,219,219) 75%,rgb(191,191,191) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(219,219,219) 75%,rgb(191,191,191) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(219,219,219) 75%,rgb(191,191,191) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgb(219,219,219) 75%,rgb(191,191,191) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dbdbdb', endColorstr='#bfbfbf',GradientType=0 ); /* IE6-8 */
padding:.4em 20px; margin:0 0 0 0; color:#000000; height: 1.3em;}
#news h3 a{text-decoration:none; color:#000;}
#news #rss {position:absolute; top:.5em; right:1em;}
#news #rss a{text-decoration:none; color:#000}
#news #rss a #rss-icon{margin:0 5px 0 0; float:left}

/*--------------------------------------------------------------
3.0 - Quick links
--------------------------------------------------------------*/

#popular-links {width:100%; float:right;}
#popular-links ul li{padding:.5em 20px; border-bottom:#bfbfbf dotted 1px }
#popular-links h3 span.header-no-link{color:#000000; text-decoration:none;}

/*--------------------------------------------------------------
4.0 - Promotions
--------------------------------------------------------------*/

#promotions { background-color:#EEEEEE; padding: 1em 0 0 0; float:left; }
#promotions ul { margin:0 0 0 0; padding:0 0 0 0;}
#promotions li{ width:33.2291%/*29.0625%*/; float:left; border-right:#FFFFFF solid 1px; margin:0 -1px 0 0; padding:1em 0; text-align:center; display: inline;}

#promotions li h4{ font-size:1.2em; margin: 0; font-weight: bold;} 
#promotions a {text-decoration:none; color:#000000; display: inline;} 
#promotions #newsletter a{color:#24909D;}
#promotions #bookshop a{color:#652677;} 
#promotions #podcasts a{color:#AE2481;} 
#promotions a:hover{text-decoration:underline;} 
#promotions .promo-centre{width:33.2291%;}
#promotions .promo-right{width:31.9791%; border-right:none;}


/*--------------------------------------------------------------
5.0 - Media queries
--------------------------------------------------------------*/

@media only screen and (min-width: 480px) {
#branding { padding-left: 0; }
#branding ul li ul { height:54px; padding:.5em; left:7%; color:#FFFFFF; z-index:1; position: absolute; font-size:1.5em; width:66%; top:39%; display:block; }
#branding ul li li h2 {font-size:1.45em; font-weight:normal; text-align: left; margin:0 0 6px 0;}
/*body::before{ content: "480px or more"; display: block; text-align: center; position: absolute; top: 0; left: 0; right: 0; z-index: 99; background-color: #ddd;}*/
#branding ul #records-branding {/*padding:0 1.9791%; margin:1.666em 0;*/ border-right:#bfbfbf dotted 1px;border-left:#bfbfbf dotted 1px;}
}
@media only screen and (min-width: 768px) {
#promotions li { text-align: left } 
#promotions li img{float:left; padding: 0 12px 29px 20px; } 
#promotions a {display: inline;}
#popular-links {width:33.333%; float:right;}
#popular-links ul {padding:1em 6.2893%;}
#popular-links ul li{padding:.5em 0; }
#branding ul li li > a {display: inline; color: #fff; text-decoration:none;}
#news {width:66.5%; border-right:#000 dotted 1px; margin-bottom: 0px; }
#branding ul li ul {height: auto; filter: alpha(opacity=90); -moz-opacity:0.90; opacity:0.90; width:60.3125%; top: 28%; padding:.8em .6em; }
#branding ul li li h2 {font-size:1.6em;}
/*body::before{ content: "768px pr more"; display: block; text-align: center;  position: absolute; top: 0; left: 0; right: 0; z-index: 100; background-color: #ddd;}*/
#news ul li:last-child {display: block}

}
@media only screen and (min-width: 1000px) {
#branding ul li ul {height:84px; top: 47%; left: 10%; }
/*body::before{ content: "1000px or more"; display: block; text-align: center; position: absolute; top: 0; left: 0; right: 0; z-index: 101; background-color: #ddd);}*/


}
}