/* ********************************
	HTML Tags
******************************** */

/* basic elements */
* { padding: 0px;  margin: 0px; }
html, body { 
   font-family: 'Tahoma', sans-serif;
   font-size: 76%;
   color: rgb(104,0,0); 
   background: url("images/bg2.jpg");
}

p {
	line-height: 1.4em;
}


a:hover, a:active {
 color: #663300;
 background: #FFCCFF; 
 text-decoration: none;
 border-bottom: 1px solid ButtonFace; 
 margin-bottom: 10px;
 text-align: center;
}

/* counteract the above for out inset images.  better idea would be to
   fix the above, eh?  */
.inset a:hover, a:active {
	 border: none;

}

#header { 
  width:100%; height: 65px;
  margin-left: 3%; margin-right: 3%;
  padding-top: 5px;/*needed to account for collapsing margins -- mozilla properly adds extra space on top if no padding is specified*/
}

#sjd {
text-align:center;
margin:0; padding:0;
position:relative;
width:100%; height:65px;
margin:0; padding:0;
overflow:hidden;
}

#sjd span {
display:block;
position:absolute; left:0; top:0; z-index:1;
width:100%; height:65px;
margin:0; padding:0;
background:url("images/sjd_logo.gif") top center no-repeat;
}




/* ********************************
	Container, Intro
******************************** */
div.spacer {
  clear: both;
}

/* Alsett clearing method */
#payload:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

#payload {   
  margin-top: 1em; 
  background: url("images/white_bg.jpg") rgb(255, 255, 255) repeat top left;
  border: 3px solid #b400ff;
  margin-left: 3%; margin-right: 3%; 
   
  padding: 0px 10px 10px 10px;
}

/*--- Holly Hack for IE 6 Peekaboo bug ---*/
/* Hides from IE5-mac \*/
* html div#payload {height: 1%;}
/* End hide from IE5-mac */ 


#payload p {
  font-size: 1.8em;
  text-align:left;
  padding-bottom: 13px;
}

#payload h2 { 
  font-size: 1.8em;
  text-decoration: underline;
  text-align:left;
  padding-bottom: 2px;
}

#payload h3 { 
  font-size: 1.3em;
  color: #000000;
  text-align:left;
  padding-bottom: 13px;
}

#cart th { 
  font-size: 1.8em;
  color: #330000;
}

#cart td { 
  font-size: 1.7em;
  color: #660000;
}



/* ********************************
	Nav
******************************** */

#nav { width: 100%; }

#nav ul {
position:relative; left:0; top:0; z-index:1;
      margin-left: 0.5em;
      margin-top: 5.0px !important; margin-top: 0px;  /* IE hack :P */
      margin-bottom: -1.4em !important; margin-bottom: -3.0em; /* IE hack :P */
}

#nav li {
  margin: 0px 0px 0px 0px;
  text-align: center;
  list-style: none;
  display: inline;
}

#nav a {
  color: #6600CC;
  border: 1px solid;
  background-color: #FF99FF;
  font: 13px Arial, sans-serif;
  font-weight: bold;
  border-color: #CC00FF #6600CC #6600CC #CC00FF;

  text-align: center;
  text-decoration: none;
  padding: 3px;
}

#nav a:hover {
  background-color: #FFCCFF;
  border: 1px solid;
  border-color: #6600CC #CC00FF #CC00FF #6600CC;
  color: #6600CC;
  text-align: center;
  text-decoration: none;
  padding: 6px 3px 6px 3px;
}



#footer p {
  text-align:center;
}

p.mailaddy {
  font-size: 1.3em;
  color: #000000;
  text-align:left;
  text-indent: 70px;
}


div.inset img {
  padding: 1px;
  margin: 3px;
  
}



div.inset {
  border: thin silver solid;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 0.5em;
  padding: 0.5em;

  float: left;
}


/* ---------   Pretty Add2Cart buttons ---------   */

li.add2cart, a.add2cart:link, a.add2cart:visited {
  height: 30px; width: 134px;
  line-height: 30px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: small;
  text-align: center;
  list-style-type: none;
  display: block;
  text-decoration: none;
  color: #FFFFFF;
  font-weight: bold;
  background-image: url(images/button_roll.gif);
  background-position: 0px 0px;
  overflow: hidden;
  padding: 0px; margin: 0px 0px 9px 10px;
}

/* 9px margin at the bottom of the link to compensate for the "Sold" button that we threw together
    quickly.  Revisit this */
a.add2cart:hover { color: #000000; background-position: 0px -30px; margin: 0px 0px 9px 10px;}
a.add2cart:active { color: #FFFFFF; background-position: 0px -60px; margin: 0px 0px 9px 10px; }

/* ---------   ======================= ---------   */




/*
#checkout {
height: 30px;
width: 122px;
margin: 0;
border: 0;
background: url(images/checkout.gif) no-repeat center top;
font-size: 0px;
}

#update {
height: 30px;
width: 134px;
margin: 0;
border: 0;
background: url(images/updatecart.gif) no-repeat center top;
font-size: 0px;
}
*/


/* Make the cart is practically full width */
div#payload.cart div#cart {
  border: thin silver solid;
  margin-right: 15%;
  max-width: 750px;  
  width:expression(document.body.clientWidth > 750? "750px": "auto" );
  padding: 1em;
}
select.quant {
  width: 3em;
}


/* Handle the inset boxes */

/* Small boxes (purses) get a max width of 300px, need the hack for IE which
    doesn't support max-width (sigh) */
div#payload.purse  .inset {
   max-width: 300px;  
   width:expression(document.body.clientWidth > 300? "300px": "auto" );
}

/* Yarn is super-sized */
div#payload.yarn .inset {
   max-width: 6000px;  
   width:expression(document.body.clientWidth > 600? "600px": "auto" );
}

/* As above but the default is for medium boxes */
div#payload .inset {
   max-width: 500px;  
   width:expression(document.body.clientWidth > 500? "500px": "auto" );
}


div#payload.cart form {
   margin-bottom: 5em;
}

div#payload.cart div.inset {
  border: thin red solid;
  float: left;
  margin-right: 30px;
}




span.cap-g {
  float: left; 
  font-size:  5em;
  font-weight: bold;
  padding: 0 0.15em;
  margin: 0 0.25em 0 0; 
  background: rgb(255,234,0);
  border: 3px outset #2e8b57;
  clear: both; 
}