/**
 * Describes the style for Chocolate-affairs website.
 *
 * NOTE:  In a couple places in the style you'll see comments to the effect
 * of "SHOULD be [something] but WinIE is broken".  This is exactly the
 * problem, the box model in WinIE doesn't follow the CSS rules.  To get
 * around this we set values first to something that will make WinIE do
 * what we want, and then RESET the values to the proper CSS value in a
 * rule like  "body>something { rule: reset; }".  The reason this works is
 * that WinIE doesn't understand CSS v2 rules yet.
 */
/* Periwinkle : #9186cc */

BODY { 
  color: #000000;
  background-color: #d7d8d6;
  background-image: none;
  line-height: 1.1;
  font: 15px comic sans ms, sans;
  font-weight: lighter;
  margin: 0;
  padding: 0;
  height: 100%;
}

P {
  margin: 0px 0px 16px 0px;
  padding: 0px;
}

H1, H2, H3 {
  font-family: tempus sans itc, sans; 
}

font#CAFFAIRS {
  font-family: monotype corsiva, corsiva;
  font-size: 20px;
}

.left {
  float: left;
}
.left img {
  vertical-align: text-top;
}

.right {
  float: right;
}

/* Class to describe the header at the top of the page. */
.header {
  position: absolute;
  top: 10px;
  left: 140px; /* Must be grater than #Navbar.width */
  right: 10px;
  padding: 10px 0 0 5px;
  display: inline;
  overflow: visible;
  width: auto;
  /* border-bottom: 1px solid #000000; No border, messes up */
}

.header h1 {
  margin: 0 0 0 75px;
  font-size: 200%;
}

.headerCart {
  position: relative;
  float: right;
  bottom: 20px;
}

.content {
  color: #7941c5;
  background-color: #FFFFFF;
  font-weight: bolder;
  position: absolute;
  top: 95px;
  left: 180px; /* Must be grater than #Navbar.width */
  right: 10px;
  padding: 15px 0px 0px 10px;
  min-height: 78%;
  height: auto;
}


/* Footer Pad is a space at the end of the content to give room for the Footer
 * to be located at the bottom */
.footerpad { height: 85px; }

.footer {
  position: absolute;
  width: 83%;  /* SHOULD be 100%, but WinIE is broken */
  bottom: 0;
  left: 0;
/*  border-top: 1px solid #000000; */
  padding: 5px 0 0 0;
}
/* Resets properly for non-IE browsers */
body>div.content>div.footer { width: 100% } 

/* Specific class to describe the style for the LOGO in the upper-left
 * corner.  Fixed, just cause we can. */
.logo {
  position: absolute; /* SHOULD be fixed, but WinIE 5.x is broken */
  top: 5px;
  left: 5px;
  width: 145px;
  padding: 5px;
}
.logo img { border-style: none; }
body>div.logo { position: fixed } /* Resets to fixed for non-IE browsers */


/* Class to describe the style for the "navigation bar" on the left-hand
 * side of the page.  Fixed, just cause we can. */
.navbar {
  font-size: 14px;
  font-weight: bold;
  position: absolute; /* SHOULD be fixed, but WinIE 5.x is broken */
  top: 120px;
  left: 5px;
  width: 180px;
  padding: 10px; 
  line-height: 0.2;
}
body>div.navbar { position: fixed } /* Resets to fixed for non-IE browsers */

.navbar-indent {
  position: relative;
  left: 15px;
}

.productgroup img {
  border-style: none;
  vertical-align: middle;
  padding: 0 4px 10px 10px;
}

div.productgroup {
  position: relative;
  font: 16px lucida sans, sans;
  top: 0;
}


.grouptable table {
}

.centers {
  color: #6c5f78;
  font: 15px lucida sans, sans;
  font-weight: bold;
}
table.centers {
  width: 77%;
  border-collapse: collapse;
}
table.centers td {
  width: 33%;
  padding: 10px 0 0 0;
}
body>div.content>table.centers { width: 100%; }

.pricetable {
  color: #6c5f78;
  font: 15px lucida sans, sans;
  font-weight: bold;
}
body>div.content>table.pricetable { width: 100%; } /* Reset non-IE browsers */
div.pricetable td {
  width: 5%;
}


table.availablelist {
  width: 85%;
  border-collapse: collapse;
}
table.availablelist td {
  padding: 0 50px 0 0;
}


.productlist {
  font-size: 11px;
}
/* Make WinIE display the table the full width of the damned screen when a 
   right-floated element is in the table. */
.productlist table {
  width: 83%;
  border-collapse: collapse;
}
body>div.content>div.productlist table { width: 100% } /* Resets properly for non-IE browsers */
/* Give some space between each table cell */
.productlist td, .productlist th {
  padding: 0 0 0 10px;
}
/* --- except the first one */
.productlist td:first-child {  padding: 0 0 0 0; }
.productlist td#listIcon {  max-width: 40; } /* set a MAX width to the icon */
.productlist td#size {  min-width: 50; } /* set a min width to size */
.productlist td#price {  min-width: 40; } /* set a min width to price */
.productlist td#formWithOption {  min-width: 350; } /* set a min width to form */
.productlist td#formNoOption {  min-width: 150; } /* set a min width to form */
/* Give some EXTRA space to top of the form, to make it line up with the
   rest of the table. */
.productlist form {
  margin: 5px 0 0 0;
}



/* Make the "Product" central area be a specific height so that we can slap */
/* stuff down below it */
/* NOTE:  Detail pictures must be 400px in height or less */
/* Indent all the paragraphs in the product detail page */
.product {
  height: 400px;
}
.product p {
  text-indent: 2em;
  line-height: 1.2;
  margin: 5px 0 0 0;
}
/* Don't indent ingredients text, however */
.product #Ingredients {  
  text-indent: 0; 
  font-size: 10px;
  margin: 15px 0 0 0;
}
.ingredients {
  font-size: 10px;
}
.product #Price {
  text-indent: 0; 
}
/* Give some space to the right of the floated-left image. */
.product img {
  padding: 0 20px 0 0;
}
.near_bottom {
  position: relative;
  width: 83%;  /* SHOULD be 100%, but WinIE is broken */
  top: 20px;
  left: 0px;
}
body>div.content>div.near_bottom { width: 100% } /* Resets properly for non-IE browsers */

.cat_left {
  float: left;
  width: 30%;
}
body>div.content>div.cat_left { width: 50% } /* Resets properly for non-IE browsers */
.cat_right {
  float: right;
  width: 40%;
}
body>div.content>div.cat_right { width: 50% } /* Resets properly for non-IE browsers */