/* copyright 2009 ELMC inc. */
/* ===== This file contains the eCommerce specific styles ===== */
/* ===== Basic Element Styles =====
Company standard purple for H&E is #6600cc. Link text hover color is  #000099 
*/
BODY {
	/*background:#ffffcc; old light green*/
background: #99cc99; /* medium green */
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 0px;
}

FORM {
margin: 0px;
}

UL {
margin-top: 0; 
margin-bottom: 0;
}

img {
behavior: url("/images/pngbehavior.htc");
}

.endcolumns {
clear: both;
height: 0px;
visibility: hidden;
}  

TH {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #000000;
}

TD {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: normal;
text-decoration: none;
color: #000000;
}

/* ===== Header Styles ===== */
#ecom-header {
position: relative;
/*3300cc best matches logo */
background: #ffffff;
/*background-image: url('/images/logoBackground.gif'); */
/*background-repeat: repeat-x; */
voice-family: "\"}\"";
voice-family: inherit;
height: 96px;
/* border:1px solid #000; */
}
/*have to make logo smaller than 102px because it is now a link and that makes image about 2 px larger for some reason*/
/*DO NOT set width of logo here. Set it in header.ftl so se can change logo by uploading ftl instead of relying of refresh of users browser cache*/
#ecom-header img#storeLogo{
	border-style: none;
}

#ecom-header a{
text-decoration: none;
}
#ecom-header #left {
position: absolute;
top: 0px;
left: 0px;
}
#ecom-header #left img{
	float:left;
	}

#ecom-header #middle {
margin-left: 290px;
margin-right: 210px;
padding-top: 10px;
width: auto;
text-align: center;
}
#ecom-header #right {
position: absolute;
top: 0px;
right: 0px;
width: auto;
height:100%;
padding: 0px;
text-align: right;
}

#welcome-message {
	padding-right: 10px;
/*padding-left: 10px;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: white;
}
#welcome-message a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: white;
}
#welcome-message a:hover {
color: #573dfc;
text-decoration: underline;
}
#company-name {
margin: 0px;
font-size: 12pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000099;
white-space: nowrap;
}
#company-subtitle {
margin: 0px;
font-size: 6pt;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #330099;
white-space: nowrap;
}

#microcart {
	padding-right: 10px;
    padding-left: 10px;
}
#microcart a {
	font-size: 110%;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-weight: bold;
    text-decoration: none;
    color: #6600cc;
}
#microcart a:hover {
    color: #000099;
    text-decoration: underline;
}
#microcart img {
	border-style: none;
}
#microcart .disabled {
color: white;
}

/* ===== Header-Bar Styles ===== */
#ecom-header-bar {
text-align: center;
overflow: visible;
height: 12px;
}

#ecom-header-bar ul {
display: block;
overflow: visible;
list-style: none;
background: transparent;
vertical-align: middle;
margin: 0px;
padding: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 24px;
}

#ecom-header-bar ul li { 
height: 14px;
padding: 0px 8px 0px 8px;
}

#ecom-header-bar ul#left-links li {
	text-align:center;
	margin:10px 0;
	display:inline;
	list-style:none;
	padding:0 30px 0 23px;	
/*float: left; 
border-right: 1px solid #FFFFFF;
	*/

}
#ecom-header-bar ul#right-links li {
float: right;
border-left: 1px solid #FFFFFF;
}

#ecom-header-bar ul li a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 16px;
font-weight: bold;
text-decoration: none;
color: #000099;
} 
#ecom-header-bar ul li:hover a {
color: black;
text-decoration: underline;
}


/* ===== Layout/Formatting Styles ===== */
/* NOTE: using a combination of a float left/right for the side bars AND 
  wide margins for the center to get 2 desired effects: 1. be able to end
  columns and put the footer at the bottom of the page and 2. not have the
  center column expand to full width below the columns.
  
  The downside to this is that in some browsers we can't effectively use floats
  within divs in the main column.
*/

/* ecom-mainarea wraps what is below the header including the divs for left, main, right columns as applicable */
#ecom-mainarea {
position: relative;
width: 100%;
margin-top: 10px;
}

#ecom-mainarea .left {
/* alt: position: absolute; left: 0px; top: 0px; */
float: left;
width: 150px;
/* border:1px solid #000; */
}
#ecom-mainarea .right {
/* alt: position: absolute; right: 0px; top: 0px; */
float: right;
width: 200px;
background: #b8a3cc;
}


#ecom-mainarea .center, #ecom-mainarea .leftonly, #ecom-mainarea .rightonly, #ecom-mainarea .nocolumns {
/*background:#c4abcc;*/
text-align: left;
vertical-align: top;
}
#ecom-mainarea .center {
margin-left: 160px;
	/*
margin-right: 210px;
	*/
voice-family: "\"}\"";
voice-family: inherit;
/*
margin-left: 161px;
margin-right: 211px;
*/
}
#ecom-mainarea .leftonly {
margin-left: 160px;
voice-family: "\"}\"";
voice-family: inherit;
margin-right: 210px;

}
#ecom-mainarea .rightonly {
margin-right: 210px;
voice-family: "\"}\"";
voice-family: inherit;
margin-right: 211px;
}

/* ====== eCommerce "Screenlet" Styles ====== */
#ecom-mainarea .screenlet {
background: #c2b8cc;
border: 1px solid #999999;
margin-bottom: 10px;
/*height:auto !important;*/
height:1%
}
#ecom-mainarea .screenlet-header {
background: #6600cc;
padding-top: 1px;
padding-bottom: 3px;
padding-right: 4px;
padding-left: 4px;
height:auto !important;
height:1%
}
#ecom-mainarea .screenlet-body {
/*background: #ffff99; older darker yellow */
background: #ccffcc ; /*lighter green than body background*/
padding: 4px;
/*height:auto !important;*/
height:1%
}

.boxhead {
/*background:#FFFFFF;*/
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-size: 8pt;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}

.boxlink {
    float:right;
}

A.boxheadbutton {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-size: 8pt;
font-weight: bold;
text-decoration: none;
color: #FFFFFF;
}

A.boxheadbutton:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-size: 8pt;
font-weight: bold;
text-decoration: none;
color: red;
}

/* Form layout styles to simulate a table-style layout */
#ecom-mainarea .form-row {
clear: both;
padding-top: 2px;
}
#ecom-mainarea .form-label {
float: left;
width: 180px;
text-align: right;
padding-top: 5px;
}
#ecom-mainarea .form-field {
float: left;
margin-left: 10px;
text-align: left;
}
/*"text-align: center" is there for Internet Explorer, which won't work without it. Unfortunately, "text-align: center" will center all the text inside your table cells, but we counter that by setting "tr" and "td" to align left. */
table.center {margin-left:auto; margin-right:auto;text-align:center;}


/* ===== Text/Label Styles ===== */
.tabletext, div.form-label, div.form-field {
font-size: 14px;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
}
.tabletext_subcats{
	color: #6600cc;
}
a.tabletext_subcats:hover{
color: #000099;
text-decoration: underline;	
}
.tabletext_aligncenter{
	font-size: 14px;
		text-align: center;
}
.tabletext-footer{
font-size: 11px;	
}

A.tabletext:hover {
/*font-size: 10px;*/
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.tablebuttontext {
font-size: 10px;
color: #1E3C66;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

.contenttext {
font-size: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

DIV.tabletexthidden {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
visibility: hidden;
}

.head1 {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px; 
font-size: 12pt;
font-weight: bold;
color: #6600cc;
}

.head2 {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-size: 10pt;
font-weight: bold;
color: #000000;
}

.head3 {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-size: 8pt;
font-weight: bold;
color: #000000;
}

.info {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-size: 10px;
font-style: normal;
color: #000000;
}

DIV.graybox {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
background: #CCCCCC;
border: 1px solid #000000;
text-align: center;
margin: 2px auto;
width: auto;
padding: 4px;
}


.boxoutside {
background: #FFFFFF;
padding: 0px;
border-color: #999999;
border-style: solid;
border-width: 1px 1px 1px 1px;
}

.boxtop {
background: #000099;
padding-top: 1px;
padding-bottom: 1px;
padding-right: 4px;
padding-left: 4px;
border-color: #999999;
border-style: solid;
border-width: 0px 0px 0px 0px;
}

.boxbottom {
background: #FFFFFF;
padding: 4px;
border-color: #999999;
border-style: solid;
border-width: 0px 0px 0px 0px;
}

.button {
border-style: outset; border-color: #9999CC; border-width: 2px;
background: #dddddd;
padding-right: 5px; padding-left: 5px;
}


.tableheadtext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: black;
}

A.tableheadbutton {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: black;
}

A.tableheadbutton:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: underline;
color: red;
}

.browsecategorytext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #000099;
text-indent: -10px;
}

A.browsecategorybutton {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #6600cc;
}

A.browsecategorybutton:hover {
color: #000099;
text-decoration: underline;
}

.browsecategorybuttondisabled {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #333333;
}

A.buttontext, .buttontextdisabled {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
background: white;
border: #999999 solid 1px;
margin: 2px 1px 2px 1px;
padding: 1px 4px 1px 4px;
}

A.buttontext {
/*color: #000099;*/
	color: #6600cc;
}

A.buttontext:hover {
color: red;
text-decoration: underline;
}

A.linktext {
font-family: Verdana, Arial, Helvetica, sans-serif;
/*font-size: 10px;*/
text-decoration: underline;
color: #6600cc;
}

A.linktext:hover {
color: #000099;
text-decoration: underline;
}

.buttontextdisabled {
color: #333333;
}

.submenutextinfo {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: white;
padding-left: 6px;
padding-right: 5px;
border-right: 1px solid #5886C6
}

.submenutext, A.submenutext, A.submenutext:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: white;
padding-left: 6px;
padding-right: 5px;
border-right: 1px solid #5886C6
}

A.submenutext:hover {
color: yellow;
text-decoration: underline;
}

.submenutextdisabled, A.submenutextdisabled {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #CCCCCC;
padding-left: 6px;
padding-right: 5px;
border-right: 1px solid #5886C6
}

A.submenutextdisabled:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: underline;
color: yellow;
}

.submenutextinforight {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: white;
padding-left: 6px;
}

.submenutextright, A.submenutextright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: yellow;
padding-left: 6px;
}

A.submenutextright:hover {
color: yellow;
text-decoration: underline;
}

.submenutextrightdisabled, A.submenutextrightdisabled {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #CCCCCC;
padding-left: 6px;
}

A.submenutextrightdisabled:hover {
text-decoration: underline;
color: yellow;
}

A.lightbuttontext {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: yellow;
border-style: none;
}

A.lightbuttontext:hover {
color: yellow;
text-decoration: underline;
}

A.lightbuttontextsmall {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8px;
font-weight: bold;
text-decoration: none;
color: yellow;
border-style: none;
}

A.lightbuttontextsmall:hover {
color: yellow;
text-decoration: underline;
}

.lightbuttontextdisabled {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
text-decoration: none;
color: #CCCCCC;
}

A.buttontextbig, .buttontextbigdisabled {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 15px;
font-weight: bold;
text-decoration: none;
background: white;
border: #999999 solid 1px;
margin: 2px 2px 2px 2px;
padding: 1px 4px 1px 4px;
}
A.buttontextbig {
color: #000099;
}
.buttontextbigdisabled {
color: #CCCCCC;
}
A.buttontextbig:hover {
color: red;
text-decoration: underline;
}

A IMG.imageborder {
border-style: solid;
border-width: 1px;
border-color: #999999;
}

/* ===== Other Header Styles ===== */


.headersmalltext {
font-size: 8pt; 
font-family: Verdana, Arial, Helvetica, sans-serif; 
font-weight: bold; 
color: black;
}
a.headersmalllink {
font-size: 8pt; 
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold; 
color: #000099; 
text-decoration: none;
}
a.headersmalllink:hover {
color: red;
}

/* ===== Misc/General Styles ===== */
HR.sepbar {
font-size: xx-small;
width: 100%;
height: 1px;
background: #999999;
border-width: 0px;
}

.errorMessage {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-size: 8pt;
font-weight: bold;
color: red;
}

.eventMessage {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0px;
font-size: 8pt;
font-weight: bold;
color: #000099;
}

.ontab {
font-size: 8pt;
background: black;
padding: 2px;
border-style: inset;
border-width: 3px;
}

a.onlnk {
font-size: 8pt;
font-weight: bold;
color: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 2px;
}

.offtab {
font-size: 10px;
background: #CCCCCC;
padding: 2px;
border-style: outset;
border-width: 3px;
}

a.offlnk {
font-size: 10px;
font-weight: bold;
color: #000099;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
padding: 2px;
}

a.offlnk:hover {
color: red;
}

.areaheader {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #FFFFFF;
width: 100%;
background: black;
padding: 2px;
}

.edittable {
border-color: #000000 #000000 #003333;
border-style: solid;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin
}

.editInputBox {
font-size: 8pt;
background: #FFFFFF;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: white;
border: #999999 solid 1px;
margin: 2px;
}

.inputBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
font-size: 8pt;
background: white;
border: #999999 solid 1px;
margin: 2px;
}

.selectBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
font-size: 8pt;
background: white;
border: #999999 solid 1px;
margin: 2px;
}

.textAreaBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
font-size: 8pt;
background: white;
border: #999999 solid 1px;
margin: 2px;
}

.radioButton {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
font-size: 8pt;
}

.checkBox {
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #FFFFFF;
font-size: 8pt;
}

.smallSubmit {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
font-weight: bold;
text-decoration: none;
color: #000099;
background: white;
border: #999999 solid 1px;
margin: 2px;
}

.mediumSubmit,.largeSubmit,.loginButton {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10pt;
font-weight: bold;
text-decoration: none;
color: #000099;
background: white;
border: #999999 solid 1px;
margin: 2px;
}

.smallSubmit:hover,.mediumSubmit:hover,.largeSubmit:hover,.loginButton:hover {
color: red;
text-decoration: underline;
}

.smallAltSubmit,.mediumAltSubmit,.largeAltSubmit {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt;
}

.basePrice {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: black;
}

.normalPrice {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: green;
}

.salePrice {
font-size: 10px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: red;
}

/* ===== Product Summary Styles ===== */
.product-prevnext {
text-align: right;
}

.productcategorylink-container {
position: relative;
margin-top: 10px;
margin-bottom: 5px;
border-top: #999 solid 1px;
}

.productcategorylink {
position: relative;
padding: 5px;
border-bottom: #999 solid 1px;
height: 60px;
}

.productcategorylink .smallimage {
float: left;
/* position: absolute; top: 5px; left: 5px; */
margin: 0px 5px 5px 0px;
}
.productcategorylink .smallimage img {
border: #CCC solid 1px;
height: 50px;
}


.productsummary-container {
position: relative;
margin-top: 2px;
margin-bottom: 5px;
border-top: 1px solid #c7c2cc;
}

.productsummary {
position: relative;
padding: 5px;
border-bottom: #999 solid 1px;
height: 160px;
}

.productsummary .smallimage {
float: left;
    border-style: none;
    /* position: absolute; top: 5px; left: 5px; */
margin: 0px 5px 5px 0px;
}
.productsummary .smallimage img {
	border-style: none;
	/*border: #CCC solid 1px;*/
    height: 50px;
}
.productsummary .largeimage img {
    border-style: none;
}
.mineral_gallery_summary {
position: relative;
padding: 5px;
border-bottom: #999 solid 1px;
height: 90px;
}
.mineral_gallery_summary .smallimage {
float: left;
/* position: absolute; top: 5px; left: 5px; */
margin: 0px 5px 5px 0px;
}
.mineral_gallery_summary .smallimage img{
border: #CCC solid 1px;
height: 75px;
}
.productsummary .productbuy {
text-align: left;
}


.productsummary .productinfo {
/*margin-left: 165px; */
text-align: left;
}
.productsummary .productinfotext {
	font-size: 105%;
}
/* ===== Product Detail Styles ===== */
#productdetail #download-files {
margin-top: 10px;
padding-top: 5px;
border-top: #999 solid 1px;
}

#productdetail #long-description {
margin-top: 10px;
padding-top: 5px;
border-top: #999 solid 1px;
}

#productdetail #reviews {
margin-top: 10px;
padding-top: 5px;
border-top: #999 solid 1px;
}

#productdetail #associated-products {
margin-top: 10px;
padding-top: 5px;
border-top: #999 solid 1px;
}

.lefthalf{
left:0;
width:49%;
height:1%;
margin:0% 1% 1% 0%;
float:left;
}
.righthalf {
float:right;
height:1%;
width:49%;
right:0;
margin:0 0 1% 1%;
}
.leftclear{
height:1%;
clear: left;
}
.bothclear{
height:1%;
clear: both;
}
div.categoryPhoto{
width:100%;
padding-top:220px;
padding-bottom:30px;
/*background:white url("/images/products/category.pics/promotions.jpg") no-repeat center center;*/
}
table.categoryPhoto {
width:100%;
height:100%;		
}
td.categoryPhoto{
text-align: center;
}
.elmcPageMainH1{
	font-family: 'palatino linotype';
	text-align: center;
	background-color: transparent;
	color: #999999;
	font-size: 16px;
	/*font-size: larger;*/
}
.elmcPageIntroSincerely{
	font-size: 12px;
    color: #999999;	
	text-align: right;
	font-style: italic;
}
.elmcSpecialNoticesMenu{
margin-bottom: 0px;
margin-top: 0px;
text-align: center;
font-size:10px;	
}
A.elmcSpecialNoticesMenu{
	color:black;
}
.elmcHead1{
	color: #6600cc;
	font-size: 16px;
    padding: 0 4% 0 4%;
}
.mainPageIntro{
	   color: #6600cc;
    font-size: 14px;
	padding: 0 4% 0 4%;    
}
.matrix table {
    margin-left: 40px;
}
.matrix .productsummary {
border-style: none;
padding: 0px;
/*elmc: if you change width  too much (using pixels) you will have to change variable numCol in  /hejAppSvr/applications/order/webapp/ordermgr/entry/catalog/categorydetail.ftl */
height: 100%;
width: 100%;
}

.matrix  TD{
	padding-top: 10px;
	width: 180px;
	vertical-align: top;
}
.matrix .productsummary .smallimage {
float: none;
/* smallimage div contains picture, nonimage div contains rest of product summary e.g. description, buttons */
/* keep each div at 50 % height of parent div */
height: 50%;
margin: 0px;
 padding: 0px;
}

.matrix .productsummary .nonimage{
    height: 50%;
    
}
.matrix .productsummary .nonimage .productbuy a{
	left: 0px;
}
.matrix .productsummary .smallimage .picture {
/*elmc: use width to control size of image.  table will automatically scale image */
	height: 40%;
    width: 40%;
}
.productsummary .smallimage .zoom {
border-style: none;
height: 15%;
}
.matrix .productsummary .productbuy {
margin: 0px;
}
.matrix .productsummary .productbuy .buttontext {
    position: relative;
	left: -10px;
}
.MagnifImage{border-style: none; 
text-align:center; padding:0;margin:0;
 }

#metaphysicalArticle{
border-top: #999 solid 1px;
width:100%;
position:relative;
}
#metaphysicalArticle .articleImage{
    padding-top: 5px;
    float: none;
}
.overlay{
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    width:100%;
}
.searchtext{
       border-style: none none none none;
       height:1px;
       width:1px;
       left:-9999px;
       top:-9999px;
       position:absolute;
       overflow:hidden;
       /* ===== see screenreader-only pattern in Pro Css and Html design patterns ===== */
}
.crosssell{
	padding-bottom: 5px;
}
.alternatingColoredLine{
background: #c8e3c8; /* medium green */	
}