/* CSS Document */

body { /* set everything to zero for a good cross-browser starting point */
	margin: 0; /* zeroes the margins on the body */
	padding: 0; /* zeroes the padding on the body ~ Opera carries a default padding and requires this zeroing */
	border: 0; /* zeroes off any existing border */
	background-image: url(background.jpg);
	background-repeat:repeat-x;
	background-color: #1A1A1A; /* sets the body background colour */
	color: #ffffff;  /* set the default text color */
	text-align: center; /* Hack to centre the wrapper in IE5.x pc */
	font-family: Verdana, Arial, Helvetica, sans-serif; /* set the default fonts */
	font-size: 100.01%; /* Sets default font size. This odd value compensates for several browser bugs. First, setting a default font size in percent (instead of em) eliminates an IE/Win problem with growing or shrinking fonts out of proportion if they are later set in ems in other elements. Additionally, some versions of Opera will draw a default font-size of 100% too small compared to other browsers. Safari, on the other hand, has a problem with a font-size of 101%. Current "best" suggestion is to use the 100.01% value for this property */
	min-width: 770px; /* Prevents the body becoming narrower than our wrapper div - keeps the content from disappearing off the left edge with Gecko browsers */
}

#wrapper {
   width: 772px;/*sets the width for IE5.x's broken box model*/
	w\idth: 770px; /* sets the width of the wrapper for compliant browsers*/
	margin: 10px auto;/* centers the wrapper. First value - 5px is applied to the top and bottom margins, auto sets the excess space on the view port evenly to the left and right*/
	position: relative; /* important to position it relatively */
	background-color: #1A1A1A; /* sets the wrappers background color */
	text-align: left; /* Realigns the text to the left after the IE hack in the body rule */
}

#header {
	width: 770px;
	margin: 1px;
	border: 1px solid #FFFFFF;
}

#content {
	width: 560px;
	min-height: 330px;
	margin-left: 190px;
	margin-top: 15px;
	border: 1px solid #FFFFFF;
	font-size: 80%;
}

#content h1 {
	font-size: 150%;
	color: #ffffff;
}

#content a {
	font-size: 80%;
	color: #FFFFFF;
}

#legal_content {
	width: 560px;
	min-height: 330px;
	margin-left: 190px;
	margin-right: 20px;
	margin-top: 15px;
	border: 1px solid #FFFFFF;
	font-size: 60%;
}

#legal_content a {
	color: #FFFFFF;
}

#leftcol { /* Begin laying out the leftcol div */
	float: left; /* Floats the div to the left to make a column */
	display: inline;
	width: 150px; /* sets a width for the div - Imperative for IE mac */
	margin-bottom: 120px;
	margin-left: 20px; /*creates a margin on the left to move the div away from the wrapper's edge */
	margin-top: 25px; /* moves the div down from the banner */
}

/*#leftcol {
	float: left;
	display: inline;
	width: 150px;
	margin-top: 15px;
	margin-left: 10px;
	padding-top: 35px;
}*/

#leftcol #navigation {
	line-height: 100%; /* helps out IE 5.01 PC */
	width: 150px; /* sets a width for the div */
}

#leftcol #navigation ul {
	border-top: 1px solid #ffffff; /* sets a border to the top of the ul */
  	border-bottom: 1px solid #ffffff; /* sets a border to the bottom of the ul */
	list-style-type: none; /* removes the bullets from our list navigation */
	margin: 0; /* zeroes off the margins */
	padding: 0; /* zeroes off the padding */
	font-size: 75%; /* scales the font to 75% of the body font declaration*/
}

#leftcol #navigation ul li { /*The 3 margin property/value pairs are a hack to make the links butt together in IE 5.01 */
	padding: 0; /* zeroes off the padding */
	margin: 0; /* zeroes off the margins */
	margin: /**/ 0 0 -3px 0; /* This takes 3px off the bottom margin in IE 5.01 - IE 5.5 cannot read this hack so stays with the 0 value from the last margin property */
	ma\rgin: 0; /* IE 5.01 and IE5.5 cannot read this selector - resets the margins on other browsers back to zero - the escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */
}

#leftcol #navigation a, 
#leftcol #navigation a:visited { /* use dual selectors if the properties and values are the same for each */
	border-bottom: 1px solid #666666; /* sets the bottom border */
	border-left: 1px solid #ffffff; /* sets the left border */
	border-right: 1px solid #ffffff; /* sets the right border */
	color: #fff; /* changes the default text colour to white */
	display: block; /* required to make the links act like a button, having the full area "clickable" */
	padding: 4px 0 6px 4px; /* sets padding values to give the link text some "air" */
	text-decoration: none; /* removes the default underline */
	background-color: #333333; /* sets a background colour on the links which hides the roll over snowman image in the li selector */
	width: 150px; /* sets the width for IE5.x - content width plus border widths plus padding value = 6 extra pixels */
	w\idth: 144px; /* resets the width for IE6 and compliant browsers */
}

/* using the \ escape character as in w\idth - see final property declaration in the selector above */
/* IE 5.01 and IE5.5 cannot read this selector. The escape character must not come immediately before the letters a,b,c,d,e or f. If it does it will be seen as a hex character and the hack will fail */

#leftcol #navigation a:hover, 
#leftcol #navigation a:focus { /* use dual selectors if the properties and values are the same for each */
	background-color: transparent; /* prevents the dark blue background colour from the "a" selector showing and ensures the snowman image is seen on hover and focus */
	border-bottom: 1px solid #666666; /* changes the bottom border to white to give the hover state an indented look */
	color: #CCCCCC; /* changes the hover and focus text to black */
}

#legal {
	width: 770px;
	min-height: 10px;
	margin-top: 15px;
	background-image: url(divider.jpg);
	background-repeat: no-repeat;
	padding-top: 15px;
	text-align: center;
	font-size: 60%;
}

#legal a {
	color: #ffffff;
}

#valid {
	width:770px;
	text-align: center;
}

#valid a {
	text-decoration: none;
}