/*Minimal CSS reset*/

* { margin:0px; padding:0px; font-size:0.95em;}

body { background-color:#fff; }

/*divContainer Styles*/
#divContainer { margin-right: auto; margin-left: auto; font-family:Arial, sans-serif; width:960px; background-image: url(../i/bg2.jpg); height: 780px; background-repeat: no-repeat; }

#skipLinks {
	position: relative;
	left: 0px;
	font-size: 80%;
	padding-top: 10px;
	padding-bottom: 0px;
	margin-top: .5em;
	width: 100%;
	border-bottom-width: thick;
}
#skipLinks ul {
	margin: 0px;
	padding: 0px;
}
#skipLinks li {
	display: inline;
	margin: 0px;
	padding-left: 1.9em;
}
#skipLinks a {
	color: #042F66;
}
#time {
	margin-top: -1.2em;
	padding-right: 1.5em;
	color: #FFF;
	font-weight: bold;
	text-align: right;
	line-height: 1.75;
}
.offleft {
	margin-left: -9000px;
	position: absolute;
}
#flashcontent {
	padding-top: 6px;
	padding-left: 1.5em;
	width: 930px;
	height: 130px;
	}
#footer {
	clear: both;
	margin: 0em 1.2em 2em 1.4em;
	padding: 0.6em 0em 0.6em 0em;
	background: #fff;
	border-top: 1.5px solid #7C3437;
	border-bottom: 1.5px solid #7C3437;
	list-style-type: none;	
}
#footer p {
	margin: 0px 0px 2px; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding:  2px 7px 2px;
}
#footer ul {
	padding: 0px;
	list-style-type: none;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 5px;
	margin-left: 0px;
}
#footer li {
	margin: 0px;
	padding: 0px;
	float: left;
}
#footer a {
	color: #FFFFFF;
	text-decoration: none;
	display: block;
	padding-top: 0px;
	padding-right: 16px;
	padding-bottom: 0px;
	padding-left: 0px;
	margin-bottom: 2px;
}
#copyright {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #042F66;
	padding-top: 0px;
		padding-right: 16px;
	text-align: right;
	border-top-width: 0px;
	margin-top: -2em;
	letter-spacing: 1px;
}
#copyright ul {

	list-style-type: none;
}
#copyright li {
	float: right;
	margin-left: 8px;
	padding-bottom: 4px;
}

	
.offleft {
	margin-left: -9000px;
	position: absolute;
}



#legal { margin-top: 0px; clear: both; text-align: center; color: #CBCB65; width: 960px; float: left; padding-top: 40px; padding-bottom: 40px; }

#grid { margin-left:18px; margin-top:1px; height: 548px; }

/***** 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:left; width:706px; }
#menu li, #anim li {
	display:block;
	margin-right:7px;
	margin-bottom:7px;
	overflow:hidden;
	position:relative;
	float: left;
	background-color: #fff;
}
/*Position relativly so we can easily position the text later on*/

#menu li { width:224px; height:125px; background:#fff; text-align:right; border:solid 1px #ccc; padding: 0px;  margin-right: 0px;}
#anim li {width:226px; height:127px; background-color:#fff;}
#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:0.9em; color:#CBCB65;}		
/*You can tweak font sizes and colours*/


#anim li.a { background-image:url(../i/grid/a.jpg); background-position: center; }
#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: center; }
#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: center; }
#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. */