/********************************************* general */

body
{
    background-image: url(../style/pic/back.gif);
    background-repeat: repeat-y;
    background-color: rgb(204,158,153);
    padding: 0;
    margin: 0;
}

span,div,p,h1,h2,h3,h4,h5,h6,body,ul,ol,li
{
    font-family: "news gothic mt", "century gothic", arial, sans-serif;
}

a:link
{
    text-decoration: underline;
}

/********************************************* tophead */

#tophead
{
    position: absolute;
    left: 20px;
    top: 8px;
    width: 110px;
    height: 181px;
    padding: 0;
    margin: 0;
    color: rgb(178,98,98);
    text-align: left;
}

#tophead a,#tophead img
{
    border: none
}

/********************************************* header */

.header
{
    background-image: url(../style/pic/header.gif);
    background-repeat: repeat-x;
    color: rgb(126,91,91);
    font-size: 21px;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0;
    padding: 0;
    position: absolute;
    left: 150px;
    top: 12px;
    height: 40px;
}

/********************************************* h1-6 */

h1
{
    margin: 0;
    padding: 0;
    font-size: 20px;
}

h2
{
    font-size: 18px;
    padding-top: 9px;
    padding-left: 16px;
}

h3
{
    background-image: url(../style/pic/h3.gif);
    background-repeat: repeat-x;
    padding-bottom: 10px;
    text-align: right;
    width: 100%;
    font-weight: bold;
    font-size: 19px;
}

h4
{
    font-size: 17px;
}

h5
{
    font-weight: normal;
    font-style: italic;
}

h1, h2, h3, h4,
h1 a
{
    color: rgb(147,105,104);
}

/********************************************* links */

.textual p a,
.textual ul a
{
    text-decoration: underline;
}

.textual p a,
.textual ul a,
.textual ol a,
#last a
{
    color: rgb(36,11,11);
}

.textual .note a
{
    color: rgb(109,61,61);
}

.textual p a:active,
.textual ul a:active,
.textual ol a:active,
#last a:active
{
    color: #000;
}

h3 a:link,
h3 a:visited, h3 a:hover,
h4 a:link,
h4 a:visited, h4 a:hover,
h5 a:link,
h5 a:visited, h5 a:hover,
h6 a:link,
h6 a:visited, h6 a:hover,
.header a,
.note a
{
    text-decoration: underline;
    color: rgb(147,105,104);
}

h3 a:active,
h4 a:active,
h5 a:active,
h6 a:active,
.header a:active,
.note a:active
{
    text-decoration: underline;
    color: #000;
}

.header a
{
    font-weight: normal;
}

.label span a
{
    color: rgb(126,91,91);
    font-size: 16px;
}

.label span a:active
{
    color: #000;
}

.navig a:link,
.navig a:visited
{
    color: rgb(218,218,208);
}

.navig a:active
{
    color: #fff;
}

.header a
{
    text-decoration: underline;
}

.navig a
{
    text-decoration: none;
}

.label a
{
    text-decoration: none;
}

.picture a,
.picture a img,
.advertisement a,
.advertisement a img
{
    border: none;
    color: rgb(126,91,91)
}

/********************************************* Label */

.label
{
    position: absolute;
    left: 0;
    width: 150px;
    height: 30px;
    background-image: url(../style/pic/label.gif);
    background-repeat: no-repeat;
    visibility: visible;
}

.label span
{
    margin: 0;
    padding: 0;
    text-align: right;
    width: 150px;
    padding-left: 69px;
    padding-right: 17px;
    padding-top: 6px;
    padding-bottom: 7px;
    font-weight: bold;
    color: rgb(126,91,91);
    margin-top: 1px;
    visibility: visible
}

#lblbasic   { top: 210px }
#lblgoodies { top: 250px }
#lbldesign  { top: 290px }
#lbltech    { top: 330px }
#lbllinks   { top: 370px }
#lblemail   { top: 410px }

/********************************************* Navig */

.navig
{
    position: absolute;
    left: 150px;
    top: 60px;
    padding: 0;
    margin: 0;    
    background-image: url(../style/pic/navig.gif);
    background-repeat: no-repeat;
    color: rgb(245,220,210);
    letter-spacing: -1px;
    font-weight: bold;
    width: 200px;
    height: 400px;    
    visibility: visible;
}
#illust
{
    text-align: center;
    padding: 30px;
    padding-bottom: 10px;
    margin: 0;
    display: block;
}
#emptyillust
{
    padding-bottom: 190px;
    display: block;
}

/********************************************* Content */

.content
{
    margin: 0;
    padding: 0; 
    padding-top: 21px;
    margin-left: 360px;
    margin-top: 74px;
    background-image: url(../style/pic/ubar.gif);
    background-repeat: repeat-x;
    background-color: rgb(220,209,201);
}

.textual
{
    background-color: rgb(220,209,201);
    background-image: url(../style/pic/sbar.gif);
    background-repeat: repeat-y;
    color: rgb(36,11,11) /* #000 */;
    padding-bottom: 30px;
    padding-left: 9%;
    padding-right: 3%;
    position: relative;
    left: -3px
}

.textual p
{
    background-image: none;
    padding: 0;
    margin: 0;
    margin-right: 5%;
}

.lowerbar
{
    padding: 0;
    margin: 0;
    font-size: 15px;
    background-image: url(../style/pic/lbar.gif);
    background-repeat: repeat-x;
    height: 18px;
    padding-bottom: 20px;
    display: none
}

/********************************************* picture */

.picture
{
    color: rgb(147,105,104);
    font-weight: bold;
    width: 350px;
    position: absolute;
    background-image: none;
    left: 20px;
    top: 500px;
    padding-bottom: 2px;
    visibility: visible;
}

.picture p
{
    margin: 0;
    padding: 0;
    padding-top: 15px;
    padding-bottom: 5px;
}

.picture p.picText
{
    margin-left: 30px;
    margin-right: 40px;
    color: rgb(97,55,54);
    font-size: 14px;
}

.picture p.picTitle
{
    height: 33px;
    margin-left: 40px;
    margin-right: 40px;
    margin-top: -20px;
    padding-top: 7px;
    padding-left: 10px;
    font-size: 14px;
    font-style: italic;
    color: #000;
    font-weight: normal;
    background-image: url(../style/pic/pictitle.gif);
    background-repeat: no-repeat;
}

.picTitle a:link, .picTitle a:visited, .picTitle a:hover, .picTitle a:hover
{
    color: #000;
}

#singlelowered
{
    padding-top: 500px;
}

#multilowered
{
    padding-top: 260px;
}

/********************************************* formatting */

em
{
    font-style: normal;
    font-weight: bold;
}

strong
{
    font-weight: bold;
}

kbd
{
    font-size: 16px;
    font-family: fixedsys, monospace;
}

div.txt,
.txt
{
    background-color: rgb(234,234,234);
    background-image: url(../style/pic/notepad.gif);
    background-repeat: no-repeat;
    padding: 10px;
    padding-left: 14px;
    padding-top: 50px;
    padding-bottom: 30px;    
    color: #000;
    margin-top: 15px;
    margin-bottom: 15px;
}

pre
{
    background-color: rgb(235,229,227);
    padding-left: 20px;
    padding-bottom: 20px;
}
pre code
{
    font-size: 11px;
    font-family: monospace;
    background: none;
    color: #000;
}

.footnote
{
    font-size: 14px;
}

.note
{
    background-image: url(../style/symbol/ref.gif);
    background-repeat: no-repeat;
    padding-left: 50px;
    font-style: italic;
}

.note kbd
{
    font-style: normal;
}

.smallprint
{
    font-size: 16px;
}

/********************************************* lists */

.navig li
{
    list-style-type: square;
    list-style-image: url(../style/pic/listb.gif);
    padding-bottom: 10px;
    color: rgb(218,218,208);
}

li.inlinelink,
.inlinelink li
{
    list-style-image: url(../style/pic/listbin.gif);
}

li.relatedlink,
.relatedlink li
{
    list-style-image: url(../style/pic/listbrel.gif);
}

li.levellink,
.levellink li
{
    color: #fff;
    list-style-image: url(../style/pic/listblvl.gif);
}

.navig ul
{
    margin-bottom: 200px;
}

.content ul
{
    list-style-type: square;
    list-style-image: url(../style/pic/lista.gif);
}

.content ul a:link,
.content ul a:visited,
.content ul a:active
{
    color: rgb(56,21,21);
}

.content li
{
    margin-bottom: 6px;
}

.navig ul
{
    margin-top: 0;
    padding-top: 0;
    padding-left: 25px;
    padding-right: 25px;
    font-size: 16px;
}

/********************************************* lower elements */

#last
{
    background: url(../style/pic/last.gif);
    background-repeat: no-repeat;
    font-size: 18px;
    text-align: center;
    color: rgb(36,11,11);
    width: 400px;
    height: 40px;
    padding: 4px;
    padding-top: 8px;
    padding-bottom: 10px;
    margin-top: 20px;
    margin-left: 200px;
    margin-bottom: 20px;
}

#lastnoback
{
    font-size: 18px;
    text-align: center;
    color: rgb(36,11,11);
    width: 400px;    
    height: 70px;
    padding: 4px;
    padding-bottom: 10px;
    margin-top: 20px;
}

.advertisement
{
    position: relative;
    visibility: visible;
}

/********************************************* list-style-imagery */

li.tutorial
{
    list-style-image: url(../style/pic/list_image/tutorial.gif);
}

li.package
{
    list-style-image: url(../style/pic/list_image/package.gif);
}

li.file
{
    list-style-image: url(../style/pic/list_image/file.gif);
}

li.source
{
    list-style-image: url(../style/pic/list_image/source.gif);
}

/********************************************* misc */

.reftxt
{
    position: absolute;
    left: 30px;
    top: 30px;
    width: 160px;
    height: 120px;
    color: rgb(126,91,91);
    font-size: 17px;
    background-image: url(../style/pic/popup.gif);
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    padding-left: 18px;
    padding: 10px;
    padding-right: 60px;
    border: 1px;
    border-style: none;
    visibility: hidden;
}

.reftxt p
{
    text-align: center;
    padding-bottom: 100px;
}

p.continue
{
    text-align: right;
    padding-top: 30px;
    width: 100%;
    font-style: italic;
}

#lnote
{
    visibility: hidden;
    color: rgb(225,140,140);
    font-size: 1px;
    width: 10px;
    height: 10px;
}

.longvers
{
    visibility: hidden;
    font-size: 1px;
    color: rgb(245,220,210);
}

#surround
{
    position: absolute;
    left: 88%;
    top: 20px;
    width: 6%;
    height: 100px;
    color: rgb(195,90,90);
    visibility: visible;
}

br
{
    margin: 6px;
    height: 6px;
}

.comment
{
    font-size: 14px;
}

.note
{
    color: rgb(109,61,61);
}

#announce
{
    position: absolute;
    font-family: "news gothic mt", "century gothic", arial, sans-serif;
    left: 30px;
    top: 30px;
    font-size: 14px;
    font-weight: bold;
    padding: 14px;
    background-image: url(../style/pic/announce.gif);
    background-repeat: no-repeat;
    width: 256px;
    height: 65px;
    vertical-align: middle;
}

#announce a
{
    color: #000;
}

ul ul li
{
    list-style-image: none;
    list-style-type: disc;
}

ul.advantage
{
    list-style-image: url(../style/pic/list_plus.gif);
}

ul.disadvantage
{
    list-style-image: url(../style/pic/list_minus.gif);
}