/*

Table of contents
============================

Generic system wide settings for The Counselling Partnership
covers typography, colors, line spacing etc.

============================

	last-updated: 08 May 2010
	updated by Matt Addison
		
	=1.universal reset
	=2.accessibility features
	=3.html and body
	=4.typography
	=5.layout
	=6.main navigation
	=7.form
	=8.tables
	=9.links

============================
*/

/*
=1.universal reset
============================
*/

/* First we establish a baseline for the whole document with a standard font size */
/* and consistent margin and padding values. This gets around any default browser */
/* behaviour which might affect page rendering */

*	{
	font-size: 100%;
	margin: 0;
	padding: 0;
	}

/*
=2. accessibility features
============================
*/

/* Here we hide elements by moving them off screen and setting their width to 0 */
/* This ensures they continue to exist. */
/* If we used display: none; the elements would not appear so they couldn't be brought */
/* into use as required - for example to aid accessibility. */

hr,
#skipnav,
#header h2 span,
#mainnav h3,
#footer h4,
.hide	{
	width: 0px;
	height: 0px;
	position: absolute;
	left: -9999px;
	overflow: hidden;
	}

acronym,
abbr	{
	cursor: help;
	}
	
/*
=3. html and body
============================
*/

/* Here we start to establish some typographic consistency. */
/* We set the font-size of the whole document to 76% which equates to about 12.16px on most browsers. */
/* We then set the line height of the whole document to 1.5 which equates to about 18.24px on most browsers. */
/* So we end up with line spacing approximately half the height of the text. */

html	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 76%;
	line-height: 1.5;
	background-color: #ebebeb;
	}

body	{
	position: relative;
	color: #444444;
	width: 100%;
	padding: 0;
	background-color: #fff;
	}

/*
=4. typography
============================
*/

/* Here we define heading sizes. Note the variation in line-height for each size.*/
/* This is to ensure the text and headings together remain consistently spaced on a grid.*/
/* With this approach, if the font-size increases, the line-height reduces. It is */
/* calculated on the basis of base line-height in pixels (18.24) divided by the desired font-size */
/* in pixels. The result is used as the line-height value. It is also used as a bottom margin */
/* to provide a regular vertical rhythmn down the page */

h1, h2, h3, h4, h5, h6, caption	{
	font-family: Arial, Helvetica, sans-serif;
	color: #444444;
	font-weight: normal;
	}

h1	{
	font-size: 1.8em;
	line-height: 0.8291;
	margin-bottom: 0.8291em;
	}

h2	{
	font-size: 1.5em;
	line-height: 1;
	margin-bottom: 1em;
	}

h3	{
	font-size: 1.3157em;
	line-height: 1.14;
	margin-bottom: 1.14em;
	}

h4	{
	font-size: 1.1513em;
	line-height: 1.3028;
	margin-bottom: 1.3028em;
	font-weight: bold;
	}

h5	{
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 1.5em;
	}

h6	{
	font-size: 0.8223em;
	font-weight: bold;
	line-height: 1.824;
	margin-bottom: 1.824em;
	}

p, ul, ol, dl, li, caption, address	{
	font-size: 1em;
	line-height: 1.5;
	margin-bottom: 1.5em;
	}

ul, ol	{
	padding: 0 2em;
	}
	
dl	{
	padding: 0;
	}
	
dl dl	{
	padding: 0 1.15em;
	}
	
dt	{
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	font-size: 1.1513em;
	line-height: 1.3028;
	margin-bottom: 1.3028em;
	padding: 0;
	}
	
li, dd	{
	padding: 0;
	margin: 0 0 1.5em 0;
	}

dd	{
	padding: 0 2em 0 0;
	}
	
ul li	{
	list-style-image: url('images/nut.gif');
	line-height: 1;
	}

ol ol	{
	list-style-type: lower-roman;
	}
	
li ul,
li ol,
li dl,
dd ul,
dd ol,
dd dl	{
	margin: 1.5em 0 0 0;
	}

th,
td	{
	font-size: 1em;
	line-height: 1.5;
	text-align: left;
	}
	
caption	{
	font-size: 1.3157em;
	font-weight: normal;
	line-height: 1.14;
	padding-bottom: 1.14em;
	margin: 0;
	text-align: left;
	}

blockquote	{
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-size: 1.1513em;
	line-height: 1.3028;
	margin: 0 0 1.3028em 0;
	padding: 1.5em 1em 0 1em;
	border: 1px solid #cccccc;
	border-width: 1px 0;
	color: #444444;
	background: #ffffff url('images/background.gif') top left repeat-x;
	}

code	{
	font-family: "Courier New", Courier, monospace;
	font-size: inherit;
	color: #3366FF;
	}

em	{
	font-family: Arial, Helvetica, sans-serif;
	font-style: italic;
	font-weight: bold;
	color: #356fb8;
	}

strong	{
	font-weight: bold;
	color: #356fb8;
	font-size: inherit;
	}
	
.clear	{
	clear: both;
	float: none;
	}

/*
=5. layout
============================
*/

body	{
	width: 960px;
	margin: 0 auto;
	background: #eeebe8 url(images/background-body.gif) bottom left repeat-y;
	}
	
#container	{
	position: relative;
	background: transparent url(images/background-container.gif) bottom left no-repeat;
	}

#header	{
	position: relative;
	height: 160px;
	background: #ffffff url('images/header.gif') bottom left no-repeat;
	margin: 0 10px;
	width: auto;
	margin-bottom: 30px;
	}

#header h1	{
	position: absolute;
	margin: 0;
	top: 120px;
	right: 18px;
	font-size: 1.3157em;
	font-weight: bold;
	}
	
#header h1 a:link,
#header h1 a:visited	{
	color: #666666;
	text-decoration: none;
	font-weight: bold;
	}
	
#header h2	{
	position: relative;
	height: 131px;
	width: 255px;
	top: 0px;
	left: 18px;
	}
	
#header h2 img	{
	bordeR: 0;
	}
	
#header address	{
	float: right;
	width: auto;
	font-size: 1.069em;
	margin-top: -135px;
	margin-right: 18px;
	font-weight: bold;
	margin-bottom: 1.14em;
	font-style: normal;
	color: #666666;
	text-align: right;
	}
	
#content-primary,
#content-secondary,
#content-tertiary	{
	}
	
.outer-panel	{
	float: left;
	width: 232px;
	margin-right: 10px;
	margin-bottom: 18px;
	background: transparent url('images/home-box-bot.jpg') bottom left no-repeat;
	}
	
.inner-panel	{
	width: 212px;
	min-height: 147px;
	background: transparent url('images/home-box-top.jpg') top left no-repeat;
	padding: 10px 10px 1px 10px;
	}
	
* html .inner-panel	{
	height: 147px;
	}
	
#footer	{
	clear: both;
	float: none;
	border-top: 1px dotted #666;
	margin: 0 10px;
	padding: 18px 18px 10px 18px;
	font-size: 0.9041em;
	color: #666;
	}
		
#footer	p	{
	text-align: center;
	}
		
#footer ul	{
	list-style: none;
	padding: 0;
	}
		
#footer li	{
	display: inline;
	margin-right: 6px;
	}
		
/*
=6. main navigation
============================
*/

#content-primary {
	float: left;
	width: 80%;
	padding-top: 12px;
	position: relative;
	overflow: hidden;
	left: 21%;
	background: transparent url(images/pebbles.jpg) 90% 0% no-repeat;
	min-height: 320px;
}

* html #content-primary {
	hei ght: 320px;
	margin-bottom: 0;
}

* html .home #content-primary {
	hei ght: 500px;
	margin-bottom: 0;
}

.post	{
	padding-right: 30%;
	}

#mainnav {
	float: left;
	width: 16%;
	position: relative;
	left: -77%;
	overflow: hidden;
	background: #eeebe8 url(images/menu-bot.gif) bottom left no-repeat;
	margin-bottom: 30px;
	}

#navinner {
	background: transparent url(images/menu-top.gif) top left no-repeat;
	padding: 18px 0;
	}

#navinner ul	{
	list-style: none;
	padding: 0;
	margin: 0;
	}

#navinner #nav-primary	{
	margin-bottom: 18px;
	}

#navinner #nav-secondary	{
/*	padding-top: 18px;
	border-top: 1px dotted #356fb8;
*/	font-size: 0.9046em;
	}

#navinner li	{
	border-bottom: 1px solid #fff;
	margin-bottom: 5px;
	}

#navinner a:link,
#navinner a:visited	{
	color: #444444;
	font-weight: bold;
	text-decoration: none;
	display: block;
	width: auto;
	border-bottom: 1px solid #ccc;
	padding: 0 12px;
	padding-bottom: 6px;
	}

#navinner #nav-secondary a:link,
#navinner #nav-secondary a:visited	{
	font-weight: normal;
	border-bottom: 1px solid #ccc;
	}

#navinner a:focus,
#navinner a:hover,
#navinner a:active	{
	color: #356fb8;
	text-decoration: underline;
	}

#subnav,
#searchform	{
	float: none;
	clear: both;
	position: absolute;
	top: 85px;
	right: 23px;
	}

#searchform	{
	left: auto;
	right: 0;
	}

#subnav ul	{
	list-style: none;
	padding: 0 0 0 18px;
	margin: 0;
	}

#subnav li	{
	display: inline;
	padding: 0;
	margin: 0 5px 0 0;
	}

/*
=7. form
============================
*/


/*
=8. tables
============================
*/

table	{
	position: relative;
	width: 100%;
	margin: 0 auto 1.5em auto;
	border: 1px solid #ccc;
	border-collapse: collapse;
	}
	
th, td	{
	padding: 0.5em 1em;
	border-collapse: collapse;
	border: 1px solid #ccc;
	border-width: 0 0 1px 0;
	background-color: #fff;
	vertical-align: top;
	}
	
th	{
	text-align: left;
	background: #ffffff url('images/background.gif') top left repeat-x;
	}
	
tfoot td	{
	background: #c6355d url('images/tfoot-background.gif') bottom left repeat-x;
	font-weight: bold;
	color: #f7f7f7;
	}

#pay tbody td,
#pension tbody td	{
	padding-bottom: 0;
	}
	
.ruled	{
	background-color: #f2f2f2;
	}
	
/*
=9. links
============================
*/

a:link,
a:visited	{
	font-size: inherit;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: normal;
	color: #356fb8;
	text-decoration: underline;
	}

a:focus,
a:hover,
a:active	{
	text-decoration: none;
	color: #356fb8;
	}
	
#subnav a:link,
#subnav a:visited	{
	font-weight: bold;
	color: #fff;
	text-decoration: none;
	}

#subnav a:focus,
#subnav a:hover,
#subnav a:active	{
	text-decoration: underline;
	color: #ebebeb;
	}