/*The styling on the body tag centres the content and keeps it at a fixed width*/
body {
	padding: 0px;
	height: 600px;
	width: 750px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	font-family: Arial, Helvetica, sans-serif;
	color: #999999;
}
/*The use of a non web safe colour has been decided upon for this menu as it better matches the supplied background images*/
ul#mainNav {
	padding: 0px;
	height: 25px;
	width: 540px;
	background-color: #A2CE5B;
	margin-top: 10px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	float: right;

}
ul#mainNav li {
	margin: 0px;
	padding: 0px;
	float: left;
	height: 25px;
	width: 90px;
	list-style-type: none;
	clear: right;
	text-align: center;
}
/*I chose a different background colour for this sub menu so as to make it more obvious again I didn't keep to a web safe pallet as the colours were too restrictive*/
ul#menu1 {
	margin: 0px;
	padding: 0px;
	float: right;
	height: 25px;
	width: 540px;
	background-color: #BCCB86;
}
/*I positioned the navigation and sub nav using float left*/
ul#menu1 li {
	margin: 0px;
	float: left;
	height: 23px;
	width: 135px;
	list-style-type: none;
	font-size: smaller;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 2px;
	padding-left: 0px;
}
ul#menu1 a {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	text-align: center;
	margin: 0px;
	height: 23px;
	width: 135px;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
/*This ligter colour was used to create a rollover effect for easier navigation*/
ul#menu1 a:hover {
	background-color: #CEDB95;
}
/*A hidden class was used to hide the sub menu so it could be displayed later using the javascript toggle menu*/
.hidden {
	display: none;
}
/*This was used to take the image out of it's normal flow and place it in a fixed position to the right of the content*/
p#img {
	width: 200px;
	position: absolute;
	top: 200px;
	left: 575px;
	padding: 0px;
	margin: 0px;
}


ul#mainNav a {
	display: block;
	color: #FFFFFF;
	text-decoration: none;
	margin: 0px;
	height: 23px;
	width: 90px;
	text-align: center;
	padding-top: 2px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}
/*As above this effect was used for a rollove effect and easier navigation*/
ul#mainNav a:hover {
	background-color: #CEDB95;
}

/*I wanted important headings to be underlined with bigger text*/
h2,h3,h4,h5 {
	margin: 0px;
	padding: 0px;
	text-align: left;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
	font-weight: lighter;
	font-size: large;
}
/*As none of the content was too long I could put it in a smaller area allowing for a shorter page without the user having to scroll too far*/
div#content {
	font-size: smaller;
	height: 290px;
	margin-left: 285px;
	width: 255px;
	overflow: auto;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-top: 40px;
}

/*This was used to hide the main heading allowing for a logo to be applied and so should be able to be seen by browsers not supporting css*/
h1 span {
	display: none;
	margin: 0px;
	padding: 0px;
}
/*This was used to apply the logo image*/
h1 {
	margin: 0px;
	padding: 0px;
	height: 125px;
	width: 750px;
	background-image: url(../images/kat_logo.jpg);
	background-repeat: no-repeat;
}
/*The wrapper was put in to keep all the absolutely positioned elements in place and to display the background images behind the conetent*/
div#wrapper {
	position: absolute;
	height: 600px;
	width: 750px;
	left: auto;
	right: auto;
	margin: 0px;
	padding: 0px;
	background-image: url(../images/leaves_bg.jpg);
	background-repeat: no-repeat;
	background-position: left bottom;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #CCCCCC;
	border-bottom-color: #CCCCCC;
	border-left-color: #CCCCCC;
}
a {
	color: #CC0066;
}
.answers {
	font-style: italic;
	color: #A2CE5B;
}
p#moveLogo {
	position: absolute;
	width: 160px;
	height: 175px;
	top: 200px;
	left: 575px;
	}