body {
	background: url('images/title_bg.jpg');
	background-repeat: repeat;
	line-height: 100%;
	color: #000000;
	font-family: "Century Gothic", "Avant Garde", sans-serif;
	padding-right: 10px;
}

#wholepage {
	margin: 0 auto;
	top:0px;
	width:100%;
	z-index:1;
	padding: 0px;
}


#header {
	margin: 0px;
	padding: 0px;
	width:100%;
	height: 150px;
	z-index:3;
}

#menu {
	background: #253c01 url("images/gradient_vert_dark_light.png") bottom left repeat-x;
	/* #253c01 in the line above is the same as the dark colour in the gradient.
		This means when the text size increases, it still looks fine with the gradient.
		Try it yourself. Change the color, then increase your text size to see the results */
	border: 2px solid #3f8737;
	height: 30px;
	line-height: 2em;
	font-size: 0.9em;
	font-weight: bold;
	overflow: hidden;
	/* overflow:hidden is there because sometimes the borders on
		the #menu li can keep going outside of the #menu for some reason.
		overflow:hidden just hides anything that spills over */
}

#menu ul {
	list-style: none;
	margin: 0;
	padding: 0.1em 0 0 0;
}

#menu li {
	display: inline;
	border-left: 1px solid #253c01;
	border-right: 1px solid #4b7902;
	padding: 0;
	margin: 0;
	float: left;
	/* float: left is used for all browsers. Makes the #menu li's display as they should. Remove it to see what happens */
}

#menu a:link, #menu a:visited {
	font-size: 1em;
	color: #fffc00;
	text-decoration: none;
	padding: 0 10px;
	
}

#menu a:hover {
	text-decoration: underline;
	color: #8bb206;
}


#wrapper-main {
	padding:10px;
	background-color: #a4e19e;
	border: solid 3px #3f8737;
}

#right {
	float:right;
	padding: 0px;
	margin-right: 15px;
	width:200px;
	z-index:4;
}

.sidebar {
	width:200px;
	border: solid 2px #3f8737;
	margin: 0px 10px 10px 10px;
}

.sidebar p{
	text-align: justify;
	padding:5px;
	color: #000000;
	font-size: 0.75em;
}

.sidebar a, a:link, a:visited {
	font-size: 0.9em;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

.sidebar a:hover {
	font-size: 0.9em;
	color: #3f8737;
	text-decoration:
	underline; font-weight: bold;
}


.sidebox {
	float:right;
	width:200px;
	border: solid 2px #3f8737;
	margin: 5px;
}

.sidebox p{
	text-align: justify;
	padding:5px;
	color: #000000;
	font-size: 0.75em;
}

.sidebox a, a:link, a:visited {
	font-size: 0.9em;
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

.sidebox a:hover {
	font-size: 0.9em;
	color: #3f8737;
	text-decoration:
	underline; font-weight: bold;
}

#left {
	margin-right: 220px;
	padding: 10px;
	border: solid 2px #3f8737;
	background-color: #ffffff;
}


#footer {
	clear:both;
	background: url('images/gradient_vert_dark_light.png');
	background-repeat: repeat-x;
	background-color: #3f8737;
	color: #ffffff;
	padding: 5px;
	margin: 0px;
	z-index:2;
}
#footer a {
	color: #fffc00;
}


#opener {
	width: 90%;
	margin: auto;
	text-align: center;
	color: #000000;
}

#opener a, a:link, a:visited, a:hover {
	color: #000000;
	text-decoration: none;
}


.skipto {
	padding: 0px;
	margin: -5px;
	text-align: center;
	font-size: 0.1em;
}

p {
	text-align:justify;
	padding: 0px;
	line-height: 100%;
}
h2 {
	text-align:center;
	padding: 0px;
	font-size: 1.5em;
	line-height: 100%;
}
h1 {
	text-align:center;
	padding: 0px;
	font-size: 2em;
	line-height: 100%;
}
p.headertext {
	color: #000000;
}
h2.headertext {
	color: #000000;
}
h1.headertext {
	color: #000000;
}


a, a:link, a:visited { color: #000000; text-decoration: none; font-weight: bold;}
a:hover { color: #000000; text-decoration: underline; font-weight: bold;}