BODY {
    position: static;
    margin: 0px;
    padding: 0px;
    z-index: 0;
    background-color: #cde;
}

/*
** 'quite-links' : don't underline unless hovering, no special color.
*/
.quiet-links A {
    text-decoration: none;
    color: inherit;
}
.quiet-links A:hover {
    text-decoration: underline;
}

/*
** The little clicky icons for 'edit' and 'delete'.
*/
SPAN.icon A {
    text-decoration: none;
    color: #000;
    padding-right: 0.5em;
}
SPAN.icon IMG {
    border: none;
}

/*
** The header comes at the top of the page. It is the blog title and subtitle.
*/
DIV.topmatter {
    font-family: "Century Gothic",sans-serif;
    margin: 0px;
    padding-bottom: 2px;
    background-color: #99a5b2;
    border-bottom-style: solid;
    border-bottom-color: #7a848e;
    border-bottom-width: 1px;
    color: #000;
    width: 100%;
}

HEADER.pageheader {
  padding: 1em 0.5em 0.5em 1em;
  display: block;
}

HEADER.pageheader DIV.helplink {
  float: right;
}

HEADER.pageheader H1 {
    margin-top: 0px;
    display: inline;
    padding-right: 20px;
}
HEADER.pageheader A {
    color: #000;
}

DIV.columns {
    min-width: 930px;
}

/*
 ** I don't pretend to understand this, but the width:100% and negative right margin, combined with the positive in the following div
 ** makes room for the 200px right hand floated column. The 600px (our 400px minimum plus the 210 for the right hand column keeps 
 ** rendering from getting stupid when things get tight and makes a scroll bar appear
 */
DIV.lefthand {
    width: auto;
    margin-right: 230px;
    margin-top: 1em;
    margin-bottom: 0px;
}

/*
** Articles as shown on the front page and similar
*/
ARTICLE.article {
    margin-top: 1em;    /* match to TABLE.content TD.lefthand padding-right */
    margin-bottom: 1em;
    margin-left: auto;
    margin-right: 0px;
    display: block;
    max-width: 600px;
    min-width: 400px;
}

/*
** The article title is organized with a table.
*/
ARTICLE.article DIV.title {
    border-style: solid;
    border-bottom-style: none;
    border-color: #7e8081;
    border-width: 1px;
    background-color: #bfc2c4;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-box-shadow: 2px 2px 4px #666e77;

    vertical-align: bottom;

    padding-right: 0.25em;
    padding-left: 0.5em;
    padding-top: 0.5em;
    border-spacing: 0px;
}

ARTICLE.article DIV.title H2 {
    display: inline;
    font-family: "Lucida Grande",sans-serif;
    font-size: large;
    font-weight: bold;
}
ARTICLE.article DIV.title A {
    color: #000;
}

ARTICLE.article DIV.title DIV.info {
    float:right;
    text-align: right;
    font-family: sans-serif;
    font-size: small;
}
ARTICLE.article DIV.title DIV.info SPAN.category {
    color: #7e8081;
    padding-right: 0.5em;
}


/* 
** The body of a posting, no ARTICLE.article out front because I use it in the posting preview too 
** No DIV because I put it on the BODY of the IFRAME (otherwise you can get outside it when editing)
*/
.posting-frame {
    border-style: solid;
    border-color: #7e8081;
    border-width: 1px;
    padding-right: 0.5em;
    padding-left: 0.5em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-box-shadow: 2px 2px 4px #666e77;
}
.posting-commentframe {
    border-style: solid;
    border-color: #7e8081;
    border-width: 1px;
    padding-right: 0.5em;
    padding-left: 0.5em;
    padding-top: 0.25em;
    padding-bottom: 0.25em;
    -moz-border-radius-bottomright: 5px;
    -moz-border-radius-bottomleft: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -webkit-border-bottom-left-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-box-shadow: 2px 2px 4px #666e77;
}
.posting {
    position: relative;
    z-index: 2;
    font-family: "Verdana",serif;
    font-size: small;
    background-color: #fafafa;
}
.draft {
    background-image: url(draft.png);
}
.posting A {
    color: #7d7d7d;
}

/*
** Some DIV styles for use inside the postings.
*/
*.posting DIV.code {
    font-family: monospace;
    white-space: pre-wrap;
}

DIV.attachments {
    position: relative; 
    z-index: 1;
    margin-top: -2px;
    margin-left: 1em;
    background-color: #fafafa;
}
DIV.attachments A {
    color: #7d7d7d;
}
DIV.attachments H4 {
    font-family: sans-serif;
    margin-top: 0px;
    margin-bottom: 0px;
}

/*
** This is the 'comment' link at the bottom of the article posting
*/
ARTICLE.article DIV.controls {
    text-align: right;
    font-family: sans-serif;
    font-size: small;
}
ARTICLE.article DIV.controls A {
    color: #6a6e72;
}

/*
** A comment after an article
*/
ARTICLE.article DIV.comment {
    padding-left: 42px;        /* This is what makes comments narrower than postings */
    margin-bottom: 0.5em;
}

ARTICLE.article DIV.comment DIV.info {
    margin-top: 0.5em;
    text-align: right;
    font-family: sans-serif;
    font-size: x-small;
    white-space: nowrap;
}

/*
** The 'older articles' link at the bottom of a screen full of articles
*/
DIV.more-articles {
    margin-bottom: 1em;
    margin-left: 0px;
    margin-right: auto;
    text-align: center;
    font-size: larger;
    font-family: sans-serif;
}
DIV.more-articles A {
    color: #6a6e72;
}

/*
** The copyright notice at the bottom of the screen
*/
FOOTER.fineprint {
    margin-left: 10em;
    margin-right: 10em;
  display: block;
  clear: both;
    text-align: center;
    font-size: smaller;
}

FOOTER.fineprint A {
    color: #6a6e72;
}


/*
** This is the basic form layout table. You see it in 'post' and 'comment' for instance.
*/
TABLE.former {
    margin-top: 1em;
    margin-right: 0px;
    margin-left: auto;
}
TABLE.former TR {
    vertical-align: baseline;
}
TABLE.former TH {           /* Labels out on the left */
    text-align: right;
    font-family: sans-serif;
    white-space: nowrap;
}
TABLE.former TD {
    white-space: nowrap;
}
TABLE.former TD.wrap {
    white-space: normal;
}
TABLE.former TD.description {  /* Instructions out on the right */
    font-size: small;
    opacity: 0.75;
    white-space: normal;
}

/*
** Errors displayed in the former screens
*/
TR.errors {
    color: #c11;
}

/*
** THe top of the search results screen
*/
DIV.search-summary {
    color: #000;
    font-size: large;
    margin-top: 0.5em;
}
SPAN.search-term {
    color: #666;
    font-weight: bold;
}

/*
** The righthand navigation stuff
*/
DIV.righthand {
  float: right;
  margin-right: 1em;
  width: 200px;
  color: #6a6e72;
  font-family: sans-serif;
  font-size: small;
  background-color: #cde;
}

DIV.righthand A {
    color: #6a6e72;
}

DIV.righthand H3 {
    font-size: large;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-bottom-color: #666e77;
    margin-bottom: 0.25em;
    margin-top: 0px;
}

/*
** Archives
*/
TABLE.archives {

}
TABLE.archives TD.year {
    text-align: right;
    font-weight: bold;
}
TABLE.archives TD.month {
}
TABLE.archives TD.count {
    text-align: right;
}

/*
** The browser visitor breakdown
*/
TABLE.browsers TH {
    text-align: right;
}
TABLE.browsers TD {
    text-align: right;
}

/*
** The account creation page
*/
DIV.account {
    margin-top: 1em;
    margin-bottom: 1em;
    width: 640px;
    margin-left:auto;
}

/*
** The new account welcome page
*/
DIV.welcome {
    margin-top: 1em;
    margin-bottom: 1em;
    width: 640px;
}


/*
** The Help page
*/
DIV.help {
    width: 600px;   /* would like max-width, but Firefox 2 and IE 7 don't like that in table cells */
    margin-top: 1em;
    margin-bottom: 1em;
    font-family: "Century Gothic",sans-serif;
}
DIV.help DT {
    margin-top: 1em;
    font-weight: bold;
}


/*
** The WYSIWYG frame for the postings and comments. This is classed with
** a posting-frame to get the right look.
*/
IFRAME.femtoeditor {
    white-space: normal;
    border-style: solid;
    border-width: 1px;
    margin: 0px;
    padding: 0px;
}

/*
** This is the toolbar thing that pops out the top of the IFRAME
*/
DIV.femtoeditor-controls {
    font-size: small;
    padding-right: 0.25em;
    padding-left: 0.25em;
    padding-bottom: 0.25em;
    border-spacing: 0px;
    border-style: solid;
    border-bottom-style: none;
    border-color: #aaa;
    border-width: 1px;
    background-color: #ddd;

    padding-top: 4px;   /* for the A below */

    -moz-border-radius-topright: 5px;
    -moz-border-radius-topleft: 5px;
    -webkit-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-box-shadow: 2px 2px 4px #666e77;
}

DIV.femtoeditor-controls A {
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 4px;
    padding-top: 4px;   /* needs help in the DIV above */
    color: #333;
    text-decoration: none;
}
DIV.femtoeditor-controls A:hover {
    background-color: #bbb;
}

DIV.femtoeditor-controls A:active {
    background-color: #aaa;
}

/*
** Sometimes I need a debug area, this would be it.
*/
PRE.debug {
  margin-top: 0px;
  font-size: smaller;
  white-space: pre-wrap;
}


/*
** A DIV to cover the screen when displaying a modal popup div
*/
DIV.clipper {
    overflow: hidden;
    position: absolute;
    z-index: 99;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
}

DIV.blocker {
    width: 100%;
    height: 100%;
    opacity: .5;
    filter: alpha(opacity=50); 
    background-color: #333;
}

DIV.modal {
    position: absolute;
    display: none;
    border-style: solid;
    border-width: 1px;
    border-color: #000;
    z-index: 100;
    background-color: #fafafa;
    padding: 0.5em;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -webkit-box-shadow: 2px 2px 8px #666;
}

/*
** This is ghastly, but until I think up something nicer I need a 
** way to edit the properties of A and IMG tags in the editor.
*/
DIV.property-editor {
    font-size: large;
    font-family: sans-serif;
    position: relative;
}

DIV.property-editor TABLE {
    padding: 0;
    border-style: none;
    border-spacing: 0.25em;
    border-collapse: collapse;
}
DIV.property-editor TABLE TD {
    border-style: none;
}