/* CSS FOR AMERICAN CAST IRON SITE, FIREFOX BROWSER */

* {
  margin: 0;
  padding: 0;
}
 
body {
	font-size: 100.01%; /* [1] */
	margin: 0px 0px 0px 0px;
	.margin: 10px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	behavior: url(css/csshover.htc);
	background-color: #fff;
	color: #666;
	font-size: 10px;
	font-family: Arial, Helvetica, Verdana, sans-serif;
}
.bodybg {
	padding			: 0;
	margin			: 0px 0px 0px 0px;
	text-align		: center;
	vertical-align	: top;
/*	scrollbar-face-color: #666;
    scrollbar-shadow-color: #666;
    scrollbar-darkshadow-color: #ffffff;
    scrollbar-highlight-color: #666;
    scrollbar-3dlight-color: #ffffff;
    scrollbar-track-color: #e9e9e9;
    scrollbar-arrow-color: #ffffff;
	background-color: #e9e9e9;
*/
	}

.bodybgcart {
	padding			: 0;
	margin			: 0px 0px 0px 0px;
	text-align		: center;
	vertical-align	: top;
	font-size		: 1.2em;
	}

#main {
	position:absolute;
	left:50%;
	margin-left:-300px;
  width: 650px;
/*  width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-left: 80px;
  float: left;*/
}

.title  {
  color: #000000;
  font-size: 1.8em;
  font-weight: bold;
}
div #block_3 > #h3 .title {
margin: 0 1em;
}

.page-title  {
  color: #000000;
  font-size: 1.8em;
  font-weight: bold;
  margin-bottom: 10px;
  border-bottom: 1px dotted #ccc;
  border-top: 1px dotted #ccc;
  background: #eee;
}

table { font-size: 8px; line-height: 120%; font-family: Arial, Helvetica, Verdana, sans-serif; }
td { font-size: 8px; line-height: 120%; font-family: Arial, Helvetica, Verdana, sans-serif }
tr { font-size: 8px; line-height: 120%; font-family: Arial, Helvetica, Verdana, sans-serif }
.number {
 font-size: 10px;
 text-align: right;
 padding-right: 10px;
}
#bynumbers td {
  font-size: 10px;
}
#col-a {
  margin: 0px 0px 0px 4px;
  width: 90%;
  color	: #000;
  float: left;
  font-size: 10px;
}
#col-a[id] { /* [2] */
  margin-left: 1px;
}
.col-a-content, .col-a-content p {
  font-size: 1.6em;
  line-height: 1.4em;
  font-weight: bold;
}
div #col-a .title { padding-bottom: 10px; }
/*div #col-a .title + p:first-letter {
  font-weight: bold;
float:left;font-size:100px;line-height:70px;padding-top:2px;padding-right:5px;font-family: Arial, Times, serif, Georgia;*/
/*  border: 1px solid #666;
  color:#eee;
  background: #999; */
  margin-right: 6px;
  margin-top: 5px;
  padding: 3px;
}
#col-c {
  padding: 5px 0px 5px 0px;
  float: right;
  width: 30%; 
  z-index: 11; /* [3] */
}
#col-c[id] { /* [2] */
  margin-left: 1px;
}
div #col-c .title { padding-bottom: 10px; }
div #col-c img { padding-top: 8px; }
div #col-c li { padding-bottom: 10px; }
.col-c {
  padding: 5px 0px 5px 0px;
  padding-right: 15px;
  margin: 0;
  float: left;
  width: 45%;
  .width: 45%;
  z-index: 11; /* [3] */
}
.col-c[id] { /* [2] */
  margin-left: 1px;
}
div .col-c .title { padding-bottom: 10px; }
/*div .col-c img { padding-top: 8px; }*/
div .col-c li { padding-bottom: 10px; }

#col-d {
  padding: 5px 0px 5px 0px;
  float: right;
  width: 22%;
}
#col-d[id] {
  margin-left: -1px;
  margin-right: 1px;
}
div #col-d .title { padding-bottom: 17px; }
.col-d {
  padding: 5px 0px 5px 0px;
  margin: 0;
  float: right;
  width: 45%;
  .width: 45%;
}
.col-d[id] {
  margin-left: -1px;
  margin-right: 1px;
}
div .col-d .title { padding-bottom: 17px; }
div .col-d img { padding-top: 8px; }
div .col-d li { padding-bottom: 10px; }

#col-a-prod {
  margin: 0px 0px 0px 4px;
  color	: #000;
  float: left;
  font-size: 1.2em;
  line-height: 25px;
  font-weight: bold;
  width: 100%;*/
}
div #col-a-prod p { font-size: 1.5em; }
div #col-a-prod .notitle + p { margin-top: 0px; }
.intro_copy { font-size: 1.5em; }
div #col-a-prod .title { padding-bottom: 10px; }
div #col-a-prod img { padding-top: 8px; }
/*div #col-a-prod .title + p:first-letter, div #col-a-prod .notitle + p:first-letter {
  font-weight: bold;
float:left;font-size:80px;line-height:60px;padding-top:2px;padding-right:5px;font-family: Arial, Times, serif, Georgia;*/
/*  border: 1px solid #666;
  color:#eee;
  background: #999; */
  margin-right: 6px;
  margin-top: 5px;
  padding: 3px;
}
.notitle {
  line-height: 0px;
}
#col-b-prod {
	float: right;
	width: 55%;
	.width: 54%;
	padding: 5px 0px 5px 0px;
}
#col-b-prod[id] { /* [2] */
  margin-left: -1px;
  margin-right: 1px;
}
div #col-b-prod .title { padding-bottom: 10px; }
div #col-b-prod li { padding-bottom: 10px; }
div #col-a-prod .title { font-size: 1.8em; }
#col-c-prod {
	float: right;
	width: 65%;
	.width: 65%;
	padding: 0;
}
#col-c-prod[id] { /* [2] */
  margin-left: -1px;
  margin-right: 1px;
}
div #col-c-prod .title { padding-bottom: 10px; }
div #col-c-prod li { padding-bottom: 10px; }
.row { margin: 0; padding: 0; vertical-align:top; min-height: 270px; .height: 270px; }
.more {
float: right;
padding-right: 15px;
}

.right-column-content {
  float: right;
  width: 60%;
  padding: 0;
  margin-top: 15px;
  .margin-top: 60px;
  margin-bottom: 25px;
  padding-left: 20px;
  border-left: 1px solid #ccc;
}

.right-column-content {
  margin-top: 0;
}

.left-column-content {
  float: left;
  width: 32%;
  padding: 0;
  margin-top: 15px;
  margin-bottom: 25px;
  padding-right: 15px;
  font-size: 1.6em;
  font-weight: bold;
  line-height: 1.5em;
  color: #ff9900;
}

.left-column-content p {
  font-size: 1em;
  font-weight: bold;
  color: #ff9900;
  margin-top: 0;
}

.full-column-content {
  width: 650px;
  padding: 0;
}

.pullquote {
color:darkorange;float:right;background:transparent;background-color:#fff;filter:alpha(opacity=45);opacity:.45;width:65%;margin-top:10px;margin-bottom:10px;margin-left:10px;font-family:Verdana, Arial, Helvetica,Georgia;font-size: 28px;line-height:26px;text-align:right;padding-bottom:20px;
/* filter:alpha(opacity=45);opacity:.45; */
}

#lp_topleft {
  margin-left	: -80px;
  margin-right	: -80px;
  margin-top	: -215px;
  width			: 150px;
  font-size		: 12px;
  color			: #000;
  background	: #e9e9e9;
  position		: absolute;
  overflow		: visible;
  z-index: 20; /* [3] */
  filter:alpha(opacity=99);-moz-opacity:.99;opacity:.99;
/*  filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;*/
}
 
#lp_topleft2 { /* for use with main pages with nav */
  margin-left	: -80px;
  margin-right	: -80px;
  margin-top	: -215px;
  .margin-top	: -200px;
/*  width			: 150px;*/
  font-size		: 12px;
  color			: #000;
  background	: #e9e9e9;
  position		: absolute;
  .position		: relative;
  display		: inline;
  .display		: block;
  overflow		: visible;
  z-index: 20; /* [3] */
  filter:alpha(opacity=99);-moz-opacity:.99;opacity:.99;
/*  filter:alpha(opacity=75);-moz-opacity:.75;opacity:.75;*/
}
 
#lp_topright {
/*  float			: right;
  margin-right	: 30px;*/
  float			: left;
  margin-left	: 600px;
  .margin-left	: 600px;
  margin-top	: -130px;
/*	padding-top	: 105px;
	.padding-top : 25px;*/
  width			: 110px;
  font-size		: 12px;
  color			: #000;
  background	: #e9e9e9;
  position		: absolute;
  z-index		: 22;
  filter:alpha(opacity=99);-moz-opacity:.99;opacity:.99;
}

#lp_top {
 /* background: url(images/lp_multiproduct.jpg) center top no-repeat;*/
  margin-top	: 0px;
  margin-bottom	: 20px;
  .padding-bottom: 60px;
  padding-top	: 10px;
  display		: inline;
  z-index		: 2;
}
#lp_top_img {
  width			: 100%;
  margin-top	: 10px;
  padding-top	: 0px;
  z-index: 3; /* [3] */
}
#lp_toptext {
	margin-left	: 0px;
	margin-top	: -32px;
	.margin-top	: -28px;
	width		: 650px;
	color		: #ff9900;
	font-size	: 12px;
	font-weight	: bold;
	position	: absolute;
	text-align	: center;
	z-index: 19;
}

#crumbs {
  width: 650px;
  float: left;
  margin-bottom: 0px;
  margin-top: 10px;
}

h1, h2, h3, h4, h5, h6, p, pre, blockquote, ul, ol, dl{
margin: 1em 0;
padding: 0;
}
li, dd, blockquote {
margin-left: 1em;
}
fieldset {
border: none;
}
input, select, textarea {
font-size: 1em;
}

a, a:link, a:visited, a:active {
	color: #D2580B;
	text-decoration: none;
	font-weight: bold;
	outline: none;
}
a:hover {
	text-decoration: underline;
	color: #900;
}

.larger_links {
	font-size: 1.4em;
}
 
.buynow {
	text-align: center;
	float: right;
	padding-top: 3px;
	padding-bottom: 3px;
}

div .buynow a, div .buynow a:link, div .buynow a:visited, div .buynow a:active {
	padding: 0px 15px 0px 15px;
	text-decoration: none;
	color: #FFFFFF;
/*	background-image: url('images/buybgoff.gif');
	padding: 7px 20px 7px 20px;
	background-color: #0000FF;*/
	font-weight: bold;
	font-size: 1.2em;
	width: 100%;
}
div .buynow a:hover {
	text-decoration: none;
	color: #fff;
/*	background-image: url('images/buybgon.gif');
	background-repeat: no-repeat;
	background-position: center;
 	background-color: #00DD00;*/
	width: 100%;
}

strong, b {
	font-weight: bold;
	}

td, div, p {
	color			: #666;
	font-family     : Arial, Helvetica, Verdana, sans-serif;
	font-size		: 11px;
	padding			: 0px;
}

.show-all .columns {
  padding: 0 0px;
}

.maincolumns {
  .margin-top: 45px;
}
.cols-wrapper {
  width: 650px;
  float: left;
  margin-bottom: 0px;
  margin-top: 10px;
}
.page {
 .margin-top: 45px;
}
div #fourcols .cols-wrapper { margin-top: 20px; }
.cols-wrapper[class] {
  padding-bottom: 0.1px; /* [4] */
}
#fourcols { margin: 20px 0px 40px 0px; }

.site_top {
	width: 100%;
}
.float-wrapper {
  margin: -1px;
  .margin: 1px 0 1px 0;
  padding: 0px;
  .padding: 0 0 1px 0;
  width: 65%;
  float: left;
  z-index: 0;
}
.float-wrapper[class] { /* [2] */
  margin-right: -1px;
}
.float-wrapper2 {
  margin: -1px;
  padding: 0px;
  width: 74%;
  .width: 76%;
  float: left;
  z-index: 0;
}
.float-wrapper2[class] { /* [2] */
  margin-right: -1px;
}
.float-wrapper-prod {
  margin: -1px;
  padding: 0px;
  width: 30%;
  float: left;
  z-index: 0;
}
.float-wrapper-prod[class] { /* [2] */
  margin-right: -1px;
}
.sidecol {
  position: relative;
  margin: 0px 5px 0px 2px; 
  padding: 5px; 
  overflow: hidden;
}
.main-content {
  margin: 0 1em;
  width: 419px;
}
.box {
  margin: 0 1em;
}
.clear {
  clear: both;
}
.none {
  display: none;
}

/*
  [1] Play nice with EMs in Opera 6 and IE Win.
  [2] Support for Mozilla, but IE doesn't likes it.
  [3] Z indices needed for link clickability in IE Mac and Opera 6.
  [4] Mozilla needs a non zero value, seems to be a bug.
*/

.photo_to_come {
	border-style: solid;
	border-color: #CCCCCC;
	border-width: 1px;
	padding: 10px;
	text-align: center;
}

.solidbox {
	border-style: solid;
	border-color: #CCCCCC;
	border-width: 1px;
	padding: 10px;
	}
#lp_eights {
	width	: 100%;
	height	: 155px;
}
#lp_eights_prod {
	width	: 100%;
	height	: 200px;
}
#lp_eight1 {
	float: left;
}
#lp_eight_wrapper {
	float: right;
}
#lp_eight2 {
	width: 40px;
	border-style: solid;
	border-color: #CCCCCC;
	border-width: 1px;
	padding: 5px;
	text-align: center;
}
#lp_eight3, #lp_eight4, #lp_eight5, #lp_eight6 {
	width: 40px;
	padding: 5px;
	margin-top: 5px;
	border-style: solid;
	border-color: #CCCCCC;
	border-width: 1px;
	text-align: center;
}
.lp_eights_txt {
	font-weight: bold;
	font-size: 13px;
	text-align: center;
	color: #00f;
}
#lp_eights_txt_2nd { margin-top: 5px; }

.products {
	vertical-align: top;
	border-top: 1px solid #CCC;
	border-right: 1px solid #CCC;
	margin-bottom: 20px;
	padding-right: 8px;
}

.details {
	width: 100%;
	margin: 0;
}

#footer {
	clear: both;
	width: 650px;
	text-align: center;
	color: gray;
	font-size: 10px;
	padding: 12px; /*padding: 0.3em 0;*/
	margin: 0px 0px 15px 0px;
	border-top: 1px solid #e0e0e0;
	}

#btm_nav {
	clear: both;
	width: 650px;
	text-align: center;
	color: gray;
	font-size: 11px;
	padding: 4px; /*padding: 0.3em 0;*/
	margin: 0;
	border-top: 1px solid #e0e0e0;
	}

#copyright   { color: gray; font-size: 9px; padding: 12px }

.smaller {
	font-size: 90%;
}

#header {
/*	margin: 0px 0px 0px 74px;
	.margin: 0px 0px 0px 18px;*/
	margin-left: 0px;
	padding: 0px;
	border: 0px;
	width: 100%;
	position: relative;
	text-align: left;
	background: #fff;
	voice-family: "\"}\"";
	voice-family:inherit;
	}

/* weird ie5win bug: all line-height to font-size ratios must agree or box gets pushed around. UPDATE: this has turned out to be very rare. my current recommendation is IGNORE this warning. at the moment i'm leaving it in only in case the issue turns up again. possibly the original bug in march 2001 was caused by an unusual combination of factors, although this solved it at the time.*/

#sitetitle {
/*  padding: 20px 0 0;
  background: url(images/sfa_logo.gif) center top no-repeat; */
  font-family: Arial, Helvetica, Verdana, sans-serif;
  font-size: 34px;
  font-weight: normal;
  text-align: left;
  float: left;
  color: #D2580B;
}
/*\*//*/
#sitetitle {font-size: x-large;}
/* */ 
.tm {
  font-size: 0.45em;
  font-weight: bold;
  vertical-align: top;
  display: inline;
}
#company {
	font-size		: 18px;
	float			: right;
	text-align		: right;
	vertical-align	: top;
	line-height		: 30px;
	font-weight		: bold;
	padding-bottom	: 20px;
}
h1#sitetitle a, h1#sitetitle a:link, h1#sitetitle a:visited {
  text-decoration: none;
  color: #000;
}
h1#sitetitle a:hover {
  text-decoration: none;
  color: #000;
}
#siteslogan {
  font-size: 13px;
  font-weight: bold;
  color: #000;
  float: left;
  text-align: left;
}

#view-cart {
  float:			right;
  vertical-align:	top;
  text-align:		right;
}

.cart {
  margin-top: -15px;
  font-size: 1.2em;
}

.cart_text {
  font-size: 12px;
}

h1 {
	font-size: 24px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}
h2 {
	font-size: 18px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}
h3 {
	font-size: 16px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}
h4 {
	font-size: 14px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}
h5 {
	font-size: 12px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}
h6 {
	font-size: 10px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
	}
img {
	border: 0;
	}
.nowrap {
	white-space: nowrap;
	font-size: 10px;
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0;
/* must be combined with nobr in html for ie5win */
	}

html body {
	}
		
* html #footer-wrapper {
	float: left;
	position: relative;
	padding-bottom: 10010px;
	margin-bottom: -10000px;
	width: 100%;
	background: #FFF;         /*** Same as body background ***/
	}

#content {
/*	overflow: scroll;*/
	width: 100%;
	background-color: #fff;
}

/* here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";              /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;                  /* ensure the period is not visible */
    clear: both;               /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */




#block_1
	{
	float: left;
	width: 60%;
	margin-left: 40%;
	}
* html #block_1
	{
	display: inline;
	}
#block_2
	{
	float: left;
	width: 40%;
	margin-left: -100%;
	}
/* Start Mac IE5 filter \*/
#block_1, #block_2
	{
	padding-bottom: 32767px !important;
	margin-bottom: -32767px !important; 
	}
@media all and (min-width: 0px) {
#block_1, #block_2
	{
	padding-bottom: 0 !important;
	margin-bottom: 0 !important; 
	}
#block_1:before, #block_2:before
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]';
	display: block;
	background: inherit;
	padding-top: 32767px !important;
	margin-bottom: -32767px !important;
	height: 0;
	}
}
/* End Mac IE5 filter */
#wrapper
	{
	overflow: hidden; /* This hides the excess padding in non-IE browsers */
	}
/* we need this for IE 5.01 - otherwise the wrapper does not expand to the
necessary height (unless fixed, this problem becomes even more acute 
weirdness as the method is enhanced */
#wrapper
	{
/* Normally a Holly-style hack height: 1% would suffice but that causes 
IE 5.01 to completely collapse the wrapper - instead we float it */
	float: left;
/* NB. possibly only IE 5.01 needs to get this float value - otherwise 5.5 sometimes 
(I saw it happen many moons ago) makes the width of wrapper too small 
the float: none with the comment is ignored by 5.01,
5.5 and above see it and carry on about their business
It's probably fine to just remove it, but it's left here 
just in case that many moons ago problem rears its head again */
	float/**/: none;
	}
/* easy clearing */
#wrapper:after
	{
	content: '[DO NOT LEAVE IT IS NOT REAL]'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
#wrapper
	{
	display: inline-block;
	}
/*\*/
#wrapper
	{
	display: block;
	}
/* end easy clearing */
#footer
	{
	clear: both;
	}
/* Safari needs this - otherwise the ghost overflow, though painted 
correctly obscures links and form elements that by rights should be above it.
An unintended side-effect is that it cause such elements to vanish in IE 5.01
and 5.5, hence the child selector hack */
* > #footer, * > form, * > #notes, * > .output
	{
	position: relative;
	z-index: 1000;
	}

.wrapper {
  margin: 0;
  padding: 0;
  margin-bottom: 0px;
  margin-top: 10px;
  width: 650px;
}

#product {
  padding: 10px;
  width: 260px;
  font-size: 90%;
/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:250px;
}
/* Again, "be nice to Opera 5". */
body>#product {width:150px;}

#product_data {
	margin:0px 50px 50px 200px;
	padding:10px;
  font-size: 90%;
}

.clear2 {
  clear: both;
  height: 1px;
  overflow: hidden;
  margin: 0;
}

#Content {
	margin:0px 50px 50px 200px;
	padding:10px;
	width: 390px;
	}

#Menu {
	width:172px;
	padding:10px;
	background-color:#eee;
	line-height:17px;
	overflow: visible;
/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:150px;
	}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}


/* Simulation of tables -- tabular view of data 
------------------------------------*/
div#byitem ul.vert {
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 540px;
	}
div#byitem ul.vert li {
	padding: 4px 0;
	margin: 0;
	height: 14px; /* space out your rows */
	}
div#byitem ul.vert li.odd {
	background-color: #eee;
	}
div#byitem ul.horz {
	clear: left;
	list-style-type: none;
	padding: 0;
	margin: 0;
	}
div#byitem ul.horz li {
	float: left;
	width: 80px;
	padding: 0 20px 0 0;
	margin: 0;
	}
div#byitem ul.horz li.name { /* size your columns individually at the expense of »
  slightly bloated markup (labelling each appropriate <li> with this class) */
	width: 130px;
	}
div#byitem ul.horz li.price {
	text-align: right;
	padding-right: 0;
	}

	
/* DYNAMIC CSS MENU */
/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout5.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

.menu {
position:relative;
z-index:1000;
font-size:90%;
/*height:235px;
margin:25px 0 0 15px; /* this page only */
}

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
/*width:150px;*/
position:relative;
border:1px solid #fff;
border-width:1px 1px 0 1px;
background:#ff9900;
overflow:visible;
}

.menu li {
background:transparent;
height:26px;
overflow:visible;
}
* html .menu li {margin-left:-16px; margin-lef\t:0;}
/* get rid of the table */
.menu table {position:absolute; border-collapse:collapse; top:0; left:0; z-index:100; font-size:1em; width:0; height:0;}

/* style the links */
.menu a, .menu a:visited {
display:block; 
text-decoration:none;
height:25px;
line-height:25px;
width:150px;
margin-left: -11px;
.margin-left: 0px;
color:#fff;
text-indent: 7px;
font-weight: normal;
border-bottom:1px solid #fff;
background:transparent;
}
/* style the link hover */
* html .menu a:hover {color:#ffcc33; background:#D2580B; decoration: none;}

.menu :hover > a {
color:#ffcc33; 
background:#D2580B;
decoration: none;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
top:-1px;
left:100px;
}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
visibility:visible;
background:#ffb400;
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
background:#ffcc33;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
background:#ffdb33;
}
.menu ul.top2 {top:25px;}
.menu ul.top3 {top:51px;}
.menu ul.top4 {top:77px;}
.menu ul.top5 {top:103px;}
.menu ul.top6 {top:129px;}
.menu ul.top7 {top:155px;}

<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->

/* END DYNAMIC CSS MENU */


/* STYLE STREAK PAGE & RESULTS */
.table {
  border: 1px solid #ccc;
  padding-bottom: 20px;
  width: 650px;
  color: #333;
}

.year {
  text-align: center;
  background: #FF9900;
  font-weight: bold;
  font-size: 2em;
  border: 1px solid #999;
  color: #000;
}

td {
  vertical-align: top;
  padding: 0.3em;
}

.borderLeft {
  border-left: 1px solid #ccc;
}

.header {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background:#FFCC99;
  text-align: center;
  font-weight: bold;
}

.data {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  text-align: center;
}

.page_results {
	font-size: 1.4em;
	padding-bottom: 1.2em;
}

.page_results a {
	border: 1px solid #ccc;
	background-color: #eee;
	color: #333;
	padding: 0.1em 0.2em 0.1em 0.2em;
	margin: 0.18em;
	line-height: 2.1em;
	text-decoration: none;
}

.page_results a:active, .page_results a:hover {
	background-color: #FF9900;
	color: #000;
}

.page_result {
	border: 1px solid #ccc;
	background-color: #eee;
	color: #ccc;
	padding: 0.1em 0.2em 0.1em 0.2em;
	margin: 0.2em;
	line-height: 2.1em;
}


a.info{
    position:relative; /*this is the key*/
    z-index:24; background-color:#ccc;
    color:#000;
    text-decoration:none}

a.info:hover{z-index:25; background-color:#ff0;}

a.info span{display: none}

a.info:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em; left:2em;
    border:1px solid #d2580b;
    background-color:#fff; color:#000;
	padding: 0.5em;
    text-align: center}

/* END CSS */