html, body, ul, ol, li{
margin: 0; 
padding: 0; 
}
body {
    background-color: #2C2421; 
    background-image: url(../images/background.gif);
	font-family: Arial, Helvetica, sans-serif;
	font-size: 90%; 
	margin: 0 auto; 
	min-width: 900px; 
	padding: 0; 
	text-align: center; 
	}
	/*the wrapper div is our container div, all other divs are wrapped within the wrapper*/
#wrapper {
	background-color: #666; 
	margin: 0 auto; 
	text-align: left; 
	width: 896px;
	background-image: url(../images/content-background-blackgre.jpg); 
	border-width: 1px 2px;
	border: solid #000;
}

#topnav {
	width: 900px;
	height: 30px;
	background-image: url(../images/navigation-background.jpg);
	background-color: #302B25;
}

#navbar li {
	float: left;/* floats the li left*/
	background-image: url(../images/navigation-background.jpg);/*background image of our links */
	list-style-type: none;	/* removes he bullet style on an individual list item*/
}#navbar ul {
	height: 30px;
	text-align: center;/*aligns the text center */
	background-color: #8AAC9B; /*sets the background colour */
}#navbar ul li a {
	background-image: url(../images/navigation-background.jpg);/*background image of our links */
	color: #EDF1F2;/*link text colour */
	display: block;/*  A block element displays as a block, it forces a line break. So think of a block as a brick :)*/
	font-weight: bold;/*sets the set to bold */
	font-size:85%;/*sets the font size */
	height: 30px; /*sets the height of the links */
	padding: 0;
	text-decoration: none; /*takes out underline from the links */
	width: 112px; /*sets the link widths to 100px the nav div is 700 pixels wide and we have seven links of 100 pixels therefore 700 */
	margin-top: 5px;/*sets the top margin */
	padding-top: 8px;/*sets the padding to 8pixels */
}

#navbar ul li a:hover,
#navbar ul li a:focus {
	background-image: url(../images/navigation-background-hover.jpg);
	color: #C7D8CF;
	display: block;
	margin-top: 5px;
	padding-top: 8px;
	background-color: #2B2320;
}
#navbar a:active {
	color: #FFF;
	display: block;
	background: url(../images/navigation-background.jpg);
}
#header {
	background-image: url(../images/banner1.jpg);/*the header div is 700 pixels wide and we have inserted a background image that is 700 pixels wide by 230 pixels */
	/*note the dimensions here are the same as our image "header.jpg" */
	height: 244px;
	
/*content div which holds the contentleft div and right div*/
}
#content {
}
/*below you notice that our contentleft div and  right div have a global width of 685 pixels, we have floated the contentleft div left and the right div is floated right*/
#content .contentleft {
   float: left;
   width: 690px;
   line-height: 130%;/*sets the line height to 130% as to make the text easier to read*/
   background-image: url(../images/p-background-black.jpg);/*The background-image on this div is made by a repeating .jpg placed on the contentleft div.*/
}
#right {
	width: 200px;
	float: right;
}
#footer {
	text-align: center;/*centers the text in the footer div*/
	background-color: #000;/*sets the background to black*/
	height: 30px;/*sets the height of the footer div*/
}

.paragraphtext-black {
	margin-left: 35px; margin-right: 25px; font-family: trebutchetms, Arial, Helvetica, sans-serif;
	font-size: 90%; text-align: justify; color: #B5B5B1; 
}
.clear {
	clear: both;
	height: 25px;
}

.toproundedcorner {
	background-image: url(../images/rounded-background.jpg);
	height: 45px;
	width: 690px;
}	
.toproundedcornerbottom {
	background-image: url(../images/rounded-background-bottom.jpg);
	height: 45px;
	width: 690px;
}

#content .contentleft p, h1, h2 {
     margin: 0px 5px 0 0px
    ;font-size: 90%;
}
h1 {font-size: 200%;color: #ffffff; 
}
h2 {font-size: 150%;color: #ffffff; 
}
#right p{
	margin:0px 15px 0 15px;/*sets the p margin to 1px top 3px right 0 px bottom 4px left*/
	font-size: 85%;/*sets size of p element */
	color: #FFF; /*sets the colour to white */
}
/*below is the text setting for the footer div, font is set to 90% size, white and we have added 3px padding to give the text some air */
#footer p {
	font-size: 90%;
	color: #FFF;
	padding-top: 3px;
}