/*
	WHAT IS THIS FILE?
	
	This file contains all the simple style properties, such as colours, fonts
	and backgrounds. Edit this file to customise the look of your content. 
	If you want to change the layout styles (widths, heights, positions)
	see layout.css. 
	*/





	/*
	|--------------------------------------------------------------------------
	| General Text Formatting
	|--------------------------------------------------------------------------
	*/
	
	html, body {
		/* setting the default styles all text, inputs and textareas will have (unless specified otherwise) */
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
		font-size: 0.9em;
		background: #ffff 
		color: 623b12;
	}

	h1 { 
		font-size: 2em;
		font-weight: normal;
		color: 3d2204;
		background: #fff;
		margin: 0 0 .5em 0;
	}
	
	h2 {
		font-weight: bold;
		padding: 0 0 1em 0;
	}
	
	p { 
		line-height: 150%; 
		padding: 0 1em 1em 0;
	}
	
	ul {
		padding: 1em 1em 0 2em;
		list-style: disc;
	}
	
	ol {
		padding: 0 0 0 2em;
		list-style: decimal;
	}
	
	li {
		padding: 0 0 1em 3em;
	}
	
	strong {
		font-weight: bold;
	}
	
	em {
		font-style: italic;
	}
	
	blockquote {
		color: #000777;
		background: #eff7d7;
		padding: 1em 1em 0 1em;
		margin-top: 3em;
		margin-bottom: 1em;
		font-style: italic;
		font-size: 1.0em;
	}
	
	#footer { 
	
		/* 
		colours for text within the 
		footer division, ie <p id="footer"> 
		*/
		
		color: #2D2D2D;
		background-color: #ffff;
	}
	
	.screen-reader-only {
	
		/*
		This is a special class used to prevent text from 
		being displayed on screen, while still making it visible to
		screen readers. Use this class if you want to add extra
		descriptive text for visually impaired users, but don't want
		that description to be visible for other users. 
		
		For example:
		<p class="screen-reader-only">Special text for screen readers</p>
		*/
	
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	
	
	
	
	/*
	|--------------------------------------------------------------------------
	| Page Links
	|--------------------------------------------------------------------------
	*/

	a:link { 
		color: #07087a; 
		text-decoration: none; 
		background-color: #fff; 
	}
	
	a:visited { 
		color: #0508a2; 
		background-color: #fff; 
		text-decoration: none;
	}
	
	a:hover { 
		text-decoration: underline; 
	}
	
	a:active { 
		color: #000552; 
		background-color: #fff; 
	}





	/*
	|--------------------------------------------------------------------------
	| Top Navigatin Links
	|--------------------------------------------------------------------------

	TOP NAVIGATION LINKS
	The following styles control the appearence 
	of the top navigation links, eg. 
	<a class="top-link" href="default.htm">Home</a>

	*/

	a.top-link {
		/* 
		these styles will apply to ALL links (:link, :visited, :hover and :active) unless overridden
		*/
		display: block;
		padding: .7em 0 .7em 0;
		margin: 0 1.5em 0 0;
		background: #EEEFEE url(../images/nav-bg.gif) repeat-x top left;
		color: 3d2204;
		border-bottom: solid .3em #EEEFEE; 
		padding: 0;
		line-height: 2.5em;
	}

	.top-link:link {
		/* styles for normal, unvisited links can be set here */
		/* these styles will override the defaults set for .top-link above */
		text-decoration: none;
	}
	
	.top-link:visited {  
		/* styles for links once visited can be changed here */
		/* these styles will override the defaults set for .top-link above */
		text-decoration: none;
	}
	
	
	.top-link:hover { 
		/* styles for top links when a user hovers over it can be changed here */
		text-decoration: none; 
		border-bottom: solid .3em #c2c2c2; 
	}
	
	.top-link:active {  
		/* Styles for when the link is being clicked can be changed here */
			text-decoration: bold; 
		border-bottom: solid .3em #c2c2c2; 
	
	}
	
	
	.top-link.selected:link, .top-link.selected:visited {
	
		/* Sets the style of a link that has been selected (ie. has a class of selected)
		   for example (note the additional class "selected"):
			<a class="top-link selected" href="content.htm">Content Page</a>
		*/
	
		border-bottom: solid .3em #aed637;
		cursor: default;
	}
	
	
	
	
	/*
	|--------------------------------------------------------------------------
	| Footer Links
	|--------------------------------------------------------------------------

	Change these if you want your footer links to have a 
	different style to other links

	*/
	
	#footer a:link {
		background: #ffff;
		color: #1f15f2;
	}
	
	#footer a:visited {
		background: #E8EBEB;
		color: #07087a;
	}
	
	#footer a:hover {
		background: #E8EBEB;
		color: #07087a;
	}
	
	#footer a:active {
		background: #E8EBEB;
		color: #000552;
	}
	



	
	/*
	|--------------------------------------------------------------------------
	| Header Colours
	|--------------------------------------------------------------------------
	*/

	#header {	
		
			/*  
			Colours for <div id="header">
			See layout.css for layout and size properties
			*/
		
		background: #ffffff url(../images/bigslice.jpg) repeat-x top left;
		color: #ffff;
	}
	

	#nav {
	
			/*  
			Colours for <ul id="nav"> 
			See layout.css for layout and size properties
			*/
	
		background: #EAEAEA url(../images/nav-bg.gif) repeat-x top left;
		color: #07087a;
	}
	
	
	
	
	
	/*
	|--------------------------------------------------------------------------
	| Wrapper
	|--------------------------------------------------------------------------
	
	This controls the styles for the wrapper div that
	contains all page elements, ie:
	<div id="wrapper">
	
	*/
	
	#wrapper {
		background: #fffff;
		color: #3a3a3a;
	}
	




	/*
	|--------------------------------------------------------------------------
	| Widget Box Colours
	|--------------------------------------------------------------------------
	
	Colour styles for widget boxes, ie <li class="widget">
	See layout.css for layout and size properties
	
	*/
	
	.widget {
		background: #fff;
		color: #3a3a3a;
	}
	
	.widget-heading {
		color: #000777;
		background: #eff7d7;
		border-top: solid .3em #aed637;
	}