html, body
{
    margin: 0 0 40px;
    padding: 0;
}
body
{
    font: 76% Arial, Helvetica, sans-serif;
    color: #000;
    background-color: #fff;
}
h1, h2, h3, h4, h5
{
    margin: 1em 0 .3em;
    color: #FFD51F;
}
h2
{
    font-size: 16px;
    letter-spacing: -1px;
}
h3
{
    font-size: 12px;
    color: #fff;
}
h4{font-size: 12px;}
p
{
    margin: 0 0 1em;
    line-height: 1.5em;
}
a,
a:link,
a:visited{color: #FFD51F;}
a:hover,
a:active{}
a img{border: none;}
ul{list-style-type: square;}
ol
{
    margin: 0 0 0 2em;
    padding: 0;
}
ul li,
ol li
{
    line-height: 1.5em;
}
ol li{margin-bottom: 1em;}
form{margin: 0;}
fieldset{padding: 0; border: none;}

/* ~~~ === POSITIONING SELECTORS ============================ ~~~ */
#wrapper
{
    width: 750px;
    margin: 0 auto;
    background: #C63727 url(../images/shadowbg.gif) repeat-x 0 139px;
}
#masthead
{
    height:113px;
    background: #6078A5 url(../images/masthead_bg.jpg) no-repeat 0 0;
    font-size: 11px;
    text-align: center;
}
#masthead p
{
    width: 580px;
    margin: 0 auto;
    padding: 2px 0;
    color: #666;
    line-height: 1.3em;
    letter-spacing: 1px;
}

/* ~~~ === HORIZONTAL NAVIGATION ==================================== ~~~ */
#menu
{
    background-color: #6078A5;
    border-top: 2px solid #fff;
    /*overflow: auto;
    height: 1%; Trigger I.E's hasLayout */
}

#menu ul
{
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 56px;
    border-bottom: 2px solid #fff;
    height: 22px;
}
    #menu li{float: left;}
    #menu a
    {
        display: block;
        line-height: 22px;
        color: #fff;
        text-decoration: none;
        padding: 0 12px;
    }
    #menu li.active a{font-weight: bold;}
    #menu a:hover{color: #000;}
    #menu li ul
    {
        position: absolute;
        width: 12em;
        left: -9999em;
        border-bottom: none;
        padding: 0;
        border-top: 2px solid #fff;
        z-index: 3;
    }
    #menu li ul a
    {
         width: 12em;
         background-color: #6078A5;
         border-width: 0 2px 2px;
         border-style: solid;
         border-color: #fff;
    }
    #menu li.active ul a{font-weight: normal;}
    #menu li:hover ul,
    #menu li.sfhover ul{left: auto;}


/* ~~~ === SPECIFIC PAGE STYLES ==================================== ~~~ */
#superior-silk-products #masthead{background: url(../images/mulberry.jpg) no-repeat 0 0;}
#superior-silk-products #menu,
#superior-silk-products #menu li ul a{background-color: #D9E97C;}
#superior-silk-products #menu a{color: #3E4809;}
#superior-silk-products #menu a:hover{color: #5C8827;}

#history-of-silk #masthead{background: url(../images/silk.jpg) no-repeat 0 0;}
#history-of-silk #menu,
#history-of-silk #menu li ul a{background-color: #C2BC9C;}
#history-of-silk #menu a{color: #3E4809;}

#testimonials #main ul
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#testimonials #main li
{
    line-height: 2.2em;
    border-bottom: 1px dashed #E15845;
}

/* ~~~ SUB NAVIAGTION ============================================== ~~~ */
#submenu
{
    width: 166px;
    margin: 148px 40px 0 44px;
}
    #submenu h3
    {
        color: #fff;
        background: url(../images/menu-down-arrow.gif) no-repeat 100% 50%;
    }
    #submenu ul
    {
        list-style-type: none;
        margin: 0 0 1em;
        padding: 0;
        border-top: 1px dashed #E15845;
    }
    #submenu li{border-bottom: 1px dashed #E15845;}
    #submenu li a
    {
        display: block;
        width: 138px;
        color: #fff;
        text-decoration: none;
        background: transparent url(../images/menu-right-arrow.gif) no-repeat 0 50%;
        line-height: 16px;
        padding: 4px 14px
    }
    #submenu li a:hover{color:#FFD51F;}

    /* ~~~ CHILD LISTS ~~~ */
    #submenu li li:last-child{border-bottom: none;}
    #submenu li li a
    {
        width: 122px;
        padding: 4px 22px;
        background-image: none;
    }

/* ~~~ === MAIN CONTENT =========================================== ~~~ */
#content
{
    width: 750px;
    float: left;
    background: url(../images/gradient-top.jpg) repeat-x 0 100%;
    color: #fff;
}
#leftcol
{
    width: 250px;
    float: left;
    background: url(../images/logolarge.jpg) no-repeat 0 0;
    min-height: 202px;
}
    #productLink
    {
        margin: 142px 20px 2em;
        padding-top: 6px;
        height: 46px;
        text-align: center;
        background: url(../images/online_shop_link_bg.gif) no-repeat 0 0;
    }
    #productLink a{text-decoration: none;}
    #productLink a:hover{text-decoration: underline;}
#main
{
    width: 467px;
    float: right;
    padding: 11px 16px 16px;
    margin: 16px 0 0;
    background: url(../images/vertical_dashed_line.gif) repeat-y 0 0;
    min-height: 300px;
}
#contentBottom
{
    clear: both;
    height: 74px;
    background: url(../images/gradient2.jpg) repeat-x 0 100%;
}
    #contentBottom h3
    {
        margin: 0 30px;
        line-height: 74px;
        text-indent: -9999em;
        background: url(../images/sunseekerlogo2.jpg) no-repeat 0 0;
    }
    #contentBottom a
    {
        color: #fff;
        text-decoration: none;
        font-size: 16px;
    }
#footer{clear: both; background-color: #fff;}
    #footer p
    {
        line-height: 2em;
        margin: 0;
    }
    #footer a
    {
        font-size: 10px;
        color: #333;
        text-decoration: none;
        padding: 0 12px;
    }
/* ~~~ === LEFT COLUMN ===================================== ~~~ */
p.productLink
    {
        margin: 0 20px 2em;
        padding-top: 6px;
        height: 46px;
        text-align: center;
        background: url(../images/online_shop_link_bg.gif) no-repeat 0 0;
    }
p.productLink a{text-decoration: none;}
p.productLink a:hover{text-decoration: underline;}
#nzNotice
{
    margin: 1em 20px 2em;
    font-size: 14px;
    text-align: center;
    line-height: 1.3em;
}
#nzNotice b{color: #FFD51F;}

/* ~~~ === CART SUMMARY =================================== ~~~ */
#cartSummary
{
    width: 162px;
    margin: 14px 40px 22px 44px;
    border: 2px solid #fff;
    padding: 0 0 12px;
    font-size: 11px;
    text-align: center;
    background-color: #C63727;
}
#cartSummary h3
{
    color: #3E4809;
    line-height: 22px;
    margin: 0 0 12px;
    font-size: 12px;
    background-color: #D9E97C;
    border-bottom: 2px solid #fff;
}
#cartSummary p{margin: 0 12px .3em;}
div.transferProduct{border: 2px solid #fff;}

/* ~~~ === MODAL WINDOW ================================== ~~~ */
#dialog
{
    margin-left: -210px;
    width: 420px;
    background: #C63727 url(../images/gradient-top.jpg) repeat-x 0 100%;
    color: #fff;
    border: 2px solid #fff;
    padding: 24px;
}
#dialog form p{margin: 0 0 .3em;}
#dialog p.buttons{margin: 1em 0 0;}
#dialog p input,
#dialog p label,
#dialog p button{vertical-align: middle;}

/* ~~~ === STOCKISTS ====================================== ~~~ */
#stockistsWrapper{margin-top: 2em;}
#stockists
{
    width: 246px;
    float: left;
}
#stockists h3
{
    line-height: 1.5em;
    text-transform: uppercase;
    font-weight: bold;
}
#imageMap
{
    width: 210px;
    float: right;
    margin-bottom: 40px;
}
#stores{margin-bottom: 40px;}
#stores dl{margin: 0;}
#stores dt
{
    line-height: 1.5em;
    font-weight: bold;
    color: #fff;
    margin-bottom: 6px;
    text-decoration: underline;
}
#stores dd{margin: 0;}
#stores dd b{color: #FFD51F;}
#stores dd.space
{
    border-bottom: 1px dashed #E15845;
    margin-bottom: .5em;
}

/* ~~~ === FAQS =========================================== ~~~ */
#faqs
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
#faqs li
{
    border-bottom: 1px dashed #E15845;
    padding: 4px 0;
}
#faqs li h3{margin: .2em 0 .5em;}
#faqs li p{margin: 0 0 .5em;}

/* ~~~ === PRODUCTS ======================================= ~~~ */
dl.productThumb
{
    width: 50%;
    float: left;
    margin: 0 0 1em;
}
dl.productThumb dt{text-align: center;}
dl.productThumb dt img{border: 1px solid  #fff;}
dl.productThumb dd
{
    margin: 0;
    text-align: center;
}
dl.productThumb dd h3
{
    margin: 0;
    color: #FFD51F;
}
dl.productThumb dd p
{
    margin: 0;
    line-height: 1.3em;
}
dd.addToCart{padding-top: 4px;}

/* ~~~ === ORDER DETAILS ================================== ~~~ */
table.tblOrderDetail
{
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0 0;
}
table.tblOrderDetail thead th
{
    text-align: left;
    padding: 2px 4px;
    font-size: 12px;
    border-bottom: 1px dashed #E15845;
}
table.tblOrderDetail thead th.center{text-align: center;}
table.tblOrderDetail thead th.right{text-align: right;}
table.tblOrderDetail tfoot td
{
    font-size: 11px;
    padding: 2px 4px;
}
table.tblOrderDetail tbody td
{
    font-size: 11px;
    padding: 4px;
    border-bottom: 1px dashed #E15845;
}

/* ~~~ === CHECKOUT ====================================== ~~~ */

#frmCheckout1 fieldset,
#frmCheckout2 fieldset
{
    margin: 0 0 1em;

}
#frmCheckout1 legend,
#frmCheckout2 legend
{
    font-size: 12px;
    font-weight: bold;
    color: #FFD51F;
}
#frmCheckout1 dt,
#frmCheckout2 dt
{
    width: 12em;
    clear: left;
    float: left;
    text-align: right;
    padding-right: 1em;
}
#frmCheckout1 dd,
#frmCheckout2 dd{margin: 8px 0 8px 13em;}
#frmCheckout2 dd{color: #000;}
#frmCheckout2 dd em
{
    display: block;
    font-size:10px;
}
#processing
{
    height: 42px;
    background: url(../images/ajax-loader.gif) no-repeat 50% 100%;
    display: none;
    position: fixed;
    top: 16%;
    left: 50%;
    margin-left: -200px;
    width: 400px;
    text-align: center;
    font-weight: bold;
}
/* ~~~ === SITES OF INTEREST ================================== ~~~ */
#linkCategories
{
    list-style-type: none;
    margin: 1em 0;
    padding: 0;
}
#linkCategories li
{
    line-height: 1.5em;
    margin-bottom: 1em;
}
#sites h3,
#sites h4{color: #000; margin: 0;}
#sites h3{font-style: italic;}
#sites h4{margin:0;}
#sites dl{margin: 0 0 1em;}
#sites dt{margin: 0 0 .3em;}
#sites dd{margin: 0; color: #000;}

/* ~~~ === CONTACT US ========================================== ~~~ */
#frmEnquiry legend
{
    font-size: 11px;
    color: #FFD51F;
}
#frmEnquiry fieldset{width: 370px; margin: 1em 0;}
#frmEnquiry dl{margin: 1em 0;}
#frmEnquiry dt
{
    width: 8em;
    clear: left;
    float: left;
    text-align: right;
    padding-right: 1em;
}
#frmEnquiry dd{margin: 8px 0 8px 9em;}
#frmEnquiry dd.right{padding-right: 8px;}
#frmEnquiry p{text-align: right;}

/* ~~~ === FORMS ===================================== ~~~ */
.input
{
    font: 12px Arial, Helvetica, sans-serif;
    border: 1px solid #FFCC00;
}
#frmCheckout1 .input,
#frmEnquiry .input{width: 250px;}
.button
{
    font: bold 12px Arial, Helvetica, sans-serif;
    color: #333;
}

/* ~~~ === FORMATING CLASSES =========================== ~~~ */
.hide{display: none;}
.left{text-align: left;}
.center{text-align: center;}
.right{text-align: right;}
.clear{clear: both;}
.note
{
    font-size: 11px;
    font-style: italic;
    padding-left: 24px;
}
/* ~~~ === EDITOR CLASSES ============================== ~~~ */
table.borderedtable
{
    border-collapse: collapse;
}
table.borderedtable thead th
{
    padding: 2px 4px;
    font-size: 11px;
    border: 1px solid #E15845;
    background-color: #991E16;
    color: #FFD51F;
}
table.borderedtable tbody td
{
    font-size: 11px;
    border: 1px solid #E15845;
    padding: 2px 4px;
}
.img-left
{
    float: left;
    margin: 0 12px 4px 0;
}
.img-right
{
    float: right;
    margin: 0 0 4px 12px;
}
.border-none{border: none;}
.border-thin{border: 1px solid #fff;}
.border-thick{border: 2px solid #fff;}