body, html
{
    width: 100%; /*   which is needed for height = 100% attribute to work correctly. */    
    margin: 0px 0px 0px 0px;
    padding: 0;
    background-color: #bfbfbf;
    background: url('images/bg.jpg') repeat top center;
}

/* Images won't need borders. */
img 
{
    border: 0;
    padding: 0;
}

/* Span the page in case of future needs. */
#pageSpan 
{
    width: 100%;
    text-align: center;
    margin: 0 auto
}

/* This contans the header image, this code won't effect IE but it will effect Firefox. */
#pageHeader
{
    width: 948px;
    text-align: center;
}

.header-image
{
    float: left;
    width: 948px;
    height: 164px;
}

.header-links
{
    float: left;
    width: 948px;
    height: 32px;
    background-color: #ae2073;
}

.links-container
{
    float: left;
}

.link
{
    float: left;
    height: 32px;
    width: 157px;
}
    
.email-link
{
    float: left;
    width: 250px;
    padding-top: 5px;
    text-align: left;
}

.page-content
{
    float: left;
    padding: 10px 0px 10px 0px;
}

/* Adds the white background, with shadows. */
#pageShadows 
{
    width: 948px;
    background: url('images/body_background_shadows.png') repeat-y top center;
    margin: 0 auto;
    text-align: center;
}

/* Just below the header, has a special offers button and three menu buttons. */
#pageMenu 
{
    width: 860px;
    height: 90px;
    text-align: center;
}

/* Put the special offers button on the left using float. */
#pageSpecialOffers 
{
    width: 200px;
    float: left; 
    text-align: left;
}

#mailinglist 
{
    float: left;
    width: 188px;
    background-color: #fccce9;
}

.mailinglist-padded
{
    float: left;
    width: 168px;
    padding: 10px;
    font-family: Arial;
    font-size: 8pt;
    color: #be428b;
}

/* Put the menu buttons on the top right using float. */
#pageMenuItems
{
    width: 600px;
    float: right; 
    text-align: right;
    padding: 20px 0px 0px 0px;
}

/* Fit it into the page and constrain the width, so the float works correctly. */
#pageWrapper 
{
    float: left;
    width: 948px;
    text-align: center;
}

/* The actual left hand menu, this contains shop categories. */
#pageCategories
{
    width: 208px;
    float: left;
    text-align: left;
}

.right-padded
{
    float: right;
}

/* The content of the pages, more often than not this will hold the product listings. */
#pageContent
{
    width: 530px;
    float: left;
    text-align: left;
}

#pageContent2
{
    width: 730px;
    float: left;
    text-align: left;
}

/* Top part of the categories. */
#categoryTop 
{
    float: left;
    width: 188px;
    height: 40px; 
}


/* The curve at the bottom of the menu. */
#categoryBottom 
{
    width: 254px;
    height: 27px;
}

/* Adds a green footer with menu and contact details to the bottom of the website. */
#pageFooter
{
    width: 948px;
    text-align: center;
}

.footer-text-padded
{
    padding-top: 8px;
}

/* The menu part of the footer. */
#pageFooterMenu 
{
    width: 948px;
    text-align: center;
    height: 32px;
    background-color: #ae2073; 
}

/* Puts a green bar on the footer. */
#colorGreen 
{
    width: 948px;
    background-color: #ffffff;  
    text-align: left;
    
}


/* Adds the 'un tidy' top bit to the footer. */
#pageFooterTop 
{
    width: 100%;
    height: 8px;
    text-align: center;
}

/* Stretch the page to fill the window height wise. */
#pageStretch 
{
    width: 100%;
    height: 300px;
}


/* Adds the border above and below a category. */

.left-item
{
    float: left;
    padding: 5px;
}

.stylecategory 
{
    float: left;
    width: 188px;
    border-bottom: solid 1px #ffffff;
}

.menu-item
{
    float: left;
    width: 188px;
    padding: 2px 0px 2px 0px;
    background-color: #fccce9;
}

.menu-item:hover
{
    float: left;
    width: 188px;
    padding: 2px 0px 2px 0px;
    background-color: #fdabdc;
}

.menu-item2
{
    float: left;
    width: 188px;
    padding: 2px 0px 2px 0px;
    background-color: #fdabdc;
}


/* Adds a mouse over effect to the whole div. */
.stylecategory:hover 
{
    background-color: #e6e6e6;
}

/* Style the category font. */
.category 
{
    font-family: Sans-Serif, Arial;
    color: #b83783;
    font-size: 14px;
    text-decoration: none;
    padding-left: 10px;
}

/* Style the subcategory font. */
.subcategory 
{
    font-family: Sans-Serif, Arial;
    color: #000000;
    font-size: 13px;
    text-decoration: none;
    padding-left: 10px;
}

/* Style the category font. + Hover Effect */
.category:hover
{
    color: #000;
}

/* Style the subcategory font. + Hover Effect */
.subcategory:hover
{
    color: #000;
    font-style: italic;
}

.padding-basket
{
    padding-top: 5px;
}

/* Makes the page numbers look pretty. */
.pnumbers
{
    padding: 1px 5px 1px 5px;
    background-color: #fccce9;
    border: solid 1px #000000;
    text-decoration: none;
    font-weight: bold;
    color: #ffffff;
}

/* Changes the ones people have already visited. */
.pnumbers:visited
{
    padding: 1px 5px 1px 5px;
    background-color: #fdabdc;
    border: solid 1px #000000;
    text-decoration: none;
    font-weight: bold;
    color: #ffffff;
}

/* Make a fancy horizontal rule below the page numbers. */
.makehr 
{
    width: 100%;
    height: 1px;
    background-color: #000
}

/* Make a fancy horizontal rule above the page numbers. */
.makehralt
{
    width: 100%;
    height: 1px;
    background-color: #000
}

/* Apply padding to the content within the fader on the basket page. */
.padfade
{
    width: 500px;
    padding: 15px 15px 15px 15px;
}

/* Style the form fields on the contact us page! */
.enquiry 
{
    border: solid 1px #c45c99;
    color: #000;
    font-family: Sans-Serif, Tahoma, Arial, Verdana;
} 

.product-options-1
{
    padding: 4px;
    background-color: #c45c99;
}

.product-options-2
{
    padding: 4px;
    background-color: #fdabdc;
}

.option-add
{
    float: left;
    width: 100px;
    background-color: #fff;
    border: solid 1px #000;
    font-family: Arial;
    font-size: 11px;
    color: #000;
}