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

/* 
 * Column: 225px (~14em); 
 * Gutters: 0.7em;   
 */

@media screen {
	
	body { background: #ebe9ec; }
	
	div#container { 
		width: 60em; padding: 0 1.4em 1.7em 1.4em; overflow:hidden;
margin: 0 auto; background:transparent url(../../images/layout/wide-shadow.gif) no-repeat left bottom;
	}
	
	/** =header */
	
		div#header { padding: 0 0em 1.5em 0em; overflow: hidden; }
		div#header p#branding { margin-top: 1.5em; float: left; position: relative; display: block; width: 19em; height: 3.9em;  }
		div#header p#branding span { 
			display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
			background: top left url("../../images/branding.png") no-repeat;
		}
		div#header p#note { margin-top:0.3em; text-align: right; float: right; width: 15em; }
		div#header p#note a {font-size: 0.75em; color: #501c7e; }
		div#header p#note a:hover, 
		div#header p#note a:focus,
		div#header p#note a:active 
		{ text-decoration: none; }
		div#header p#personalisation { margin-top: 0.5em; text-align:right; float:right; clear:right; color:#666; font-weight:bold; }
		div#header p#personalisation span { font-size:1.5em; }
		
		/** =primary_navigation */
		
		div#header ul#primary_navigation { display: block; margin: 0.5em 0 0em 0; overflow: hidden; width: 87%; background: #ffffff; }
		div#header ul#primary_navigation li { border-right: 1px solid #FFFFFF; display: block; float: left; width: 8.5em; }
		div#header ul#primary_navigation li.last { float: left; border-right: none; }
		div#header ul#primary_navigation li a { 
			display: block;  position: relative; text-decoration: none; background: #886799;
			color: #FFFFFF; font-size: 0.65em; text-align: center; width: 100%;
			height: auto !important; height: 2.4em; min-height: 2.4em;
		}
		div#header ul#primary_navigation li a span { 
			display: block; width: 100%; height: 25px; position: absolute; top: 0; left: 0;
			background-position: center top; background-repeat: no-repeat; cursor: pointer;
		}
		div#header ul#primary_navigation li a:focus,
		div#header ul#primary_navigation li a:active,
		div#header ul#primary_navigation li a:hover,
		div#header ul#primary_navigation li.active a
		{ background: #630098; }
		
		div#header ul#primary_navigation li a:focus span,
		div#header ul#primary_navigation li a:active span,
		div#header ul#primary_navigation li a:hover span,
		div#header ul#primary_navigation li.active a span
		{ background-position: center -25px; }
		
		div#header ul#primary_navigation li#nav-home a span { background-image: url("../../images/navigation/home.gif"); }
		div#header ul#primary_navigation li#nav-updates a span { background-image: url("../../images/navigation/updates.gif"); }
		div#header ul#primary_navigation li#nav-meet-the-team a span { background-image: url("../../images/navigation/meet-the-team.gif"); }
		div#header ul#primary_navigation li#nav-sectors a span { background-image: url("../../images/navigation/sectors.gif"); }
		div#header ul#primary_navigation li#nav-products a span { background-image: url("../../images/navigation/products.gif"); }
		div#header ul#primary_navigation li#nav-client-banking a span { background-image: url("../../images/navigation/client-banking.gif"); }
		div#header ul#primary_navigation li#nav-testimonials a span { background-image: url("../../images/navigation/testimonials.gif"); }
		
	/** =content */
	
		div#container div#content { width: 100%; overflow: hidden; }
		div#container div#content-main { width: 44.25em; float: right; display: inline; position: relative; top: -0.5em; padding-bottom: 0.5em; }
		div#container div#content-main.wide{ width: 60.25em; float: left; }
		
		div#container ul#secondary-navigation { width: 14em; float: left; display: inline; margin-right: 0.7em; padding: 0; border-top: 1px solid #DDDDDD; }
		div#container ul#secondary-navigation li { overflow: hidden; float: left; margin: 0; width: 14em; line-height: 1em; }
		div#container ul#secondary-navigation li a,
		div#container ul#secondary-navigation li span
		{ float: left; padding: 0.55em 0em 0.6em 0.6em; width: 100%; 
		text-decoration: none; color: #191919; font-size: 0.75em; font-weight: bold;
		border-bottom: 1px solid #dddddd; }
		div#container ul#secondary-navigation li a:active,
		div#container ul#secondary-navigation li a:focus,
		div#container ul#secondary-navigation li a:hover,
		div#container ul#secondary-navigation li a.active
		{ color: #FFFFFF; background: #000000; border-bottom: 1px solid #000000; }
		
		div#container ul#secondary-navigation li.section a, 
		div#container ul#secondary-navigation li.section span { text-transform: uppercase; }
		div#container ul#secondary-navigation li.section a.active, 
		div#container ul#secondary-navigation li.section span { color: #000000; background: #FFFFFF; border-bottom: 1px solid #dddddd; }
		
	/** =footer */
	
		div#footer { width: 44.25em; float: right; }
		div#footer ul#tertiary-navigation { width: 100%; overflow: hidden; }
		div#footer ul#tertiary-navigation li { 
			float: left; display: inline; margin-right: 0.7em; background-position: bottom left; position: relative;
			background-color: #4f4f4f; background-image: url("../../images/layout/bg-grad-dark.gif"); 
			background-repeat: repeat-x; background-position: bottom left;
		}
		div#footer ul#tertiary-navigation li.last { margin: 0; }
		div#footer ul#tertiary-navigation li a { 
			float: left; padding: 0.6em 4.85em 0.6em 0.6em; font-size: 1.125em;
			color: #FFFFFF; text-decoration: none;
		}
		div#footer ul#tertiary-navigation li a span {
			height: 22px; width: 40px; display: block; cursor: pointer;
			position: absolute; right: 0.5em; top: 0.5em;
			background: url("../../images/icons/go.png");	
		}
		
}