/*     This is the style Sheet for the home page of saundby.com
    It's not a template, don't use it unless you have my permission.
    Thanks.
    -Mark Graybill, August 2009
*/

/* Basics */

html { margin: 0; padding: 0; }

body {
    margin: 0;
    padding: 0;
    background-color: #78d0ff; 
    color: #fff393;
    line-height: 120%;
    font-family: Futura, Optima, Geneva, Gill Sans, monospace;
    letter-spacing: 0.12em;
    text-align: left;
    width: 100%;
    min-width: 1000px;
}

img {
    margin: 5px;
    border-width: 1px;
}

h1 {
    color: #383838;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing: normal;
    text-align: left;
    padding: 0.5em 0em 0.1em 0.2em;
    margin: 0 0 0 0;
}

h2 {
    letter-spacing: 0.15em;
    font-style: italic;
    text-align: center;
}

a:link { color: #0077ff; }
a:visited { color: #c700ff; }
a:hover { color: #00ffff; }

.title {
    font-variant: small-caps;
}

/* Divisions */

/* PAGETITLE ================================= */
/* This division sits above the rest of the page,
    across the top. The three columns of leftcol,
    rightcol, and main all start underneath this. 
    An ad banner can safely be placed over this div. */
    
#pagetitle {
    clear: both;
    margin: 20px 20px 0px 20px;
    float: top;
}

#pagetitle h1 {
    letter-spacing: 0.15em;
    text-align: left;
    text-transform: none;
    font-variant: small-caps;
    color: #fff393;
    line-height: 120%;
    margin: 0 0 0 0;
    padding: 0 0 0.2em 0;
}

#pagetitle h2 {
    letter-spacing: 0.15em;
    font-style: italic;
    text-align: center;
}

#pagetitle h3 {
    letter-spacing: 0.15em;
    font-style: italic;
    text-align: center;
}

/* LEFTCOL ===================================== */
/* This is the outer "wrapper" for the left column.
    Other divisions like NAVBAR, link lists, and so on
    go inside this division. */

#leftcol {
    float: left;
    padding: 0;
    margin: 0;
    width: 180px;
}

/* RIGHTCOL =================================== */
/* This is the outer "wrapper" for the right column.
    Other divisions like NAVBAR, link lists, and so on
    go inside this division. */

#rightcol {
    float: right;
    padding: 0;
    margin: 0;
    width: 145px;
}


/* CONTAINER ================================= */
/* This wraps the content of the center section
    of the screen. The comic, main section, and the footer
    are usual divisions to put inside the CONTAINER */
    
#container {
    margin: 0 auto;
    padding:  20px 40px 20px 20px;
    background: #000;
    width: 975px;
    text-align: left;
}

/* MAIN ===================================== */
/* The main section of the page. This
    stays in the center margin, and does not
    flow into the third column. */

#main {
    margin: 0 20px  0 215px;
    padding: 0;
    width: 750px;
}

#main a { text-decoration: none; }

/* NAVBAR CLASS ===================================== */
/* This is a general format for a navigation bars,
    now a strip across the top, beneath the title. */
    
.navbar {
    padding: 0; 
    margin: 0;
    font-size: large;
    letter-spacing: 0.15em;
    color: #b7c7ff;
}

.navbar ul { 
    list-style-type: none; 
    padding: 0;
    margin: 0;
}

.navbar li { float:left; margin-right: 2px; }

.navbar a:link, a:visited { 
    color: #78d0ff; 
    display:block; 
    width: 10em; 
    text-align: center; 
    text-decoration: none;
    background-color: #303447;
    padding-top: .3em;
    padding-bottom: .3em;
}
.navbar a:hover, a:active { color: #fff393; background-color:#272c3c; }

/* COMIC CLASS ===================================== */
/* This describes the rectangle in which the comic itself is displayed. */

.comic {
    margin: 20px 30px;
    padding: auto auto;
    background: #fff;
    width: 940px;
    /* height: 370px; */
}

/* h1 is used for the comic's text title */
.comic h1 {
    color: #383838;
    font-size: 150%;
    float: left;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing: normal;
    text-align: left;
    padding: 0.5em 0em 0.1em 0.5em;
    margin: 0 0 0 0;
}

/* h2 is used for the comic's date */
.comic h2 {
    color: #383838;
    font-size: 90%;
    font-style: normal;
    float: right;
    text-transform:uppercase;
    font-weight:bold;
    letter-spacing: normal;
    text-align: right;
    padding: 0.5em 1.0em 0.1em 0.5em;
    margin: 0 0 0 0;
}


/* SUMMARY CLASS =================================== */
/* This is a pullquote or small intro statement
    for the page. Usually sits in the right column,
    can be moved to the left column, it may be
    desirable to change the width if so. */
    
.summary {
    margin: 0; 
    padding: 5px;
    width: 135px; 
    /* background: #202434; */
    letter-spacing: 0.15em;
    font: italic 10pt/22pt;
    color: #00ffff;
    text-align:center;
}

.summary p { margin: 0.3em; }

.summary h1 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}
.summary h2 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}
.summary h3 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}
.summary h4 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}
.summary h5 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}
.summary h6 { letter-spacing: 0.2em; margin: 0 0 0.5em 0;}


/* ITEM CLASS ======================================== */
/* This is a format for short news items or links to
    other articles placed in the main section. */
.item {
    margin: 0 0 0.5em 0;
    padding:0;
    border: 1px solid gray;
    overflow: visible;
    min-height: 144px;

}

.item p {
    padding: 0 0.4em 0.2em 0.5em;
    color: #f7f7f7;
    font: normal 11pt/18pt;
    letter-spacing: 110%;
    line-height: 1.45;
}

.item h3 {
    margin: 0 0 0 0;
    padding: 0.3em;
    background: #380000;
    font-variant: small-caps;
    border-bottom: 1px solid gray;
}

.item p.highlight {
    padding: 0 0.4em 0.2em 0.5em;
    color: #3d5;
}

.item img {
    padding: 0;
    margin: 6px;
}

.item ul {
    margin: 0 0 0.5em 2em;
    padding: 4px;
}

/* ARTICLE CLASS ==================================== */
/* A larger item on the page than an item, doesn't need to
    be set off as much, */

.article {
    margin: 0 0 0.5em 0;
    padding:0;
    overflow: visible;
    min-height: 144px;
}

.article p {
    padding: 0 0.4em 0.2em 0.5em;
    color: #f7f7f7;
    font: normal 11pt/18pt;
    letter-spacing: 110%;
}

.article h3 {
/* This is the title for the article and should br set off in some way,
    either through typography or color or a bacground. */
    margin: 0 0 0 0;
    padding: 0.3em;
    background: #444;
    font-variant: small-caps;
}

.article h4 {
/* This is used for article subtitles, should be set off mildly from
    text and brighten the page to avoid monotony in long runs of text. */
    margin: 0;
    padding: 0.2em 0 0 0;
    color: #3e7;
}
.article p.highlight {
    padding: 0 0.4em 0.2em 0.5em;
    color: #3d5;
}

.article img {
    padding: 0;
    margin: 6px;
}

.article ul {
    margin: 0 0 0.5em 2em;
    padding: 4px;
}


/* FOOTER ===================================== */
/* This is the section for the foot of the page, it will
    drop below the level of all content on the page that comes before it, including long left or right columns. Ads can be safely placed inside or after the footer. */
    
#footer {
    clear: both;
    margin: 0.3em;
    padding: 0.2em;
    font: normal 8pt/14pt;
    text-align: center;
    color: #fff393;

}


/* ADSENSE CLASS ====================================== */
/* This section holds formatting stuff for different adsense ads,
    a different adsense id can be created for each type of ad. */
    
.adsense-square { /* This is for 200x200 square ads
                        placed in the left column. */
    clear:left;
    float: left;
    margin: 1em 0 0 0;
}