/*  

	HEROweb Developer Stylesheet 1/18/2012 
	Framework based on OOCSS by Nicole Sullivan. 
	This file works in conjunction with images-mm/css/master.css
	
	Sections:
	0. Helpers
	I. HTML Elements
	II. Layout
	III. Menu
	IV. UI
	V. Input
	VI. 3rd Party
	VII. Messages
	VIII. Type

	Please maintain alphabetical order of class and ID names within each section!

*/

/* --------------------------------------------------------------- 0. Helpers ----------------------------------------------------*/
html {
	/* background:  #bdc1c0 url('https://f2d6b3ff5b50c51832b9-d3bef01da3af9bcee7f5797e0d666052.ssl.cf2.rackcdn.com/background-tree_png-1447156505') no-repeat bottom; */
	background-color: #bdc1c0;
	/* background-attachment: fixed; */
	color: #313131;
}
.page { }
.ov {
	overflow: visible;
}

/* http://sonspring.com/journal/clearing-floats */

.clear {
  display: block;
  visibility: hidden;
  clear: both;
  overflow: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
  display: block;
  visibility: hidden;
  overflow: hidden;
  width: 0;
  height: 0;
  content: '\0020';
}

.clearfix:after {
  clear: both;
}

.clearfix {
  zoom: 1; /* IE6 + IE7 */
}


.hint {

}
.hint:hover {
	cursor: help;
}

.icon{margin-right: 5px;}
.pagecontent a { color:#415475;}
.pagecontent a:visited {color: #374763;}



/* --------------------------------------------------------------- I. HTML Elements =HTML Elements ----------------------------------------------*/

/* links */
a {color: #313131; text-decoration: none;}
a:focus, a:hover {text-decoration: underline;}
a:visited { color:#111; }
select, input, button, textarea {font-weight: 300; font-family:'Ubuntu',"Ubuntu","Myriad Pro","Segoe UI",Helvetica, Arial, sans-serif;}
body{position:relative;
	background:  #bac2b3 url('https://f2d6b3ff5b50c51832b9-d3bef01da3af9bcee7f5797e0d666052.ssl.cf2.rackcdn.com/background_jpg-1447156511') no-repeat center bottom; background-attachment: fixed;font-weight: 300;font-size: 15px;font-family:'Ubuntu',"Ubuntu","Myriad Pro","Segoe UI",Helvetica, Arial, sans-serif;
}
.body {background-color: #bbc2b5;
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.49);
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.49);    
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.49);line-height: 20px;  
}
code{color:#0B8C8F;}
em{font-style: italic;}
hr{ margin: 0 10px 10px 10px;border: 1px solid #e2e2e2; border-width: 0 0 1px 0;}
ol.simpleList li{ margin-left:40px;list-style-type: decimal;}
strong{font-weight:bold;}
ul.simpleList li, .bullets li{ margin-left:40px;list-style-type:disc;}

/* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
h1, .h1{ color:#9E3F3D; font-weight:normal; font-style: normal;font-size:175%; /* font-size: 159%; */}
h2, .h2{ color:#9E3F3D; font-weight:normal; font-style: normal;font-size:160%;}
h3, .h3{ color:#333; font-weight:normal; font-style: normal;font-size:145%;}
h4, .h4{ color: #333; font-weight:normal; font-style: normal;font-size:120%;}
h5, .h5{ color:#9E3F3D; font-weight:bold; font-style: normal;font-size:110%;}
h6, .h6{ color:#333; font-weight:normal; font-style: italic;font-size:105%;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
	font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;
} 
/* if additional headings are needed they should be created via additional classes, never via location dependant styling */
h1 a { color: inherit; } /*nice fix*/
h1 .baseline, .h1 .baseline { font-size: 62.8930818%; } /* 100% / current h1 size% */

/* --------------------------------------------------------------- 0. Additional Master CSS -----------------------------------------------------*/

/* This adds a toolkit for stand font sizing and for 10, 12 and 16 grid system missing from BOI and adds factions that aren't lowest terms (ex: size6of12 = size1of2). The benefit is when manipulating elements, spacing can be easily toggled in steps*/

/*font sizes for the people */.sizetext100 {font-size: 100%;} .sizetext200 {font-size: 200%;} .sizetext300 {font-size: 300%;}
.sizetext5  {font-size:  5%;} .sizetext105 {font-size: 105%;} .sizetext205 {font-size: 205%;} .sizetext305 {font-size: 305%;}
.sizetext10 {font-size: 10%;} .sizetext110 {font-size: 110%;} .sizetext210 {font-size: 210%;} .sizetext310 {font-size: 310%;}
.sizetext15 {font-size: 15%;} .sizetext115 {font-size: 115%;} .sizetext215 {font-size: 215%;} .sizetext315 {font-size: 315%;}
.sizetext20 {font-size: 20%;} .sizetext120 {font-size: 120%;} .sizetext220 {font-size: 220%;} .sizetext320 {font-size: 320%;}
.sizetext25 {font-size: 25%;} .sizetext125 {font-size: 125%;} .sizetext225 {font-size: 225%;} .sizetext325 {font-size: 325%;}
.sizetext30 {font-size: 30%;} .sizetext130 {font-size: 130%;} .sizetext230 {font-size: 230%;} .sizetext330 {font-size: 330%;}
.sizetext35 {font-size: 35%;} .sizetext135 {font-size: 135%;} .sizetext235 {font-size: 235%;} .sizetext335 {font-size: 335%;}
.sizetext40 {font-size: 40%;} .sizetext140 {font-size: 140%;} .sizetext240 {font-size: 240%;} .sizetext340 {font-size: 340%;}
.sizetext45 {font-size: 45%;} .sizetext145 {font-size: 145%;} .sizetext245 {font-size: 245%;} .sizetext345 {font-size: 345%;}
.sizetext50 {font-size: 50%;} .sizetext150 {font-size: 150%;} .sizetext250 {font-size: 250%;} .sizetext350 {font-size: 350%;}
.sizetext55 {font-size: 55%;} .sizetext155 {font-size: 155%;} .sizetext255 {font-size: 255%;} .sizetext355 {font-size: 355%;}
.sizetext60 {font-size: 60%;} .sizetext160 {font-size: 160%;} .sizetext260 {font-size: 260%;} .sizetext360 {font-size: 360%;}
.sizetext65 {font-size: 65%;} .sizetext165 {font-size: 165%;} .sizetext265 {font-size: 265%;} .sizetext365 {font-size: 365%;}
.sizetext70 {font-size: 70%;} .sizetext170 {font-size: 170%;} .sizetext270 {font-size: 270%;} .sizetext370 {font-size: 370%;}
.sizetext75 {font-size: 75%;} .sizetext175 {font-size: 175%;} .sizetext275 {font-size: 275%;} .sizetext375 {font-size: 375%;}
.sizetext80 {font-size: 80%;} .sizetext180 {font-size: 180%;} .sizetext280 {font-size: 280%;} .sizetext380 {font-size: 380%;}
.sizetext85 {font-size: 85%;} .sizetext185 {font-size: 185%;} .sizetext285 {font-size: 285%;} .sizetext385 {font-size: 385%;}
.sizetext90 {font-size: 90%;} .sizetext190 {font-size: 190%;} .sizetext290 {font-size: 290%;} .sizetext390 {font-size: 390%;}
.sizetext95 {font-size: 95%;} .sizetext195 {font-size: 195%;} .sizetext295 {font-size: 295%;} .sizetext395 {font-size: 395%;}
.sizetext400 {font-size: 400%;}  /* end font sizes for the people */


/* Additional BOI width classes */
.size1of10  { width: 10%; } .size2of10  { width: 20%; } .size3of10  { width: 30%; } .size4of10  { width: 40%; }
.size5of10  { width: 50%; } .size6of10  { width: 60%; } .size7of10  { width: 70%; } .size8of10  { width: 80%; } 
.size9of10  { width: 90%; }

.size1of7 { width: 14.285%;} .size2of7 { width:28.5714%;} .size3of7 {width: 42.857%;} .size4of7 { width: 57.14%;}
.size5of7 { width: 71.428%;} .size6of7 { width: 85.714%;} .size7of7 {width: 100%;}

.size1of12  { width: 8.333%; }      .size2of12 { width: 16.666666%; } .size3of12, .size4of16  { width: 25%; }
.size4of12  { width: 33.333333%; } .size5of12  { width: 41.666666%; } .size6of12, .size8of16  { width: 50%; }
.size7of12  { width: 58.333333%; } .size8of12  { width: 66.666666%; } .size9of12, .size12of16 { width: 75%; }
.size10of12 { width: 83.333333%; } .size11of12 { width: 91.666666%; }

.size1of16  {width: 4.25%;}  .size2of16  {width: 10.5%;}  .size3of16  {width: 16.75%;} .size5of16 {width: 29.25%;}
.size6of16  {width: 35.5%;}  .size7of16  {width: 41.75%;} .size9of16  {width: 54.25%;} .size10of16 {width: 60.5%;}
.size11of16 {width: 66.75%;} .size13of16 {width: 79.25%;} .size14of16 {width: 85.5%;}  .size15of16 {width: 91.75%;}	

/* ---------------------------------------------------------- II. LAYOUT =LAYOUT -------------------------------------------------------- */


#banner {
	height: 172px; 
	-webkit-border-radius: 24px 24px 0px 0px; 
	-moz-border-radius: 24px 20px 0px 0px;
	border-radius: 24px 24px 0px 0px;
	background-image: url('https://f2d6b3ff5b50c51832b9-d3bef01da3af9bcee7f5797e0d666052.ssl.cf2.rackcdn.com/top_png-1447156512') ;
	background-size:100%;
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.49);
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.49); 
	
	box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.49);
}

.header {
	position: relative; overflow: hidden;
}

.hpmtpics img{
	display: inline;
}

.nextprev {
	margin: 0 10px;
	text-align: right;
}

.pillowBox {
 border: 1px solid rgba(0,0,0,0.2); -webkit-border-radius: 5px; -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: -2px -2px 4px 2px rgba(0,0,0,0.07) inset, 0 0 8px 4px rgba(255,255,255,0.4) inset, 2px 2px 2px 1px rgba(255,255,255,0.6), -1px -1px 2px 1px rgba(0,0,0,0.1);
 -moz-box-shadow: -2px -2px 4px 2px rgba(0,0,0,0.07) inset, 0 0 8px 4px rgba(255,255,255,0.4) inset, 2px 2px 2px 1px rgba(255,255,255,0.6), -1px -1px 2px 1px rgba(0,0,0,0.1);
 box-shadow: -2px -2px 4px 2px rgba(0,0,0,0.07) inset, 0 0 8px 4px rgba(255,255,255,0.4) inset, 2px 2px 2px 1px rgba(255,255,255,0.6), -1px -1px 2px 1px rgba(0,0,0,0.1);
 }

.primary {
	background-color: #fff;
}

.right { float:right; margin-bottom: 20px; margin-left: 20px; }

.secondary { 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: rgba(0,0,0,0.05); 
}

.separated {
	border-bottom: 1px dotted #ccc;	
}

h1.sidebar{
	font-size: 16px;	
}
h1.programs { color: #fff; }

.tertiary {
	background-color: #eee;
	background-color: rgba(215,215,215,0.5);
}

.quaternary { } .quinary { } .senary { } .septenary { }


/* =spacing */
/** 
 * Spacing classes should be used to modify the default spacing between objects (not between nodes of the same object)
 * Please use judiciously. You want to be using defaults most of the time, these are exceptions! 
 * <type><location><size>
 */
 /* spacing headers */
h1, h2, h3, h4, h5, h6, ul, ol,dl, p,blockquote, .media {margin:10px;} 
h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}

h1, h2, h3, h4, h5, h6, p {margin-left: 0px;} 
pre{margin: 10px;}
table h1,table h2,table h3, table h4, table h5, table h6, table p, table ul, table ol, table dl{padding:0;}
 
/* spacing helpers
p,m = padding,margin
a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical
s,m,l,n = small(5px),medium(10px),large(20px),none(0px)
*/

.ptn,.pvn,.pan{padding-top:0px !important;}
.pts,.pvs,.pas{padding-top:5px !important;}
.ptm,.pvm,.pam{padding-top:10px !important;}
.ptl,.pvl,.pal{padding-top:20px !important;}
.prn,.phn,.pan{padding-right:0px !important;}
.prs,.phs,.pas{padding-right:5px !important;}
.prm,.phm,.pam{padding-right:10px !important;}
.prl,.phl,.pal{padding-right:20px !important;}
.pbn,.pvn,.pan{padding-bottom:0px !important;}  
.pbs,.pvs,.pas{padding-bottom:5px !important;}
.pbm,.pvm,.pam{padding-bottom:10px !important;}
.pbl,.pvl,.pal{padding-bottom:20px !important;}
.pln,.phn,.pan{padding-left:0px !important;}
.pls,.phs,.pas{padding-left:5px !important;}
.plm,.phm,.pam{padding-left:10px !important;}
.pll,.phl,.pal{padding-left:20px !important;}
.mtn,.mvn,.man{margin-top:0px !important;}
.mts,.mvs,.mas{margin-top:5px !important;}
.mtm,.mvm,.mam{margin-top:10px !important;}
.mtl,.mvl,.mal{margin-top:20px !important;}
.mrn,.mhn,.man{margin-right:0px !important;}
.mrs,.mhs,.mas{margin-right:5px !important;}
.mrm,.mhm,.mam{margin-right:10px !important;}
.mrl,.mhl,.mal{margin-right:20px !important;}
.mbn,.mvn,.man{margin-bottom:0px !important;}  
.mbs,.mvs,.mas{margin-bottom:5px !important;}
.mbm,.mvm,.mam{margin-bottom:10px !important;}
.mbl,.mvl,.mal{margin-bottom:20px !important;}
.mln,.mhn,.man{margin-left:0px !important;}
.mls,.mhs,.mas{margin-left:5px !important;}
.mlm,.mhm,.mam{margin-left:10px !important;}
.mll,.mhl,.mal{margin-left:20px !important;}

/* ----------------------------------------------------------- III. MENU =MENU -------------------------------------------------------*/

/* simple skin */

.simpleMenu { }

.simpleMenu .dropdown, .simpleMenu .dropdownRight { margin-top: 5px; background-color: #f9f9f9; }

.simpleMenu .dropout, .simpleMenu .dropoutRight { background-color: #fff; }

.simpleMenu .menutab {
	margin-top:0;
	margin-right:30px;
	padding: 5px 10px;
}

.simpleMenu .menutab:hover {
	background-color: #f9f9f9;	
}

.simpleMenu .ml {  }
.simpleMenu .ml:hover { background-color: rgb(0, 105, 214); }
.simpleMenu .ml > a { padding: 8px; }
.simpleMenu .ml > a:hover { color: #fff; text-decoration: none; }

/* pixelborder skin */

.pixelBorder { }

.pixelBorder .dropdown, .pixelBorder .dropdownRight { margin-top: 5px; border: 1px solid #000; border-top: 0; background-color: #fff; }

.pixelBorder .dropout, .pixelBorder .dropoutRight { border: 1px solid #999; background-color: #f3f3f3;}
.pixelBorder .dropout { border-left: 0; } .pixelBorder .dropoutRight { border-right: 0; }





.pixelBorder .menutab:hover .dropdown {	left: -1px; } 
.pixelBorder .menutab:hover .dropdownRight { right: -1px; left: auto; }

.pixelBorder .ml { border: 1px solid rgba(0,0,0,0); border-bottom: 1px dotted #CCC; }
.pixelBorder .ml:hover { border: 1px solid #999; background-color: #f3f3f3;}
.pixelBorder .ml > a { padding: 8px; }
.pixelBorder .ml > a:hover { text-decoration: none;}
.pixelBorder .ml:hover > .dropout, .ml:hover > .dropoutRight { top: -1px; }

/* menu mixins */

.level1 { background-color: #f00 !important; color: #fff !important;}
.level2 { background-color: #0f0 !important; }

.rounded .dropdown, .rounded .dropdownRight { -webkit-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; border-radius: 0 0 5px 5px; }
.rounded .dropout { -webkit-border-radius: 0 5px 5px 5px; -moz-border-radius: 0 5px 5px 5px;	border-radius: 0 5px 5px 5px; }
.rounded .dropoutRight { -webkit-border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; border-radius: 5px 0 5px 5px; }
.rounded .ml { -webkit-border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; border-radius: 5px 0 0 5px; }
.rounded .dropdownRight .ml { -webkit-border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; border-radius: 0 5px 5px 0; }
.rounded .menutab { -webkit-border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0;	border-radius: 5px 5px 0 0; }

.shadowed .dropdown, .shadowed .dropout, { box-shadow: 2px 3px 2px 1px rgba(0,0,0,0.3); }
.shadowed .dropdownRight, .shadowed .dropoutRight { box-shadow: -2px 3px 2px 1px rgba(0,0,0,0.3); }

/* ----------------------------------------------------------------- IV. UI =UI -----------------------------------------------------*/
.cloudy {
	position:absolute;
	z-index: 1;
	width: 100%;
	height: 120px;
	background: url('https://f2d6b3ff5b50c51832b9-d3bef01da3af9bcee7f5797e0d666052.ssl.cf2.rackcdn.com/cloudbg_png-1447156513');
}
/* =cart */

table.cart {  }
table.cart th {background-color: rgba(255,255,255,0.3);}
table.cart td { }
table.cart tbody tr.product { border-top: 1px dotted #ccc; }
table.cart tbody {border-bottom: 1px dotted #ccc;}

.forgotPassword {
	*height: 120px; /* IE7 + forms + jquery + animation = hijinks */
}

/* =forms - quick styles for making great forms in conjunction with OOCSS grids */

.form {
	margin: 10px;
}

.form .line {
	margin: 0 -10px;	
}

.form .inner {
	margin: 5px 10px;
}

.form .fullwidth {
	width: 96%; /* hacks the padding on the element*/
}

.form input, .form textarea, .form select {
	padding: 5px 2%; /* px is better for height because it maintains standard height across different width items*/
}

table.form {
	margin: 10px;
	width: 100%;	
}

table.form td {
	padding: 5px;	
}

.interactive:hover {
 background-color: rgba(255,255,255,0.5);
 cursor:pointer;
}

#mainimage {
	margin: 0 1px;	
}

/* =minicart */

.minicart {
	height: 300px;
}

table.minicart {
	width: 100%;
	height: auto;
}

table.minicart td, table.minicart th {
	padding: 5px;
}

table.minicart td {
	padding-top: 0;	
}

table.minicart .title {
		padding-top: 10px;
		border-top: 1px solid rgba(0,0,0,0.1);
}

/*=optionsthumbs options */

.optionsthumbs {
	overflow:hidden;
}

.optionThumb {
	float: left;	
	cursor: pointer;
}	

.optionThumb span.title {
	font-size: 0.8em;
}	

.optionthumbwrapper {
	overflow: hidden;
	width: 58px;
	height: 58px;
	border: 1px #dddddd solid;	
}

.optionthumbwrapper:hover {
	border: 1px #000 solid; 	
}

.optionsthumbs img {
	display: inline;
	width: 58px;
	opacity: 0.7;
	filter: alpha(opacity = 70);
}

.optionsthumbs img:hover {
	opacity: 1.0;
	filter: alpha(opacity = 100);
}

/* =orderHistory order history */

table.orderHistory {
		
}

table.orderHistory tr {
	vertical-align: top;
}

table.orderHistory th {
	font-weight: 700;	
}

table.orderHistory tbody td {
	padding: 5px 0;
	border-bottom: 1px solid #e2e2e2;
}

table.orderHistory tbody tr:hover {
	background-color: #FFC;
}

/* =Overlays =JQueryTools =JQuery Tools */

.simpleOverlay {
	z-index:10;
	
	/* styling */
	padding: 20px;
	
	width: 600px; /* 9 columns in 12-col */
	height:400px;
	
	/* CSS3 styling for latest browsers */
	
	border: 1px solid #cccccc;
	background-color:#fff;
	background-image: none;
	-webkit-box-shadow: 4px 4px 6px 0 rgba(0,0,0,0.5);
	-moz-box-shadow: 4px 4px 6px 0 rgba(0,0,0,0.5);
	box-shadow: 4px 4px 6px 0 rgba(0,0,0,0.5);
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
}

/* close button positioned on upper right corner */
.simpleOverlay .close {
	position:absolute;
	top:-15px;
	right:-15px;
	width:28px;
	height:28px;
	background-image:url('https://f2d6b3ff5b50c51832b9-d3bef01da3af9bcee7f5797e0d666052.ssl.cf2.rackcdn.com/overlay-close_png-1447156514');
	cursor:pointer;
}

.contentWrap {
	position: relative;
	overflow-y:auto; /* goes with simpleOverlay */
	height:400px; /* why? */	
}


/* =Product Details */

.productImage {
	display:inline;
	/* width: 58px; */
	border: 1px #dddddd solid;
	cursor: pointer;
}

.productImage:hover {
	border: 1px #000 solid; 
}

/* =quick view =quickview =quickhover */

.quickHover{
	display: none;

	text-align: center;
}

.quickHover a {
	display: block;
	padding-top: 4px;
	padding-bottom: 4px;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.8);
	color: #ddd;
	*background-color: #333;
}

.quickHover a:hover {
	color: #fff;	
}

.quickview { }

.quickview div.optionsthumbs img {
	width: 28px;
}

.quickview img.product_image {
	width: 28px;	
}

h1.quickviewTitle { font-size: 120%; }

.fulldetails { }

/* =Tabs (jquery tools) */

.tabs { 
	margin-bottom: 0;
	height: 30px; 
	list-style: none;
}

/* single tab */
.tabs li { 
	float: left;
	list-style-image:none !important;	 
	text-indent: 0; 
}

/* link inside the tab. */
.tabs a { 
	display: block;
}

.tabs a:active {
	outline:none;		
}

/* when mouse enters the tab move the background image */
.tabs a:hover {	

}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
.tabs .current, .tabs .current:hover, .tabs li.current a {	
	cursor:default !important; 
}

.panes div {

}

/* tab skins*/

/* simple tabs skin */

.tabs.simpleTabs { 
	margin:0 !important; 
	padding:0;
}

/* single tab */
.tabs.simpleTabs li {
	margin:0 !important; 
	padding:0; 
}

/* link inside the tab. */
.tabs.simpleTabs a {
	/* top: 1px; */ 
	padding: 0 20px;
	height: 30px;
	/* border: 1px solid #ccc; */
	background-color: #d9d5d4;
	-webkit-box-shadow: inset 0 -2px 4px 0 rgba(0,0,0,0.15);
	-moz-box-shadow: inset 0 -2px 4px 0 rgba(0,0,0,0.15);
	box-shadow: inset 0 -2px 4px 0 rgba(0,0,0,0.15);
	text-align:center;	
	text-decoration:none;  
	line-height:30px;
}

.tabs.simpleTabs li:first-child a{
	-webkit-box-shadow: inset 3px 2px 4px 1px #d9d5d4, inset 0 -2px 4px 0 rgba(0,0,0,0.15);
	-moz-box-shadow: inset 3px 2px 4px 1px #d9d5d4, inset 0 -2px 4px 0 rgba(0,0,0,0.15);
	box-shadow: inset 3px 2px 4px 1px #d9d5d4, inset 0 -2px 4px 0 rgba(0,0,0,0.15);
}

.tabs.simpleTabs li:last-child a{
	-webkit-box-shadow: inset -3px 2px 4px 1px #d9d5d4, inset 0 -2px 4px 0 rgba(0,0,0,0.15);
	-moz-box-shadow: inset -3px 2px 4px 1px #d9d5d4, inset 0 -2px 4px 0 rgba(0,0,0,0.15);
	-box-shadow: inset -3px 2px 4px 1px #d9d5d4, inset 0 -2px 4px 0 rgba(0,0,0,0.15);
}

.tabs.simpleTabs a:active {
	outline:none;	/* this is the little dotted box */
}

/* when mouse enters the tab move the background image */
.tabs.simpleTabs a:hover {	
	background-color: #dedcdb;
	-webkit-box-shadow: inset 0 -2px 4px 0 rgba(0,0,0,0.1);
	-moz-box-shadow: inset 0 -2px 4px 0 rgba(0,0,0,0.1);
	box-shadow: inset 0 -2px 4px 0 rgba(0,0,0,0.1); /* softens the shadow */
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
.tabs.simpleTabs .current, .tabs.simpleTabs .current:hover, .tabs.simpleTabs li.current a {	
	background-color: #eceae9;
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	color:#000 !important;
}

.panes.simpleTabs div {
	background-color: #eceae9;
}


/* linkTabs tabs skin, just links for tabs and no bg */

.tabs.linkTabs { }

.tabs.linkTabs li {
	padding: 0 20px;
	height: 30px;
	border-right: 1px dotted #ccc;
	text-align:center;	
	text-decoration:none;  
	line-height:30px;
}

.tabs.linkTabs li:first-child {
	padding-left: 0;	
}

.tabs.linkTabs li:last-child {
	border-right: none;	
}

.tabs.linkTabs .current, .tabs.linkTabs .current:hover, .tabs.linkTabs li.current a {	
	color:#000 !important;
	text-decoration: none;
}

.panes.linkTabs {
		
}

/* =viewcart */

.viewcart {
	
}

table.viewcart tbody tr:nth-child(odd) { background-color: #fbfbfb;}

table.viewcart div.product {
	height: 100px;
}

table.viewcart span.name {
		
}

table.tracking, table.ups_table, .tracking { }
table.tracking.ups, table.ups_table, .tracking.ups { }

/*  Check out */

table.pmt_table th {
	background-color: #555;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
}

table.pmt_table td {
	padding: 5px;
	background-color: #fff;
}
.pmt_table tbody tr th div  {
	margin-top: 5px;
	margin-bottom: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left:4px;
}
/*=====================================================  Menubar (sidebar) =====================================================*/

.size1ofx {
	width: 22%;
}
.size2ofx {
	width: 78%;
}
.menubar ul {

}
.control {
	background: url('https://f2d6b3ff5b50c51832b9-d3bef01da3af9bcee7f5797e0d666052.ssl.cf2.rackcdn.com/background-white_png-1447156515') repeat-y left center;
	
}

.menubar ul li {
	margin-top: 3px;
	margin-bottom: 7px;
	padding-bottom: 3px;
	padding-left: 5px;
	font-size: 14px;
}
.menubar ul li:first-child {

}
.menubar h3 {
	margin-bottom: 0px;
	margin-left: 5px;
	padding-top: 4px;
	padding-bottom: 4px;
	font-size: 16px;
}
.menubar h3 a {
	color: #333;
}
.menubar-headline {
	margin-left: 5px;

	width:190px;
	background-color: #beceb1;
    -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.40);
    -moz-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.40);
	box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.40);

}

/*=====================================================  Menu =====================================================*/

.showul ul li {
	margin-left: 20px;
	list-style: disc;
	
}
/*=====================================================  footer (bottom) =====================================================*/
#foot { 
	-webkit-border-radius: 0px 0px 10px 10px; 
	-moz-border-radius: 0px 0px 10px 10px;
	border-radius: 0px 0px 10px 10px; 
	background-color: #BBC2B5;
    -webkit-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.49);
    -moz-box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.49);
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.49);
}	
#foot h2{
	margin: 5px;
	font-size: 12px;
}
.grass {
	position: relative;
	height: 126px;
	background: url('https://f2d6b3ff5b50c51832b9-d3bef01da3af9bcee7f5797e0d666052.ssl.cf2.rackcdn.com/grass-cycle_png-1447156516') center bottom;

}
.alignright {
	text-align: right;
}
.align-right-img {
	float: right;
}
.siteby {font-size: 11px;}
/*=====================================================/ footer (bootom) =====================================================*/
.pixelBorder .menutab:hover {
	padding: 5px 16px 5px 16px;
	border: 1px solid #000;
	border-bottom: 0;
	background-color: #fff;	
}
.pixelBorder .menutab {
	margin-top:0;
	margin-right:22px;
	margin-left: 10px;
	padding: 5px 17px;
}
.menu .menutab {
	font-size: 17px;
	font-weight: 400;
}
.menutab a {
	color: white;
}
.menu .menutab:nth-child(1) {
	background-color: #b7a53f;
}
.menu .menutab:nth-child(1):hover {
	background-color: #ad9b35;
}


.menu .menutab:nth-child(6) {
	background-color: #d39b60;
}
.menu .menutab:nth-child(6):hover {
	background-color: #be8c56;
}


.menu .menutab:nth-child(3) {
	background-color: #9e3f3d;
}
.menu .menutab:nth-child(3):hover  {
	background-color: #873634;
}


.menu .menutab:nth-child(2) {
	background-color: #889e5e;
}
.menu .menutab:nth-child(2):hover  {
	background-color: #768952;
}


.menu .menutab:nth-child(5) {
	background-color: #8c6e54;
}
.menu .menutab:nth-child(5):hover  {
	background-color: #8c6e54;
}


.menu .menutab:nth-child(4) {
	background-color: #8c6e54;
}
.menu .menutab:nth-child(4):hover  {
	background-color: #7b614a;
}


.menu .menutab:nth-child(7) {
	background-color: #d2bd48;
}
.menu .menutab:nth-child(7):hover  {
	background-color: #d2bd48;
}


/*=====================================================  Regional Programs =====================================================*/

/* div.regionalprograms-image .muncher > img:nth-of-type(odd) {
	float: right; */

/* }
div.regionalprograms-image .muncher > img:nth-of-type(even){
	float: left; */
.imageRight {
	float: right;
	padding-right: 0px;
	padding-left: 10px;
}
.imageLeft {
	float: left;
}
.regionalprograms-image h1 {
	line-height: 30px;
}

.roundedimg { 
-webkit-border-radius: 3px; 
-moz-border-radius: 3px;
		border-radius: 3px; 
}
.maxwidth {
	max-width: 755px;
}
.subnavLinks {  background-color: rgba(0,0,0,.05); padding-left: 5px; padding-right: 5px; }
.subnavLinks:hover { background-color: rgba(0,0,0,.09); }

.subnavLinks p { font-size: 14px;  }
.subnavLinks p a:hover { text-decoration: none; }

/*===================================================== Home Page (homepage) ============================================================= */
.imghover img:hover {
	opacity: 0.8;
}
.slideshow img { 
-webkit-border-radius: 8px; 
-moz-border-radius: 8px;
border-radius: 8px; 
}
.roundedborder { 
	border: 3px solid #858585; 
	-webkit-border-radius: 6px; 
	-moz-border-radius: 6px;
	border-radius: 6px;
}
.roundedborder2 { 
	border: 3px solid #858585; 
	-webkit-border-radius: 6px; 
	-moz-border-radius: 6px;
	border-radius: 6px;
}
.striped li {
	border-bottom: 1px;
	border-bottom-style: solid;
	border-bottom-color: #858585;
}
.striped li:last-child {
	border-bottom: 0px;
}
.striped li:nth-child(even) {
	background-color: #a8b3a3;
}
.roundedborder ul li hr {
	border: 1px solid #a8b3a3;
}
.roundedborder ul li:last-child hr {
	display: none;
}
.roundedborder ul, .roundedborder ul li {
	list-style:none;
	list-style-type: none;
	list-style-image: none;
}
.roundedborder ul li {
	margin-left: 0px;
}

.annoucement-img { 
	-webkit-border-radius: 5px; 
	-moz-border-radius: 5px;
	border-radius: 5px; 
}


/*=============================================================  (Links) ============================================================= */

.linkslist ul li, .linkslist li{
	list-style-type: none;
}
.linkslist ul li {
	margin-left: 0px;
}
/* ------------------------------------------------------------------ V. Input ------------------------------------------------------- */

/* =buttons */

.action {
	background-color: #374763;	
	color: #fff;
}


.appearing {
	border: 1px solid rgba(255,255,255,0);
	background: none;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	text-align: left;
	text-shadow: none;
}

.appearing:hover {
	 border: 1px solid #afbccb; /* fallback for IE6 */
	 border: 1px solid rgba(0,0,0,0.4); /* this creates a dark version of the background-color for the outline; you don't have to adjust unless you want a lighter outline */ -webkit-border-radius: 3px; /* remember to change all three at once! 15 makes rounded buttons, 3 is default */ -moz-border-radius: 3px;
	 border-radius: 3px;
	 background-color: #eee;
	 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 10px 15px rgba(255,255,255,0.5), inset 1px 1px rgba(255,255,255,0.5), inset -1px -1px rgba(255,255,255,0.5);
	 -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 10px 15px rgba(255,255,255,0.5), inset 1px 1px rgba(255,255,255,0.5), inset -1px -1px rgba(255,255,255,0.5);
	 box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 10px 15px rgba(255,255,255,0.5), inset 1px 1px rgba(255,255,255,0.5), inset -1px -1px rgba(255,255,255,0.5);
	 text-shadow: 0 1px 0 rgba(255,255,255,0.3), 0 -1px 0 rgba(0,0,0,0.2); /* Dark and light emboss */
	 cursor: pointer;
}

.button {display:inline-block;} /* this goes on a's to make a link button */

.button.fullwidth {
	padding-right: 0;
	padding-left: 0;
}

input, textarea, select {
  display: inline-block;
  padding: 5px; /* px is better for height because it maintains standard height across different width items*/
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  /* font-size: 1em; */
  /* line-height: 1.38461538em; */
  
  -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
  -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
  transition: border linear 0.2s, box-shadow linear 0.2s;
}

input:focus, textarea:focus { /* adds nice focus state */
  outline: none;
  border-color: rgba(82, 168, 236, 0.8);
  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
}

button, input[type=submit], input[type=button], .button {
  padding: 5px;
  border: 1px solid #afbccb; /* fallback for IE6 */
  border: 1px solid rgba(0,0,0,0.4); /* this creates a dark version of the background-color for the outline; you don't have to adjust unless you want a lighter outline */ -webkit-border-radius: 3px; -moz-border-radius: 3px;
  border-radius: 3px; 
  /* background-color: #eee; */
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 10px 15px rgba(255,255,255,0.5), inset 1px 1px rgba(255,255,255,0.5), inset -1px -1px rgba(255,255,255,0.5);
  -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 10px 15px rgba(255,255,255,0.5), inset 1px 1px rgba(255,255,255,0.5), inset -1px -1px rgba(255,255,255,0.5);  
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 10px 15px rgba(255,255,255,0.5), inset 1px 1px rgba(255,255,255,0.5), inset -1px -1px rgba(255,255,255,0.5);
 text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.3), 0 -1px 0 rgba(0,0,0,0.2); /* Dark and light emboss */ 
  cursor: pointer;
}

button:hover, button:focus, input[type="button"]:hover, input[type="submit"]:hover, .button:hover {
  border-color: #69b;
  background-color: #adf; /* default is #adf */
  color: #000;
   text-decoration: none;
}


/* ----------------------------------------------------------------- VI. 3rd Party ---------------------------------------------------- */


/* - =JQZOOM - */

.zoomPad{
	position:relative;
	z-index:99;
	float:left;
	cursor:crosshair;
}


.zoomPreload{
   position:absolute;
   top:0px;
   left:0px;
   z-index:110;
   padding: 8px;
   width:90px;
    * width:100px;
   height:43px;
    * height:49px;
   border: 1px solid #CCC;
   background-color: white;
   background-image: url(https://f2d6b3ff5b50c51832b9-d3bef01da3af9bcee7f5797e0d666052.ssl.cf2.rackcdn.com/zoomloader_gif-1447156516);
   background-position: 43px 30px;
   background-repeat: no-repeat;
   color: #333;
   text-align:center;
   text-decoration: none;
   font-size: 12px;
   font-family: Tahoma;
   opacity: 0.8;
   filter: alpha(opacity = 80);
   -moz-opacity:0.8;
}


.zoomPup{
	position:absolute;
	z-index:120;
  z-index:101;
	overflow:hidden;
	border:1px solid #CCC; -webkit-border-radius: 5px; -moz-border-radius: 5px;
  
  border-radius: 5px;
  background: -moz-linear-gradient(top, rgba(255,255,255,.61) 0%, rgba(255,255,255,0) 24%, rgba(255,255,255,0) 71%, rgba(255,255,255,.61) 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,.61)), color-stop(24%,rgba(255,255,255,0)), color-stop(71%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,.61))); /* webkit */
	background-color: #FFF;
  -webkit-box-shadow: 0px 5px 10px #000;
  -moz-box-shadow: 0px 5px 10px #000;
  
  box-shadow: 0px 5px 10px #000;
	opacity: 0.6;
	filter: alpha(opacity = 60);
  cursor:crosshair;
	-moz-opacity:0.6;
}

.zoomOverlay{
	position:absolute;
	top:0px;
	left:0px;
	z-index:5000;
  z-index:101;
	display:none;
	width:100%;
	height:100%;
	background:#FFF;
	/* opacity:0.5; */
  
}

.zoomWindow{
	position:absolute;
	top:40px;
	left:110%;
	z-index:6000;
  z-index:10000;
  z-index:110;
	height:auto;
	background:#FFF;
}
.zoomWrapper{
	position:relative;
  z-index:110;
	border:1px solid #999;
}
.zoomWrapperTitle{
  position:absolute;
  top:0px;
  left:0px;
  z-index:120;
	display:block;
  overflow:hidden;
	width:100%;
	height:18px;
	background:#999;
	color:#FFF;
	text-align:center;
	font-size:10px;
	line-height:18px;
  opacity: 0.6;
  filter: alpha(opacity = 60);
  -moz-opacity:0.6;
}
.zoomWrapperImage{
  position:relative;
  z-index:110;
	display:block;
  overflow:hidden;

}
.zoomWrapperImage img{
  position:absolute;
  z-index:101;
  display:block;
  border:0px;
}

.zoomIframe{
  position:absolute;
  z-index: -1;
  display:block;
  opacity: 0.80;
  filter:alpha(opacity=0);
  -moz-opacity: 0.80;
}
table.pmt_table {
	border: 1px solid #ddd;
}

table.pmt_table th {
	background-color: #cdcccc;
	color: #333;
	font-weight: bold;
	font-size: 12px;
}

table.pmt_table td {
	padding: 5px;
	background-color: #fff;
}

/*********************************************************
/ When clicking on thumbs jqzoom will add the class
/ "zoomThumbActive" on the anchor selected
/*********************************************************/

/* ==================================================== Add this =========================================================*/

/* ADDTHIS LOCKED SHARING TOOLBOX */

#at-gsm {
	position: fixed;
	right: 100px;
	bottom: 0;
	z-index: 1000;
	width: 180px;
	border-top: 1px solid #ddd;
	border-right: 1px solid #ddd;
	border-left: 1px solid #ddd;
	-webkit-border-top-right-radius: 6px;
	border-top-right-radius: 6px;
	-webkit-border-top-left-radius: 6px;
	border-top-left-radius: 6px;
	background: #fff;
	box-shadow: 0 0 3px #ccc;
	_position: absolute;
	-moz-border-radius-topleft: 6px;
	-moz-border-radius-topright: 6px;

}
#at-gsm .addthis_toolbox ul {
	display: none;
	margin: 0;
	padding: 0;
}
#at-gsm .addthis_toolbox ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#at-gsm .addthis_toolbox a {
	display: block;
	float: none;
	padding: 10px 20px;
	height: 32px;
	border-bottom: 1px solid #eee;
	color: #5f656e;
	font-size: 16px;
	line-height: 32px;
	-webkit-transition: none;
	-moz-transition: none;
	transition: none;
}
#at-gsm .addthis_toolbox a:hover {
	-webkit-border-top-right-radius: 5px;
	border-top-right-radius: 5px;
	-webkit-border-top-left-radius: 5px;
	border-top-left-radius: 5px;
	background: #0d99fc;
	color: #fff;
	text-decoration: none;
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
}
#at-gsm .addthis_toolbox ul li a:hover {
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	border-radius: 0;	
}
#at-gsm .addthis_toolbox a span {
	margin-right: 12px;
}

/* ---------------------------------------------------- VII. Messages ------------------------------------------------*/
/* This section is still under construction! Please send helpful additions to robert@heroweb.com */

.error {
	background-color: #C03;
	color: #fff;
}

.error h1 {
	color: #fff;
}


.message {
	background-color: #eee;
	
}

.message.manual {
	display: none;	
}

.message .button {
	color: #fff;	
}

.message .ft {
	padding-bottom: 5px;	
}

.message .inner {
	/* margin-left: 100px; */
}

.success {
  border-color: #bfe7bf;
	background-color: #d1eed1;
}

.success h1, .warning h1 {
	color: #000;
	color: rgba(0,0,0,0.6);	
}

.success .button {
  border-color: #57a957 #57a957 #3d773d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  background-color: #57a957;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
  background-image: -moz-linear-gradient(top, #62c462, #57a957);
  background-image: -ms-linear-gradient(top, #62c462, #57a957);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
  background-image: -webkit-linear-gradient(top, #62c462, #57a957);
  background-image: -o-linear-gradient(top, #62c462, #57a957);
  background-image: linear-gradient(top, #62c462, #57a957);
  background-repeat: repeat-x;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);	
}

.warning {
	background-color: rgb(253, 245, 217);	
}


/* ==================================================== stuff =======================================================*/

.toggle_container {
position: relative;
clear: both;
overflow: hidden;
margin: 0 0 5px;
padding: 0;
background-color:  rgba(0, 0, 0, 0.00) !important;
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00) !important;
-moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00) !important;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.00) !important;
}


/* ---------------------------------------------------- VIII. Typography ------------------------------------------------*/

.cartFont {	
	font-size: 0.5em;
	font-family: "cartographerRegular";
}

.category{ color: #333; text-transform:uppercase; font-weight:normal; font-style: normal;font-size:108%;}
.category a{color: #333;}

.detail{display:block;color: #777; font-size:11px;}

.freeShip, .freeship, .freeShipping {
	color: #ff9c00;	
}

.new {
		color: #0c0;	
}

.price {   
	color: #000; 
}

.quantity {
	
}

.sale {
	color: #c00;
}

.smallNotes, .smallnotes, .notes {
	color: #808080;	
}

.strike, strike {
	color: #999;	
	text-decoration: line-through;
}

.successText {
	color: #0c0;	
}

.superscript, .new, .freeShip, .freeship, .freeShipping {
	vertical-align: text-top;
	text-transform: uppercase;
	font-size: 76.9%;
}

.steps {
	margin: 0;	
}

.steps li{
	display: inline-block;
	margin: 10px;
}

.steps li.on {
	font-weight: 700;	
}

/* sizes */

.xxlarger  {font-size: 200%;}
.xlarger   {font-size: 150%;}
.larger    {font-size: 125%;}
.smaller   {font-size: 90%;}
.xsmaller  {font-size: 75%;}
.xxsmaller {font-size: 50%;}

/* ------------------------------------------- CAN'T REMEMBER RIGHT NOW WHAT THESE ARE UP TO ---------------------------------------- */

.links {
	font-size: 0;	
}

.backgroundImage {
	width: 100%;	
}

iframe #submit { background-color: #C00 !important; }

.main.primary { background-color: #bbc2b5; }