/* General */

html { margin: 0px; }

body {
 background: #fff;
 text-align: center;
 font: small Helvetica, Arial, sans-serif;
 margin: 0px;
 padding: 0px;
}

body a {
	color:#000000;
}

/* Wrapper including Footer */

#wrapper {
 margin: 0px auto;  /* to fix centering in Mozilla */
 background: url('images/wrapmid.gif') repeat-y;
 text-align: left;
 width: 774px;    /* width should be the same as the background image */
 padding: 0px 7px 0px 7px;
 /* box model hack */
 voice-family: "\"}\"";
 voice-family:inherit;
 width: 760px;
}
 
html>body #wrapper { width: 760px; }

#footer {
 margin: 0px auto;  /* to fix centering in Mozilla */
 background: url('images/wrapmid.gif') repeat-y;
 width: 774px;    /* width should be the same as the background image */
 color: #333;
 padding: 20px 0px 0px 0px;
 font-family: helvetica, sans-serif;
 font-size: 85%;
 letter-spacing: 2px;
 text-transform: uppercase;
}

#footer h3 { 
width : 214px;
height : 0;
margin : 0;
padding : 0;
background : url('images/') no-repeat;
text-indent : -9999px; 
}

#footer ul {
 list-style: none;  /* removes list marker */
 padding: 0px;    /* removes left indent */
 margin: 0px;
}

#footer ul li {
 display: inline;  /* sets list items to display in a row */
 margin-right: .5em;
 padding-right: 1em;  /* puts space in between list items */
}

#footer a:link, #footer a:visited {
 color: #333;
 text-decoration: none;
}

#footer a:active, #footer a:hover {
 color: #999;
 text-decoration: underline;
}

#bottom {
margin: 0px auto;  /* to fix centering in Mozilla */ 
width : 774px;
height : 7px;
background : url('images/wrapbot.gif') no-repeat;
}

/* Header */

#header {
 height: 130px;
 background: url('images/headbg13.jpg') #fff;
}

#header h1 { 
margin : 0;
padding : 0;
text-indent : -9999px; 
}

/* Horizontal Menu Bar */

#menu {
 background: #333;
 border-top: solid 1px #333;
 border-bottom: solid 1px #333;
 margin: 0;
 padding: .5em 0px .5em 10px;
 color: #ffe;
 font-family: helvetica, sans-serif;
 font-size: 80%;
 letter-spacing: 2px;
 text-transform: uppercase;
}

#menu ul {
 list-style: none;  /* removes list marker */
 padding: 0px;    /* removes left indent */
 margin: 0px;
}

#menu ul li {
 display: inline;  /* sets list items to display in a row */
 margin-right: 0;
 padding-right: .75em;  /* puts space in between list items */
}

li#menucart  {
 float:right;
 position:relative;
 font-size:110%;
 letter-spacing: normal;
 text-transform: none;
}

#menu a:link, #menu a:visited {
 color: #ffe;
 text-decoration: none;
}

#menu a:active, #menu a:hover {
 background: #333;
 color: #fff;
 text-decoration: none;
}

/* Main Column Widths */

#sidecontent {
 width: 214px;
 float: left;
}

#maincontent {
 width: 546px;
 float: left; }

.clear { clear: both; }

/* Vertical Navigation both Products and Information */

#navvera {
	margin: 15px 0px 0px 0px;
    width: 214px; /* width of jpeg = 200px + 7px margin on each side for outline and drop shadow */
	background : url('images/navpromid.gif') repeat-y;
	font-family: helvetica, sans-serif;
	font-size: 90%;
}

#navvera h3 { 
width : 214px;
height : 42px;
margin : 0;
padding : 0;
background : url('images/navprotop.gif') no-repeat;
text-indent : -9999px; 
}

#navvera ul {
    list-style-type:none;
    margin:0px;
    padding:0px;
    text-indent:0px; /* zero out default ul styles */
}

#navvera li {
    height: 100%;
	line-height: 1.5em;
    width: 180px;  /* div width - padding-left */
	margin: 0 7px 0 7px;
}

#navvera li ul li {
    width: 180px; /* div width - ( padding-left + indent distance for nested items ) */
}

/*IE needs extra margin and padding set for the indented li */
html #navvera li ul li {
    margin-left: -10px;
    padding-left: 10px;
}
/* end IE hack */

#navvera li a,
#navvera li ul li a {
    font-weight: normal;
    text-decoration: none;
    display: block;
    height: 100%;
    width: 100%;
}

#navvera li.category1 a {
    padding-left: 20px; /* indent distance for 1st level links */
	color: #333;
	font-weight: bold;
	background : url('images/navprobua.png') no-repeat 5px 50%; 
} 

#navvera li.category2 a {
    padding-left: 20px; /* indent distance for 1st level links */
	color: #333;
	font-weight: bold;
	background : url('images/navprobub.png') no-repeat 5px 50%; 
} 

#navvera li.category3 a {
	padding-left: 20px;
	text-indent: 10px;
	color: #333;
	font-weight: normal;
	background : none;
}

#navvera li a:link,
#navvera li a:visited {
    color: #333;
    background-color:#c5bfa5;
}

#navvera li a:hover,
#navvera li a:active {
    color: #ffe;
    background-color: #333;
}

#navvera li.category1 a:hover, 
#navvera li.category1 a:active {
	background : url('images/navprobuah.png') no-repeat 5px 50%;
	background-color: #333;
}

#navvera li.category2 a:hover, 
#navvera li.category2 a:active {
	background : url('images/navprobubh.png') no-repeat 5px 50%;
	background-color: #333;
}

#navvera li.category3 a:hover, 
#navvera li.category3 a:active { 
	color: #ffe;
    background-color: #333;
	background-image: none;
}

#navverb {
	width: 214px;
	height: 25px;
	margin: 0;
	padding: 0;
	background : url('images/navprobot.gif') no-repeat;
}

#navnfo {
margin: 15px 0 0 0;
width: 214px;
background: url('images/navnfoblumid.gif') repeat-y; }

#navnfo h3 {
width: 214px;
height: 42px;
margin : 0;
padding : 0;
background : url('images/navnfoblutop.gif') no-repeat;
text-indent : -9999px; }

#navnfo ul {
margin: 0 7px 0 8px;
padding: 0;
list-style: none;
width: 200px;
}

#navnfo ul a { 
display: block;
width: 200px; 
height: 34px; 
text-indent: -9999px; 
text-decoration: none; 
overflow: hidden; }

li#nfo1 { 
top: 0px; 
left: 0px; 
width: 200px; 
height: 34px; 
background: url('images/navnfoblu.gif') no-repeat 0 0; }

li#nfo2 {
top: 34px; 
left: 0px; 
width: 200px; 
height: 34px; 
background: url('images/navnfoblu.gif') no-repeat 0 -34px; }

li#nfo3 {
top: 68px; 
left: 0px; 
width: 200px; 
height: 34px; 
background: url('images/navnfoblu.gif') no-repeat 0 -68px; }

li#nfo4 {
top: 102px; 
left: 0px; 
width: 200px; 
height: 34px; 
background: url('images/navnfoblu.gif') no-repeat 0 -102px; }

li#nfo5 {
top: 136px; 
left: 0px; 
width: 200px; 
height: 34px; 
background: url('images/navnfoblu.gif') no-repeat 0 -136px; }

li#nfo6 {
top: 170px; 
left: 0px; 
width: 200px; 
height: 34px; 
background: url('images/navnfoblu.gif') no-repeat 0 -170px; }

li#nfo1 a:hover { background: url('images/navnfoblu.gif') no-repeat -200px 0px; }
li#nfo2 a:hover { background: url('images/navnfoblu.gif') no-repeat -200px -34px; }
li#nfo3 a:hover { background: url('images/navnfoblu.gif') no-repeat -200px -68px; }
li#nfo4 a:hover { background: url('images/navnfoblu.gif') no-repeat -200px -102px; }
li#nfo5 a:hover { background: url('images/navnfoblu.gif') no-repeat -200px -136px; }
li#nfo6 a:hover { background: url('images/navnfoblu.gif') no-repeat -200px -170px; }

#navnfobot {
width: 214px;
height: 25px;
margin: 0;
padding: 0;
background: url('images/navnfoblubot.gif') no-repeat; }

/* Main Content */

#maincontent {
width: 546px; 
float: left;
}

/* Featured Items */

#featured {
margin: 15px 0px 0px 0px;
width: 546px; /* 760px - 214px for sidemenu */
background : url('images/') no-repeat;
}

#featured h2 { 
width : 546px;
height : 23px;
margin : 0;
padding : 0;
background : url('images/') no-repeat;
text-indent : -9999px; 
}

#featured dl {
list-style: none;
margin: 0px 3px 0px 3px;
padding: 0px 0px 0px 0px;
width: 540px; /* 546px- 16px for margins */
background: #fff;
}

dt#mc1 { background : url("images/tradjap2c.jpg") top center no-repeat; }
dt#mc2 { background : url("images/tiffany.jpg") top center no-repeat; }
dt#mc3 { background : url("images/permalac4.jpg") top center no-repeat; }

#featured dl a { 
display: block;
width: 540px;
padding: 0;
text-decoration: none; 
overflow: hidden;
color: #333;
}

#featured dt a {
padding: 177px 0px 0px 0px;
}

#featured dt {
font-family: lucida sans, helvetica, sans-serif;
font-size: x-large;
font-weight: bold;
text-align: center;
margin: 0;
padding: 0;
}

#featured dd {
font-family: lucida sans, helvetica, sans-serif;
font-size: 100%;
text-align: center;
margin: 0;
padding: 0px 0px 35px 0px;
}

/* Instructions */

#instructions { 
  width: 546px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
  background: #fff;
  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
  text-align: center; /* this overrides the text-align: center on the body element. */
  height: 790px; 
  background : url("images/buddha.jpg") no-repeat bottom center;
}

#instructions_head {
  margin: 0px;
  padding: 15px 10px 0px 20px;
	
}

#instructions_head h3 {
  font-size: x-large;
  font-weight: bold;
  border-bottom: 3px double #868686;
  margin: 0px;
  padding: 0px;
}

#instructions p {
  font-size: .9em;
  margin: 25px 10px 0px 20px;
}

#instructions ul {
  margin: 15px 10px 0px 20px;
  padding: 0;
  list-style: none;
  background-color: #ffffff;
}

#instructions ul a {
  font-weight: bold;
  color: #333;
}

#instructions li {
  padding: .5em 0 0 0;
}

/* Color Charts */

#colorcharts {
  background: #fff;
  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
  text-align: center; /* this overrides the text-align: center on the body element. */
  width: 546px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
  height: 790px; 
  background : url("images/beggar.jpg") no-repeat bottom center;
}

#colorcharts_head {
  margin: 0px;
  padding: 15px 10px 0px 20px;
}

#colorcharts h3 {
  font-size: x-large;
  font-weight: bold;
  border-bottom: 3px double #868686;
  margin: 0px;
  padding: 0px;
}

#colorcharts p {
  font-size: .9em;
  margin: 25px 10px 0px 20px;
}

#colorcharts ul {
  margin: 15px 10px 0px 20px;
  padding: 0;
  list-style: none;
  background-color: #ffffff;
}

#colorcharts ul a {
  font-weight: bold;
  color: #333;
}

#colorcharts li {
  padding: .5em 0 0 0;
}

/* MSDS */

#msds {
  background: #fff;
  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
  text-align: center; /* this overrides the text-align: center on the body element. */
  width: 546px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
}

#msds_head {
  margin: 0px;
  padding: 15px 10px 0px 20px;
}

#msds h3 {
  font-size: x-large;
  font-weight: bold;
  border-bottom: 3px double #868686;
  margin: 0px;
  padding: 0px;
}

#msds p {
font-size: .9em;
margin: 25px 10px 0 20px;
}

#msds ul {
margin: 15px 10px 0 20px;
padding: 0;
list-style: none;
background-color: #ffffff;
}

#msds ul a {
font-weight: bold;
color: #333;
}

#msds li {
padding: .5em 0 0 0;
}

/* Demos */

#demos {
  background: #fff;
  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
  text-align: center; /* this overrides the text-align: center on the body element. */
  width: 546px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
}

#demos_head {
  margin: 0px;
  padding: 15px 10px 0px 20px;
}

#demos h3 {
  font-size: x-large;
  font-weight: bold;
  border-bottom: 3px double #868686;
  margin: 0px;
  padding: 0px;
}

#demos h4 {
margin: 25px 10px 0 20px;
}

#demos p {
font-size: .9em;
margin: 15px 10px 0 20px;
}

#demos p a {
font-weight: bold;
}

#demos ul {
margin: 15px 10px 0 20px;
padding: 0;
list-style: none;
background-color: #ffffff;
}

#demos li {
padding: 0;
}

/* Distributors */

#distributors {
  background: #fff;
  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
  text-align: center; /* this overrides the text-align: center on the body element. */
  width: 546px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
}

#distributors_head {
  margin: 0px;
  padding: 15px 10px 0px 20px;
}

#distributors h3 {
  font-size: x-large;
  font-weight: bold;
  border-bottom: 3px double #868686;
  margin: 0px;
  padding: 0px;
}

#distributors p {
font-size: .9em;
margin: 25px 10px 0 20px;
}

#distributors p a {
font-weight: bold;
}

#distributors ul {
margin: 15px 10px 0 20px;
padding: 0;
list-style: none;
background-color: #ffffff;
}

#distributors p a {
font-weight: bold;
}

#distributors li {
padding: .5em 0 0 0;
}

/* Resources */

#resources {
  background: #fff;
  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
  text-align: center; /* this overrides the text-align: center on the body element. */
  width: 546px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
}

#resources_head {
  margin: 0px;
  padding: 15px 10px 0px 20px;
}

#resources h3 {
  font-size: x-large;
  font-weight: bold;
  border-bottom: 3px double #868686;
  margin: 0px;
  padding: 0px;
}

#resources h4 {
margin: 25px 10px 0 20px;
}

#resources p {
font-size: .9em;
margin: 25px 10px 0 20px;
}

#resources p a {
font-weight: bold;
}

#resources ul {
margin: 15px 10px 0 20px;
padding: 0;
list-style: none;
background-color: #ffffff;
}

#resources p a {
font-weight: bold;
}

#resources li {
padding: .5em 0 0 0;
}

/* About Us */

#aboutus { 
  width: 546px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
  background: #fff;
  margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
  text-align: center; /* this overrides the text-align: center on the body element. */
  height: 880px; 
  background : url("images/cat.jpg") no-repeat bottom center;
}

#aboutus_head {
  margin: 0px;
  padding: 15px 10px 0px 20px;
	
}

#aboutus_head h3 {
  font-size: x-large;
  font-weight: bold;
  border-bottom: 3px double #868686;
  margin: 0px;
  padding: 0px;
}

#aboutus h4 {
margin: 25px 10px 0 20px;
}

#aboutus p {
  font-size: .9em;
  margin: 25px 10px 0px 20px;
}

#aboutus p a {
font-weight: bold;
}

/* Contact */

#contact {
	width: 546px;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
  text-align: center;
  font-size: .9em;
}

#contact_head {
  margin: 0px;
  padding: 15px 10px 0px 20px;
}

#contact_area {
	margin-top: 25px;
}

#contact h3 {
  font-size: x-large;
  font-weight: bold;
  border-bottom: 3px double #868686;
  margin: 0px;
  padding: 0px;
}

#contact p {
  margin: 25px 10px 0px 20px;
}

#contact_area input, #contact_area textarea {
	padding: 5px;
	width: 400px;
	font-family: Helvetica, sans-serif;
	font-size: 1.1em;
	margin: 0px 11px 10px 0px;
	border: 2px solid #ccc;
}

#contact_area textarea {
	height: 180px;
}

#contact_area textarea:focus, #contact_area input:focus {
	border: 2px solid #900;
}

#contact_area input.submit_button {
	width: 100px;
	float: right;
	margin: 0 22px 0 0;
	font-size: 1.4em;
}

label {
	float: left;
	text-align: right;
	margin-right: 10px;
	width: 90px;
	padding-top: 5px;
	font-size: 1.4em;
}

/* Results and Cart*/

#results_wrap {
  width: 516px;
  background: #fff;
  margin: 15px 10px 0px 20px;
  padding: 0px 0px 0px 0px;
  text-align: center;
}

#results_wrap p a {
  color: #000000;
  font-weight: bold;
}

/* Orders and Confirmation */

#order_wrap {
  width: 516px;
  background: #fff;
  margin: 30px 10px 0px 20px;
  padding: 0px 0px 0px 0px;
  text-align: center;
}

#order_wrap p a {
  color: #000000;
  font-weight: bold;
}

/* Details */

#detail_wrap { 
	width: 546px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #fff;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	text-align: left; /* this overrides the text-align: center on the body element. */
}

#detail_head {
	margin: 0px;
	padding: 15px 10px 0px 20px;
	
}

#detail_head h3 {
  font-size: x-large;
  font-weight: bold;
  border-bottom:3px double #868686;
  margin:0px 0px 0px 0px;
  padding:0px 0px 0px 0px;
  text-align:center;
}

#detail_images {
	float: left; /* since this element is floated, a width must be given */
	width: 260px; /* the actual width of this div, in standards-compliant browsers, or standards mode in Internet Explorer will include the padding and border in addition to the width */
	margin: 0px;
	padding: 20px 0px 0px 20px;
	background: #fff; /* the background color will be displayed for the length of the content in the column, but no further */
}

#detail_large {
	width: 240px;
} 

#detail_large a img{
border:none;
   display: block;
    margin-left: auto;
    margin-right: auto;
}

#detail_small {
	width: 240px;
	padding: 5px 0px 0px 0px;
	text-align: center;
}

#detail_small a img{
border:none;
}

#detail_cart { 
	margin: 0px 0px 0px 260px; /* the left margin on this div element creates the column down the left side of the page - no matter how much content the sidebar1 div contains, the column space will remain. You can remove this margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends. */
	padding: 20px 10px 0px 20px; /* remember that padding is the space inside the div box and margin is the space outside the div box */
} 

#detail_cart h3 {
font-size: x-large;
font-weight: bold;
border-bottom:3px double #868686;
margin-top: 0px;
padding-top: 0px;
}

#detail_text { 
	padding: 0 10px 0 20px; /* this padding matches the left alignment of the elements in the divs that appear above it. */
	background:#fff; 
}
 
#detail_text p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 20px 0px 20px 0px; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
}

#detail_text a {
	color:#000000;
	font-weight: bold;
	}

.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}