body{
	margin: 0px;
	padding: 0px;
	color: #400000;
	font-weight: bold;
	font-size: 14pt;
	background: #ccff99 url('images/green.gif') repeat;
}
h1{
	font-size: 36pt;
}

h2{
	font-size: 20pt;
}

p.t1{
	font-size: 12pt;
    color: black;
    font-weight:bold;
    text-align:center;
}

#mainContainer{
	float: left;
	width: 100%;
}

/* Menu Styles
--------------------*/
#menuContainer{
	float: left;
	width: 20%;
}

#menuContainer hr{
	color: #400000;
	width: 90%;
}

/* This css (logo) allows you to have the logo as a link to your website home, the image is the background and the 
   text is hidden, this helps with SEO (Search Engine Optimization). Don't worry about this part to much, it's a 
   little complicated. */

#logo a:link,
#logo a:visited,
#logo a:hover,
#logo a:active{
	display: block;
	width: 200px;
	height: 178px;
	margin: 10px auto 0px auto;
	background: url('images/ntclogo2.gif') no-repeat;
	border: none;
	text-decoration: none;
}#logo a span{	visibility: hidden;}
#cssFlyoutMenu {display: block;	clear: both; position: relative; width: 150px; margin: 0px auto 0px auto;}
#cssFlyoutMenu ul li a, #cssFlyoutMenu ul li a:visited {display:block; margin: 2px 0px 0px 0px;	padding: 2px 5px 2px 5px; text-decoration:none;	width: 140px; text-align: center; background: #F9F6E4; color: #408080; border: solid 1px #376206; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; font-weight: bold; font-size: 14pt; }
#cssFlyoutMenu ul {padding:0; margin:0; list-style-type: none;}
#cssFlyoutMenu ul li {float:left; margin-right:1px;	position:relative;}
#cssFlyoutMenu ul li ul {display: none;}
#cssFlyoutMenu ul li:hover a {color: #400000;}
#cssFlyoutMenu ul li:hover ul {display:block; position:absolute; top:2px; left:153px; width:150px;}
#cssFlyoutMenu ul li:hover ul li a.hide {background:#ccc; color:#000;}
#cssFlyoutMenu ul li:hover ul li:hover a.hide {width:150px;}
#cssFlyoutMenu ul li:hover ul li ul {display: none;}
#cssFlyoutMenu ul li:hover ul li a {display:block; margin: 0px 0px 1px 0px; padding: 2px 5px 2px 5px; text-decoration:none; width: 140px; text-align:center; color: #408080; background: #F9F6E4; border: solid 1px #376206; -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;}
#cssFlyoutMenu ul li:hover ul li a:hover {color: #400000;}

/* Content Styles
------------------*/
#contentContainer{
	float: left;
	width: 78%;
	padding: 10px;
}

#contentContainer hr{
	color: #400000;
	width: 100%;
}

#contentContainer ul{
	margin: 0px 0px 0px 10px;
	padding: 0px;
}

#contentContainer ul li{
	list-style-type: none;
}

.black{
	color: #000000;
}

#footer{
	width:100%;
    font-size: 10pt;
	text-align: center;
}

#footer hr{
	clear: both;
}

#footerMenu{
	text-align:center;
    font-size: 10;
	width: 600px;
	margin: 0px auto 0px auto;
}

#footerMenu ul li{
	float: left;
	list-style-type: none;
	padding: 2px 5px 2px 10px;
}

#footerMenu ul li.noListMarker{
	background: none;
}

#footerMenu ul li a:link,
#footerMenu ul li a:visited{
	color: #408080;
	text-decoration: none;
}

#footerMenu ul li a:hover,
#footerMenu ul li a:active{
	color: #408080;
	text-decoration: underline;
}

/* This is what I was talking about */
#contentContainer img{
	border: solid 1px #000000 !IMPORTANT; /* Adding !IMPORTANT over rides any other styles */
	padding: 4px;
	background: #ffffff;
}

#contentContainer img:hover{
	background: #ffffff;
}/**************************************************************************** * Here's the styles for the lists were gonna use for your images list, one  ** for the left and one for the right.										*****************************************************************************/.imageListLeft{	float: left;	width: 44%;	/* margin: top right bottom left */	margin: 0% 3% 0% 3%;	padding: 0px; /* Thank you very much IE, reset to 0 */	text-align: center; /* Works on images too */}.imageListRight{	float: right;	width: 44%;	/* margin: top right bottom left */	margin: 0% 3% 0% 3%;	padding: 0px; /* Thank you very much IE, reset to 0 */	text-align: center; /* Works on images too */	}/* Now that we have our ul class elements set, the rest can have the same values */.imageListLeft li,.imageListRight li{	list-style-type: none; /* Get rid of that nasty dot */}/* Image styles */.imageListLeft li img,.imageListRight li img{	margin: 10px;	border: solid 1px #000000 !IMPORTANT; /* Adding !IMPORTANT over rides any other styles */	padding: 4px;	background: #ffffff;	}/* Caption Styles */.imageListLeft li p,.imageListRight li p{	font-size: 12pt;    color: black;    font-weight:bold;    text-align:center;}/* btw, All this took about 10 mins... As for your t1 class style, try and use purposeful names,   just good practice, makes it easy for other programmers working with your code, don't worry    I've seen worse... MUCH worse */