/*

	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!

*/
html {
	color:#D0D2D3;
	background-color: #000;
}
.size1of3 {
	width: 33.3%;
}
/* --------------------------------------------------------------- -I. Fonts ----------------------------------------------------*/

#foot {
	background-color: #373737;
}



/* --------------------------------------------------------------- 0. Helpers ----------------------------------------------------*/
.page2 {
	margin: 0 auto;
	width: 90%;
	min-width: 1040px;
	max-width: 1050px;
	_text-align: left;
}
.ov {
	overflow: visible;
}

.centered {
	text-align: center;
}

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

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

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

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

.clearfix:after {
  clear: both;
}

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


.hint {

}
.hint:hover {
	cursor: help;
}

.icon{margin-right: 5px;}

#otherstates > div { width: 33%; height: 100%; float: left; padding-bottom: 10px;}

/* --------------------------------------------------------------- 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 */
.size2-5col {width: 370px;}

/* 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%; }

.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%;}

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

/* links */
a {color: #9FCB96; text-decoration: none;}
a:focus, a:hover {text-decoration: underline;}
a:visited { color:#8db784; }
body, html{font-family: 'Open Sans',Helvetica, Arial, sans-serif;
background-color: #000;
font-size: 14px;

}
body {
	/* background-image: url('../images/background2.jpg');  */
	background-image: url('../images/backgroundimg.jpg');
	background-repeat:no-repeat;
 background-position:center top;
}
.body {min-width: 980px;}
code{color:#0B8C8F;}
em{font-style: italic;}
hr {border: 2px solid #6d6e70; border-width: 0 0 2px 0; margin: 0;}
ol.simpleList li{list-style-type: decimal; margin-left:40px;}
strong{font-weight:bold;}
ul.simpleList li, .bullets li{list-style-type:disc; margin-left:40px;}
.body h5 {
	color: #FFA901;
}
/* .h1-.h6 classes should be used to maintain the semantically appropriate heading levels - NOT for use on non-headings */
h1, .h1{font-size:195%; /*font-size: 159%; */ font-weight:700; font-style: normal; /*color:#ffa901;*/ font-family: OpenSans,'Open Sans', Helvetica, Arial, sans-serif;}
h1 small { font-size:60%; }
h2, .h2{font-size:167%; font-weight:400; font-style: normal; color:#dfdfdf; font-family: OpenSans, 'Open Sans', Helvetica, Arial, sans-serif;}
h3, .h3{font-size:146.5%; font-weight:400; font-style: normal; font-family: 'Open Sans', Helvetica, Arial, sans-serif;}
h3 small, .h3 small {font-size: 75%;}

h4, .h4{font-size:123.1%; font-weight:400; font-style: normal; font-family: OpenSans 'Open Sans', Helvetica, Arial, sans-serif;}
h5, .h5{font-size:108%; font-weight:400; font-style: normal; color:#333333;}
h6, .h6{font-size:108%; font-weight:normal; font-style: italic; color:#333;}
/* 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% */
strong {font-family: OpenSans-Bold, Helvetica, Arial, sans-serif;font-weight: normal;}
.two-column, .two column > p {
	-moz-column-count:2; /* Firefox */
	-webkit-column-count:2; /* Safari and Chrome */
	column-count:2;
	column-gap:20px;
	-moz-column-gap:20px; /* Firefox */
	-webkit-column-gap:20px; /* Safari and Chrome */
	text-align: justify;
	margin-left: 0px;
}
.orange {color: #FFA901;}
.alignRight {
	text-align: right;
}
.floatLeft {
	float: left;
}

.green { color: #9fcb96; }
/* ---------------------------------------------------------- II. LAYOUT =LAYOUT -------------------------------------------------------- */

.apparelheader {
	height: 444px;
	color: #f9efe9;
}

.appareltext {
	margin-top: 40px;
	font-family: Puritan20Normal, Arial, Helvetica, sans-serif;
	font-size: 15px;
}

.appareltitle {
	font-size: 40px;
	font-family: JosefinSlabSemiBold;
	text-transform: uppercase;
	line-height: 1.3em;
}

#banner {
 /*	height: 86px; */
}

#banner h1, #banner h2, #banner h3, #banner h4, #banner h5, #banner h6,  #banner ul, #banner ol, #banner dl, #banner p, #banner blockquote, #banner .media {
	margin: 0px;
}

.blurb>p {
	margin-left: 0px;
	text-align: justify;
}

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

.hpmtpics img{
	display: inline;
}
/* I AM JUSTIFIED! MWHAHAHAHA */
.justifed, .justifed p {text-align: justify;}

.label {
	margin-right: 5px;
}

.nextprev {
	text-align: right;
	margin: 0 10px;
}
.opacityhover:hover {
	opacity: 0.6;
}
.pillowBox {
 border: 1px solid rgba(0,0,0,0.2);
 border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;
 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);
 -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);
 }

.primary {
	background-color: #fff;
}

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

.secondary {
	background-color: #373737;
	box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.26);
    -moz-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.26);
    -webkit-box-shadow: 0px 1px 8px rgba(0, 0, 0, 0.26);
	/*max-height: 1100px;*/

}
.secondary a {
	color: #9FCB96;
}
.secondary a:hover {
	color: #FFA901;
}

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

h1.sidebar{
	font-size: 16px;
}

.tertiary {
	padding: 5px;
	background-color: #eee;
	background-color: rgba(215,215,215,0.2);
	color: white;
	border-radius: 5px;

}

.quaternary {color: #63401F;
background: #FBDC6D;
background: -moz-linear-gradient(top, rgba(251, 220, 109, 1) 0%, rgba(226, 144, 70, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(251, 220, 109, 1)), color-stop(100%,rgba(226, 144, 70, 1)));
background: -webkit-linear-gradient(top, rgba(251, 220, 109, 1) 0%,rgba(226, 144, 70, 1) 100%);
background: -o-linear-gradient(top, rgba(251, 220, 109, 1) 0%,rgba(226, 144, 70, 1) 100%);
background: -ms-linear-gradient(top, rgba(251, 220, 109, 1) 0%,rgba(226, 144, 70, 1) 100%);
background: linear-gradient(top, rgba(251, 220, 109, 1) 0%,rgba(226, 144, 70, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbdc6d', endColorstr='#e29046',GradientType=0 );
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #DDB188;
/* box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.39);
-moz-box-shadow: 0px 3px 58px rgba(0, 0, 0, 0.39);
-webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.39); */

} .quinary {color:#8c8c8c;}
.senary {
	background-color: #444;
	background-color: rgba(45,45,45,0.9);
    box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.70);
    -moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.70);
    -webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.70);
}

.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:0px;}
h1, h2, h3, h4, h5, h6,img{padding-bottom:0px;}
pre{margin: 10px;}
h1, h2, h3, h4, h5, h6, p {margin:0px;}

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; }

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

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

.active > a {
color: #FFA901 !important;
}
.simpleMenu .menutab:hover {
	/*background: rgba(78,78,78,1);
	background: -moz-linear-gradient(top,  rgba(174,188,191,1) 0%, rgba(110,119,116,1) 50%, rgba(10,14,10,1) 51%, rgba(10,8,9,1) 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(174,188,191,1)), color-stop(50%,rgba(110,119,116,1)), color-stop(51%,rgba(10,14,10,1)), color-stop(100%,rgba(10,8,9,1)));
	background: -webkit-linear-gradient(top,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
	background: -o-linear-gradient(top,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
	background: -ms-linear-gradient(top,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
	background: linear-gradient(to bottom,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aebcbf', endColorstr='#0a0809',GradientType=0 ); */

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

.topMenu .menutab > a, .topMenu .menutab > a:visited{
	color: #888887;
	font-size: 14px;
	padding: 0 15px 5px 0;
}

.topMenu .menutab a:hover, .topMenu .menutab a:focus {
	color: white;
}

/* menu font */
.menu {
font-family: 'Open Sans',Helvetica, Arial, sans-serif;
}



/* pixelborder skin  */

.pixelBorder {
	/* background: rgb(235,235,235);







	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.39);
	-moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.39);
	-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.39); */
}

.pixelBorder .dropdown, .pixelBorder .dropdownRight {
 margin-top: 5px;
 background-color: #282828;
 border: 1px solid #222;
 border-top: 0;
 box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.47);
    -moz-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.47);
    -webkit-box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.47);
 }

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

.pixelBorder .menutab {
	padding: 8px 8px;
	margin-top:0;
	/*border-right: 1px solid #FFF;
	border-left: 1px solid #b5bec2; */
}

.pixelBorder .menutab:first-child {
	border-left: none;
}

.pixelBorder .menutab:hover {
/*
background: rgb(174,188,191);
background: -moz-linear-gradient(top,  rgba(174,188,191,1) 0%, rgba(110,119,116,1) 50%, rgba(10,14,10,1) 51%, rgba(48,47,48,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(174,188,191,1)), color-stop(50%,rgba(110,119,116,1)), color-stop(51%,rgba(10,14,10,1)), color-stop(100%,rgba(10,8,9,1)));background: -webkit-linear-gradient(top,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
background: -o-linear-gradient(top,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
background: -ms-linear-gradient(top,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%);
background: linear-gradient(to bottom,  rgba(174,188,191,1) 0%,rgba(110,119,116,1) 50%,rgba(10,14,10,1) 51%,rgba(10,8,9,1) 100%); W3C */

}
.menutab:hover {
	/*
	background-color: #FFA901; */
}
.menutab a:hover { /*
	color: #333 !important;*/
}
.menutab a:hover {
	color: #FFA901 !important;
}
.pixelBorder .menutab > a, .pixelBorder .menutab > a:visited{
	color: #9fcb96;
	font-size: 14px;
}
.menuitems a:hover {
	color: #FFA901 !important;
}

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

.pixelBorder .ml { border: 1px solid rgba(0,0,0,0); border-bottom: 1px dotted #535353; }
.pixelBorder .ml:hover { background-color: #393939; border: 1px solid #999;}
.pixelBorder .ml > a { padding: 8px; }
.pixelBorder .ml > a:hover { text-decoration: none;}
.pixelBorder .ml:hover > .dropout, .ml:hover > .dropoutRight { top: -1px; }
.pixelBorder .ml:last-child {
	border-bottom: none;
}
.pixelBorder .ml:last-child :hover {
	border-bottom: 1px solid #999;
}
/* me
/* menu mixins */

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

.rounded .dropdown, .rounded .dropdownRight { border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px; }
.rounded .dropout {	border-radius: 0 5px 5px 5px; -moz-border-radius: 0 5px 5px 5px; -webkit-border-radius: 0 5px 5px 5px; }
.rounded .dropoutRight { border-radius: 5px 0 5px 5px; -moz-border-radius: 5px 0 5px 5px; -webkit-border-radius: 5px 0 5px 5px; }
.rounded .ml { border-radius: 5px 0 0 5px; -moz-border-radius: 5px 0 0 5px; -webkit-border-radius: 5px 0 0 5px; }
.rounded .dropdownRight .ml { border-radius: 0 5px 5px 0; -moz-border-radius: 0 5px 5px 0; -webkit-border-radius: 0 5px 5px 0; }
/*.rounded .menutab {	border-radius: 5px 5px 0 0; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; }
}*/
.shadowed {
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);

}
.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 -----------------------------------------------------*/

/* =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;}

.cartmessage a {text-decoration: underline; color: #333}
.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;
}
.fullwidth
.form .fullwidth {
	width: 90%; /* hacks the padding on the element*/
}
.form .almostfullwidth {
	width: 80%;
}
.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;
}
.overflow {
	overflow: hidden;
}
.homepage-thirdrow {
	height: 290px;
}

#container1 {
    width: 980px;
    height: 350px;
    position: relative;
}

#navi, #infoi {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#infoi {
    z-index: 1;

}
#navi {
	z-index: 1000;
	display: none;
	background-color:rgba(0, 0, 0, 0.5);    height: 50px;
	top:300px;

}
.seeme {
	opacity: 1.0 !important;
}
.buttonimg img {
	width:48px;
}
.buttonimg:hover {
	opacity: 0.8;
}
.buttonimg:active {
	opacity: 1.0;
	-webkit-filter: contrast(200%);
	-webkit-filter: blur(2px);
}
.homepage-arrow {
	background-image:url(/images/arrowbackground.png);
	background-repeat: no-repeat;
	background-size: 100%;
	min-height: 240px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.homepage-width {
	margin-left: 16px;
	margin-right:16px;
}
.homepage-slideshow {

}

.homepage-iconbox {
	background-color: #f4f6f1;
	height: 65px;
	overflow-y: hidden;
	color: #6d6e6c;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}
.homepage-iconbox-icon {
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: #d1d3cf;
	width:44px;
}
.homepage-iconbox-centered {
	margin: 0 auto;
	width: 50%;
}
.homepage-quotes p {
	 font-weight: 400;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 2px;
	margin-bottom: 12px;
	 color: #ffa901;

}
.homepage-quotes div p {
	margin: 0px;
}
.homepage-quotes h4 {

	 margin: 0px;
}
.homepage-quotes {
	color: #ffa901;
}

.homepage-iconbox a {
	color: #6d6e6c;
}
.homepage-iconbox div p {
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
}
.homepage-h3 h3 {
	margin:0px;
}
.homepage-h3 {
	color: #90908d;
}
.homepage-h3 p {
	margin-left: 0px;
}
.homepage-boxsize {
	min-height: 200px;
}
.homepage-greenbox {
	background-color: #e9f3cf;
	color: #ffa901;
	font-family: OpenSans-Bold, Helvetica, Arial, sans-serif;
}
.homepage-box {
	color: #ffa901;
	font-family: OpenSans-Bold, Helvetica, Arial, sans-serif;
}


.homepage-articles {
	background-color: #f3f5f0;
	color: #3677b3;
	font-family: OpenSans-Bold, Helvetica, Arial, sans-serif;

}
.homepage-articles-2-0 {
	background-size:100%;
	background-repeat:no-repeat;
	background-position:center;
	width:100%;
	height:170px;
	position: relative;
}
.homepage-articles-inner {
	position: absolute; bottom: 0; left: 0;background-color: rgb(230, 230, 230);width: 323px;padding-bottom: 3px;padding-top: 3px;padding-left: 3px;
}
.hovering > a img:hover {
	opacity: 0.8;
filter: alpha(opacity=80);
}
.interactive:hover {
 background-color: rgba(255,255,255,0.5);
 cursor:pointer;
}

#mainimage {
	margin: 0 1px;
}
.minidescription>p {
	margin-top:0px;
	margin-bottom: 2px;
}
/* =minicart */

.minicart {
	height: 300px;
}
#myContainer { width:460px; height:326px; margin:auto; border:1px; border-style:solid; border-color:#696969;}
.nomarginleft p {
	margin-left: 0px;
}
#myContainer1 {

	 width:980px; height:400px; margin:auto; border:1px; border-style:solid; border-color:#696969;
}
.nomargintop p {
	margin-top: 0px;
}

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 */
.options {
	margin-top: 2px;
	margin-bottom: 5px;
}

.optionsthumbs {
	overflow:hidden;
}

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

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

.optionthumbwrapper {
	width: 100px;
	height: 80px;
	border: 1px #dddddd solid;
	overflow: hidden;
	margin: 4px;
}

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

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

.optionsthumbs img:hover {
	opacity: 1.0;
	filter: alpha(opacity = 100);
}
.padding {margin-left: 10px;}
/* =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 {

	/* must be initially hidden */
	display:none;

	/* place overlay on top of other elements */
	z-index:10;

	/* styling */
	background-image: none;
	background-color:#fff;

	width: 600px; /* 9 columns in 12-col */
	padding: 20px;
	height:400px;

	/* CSS3 styling for latest browsers */
	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);
	-webkit-box-shadow: 4px 4px 6px 0 rgba(0,0,0,0.5);

	border: 1px solid #cccccc;
}

/* close button positioned on upper right corner */
.simpleOverlay .close {
	background-image:url(/images-mm/boi/overlay-close.png);
	position:absolute;
	right:-15px;
	top:-15px;
	cursor:pointer;
	height:28px;
	width:28px;
}

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

dt:hover {
	cursor:pointer;
}
/* ==================== Product Details =================================*/

.child {
	display: inline-block;
    vertical-align: middle;
}
.productImage {
	/*width: 58px;*/
	border: 1px #dddddd solid;
	cursor: pointer;
	display:inline;
}

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

/* =quick view =quickview =quickhover */

.quickHover{
	display: none;

	text-align: center;
}

.quickHover a {
	color: #ddd;
	display: block;
	padding-top: 4px;
	padding-bottom: 4px;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0,0.8);
	*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 {
	list-style: none;
	margin-bottom: 0;
	height: 30px;
}

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

/* 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 {
	padding:0;
	margin:0 !important;
}

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

.tabs.simpleTabs li:first-child a{
	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);
	-webkit-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{
	-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);
	-webkit-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;
	box-shadow: inset 0 -2px 4px 0 rgba(0,0,0,0.1); /* softens the shadow */
	-moz-box-shadow: inset 0 -2px 4px 0 rgba(0,0,0,0.1);
	-webkit-box-shadow: inset 0 -2px 4px 0 rgba(0,0,0,0.1);
}

/* 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;
	color:#000 !important;
	box-shadow: none !important;
	-moz-box-shadow: none !important;
	-webkit-box-shadow: none !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;
	line-height:30px;
	text-align:center;
	text-decoration:none;
	border-right: 1px dotted #ccc;
}

.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 {}

.credit_card {
	background-color: rgba(0, 0, 0, 0.05);
}
ol li {margin-left: 20px;}


/* ------------------------------- Home page ----------------------------*/

.topbar {
	border-top: 2px solid #909090;
}

/* ------------------------------------------------------------------ V. Input ------------------------------------------------------- */

/* =buttons */

.action {
	background-color: #FFA901;
	color: #333;
}
.action:visited {
	color: #fff;
}


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

.appearing:hover {
	 background-color: #eee;
	 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 */
	 border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; /* remember to change all three at once! 15 makes rounded buttons, 3 is default */
	 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);
	 -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);
	 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-left: 0;
	padding-right: 0;
}

input, textarea, select {
	background-color: #AAA;
  display: inline-block;
  /*font-size: 1em;
  line-height: 1.38461538em;*/
  border: 1px solid #ccc;
  -webkit-border-radius: 3px;  -moz-border-radius: 3px;  border-radius: 3px;
  padding: 5px; /* px is better for height because it maintains standard height across different width items*/

  -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;
  -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);
}

input {margin-right: 5px;}

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 {
  cursor: pointer;
  padding: 8px;
  /*background-color: #eee;*/
  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 */
  border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px;
  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);
  -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);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3), 0 -1px 0 rgba(0,0,0,0.2); /* Dark and light emboss */
 text-align: center;
}

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

.footer {
	background-color: #373737;
}
.footer ul li a {
	font-size: 11px;
}
.footernav ul li, .footernav ul {
	margin: 0px;
}


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



/* Jquery Cycle */

.slideshow, .slideshowtextbox {
	height: 296px;
}
.slideshowtextbox {
background: #f1f7e3; /* Old browsers */
background: -moz-linear-gradient(left,  #f1f7e3 0%, #ddfba3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#f1f7e3), color-stop(100%,#ddfba3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #f1f7e3 0%,#ddfba3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #f1f7e3 0%,#ddfba3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #f1f7e3 0%,#ddfba3 100%); /* IE10+ */
background: linear-gradient(to right,  #f1f7e3 0%,#ddfba3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f7e3', endColorstr='#ddfba3',GradientType=1 ); /* IE6-9 */

}
.slideshow div img {

}

/* #slidingDiv */

#slidingDiv {
	display: none;
	height: 270px;
}

#slidingDivWholesale /*wholesale*/ {
	display: none;
	height: 310px;
}
#slidingDiv div h3 {
	margin-top: 0px;
	margin-left: 0px;
}

/* end slidingDiv */


.tooltip {
    display:none;
    background:transparent url(../images/black_arrow1.png);
    font-size:12px;
    /* height:70px;
    width:160px;
    padding:25px; */
    height: 143px;
    width: 239px;
    color:#eee;
    z-index: 1000;
}
.tooltip p {
	margin-top: 14px;
	margin-left: 16px;
	margin-right: 15px;
	position: relative;
	/* top:-9px; */
}
/* - =JQZOOM - */

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


.zoomPreload{
   -moz-opacity:0.8;
   opacity: 0.8;
   filter: alpha(opacity = 80);
   color: #333;
   font-size: 12px;
   font-family: Tahoma;
   text-decoration: none;
   border: 1px solid #CCC;
   background-color: white;
   padding: 8px;
   text-align:center;
   background-image: url(/images-mm/boi/jqzoom/zoomloader.gif);
   background-repeat: no-repeat;
   background-position: 43px 30px;
   z-index:110;
   width:90px;
   height:43px;
   position:absolute;
   top:0px;
   left:0px;
    * width:100px;
    * height:49px;
}


.zoomPup{
	overflow:hidden;
	background-color: #FFF;
	-moz-opacity:0.6;
	opacity: 0.6;
	filter: alpha(opacity = 60);
	z-index:120;
	position:absolute;
	border:1px solid #CCC;
  z-index:101;
  cursor:crosshair;

  border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;

  box-shadow: 0px 5px 10px #000;
  -webkit-box-shadow: 0px 5px 10px #000;
  -moz-box-shadow: 0px 5px 10px #000;
  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 */
}

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

}

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

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

.zoomIframe{
  z-index: -1;
  filter:alpha(opacity=0);
  -moz-opacity: 0.80;
  opacity: 0.80;
  position:absolute;
  display:block;
}




/*********************************************************
/ Modal
/*********************************************************/

.modalimage, .modal-image a img {
	width:800px;
	border: solid #666 1px;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.27);
	-moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.27);
	-web

.modalimagesmall, .modal-image-small a img {
	width:600px;
	border: solid #666 1px;
	box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.27);
	-moz-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.27);
	-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.27);
}
kit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.27);
}


.attribute select {
	max-width: 140px;
}
/*********************************************************
/ When clicking on thumbs jqzoom will add the class
/ "zoomThumbActive" on the anchor selected
/*********************************************************/

/* JQuery Tools Home Page Slideshow */

/* container for slides */
.images {
    background:#fff url(/media/img/gradient/h300.png) repeat-x;
    border:1px solid #ccc;
    position:relative;
    height:300px;

    min-width:940px;
    float:left;
    margin:15px;
    cursor:pointer;


}

/* single slide */
.images div {
    display:none;
    position:absolute;
    top:0;
    left:0;
    margin:7px;
    padding:15px 30px 15px 15px;
    height:256px;
    font-size:12px;
}

/* header */
.images h3 {
    font-size:22px;
    font-weight:normal;
    margin:0 0 20px 0;
    color:#456;
}

/* tabs (those little circles below slides) */
.slidetabs {
    clear:both;
    margin-left:310px;
}

/* single tab */
.slidetabs a {
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background:url(/media/img/scrollable/arrow/navigator.png) 0 0 no-repeat;
    display:block;
    font-size:1px;
}

/* mouseover state */
.slidetabs a:hover {
    background-position:0 -8px;
}

/* active state (current page state) */
.slidetabs a.current {
    background-position:0 -16px;
}


/* prev and next buttons
.forward, .backward {
    float:left;
    margin-top:140px;
    background:#fff url(/media/img/scrollable/arrow/hori_large.png) no-repeat;
    display:block;
    width:30px;
    height:30px;
    cursor:pointer;
    font-size:1px;
    text-indent:-9999em;
}*/

/* next */
.forward { background-position: 0 -30px; clear:right; }
.forward:hover { background-position:-30px -30px; }
.forward:active	{ background-position:-60px -30px; }


/* prev */
.backward:hover	{ background-position:-30px 0; }
.backward:active { background-position:-60px 0; }

/* disabled navigational button. is not needed when tabs are
   configured with rotate: true */
.disabled {
    visibility:hidden !important;
}




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

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

.error h1 {
	color: #fff;
}


.message {
	background-color: #1b1b1b;

}

.message.manual {
	display: none;
}

.message .button {
	color: #fff;
}

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

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

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

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

.success .button {
  background-color: #57a957;
  background-repeat: repeat-x;
  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);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  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);
}

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

.result h4 {
	color:#ffa901;
}

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

.cartFont {
	font-family: "cartographerRegular";
}
.catname{display: none;}
.category{font-size:108%; font-weight:normal; font-style: normal; text-transform:uppercase; color: #333;}
.category a{color: #333;}

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

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

.new {
		color: #0c0;
}

.price {
	font-weight: 500;
	font-size: 16px;
	color: #FFA901;
}

.quantity {

}
.greenlinks a{
	color: #
}
.sale {
	color: #c00;
}

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

strike {
	color: #999;
}

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

.steps {
	margin: 0;
}

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

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

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

.links {
	font-size: 0;
}

.backgroundImage {
	width: 100%;
}

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

/* ---------------------------------------------------------- TEMPLATE TWEAKS -------------------------------------------------------- */
#foot a {
	color: #888888;
}
#foot a:hover {
	color: #FFA901;
}
#foot h1 a, #foot h2 a, #foot h3 a, #foot h4 a, #foot h5 a {
	color: #333;
}
#foot h1, #foot h2, #foot h3, #foot h4, #foot h5 {
	margin-bottom: 0px;
}


/*================================================================================================================================*/
/*                                                          stylewysiwyg                                                          */
/*================================================================================================================================*/



strong {font-family: 'Open Sans';font-weight: 700; font-size: 0.8125em;}
.light { font-family: 'Open Sans'; font-style: normal; font-weight: 300;}
.semibold { font-family: 'Open Sans'; font-style: normal; font-weight: 600;}
.extrabold { font-family: 'Open Sans'; font-style: normal; font-weight: 800;}

.secondary p {margin-bottom:15px}
.secondary {font-size: 15px !important;}



/*================================================================================================================================*/
/*                                                            hint.js                                                             */
/*================================================================================================================================*/


.hintanchor a:link, .hintanchor a:visited, .hintanchor a:hover {
	color: #676767;
	text-decoration: none;
}
.hintanchor {
	font-size: 12px;
	color: #676767;
	background-color: #CECECE;
	display: inline;
	padding: 3px;
}
#hintbox{ /*CSS for pop up hint box */
	position:absolute;
	top: 0;
	background-color: #EEE;
	width: 150px; /*Default width of hint.*/
	padding: 3px;
	border:1px solid #676767;
	line-height:1.2em;
	z-index:100;
	border-right: 2px solid #676767;
	border-bottom: 2px solid #676767;
	visibility: hidden;
	text-decoration: none;
	color: #333;
}

.hint {

}
.hint:hover {
	cursor: help;
}

.credit_card table tbody tr td {
	padding-top: 5px;
	padding-bottom: 5px;
}
.buttoner a {
	color: #333;
}
.accounts a:hover {
	/* color: #333 !important; */
	text-decoration: none;
}

.label { font-weight: bold; }

.options .label { display: none; }
.options select { min-width: 350px; font-size: 14px !important; }
.options select option {  }


.jaredPad {
	padding-bottom: 25px;
}

.detailImage {
	max-width:470px;
}
/*Whereas the detailImage class above controls the size of the image in the "View Detail" modal, the enlargeImage class controls the size of the image in the enlargemainModal, which pops up when you click the main image on Art Maps pages  */
.enlargeImage {
	max-width:1000px;
	padding-bottom:20px;
}

#enlargemainModal.modal-special {
	width:1050px;
	margin:-260px 0px 0px 0px;
	left:auto;
}

.printcell {
	float:left;
	text-align:center;
	height:200px;
}

.artmaps>.addtocartwrapper {
	width:450px;
}

/*============CSS for Map Promo============*/
.inkwell {
	filter: grayscale(1) brightness(0.1) contrast(1);
    -webkit-filter: grayscale(1) brightness(0.1) contrast(1);
    filter: grayscale(1) brightness(0.1) contrast(1);
	opacity: 0.4;
}

/*
#mappromo {
	display: block;
    position:absolute;
	top: 50px;
    width:1000px;
	max-width: 100%;
	margin: 0 auto;
    border:1px solid black;
    padding:20px;
    background-color: black;
	z-index: 10;
}
*/
.hidden {
	display: none;
}
/*
.seethru {
	opacity: 0.3;
}
.invisible {
	opacity: 0.01;
}
.modal-footer {
	    background-color: #5C5E5D!important;
		border-top: 0!important;
		box-shadow: 0px 0px 0px 0px!important;
		-webkit-box-shadow: 0px 0px 0px 0px!important;
}*/
.modalpromo {
	position: fixed;
	/*top: 30%;*/
	left: 40%;
	z-index: 1050;
	margin: -18rem 0 0 -20rem;
	background-color: #5C5E5D!important;
	border: 1px solid #999;
	border: 1px solid rgba(0, 0, 0, 0.3);
	-webkit-border-radius: 6px;
	   -moz-border-radius: 6px;
			border-radius: 6px;
	outline: none;
	-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	   -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
			box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
	-webkit-background-clip: padding-box;
	   -moz-background-clip: padding-box;
			background-clip: padding-box;
	padding: 0 15px;
}
.modal-header2 {
	padding: 9px 0;
	height: 30px;
}