html
{
    /*This is needed in order to force the scroll bar to appear on the right
      even when the page content would vertically fit in the page---otherwise
      the centering would depend on whether the page has a scrollbar or not.*/
    height: 101%;
}

body
{
    margin: 0;
    padding: 0;
    font: 90% Lucida Grande,Lucida Sans,Arial,sans-serif;
    color: #333;
}

p.code
{
    font-family: monospace;
    margin-top: 10px;
    margin-bottom: 10px;
}

.column1 {
    text-align: left;
    width: 31%;
    float: left;
}

.column2 {
    text-align: left;
    width: 32%;
    float: left;
    padding-left: 3%;
    padding-right: 3%;
}

.column3 {
    text-align: left;
    width: 31%;
    float: left;
}

h1
{
    font: 175% sans-serif;
    color: orange;
}

h2
{
    font: 125% sans-serif;
    font-variant: small-caps;
    /*font-weight: bold;*/
    color: orange;
}

h3
{
    font: 110% sans-serif;
    font-variant: small-caps;
    /*font-weight: bold;*/
    color: orange;
}

h4
{
    font: 90% Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-variant: small-caps;
    /*font-weight: bold;*/
    color: #666;
    margin-bottom: 0px;
    padding-bottom: 0;
    margin-top: 0px;
    padding-top: 0;
}

a
{
    color: #00f;
    text-decoration: none;
}

a:hover 
{
    text-decoration: underline;
}

.warning
{
    color: orange;
}

.clean
{
    color: green;
}

.error
{
    color: red;
}


th
{
    background-color: orange;
    color: #000;
    font-variant: small-caps;
    /*font-weight: bold;*/
}

tr.odd
{
    background-color: #fff;
}


tr.even
{
    background-color: #eee;
}


#container
{
    margin: 0em auto;
    max-width: 1000px; 
    text-align: left;
    background: #fff;
}

#header
{
    min-height: 67px;
    width: 100%;
    position: relative;
    background: url(../images/header.png) repeat 0 0;
    border-bottom: 1px solid #aaa;
    padding-top: 15px;
}

#header h1
{
    text-align: center;
}

#menu
{
    float: left;
    width: 150px;
    padding: 15px;
}

#menu a
{
    color: #666; text-decoration: none;
}

#menu a:hover
{
    text-decoration: underline;
}

#menu ul
{
    margin: 1em 0;
    padding: 0;
}

#menu ul li
{
    margin: 0 0 1em;
    padding: 0;
    list-style-type: none;
}

#menu ul li.current
{
    color: #aaa;
}

#menu ul li:before
{
    color: orange;
    content: "> ";
}

#contents
{
    float: right;
    width: 750px;
    padding: 15px;
    text-align: justify;
}

#contents img.floatright
{
    float: right;
    margin: 0px 0px 0px 50px;
}

#contents img.floatleft
{
    float: left;
    margin: 0px 50px 0px 0px;
}

#contents span.date
{
    font: 90% Lucida Grande,Lucida Sans,Arial,sans-serif;
    font-variant: small-caps;
    color: #666;
}

#contents span.date:before
{
    color: #666;
    content: "[";
}

#contents span.date:after
{
    color: #666;
    content: "]";
}

#contents font.emph
{
    color: #ff8800;
}

#contents ul
{
    margin: 1em 0;
    padding: 0;
}

#contents ul li
{
    margin: 0 0 0.75em;
    padding: 0;
    list-style-type: none;
}

#contents ul li:before
{
    content: "";
}

#footer
{
    margin: 0em auto;
    max-width: 1000px; 
    clear: both;
    text-align: center;
    font-size: 83%;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 25px;
    border-top: 1px solid #ccc;
}

#footer a:link    { text-decoration: none; }
#footer a:hover   { text-decoration: underline; }