/* CSS layout */
body {
  margin: 0;
  padding: 0;
  background-image: url("../images/thtch.gif");
  background-repeat: repeat;
  font-family: Arial, Helvetica, sans-serif;
}

h1 {
  font-size: 2em;
  text-align: center;
  text-decoration: underline;
  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;
}

#right_col {
  /* styles right nav text container */
  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;
}
ul {
  z-index: 99;
} /* moves right nav up so its not cut off */

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

.sscur {
  /* change "current" text color*/
  font-weight: lighter;
  color: #003333;
}

#swatchlabel {
  margin-left: 2px;
}

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

#swatchlabel span {
  font-weight: bold;
  font-size: 1em;
  text-decoration: none;
  color: #b22222;
}

#cycle {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: bold;
  color: #b22222;

  text-decoration: none;
  display: block;
  text-align: right;
  height: 24px;
}

#cycat {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: bold;
  color: #b22222;

  text-decoration: none;
  display: block;
  text-align: right;
  height: 24px;
  padding-top: 6px;
}

#cygshp {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: bold;
  color: #b22222;

  text-decoration: none;
  display: block;
  text-align: right;
  height: 24px;
  padding-top: 6px;
}

#every {
  text-decoration: underline;
}

#switch {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: lighter;
  background-position: center;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #fff8dc;
  /* sizes height of bottom brown*/
  background-image: url("../images/nav_buttons/gallery/9D5C35top.png");
  line-height: 28px;
  width: 208px;
}

#currentcat {
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  font-weight: lighter;
  background-position: left;
  color: #fff8dc;
}
#switch a span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: bold;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #fff8dc;
  width: 208px;
  line-height: 26px;
  height: 27px;
}

#switch a:link {
  text-decoration: none;
}

#switch a:hover span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: bold;
  background-position: center;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #b22222;
  background-color: #c3e1d2;
  cursor: pointer;
}

#switcha: active {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: bold;
  background-position: center;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #fff8dc;
  width: 208px;
  cursor: pointer;
}

#switch a:hover {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: bold;
  background-position: center;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #fff8dc;
  cursor: pointer;
}

#switch a:visited {
  font-family: Arial, Helvetica, sans-serif;
  font-size: medium;
  font-weight: bold;
  background-position: center;
  text-decoration: none;
  display: block;
  text-align: center;
  color: #fff8dc;
}
#content {
  float: left;
  list-style-type: none;
  padding-top: 150px;
}

#content ul li {
  list-style-type: none;
}

#detailed {
  margin: 250px;
  padding-top: 130px;
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #000000;
}
#overall {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: #000000;
  padding-top: 630px;
  padding-bottom: 130px;
  top: 800px;
  margin: 100px; /* 170px horz alignment of table*/
  list-style-type: none;
  line-height: 380px; /* 1100px vert alignment of oa*/
}

.colormatch {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  color: #cc3300;
  text-decoration: none;
  background-color: #fff8dc;
  line-height: 30px;
}

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

.ataltcolors {
  font-size: small;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
  color: #000000;
  text-decoration: underline;
  background-color: #ffffff;
  line-height: 30px;
}

#fabinfo {
  font-family: Trebuchet MS, Verdana, Arial, Helvetica;
  font-size: medium;
  font-weight: bold;
  font-style: normal;
  text-decoration: none;
  color: #b22222;
  padding-bottom: 10px;
}

#badphoto {
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  color: #9d5c35;
  background-color: #f0eee7;
  position: absolute;
  top: 810px; /*810px vert alignment of text*/
  font-weight: lighter;
  text-align: center;
  letter-spacing: 1px;
  vertical-align: bottom;
  margin: 250px 250px; /*310px = distance of text to img 250= horz of text*/
}

#badphoto a:link {
  color: #b22222;
  text-decoration: none;
}
#badphoto a:hover {
  color: #ffcc00;
  text-decoration: none;
}
#badphoto a:visited {
  color: #9d5c35;
  text-decoration: none;
}

#table1 {
  border: medium solid #9d5c35;
  color: #cc3300;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  background-color: #f0eee7;
  line-height: 10px;
  width: 600px;
  text-decoration: none;
  position: absolute;
  top: 1160px; /* 880px vert alignment of table*/
  margin-left: 75px; /* 130px horz alignment of table*/
}

.style1 {
  width: 450px;
}
.style5 {
  width: 100px;
  float: none;
  border: 1px solid #cc3300;
  background-color: #fff8dc;
}

th {
  font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
  color: #6d929b;
  font-size: 14px;
  border-right: 1px solid #9d5c35;
  border-bottom: 1px solid #9d5c35;
  border-top: 1px solid #c1dad7;
  border-bottom: 1px solid #9d5c35;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  padding: 6px 6px 6px 9px;
  background: #cae8ea url("https://www.barkclothhawaii.com/images/bg_header.jpg") no-repeat;
}

th.nobg {
  border-top: 0;
  border-left: 0;
  border-right: 1px solid #9d5c35;
  background: none;
}
.style8 {
  width: 89px;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #9d5c35;
  text-decoration: none;
  border-right-style: solid;
  border-right-width: thin;
  border-right-color: #9d5c35;
  border-left-color: #9d5c35;
  border-left-width: thin;
  border-left-style: solid;
  text-align: center;
}
.style9 {
  width: 95px;
  border-bottom-style: solid;
  border-bottom-width: thin;
  border-bottom-color: #9d5c35;
  text-decoration: none;
  border-right-style: solid;
  border-right-width: thin;
  border-right-color: #9d5c35;
  border-left-color: #9d5c35;
  border-left-width: thin;
  border-left-style: solid;
  text-align: center;
  font-size: 12px;
  line-height: 90%;
  font-weight: bold;
}

.style13 {
  font-variant: normal;
}
.style14 {
  font-variant: normal;
  background-color: #f0eee7;
}
.style15 {
  text-transform: none;
}

#cart {
}
#table2 {
  border: medium solid #9d5c35;
  color: #cc3300;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  background-color: #f0eee7;
  line-height: 10px;
  width: 600px;
  text-decoration: none;
  position: absolute;
  top: 1500px; /* 1500px vert alignment of table2*/
  margin-left: 75px; /* 130px horz alignment of table2*/
}

.style14 {
  font-variant: normal;
  background-color: #f0eee7;
}
.style15 {
  text-transform: none;
}
.style16 {
  border-left: thin solid #9d5c35;
  border-right: thin solid #9d5c35;
  border-bottom: thin solid #9d5c35;
  width: 133px;
  text-decoration: none;
  text-align: center;
}
.style17 {
  width: 59px;
}
.style18 {
  width: 26px;
}
.style19 {
  border-left: thin solid #9d5c35;
  border-right: thin solid #9d5c35;
  border-bottom: thin solid #9d5c35;
  text-decoration: none;
  text-align: center;
}