style.css

/* This resets all elements */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
table {border-collapse:separate;border-spacing:0;padding:0;margin:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a img {border:none;}

/* Actual stylesheet begins here */

a 
    { 
    color: #336699; 
    font-size: 12pt; 
    font-family: sans-serif; 
    text-decoration: none; 
    }

p { font-size: 12pt; font-family: sans-serif; text-indent: 0px; padding: 2px;}

table { font-size: 12pt; font-family: sans-serif; text-indent: 0px; padding: 2px;}

ul 
  { font-size: 12pt; font-family: sans-serif; padding-bottom: 10px; text-indent: 0px;  }
ol { font-size: 12pt; font-family: sans-serif; padding-bottom: 10px; text-indent: 0px;  }


#features
{
margin-left: 30px;
}


ol { display: table; font-size: 12pt; }
ol li { margin-left: 30px; }

code 
{ 
font-family: monospace; 
font-size: 12pt; 
}


#main { width:800px; margin:0 auto; padding: 0px 0px 0px 0px;}

.rounded { }

.full { width:800px; float:left; }
.three-quarter { width:550px; float:left; }
.half { width:400px; float:left; }
.quarter { width:200px; float:left; }
.spacer { width:50px; float:left; }


#navbar 
    { 
    float:left;
    width: 150px; 
    text-align: left; 
    background: #5081AA; 
    padding:10px 5px 10px 20px; 
    margin-top: 10px; margin-bottom: 10px; 
    font-size: 140%;  
        -moz-box-shadow: 1px 1px 1px #999;
        -webkit-box-shadow: 1px 1px 1px #999;
        box-shadow: 1px 1px 1px #999;
    }
#navbar a { font-size: 14pt; color: #000055; text-decoration: none; }
#navbar a.thispage { color: #fff; }
#navbar ul { display: table; }
#navbar ul li { display: table; }

#banner { width:200px; float:left; margin:0px; margin-left: 20px; padding-top:30px; }
#banner img { width:460px; }

#rightbar
    {
    float: right;
    }

#download 
    { 
    width: 210px;
    font-size: 12pt; 
    font-family: sans-serif; 
    background: #FFDC75;
    padding: 10px 10px 14px 12px;
    margin-left: 15px;
    margin-right: 0px;
    -moz-box-shadow: 1px 1px 1px #999;
    -webkit-box-shadow: 1px 1px 1px #999;
    box-shadow: 1px 1px 1px #999;
    }
#download h4 { color: black; }
#download a { color: #CD2626; text-decoration: none;}
#download ul { display: table; color: #CD2626; margin-bottom:0px; padding-bottom:0px; }
#download ul li { display: table; padding-left: 20px; color: #CD2626; }


#latest 
    { 
    width: 230px;
    font-size: 12pt; 
    font-family: sans-serif; 
    background: #FFFFFF;
    padding: 10px 0px 10px 0px;
    margin-left: 15px;
    margin-right: 0px;
    }
#latest h2 
    { 
    width: 100%;
    color: white; 
    background: #5081AA; 
    padding:2px 0px 2px 0px;
    text-align: center; 
    margin: 2px 0px 10px 0px;
    font-size: 120%;
    font-family: sans-serif;
    -moz-box-shadow: 1px 1px 1px #999;
    -webkit-box-shadow: 1px 1px 1px #999;
    box-shadow: 1px 1px 1px #999;
    }
#latest h4 { color: black; }
#latest ul 
    { 
    list-style-type: disc;
    margin-left: 15px;
    }
#latest ul li 
    { 
    list-style-type: disc;
    margin-bottom: 4px;
    }

.section 
    { 
    width: 782px;
    background: #5081AA; 
    padding:0px 10px 0px 10px;
    text-align: center; 
    margin: 0px 10px 10px 0px;
    font-size: 140%;
    font-family: sans-serif;
    -moz-box-shadow: 1px 1px 1px #999;
    -webkit-box-shadow: 1px 1px 1px #999;
    box-shadow: 1px 1px 1px #999;
    }
.section h2 { color: #fff; }
.section #nav  
{ 
font-size: 72%;
color: #fff;
}
.section #nav a 
{ 
color: #fff; 
text-decoration: underline;
}


img.centered
    {
    margin-left: auto;
    margin-right: auto;
    display: block;
    }

img.diagram 
    { 
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
    display: block;
    }

#levels 
    { 
    width: 600px; 
    margin-left: 70px;
    margin-right: auto;
    margin-bottom: 10px;
    display: block;
    }

img.arrow 
    {
    width: 11px;
    margin-right: 2px;
    margin-bottom: 0px;
    }
 
.module
    {
    width:372px;
    background: #ddd; 
    padding: 12px 12px;
    margin: 0px 0px 10px 0px;
    font-size: 120%;
    border: 0px;
    -moz-box-shadow: 1px 1px 1px #999;
    -webkit-box-shadow: 1px 1px 1px #999;
    box-shadow: 1px 1px 1px #999;
    }
.module img
    {
    -moz-box-shadow: 2px 2px 2px #999;
    -webkit-box-shadow: 2px 2px 2px #999;
    box-shadow: 2px 2px 2px #999;
    }
.lmodule { float:left; }
.rmodule { float:right; }

code 
    { 
    padding: 2px;
    border-style: solid;
    border-width: 1px;
    border-color: #ddd;
    }

.screenshot
    {
    float: left;
    width:780px;
    background: #eee;
    border-style: solid;
    border-width: 2px;
    border-color: #ddd;
    padding: 10px 10px;
    margin: 0px 10px 10px 0px;
    }
.screenshot h2 { font-family: sans-serif; font-weight: bold; padding: 0px 0px 10px 0px; }
.screenshot h3 { font-family: sans-serif; padding: 0px 0px 10px 0px; }
.screenshot ul { font-family: monospace; display: table; }
.screenshot ul li { display: table; }
.screenshot a { font-family: monospace; }
.screenshot pre { font-family: monospace; font-size: 120%; }

#contribtable
{
width: 800px;
}
#contribtable td.icon
{
width: 20%;
padding-top: 10px;
padding-left: 40px;
padding-right: 0px;
}
#contribtable td.descrip
{
padding: 0px;
}
#contribtable img
{
width: 32px;
padding-right: 4px;
vertical-align: middle;
}

.contributor
{
font-size: 12pt; 
font-family: sans-serif; 
text-indent: 0px;
padding-top: 20px;
}
.contributor img
{
width: 32px;
padding-right: 4px;
vertical-align: middle;
}
.contributor i
{
padding-right: 4px;
}

.docs 
{ 
font-family: sans-serif; 
font-size: 100%; 
width: 90%; 
}
.docs a { font-size: 100%; color: #336699; }
.docs .github 
{ 
outline: solid 1px;
outline-color: #ddd;
color: #336699; 
padding: 1px;
}
.docs h1 
{ 
font-size: 160%; 
font-weight: bold; 
margin-top: 30px; 
margin-bottom: 8px; 
}
.docs h1 a { font-size: 100%; font-weight: bold; margin-bottom: 20px; }

.docs h2 
{ 
font-size: 120%; 
font-weight: bold; 
margin-top: 30px; 
margin-bottom: 8px; 
}
.docs h2 a { font-size: 100%; font-weight: bold; margin-bottom: 20px; }
  
.docs h3 
  { 
  font-weight: bold; 
  font-style: italic;
  margin-top: 8pt; 
  margin-bottom: 8pt; 
  }
.docs h3 a 
  { 
  font-weight: bold; 
  margin-bottom: 8pt; 
  margin-top: 8pt; 
  }

.docs em 
    { 
    font-style: italic; 
    text-decoration: none;
    }
.docs p 
    { 
    margin-bottom: 5px;
    margin-left: -1px;
    text-indent: 0px;
    }
.docs ul
   {
   padding-bottom: 2px;
   margin-bottom: 0px;
   }
.docs ul li
   {
   margin-top: 2px;
   }
.docs ul p
    {
    margin-bottom: 2px;
    text-indent: 0px;
    }
.docs ol p
    {
    margin-bottom: 2px;
    text-indent: 0px;
    }
.docs code 
    { 
    font-family: 'Inconsolata',monospace;  
    font-weight: normal;
    border-style: solid;
    border-width: 1px;
    border-color: #ddd;
    background-color: #fff;
    padding-left:2px;
    padding-right:2px;
    }

.docs .article_title
    {
    padding: 0px;
    margin: 0px;
    font-size: 140%;
    font-weight: bold;
    }

.docs .article_sig
    {
    font-size: 90%;
    font-style: italic;
    }

.docs .highlight
{
font-family: 'Inconsolata',monospace;
margin-bottom: 15px;
padding-top: 8px;
padding-left: 4px;
padding-bottom: 8px;
}

/*
.docs pre code
    { 
    display:block;
    font-family: monospace,monospace; 
    font-weight: normal;
    background-color:#eee;
    overflow:auto;
    padding-left: 5px;
    margin: 10px;
    width:auto;
    -moz-box-shadow: 1px 1px 1px #999;
    -webkit-box-shadow: 1px 1px 1px #999;
    box-shadow: 1px 1px 1px #999;
    }
    */

.docs .commandline
{
margin-bottom: 15px;
padding-top: 8px;
padding-left: 4px;
padding-bottom: 8px;
font-family: 'Inconsolata',monospace;
font-size: 12pt;
border-style: solid;
border-width: 1px;
border-color: #ddd;
}

.docs pre code
    { 
    font-weight: normal;
    font-family: 'Inconsolata',monospace;
    background-color:#ddd;
    display: block;
    border: 1px solid black;
    padding: 10px;
    margin: 4px;
    }

.docs ul { display: table; list-style: square; }
.docs ul li { margin-left: 30px; }
.docs ul ul { display: table; list-style: circle; }
.docs img.arrow 
    {
    width: 11px;
    margin-right: 2px;
    margin-bottom: 0px;
    }
.docs img.icon 
    {
    width: 18px;
    padding-right: 4px;
    vertical-align: middle;
    }
.docs img.largeicon 
    {
    width: 24px;
    padding-right: 2px;
    vertical-align: middle;
    }

.docs .example_clicker
    {
    color: #336699; 
    cursor: pointer;
    padding-left: 14px;
    padding-bottom: 10px;
    background-image: url('link_arrow.png');
    background-repeat: no-repeat;
    background-position: 0% 25%;
    background-size: 12px;
    }

#footer { width: 800px; margin-bottom: 50px; float: left; }

.newsitem
    {
    float:left;
    width:780px;
    background: #ddd; 
    padding: 10px 10px;
    font-family: sans-serif;
    font-size: 100%;
    margin: 0px 10px 10px 0px;
    border: 0px;
    }
.newsitem h3 { font-size: 140%; font-family: sans-serif; padding: 0px; margin: 0px; }
.newsitem h2 { font-family: sans-serif; padding: 0px 0px 0px 0px; margin: 0px;}
.newsitem img { float: left; padding: 10px; }
.newsitem ul { margin-left: 30px;}
.newsitem ul li { list-style-type: square; margin-bottom: 4px; }
.newsitem p { padding: 10px; text-indent: 0px; }
.newsitem a { color: #900; }


#people
{
width: 100%;
}
#people td
{
padding: 10px;
padding-bottom: 15px;
}
#people td.name
{
width: 50%;
padding: 1px;
}
#people td.descrip
{
padding: 40px;
}
#people img
{ 
border: solid gray 1px; 
padding: 1px;
display: block;
margin-left: auto; 
margin-right: auto;
}

#codes
{
width: 800px;
}
#codes td
{
padding: 1px;
vertical-align: top;
}
#codes td.name
{
width: 20%;
padding: 1px;
font-weight: bold;
}
#codes td.contrib
{
width: 25%;
padding: 1px;
}
#codes td.descrip
{
padding-bottom: 40px;
vertical-align: top;
}