/* 
------------------------------------------------------------
Colours used in this style are as follows:
purple: #cb99cc
blue: #4bb9dc
lightblue (h2): #e0f6ff
white
lightgray text: #999999
black: #333333
red: is still good for errors
*/

form {
	margin: 0;
	padding: 0;
}


body {
  /*max-width: 50em; */
  background-color: white;
  color: #333333; 
  text: #333333;
  font-family: Arial;
  margin: 0;
  text-align: center;
  
}
a:link { color: #333399; text-decoration: none;}
a:visited { color: #555599; text-decoration: none;}
a:hover { color: #cb99cc; } /* purple */
img { 
  border: none;
}



/* main element styling, including the nav sidebar */
#centretable { 
  border-collapse: collapse;
  table-layout: fixed;
  margin-top: 2px;
}
#centretable .bigtd { 
  padding-left: 2px;
  padding-bottom: 67px;
  margin-top: 0;
  padding-top: 0;
  min-height: 65em;
  background: url("/template/merchant-of-emotion.png") no-repeat bottom; 
  vertical-align: top;
}
#centretable #absolutecontent { 
  max-width: 600px; min-width: 600px; width: 600px; 
}
#centretable #shopcartcontent { 
  max-width: 765px; min-width: 765px; width: 765px;
}
#centretable td.spacer { 
  border-right: 2px solid #4bb9dc; 
  max-width: 4px; min-width: 4px; width: 4px;
}

#sidenav { 
  background: #cb99cc url("/template/sidebar-footer.jpg") no-repeat bottom; /* purple */
  color: white;
  padding-left: 3px;
  font-weight: bold;
  font-family: Arial;
  line-height: 1.5em;

  max-width: 165px; min-width: 165px; width: 165px;
}

#sidenav img { margin-left: -3px; margin-top: -1px; }
#sidenav img.submit { margin-left: 110px; margin-top: auto; display: block; }
#sidenav input, #sidenav select, #sidenav textarea { max-width: 145px; min-width: 145px; width: 145px;}
#sidenav ul, #sidenav li { list-style-type: none; margin-left: 0; padding-left: 0;}
#sidenav h2,#sidenav h3 { color: #e0f6ff;  } /* lightblue */
#sidenav h2 { 
  border-top: solid 2px #e0f6ff;
  padding-top: 0;
  font-size: 12pt; 
}
#sidenav h3 { 
  font-size: 10pt;
  margin-bottom: 0;
}
#sidenav a { 
  color: white; 
  text-decoration: none;
}
#sidenav a:hover { color: #4bb9dc; }

/* form.searchproducts input */#submitsearch { 
  background: url("/template/go.jpg") no-repeat right;
  width: 34px;
  height: 31px;
}


.header, .footer { 
  width: 750; max-width: 750; text-align: left; 
}
.main { 
  width: 600; max-width: 600; text-align: left; 
}
/* override the above inside shopcart */
div.address { 
  width: 762; max-width: 762;
}








body.popup  .header, body.popup .main, body.popup .footer { width: 400; max-width: 400; text-align: left;  margin: 1em;}
/* Why the 'table'?  IE, of course: */
.header, .main, .footer, table { font-size: 10pt; }


h1,h2,h3,h4,h5,h6 {
  color: #cb99cc; /* purple */
        margin-top: 0.6em;
        margin-bottom: 0.4em;
}
ul {
    margin-top: 0;
}
li {
    margin-top: 0.25em;
}

table.formedit a { text-decoration: underline; color: #333333; }

/* ----------------------------------------------------------------------
styles on the main template
*/

.header {
  vertical-align: top;
  margin: 0;
}
#headertable { 
  margin: 0;
  border-collapse: collapse;
  border: 0;
}
.header .sitename { padding-bottom: 0;}

  .pagetitle { 
    padding-top: 0.75em;
    margin-bottom: 1em;
    font-size: 18pt;
    color: #cb99cc;  /* purple */
  }
  .header .detail { 
      text-align: right;
    font-size: small;
    color: #333333;
  }

.header .widgets { 
  float: none;
  font-size: 8pt;
  font-weight: bold;
  text-align: right; 
  background: #4bb9dc url("/template/header-gradient.png") no-repeat; /* blue */
  padding: 2px;
  margin: 0;
}
.header .widgets, .header .widgets A {color: #e0f6ff; }
.header .widgets A {
  text-decoration: none; 
  vertical-align: top;
}
.header .widgets a:hover { 
  text-decoration: underline;
  color: #cb99cc; /* purple */
}

.header .widgets .menu { 
  display: none;
}


  div.header a.account {  }
  div.header a.catalog {  }
  div.header form.search { }
  div.header a.moresearch {  }

.footer { 
  margin-top: 1em;
  clear: both;
    color: #4bb9dc;
    background-color: #cb99cc; /* purple */
}
table.footer {
  border-collapse: collapse;
  border: none;
}

.footer .nav a:visited {
  color: red;
}

  .footer td.tagline {
      font-family: Arial,sans-serif;
      font-size: 25px; /* relative to the slogan image */
      vertical-align: middle;
  }
  .footer .tagline .name {
    vertical-align: middle;
    position: relative;
    top: -5px;
  }

  .footer td {
    padding: 0;
  }

  .footer img {
    padding: 0;
    margin: 0; 
  }

  .footer .copyright {
    font-size: smaller;
    padding: 5px;
    text-align: right;
    clear: both;
  }
  .footer .copyright a {
    color: #4bb9dc;
  }
  .footer .copyright a:hover { 
    background-color: #cb99cc; /* override/eliminate the usual hover */ 
    color: #333333;
  }
  .footer .userindicator { display: none; }

  .slogan { 
     font-family: Bradley Hand ITC, Fantasy, Script, cursive;
     margin-top: 50px;
   }


.main em { 
  font-size: larger;
  font-weight: bold;
  font-style: normal;
}
em a { font-size: larger; }


/* Style for the widget that displays where you're at in the process */
div.nav,div.breadcrumbs { 
  clear: both;
  margin: 0;
  margin: 3px 0 0 0;
  text-align: center;
}
div.nav a,div.breadcrumbs a { 
  text-decoration: none; 
  color: white;
  font-size: 14px;
}
div.nav a.current { 
  background-color: #4bb9dc;
}
div.nav b { 
  color: white;
  font-weight: bold;
}
div.nav span,div.breadcrumbs span { 
  padding: 0 0.5em 0 0.5em;
  border-style: solid;
  border-width: 1px;
  border-color: #333333;
  background-color: #CB99CC; /* purple */
}
div.breadcrumbs span { 
  font-size: 10px;
  margin: 0;
}
div.breadcrumbs a { 
  font-size: 12px;
}
div.breadcrumbs span span { 
  border-style: none;
  color: white;
}

/*
Note that the <title> name is available as a classname as well, so you
can do things like turning the userindicator on and off by page name.
This only works for one-word titles, so far. :(
Like this:
*/ 
div.addressbook div.footer div.userindicator { display: block; }

/*
If that doesn't work, you might consider using the CSS rules that allow
us to refer to previous/next elements like this:
*/
div.address + div.footer div.userindicator { display: block; }


textarea.error, input.error { background-color: #4bb9dc; color: #333333;}


/* ----------------------------------------------------------------------
styles for the account pages 
*/
div.forgotten {}
div.forgottennext {}
div.accountindex {}
  div.accountindex div.userindicator.sidebar { }
div.login {}
div.recovery {}
div.sessionidpage {}
div.recoverysuccess {}


div.accountindex div.sidebar { margin-top: 7em; width: 15em; margin-right: 2px; }

/* ----------------------------------------------------------------------
styles for addressbook pages 
*/
div.editone {}
div.addressbook {}
div.oneaddress {}
  div.oneaddress p.edit {}
  div.oneaddress p.new {}
  div.oneaddress p.delete {}
  div.oneaddress table.address {}
  div.oneaddress table.extra {}

/* render the addressbook listings with a simple (background) border */
table.listing {
  background-color: #4bb9dc;
  color: #333333;
}
table.listing a { color: #333333; }
table.listing a:hover { background-color: #4bb9dc; }
table.listing td { background-color: white; }
table.listing th { color: white; }

/* ----------------------------------------------------------------------
styles for shopcart 
*/ 

a.submit { 
  background-color: lightgray;
  color: #333333;
  border: solid 1px darkgray;
  text-decoration: none;
}

/* used in billing and shipping addresses, as well as address.html */ 
div.address { } 
.address span.error { color: red; }

/* Styles for the site's major forms */
div.address textarea, div.accountindex input, div.editone input, div.address input { max-width: 200; min-width: 200; width: 200;}
div.accountindex input[type=submit], div.editone input[type=submit], div.address input[type=submit] { min-width: 0; }
div.accountindex select, div.editone select, div.address select { max-width: 200; min-width: 200; width: 200;}
/* must be a better match: */
span.shortinput input, span.shortinput select { min-width: 100;  max-width: 100; width: 100;}
span.veryshortinput input, span.veryshortinput select { min-width: 50;  max-width: 50; width: 50;}

/* No radio button or checkbox should look ridiculously wide */
div.address input[type=checkbox], div.accountindex input[type=radio],
  div.editone input[type=radio], div.address input[type=radio] { min-width: 0; }


div.shopcartsummaryregweek { display: block; margin-bottom: 1.5em; border: 0; background-color: white; }
div.shopcartsummaryregsat { display: none; margin-bottom: 1.5em; border: 0; background-color: white; }

div.shopcartsummaryspecial { display: none; margin-bottom: 1.5em; border: 0; background-color: #cb99cc; }


/* especially for IE, who doesn't see [attr], and doesn't see 'max-width'. Geez */
span.reallyshortinput input { width: 50;}
#useshipping { width: 10; min-width: 0; }



div.main .sidebar .inputgroup { 
  border: 1px solid #333333;
  margin: 0.5em -0.5em 0.5em -0.5em;
  padding: 0.25em 0.25em 0.25em 0.25em;
  font-size: 80%;
}
.sidebar .inputgroup td { font-size: 80%; }
.sidebar input { 
  font-size: 80%;

  min-width: 300;
  max-width: 300;
}

.address .sidebar {
}

div.mainform {
}

p.submit { clear: both; text-align: center; }



div.billingaddress {}
div.checkout {}
  div.checkout table { margin: 3em; }
  div.checkout div.checkoutverification {  } /* when it has a button on it */ 
  div.checkout div.checkoutreport {  } /* when it has no button on it, but it does have a refnum */ 
  div.checkout tr.headings { background-color: #c0c0c0; }
  div.checkout tr.oddrow { background-color: #f0f0f0; }
  div.checkout tr.evenrow { background-color: #e0e0e0; }
  div.checkout tr.summary { background-color: #d0d0d0; } /* includes all the following tr elements */ 
  div.checkout tr.subtotal {}
  div.checkout tr.salestax {}
  div.checkout tr.wirefee {}
  div.checkout tr.total {}
  /* column names */
  div.checkout th.quantity {}
  div.checkout td.quantity {}
  div.checkout th.code { }
  div.checkout td.code { }
  div.checkout th.image {  }
  div.checkout th.image {  }
  div.checkout th.name {  }
  div.checkout th.name {  }
  div.checkout th.itemprice {}
  div.checkout td.itemprice {}
  div.checkout th.price {}
  div.checkout td.price {}
  div.checkout th.delete {}
  div.checkout td.delete { background-color: white;}
  div.checkout th.disclaimer {}
  div.checkout td.disclaimer {}

  div.checkout .description { background-color: white; }

div.address .error { 
  font-size: smaller;
}

/* The following example shows how to turn off the checkout product images on the 
  report page, and leave them on the verification page.  Note that non-CSS browsers
  will always display everything */
div.checkout div.checkoutreport .image { display: none; }
div.checkout .code { display: none; }
div.checkout .quantity { display: none; } /*restrict quantities to 1 for simplicity*/

div.checkoutverification .deliverydate { display: none; }

/* ----------------------------------------------------------------------
styles for product pages 
*/
div.advancedsearch {}
div.categories {}
  /* column names */
  div.categories td.name {}
  div.categories td.description {}
div.product { padding-right: 3px; }
  div.product span.categories {}
  div.index p.image, div.product p.image {display: block; float: left; margin: 0.5em; }
  div.product p.price {display: block;}
  div.product div#switchydescriptions {margin: 0.5em 0 0.5em 0.5em; padding: 0.5em; background: #4bb9dc; }
  div.index p.description, div.product p.description {display: block; }
    div.product p.description { clear: both; }
  div.product p.disclaimer {display: block;}
  div.product .widgets { clear: left; }
  div.product .substitution { clear: both; border: 1px solid #cb99cc; padding: 0.5em; margin: 1em 0 1em 0;}
  div.product .substitution .error { color: red; }
div.product div#switchydescriptions, div.indexsidebar, div.sidebar { 
  max-width: 60%;
  width: 60%;  /* for ie, which does not support the standard */
  float: right; 
  background-color: #4bb9dc;
  clear: right;
}
div.address div.sidebar { 
  max-width: 40%;
  width: 40%;  /* for ie, which does not support the standard */
}


div.product div#switchydescriptions, div.sidebar { 
  padding: 0.5em; /* 1em 0 1em;	 */
  margin: 1em 0 1em 2em; /* no right margin with fixed-width */
  border: 1px solid #cb99cc;
}

div.main div.indexsidebar { 
  max-width: 50%;
  width: 50%;  /* for ie, which does not suppor the standard */
  max-width: 40%;
  width: 40%;  /* for ie, which does not suppor the standard */
  text-align: center; 
  border: none;
}


.sidebar + .sidebar { 
  background-color: white;
}
div.sidebar.bg { background-color: white; }
.sidebar h2 { 
  color: white;
  text-align: center;
  padding: 0;
  font-family: arial;
}


.product .sidebar { 
  margin: 0 100px 1em 1em;
}
.product .sidebar p#standard_desc { 
  display: none;
}
.product .sidebar p#deluxe_desc { 
  display: inline;
}
.product .sidebar p#premium_desc { 
  display: none;
}
.product .widgets {
}

div.search,div.category {text-align: center;}
  div.category ul.subcategories {text-align: left;}

/* ------------------------------------------------------------ 
  the productlist is contained in both category and search pages 
*/
  table.productlist { 
    border-collapse: separate; 
    border-spacing: 0em;
    text-align: center;
    table-layout: fixed;
  }
  table.productlist td { padding: 1em; }
  table.productlist img { display: block; }
  table.productlist img.button { float: left; }

.productlistitem { 
  text-align: left;
}
.productlistitem .text { 
  text-decoration: underline;
  text-transform: uppercase;
  font-weight: bold;
}
.productlistitem .price, .productlistitem .name { 
  color: #333333;

  font-weight: normal;
  font-family: arial;
  font-size: 8pt;
  display: block;
}

.productlistitem img.button { margin-bottom: 10; margin-right: 5;}
.productlistitem .largemain img { margin-right: 50; }

/*Each element (price,image,name,text) is a span.  Make them blocks so they're vertical:
  (except price is in-line with ORDER NOW)
*/
.productlistitem span { display: block; }
.productlistitem a { 
  text-decoration: none; 
  color: #333333;
}

.productlistitem a:hover * {
  color:  #cb99cc; /* purple */
}

/* ------------------------------------------------------------ */
  div.pagingwidgets { 
    text-align: center;       
    background-color: #cb99cc; /* purple */
    color: white;
  }
    div.pagingwidgets a {
      color: white;
    }
    div.pagingwidgets a:hover {  
      color: #333333;
      text-decoration: underline;
    }
    div.pagingwidgets a.prev, div.pagingwidgets a.next { 
      border: none; 
      color: white;
      padding-left: 5px; padding-right: 5px;
    }
    div.pagingwidgets a.prev span, div.pagingwidgets a.next span { 
          text-decoration: underline;
    }
    div.pagingwidgets a.prev:hover, div.pagingwidgets a.next:hover { 
      color: #333333;
    }
    div.pagingwidgets span.count {  }
    div.pagingwidgets a.disabled { display: none; } /* when next or prev is not available */



/* ----------------------------------------------------------------------
styles for the index page
*/
div.indexsidebar {
  max-width: 40%;
  float: right;
  border: 1px solid #7D8935;
  background-color: white;
  margin-bottom: 20em;
  color: #cb99cc; /* purple */
  text-align: left;
}
div.index {
  clear: none;
  color: #999999; /* gray */
}
div.product p, div.product form { margin-left: 3em; }

img#headlineimage { 
  border: 2px solid #c0c0c0;
}

/* ---------------------------------------------------------------------- */
#admincategory { }