body {
margin: 10px;
padding: 0;
font: 75% "Trebuchet MS", verdana, arial, tahoma, sans-serif;
line-height:1.5em;
color: #999;
background: #457C05 url(images/bckgrdtest.jpg) repeat-x;
background-position: 50% 0;
}

#container {
width: 720px;
margin-left: auto;
margin-right: auto;
padding: 5px;
border: 10px solid #fff;
color: #999;
background: #FFF;
}

/* CSS Tabs */
#divNav {
		background; background-color:#D8ECD2;
		
		margin: 0;
		padding: 0;
		height: 75px;
		width: 720px;
	}

	#nav {
		position: relative;
		left: -70px;
		top: 5px;
		height: 70px;
		width: 800px;
	}

	#nav li ul, #nav li ul {
		margin: 0;
		padding: 0;
	}

	#nav a {
		text-decoration: none;
	}

	#nav li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
		padding-right: 5px;
	}

	#nav li ul {
		display: none;
	}

/*sub navigation here*/

	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
		position: absolute;
		top: 20px;
		left: 100px;
		padding-top: 5px;
		background: #f90;
		height: 28px;
		width: 600px;
		padding-left: 60px;
	}

	#nav li.on ul {
		background: #224d6f;
	}

	#nav li.on:hover ul, #nav li.over ul { /*for ie*/
		background: #224d6f;
	}

	#nav li a {
		color: #f90;
		font-weight: bold;
		display: block;
		width: 93px;
		padding: 0;
	}

	#nav li.on a {
		color: #224d6f;
	}

	#nav li.on ul a, #nav li.off ul a {
		border: 0;
		float: left; /*ie doesn't inherit the float*/
		color: #224d6f;
		width: auto;
		margin-right: 15px;
	}

	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
		background: #f90;
	}

	#nav li.on ul {
		display: block;
	}

	#nav li.off:hover ul, #nav li.over ul {
		display: block;
		z-index: 6000;
	}

	#nav li.off a:hover, #nav li.on a:hover { 
		color: #224d6f;
	}

	/*do the image replacement*/

	#nav li span {
		position: absolute;
		left: -9384px;
	}

	#liRenaissance a, #liArtNouveau a, #liModern a, #liPostModern a, #liDigital a {
		display: block;
		position: relative;
		height: 20px;
		
	}

/*first, put the initial states in place*/

#liRenaissance a {
	background-position: 0 0;
}

#liArtNouveau a {
	background-position: -102px 0;
}

#liModern a {
	background-position: -204px 0;
}

#liPostModern a {
	background-position: -306px 0;
}

#liDigital a {
	background-position: -408px 0;
}

/*active area - for this demo - the code could be based on a body class, and probably work better.*/

 #liModern.on a {
 	background-position: -204px -37px;
 } /*add selectors for the other li's and background-positions*/

/*hover states*/

#liRenaissance a:hover, #liRenaissance:hover a, #liRenaissance.over a {
	background-position: 0 -73px;
}

#liArtNouveau a:hover, #liArtNouveau:hover a, #liArtNouveau.over a {
	background-position: -102px -73px;
}

#liModern a:hover, #liModern:hover a, #liModern.over a {
	background-position: -204px -73px;
}

#liPostModern a:hover, #liPostModern:hover a, #liPostModern.over a {
	background-position: -306px -73px;
}

#liDigital a:hover, #liDigital:hover a, #liDigital.over a {
	background-position: -408px -73px;
}

/*subnav formatting*/

#nav li.off ul a, #nav li.on ul a {
	display: block;
	background: #f90;
	color: #fff;
	font-family: arial, verdana, sans-serif;
	font-size: small;
}		

#nav li.on ul a {
	background: #224d6f;
}
	



#banner {
height: 200px;
padding: 0;
margin: 0;
color: #666;
background: #7DCE27 url(images/y2yheader.jpg) no-repeat;
}

#banner h1 {
padding: 20px;
font: normal 175%  verdana, georgia, "Trebuchet MS",sans-serif;
text-align: right;
letter-spacing: 5px;
border-bottom: none;
color: #fff;
background: inherit;
}

#content {
padding: 5px;
margin-left: 172px;
margin-bottom: 0;
color: #999;
background: #fff;
}

h1 {
margin: 0;
font: normal 110% verdana, "Trebuchet MS", tahoma, sans-serif;
padding: 5px;
border-bottom: 0px solid #7DCE27;
letter-spacing: 5px;
text-transform: uppercase;
color: #7DCE27;
background: inherit;
}

h2 {
margin: 0 0 20px 0;
font: normal 100% verdana, "Trebuchet MS", tahoma, sans-serif;
padding: 5px;
border-bottom: 1px dashed #eee;
text-transform: uppercase;
letter-spacing: 5px;
color: #224D6F;
background: inherit;
}

a {
text-decoration: none;
color: #FE3F22;
background-color: #fff;
}

a:hover {
text-decoration: none;
color: #444;
background-color:#fff;
}

a img {
border: 0;
}

#sidebar {
float: left;
width: 140px;
margin: 0 10px 0 0;
padding: 5px;
border-right: 1px dashed #eee;
background-color: #fff;
color: #999;
}

#sidebar a {
color: #333;
background-color: inherit;
}

#sidebar a:hover {
color: #FE3F22;
background-color:  inherit;
}

#footer {
clear:both;
padding: 3px;
margin: 0 0 0 0;
text-align: left;
border-top:1px solid #7DCE27;	
color: #999;
background-color: #fff;		
}

.noborder {
float: left;
margin-left: 10px;
padding-right: 20px;
}

.info {
font-size: 90%;
color: #FE3F22;
background-color: inherit;
}

 /* set millions of background images */
.rbroundbox { background: url(images/nt2.gif) repeat; }
.rbtop div { background: url(images/tl2.gif) no-repeat top left; }
.rbtop { background: url(images/tr2.gif) no-repeat top right; }
.rbbot div { background: url(images/bl2.gif) no-repeat bottom left; }
.rbbot { background: url(images/br2.gif) no-repeat bottom right; }

/* height and width stuff, width not really nessisary. */
.rbtop div, .rbtop, .rbbot div, .rbbot {
height: 10px;
font-size: 1px;

}
.rbcontent { margin: 0 7px;}
.rbroundbox { width: 98%; margin: .5em auto; }