body {
background-color: black;
font-family: Century Gothic, sans-serif;
font-size: 13px;
color: black;
text-align: center;
}

#header {
width:1000px;
margin:auto;
padding: 10px;
}

#promo{
float: left;
font-size: 13px;
color: #8dc140;
}

#joinlist {
float: right;
font-size: 13px;
color: white;
}

.celebs {
float: left;
text-align: center;
width: 150px;
padding: 20px;
}

.greenheader {
font-size: 16px;
color: #8cc03f;
}

.lineleft {
border-left: 1px solid black;
}

.hometable {
border-top: 1px solid black;
}

.hometable2 {
border-bottom: 1px solid black;
}

.image {
margin: 7px;
float: left;
}

#wrapper {
margin: 40px auto auto auto;
width:1000px;
border:1px solid white;
padding: 5px;
}


#content {
background-color: #fff;
text-align: left;
padding: 10px;
min-height: 600px;
}

#logo {
float: left;
height: 76px;
width:248px;
}

#topnav {
float: left;
width:350px;
margin: 50px 0 0 0;
}

.space {
background-color: black;
height: 1px;
width:100%;
margin: 10px 0 10px 0;
}

#search {
text-align: right;
margin: 0 0 10px 0;
}

input {
border:1px solid black;
}

#leftnav {
float: left;
}

#rightcontent {
float: right;
width:775px;
padding: 10px;
border:1px solid black;
text-align: left;
}

dl { width: 160px; }
dl,dd { margin: 0px; }
dt, dt a:link, dt a:visited, dt a:hover, dt a:active { font-size: 20px; margin: 0; font-weight: normal; }
dt a { color: #000; text-decoration: none; }
dd a { color: #000; text-decoration: none; }
ul { list-style: none; padding: 0 0 0 5px; margin: 0; }
li a:link, li a:visited, li a:hover, li a:active {margin: 5px 0 5px 0; font-size: 13px; font-weight: normal;}

#footer {
margin: auto;
font-size: 10px;
color: white;
margin: 10px 0 0 0;
}

.footer:link, .footer:active, .footer:visited, .footer:hover {
font-size: 10px;
color: white;
text-decoration: none;
}

a:link, a:visited, a:hover, a:active {
font-size: inherit;
font-weight: bold;
color: black;
text-decoration: none;
}

.linkstitle {
font-size: 14px;
color: #8cc03f;
font-weight: bold;
}


.pagetitle {
font-size: 18px;
color: black;
}

.formbutton {
border:none;
}

#vendortopitems {
margin: 50px;
text-align: center;
}

#vendortopitems tr td { /* DO style */
vertical-align: top;
padding-right: 30px;
width:220px;
}

.productprice {
color: red;
}

.productthumb {
margin: 70px 10px 0 0;
height: 70px;
width:70px;
}

#buttonwrapper {
float: right;
height: 75px;
width:500px;
}

#buttons {
    width: 500px; height: 75px;
    background: url(http://www.thebeanscloset.com/images/topbuttons.jpg);
    margin: 0px auto; padding: 0;
    position: relative;}
  #buttons li {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0;}
  #buttons li, #buttons a {
    height: 75px; display: block;}

  #about {left: 0; width: 100px;}
  #green {left: 100px; width: 100px;}
  #celebs {left: 200px; width: 100px;}
  #bellini {left: 300px; width: 100px;}
  #friends {left: 400px; width: 100px;}
  
  #about a:hover {
    background: transparent url(http://www.thebeanscloset.com/images/topbuttons.jpg)
    0 -80px no-repeat;}
  #green a:hover {
    background: transparent url(http://www.thebeanscloset.com/images/topbuttons.jpg)
    -100px -80px no-repeat;}
  #celebs a:hover {
    background: transparent url(http://www.thebeanscloset.com/images/topbuttons.jpg)
    -200px -80px no-repeat;}
  #bellini a:hover {
    background: transparent url(http://www.thebeanscloset.com/images/topbuttons.jpg)
    -300px -80px no-repeat;}
  #friends a:hover {
    background: transparent url(http://www.thebeanscloset.com/images/topbuttons.jpg)
    -400px -80px no-repeat;}

/* DO styles for slide show at product details page */

 /*\*//*/
#navDO a span, #navDO a:link span {
display:block;
visibility:hidden;
width:auto;
position:absolute !important;
top:100px;
left:100px;
}

#navDO a:hover span {
visibility:visible !important;
}

/**/

div#navDO { /* slide show's div */
padding: 230px 0 20px 0;
position: relative;
}

div#navDO a img { /* thumbnails and big images inside the slide show's div */
border: 0;
}

span.slideShow { /* does not show up until the mouse is positioned over a thumbnail */
display: none;
}

a.slideShow { /* coudn't get rid of the black border around slide show images without this rule */
border: 0;
}

a:hover { /* keeps the slide show independent of any possible a:hover styles */
text-decoration: none;
}

a:hover span.slideShow { /* shows the big image when the mouse is positioned over a thumbnail */
position: absolute;
left: -6px;
top: 11px;
padding: 10px;
border: 1px solid black;
background-color: white;
display: block;
z-index: 2;
}

span.slideShowBg { /* shows the first big image when the page loads - otherwise the slide show would start with a blank space over thumbnails; this style is used by the custom PHP code that checks if the product has any big images before showing anything */
position: absolute;
left: -6px;
top: 11px;
width: 230px;
height: 230px;
display: block;
z-index: 0;
}

img.slideShowThumb { /* keeps the big image visible after the mouse moves away from one thumbnail and before it gets over the next one */
padding: 70px 10px 0 0;
height: 70px;
width:70px;
}