﻿/*****************************************************************************************************************
 * This file holds all of the standardized class styles that should be inherited throughout the website.
 * Any style that will be used across multiple pages and controls should be defined here.
 * Any override declarations should be made locally in the specific css for the page or conrol.
/*****************************************************************************************************************/

/* Type Specification Classes */
.largePrice
{
	font: 32px Arial;
	color: #333;
}
.titleExtraLarge
{
	font: 24px Georgia;
	color: #316312;
}
.warningExtraLarge
{
	font: 24px Georgia;
	color: #933;
}
.subTitleExtraLarge
{
	font: 22px Georgia;
	color: #316312;
}
.smallPrice
{
	font: 22px Arial;
	color: #333;
}
.subHead,
.ccTitle,
.ccExpired,
.ccDefault,
.titleLarge,
.titleLargeDarkGrey,
.titleLargeGreen,
.errorMessageLarge
{
	font: 18px Georgia;
	color: #333;
}
.ccExpired,
.errorMessageLarge
{
	color: #933;
}
.titleLargeGreen,
.ccDefault { color: #316312; }

.titleLarge { color: #20430a; }

/* General Title and Label fonts and colors */
.titleGreen, .titleDarkGreen, .titleRed, .titleDarkRed,
.titleBlack, .titleGray { font-family: Georgia; }

.labelGreen, .labelDarkGreen, .labelRed, .labelDarkRed,
.labelBlack, .labelGray { font-family: Arial; }

.titleGreen, .labelGreen { color: #316312; }
.titleDarkGreen, .labelDarkGreen { color: #20430a; }
.titleRed, .labelRed { color: #C22826; }
.titleDarkRed, .labelDarkRed { color: #933; }
.titleBlack, .labelBlack { color: #333; }
.titleGray, .labelGray { color: #666; }

.bold { font-weight: bold; }
/* End General Title and Label fonts and colors */

.purchaseStatNumber
.purchaseStatLabel
{
	font: 15px Arial;
	color: #333;
}
.purchaseStatNumber { font-weight: bold; }

.secondaryMenu,
.thirdTierSubtitle
{
	font: 14px Georgia;
	color: #333;
}
.thirdTierSubtitle { color: #666; }

.helpQuestionTitle
{
	font: bold 13px Arial;
	color: #4c762f;
}
.accountStats,
.contactDetail,
.addressDetail
{
	font: 12px/16px Arial;
	color: #333;
}
.accountStats { line-height: 18px; }

.addressDetailItem {
	font-size: 16px;
}

.priceLabels
{
	font: 12px Arial;
	color: #666;
}
.packTitle,
.packTitleDefault
{
	font: bold 12px Arial;
	color: #333;
}
.packTitleDefault { color: #363; }

.errorMessageSmall
{
	font: 12px Georgia;
	color: #933;
}
.bodyText,
.packList,
.smallPriceLabel
{
	font: 11px/17px Arial;
	color: #666;
}
.bodyText { color: #232323; }

.productInfo,
.helpQuestion
{
	font: 11px Arial;
	color: #333;
}
.helpQuestionActive
{
	font: bold 11px Arial;
	color: #316312;
}
.formLabel,
.statTitle
{
	font: 10px Arial;
	color: #666;
}
.statTitle { color: #316312; }

/* End Type Specification Classes */

.fda_disclaimer {
	border: solid 1px #666;
	font: 11px Arial, Helvetica, sans-serif;
	width: 90%;
	color: #666;
	padding: 5px;
	margin: 0 auto;
}

/* This is a temporary style for development */
.placeholderText
{
	padding: 0px 3px;
	border:2px solid white;
	background-color:#666;
	font-weight: bolder;
	font-family: Arial;
	color: #000;
}

/* Rounded Corner Elements */
/* Textbox */
.textBox { display: block; height:22px;}
.textBox span { float: left;  padding-top: 4px; height: 18px; }
.textBox .openCap,
.textBox .closeCap { display:block; width: 8px; height: 22px; padding:0; margin:0; }
.textBox .openCap { background: url(/Images/btnBaseInputImgs.png) no-repeat 0 -440px; }
.textBox .closeCap { background: url(/Images/btnBaseInputImgs.png) no-repeat -20px -440px; }
.textBox input
{
    float: left;
    padding-top: 4px;
    height: 17px;
    border: 0;
    background: url(/Images/btnBaseInputImgs.png) repeat-x 0 -506px;
    font: 11px Arial, Verdana, Sans-Serif;
    margin: 0;
}
.textBox.disabled input { color: #999; background-position:0 -550px; cursor: default; }
.textBox.disabled .openCap { background-position: 0 -484px; }
.textBox.disabled .closeCap { background-position: -20px -484px; }
.textBox .nullText { color: #BFBFBF; }
.textBox .hasValueText, .textBox input { color: #666; }
/* TextArea */
.textboxArea textarea,
.textboxArea .middle
/* global width */
{ width: 500px; }
.textboxArea textarea,
.textboxArea .textAreaMiddleWrapper div
/* global height */
{ height: 150px; }
.textboxArea textarea
{
	color: #666;
	border: 0px;
	font: 11px Arial, Verdana, Sans-Serif;
	overflow: auto;
}
.textboxArea .leftCorner,
.textboxArea .middle,
.textboxArea .rightCorner,
.textboxArea .leftSide,
.textboxArea .rightSide
{height: 8px;}
.textboxArea .leftCorner,
.textboxArea .rightCorner,
.textboxArea .leftSide,
.textboxArea .rightSide{width: 8px;}
.textboxArea .textAreaTopWrapper div{float: left;}
.textboxArea .textAreaTopWrapper{height: 7px;}
.textboxArea .textAreaTopWrapper .leftCorner{background: url(/Images/btnBaseInputImgs.png) no-repeat 0 -440px; }
.textboxArea .textAreaTopWrapper .middle{background: url(/Images/btnBaseInputImgs.png) repeat-x 0 -506px;}
.textboxArea .textAreaTopWrapper .rightCorner{background: url(/Images/btnBaseInputImgs.png) no-repeat -20px -440px;}
.textboxArea .textAreaMiddleWrapper{clear: both;}
.textboxArea .textAreaMiddleWrapper div{float: left;}
.textboxArea .textAreaMiddleWrapper .leftSide{background: url(/Images/bgBaseImgs_V.png) repeat-y -63px 0; }
.textboxArea .textAreaMiddleWrapper .rightSide{background: url(/Images/bgBaseImgs_V.png) repeat-y -72px 0;}
.textboxArea .textAreaBottomWrapper{ clear: both; }
.textboxArea .textAreaBottomWrapper div{float: left; }
.textboxArea .textAreaBottomWrapper .leftCorner{background: url(/Images/btnBaseInputImgs.png) no-repeat 0 -454px;  }
.textboxArea .textAreaBottomWrapper .middle{background: url(/Images/btnBaseInputImgs.png) repeat-x 0 -520px;    }
.textboxArea .textAreaBottomWrapper .rightCorner{background: url(/Images/btnBaseInputImgs.png) no-repeat -20px -454px;}

/*Base Button Style */
.btn span { display: block; float: left; padding-top: 2px;  }
.btn .btnSpacer { padding: 0 9px; font: 14px Georgia; text-align: center; visibility:hidden; }
.btn .openCap, .btn .closeCap { display:block; width: 9px; padding:0; margin:0; }
.btn a { color: #fff !important; cursor: pointer; font: 14px Georgia; text-decoration: none !important; text-indent: 0 !important; white-space: nowrap !important; background: transparent none; padding:0; display:block; position: absolute; left:0;top:0; }
.btn a span { background:url(/Images/btnBaseColorImgs.png) repeat-x 0 -125px; position: absolute; top: 0; }
.btn a .openCap { background: url(/Images/btnBaseColorImgs.png) no-repeat 0 0; left: 0; }
.btn .btnTxt, .btn .btnTxtLanguage, .btn .btnTxtWhite { text-align: center; left: 9px; }
.btn a .closeCap { background: url(/Images/btnBaseColorImgs.png) no-repeat -17px 0; right: -9px; }
.btn a.disabled span, .btn a.disabled:hover span { color: #999 !important; cursor: default; }

/* Green Button: 25px height (22px + Drop Shadow), 77px min width. */
.green25, .green25 a, .green25 .openCap, .green25 .closeCap { height: 25px; }
.green25 span { height: 23px; }
.green25 .btnTxt, .green25 .btnSpacer { min-width: 59px; }
.green25 a span { background-position:0 -125px; }
.green25 a .openCap { background-position:0 0; }
.green25 a .closeCap { background-position:-17px 0; }
.green25 a:hover span { background-position:0 -150px; }
.green25 a:hover .openCap { background-position:0 -25px; }
.green25 a:hover .closeCap { background-position:-17px -25px; }
.green25 a.disabled span, .green25 a.disabled:hover span { background-position:0 -175px; }
.green25 a.disabled .openCap, .green25 a.disabled:hover .openCap { background-position:0 -100px; }
.green25 a.disabled .closeCap, .green25 a.disabled:hover .closeCap{ background-position:-17px -100px; }
select.green25 { font-size: 14px; height: 24px; }


a.standalone
{
	border-radius: 3px;/*This does NOT work in IE8 or below*/
	-moz-border-radius: 3px;/*This does NOT work in IE8 or below*/
	-webkit-border-radius: 3px;/*This does NOT work in IE8 or below*/
}

a.green30
{
	color:white;
    background-color: #247612; /* Fallback for IE8 and below */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2D9117), to(#1C5D0D));
	background: -webkit-linear-gradient(top, #2D9117, #1C5D0D);
	background: -moz-linear-gradient(top, #2D9117, #1C5D0D);
	background: -ms-linear-gradient(top, #2D9117, #1C5D0D);
	background: -o-linear-gradient(top, #2D9117, #1C5D0D);
	padding: 6px;
	height:17px;
}

a.green30:hover {
    text-decoration: none;
}

a.green30.disabled {
    background-color: #6e7c6b; /* Fallback for IE8 and below */
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#929191), to(#7d7d7d));
	background: -webkit-linear-gradient(top, #929191, #7d7d7d);
	background: -moz-linear-gradient(top, #929191, #7d7d7d);
	background: -ms-linear-gradient(top, #929191, #7d7d7d);
	background: -o-linear-gradient(top, #929191, #7d7d7d);
    text-decoration: none;
    cursor: default;
}


/* The shorthand for border-radius is dumb.  It's actually much
easier/readable to spell it out by propery value */
a.gradientLeft
{
	/*These do not work in IE8 or below*/
	-webkit-border-top-left-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-topleft: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
	border: 1px solid #CBC8C1;
	width:40px;
}

/* The shorthand for border-radius is dumb.  It's actually much
easier/readable to spell it out by propery value */
a.gradientRight
{
	/*These do not work in IE8 or below*/
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	-moz-border-radius-topright: 3px;
	-moz-border-radius-bottomright: 3px;
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
	border-left:none;


}
a.gray30Border
{
	border: 1px solid #CBC8C1;
}


a.gray30
{
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EDE9E0), to(#DBD8D1));
	background: -webkit-linear-gradient(top, #EDE9E0, #DBD8D1);
	background: -moz-linear-gradient(top, #EDE9E0, #DBD8D1);
	background: -ms-linear-gradient(top, #EDE9E0, #DBD8D1);
	background: -o-linear-gradient(top, #EDE9E0, #DBD8D1);
	width:auto;
	padding:5px;
	color: #207414;
}

.whiteTriangleDown {
    border-left:4px solid transparent;  /* left arrow slant */
	border-right:4px solid transparent; /* right arrow slant */
    border-top:4px solid #ffffff;
    position:relative;
	bottom: -7px;
	right: -5px;
	margin-right: 5px;
	float:right;
}


a.greyButtonWhiteText {
    background: #d7d7d4; /* Old browsers */
    background: -moz-linear-gradient(top,  #d7d7d4 0%, #a5a5a2 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d7d7d4), color-stop(100%,#a5a5a2)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #d7d7d4 0%,#a5a5a2 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #d7d7d4 0%,#a5a5a2 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #d7d7d4 0%,#a5a5a2 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #d7d7d4 0%,#a5a5a2 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d4', endColorstr='#a5a5a2',GradientType=0 ); /* IE6-9 */
    width: auto;
    padding: 6px;
    color: #ffffff;
    height: 17px;
}

.heart
{
	background: url(//cdnus.melaleuca.com/Images/Sprites/SpriteMain.png) no-repeat -18px -107px;
	height:17px;
	width:17px;
}
.cart
{
	background: url(//cdnus.melaleuca.com/Images/Sprites/SpriteMain.png) no-repeat -40px -110px;
	width:14px;
	height:17px;
}

.visually-hidden { /*Screen readers will still be able to read this, but it won't display for other users*/
    position: absolute;
    width: 0px;
    height: 0px;
    overflow: hidden;
}

.triangle
{
	border-left:4px solid transparent;  /* left arrow slant */
	border-right:4px solid transparent; /* right arrow slant */
	border-top:4px solid #1D790E; /* bottom and background color*/
	position:relative;
	bottom: -7px;
	right: -5px;
	margin-right: 5px;
	float:right;
}

.gradientButtonText
{
	font: 12px Helvetica;
	float:none;
	text-transform:inherit;
	float:left;
	padding-left:3px;
}



/* changes the button text to 12px font */
.smallText a, .smallText .btnSpacer { font-size: 12px; }
.smallText span { height: 21px; padding-top: 4px; }

/* Green Button with arrows (Right or Down) */
.arrowRight .openCap { width:20px; }
.arrowRight .btnTxt { left:20px; }
.arrowRight .btnSpacer { padding-left:20px; }
.arrowRight a.disabled .openCap { background-position:0 -99px; }

.arrowDown a .openCap { width:20px; background-position:0 -50px; }
.arrowDown a .btnTxt { left:20px; }
.arrowDown a:hover .openCap { background-position:0 -75px; }

/* Green Button: 24px height, 111px min width. */
.green24, .green24 a, .green24 .openCap, .green24 .closeCap { height: 24px; }
.green24 span { height: 21px; padding-top: 3px; }
.green24 .btnTxt, .green24 .btnSpacer { min-width: 111px; font-size: 14px; }
.green24 a span { background-position:0 -281px; }
.green24 a .openCap { background-position:0 -200px; }
.green24 a .closeCap { background-position:-17px -200px; }
.green24 a:hover span { background-position:0 -308px; }
.green24 a:hover .openCap { background-position:0 -227px; }
.green24 a:hover .closeCap { background-position:-17px -227px; }
.green24 a.disabled span, .green24 a.disabled:hover span { background-position:0 -335px; }
.green24 a.disabled .openCap, .green24 a.disabled:hover .openCap { background-position:0 -254px; }
.green24 a.disabled .closeCap, .green24 a.disabled:hover .closeCap{ background-position:-17px -254px; }

/* Green Button: 27px height (24px + Drop Shadow), 133px min width. */
.green27, .green27 a, .green27 .openCap, .green27 .closeCap { height: 27px; }
.green27 span { height: 24px; padding-top: 3px; }
.green27 .btnTxt, .green27 .btnSpacer { min-width: 115px; }
.green27 a span { background-position:0 -281px; }
.green27 a .openCap { background-position:0 -200px; }
.green27 a .closeCap { background-position:-17px -200px; }
.green27 a:hover span { background-position:0 -308px; }
.green27 a:hover .openCap { background-position:0 -227px; }
.green27 a:hover .closeCap { background-position:-17px -227px; }
.green27 a.disabled span, .green27 a.disabled:hover span { background-position:0 -335px; }
.green27 a.disabled .openCap, .green27 a.disabled:hover .openCap { background-position:0 -254px; }
.green27 a.disabled .closeCap, .green27 a.disabled:hover .closeCap{ background-position:-17px -254px; }
select.green27 { font-size: 14px; height: 24px; }

/* Green Button with arrows (Right or Down) */
.dividedArrowRight a .closeCap { width:25px; background-position:0 -2309px; right: -24px; }
.dividedArrowRight a:hover .closeCap { background-position:0 -2336px; }
.dividedArrowRight .btnTxt { left:9px; padding-right: 10px; }
.dividedArrowRight .btnSpacer { padding-right:40px; }
.dividedArrowRight a.disabled .closeCap { background-position:0 -2363px; }

.dividedArrowDown a .closeCap { width:25px; background-position:0 -2390px; right: -24px; }
.dividedArrowDown a:hover .closeCap { background-position:0 -2417px; }
.dividedArrowDown .btnTxt { left:9px; padding-right: 10px; }
.dividedArrowDown .btnSpacer { padding-right:40px; }
.dividedArrowDown a.disabled .closeCap { background-position:0 -2444px; }

/* Green Button: 35px height (32px + Drop Shadow), 198px min width. */
.green35, .green35 a, .green35 .openCap, .green35 .closeCap { height: 35px; }
.green35 span { height: 31px; padding-top: 4px; }
.green35 .btnTxt, .green35 .btnSpacer { min-width: 170px; font-size: 20px; }
.green35 a span { background-position:0 -475px; }
.green35 a .openCap { background-position:0 -370px; }
.green35 a .closeCap { background-position:-17px -370px; }
.green35 a:hover span { background-position:0 -510px; }
.green35 a:hover .openCap { background-position:0 -405px; }
.green35 a:hover .closeCap { background-position:-17px -405px; }
.green35 a.disabled span, .green35 a.disabled:hover span { background-position:0 -545px; }
.green35 a.disabled .openCap, .green35 a.disabled:hover .openCap { background-position:0 -440px; }
.green35 a.disabled .closeCap, .green35 a.disabled:hover .closeCap{ background-position:-17px -440px; }
select.green35 { font-size: 20px; height: 32px; }

/* Blue Button: 16px height. */
.blue16, .blue16 a, .blue16 .openCap, .blue16 .closeCap { height: 16px; }
.blue16 span { height: 14px; padding-top: 2px; }
.blue16 .btnTxt, .blue16 .btnSpacer { font-size: 10px; }
.blue16 .btnTxtWhite { font-size: 10px; color: #fff !important; }
.blue16 a span { background-position:0 -662px; }
.blue16 a .openCap { background-position:0 -590px; }
.blue16 a .closeCap { background-position:-17px -590px; }
.blue16 a:hover span { background-position:0 -686px; }
.blue16 a:hover .openCap { background-position:0 -614px; }
.blue16 a:hover .closeCap { background-position:-17px -614px; }
.blue16 a.disabled span, .blue16 a.disabled:hover span { background-position:0 -710px; }
.blue16 a.disabled .openCap, .blue16 a.disabled:hover .openCap { background-position:0 -638px; }
.blue16 a.disabled .closeCap, .blue16 a.disabled:hover .closeCap{ background-position:-17px -638px; }
select.blue16 { font-size: 10px; height: 13px; }

/* Blue Button: 24px height, 74px min width. */
.blue24, .blue24 a, .blue24 .openCap, .blue24 .closeCap { height: 24px; }
.blue24 span { height: 21px; padding-top: 3px; }
.blue24 .btnTxt, .blue24 .btnSpacer { min-width: 111px; font-size: 14px; }
.blue24 .btnTxt.es-US, .blue24 .btnTxt.es-MX, .blue24 .btnTxt.fr-CA { min-width: 111px; font-size: 12px; line-height: 19px; }
.blue24 .btnTxtWhite { min-width: 111px; font-size: 14px; color: #fff !important; }
.blue24 a span { background-position:0 -662px; }
.blue24 a .openCap { background-position:0 -590px; }
.blue24 a .closeCap { background-position:-17px -590px; }
.blue24 a:hover span { background-position:0 -686px; }
.blue24 a:hover .openCap { background-position:0 -614px; }
.blue24 a:hover .closeCap { background-position:-17px -614px; }
.blue24 a.disabled span, .blue24 a.disabled:hover span { background-position:0 -710px; }
.blue24 a.disabled .openCap, .blue24 a.disabled:hover .openCap { background-position:0 -638px; }
.blue24 a.disabled .closeCap, .blue24 a.disabled:hover .closeCap{ background-position:-17px -638px; }
select.blue24 { font-size: 14px; height: 21px;  }
/* Blue Button: 24px height, 74px min width. */
.min74 .btnTxt, .min74 .btnSpacer { min-width: 56px;}
.min74 .btnTxt.es-US, .min74 .btnTxt.es-MX, .min74 .btnTxt.fr-CA { min-width: 56px; font-size: 12px; line-height: 19px; }
.min74 .btnTxtWhite { min-width: 56px; font-size: 14px; color: #fff !important; }

/* Blue Button: 32px height, 293px min width. */
.blue32, .blue32 a, .blue32 .openCap, .blue32 .closeCap { height: 32px; }
.blue32 span { height: 28px; padding-top: 4px; }
.blue32 .btnTxt, .blue32 .btnSpacer { font-size: 20px; }
.blue32 a span { background-position:0 -830px; }
.blue32 a .openCap { background-position:0 -734px; }
.blue32 a .closeCap { background-position:-17px -734px; }
.blue32 a:hover span { background-position:0 -862px; }
.blue32 a:hover .openCap { background-position:0 -766px; }
.blue32 a:hover .closeCap { background-position:-17px -766px; }
.blue32 a.disabled span, .blue32 a.disabled:hover span { background-position:0 -894px; }
.blue32 a.disabled .openCap, .blue32 a.disabled:hover .openCap { background-position:0 -798px; }
.blue32 a.disabled .closeCap, .blue32 a.disabled:hover .closeCap{ background-position:-17px -798px; }
select.blue32 { font-size: 20px; height: 29px;  }

.blue61, .blue61 a, .blue61 .openCap, .blue34 .closeCap { height: 61px; }
.blue61 span { height: 61px; padding-top: 0; }
.blue61 .btnTxt, .blue61 .btnSpacer { padding: 0 20px; font: 20px/61px Georgia; color: #fff;  }
.blue61 a span { background-position:0 -1709px; }
.blue61 a .openCap { background-position:0 -1647px; }
.blue61 a .closeCap { background-position:-18px -1647px; }
.blue61 a:hover span { background-position:0 -1833px; }
.blue61 a:hover .openCap { background-position:0 -1771px; }
.blue61 a:hover .closeCap { background-position:-18px -1771px; }
.blue61 a.disabled span, .blue61 a.disabled:hover span { background-position:0 -1957px; }
.blue61 a.disabled .openCap, .blue61 a.disabled:hover .openCap { background-position:0 -1895px; }
.blue61 a.disabled .closeCap, .blue61 a.disabled:hover .closeCap{ background-position:-18px -1895px; }

.blue61.iconOverlay .btnTxt, .blue61.iconOverlay .btnSpacer { padding-right: 80px; }
.blue61.iconOverlay .btnIconOverlay { width: 60px; height: 61px; position: absolute; right: 5px; top: -10px; }
.blue61.iconOverlay.clipboard .btnIconOverlay { background: url(/Images/sprite_buttonOverlays.png) no-repeat 0 0; }
.blue61.iconOverlay.paper .btnIconOverlay { background: url(/Images/sprite_buttonOverlays.png) no-repeat -60px 0; }


/* Light Brown Button: 18px height, 77px min width. */
.lightBrown18, .lightBrown18 a, .lightBrown18 .openCap, .lightBrown18 .closeCap { height: 18px; }
.lightBrown18 span { height: 16px; padding-top: 2px; }
.lightBrown18 .btnTxt, .lightBrown18 .btnSpacer { min-width: 30px; font-size: 11px; font-family: Arial; font-weight: bold; color: #585043 !important; }
.lightBrown18 a span { background-position:0 -1584px; }
.lightBrown18 a .openCap { background-position:0 -1566px; }
.lightBrown18 a .closeCap { background-position:-17px -1566px; }
.lightBrown18 a:hover span { background-position:0 -1548px; }
.lightBrown18 a:hover .openCap { background-position:0 -1530px; }
.lightBrown18 a:hover .closeCap { background-position:-17px -1530px; }
.lightBrown18 a.disabled span, .lightBrown18 a.disabled:hover span { background-position:0 -1584px; }
.lightBrown18 a.disabled .openCap, .lightBrown18 a.disabled:hover .openCap { background-position:0 -1566px; }
.lightBrown18 a.disabled .closeCap, .lightBrown18 a.disabled:hover .closeCap{ background-position:-17px -1566px; }

/* Brown Button: 22px height, 77px min width. */
.brown22, .brown22 a, .brown22 .openCap, .brown22 .closeCap { height: 22px; }
.brown22 span { height: 20px; padding-top: 2px; }
.brown22 .btnTxt, .brown22 .btnSpacer { min-width: 59px; font-size: 14px; }
.brown22 a span { background-position:0 -992px; }
.brown22 a .openCap { background-position:0 -926px; }
.brown22 a .closeCap { background-position:-17px -926px; }
.brown22 a:hover span { background-position:0 -1014px; }
.brown22 a:hover .openCap { background-position:0 -948px; }
.brown22 a:hover .closeCap { background-position:-17px -948px; }
.brown22 a.disabled span, .brown22 a.disabled:hover span { background-position:0 -1036px; }
.brown22 a.disabled .openCap, .brown22 a.disabled:hover .openCap { background-position:0 -970px; }
.brown22 a.disabled .closeCap, .brown22 a.disabled:hover .closeCap{ background-position:-17px -970px; }

/* Brown Button: 24px height, 111px min width. */
.brown24, .brown24 a, .brown24 .openCap, .brown24 .closeCap { height: 24px; }
.brown24 span { height: 21px; padding-top: 3px; }
.brown24 .btnTxt, .brown24 .btnSpacer { min-width: 111px; font-size: 14px; }
.brown24 a span { background-position:0 -2236px; }
.brown24 a .openCap { background-position:0 -2164px; }
.brown24 a .closeCap { background-position:-17px -2164px; }
.brown24 a:hover span { background-position:0 -2260px; }
.brown24 a:hover .openCap { background-position:0 -2188px; }
.brown24 a:hover .closeCap { background-position:-17px -2188px; }
.brown24 a.disabled span, .brown24 a.disabled:hover span { background-position:0 -2284px; }
.brown24 a.disabled .openCap, .brown24 a.disabled:hover .openCap { background-position:0 -2212px; }
.brown24 a.disabled .closeCap, .brown24 a.disabled:hover .closeCap{ background-position:-17px -2212px; }

/* Brown Button: 22px height, 77px min width. */
.tan22, .tan22 a, .tan22 .openCap, .tan22 .closeCap { height: 22px; }
.tan22 span { height: 20px; padding-top: 2px; }
.tan22 .btnTxt, .tan22 .btnSpacer { min-width: 59px; font-size: 14px; }
.tan22 a span { background-position:0 -992px; }
.tan22 a .openCap { background-position:0 -926px; }
.tan22 a .closeCap { background-position:-17px -926px; }
.tan22 a:hover span { background-position:0 -1014px; }
.tan22 a:hover .openCap { background-position:0 -948px; }
.tan22 a:hover .closeCap { background-position:-17px -948px; }
.tan22 a.disabled span, .tan22 a.disabled:hover span { background-position:0 -1036px; }
.tan22 a.disabled .openCap, .tan22 a.disabled:hover .openCap { background-position:0 -970px; }
.tan22 a.disabled .closeCap, .tan22 a.disabled:hover .closeCap{ background-position:-17px -970px; }

/* Yellow Button: 22px height, 47px min width. */
.yellow22, .yellow22 a, .yellow22 .openCap, .yellow22 .closeCap { height: 22px; }
.yellow22 span { height: 20px; padding-top: 2px; }
.yellow22 .btnTxt, .yellow22 .btnSpacer { min-width: 29px; color: Black; font-size: 14px; }
.yellow22 a span { background-position:0 -1624px; }
.yellow22 a .openCap { background-position:0 -1602px; }
.yellow22 a .closeCap { background-position:-17px -1602px; }
.yellow22 a:hover span { background-position:0 -1624px; }
.yellow22 a:hover .openCap { background-position:0 -1602px; }
.yellow22 a:hover .closeCap { background-position:-17px -1602px; }
.yellow22 a.disabled span, .yellow22 a.disabled:hover span { background-position:0 -1036px; }
.yellow22 a.disabled .openCap, .yellow22 a.disabled:hover .openCap { background-position:0 -970px; }
.yellow22 a.disabled .closeCap, .yellow22 a.disabled:hover .closeCap{ background-position:-17px -970px; }

/* Orange Button: 24px height, 129px min width. */
.orange24, .blue24 a, .orange24 .openCap, .orange24 .closeCap { height: 24px; }
.orange24 span { height: 21px; padding-top: 3px; }
.orange24 .btnTxt, .orange24 .btnSpacer { min-width: 111px; font-size: 14px; }
.orange24 a span { background-position:0 -1130px; }
.orange24 a .openCap { background-position:0 -1058px; }
.orange24 a .closeCap { background-position:-17px -1058px; }
.orange24 a:hover span { background-position:0 -1154px; }
.orange24 a:hover .openCap { background-position:0 -1082px; }
.orange24 a:hover .closeCap { background-position:-17px -1082px; }
.orange24 a.disabled span, .orange24 a.disabled:hover span { background-position:0 -1178px; }
.orange24 a.disabled .openCap, .orange24 a.disabled:hover .openCap { background-position:0 -1106px; }
.orange24 a.disabled .closeCap, .orange24 a.disabled:hover .closeCap{ background-position:-17px -1106px; }

.gray22, .gray22 a, .gray22 .openCap, .gray22 .closeCap { height: 22px; }
.gray22 span { height: 20px; padding-top: 2px; }
.gray22 .btnTxt, .gray22 .btnSpacer { min-width: 59px; font-size: 14px; }
.gray22 a span { background-position:0 -2116px; }
.gray22 a .openCap { background-position:0 -2044px; }
.gray22 a .closeCap { background-position:-20px -2044px; }
.gray22 a:hover span { background-position:0 -2092px; }
.gray22 a:hover .openCap { background-position:0 -2020px; }
.gray22 a:hover .closeCap { background-position:-20px -2020px; }
.gray22 a.disabled span, .gray22 a.disabled:hover span { background-position:0 -2068px; }
.gray22 a.disabled .openCap, .gray22 a.disabled:hover .openCap { background-position:0 -2068px; }
.gray22 a.disabled .closeCap, .gray22 a.disabled:hover .closeCap { background-position:-20px -2068px; }

/* Icon Button Styles */
.icon span { height: 19px; padding-top: 3px; }
.icon .openCap { width:24px;height:22px; }
.icon .closeCap { width:8px;height:22px; }
.icon .btnTxt { min-width: 20px; left: 24px; }
.icon .btnSpacer { min-width: 20px; padding-left: 24px; font-size: 12px; }
.icon a { color: #333 !important; font-size: 12px; }
.icon a span { background: url(/Images/btnBaseInputImgs.png)  repeat-x 0 -352px; }
.icon a .openCap { background: url(/Images/btnBaseInputImgs.png)  no-repeat 0 0; }
.icon a .closeCap { background: url(/Images/btnBaseInputImgs.png) no-repeat -20px 0; right: -8px; }

.blank .openCap { width:7px; }
.blank .btnTxt { left: 7px; }

.document a .openCap { background-position:0 0; }
.document a:hover .openCap { background-position:0 -22px; }

.pencil a .openCap { background-position:0 -44px; }
.pencil a:hover .openCap { background-position:0 -66px; }

.x a .openCap { background-position:0 -88px; }
.x a:hover .openCap { background-position:0 -110px; }

.ccard a .openCap { background-position:0 -132px; }
.ccard a:hover .openCap { background-position:0 -154px; }

.home a .openCap { background-position:0 -176px; }
.home a:hover .openCap { background-position:0 -198px; }

.plus a .openCap { background-position:0 -264px; }
.plus a:hover .openCap { background-position:0 -286px; }

.check a .openCap { background-position:0 -308px; }
.check a:hover .openCap { background-position:0 -330px; }

.cheersIcon .openCap { width:24px; }
.cheersIcon .btnTxt { left:24px; }
/* End Button Styles */
/* End Rounded Corner Elements */


/* Find Button Styles */

.gray34 a span,
.gray34 a .openCap,
.gray34 a .closeCap,
.gray34.searchIcon a .closeCap,
.gray34.searchIcon a.disabled .closeCap,
.gray34 a.disabled span,
.gray34 a.disabled .openCap,
.gray34 a.disabled .closeCap
{
	background: url(/Images/findButton.png) no-repeat;
}
.gray34 a span, .gray34 a.disabled span { background-repeat: repeat-x;}

.gray34,
.gray34 a,
.gray34 .openCap,
.gray34 .closeCap,
.gray34 span
{ height: 34px; }
.gray34 .btnTxt { padding: 0 10px;  font: 16px/34px Georgia; color: #333; left: 8px;}
.gray34 .btnSpacer { padding: 0 18px;  font: 16px/34px Georgia; color: #333; }
.gray34 a span { background-position: 0 -35px;}
.gray34 a .openCap {background-position: 0 0;width: 8px; }
.gray34 a .closeCap { background-position:-32px 0; }
.gray34 a:hover span { background-position: 0 -105px; }
.gray34 a:hover .openCap { background-position: 0 -70px; }
.gray34 a:hover .closeCap { background-position: -32px -70px; }
.gray34 a.disabled span,
.gray34 a.disabled:hover span
{ background-position:0 -175px; height: 34px; }
.gray34 a.disabled .openCap, .gray34 a.disabled:hover .openCap { background-position:0 -140px; }
.gray34 a.disabled .closeCap, .gray34 a.disabled:hover .closeCap { background-position:-32px -140px; }

.gray34.searchIcon .closeCap { width: 38px; }
.gray34.searchIcon a .closeCap { background-position: -3px 0; right: -35px; }
.gray34.searchIcon a:hover .closeCap { background-position: -3px -70px; right: -35px; }
.gray34.searchIcon a.disabled .closeCap,
.gray34.searchIcon a.disabled:hover .closeCap { background-position:-5px -140px; right: -35px; }
.gray34.searchIcon .btnTxt { padding-right: 15px; }
.gray34.searchIcon .btnSpacer { padding-right: 23px; }

/* End Find Button Styles */

.AddToCart input {
	float: left;
	border: 1px solid #777;
	text-align: right;
	font: 13px Arial;
	padding: 2px 3px 0 0;
	vertical-align: top;
}
.AddToCart .btn { float:left; padding-left:8px; }

.melaleucaLink:Link, .melaleucaLink:visited, .melaleucaLink:Hover, .melaleucaLink:Active {
	font: 11px Arial;
	color: #232323;
	text-decoration: underline;
}
.melaleucaLink:Hover { text-decoration: none; }

.hide
{
	visibility: hidden;
}

a.invoiceLink
{
	font: 12px/16px Arial;
	text-decoration: underline;
	color: #336600;
}

.owingBalance
{
	font: 12px Arial;
	color: #990000;
}

.copyright
{
	font: 10px Arial;
	color: #666;
}

.disclaimerText
{
	font: 11px Georgia;
	color: #8d742e;
}

.usernameIsText {
	text-align: center;
	padding: 10px 0 10px 0;
	font:12px georgia;
}

.accountReady {
	text-align: center;
	font:bold 14px georgia;
	padding: 15px 0 15px 0;
	background-color: #E7E1D8;
}

.usernameBorder {
	border: 1px solid #E7E1D8;
}

.usernameDisplayText {
	color:#7a4b00;
	font:18px georgia;
}

.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

/* Web Button Button - START */
.pure-button
{
	/*float: left;*/
	height: 30px;
	line-height: 30px;
	border-radius: 3px;
	padding: 0 15px;
	font-family: Arial, sans-serif;
	font-weight: bold;
	font-size: 12px;
	cursor: pointer;
	text-transform: uppercase;
	-webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
	-moz-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
	box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.3);
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
    .pure-button .fa
	{
		font-size: 14px;
	}

    .pure-button.pure-button-39 {
        height: 39px;
        line-height: 39px;
    }

    .pure-button.pure-button-25 {
        height: 25px;
        line-height: 25px;
    }

    .pure-button.pure-button-22 {
        height: 22px;
        line-height: 22px;
    }

    .pure-button[disabled],
    .pure-button[disabled] a,
    .pure-button[disabled] a:hover,
    .pure-button[disabled]:focus,
    .pure-button[disabled]:hover {
        background: rgb(235,235,235); /* Old browsers */
        background: -moz-linear-gradient(top, rgba(235,235,235,1) 0, rgba(188,188,188,1) 100%); /* FF3.6+ */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0,rgba(235,235,235,1)), color-stop(100%,rgba(188,188,188,1))); /* Chrome,Safari4+ */
        background: -webkit-linear-gradient(top, rgba(235,235,235,1) 0,rgba(188,188,188,1) 100%); /* Chrome10+,Safari5.1+ */
        background: -o-linear-gradient(top, rgba(235,235,235,1) 0,rgba(188,188,188,1) 100%); /* Opera 11.10+ */
        background: -ms-linear-gradient(top, rgba(235,235,235,1) 0,rgba(188,188,188,1) 100%); /* IE10+ */
        background: linear-gradient(to bottom, rgba(235,235,235,1) 0,rgba(188,188,188,1) 100%); /* W3C */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#EBEBEB', endColorstr='#BCBCBC',GradientType=0 ); /* IE6-9 */
        cursor: default;
        opacity: 1;
    }

    .pure-button-active,.pure-button:active {
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset, 0 0 6px rgba(0, 0, 0, .2) inset
    }

/* Web Button Color Styles Start*/
.pure-button-green,
.pure-button-green:focus
{
	color: #fff;
	background: rgb(64,146,47); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(64,146,47,1) 0%, rgba(40,94,29,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(64,146,47,1)), color-stop(100%,rgba(40,94,29,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(64,146,47,1) 0%,rgba(40,94,29,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(64,146,47,1) 0%,rgba(40,94,29,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(64,146,47,1) 0%,rgba(40,94,29,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(64,146,47,1) 0%,rgba(40,94,29,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40922f', endColorstr='#285e1d',GradientType=0 ); /* IE6-9 */
}
	.pure-button-green:hover
	{
		background: #40922f;
	}

.pure-button-white,
.pure-button-white:focus
{
	color: #285e1d;
	background: rgb(238,233,225); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(238,233,225,1) 0%, rgba(219,215,207,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(238,233,225,1)), color-stop(100%,rgba(219,215,207,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(238,233,225,1) 0%,rgba(219,215,207,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(238,233,225,1) 0%,rgba(219,215,207,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(238,233,225,1) 0%,rgba(219,215,207,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(238,233,225,1) 0%,rgba(219,215,207,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee9e1', endColorstr='#dbd7cf',GradientType=0 ); /* IE6-9 */
}
	.pure-button-white:hover
	{
		background: #eee9e1;
	}

.pure-button-blue,
.pure-button-blue:focus
{
	color: #fff;
	background: rgb(73,114,146); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(73,114,146,1) 0%, rgba(62,97,124,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(73,114,146)), color-stop(100%,rgba(40,94,29,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(73,114,146,1) 0%,rgba(62,97,124,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(73,114,146,1) 0%,rgba(62,97,124,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(73,114,146,1) 0%,rgba(62,97,124,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(73,114,146,1) 0%,rgba(62,97,124,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40922f', endColorstr='#285e1d',GradientType=0 ); /* IE6-9 */
}
	.pure-button-blue:hover
	{
		background: #678BAB;
	}

.pure-button-brown,
.pure-button-brown:focus
{
	color: #fff;
	background: rgb(139,129,75); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(139,129,75,1) 0%, rgba(88,80,67,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(139,129,75,1)), color-stop(100%,rgba(88,80,67,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(139,129,75,1) 0%,rgba(88,80,67,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(139,129,75,1) 0%,rgba(88,80,67,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(139,129,75,1) 0%,rgba(88,80,67,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(139,129,75,1) 0%,rgba(88,80,67,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#887E49', endColorstr='#585043',GradientType=0 ); /* IE6-9 */
}
    .pure-button-brown:hover
	{
		background: #887E49;
	}

.pure-button-red,
.pure-button-red:focus
{
	color: #fff;
	background: rgb(171,33,33); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(171,33,33,1) 0%, rgba(111, 21, 21,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(171,33,33,1)), color-stop(100%,rgba(111, 21, 21,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(171,33,33,1) 0%,rgba(111, 21, 21,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(171,33,33,1) 0%,rgba(111, 21, 21,1) 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, rgba(171,33,33,1) 0%,rgba(111, 21, 21,1) 100%); /* IE10+ */
	background: linear-gradient(to bottom, rgba(171,33,33,1) 0%,rgba(111, 21, 21,1) 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#AB2121', endColorstr='#6F1515',GradientType=0 ); /* IE6-9 */
}
    .pure-button-red:hover
	{
		background: #AB2121;
	}

.pure-button-transparent,
.pure-button-transparent:focus
{
	background: rgba(0,0,0,0);
    border: 1px solid rgba(255,255,255,0.2);
    -webkit-font-smoothing: antialiased;
     color: #fafafa;
}

.green.pure-button-transparent,
.green.pure-button-transparent:focus
{
    border: 1px solid #2D9117 !important;
     color: #2D9117 !important;
}

.white.pure-button-transparent,
 .white.pure-button-transparent:focus
{
    border: 1px solid #ffffff !important;
     color: #ffffff !important;
}

.pure-button.buttonCombo {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* Web Button - END */

 /* Input Field Styles */
.input-field-wrapper {
    float: left;
    position: relative;
    right: 18px;
}
.input-field-wrapper .input-icon
{
    position: relative;
    left: 30px;
    top: 1px;
    color: #B3B3B3;
    font-size: 20px;
}
.input-field-wrapper input
{
    width: 250px;
    border-radius: 3px;
    padding: 6px 6px 6px 36px;
}
 /* Input Field Styles END */