table, img, div {
	margin: 0px;
	padding: 0px;
}
/*Minimal CSS reset*/
* { margin:0px; padding:0px; font-size:0.95em;}

body {
	background-color:#000000;
	background-repeat: repeat-x;
}

/*divContainer Styles*/
#divContainer {
	font-family:Arial, sans-serif;
	width:1058px;
	height: auto;
	background-color: #FFFFFF;
}
#header {
	height: 110px;
	position: relative;
	width: 1058px;
	margin-bottom: 5px;
	background: #CDCF19;
}
#leftBar {
	height: auto;
	width: 175px;
	float: left;
	margin-right: 3px;
}
#divHeader ul {
	position: absolute;
	width: 933px;
	left: 15px;
	list-style-type: none;
	top: 122px;
	text-align: center;
	font-family: Verdana, Geneva, sans-serif;
}
#divHeader ul li {display:inline;}
#divHeader ul li a {
	color:#FFF;
	margin-right:14px;
	font-size: 14px;
	text-decoration: none;
}
#divHeader ul li a:hover {color:#fff;}
#legal { margin-top: 0px; clear: both; text-align: center; color: #CBCB65; width: 960px; float: left; padding-top: 40px; padding-bottom: 40px; }

#grid {
	height: 548px;
	width: 707px;
	position: relative;
	padding-top: 10px;
	padding-left: 0px;
	float: left;
	background: #000000;
	margin-left: 5px;
}
#menuBob {
	width: 250px;
	height: 500px;
	float: left;
	background-color: #FFFFFF;
}

/***** In the tutorial ****/

#menu {
	width:226px;
	float:left;
	display:inline;
	margin:0px;
	padding-top: 0px;
	padding-right: 7px;
	padding-bottom: 0px;
	padding-left: 0px;
}
#anim {
	float:right;
	width:707px;
}
#menu li, #anim li {
	display:block;
	margin-right:7px;
	margin-bottom:7px;
	overflow:hidden;
	position:relative;
	float: left;
}
/*Position relativly so we can easily position the text later on*/

#menu li { width:224px; height:125px; background:#000 url(../i/menu_li_bg.jpg) repeat-x; text-align:right; border:solid 1px #ccc; padding: 0px;  margin-right: 0px;}
#greenBox {
	margin: 8px 5px 0px 0px;
	height: 126px;
	width: 170px;
	background: #606060;
}
#greenBoxTop {
	margin: 10px 5px 0px 0px;
	height: 126px;
	width: 170px;
	background: #606060;
}
#greenBoxGreen {
	margin: 8px 5px 0px 0px;
	height: 126px;
	width: 170px;
	background: #C2C816;
}
#greenBoxFooter {
	float: left;
	background: #606060;
	margin-top: 5px;
	margin-right: 8px;
	height: 126px;
	width: 226px;
}
#greenBoxFooterGreen {
	float: left;
	margin-top: 5px;
	margin-right: 8px;
	height: 126px;
	width: 226px;
	background: #C2C816;
}
#nearFooter {
	position: absolute;
	top: 656px;
	left: 182px;
	width: 705px;
	height: 150px;
}
#rightBar {
	float: right;
	width: 175px;
	margin-left: 0px;
	position: absolute;
	top: 114px;
	left: 888px;
}
#anim li {
	width:226px;
	height:127px;
	background-color:#333;
}
#menu li a, #anim li a {cursor:pointer;display:block; height:127px; overflow:hidden; text-decoration:none; color:#FFF;}
/*Overflow hidden hides the text inside of the block.*/

#divContainer li.last {margin-right:0px!important;}

#anim ul li a span.hover {background:transparent url(../i/gif_trans.gif) repeat;display:block;float:left;height:100%;position:relative;width:100%;}
/*transparent gif makes .hover clickable in the troublesome IE6*/

#menu li a span.trans {width:226px; display:block; position:absolute; bottom:0px; right:0px; padding:8px; background-color:transparent;}
#anim li a span.trans {width:459px; display:block; position:absolute; bottom:0px; left:0px; padding:8px; background-color:#000;}
/*The width for the #anim span.trans is the maximum width of the expanded <li> / block - the .trans span is absolutely positioned to the bottom of the .hover span*/
#anim li a span.heading, #menu li a span.heading {font-size:1.8em!important; color:#FFF; margin-bottom:3px;}
/*You can tweak font sizes and colours*/
#anim li a span.trans span.summary, #menu li a span.trans span.summary {
	display:block;
	clear:both;
	font-size:1.2em;
	color:#CBCB65;
	font-family: Geneva, Arial, Helvetica, sans-serif;
}		
/*You can tweak font sizes and colours*/


#anim li.a {
	background: url(../i/grid/a.jpg) no-repeat left;
}
#anim li.b {background-image:url(../i/grid/b.jpg); background-position: center; }
#anim li.c {
	background-image:url(../i/grid/c.jpg);
	background-position: left;
}
#anim li.d {background-image:url(../i/grid/d.jpg); background-position: center; }
#anim li.e {background-image:url(../i/grid/e.jpg); background-position: center; }
#anim li.f {
	background-image:url(../i/grid/f.jpg);
	background-position: left;
}
#anim li.g {background-image:url(../i/grid/g.jpg); background-position: center; }
#anim li.h {background-image:url(../i/grid/h.jpg); background-position: center; }
#anim li.i {background-image:url(../i/grid/i.jpg); background-position: center; }
#anim li.j {background-image:url(../i/grid/j.jpg); background-position: center; }
#anim li.k {background-image:url(../i/grid/k.jpg); background-position: center; }
#anim li.l {background-image:url(../i/grid/l.jpg); background-position: center; }
/* Change the background position to either left, right or center to achieve the desired effect. */ 
#menu1 {
	background-color: #096;
	width: 250px;
	height: 80px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 29px;
	color: #53524A;
	text-align: right;
	font-weight: lighter;
	margin-bottom: 15px;
}
#menu2 {
	background-color: #06F;
	width: 200px;
	height: 80px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 29px;
	color: #53524A;
	text-align: right;
	font-weight: lighter;
	float: right;
	margin-bottom: 15px;
}
#menu3 {
	background-color: #936;
	width: 250px;
	height: 80px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 29px;
	color: #53524A;
	text-align: right;
	font-weight: lighter;
	float: right;
	margin-bottom: 15px;
}
#menu4 {
	background-color: #CF3;
	width: 250px;
	height: 80px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 29px;
	color: #53524A;
	text-align: right;
	font-weight: lighter;
	float: right;
	margin-bottom: 15px;
}
#menu1 .text {
	margin-top: 60px;
}
#divContainer #mainContent #contentRight a {
	color: #FFFFFF;
}