html,body   { margin: 0em; padding: 0; border: 0px dotted black;
              font-family: arial, helvetica, sans-serif;}
body        { background :url("./images/goatee-nixon.jpg") 0 0 fixed no-repeat;
              color: #330; background-color: #cc9}
p, blockquote, th, td, ul, ol, dl, dd, li, dir, menu
             { font : 1rem/1.4 georgia, palatino, serif;}
pre          { font-size: 0.9rem }

div#content {margin: 3em 10% 1em 16em; padding: 0;}
div#sidebar {position: absolute; top: 3em; left: 1em;
             padding: 4px; margin: 0%; width: 13em;
             background-color: rgba(128, 128, 128, 0.5); /* Semi-transparent */
             border: 0px dotted black;}

h1, h2      { font-family: Verdana, Tahoma, "Myriad Web", Syntax, Arial, sans-serif;
              font-weight: lighter; color: #660;
              clear: both ;
            }
h1#title    { font-size: 2.6rem; font-weight: lighter;
              color: #330}
h2#subtitle { margin-top: -1.2em; font-weight: lighter;
              color: #330}


img.thumb   { display:inline; margin-right: 7px;
              padding: 5px; border: solid thin #ff9; }
p#copyright { font-size: 0.9rem; }

a:link      { color: #930; text-decoration: none; font-weight: bold }
h1#title>a  { color: #330; font-weight: lighter;}
h2.entry>a.hint      { color: #930; }
h2.entry>a  { text-transform: lowercase; color: inherit; background: inherit;
              color: #660}

div#sidebar a { color: #ff9; text-decoration: none; font-weight: normal; font-size: 0.9rem; font-family: arial, helvetica, sans-serif;}
div#sidebar a:hover { color: navy; background-color: #fc6; text-decoration: none;}
a:visited   { color: #620; text-decoration: none; font-weight: bold }
a:active    { background: navy; text-decoration: none; font-weight: normal }
a:hover     { color: navy; background-color: #fc6; text-decoration: none }