/* = RESETS AND BASIC INITIALIZATIONS
----------------------------------------------------------------------------------------------------------------------*/
blockquote, body, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, li, ol, pre, ul, p, td, th {

    margin: 0;
    padding: 0;
    position: relative;

}

/* transform the font size so that 1em is 10px so that you can use em's
but think in pixels as now 1em is 10px, 1.2em is 12px and so on */
html { font-size: 62.5% }

body {

    background-color: #fff;
    text-align: center; /* this is done so that IE6 will center the main wrapper */

}

a img { border:none }

div.hr {

    background: #ddd;
    color: #ddd;
    clear: both;
    float: none;
    width: 100%;
    height: .1em;
    margin: 0 0 .5em;
    border: none;
    overflow: hidden;

}

/* = TYPOGRAPHY
----------------------------------------------------------------------------------------------------------------------*/
h1,h2,h3,h4,h5,h6 { font-weight: normal }

/* set body font size to 12px. next declarations are percentual relative to this */
body    { font-family: arial, tahoma, verdana, sans; font-size: 140%; color: #222; background-color: #d4d0c8 }
h1      { font-size: 220%; margin: 0 0 .5em }
h2      {
    font-size: 200%;
    margin: .5em 0 .5em;
    background-image: url('../images/separator.jpg');
    background-repeat: no-repeat;
    background-position: center bottom;
    padding-bottom: .5em;
    z-index: 1px;
}
h3      { font-size: 180%; margin: 0 0 .5em }
h4      { font-size: 160%; margin: 0 0 .5em }
h5      { font-weight: bold; font-size: 140%; margin: 0 0 .5em }
h6      { font-weight: bold; font-size: 120%; margin: 0 0 .5em }
p       { font-size: 100%; margin: 0 0 .5em; line-height: 1.6em }
small,
sup,
sub     { font-size: 80% }

/* = FLOATS
----------------------------------------------------------------------------------------------------------------------*/
.left   { float: left }
.right  { float: right }
.clear  { clear: both }

/* = LINKS
----------------------------------------------------------------------------------------------------------------------*/
a:link      { color: #446D8C }
a:visited   { color: #446D8C }
a:hover     { color: #362C23 }
a.active    { color: #446D8C }
a           { text-decoration: underline }

/* = TABLES
----------------------------------------------------------------------------------------------------------------------*/
table           { border-collapse: collapse; border-spacing: 0 }
table caption   { text-align: left; font-size: 180%; margin-bottom: .5em }
table tr.even   { background-color: #dedede }
table tr th     { background-color: #669999; font-weight: bold; color: #fff }
table tr th,
table tr td     {  }

/* = LISTS
----------------------------------------------------------------------------------------------------------------------*/
ul, ol          { }
ul li,
ol li           { }
ul li ol,
ol li ul        { }

ul.notype,
ol.notype       { list-style-type: none }
ul.notype li,
ol.notype li    { }

ul.float,
ol.float        { }
ul.float li,
ol.float li     { float: left }
ul.float li a,
ol.float li a   { display: block; float: left } /* float: left is for IE6 */

/* = MISCELLANEOUS
----------------------------------------------------------------------------------------------------------------------*/
h1      { overflow: hidden }                                    /* for images as links to home page in h1 */
h1 a    { height: 100%; display: block; text-indent: -9000px }

.first      { margin-left: 0; padding-left: 0 }
.last       { margin-right: 0; padding-right: 0 }
.top        { margin-top: 0; padding-top: 0 }
.bottom     { margin-bottom: 0; padding-bottom: 0}
.hide       { display: none }
.removed    { background: #900; color: #fff; padding: 4px }
.added      { background: #050; color: #fff; padding: 4px }
.highlight  { background: #ccf }
.inline     { display: inline }

/* = MAIN WRAPPER
----------------------------------------------------------------------------------------------------------------------*/
#main-wrapper {

    margin: 0 auto;
    text-align: left;
    width: 960px;
    background-color: #fff;

}

/* = HEADER
----------------------------------------------------------------------------------------------------------------------*/
#header { background-image: url('../images/header.jpg'); width: 960px; height: 150px; text-align: center; z-index: 1 }
#header h1 {
    position: absolute;
    background-image: url('../images/logo.jpg');
    left: 76px;
    top: 26px;
    width: 173px;
    height: 98px;
}
#header ul { position: absolute; bottom: 0; left: 260px }
#header ul li { margin-right: .7em }
#header ul li a {
    background-color: #525252;
    padding: 12px 30px 12px 30px;
    text-decoration: none;
    color: #fff;
    border-bottom: 2px solid #362C23
}
#header ul li a.selected,
#header ul li a:hover {
    background-color: #fff;
    color: #000;
    border-bottom: 2px solid #fff
}

#header div.slogan { position: absolute; font-size: 11px; color: #fff; top: 75px; left: 120px; text-align: left }
#header div.slogan a { color: #fff; text-decoration: none }

/* = CONTENT
----------------------------------------------------------------------------------------------------------------------*/
#inner { padding: 0 1.5em 1.5em 1.5em }

#inner h2 a { text-decoration: none; color: #92370B }

#inner img.thumbnail {

    border: 1px solid #888;
    float: left;
    margin-right: 10px;

}

#inner table tr td.thumbnail {

    width: 202px;

}

#inner ul#order-images li { margin-bottom: 10px; border-bottom:1px solid #dedede; padding-bottom: 10px }
#inner ul#order-images li img { border:1px solid #888 }
#inner ul#order-images li span {
    width: 16px;
    height: 16px;
    background-image: url('../images/handlem.gif');
    display: block;
    float: left;
    cursor: move;
}

#inner div.description { width: 490px; margin-right: 10px }
#inner div.images { width: 414px }
#inner div.images img { border:1px solid #888; float: left; margin: 10px 10px 0 0 }
#inner div.images img.top { margin-top: 0 }
#inner div.images img.right { margin-right: 0 }

#inner table tr td.details { width: 250px; padding-right: 10px }
#inner table tr td.details a { text-decoration: none; font-weight: bold }
#inner table tr td.details p { margin: 0  }

.rating { background-image: url('../images/star-matrix.gif'); background-repeat: no-repeat; height: 15px }
.r0 { background-position: 0 0px }
.r1 { background-position: 0 -15px }
.r2 { background-position: 0 -30px }
.r3 { background-position: 0 -45px }
.r4 { background-position: 0 -60px }
.r5 { background-position: 0 -75px }

#inner div.comment { padding: 10px; margin-bottom: 10px }
#inner div.odd { background-color: #eee; }
#inner div.admin { background-color: #aabbcc; }

#roar { display: none }


div.spiderlinks { background-color: wheat; text-align: center; }
div.spiderlinks table { margin: 0 auto; text-align: left }

/* = FOOTER
----------------------------------------------------------------------------------------------------------------------*/
#footer {

    border-top: 32px solid #000;
    background-image: url('../images/footer.jpg');
    height: 230px;
    padding: 10px;
    color: #fff;

}
#footer div.block { width: 216px; margin-right: 15px }
#footer span { font-size: 11px; margin: 0; padding: 0;  }
#footer p { font-size: 11px; color: #fff; }
#footer h4 { font-size: 14px; color: #f3f3f3; font-weight: normal; }
#footer a { font-size: 11px; text-decoration: none; font-weight: bold }
#footer a:hover { color: #fff }
#footer div.image { width: 71px }
#footer div.image img { border: 2px solid #484848 }
#footer div.description { width: 140px; margin-left: 5px; color: #fff; font-size: 11px }
#footer div.comment { width: 216px; color: #fff; font-size: 11px; margin-bottom: 15px }

#footer div.copyright { position: absolute; right: 10px; bottom: 10px }

/* = MOOTIPS
----------------------------------------------------------------------------------------------------------------------*/
.tooltips               { text-align: left }

.tooltips .tip          { background-color: #ffffcc; border: 1px solid black }

.tooltips .tip-title    { padding: 2px; background-color: #000000; color: #ffffff; font-weight: bold; font-size: 15px }

.tooltips .tip-text     { padding: 5px }