/* Generic
================================== */
/* Sets all margins and padding initially to zero. */
* {margin:0; padding:0;}

/* Eliminates problem with Firefox who sees image as a hyperlink. 
Will disappear with border set to 0pt. */
img
{
	border-width: 0pt;
	margin: 0;
	padding: 0;
}


/* Typography generic
================================== */

/* Sets the generic font and font size for body. Also sets background colour. 
Center text to center whole layout in IE5.5. Than bring back left later in wrapper. 
Margin for top. */
body
{
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 80%;
	margin-top: 35px;
	background-color: #402A20;
	background-image: url(../images/Back_For_Good_BG.gif);
	background-repeat: repeat-x;
	background-position: center top;
}

/* Standard paragraph. Set blue colour for text. 
Line-Height for leading.*/
p
{
	color: #0E50A1;
	line-height: 145%;
	text-align: center;
	padding-top: 10px;
}

/* Heading (Name) to be bigger and bolder. */
h2
{
	color: #0E50A1;
	text-align: center;
	font-size: 120%;
	padding-top: 7px;
}

/* Class for bold text. */
.p_bold
{
	color: #0E50A1;
	font-weight: bold;
}

/* Orange vertical bar. */
.p_orange
{
	color: #E69D00;
}

/* Smaller font for Association text. */
.p_smaller
{
	font-size: 77%
}


/* Links generic
================================== */

/* Define generic properties for all links. No underline and set font size.
Also background colour to be inherited. Then set colour for all link states. */
a
{
	text-decoration: none;
	font-size: 100%;
	background-color: inherit;
}

/* Links to be burnt orange. */
a:link
{
	color: #BF491F;
}

/* Visited, hover and active links to be orange. */
a:visited, a:hover, a:active
{
	color: #E69D00;
}


/* Wrapper
================================== */

/* Order important for search engines. Calculations: 
300px(side) + 200px(primary) + 300px(secondary). */

/* Main wrapper with centres the whole page with set width. 
Re-align the text again to the left, after it was all centred in body tag for IE5.5. */
#wrapper
{
	width: 800px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}


/* Header
================================== */

/* Top header with same width as wrapper and set height. */
#header_one
{
	width: 800px;
	height: 100px;
}

/* Position the header image. */
#header_one img
{
	padding-left: 220px;
	padding-top: 65px;
}


/* PrimaryContent (middle column)
================================== */

/* Three main columns, named in order of importance and display when styles switched off.
Firstly display:inline is required for IE6 for correct column display. Set height. */
#primaryContent
{
	float: left;
	width: 800px;
	display: inline;
	background-color: #F2E6C5;
	height: 270px;
}

/* Specifying threeColLayout in the body will activate the following div 
instead of the default primaryContent -> not IE 5.5 + 6. 
Float left, set width to 200. Margin on left to allow for sideContent with 300px width. */
#threeColLayout #primaryContent
{
	float: left;
	width: 200px;
	margin: 0 0 0 300px;
}

/* Position logo correctly in middle column. */
#primaryContent img
{
	padding-left: 40px;
	padding-top: 30px;
}


/* SecondaryContent (right column)
================================== */

/* Secondly content to the right of primary content. Float left. Set width to 300px. Set height. */
#secondaryContent
{
	float: left;
	width: 300px;
	background-color: #F4EFDF;
	height: 270px;
}


/* SideContent (left column)
================================== */

/* Last comes the side content on the left hand side. 
Width 300px and negative margin of -800px to the left. Set height. */
#sideContent
{
	float: left;
	width: 300px;
	margin: 0 0 0 -800px;
	background-color: #F4EFDF;
	height: 270px;
}


/* Footer
================================== */

/* Footer with same width as wrapper. Cleared both sides. Footer is required for faux-columns. */
#footerBar
{
	clear: both;
	width: 800px;
	height: 20px;
}

/* Paragraph style for footer text. Centred and smaller. 
Padding top and bottom to even out vertically. */
#footerBar p
{
	font-size: 80%;
	text-align: left;
	color: #F4EFDF;
	padding-top: 5px;
	padding-bottom: 5px;
	line-height: 1.3;
}