/* 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: 800px; /* 900px*/
}
/* dropline menu */

#masthead: {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
}

#top_nav {
  position: static;
  width: auto;
  height: auto;
  text-align: center;
}

#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;
  font-size: 14px;
  font-family: arial, sans-serif;
  height: 41px; /* 41px*/
  width: 800px; /* 800px*/
  position: static; /* had it as left:100px;*/
  top: 160px;
  right: inherit;
}

#dropline div {
  /* position of dropline text*/
  padding: 2;
  margin: 185px 195px auto;
  list-style: none;
  position: absolute;
  left: -9999px; /* -9999px*/
  width: 800px; /* 820px*/
  text-align: center; /* left*/
  background: url("https://www.barkclothhawaii.com/trans.gif"); /* url(trans.gif*/
}
#dropline table {
  border-collapse: collapse;
  font-size: 1em; /* 1em*/
  float: left; /* left*/
  margin: -1px; /* -1px*/
  width: auto;
} /* -1px*/

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

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

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

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

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

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

* html #dropline li a {
  margin-bottom: -4px;
  margin-right: 3px;
} /* -4px   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: -40px;
  top: 41px; /* top 41px*/
  text-align: center; /* 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: #afeeee;
  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;
  height: 25px;
  width: 75px;
}

/* distanc between pic and label pushes the label  	height: 25px;
	use to have for all motif spans:
	width: 75px;height 25px
	margin-top: 5px;
	margin-bottom: 50px;
 */

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

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

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

#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;
  height: 25px;
}

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

div ul .droptext:link {
  color: #000;
  background-color: transparent;
} /*highlight text backgrnd cream*/
div ul .droptext:visited {
  color: #8b4513;
  background-color: transparent;
}
div ul .droptext:hover {
  background: #f5f5dc;
}

div ul .aquadroptext:link {
  border-style: none;
  color: #d30601;
} /*highlight text backgrnd aqua*/
div ul .aquadroptext:visited {
  border-style: none;
  color: #8b4513;
  background-color: transparent;
}
div ul .aquadroptext:hover {
  border-style: none;
  background: #c3e1d2;
}

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

#container {
  min-width: 600px;
}

#left_col {
  width: 200px;
  float: left;
}

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

#page_content {
  margin-left: 200px;
  margin-right: 200px;
}

#footer {
  clear: both;
}