/* This style sheet controls the horiz menu*/

/* CSS layout */
/*The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/dropline_three.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any 
way to fit your requirements.
 */
body {
  margin: 0;
  padding: 0;
  background-image: url("../images/thtch.gif");
  background-repeat: repeat;
  font-family: Arial, Helvetica, sans-serif;
}
#wrapper {
  /* width was 770px*/

  text-align: center;
  margin-right: auto;
  margin-left: auto;
  width: 900px;
}
/* dropline menu */
#dropline {
  /* list id - style the whole thing here*/
  padding: 0;
  list-style: none;
  background: url(https://www.barkclothhawaii.com/images/nav_buttons/trans.gif);
  text-align: center;
  margin: 0 auto;
  font-size: 14px;
  font-family: arial, sans-serif;
  height: 41px;
  width: 800px;
  position: absolute; /* had it as left:100px;*/
  left: 100px;
  top: 170px; /* how far the dropline sits below buttons */
}
#dropline div {
  /* position of dropline text*/
  padding: -20;
  margin: auto 0 auto;
  list-style: none;
  position: absolute;
  left: -9999px;
  width: 820px;
  text-align: left;
  background: url("https://www.barkclothhawaii.com/trans.gif");
}
#dropline table {
  border-collapse: collapse;
  font-size: 1em;
  float: left;
  margin: -1px;
}

#dropline ul li {
  /* vertical space between dropline */
  display: inline;
  margin: 0px 0 0 0;
  text-align: left;
} /* dropline position */

/* all horiz linked menu text */
#dropline ul li a {
  display: inline-block;
  height: 25px;
  line-height: 25px;
  margin: 1px;
  padding: 0 5px;
  background: transparent;
  font-weight: bold;
  font-size: 14px;
}

#dropline li {
  display: inline;
  margin: 0 -2px; /* space between buttons,replace color:= 8B0000 */
  text-align: right;
} /* color and position of text on a buttons and dropline */

#dropline li a {
  display: inline-block;
  height: 36px;
  margin: 5px -6px /* horz space between buttons */ 0 0;
  padding: 0 16px 0 0;
  background: url(../images/nav_buttons/topnoarrow.gif) right top;
  line-height: 30px;
  text-decoration: none;
  color: #8b0000;
  cursor: pointer;
}
/* horz width of buttons */

#dropline li a.sub {
  background: url(../images/nav_buttons/toparrow.gif) right top;
}
html>    /* left right button position */

body #dropline li {
  margin: 0px;
  display: inline-block;
  padding: 0;
}

* html #dropline li a {
  margin-bottom: -4px;
  margin-right: 3px;
}

#dropline li a b {
  display: block;
  height: 36px;
  float: left;
  padding: 0 0 0 25px;
  background: url(../images/nav_buttons/topnoarrow.gif) left top;
}

#dropline li a:hover {
  /* hover button text */
  /* replace color:= fff */
  background-position: right bottom;
}
#dropline li a:hover b {
  /* color:= hover button text */ /* replace color:= DC143C */
  background-position: right bottom;
}
/* replace color:= fff, position of hover text */
#dropline li:hover > a {
  background-position: right bottom;
}

#dropline li:hover > a b {
  background-position: left bottom;
} /* moves arrow spacing */

#dropline :hover div {
  left: 10px;
  top: 41px;
  text-align: center;
}

/* background color: of all hovered dropline text */
#dropline :hover ul li a:hover {
  text-decoration: none;
}
/* Style colors here */
div ul #aqua a:hover {
  background-color: #c3e1d2;
  color: black;
}

div ul #black a:hover {
  background-color: #000;
  color: #fff8dc;
}

div ul #blue a:hover {
  background-color: #add8e6;
  color: black;
}

div ul #brown a:hover {
  background-color: #d2b48c;
  color: #fff8dc;
}

div ul #gray a:hover {
  background-color: #c0c0c0;
  color: black;
}

div ul #green a:hover {
  background-color: #8fbc8f;
  color: #fff8dc;
}

div ul #natural a:hover {
  /* styles dropdowns */
  background-color: #f5f5dc;
  color: black;
}

div ul #orange a:hover {
  background-color: #ffa07a;
  color: black;
}

div ul #pink a:hover {
  background-color: #ffe4e1;
  color: black;
}

div ul #purple a:hover {
  background-color: #dda0dd;
  color: black;
}

div ul #red a:hover {
  background-color: #b22222;
  color: #fff8dc;
}

div ul #yellow a:hover {
  background-color: #f0e68c;
  color: black;
}

div ul #abstracts a:hover {
  background: transparent url("../images/nav_buttons/atomic.png");
  background-repeat: no-repeat;
  background-position: center;
}
#abstracts a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px; /* distanc between pic and label pushes the label  	height: 25px;
	use to have for all motif spans:
	width: 75px;
	margin-top: 5px;
	margin-bottom: 50px;
 */
  display: block;
}

div ul #anthurium a:hover {
  background: transparent url("../images/nav_buttons/anthurium.png");
  background-repeat: no-repeat;
  background-position: center;
}
#anthurium a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #bamboo a:hover {
  background: transparent url("../images/nav_buttons/bamboo.png");
  background-repeat: no-repeat;
  background-position: center;
}
#bamboo a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #bop a:hover {
  background: transparent url("../images/nav_buttons/bop2.png");
  background-repeat: no-repeat;
  background-position: center;
}

#bop a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #critters a:hover {
  background: transparent url("../images/nav_buttons/koi.png");
  background-repeat: no-repeat;
  background-position: center;
}
#critters a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #folks a:hover {
  background: transparent url("../images/nav_buttons/hulagrl.png");
  background-repeat: no-repeat;
  background-position: center;
}
#folks a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #ginger a:hover {
  background: transparent url("../images/nav_buttons/ginger2.png");
  background-repeat: no-repeat;
  background-position: center;
}

#ginger a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #heliconia a:hover {
  background: transparent url("../images/nav_buttons/heliconia.png");
  background-repeat: no-repeat;
  background-position: center;
}
#heliconia a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #hibiscus a:hover {
  background: transparent url("../images/nav_buttons/hibiscus.png");
  background-repeat: no-repeat;
  background-position: center;
}
#hibiscus a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #keiki a:hover {
  background: transparent url("../images/nav_buttons/keiki.png");
  background-repeat: no-repeat;
  background-position: center;
}
#keiki a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #leafy a:hover {
  background: transparent url("../images/nav_buttons/leafy.png");
  background-repeat: no-repeat;
  background-position: center;
}
#leafy a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #orchids a:hover {
  background: transparent url("../images/nav_buttons/orchid.png");
  background-repeat: no-repeat;
  background-position: center;
}
#orchids a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #palms a:hover {
  background: transparent url("../images/nav_buttons/palm.png");
  background-repeat: no-repeat;
  background-position: center;
}
#palms a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #plumeria a:hover {
  background: transparent url("../images/nav_buttons/plumeria.png");
  background-repeat: no-repeat;
  background-position: center;
}
#plumeria a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #other a:hover {
  background: transparent url("../images/nav_buttons/protea.png");
  background-repeat: no-repeat;
  background-position: center;
}
#other a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #solids a:hover {
  background: transparent url("../images/nav_buttons/solids.png");
  background-repeat: no-repeat;
  background-position: center;
}
#solids a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #surfboards a:hover {
  background: transparent url("../images/nav_buttons/surf.png");
  background-repeat: no-repeat;
  background-position: center;
}
#surfboards a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #woodies a:hover {
  background: transparent url("../images/nav_buttons/woody.png");
  background-repeat: no-repeat;
  background-position: center;
}
#woodies a span {
  cursor: pointer;
  margin: 10px 0px 0px 0px;
  display: block;
}

div ul #nubby:link {
  color: #000;
}
div ul #nubby:visited {
  color: #8b4513;
}
div ul #nubby:hover {
  background: #f5f5dc;
}

div ul #crepe:link {
  color: #000;
}
div ul #crepe:visited {
  color: #8b4513;
}
div ul #crepe:hover {
  background: #f5f5dc;
}

div ul #canvas57:link {
  color: #000;
}
div ul #canvas57:visited {
  color: #8b4513;
}
div ul #canvas57:hover {
  background: #f5f5dc;
}

div ul #inout:link {
  color: #000;
}
div ul #inout:visited {
  color: #8b4513;
}
div ul #inout:hover {
  background: #f5f5dc;
}

div ul #twill:link {
  color: #000;
}
div ul #twill:visited {
  color: #8b4513;
}
div ul #twill:hover {
  background: #f5f5dc;
}

div ul #weaved:link {
  color: #000;
}
div ul #weaved:visited {
  color: #8b4513;
}
div ul #weaved:hover {
  background: #f5f5dc;
}

div ul #nonup44:link {
  color: #000;
}
div ul #nonup44:visited {
  color: #8b4513;
}
div ul #nonup44:hover {
  background: #f5f5dc;
}

div ul #nonup57:link {
  color: #000;
}
div ul #nonup57:visited {
  color: #8b4513;
}
div ul #nonup57:hover {
  background: #f5f5dc;
}

div ul #apparel:link {
  color: #000;
}
div ul #apparel:visited {
  color: #8b4513;
}
div ul #apparel:hover {
  background: #f5f5dc;
}

div ul #rayon:link {
  color: #000;
}
div ul #rayon:visited {
  color: #8b4513;
}
div ul #rayon:hover {
  background: #f5f5dc;
}

div ul #fleece:link {
  color: #000;
}
div ul #fleece:visited {
  color: #8b4513;
}
div ul #fleece:hover {
  background: #f5f5dc;
}

div ul #canvas44:link {
  color: #000;
}
div ul #canvas44:visited {
  color: #8b4513;
}
div ul #canvas44:hover {
  background: #f5f5dc;
}

div ul #email:link {
  color: #d30601;
}
div ul #email:visited {
  color: #8b4513;
}
div ul #email:hover {
  background: #d6f1e8;
}

div ul #address:link {
  color: #000;
}
div ul #adress:visited {
  color: #8b4513;
}
div ul #adress:hover {
  background: #f5f5dc;
}

div ul #refer:link {
  color: #000;
}
div ul #refer:visited {
  color: #8b4513;
}
div ul #refer:hover {
  background: #d6f1e8;
}

div ul #certs:link {
  color: #000;
}
div ul #certs:visited {
  color: #8b4513;
}
div ul #certs:hover {
  background: #f5f5dc;
}

div ul #ibds:link {
  color: #000;
}
div ul #ibds:visited {
  color: #8b4513;
}
div ul #ibds:hover {
  background: #f5f5dc;
}

div ul #pillows:link {
  color: #000;
}
div ul #pillows:visited {
  color: #8b4513;
}
div ul #pillows:hover {
  background: #f5f5dc;
}

div ul #hair:link {
  color: #000;
}
div ul #hair:visited {
  color: #8b4513;
}
div ul #hair:hover {
  background: #f5f5dc;
}

div ul #table:link {
  color: #000;
}
div ul #table:visited {
  color: #8b4513;
}
div ul #table:hover {
  background: #f5f5dc;
}

div ul #tags:link {
  color: #000;
}
div ul #tags:visited {
  color: #8b4513;
}
div ul #tags:hover {
  background: #f5f5dc;
}

div ul #seeds:link {
  color: #000;
}
div ul #seeds:visited {
  color: #8b4513;
}
div ul #seeds:hover {
  background: #f5f5dc;
}

div ul #bags:link {
  color: #000;
}
div ul #bags:visited {
  color: #8b4513;
}
div ul #bags:hover {
  background: #f5f5dc;
}

div ul #patterns:link {
  color: #000;
}
div ul #paterns:visited {
  color: #8b4513;
}
div ul #patterns:hover {
  background: #f5f5dc;
}

div ul #bedding:link {
  color: #000;
}
div ul #bedding:visited {
  color: #8b4513;
}
div ul #bedding:hover {
  background: #f5f5dc;
}

div ul #curtains:link {
  color: #000;
}
div ul #curtains:visited {
  color: #8b4513;
}
div ul #curtains:hover {
  background: #f5f5dc;
}

div ul #holiday:link {
  color: #000;
}
div ul #holiday:visited {
  color: #8b4513;
}
div ul #holiday:hover {
  background: #f5f5dc;
}

div ul #scraps:link {
  color: #000;
}
div ul #scraps:visited {
  color: #8b4513;
}
div ul #scraps:hover {
  background: #f5f5dc;
}

#last a:link {
  color: #000606;
}
#last a:active {
  color: #cc0000;
}
#last a:hover {
  color: #008b8b;
}
#last a:visited {
  color: #008080;
}

#message {
  cursor: pointer;
}

#masthead {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
.noborder {
  /* eliminates border around logo */
  border-width: 0;
}

#phone {
  /* styles phone numbers under logo */
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  word-spacing: 100px;
  color: #000000;
  text-decoration: none;
}

.lauhala_brown {
  background-color: #cead8e;
}

h1 {
  font-size: 2em;
  text-align: center;
  text-decoration: none;
  color: #fff8dc;
  padding-top: 0px;
  margin-top: 0px;
}

h2 {
  font-size: small;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  text-align: center;
}

#gallery .colorswatch {
  text-align: left;
  font-size: small;
  text-decoration: none;
  font-weight: normal;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  margin-top: -6px;
}

#gallery ul li {
  /*  gallery images lineup horz*/
  float: left;
  list-style-type: none; /*list style get rid of the dots in the at pics.*/
}

#gallery a.at {
  /*at text*/
  /* space between gallery images*/
  border-style: none;
  border-width: 0;
  padding: 0px 18px 30px 0px;
  margin: 0px;
  width: 72px;
  height: 108px;
  text-decoration: none;
  float: left;
  list-style-type: none;
  text-align: center;
  list-style-image: none;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  color: #000000;
}

#gallery a:hover span {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #c3e1d2;
}

#gallery a img {
  border: 0; /* get rid of border on at pics */
  list-style-type: none;
}

#gallery a .large {
  /* vertical placement of gallery text */
  display: block;
  position: inherit;
  width: 0;
  height: 0px;
  list-style-type: none;
}
#gallery a.at:hover .large {
  /* controls the t hover img */

  display: block;
  position: absolute;
  top: 300px;
  left: 430px;
  width: 144px;
  height: 230px;
  z-index: 100;
}

#gallery li.dmtb1 {
  /* controls the limited supply img under T hover img */

  display: block;
  position: absolute;
  top: 378px;
  left: 432px;
  width: 144px;
  height: 130px;
}

#gallery {
  /* gallery white background box */
  border-style: none solid solid solid;
  border-color: #9d5c35 #9d5c35 #9d5c35 #9d5c35;
  background-position: center -4px;
  position: relative;
  width: 610px;
  height: 550px; /* length of gallery white background box */
  top: 150px; /* how far down the page that the gallery box goes */
  left: 20px;
  background-color: #f0eee7;
  z-index: 100;
  list-style-type: none;
  list-style-image: none;
  float: left;
  background-image: url("../images/nav_buttons/gallery/9D5C35top.png");
  background-repeat: no-repeat;
  border-right-width: medium;
  border-bottom-width: medium;
  border-left-width: medium;
  margin-left: auto;
  margin-right: auto;
}

.clear {
  clear: both;
}

#right_col {
  width: 200px;
  float: right;
}

#footer {
  clear: both;
}