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

/*
	Site: 940px / 58.75em
	Gutters: 20px / 1.25em
	Header Padding: 15px / ~1em
	Content Padding: 10px / 0.625em
	Font sizes: 24px (1.5em), 18px (1.125em), 14px (0.875em), 12px (0.75em)
	Columns:
		Secondary Navigation: 140px / 8.75em
		Main Content: 540px / 33.75em
		Related Content:  220px / 13.75em
*/

@media screen {

	/* =domesticabuse */
	
		body { background-color: #eeeeee; position: relative; min-width: 58.75em; }
		
	/* =site-information */
	
		div#site-information { background: #FFFFFF; }
		div#site-information div#header { width: 58.75em; margin: 0 auto; padding-top: 1.25em; }
		
		div#site-information p#branding { width: 23em; height: 3.875em; float: left; margin-top: 0.95em; }
		div#site-information p#branding a { font-size: 0.625em; padding: 1em; text-decoration: none; }
		div#site-information p#branding span { background-image: url("../../images/branding/identity.png"); cursor: pointer; }
		
		div#site-information p.vcard { font-size: 0.6em; width: 212px; height: 7.75em; float: right; }
		div#site-information p.vcard span { background-image: url("../../images/text/call-to-action.png"); }
		
		/* =site-options */
		div#site-information ul#site-options { display: block; float: right; padding-left: 1.25em; }

		/* =primary-navigation */
		div#site-information div#header ul#primary-navigation { width: 58.75em; overflow: hidden; padding-top: 1.25em; clear: left; }
		div#site-information div#header ul#primary-navigation li { display: block; float: left; text-align: center; font-weight: bold; }

		div#site-information div#header ul#primary-navigation a,
		div#site-information div#header ul#primary-navigation span
		{ padding: 0.8em; display: block; font-size: 0.75em; margin-right: 2px;
		text-decoration: none; color: #83389b; line-height: 0.75em; }
		div#site-information div#header ul#primary-navigation li.last a,
		div#site-information div#header ul#primary-navigation li.last span
		{ margin-right: 0; }
		
		div#site-information div#header ul#primary-navigation li a:active,
		div#site-information div#header ul#primary-navigation li a:focus,
		div#site-information div#header ul#primary-navigation li a:hover,
		div#site-information div#header ul#primary-navigation li.root a:hover,
		div#site-information div#header ul#primary-navigation li.root a:active,
		div#site-information div#header ul#primary-navigation li.root a:focus
		{ background-color: #00aa86; color: #FFFFFF; }
		
		div#site-information div#header ul#primary-navigation li.active a,
		div#site-information div#header ul#primary-navigation li.active span 
		{ background-color: #ececec; }
		
	/* =content */
	
		div#content { width: 58.77em; margin: 1.25em auto 0 auto; overflow: hidden; }
		
		/* =secondary-navigation */
		
			div#content ul#secondary-navigation { width: 8.75em; padding: 0 1.25em 0 0; font-weight: bold; float: left; }
			div#content ul#secondary-navigation li ul { font-weight: normal; }
			
			div#content ul#secondary-navigation a,
			div#content ul#secondary-navigation span
			{ padding: 0.65em; font-size: 0.625em; background-color: #FFFFFF; text-decoration: none; 
			margin-bottom: 2px; color: #83389b; display: block; line-height: 1.25em;}
			
			div#content ul#secondary-navigation li a:active,
			div#content ul#secondary-navigation li a:focus,
			div#content ul#secondary-navigation li a:hover
			{ background-color: #00aa86 !important; color: #FFFFFF !important; }
			
			div#content ul#secondary-navigation li.active a,
			div#content ul#secondary-navigation li.active span 
			{ background-color: #ececec; }
			
			/* nested */
			div#content ul#secondary-navigation li.active li a,
			div#content ul#secondary-navigation li.active li span 
			{ background-color: #FFFFFF; }
		
	/* =site-help */
	
		ul#site-help { 
			width: 18em; margin: 0 auto 1.25em auto; clear: both;
			background: #8c8d8e; padding: 0.625em 0em 0.85em 40.75em;
			text-align: left; overflow: hidden; display: block;
		}
		
		ul#site-help li { width: 7.75em; float: left; padding-right: 0.5em; display: block; line-height: 1em; }
		
		ul#site-help li a,
		ul#site-help li span { color: #FFFFFF; font-size: 0.7em; font-weight: bold; }
		ul#site-help li a:active,
		ul#site-help li a:focus,
		ul#site-help li a:hover 
		{ text-decoration: none; }
				
}