/* 
CSS Document for The Change Practice 
Author : Adam Collison
Created : 20-10-2005
*/

/* 
HTML --------------------------------------------------------------------
Styles used for styling blank html tags
*/

body {
	padding:				0;
	margin:					0;
	font-family:			Arial, Helvetica, sans-serif;
	font-size:				small;
}

a img {
	border:					0;
}

a {
	color:					#333333;
	text-decoration:		underline;
}

a:hover {
	text-decoration:		none;
}

h2 {
	color:					#003399;
	font-weight:			bold;
	font-size:				1.1em;
	font-family:			Verdana, Arial, Helvetica, sans-serif;
	padding-bottom:			0;
	margin:					0 0 0.5em;
}

h3 {
	color:					#003399;
	font-weight:			bold;
	font-size:				1em;
	font-family:			Verdana, Arial, Helvetica, sans-serif;
	padding-bottom:			0;
	margin:					0 0 0.5em;
}

h4 {
	color:					#666;
	font-weight:			bold;
	font-size:				1em;
	font-family:			Verdana, Arial, Helvetica, sans-serif;
	padding-bottom:			0;
	margin:					0 0 0.5em;
}


/* 
Main Layout Styles ------------------------------------------------------
these are broken down into the main section of the site e.g. header nav content etc... 
*/

/* Used to set the size */
#container {
	width:					800px;
	padding:				0;
	margin:					0;
}


/* 
Start Header Styles ===============================
*/
#header {
	padding-top:			10px;
}

#header a img {
	float:					right;
}

#header ul {
	padding:				75px 0 0 20px;
	margin:					0;
	list-style-type:		none;
}

#header ul li {
	padding:				0;
	margin:					0;
	list-style-type:		none;
	display:				inline;
	font-weight:			bold;
}
/* 
End Header Styles =================================
*/

/* 
Start Top Bar =====================================
Almost like a second header this places the large
image in and the list to the right.
*/
#top_bar {
	padding:				10px 0;
}

/* places the grey list to the right. */
#top_bar ul {
	float:					right;
	padding:				10px;
	margin:					0;
	list-style-type:		none;
	background:				#D4D8DB;
	font-size:				12px;
	font-weight:			bold;
	width:					150px;
	height:					80px;
}

#top_bar ul li {
	padding-top:			2px;
}

#top_bar ul li h3 {
	color:					#002577;
	padding:				0 0 4px;
	margin:					0;
	font-size:				1em;
}

/* Styling for list elements i assumed they were links, If not wrap content in a "span" instead of a "A" to get the same affect */
#top_bar ul li a , #top_bar ul li span {
	color:					#333;
	text-decoration:		none;
	font-size:				1em;
	padding-left:			20px;
	background:				url(../media/bg_bullets.gif) 0 1px no-repeat;
}

#top_bar ul li a:hover {	
	color:					#003399;
	text-decoration:		underline;
}
/* 
End Top Bar =====================================
*/

/* 
Start Layout ====================================
This div is floated right with the content and right hand content within.
*/
/* Set width of inner content area*/
#layout { 
	width:					586px;
	float:					right;
	padding-top:			5px;
}

/* Main Content Styles these is the main body of the page */
.content {
	float:					left;
	width:					395px;
	padding-right:			21px;
}

/* 
incase you dont want the right hand content on one of the pages 
use multiple style declirations with the below e.g.
class="content full"
*/
.full {
	width:					565px;
}

.content p.intro {
	color:					#002577;
	font-weight:			bold;
	font-size:				1em;
	font-family:			Verdana, Arial, Helvetica, sans-serif;
	padding-bottom:			0;
	margin:					0 0 1em;
	line-height: 1.75em;

}

.content p {
	font-size:				1em;
	font-family:			Verdana, Arial, Helvetica, sans-serif;
}

.content ul {
	padding:				0 0 0 0;
	margin:					0;
}

.content ul li {
	padding:				5px 0 5px 19px;
	margin:					0;
	font-family:			Verdana, Arial, Helvetica, sans-serif;
	list-style-type:		none;
	background:				#fff url(../media/bg_content_bullets.gif) 0 10px no-repeat;
}

.content ol {
	padding:				0 0 0 25px;
	margin:					0;
}

.content ol li {
	padding:				5px 0;
	margin:					0;
	font-family:			Verdana, Arial, Helvetica, sans-serif;
}


/* Sub content used to style the right hand links. */
.sub_content {
	float:					right;
	width:					170px;
}

.sub_content ul {
	padding:				0;
	margin:					0;
	list-style-type:		none;
}

.sub_content ul li h4 {
	font-weight:			bold;
	background:				#002577;
	color:					#fff;
	margin:					0;
	padding:				2px 4px;
	font-size:				1em;
}

.sub_content ul li {
	font-weight:			bold;
	background:				#fff;
	color:					#000;
	margin:					0;
	border-bottom:			1px solid #002577;
}

.sub_content ul li a {
	font-size:				0.9em;
	text-decoration:		none;
	font-weight:			normal;
	padding:				2px 0;
	display:				block;
}

.sub_content ul li a:hover {
	background:				#E8EFFF;	
}
/* 
End Layout ====================================
*/


/* 
Start Nav =====================================
This is styled in a similar way to the sub content.
*/
#nav {
	padding:				5px 0 0 23px;
	width:					142px;
}

#nav ul {
	padding:				0;
	margin:					0 0 16px;
	list-style-type:		none;
	float:					left;
	width:					142px;
}

#nav ul li h4 {
	font-weight:			bold;
	background:				#FFD37F;
	color:					#002577;
	margin:					0;
	padding:				1px 4px;
	font-size:				1em;
}

#nav ul li {
	font-weight:			bold;
	background:				#fff;
	color:					#000;
	margin:					0;
	border-bottom:			1px solid #FFD37F;
}

#nav ul li a {
	font-size:				0.9em;
	text-decoration:		none;
	font-weight:			normal;
	padding:				2px 0;
	display:				block;
	position:				relative;
}

#nav ul li a:hover {
	color:					#002577;
	background:				#FFEBC6;
}
/* 
End Nav =====================================
*/

/* 
Start all other styles ======================
used for any extras used
*/
/* Used for accessibilityit will hide anything with the class to normal browsers but screen readers & Text only browsers will pick it up */
.w3c {
	visibility:				hidden;
	position:				absolute;
	top:					-400px;
	left:					-400px;
	
}
/* 
End all other styles ======================
*/