BODY, H1, H2, H3, H4, H5, TH, THEAD, TFOOT, TD, INPUT, TEXTAREA, OPTION, SELECT {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style:	normal;
	color:#000066;
	text-decoration:	none;
	word-spacing:	normal;
	letter-spacing:	normal;
	text-transform:	none;
}	


BODY
{
	padding: 5px 0px 15px 0px;
	margin: 0px 0px 0px 0px;
	background-color: #e3e3e3;
	background-image:url(/HUS/images/background.gif);
}

FORM
{
	color:#000066;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 0px;
	margin: 0px;
	padding-top: 0px;
}

DIV 
{
 color:#000066;
 display: block;
}

H1, H2, H3, H4, H5, TH, THEAD, TFOOT
{
	padding: 0;
	margin: 0;
}

H1
{
	font-weight: bold;
	font-size: 18px;
}	

H2
{
	font-weight: bold;
	font-size: 16px;
}	
		
H3	{	
	font-weight: bold;
	font-size: 14px;
	}	
		
H4	{	
	font-size:	1.2em;
	font-weight:	500;
	}	
		
H5, DT	{	
	font-size:	1em;
	font-weight:	700;
	}	
		
H6	{	
	font-size:	.8em;
	font-weight:	700;
	}	

TABLE {

}

TFOOT, THEAD	{	
	font-size:	1em;
	}	

TH
{
	color: #FFF;
	background-color: gray;
}	

TD
{

}


A, A:link	{	
	color: #0000CC;
	text-decoration: underline;
	font-weight:bold;
}	
		
A:visited	{	
	color: #0066CC;
	text-decoration: underline;
	font-weight:bold;
}	
		
A:active	{	
	color: #FF0000;
	text-decoration: underline;
	font-weight:bold;
}	
		
A:hover	{	
	color: #FF0033;
	background-color: #FFFF33;
	text-decoration: underline;	
}
SMALL	{	
	font-size:	10px;
	}	

BIG	{	
	font-size: 14px;
	}	

BLOCKQUOTE, PRE	{	
	font-family:	Courier New, monospace;
	}	

UL LI	{	
	list-style-image:	url("../images/bullet.gif");
	padding-bottom:		5px;
	}	

UL LI LI	{	
	list-style-type:	square;
	}	

UL LI LI LI	{	
	list-style-type:	circle;
	}	
	
OL LI
{
	list-style-type: decimal;
}	

OL OL LI	{	
	list-style-type:	lower-alpha;
	}	

OL OL OL LI	{	
	list-style-type:	lower-roman;
	}	

IMG
{
	border: none 0px black;
}

/* Needed for Chrome, blacked out otherwise */
OPTION, SELECT
{
	background:white;
}

HR 
{
	color: #9900FF;
	border: none;	
	height: 3px;
}

.Breadcrumbs 
{
	/* General umbrella, good place for font, size, color, weight, etc. */
	font-weight: bold;
	font-size: 18px;
}

.Breadcrumbs ul {	margin: 0px; padding: 0px 0px 5px 0px; text-align:center; }
.Breadcrumbs li {display:inline; list-style-type:none; padding: 0px;}
.Breadcrumbs a {color: #0000CC;}

.fontDisabled {
	text-decoration: line-through;
	color:Gray;
}

A.fontDisabled, A.fontDisabled:link, A.fontDisabled:visited, A.fontDisabled:active, A.fontDisabled:hover {
	text-decoration: line-through;
	color:Gray;
}

.fontError
{
	font-weight: bold;
	color: #FF0000;
}

.fontListPrice {
	text-decoration: line-through;
}

.fontSpecial, .fontSpecial TD
{
	color: #ff3333;
	font-weight:bold;
}

.fontTotal
{
	font-size: 16px; 
	font-weight: bold;
}

/* Needed for admin tools */
.bgPrimary, A.bgPrimary, A.bgPrimary:link, A.bgPrimary:visited, A.bgPrimary:active	{	
	text-decoration:	none;
	color:	#FFF;
	background-color: #9900FF;
	}	
		
A.bgPrimary:hover	{	
	color: #9900FF;
	background-color: #FFF;
}
	
.bgSecondary, A.bgSecondary, A.bgSecondary:link, A.bgSecondary:visited, A.bgSecondary:active
{
	color: #FFF;
	background-color: #CC66FF;
}

	
A.bgSecondary:hover	{	
	color: #CC66FF;
	background-color: #FFF;
}	
		
.bgTertiary, A.bgTertiary, A.bgTertiary:link, A.bgTertiary:visited, A.bgTertiary:active
{
	color: #FFF;
	background-color: #666666;
}
	
A.bgTertiary:hover	{	
	color: #666666;
	background-color: #FFF;
}

.bgAlternate
{
	background-color: #F2F2F2;
}

.Alternate TR, .Alternate TD
{
	color:#000;
	background-color: #F2F2F2;
}

.bgTransparent, A.bgTransparent, A.bgTransparent:hover
{
	background-color:  Transparent; 
}

.bgProgressBar
{
	border: 1px solid #636563;
	background-color: #FFFFFF;
}

.borderAll
{
	border-right: 1px solid black;
	border-top: 1px solid black;
	border-left: 1px solid black;
	border-bottom: 1px solid black;
}

.borderSecondary
{
	border-right: Black 1px solid;
	border-top: Black 1px solid;
	border-left: Black 1px solid;
	border-bottom: Black 1px solid;
}

/* *** DEPRECATED *** Identifies current step in a multi step process */
.Step_Current
{
	padding-right: 5px;
	padding-left: 5px;
	font-weight: bold;
	padding-bottom: 5px;
	padding-top: 5px;
	background-color: #FFFF99;
}

/* Identifies non-current step in a multi step process */
.Step_Link
{
	font-weight: bold;
}

.Steps 
{
	font-weight: bold;
}

.Steps ul {	margin: 0px; padding: 0px; text-align:center;	padding-bottom:5px;}
.Steps li {display:inline; list-style-type:none; padding: 8px;}

.Steps .Current {background-color: #FFFF99;}
.Steps .Delimiter {padding: 2px;}

.Tiny {font-size: 8px;}
.S {font-size: 10px;}
.N {font-size: 12px;}
.M {font-size: 14px;}
.L {font-size: 16px;}
.XL {font-size: 18px;}

/* "Red-Dot" links from site to content admin */
.linkAdmin 
{
	float: right; 
}

.btn {
	color: #ffffff;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-stretch: expanded;
	padding: 2px 2px 2px 2px;
	/*margin-right: 10px;*/
	font-weight: bold;
	border-width: 2px;
	border-style: solid;
}

.btn:hover {cursor: pointer;}

.btnPrimary {
  background-color:#9900FF;
	border-top-color: #cc99ff;
	border-left-color: #cc99ff;
	border-right-color:#6600cc;
	border-bottom-color: #6600cc;
}
.btnPrimary:hover {
	color: #ffff00;
	border-top-color: #6600cc;
	border-left-color: #6600cc;
	border-right-color:#cc99ff;
	border-bottom-color: #cc99ff;
}

.hidden {display: none;}

.dropcap:first-letter {font-size: 200%;}

.highlight {background-color: #FFFF99;}

.padleft {margin-left: 10px;}
.padright {margin-right: 10px;}
.padbottom {margin-bottom: 10px;}
.padtop {margin-top: 10px;}
.faq {
	background-color: #FFFF99;
	display: none;
	padding:5px 5px 5px 5px;
	margin-bottom:10px;
}

HR.ACCOUNT {
	color: #9900FF;
	background-color: #9900FF;
}


/* PAGE_SKIN=ADMIN */
.ADMIN TH 
{
	color: #FFF;
	background-color: #9900FF;
	padding: 3px 3px 3px 3px;
}

.ADMIN TH A
{
	color: #FFF;
	background-color: #9900FF;
}

.ADMIN TH A:hover
{
	color: #9900FF;
	background-color: #FFF;
}

.ADMIN HR {
	color: #9900FF;
	background-color: #9900FF;
}

.ADMIN .btn {
  background-color:#9900FF;
	border-top-color: #cc99ff;
	border-left-color: #cc99ff;
	border-right-color:#6600cc;
	border-bottom-color: #6600cc;
}

.ADMIN .btn:hover {
	color: #ffff00;
	border-top-color: #6600cc;
	border-left-color: #6600cc;
	border-right-color:#cc99ff;
	border-bottom-color: #cc99ff;
}

.ADMIN .Breadcrumbs {font-size:10px;}
.ADMIN .Breadcrumbs ul {text-align:left;}
.ADMIN .Breadcrumbs a {color:#0000CC;}

.ADMIN ul {text-align:left;}

/* PAGE_SKIN classes must be capitalized to coordinate with site app layer code */
/* FOR HUS, we needed separate color-coded sections, but for HRC we do not
    but leave broken out for now in case future designs need it */

/* PAGE_SKIN=ABOUT */
div.ABOUT
{
	color: #ffffff;
	background-color: #00CCFF;
}

.ABOUT div {
	color: #ffffff;
	background-color: #00CCFF;
}

HR.ABOUT {
	color: #00CCFF;
	background-color: #00CCFF;
}

.btnABOUT {
  background-color:#00CCFF;
	border-top-color: #ccffff;
	border-left-color: #ccffff;
	border-right-color:#0099cc;
	border-bottom-color: #0099cc;
}
.btnABOUT:hover {
	color: #ffff00;
	border-top-color: #0099cc;
	border-left-color: #0099cc;
	border-right-color:#ccffff;
	border-bottom-color: #ccffff;
}

/* PAGE_SKIN=CART */
/*
div.CART
{
	color: #ffffff;
	background-color: #9900FF;
}

.CART div {
	color: #ffffff;
	background-color: #9900FF;
}
*/
div#divMAIN_CART, .MENU_SUB .CART div {
	color: #ffffff;
	background-color: #9900FF;
}

.CART TH 
{
	color: #FFF;
	background-color: #9900FF;
	padding: 3px 3px 3px 3px;
	border-right: solid 1px #FFFFFF;
	padding: 5px;
}

.CART TH A
{
	color: #FFF;
	background-color: #9900FF;
}

.CART TH A:hover
{
	color: #9900FF;
	background-color: #FFF;
}

.CART HR, HR.CART {
	color: #9900FF;
	background-color: #9900FF;
}

.btnCART, .CART .btn {
  background-color:#9900FF;
	border-top-color: #cc99ff;
	border-left-color: #cc99ff;
	border-right-color:#6600cc;
	border-bottom-color: #6600cc;
}
.btnCART:hover, .CART .btn:hover {
	color: #ffff00;
	border-top-color: #6600cc;
	border-left-color: #6600cc;
	border-right-color:#cc99ff;
	border-bottom-color: #cc99ff;
}

/* PAGE_SKIN=CONTACT */
div.CONTACT
{
	color: #ffffff;
	background-color: #33cc00;
}

.CONTACT div {
	color: #ffffff;
	background-color: #33cc00;
}

HR.CONTACT {
	color: #33cc00;
	background-color: #33cc00;
}

.btnCONTACT {
  background-color:#33cc00;
	border-top-color: #99ff66;
	border-left-color: #99ff66;
	border-right-color:#006600;
	border-bottom-color: #006600;
}

.btnCONTACT:hover {
	color: #ffff00;
	border-top-color: #006600;
	border-left-color: #006600;
	border-right-color:#99ff66;
	border-bottom-color: #99ff66;
}

/* PAGE_SKIN=HOME */
/*
div.HOME 
{
	color: #ffffff;
	background-color: #00529b;
}

.HOME div {
	color: #ffffff;
	background-color: #00529b;
}
*/
div#divMAIN_HOME, .MENU_SUB .HOME div {
	color: #ffffff;
	background-color: #00529b;
}

.HOME TH 
{
	color: #FFF;
	background-color: #00529b;
	padding: 3px 3px 3px 3px;
	border-right: solid 1px #FFFFFF;
	padding: 5px;
}

.HOME TH A
{
	color: #FFF;
	background-color: #00529b;
}

.HOME TH A:hover
{
	color: #00529b;
	background-color: #FFF;
}

.HOME HR, HR.HOME {
	color: #00529b;
	background-color: #00529b;
}

.bgHOME 
{
	background-color: #00529b;
	color:#FFFFFF;
}

.borderHOME_bottom {border-bottom: 1px solid #00529b;}

.borderHOME_table
{
	border-right: #00529b 2px solid;
	border-bottom: #00529b 2px solid;
}

.borderHOME_table TD
{
	border-top: #00529b 2px solid;
	border-left: #00529b 2px solid;
}

.btnHOME, .HOME .btn {
  background-color:#00529b;
	border-top-color: #6699ff;
	border-left-color: #6699ff;
	border-right-color:#000066;
	border-bottom-color: #000066;
}
.btnHOME:hover, .HOME .btn:hover {
	color: #ffff00;
	border-top-color: #000066;
	border-left-color: #000066;
	border-right-color:#6699ff;
	border-bottom-color: #6699ff;
}

/* PAGE_SKIN=PRODUCT */
/*
div.PRODUCT
{
	color: #ffffff;
	background-color: #ef3e42;
}

.PRODUCT div, .PRODUCT TH {
	color: #ffffff;
	background-color: #ef3e42;
}
*/
div#divMAIN_PRODUCT, .MENU_SUB .PRODUCT div {
	color: #ffffff;
	background-color: #ef3e42;
}

.PRODUCT TH 
{
	color: #ffffff;
	background-color: #ef3e42;
	padding: 3px;
}

.PRODUCT .bottom TD
{
	border-bottom: solid 1px #ef3e42;
}

HR.PRODUCT, .PRODUCT HR {
	color: #ef3e42;
	background-color: #ef3e42;
}

.btnPRODUCT, .PRODUCT .btn {
  background-color:#ef3e42;
	border-top-color: #ff9999;
	border-left-color: #ff9999;
	border-right-color:#993300;
	border-bottom-color: #993300;
}
.btnPRODUCT:hover, .PRODUCT .btn:hover {
	color: #ffff00;
	border-top-color: #993300;
	border-left-color: #993300;
	border-right-color:#ff9999;
	border-bottom-color: #ff9999;
}

/* PAGE_SKIN=SEARCH */
/*
div.SEARCH
{
	color: #ffffff;
	background-color: #FFCC00;
}

.SEARCH div {
	color: #ffffff;
	background-color: #FFCC00;
}
*/
div#divMAIN_SEARCH, .MENU_SUB .SEARCH div {
	color: #ffffff;
	background-color: #FFCC00;
}

.SEARCH TH
{
	color: #ffffff;
	background-color: #FFCC00;
	padding:3px;
}

.SEARCH TH A
{
	color: #ffffff;
	background-color: #FFCC00;
}

.SEARCH TH A:hover 
{
	color: #FFCC00;
	background-color: #ffffff;
}

HR.SEARCH, .SEARCH HR {
	color: #FFCC00;
	background-color: #FFCC00;
}

.bgSEARCH, A.bgSEARCH, A.bgSEARCH:link, A.bgSEARCH:visited, A.bgSEARCH:active	{	
	text-decoration:	none;
	color:	#000;
	background-color: #FFCC00;
	}	

.btnSEARCH, .SEARCH .btn {
  background-color:#FFCC00;
	color: #000099;
	border-top-color: #ffffcc;
	border-left-color: #ffffcc;
	border-right-color:#cc9900;
	border-bottom-color: #cc9900;
}
.btnSEARCH:hover, .SEARCH .btn:hover {
	color:#990000;
	border-top-color: #cc9900;
	border-left-color: #cc9900;
	border-right-color:#ffffcc;
	border-bottom-color: #ffffcc;
}

/* PAGE_SKIN=TOOLS */

/*
div.TOOLS
{
	color: #ffffff;
	background-color: #FF6600;
}

.TOOLS div {
	color: #ffffff;
	background-color: #FF6600;
}
*/

div#divMAIN_TOOLS, .MENU_SUB .TOOLS div {
	color: #ffffff;
	background-color: #FF6600;
}

.TOOLS TH
{
	color: #ffffff;
	background-color: #FF6600;
	padding:3px;
}

.TOOLS TH A
{
	color: #ffffff;
	background-color: #FF6600;
}

.TOOLS TH A:hover 
{
	color: #FF6600;
	background-color: #ffffff;
}

HR.TOOLS, .TOOLS HR {
	color: #FF6600;
	background-color: #FF6600;
}

.bgTOOLS 
{
	background-color: #ff6600;
	color:#FFFFFF;
}

.borderTOOLS_bottom {border-bottom: 1px solid #ff6600;}

.borderTOOLS_table
{
	border-right: #ff6600 2px solid;
	border-bottom: #ff6600 2px solid;
}

.borderTOOLS_table TD
{
	border-top: #ff6600 2px solid;
	border-left: #ff6600 2px solid;
}

.btnTOOLS, .TOOLS .btn {
  background-color:#FF6600;
	border-top-color: #ffcc99;
	border-left-color: #ffcc99;
	border-right-color:#993300;
	border-bottom-color: #993300;
}

.btnTOOLS:hover, .TOOLS .btn:hover {
	color: #ffff00;
	border-top-color: #993300;
	border-left-color: #993300;
	border-right-color:#ffcc99;
	border-bottom-color: #ffcc99;
}

div.LP
{
	color: #000;
	background-color: #FFF;
}

.LP TH 
{
	color: #FFF;
	background-color: #9900FF;
	padding: 3px 3px 3px 3px;
}

.LP TH A
{
	color: #FFF;
	background-color: #9900FF;
}

.LP TH A:hover
{
	color: #9900FF;
	background-color: #FFF;
}

.LP HR {
	color: #9900FF;
	background-color: #9900FF;
}

.btnLP {
  background-color:#9900FF;
	border-top-color: #cc99ff;
	border-left-color: #cc99ff;
	border-right-color:#6600cc;
	border-bottom-color: #6600cc;
}
.btnLP:hover {
	color: #ffff00;
	border-top-color: #6600cc;
	border-left-color: #6600cc;
	border-right-color:#cc99ff;
	border-bottom-color: #cc99ff;
}

.Alignment UL LI
{
	list-style-image: none;
	list-style-type: disc;
	font-weight: bold;
}

.Alignment UL LI LI LI
{
	font-weight: normal;
}

/* QuickSEARCH 'GO' button */

.btnGo {
	color: #ffffff;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 8pt;
	border-width: 2px;
	padding: 0px 1px 0px 1px;
	margin-right: 5px;
	border-style: solid;
  background-color:#00529b;
	border-top-color: #0099cc;
	border-left-color: #0099cc;
	border-right-color:#003366;
	border-bottom-color: #003366;
}
.btnGo:hover {
	cursor: pointer;
	background-color:#ef3e42;
	border-top-color: #003366;
	border-left-color: #003366;
	border-right-color:#0099cc;
	border-bottom-color: #0099cc;
}

/* header links  -  added for Fall 2010 redesign  */

.header {
	background-color: transparent;
	color: #FFFFFF;
	font-size: 10px;
	text-decoration: none;}
a.header:link	{ 
	background-color: transparent;
	color: #FFFFFF;
	text-decoration: none;}
a.header:visited	{ 
	color:#CCCCCC; 
	background-color: transparent;
	text-decoration: none;}
a.header:hover	{ 
	color: #FFFFFF; 
	background-color: transparent;
	text-decoration:underline;}

ul.header {	margin: 0px 0px 0px 0px; padding: 5px 0px 5px 0px; }
ul.header li {display:inline; list-style-type:none; padding: 0px 10px 0px 10px;}

/* footer links */

.footer {
	background-color: transparent;
	color: #FFFFFF;
	font-size: 10px;
	text-decoration: none;}
a.footer:link	{ 
	background-color: transparent;
	color: #FFFFFF;
	text-decoration: none;}
a.footer:visited	{ 
	color:#CCCCCC; 
	background-color: transparent;
	text-decoration: none;}
a.footer:hover	{ 
	color: #FFFFFF; 
	background-color: transparent;
	text-decoration:underline;}

ul.footer {	margin: 0px 0px 0px 0px; padding: 5px 0px 5px 0px; }
ul.footer li {display:inline; list-style-type:none; padding: 0px 10px 0px 10px;}


.ribbonSeries div
{
	background:#ef3e42; padding:0px 5px 0px 0px;height:30px;width:100%;
}

.ribbonSeries div h1
{
line-height:30px;color:white;padding:0px 0px 0px 5px;
}

.ribbonSeries .Raintree 
{
	background-image: url(../images/products/circle_bar_r.gif);
}

.ribbonSeries .Raintree div 
{
	color:Black;
	font-size:10px;
	font-weight:bold;
	padding:0;
	width: 60px;
	background-color:Transparent;
	line-height:15px;
	height:60px;
	position:relative;
	top:12px;
}

.ribbonSeries .Heinemann 
{
	background-image: url(../images/products/circle_bar_h.gif);
}

.ribbonSeries .Heinemann div 
{
	color:White;
	font-size:10px;
	font-weight:bold;
	padding:0;
	width: 60px;
	background-color:Transparent;
	line-height:20px;
	height:60px;
	position:relative;
	top:10px;
}

.SET_SEQUENCE_1, .SET_SEQUENCE_3
{
	background-color: #ffffff;
}
.SET_SEQUENCE_2, .SET_SEQUENCE_4 
{
	background-color: #fceaea;
}


/* Page_Master layouts -- Move to stand-alone sheet? */

/* Use color numbers rather than names (NiftyCorners needs numbers) */
div#PageFrame
{
	padding:   5px 0px 5px 0px;
	margin:0 auto;
	width:980px;
	background-color:#FFF;
}

/*

div#RightWrapper {
    margin: 0;
    padding: 0;
    background-image: url(../hus/images/bg_RightPanel_Tile.gif);
    background-position: right;
    background-repeat: repeat-y;
    width:970px;
    background-color: #FFFFFF;
}

div#LeftWrapper {
    margin: 0px;
    padding: 0px;
    background-image: url(../hus/images/bg_LeftPanel_Tile.gif);
    background-repeat: repeat-y;
    width:970px;
}
*/

div#Banner {
    text-align: center;
    margin: 0px;
    padding: 0px;
    width:970px;
	background-color:#FFF;
}

div#MainContent 
{
	border: none;
	width:970px;
	text-align:left;
  	padding: 5px 0px 5px 0px;
}
/*
div#LeftPanel {
    padding: 0px 0px 0px 0px;
    width: 0px;
    float: left;
    border: none;
}
div#RightPanel {
    padding: 0px 0px 0px 0px;
    width: 0px;
    float: right;
}
*/
div#Footer
{
	/*    border-top: solid #000 1px;*/
	padding: 0px;
	text-align: center;
	clear: both;
	width: 970px;
}

/* used by NiftyCorners */
.clear {
	clear: both;
	display: block;
	height: 1px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------------
   added 11/01/2010 to change the way cover images are typically displayed
   rather than sizing and adding dropshadows to the images themselves, do it with CSS
   this will enable us to move to a standard cover size (lg & sm) with Capstone,
   yet still use whatever size we want on our site.
   uncommented for use on 03/21/2011 when all HRC covers converted to CAP formatting
*/

.resizeCover_sm {
width: 75px;
height : auto;
border: 1px solid #cccccc;
}

.resizeCover_lg {
width: 190px;
/* width: 190px;  change to 190 when dropshadow is employed */
height : auto;
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
margin-bottom: 7px;
}
.dropshadow {
	-moz-box-shadow: 3px 3px 4px #000;
	-webkit-box-shadow: 3px 3px 4px #000;
	box-shadow: 3px 3px 4px #000;
	/* For IE 8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
	/* For IE 5.5 - 7 */
	filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
}
/* ------------------------------------------------------------------------*/

/* Retain for reference until complete */

.circleText_H	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	line-height:20px;
	font-weight: bold;
	color: #FFFFFF;
	padding-bottom:3px;}
.circleText_R	{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #000000;}


/* ------------------------------------------------------------------------
   used to show pseudo-popups of images with just CSS
   there are three parts, to enable the images to 'pop' in certain locations 
   relative to the links or thumbnail image
*/

/* start GENERIC popup class */
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 3px outset #ef3e42;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -125px;
left: 50px; /*position where enlarged image should offset horizontally */
z-index: 51;
}
/* end GENERIC popup class */

/* start LEFT popup class, for links/images on the RIGHT side of the page */
.thumbnail_left{
position: relative;
z-index: 0;
}

.thumbnail_left:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail_left span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 3px outset #00529b;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail_left span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail_left:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -125px;
left: 25px; /*position where enlarged image should offset horizontally */
z-index: 51;
}
/* end LEFT popup class */

/* start RIGHT popup class, for links/images on the RIGHT side of the page */
.thumbnail_right{
position: relative;
z-index: 0;
}

.thumbnail_right:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail_right span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffff;
padding: 5px;
left: -1000px;
border: 3px outset #00529b;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail_right span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail_right:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -125px;
left: -175px; /*position where enlarged image should offset horizontally */
z-index: 51;
}
/* end RIGHT popup class */

/* start SPREAD popup class, for spread images TOP of the product template, just under the product name */
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail_spread img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

/*have to remove the border and padding when using on the Spread circle image link*/
.thumbnail_spread_circle img{
border: 0px solid white;
margin: 0 0px 0px 0;
}

.thumbnail_spread:hover, .thumbnail_spread_circle:hover{
background-color: transparent;
}

.thumbnail_spread:hover img{
border: 1px solid transparent;
}

/*have to remove the border when using on the Spread circle image link*/
.thumbnail_spread_circle:hover img{
border: 0px solid transparent;
}

.thumbnail_spread span, .thumbnail_spread_circle span{ /*CSS for enlarged image*/
position: absolute;
background-color: #fffff0;
padding: 5px;
/*left: -1000px;*/
border: 5px outset #ef3e42;
visibility: hidden;
color: black;
text-decoration: none;
color:
}

.thumbnail_spread span img, .thumbnail_spread_circle span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail_spread:hover span, .thumbnail_spread_circle:hover span{ /*CSS for enlarged image */
visibility: visible;
top: 220px;  /* from roughly top of page, where the gallery div should be placed */
left: 50%;
margin-left: -300px;
z-index: 50;
/*By setting the left position to 50% it will set the div to start in the center of the screen. 
  By adjusting the left margin by a value half of the size of the div we are centering, 
  we can move the entire div to the left and place it directly in the center of the page. */
}
/* end SPREAD popup class */

/* end pseudo-popups ----------------------------------------------------
   Credits: Dynamic Drive CSS Library -http://www.dynamicdrive.com/style/ */


/* style for Print Bookbag/Cart page */

.printBottomDouble {border-bottom:5px double #9900FF;}
.printTopSingle {border-top:1px solid #9900FF;}
.textL {text-align:left;}
.textR {text-align:right;}