/* Sets all margins and padding initially to zero. */
* {margin:0; padding:0;}

/* Defines standard body text with sans-serif fonts. 
Zero margins and padding, so no white border around. Line height for leading.
Text aligned centered here for IE5.5 -> Later in wrap text aligned left again.*/
body
{
	color: black;
	background-color: #993366;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 100%;
	margin: 0px;
	padding: 0px;
	margin-top: 20px;
	background-image: url(../images/Background_03.gif);
	text-align: center;
	line-height: 1.2;
}

/* Wrap around all content, with fixed width and centres the layout. 
Text aligned left to reverse from body hack. Faux filler for soft edge. */
#wrap
{
	width: 950px;
	margin-left: auto;
	margin-right: auto;
	background-color: #FFF;
	background-image: url(../images/Side_Border_950.gif);
	background-repeat: repeat-y;
	text-align: left;
}

/* Faux filler for soft edge. Set background colour. */
#header
{
	background-color: #993366;
	background-image: url(../images/Side_Border_Plum_950.gif);
	background-repeat: repeat-y;
}

/* Heading and paragraph style in header div with padding top and colour. 
Text aligned centered. */
#header h1, #header p
{
	padding: 10px;
	text-align: center;
	color: white;
}

/* Class for bold text (span) inside header paragraphs. */
.header_text_bold, .text_bold
{ 
	font-weight: bold; 
}

/* Give distance below paragraph inside header. */
#header p
{
	padding-bottom: 30px;
	font-size: 120%;
}

/* Left sidebar for navigation. Float left. Set width and place background image (line) on RHS. */
#sidebar
{
	background-color: transparent;
	float: left;
	width: 342px;
	background-image: url(../images/Vertical_Line_Long.gif);
	background-repeat: no-repeat;
	background-position: right center;
}

/* Unordered list inside sidebar with margin set ot 0. Allow for padding. 
Bottom margin for distance to footer if main text is short. */
#sidebar ul
{
	margin: 0;
	padding: 0;
	padding: 10px 10px 0 40px;
	margin-bottom: 20px;
}

/* Remove the bullet points from the list items. Smaller font size for nav items 
(because they are long). Font bold. */
#sidebar li
{
	list-style: none;
	padding: 10px 10px 0 0;
	font-size: 100%;
	font-weight: bold;
}

/* Main content. Float right. Set width but leave roiom to breathe (750-270 = 480 but -10). */
#main
{
	background-color: transparent;
	float: right;
	width: 595px;
}

/*Set colour and spacing for heading 2. Font-size 130%. */
#main h2
{
	margin-top: 10px;
	padding: 5px 50px 0 40px;
	color: black;
	font-size: 140%;
}

/*Set colour and spacing for heading 3. Font-size 110%. */
#main h3
{ 
	margin-top: 10px;
	padding: 5px 50px 0 40px; 
	color: black;
	font-size: 120%;
}

/* Spacing for paragraphs in main content. */
#main p 
{ 
	padding: 7px 50px 0 40px; 
}

/* Class for bold text inside normal main text. */
.p_bold
{
	font-weight: bold;
}

/* Smaller font for legend. */
.p_legend
{
	font-size: 75%;
}

/* Smaller italicised text in standard paragraph. */
.p_italics_head, .p_top
{
	font-style: italic;
	font-size: 90%;
}

/* Unordered list inside main content. */
#main ul
{
		padding: 7px 50px 0 70px; 
}

/* Same background colour for footer as for header. Faux filler again. 
Clear both for faux columns. */
#footer
{
	background-color: #993366;
	background-image: url(../images/Side_Border_Plum_950.gif);
	background-repeat: repeat-y;
	clear: both;
}

/* Styel text inside footer. */
#footer p
{
	padding: 5px 0 5px 0;
	margin: 0;
	text-align: center;
	font-size: 85%;
	color: #FFF;
}

/* All links to have no underline. */
a
{
	text-decoration: none;
}

/* Different colours for link states. */
/* Plum for link itself. */
a:link
{
	color: #993366;
}

/* Lighter Plum colour for visited. */
a:visited
{
	color: #AD5C85;
}

/* Even lighter plum colour for hover and active. */
a:hover, a:active
{
	color: #CC99B2;
}

/* Colours for link ottimoto. */
#footer a:link, #footer a:visited
{
	color: #CC99B2;
}

#footer a:hover, #footer a:active 
{ 
	color: #FFF; 
}