body
{
    background-color: #CCCCFF;
    background-image: url(../backs/flakes.jpg);
    color: black;
    font-family: "Lucida Sans", Tahoma, sans-serif;
    font-size: 14px;
    margin: 20px 20px 0px 20px;
    max-width: 1024;
}

/*
 * Tables don't seem to inherit settings from the body as expected.
 */
table
{
    font-family: "Lucida Sans", Tahoma, sans-serif;
    font-size: 14px;
}

table.indent
{
    margin: 5px 5px 5px 50px;
    padding: 5px 5px 5px 5px;
    border: 1px solid #8888CC;
    border-collapse: collapse;
}

table.indent tr
{
    border: 1px solid #8888CC;
    border-collapse: collapse;
}

table.indent tr td, table.indent tr th
{
    padding: 3px 7px 2px 7px;
    border: 1px solid #8888CC;
    border-collapse: collapse;
    text-align: left;
    background-color: rgba(221,221,255,0.5);
}

th.left
{
    vertical-align: top;
    text-align: left;
}

h1
{
    background-color: #DDDDFF;
    border-left: 1px dotted #EEEEFF;
    border-top: 1px dotted #EEEEFF;
    border-bottom: 1px solid #8888CC;
    border-right: 1px solid #8888CC;
    font-size: 22px;
    padding: 5px 5px 5px 20px;
}

h2
{
    font-size: 20px;
}

h3
{
    font-size: 18px;
}

h4
{
    font-size: 17px;
}

p
{
    color: black;
    font-family: Lucida Sans, Tahoma, sans-serif;
    font-size: 14px;
}

a.title
{
    font-weight: bold;
}

dt
{
    padding-top: 5px;
    color: blue;
}

dd
{
    padding-bottom: 5px;
}

li
{
    padding-bottom: 5px;
}

div.head
{
    font-size: 16px;
    font-weight: bold;
}

div.navpin
{
    padding: 0px 0px 0px 0px;
    margin: 0px 0px -30px 0px;
    font-size: 12px;
}

div.nav
{
    padding: 20px 5px 20px 5px;
    font-size: 12px;
    text-align: center;
}

#legal
{
    background-color: #BBF;
    border-top: 1px solid #88C;
    color: black;
    font-family: "Lucida Sans", Tahoma, sans-serif;
    font-size: 10px;
    margin: 0px -20px -20px -20px;
    padding: 5px 5px 5px 5px;
}



/*
 * Two column layout.
 */
div.col1of2
{
    width:50%;
    float:left;
}

div.col2of2
{
    width:50%;
    float:right;
}



/*
 * Three column layout.
 */
div.col1of3
{
    width:33%;
    float:left;
}

div.col2of3
{
    width:34%;
    float:left;
}

div.col3of3
{
    width:33%;
    float:right;
}



/*
 * Three column layout for gallery.
 */
div.gallcol
{
    width:33%;
    float:left;
}

div.gallcol2
{
    width:67%;
    float:left;
}

div.gallbox
{
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    text-align: center;
}

div.galltitle
{
    margin: 5px 5px 5px 5px;
    text-align: center;
    font-weight: bold;
}



/*
 * Photos to have a white border and a little padding around them.
 */
img.photo
{
    margin: 5px 5px 5px 5px;
    padding: 5px 5px 5px 5px;
    background-color: #FFF;
    border-width: 0px;
    max-width: 100%;
    height: auto;
}

/*
 * Screenshots to have a tiny grey border and a little padding around them.
 */
img.screenshot
{
    margin: 5px 10px 10px 10px;
    padding: 1px 1px 1px 1px;
    background-color: #888;
    border-width: 0px;
    max-width: 100%;
    height: auto;
}
img.screenleft
{
    margin: 1px 20px 10px 1px;
    padding: 1px 1px 1px 1px;
    background-color: #888;
    border-width: 0px;
    max-width: 100%;
    height: auto;
    float: left;
}
img.screenright
{
    margin: 1px 1px 10px 20px;
    padding: 1px 1px 1px 1px;
    background-color: #888;
    border-width: 0px;
    max-width: 100%;
    height: auto;
    float: right;
}
img.imgright
{
    margin: 1px 1px 10px 20px;
    padding: 0px 0px 0px 0px;
    border-width: 0px;
    max-width: 100%;
    height: auto;
    float: right;
}



/*
 * Pin link style.
 */
dl.link
{
    padding: 0px 20px 5px 20px;
}
dt.link
{
    font-size: 16px;
    font-weight: bold;
}
dt.link span.pin img
{
    vertical-align: top;
}
dt.link span.link
{
    font-size: 14px;
}
dd.link
{
    padding: 0px 0px 5px 0px;
}



/*
 * Compact lists
 */
div.complinks
{
    padding: 5px 20px 5px 20px;
}
span.comppin
{
    vertical-align:top;
}
div.comppin
{
    float: left;
    width: 25%;
}
div.complink
{
    clear: both;
    padding: 1px 0px 1px 0px;
}



/*
 * Layout for news items.
 */
div.news
{
    margin: 10px 40px 10px 40px;
    border: 1px solid black;
    padding: 5px 10px 5px 10px;
    background-image: url(../backs/treads.jpg);
}

div.news span.date
{
    font-weight: bold;
}



/*
 * Layout for suppliers
 */
div.desc
{
    float: left;
    width: 75%;
}
div.features
{
    float: right;
}
div.grey
{
    color: #888;
}
div.grey p
{
    color: #888;
}
div.grey table
{
    color: #888;
}
div.grey a
{
    color: #88F;
}

/*
 * Layout for code blocks
 */
div.mono
{
    margin: 2px 2px 2px 50px;
    padding: 2px 2px 2px 2px;
    background-color: #DDF;
    font-family: monospace;
}

div.code
{
    margin: 2px 2px 2px 50px;
    padding: 2px 2px 2px 2px;
    background-color: #DDF;
    font-family: monospace;
    white-space: pre;
}

div.cmd
{
    margin: 2px 2px 2px 50px;
    padding: 2px 2px 2px 2px;
    font-family: monospace;
    white-space: pre;
}

span.rem
{
    color: #0C0;
}

span.prompt
{
    color: #00F;
}

span.input
{
    color: #000;
    font-weight: bold;
}

span.file
{
    color: #000;
    font-weight: bold;
    font-family: monospace;
}

span.mod
{
    color: #C00;
    font-weight: bold;
}