body {
	margin: 15px 0;
	text-align: center;
	background: #FFFFCC url("images/papier.gif") top left;
	color: #333333;
	font-weight: normal;
	line-height: 20px;	padding: 0px;
}

#wrapper-outer {
	margin: 0 auto;
	text-align: left;
	width: 90%;
	border-right: solid 3px #444;
	border-bottom: solid 3px #444;
	border-left: solid 2px #aaa;
	border-top: solid 2px #aaa;
	background: #fff url("images/navbg.gif") top left repeat-y;
	padding: 0;	/* The above line fixes a problem in IE when the #rightbar is longer than the #content
		Try it yourself. Change the color to red to see it easily, and then set the font size in IE
		to small, or add more content in #content */
}

#header, #footer {
	background: #253c01 url("images/gradient_vert_light_dark.png") top 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 */
	line-height: 2em;
	font-size: 0.9em;
	padding-left: 5px;
	padding-right: 5px;
	color: #8bb206;
}

#header {
	border-bottom: solid 2px #685; 
}

#header .rightSpan {
	float: right;
	padding: 2px 0 0 0;
	font-style: italic;
}

#header #btnSearch {
	color: #e80;
	border: 1px solid #797;
	background-color: transparent;
	padding: 1px;
	font-size: 0.7em;
}

#header #txtSearch {
	background-color: white;
	border: 1px solid #8a8;
	margin-left: 10px;
	font-size: 0.9em;
}

#header a, #footer a {
	/* color: #8bb206; */
	color: #FFFFFF;
	text-decoration: none;
	background-color: transparent;
}

#header a:hover, #footer a:hover {
	text-decoration: underline;
}


#banner {
	background: #4b7902 url("images/forest_bg.jpg") top left repeat-x;
	height: 115px;
	line-height: 75px;
	padding-left: 160px;
}

#banner h1 {
	margin: 0;
	padding: 0 100px 0 0;
	font-size: 1.6em;
	font-weight: bold;
	color: #FFFFFF;
	text-align: right;
}

#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-top: 1px solid #8bb206;
	border-bottom: 1px solid #8bb206;
	height: 2em;
	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 {
	/* color: #8bb206; */
	color: #FFFFFF;
	text-decoration: none;
	padding: 0 10px;
	
}

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

#hdr {
 background:#990000;
 padding: 0px;
 }

#hdr h1 {
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	text-align: left;
	text-transform: capitalize;
	margin: 0;
	border:solid #000000;
	border-width:1px 0 1px 0;
	padding: 1em;
 }

#nav {
	float:left;
	margin: 0px 0px 0px 0px;
	width: 150px;
	padding: 5px;
	text-align: left;
	padding-bottom: 10px;
	background-color: #336600;
	color: #FFFFFF;
}
#nav dl {
 margin: 0;
 padding: 10px 0 0 0;
 list-style: none;
}
#nav dt {
	margin: 0;
	text-align: center;
}
#nav dd {
	text-align: left;
	width:100%;
	border: 1px dashed green;
	margin: 0;
}

#nav dd a {
	color:#94CC29;
	text-decoration:none;
	display:block;
	background:inherit;
	padding: 5px;
}

#nav dd a:hover {
	background:#94CC29;
	color:white;
	padding: 5px;
}

#nav img {
	border :0;
}

* html #nav {
	margin-right: 10px;
	padding-bottom: 100px;
	margin-bottom: 0px;
} /*correct IE right margin*/ 



#content {
	padding: 15px;
	margin: 10px 10px 10px 180px;
	border: 1px dashed green;
}

* html #content {height:1%}
/* The above line fixes a problem in IE. All other browsers ignore this, except IE5 Mac. If you remove it, then set
	the font size to small in IE (so that the #rightbar is taller than #content), the content in #content vanishes! Oh joy.
	This hack has to be used with the one below if you care about IE Mac */
* > html #content {height:auto}
/* Fixes the problem that height: 1% does in IE Mac. */

/* The above 2 hacks can also be used to fix the IE 3 Pixel Jog. (see http://www.positioniseverything.net/explorer/threepxtest.html) */

.cap {

float: left;
width: auto;
font-size: 40px;
line-height: 40px;
font-weight: normal;
color:#444444;
font-family: georgia, times;

}

#footer {
	border-top: solid 1px #8bb206;
	clear: both;
	font-size: 90%;
}
#footer .rightSpan {
	float: right;
	font-style: italic;
}


h2 { font-size: 1.3em; }

h3 { font-size: 1em; }