/* CSS layout */

img{
	border: 0px;
	text-decoration: none;
}
body {
	margin: 0;
	padding: 0;
	background-image: url('../images/thtch.gif');/* whole page */
	
}

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

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


#top_nav {
	border: thin solid blue;
	margin: 0;
	padding: 0;

}

/* dropline menu */
#dropline {
	/* style the men here*/ 
	background: url(https://www.barkclothhawaii.com/images/nav_buttons/trans.gif);
	text-align: left; /* moves menu buttons left (actually stays more centered*/;
	margin: 0 0 0 30px; /* was 0 auto*/
	font-size: 14px;
	font-family: arial, sans-serif;
	height: 41px;
	width: 800px;
	position: absolute; /* had it as left:100px;*/;
	left: 100px;
	top: 190px; /* how far the horz menu sits below buttons */
}
#dropline div {
	/* position of dropline text*/
 	padding: 0;
	margin: auto 0 auto;
	list-style: none;
	position: absolute;
	left: 980px;
	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: -40 55px;/* -10 55 px to line up dropline text*/
	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: -35px;/* horz movement of dropline text -80 clears nav box */
	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; 
}

















































































#container {
	min-width: 600px;
		border: thin solid aqua;
	margin: 0;
	padding: 0;

}

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

#altcolors {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	text-decoration: none;
	color: #000000;
	margin: -50px;
	list-style-type: none;
	float:none;
	margin-top: 220px;
	
}


#right_col {
	float: right;
	width: 208px;
	height: 20px;/* 20px height of white right menu box */;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #F0EEE7;
	border: medium solid #9D5C35;
	text-decoration: none;
	text-align: center;
	border-right-width: medium;
	border-bottom-width: medium;
	border-left-width: medium;
	border-style: none solid solid solid;
	border-color: #9D5C35 #9D5C35 #9D5C35 #9D5C35;
	background-image: url('../images/nav_buttons/gallery/9D5C35top.png');
	background-repeat: no-repeat;
	font-style: normal;
	font-weight: lighter;
	position: fixed;
	margin-top: 90px;/* 150px height box rises */;
	margin-bottom: 350px;/* 350px height box rises */;
	right: 3%; /* moves box right of dropline */
	padding-bottom: 225px;
	
}

#fabricsorter  {
	padding: 14px; /* moves the selection sorter text */
	font-family: Thickhead;
	font-size: 18px;
	font-style: normal;
	font-variant: normal;
	color: #FFF8DC;
	vertical-align: top;
	background-repeat: repeat-x;
	text-align: center;
	text-decoration: none;
	font-weight: bold;

}

ul { z-index: 99}/* moves right nav up so its not cut off */

}


#colorswatch {
	border-style: none;
	display: block;
	
}
















#page_content {	
border: thin solid #000000;


	margin-left: 200px;
	margin-right: 200px;
}

#footer {
border: thin solid #000000;
	clear: both;
}