html, body, ul, ol, li, p, h1, h2, h3, h4, h5, h6{
/* set everything to zero for a good starting point this selector at the top is like belt and braces,
you can see immediately when designing if you haven't set margins and padding to an element as they become all scrunched up together.*/
margin: 0; /* sets the margins to zero on the body */
padding: 0; /* sets the padding to zero on the body */
border: 0; /* deletes any borders */	
}
html, body {
	background-color: #000000;
/*	background-image: url(back1.jpg); */
	text-align: justify;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: small;
	text-align: justify;
	color: #DDD;
	
}


h1, h2, h3, h4, h5 {
	margin: 0;
}

/* Header */

#header {
	width: 800px;
	margin: 0 auto;
	color: #808080;
}

#header h1 {
	float: left;
	margin: 0px 0 0 0px;
	font-size: 20px;
	letter-spacing: -7px;
}

#header h2 {
	float: right;
	margin: 40px 0px 0 0;
	font-size: 18px;
	letter-spacing: -2px;
}

/* Links */

a {
	color: #666666;
	font-weight: bold;
	text-decoration: none;
}

a:hover {
	color: #CCCCCC;
	font-weight: bold;
	text-decoration: underline;
}

/*start of navigation The UL element defines an unordered list. The element contains one or more LI elements that define the actual items of the list.*/
#topnav {
	width: 800px;/*sets the nav to a width of 700 pixels */
	height: 30px;/*sets the nav height to 30 px */
	background-image: url(back1.jpg);/*nav background image */
	background-color: #000000;/*sets the background colour of the Nav */
}

#topnav li {
	float: left;/* floats the li left*/
	background-color: #000000;
	list-style-type: none;	/* removes he bullet style on an individual list item*/
}
#topnav ul {
	height: 30px;
	text-align: center;/*aligns the text center */
	background-color: #000000; /*sets the background colour */ <!-- this was #8AAC9B -->
}#topnav ul li a {
	background-image: url(images/navigation-background2.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:110%;/*sets the font size */ <!-- this was 85% -->
	height: 30px; /*sets the height of the links */
	padding: 0;/*zeroes the padding*/
	text-decoration: none; /*removes the underline from the links */
	width: 114.2px; /*sets the link widths to 100px the nav div is 700 pixels wide and we have seven links of 100 pixels, yes you guessed it, that equals 700 */
	margin-top: 0px;/*sets the top margin */
	padding-top: 5px;/*sets the padding to 8pixels */
	padding-bottom: 8px;/*sets the padding to 8pixels */

}

#topnav ul li a:hover,
#topnav ul li a:focus {
	background-image: url(back1.jpg);
	color: #FFFFFF;
	display: block;
	margin-top: 0px;
	padding-top: 5px;
	padding-bottom: 8px;
}
#topnav a:active {
	color: #FFF;
	display: block;
/*	background: url(images/navigation-background.jpg); */
}



/* Content */

#content {
	width: 800px;
	margin: 0 auto;
	padding-top: 0px;
/*	background-image: url(images/content-background.gif); */
}

#colOne {
	float: left;
	width: 190px;
	margin-top: 20px;
	padding: 0 10px 0 20px;
}

#colTwo {
	float: right;
	margin-top: 20px;
	width: 540px;
	padding: 0 20px 0 20px;
}

#content h2 {
	margin-bottom: 20px;
	font-size: 59px;
	letter-spacing: -1px;
	color: #DDD;
}


#footer {
	width: 800px;
	margin: 0 auto;
	padding-top: 20px;
}


#footer p {
	text-align: center;
	padding: 0;
	font-size: 10px;
}

li#here {
	font-size: 10px;
	background-image: url(images/navigationhere2.jpg);/*background image of our links */
	color: #FFFFFF;/*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:110%;/*sets the font size */ <!-- this was 85% -->
	height: 30px; /*sets the height of the links */
	padding: 0;/*zeroes the padding*/
	text-decoration: none; /*removes the underline from the links */
	width: 114.2px; /*sets the link widths to 100px the nav div is 700 pixels wide and we have seven links of 100 pixels, yes you guessed it, that equals 700 */
	margin-top: 0px;/*sets the top margin */
	padding-top: 5px;/*sets the padding to 8pixels */
	padding-bottom: 8px;/*sets the padding to 8pixels */
}

.classy, h1
{
	color: #BBB;
	font-size: 77px;
}

.classy2, h2
{
	color: #DDD;
}



<style type="text/css">
<!--
.style1 {
	font-size: 20px;
	font-weight: bold;
	color: #CCCCFF;
}
.style2 {font-size: 20px}
.style3 {
	font-size: 12px;
	font-weight: bold;
	color: #8F30C9;
}
.style4 {
	color: #0033FF
}
.style5 {color: #FFFFFF}
.style6 {
	color: #E9CF17
}
.style7 {
	color: #8F30C9;
	font-weight: bold;
}
.style8 {color: #999999}
.style9 {
	color: #8F30C9
}
.style10 {
	color: #8F30C9;
	font-style: italic;
}
.style11 {
	background-color: #1D1335;
	color: #8F30C9;
	font-size: 16px;
	font-weight: bold;
	padding: 5px;
}
.style12 {color: #FFFFFF; font-weight: bold; }
.style14 {color: #FFFFFF; font-size: medium; }
.style15 {	color: #CCCCCC;
	font-size: small;
}
.style16 {color: #FFFFFF; font-weight: bold; font-size: small; }
.style19 {color: #CCCCFF}
.style20 {color: #FFFFFF; font-size: large; }
.style21 {color: #DD4915; font-weight: bold; }
.style22 {color: #CCCCFF;
	font-size: 19px;
}
-->
</style>
<!-- style11 was #1D1335 , darker is #0E091A & everything #8F30C9 was once #8117C5 -->