/* css reset start */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, 
q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, 
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { 
margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; 
font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline; 
} body { line-height: 1; color: black; background: white; } ol, ul { 
list-style: none; } table { border-collapse: separate; border-spacing: 0; } caption, 
th, td { text-align: left; font-weight: normal; } blockquote:before, 
blockquote:after, q:before, q:after { content: ""; } blockquote, q { quotes: "" ""; }
/* remember to define focus styles! */
:focus { outline: 0; }
/* css reset end */

*:focus{background:yellow;}


body{ 
    /**/ font-family: helvetica, sans-serif; 
    /*/ font-family: trebuchet; /**/

    color: rgba(0,0,0,0.9);
    font-size: 16px;

    background: #fff url('gfx/bottomgradient.png') fixed bottom repeat-x;

    padding: 0 0.4em;
}
    /* fix body background position for firefox 3; this forces it to the bottom */
    html{ min-height: 100%; }

a{ text-decoration: none;}

h1,h2,h3,h4,h5,h6{ 
    font-family: 'hoefler text', georgia, serif;
}

#page{
    /* grid debug switch ( '* /' = on ) */
    margin: 0 auto; /*/ 
    background: url('30-10x.png'); margin: 0 0 0 10px; float: left; 
    /**/

    line-height: 24px;

    /**/ width: 59.4em; /*/ width: 480px; /**/
    min-width: 480px; max-width: 99%;
    


}

/* grid */
#nav,#links,#twitter,#info,.trackbacks{ float: left; width: 100%; }

#articles, #links-feed, .trackbacks-info, .article pre, .article ul, .article ol,
.article .entry-tags, .bookmark ol, .bookmarks ol, body.archive #articles blockquote,
#trackbacks h2, .article h2,.article h3,.article h4,.article h5,.article h6{ 
    /* */ float: left; /**/
    width: 70.54%;
}   
    body.bookmarks #content ol{ float: none;}

#projects, #links ul.xoxo, .article .sidenote, .bookmarks h2, #links-archive, 
body.archive #articles .sidenote{
    float: right; 
    width: 24.2%;
}

/* Hidden ********************************************************************/
/*    #branding h1,*/
    #nav h2,
    .frontpage #links h2,
    #articles cite
    { text-indent: -9999px; height: 0; float: left; }

/* Navigation ****************************************************************/
#branding{ 
    width: 100%; float: left;
    padding: 12px 0 0 0;
}                            
    #branding h1{ font-size: 32px; line-height: 48px; }
    #branding a{ 
        text-decoration: none;
    }
    #branding p{ 
        float: left;
        margin: 0px 0 12px 0;
        font-size: 12px; color: #777; font-family: helvetica, sans-serif; 
        padding: 0;
    }



#articles { clear: left; margin-bottom: 12px; }
#articles h2,#twitter h2,#projects h2, .trackbacks-info{ 
    font-size: 12px; color: #777; font-family: helvetica, sans-serif;
}
#articles h3{ font-size: 18px; color: #777; }

.nav-content{
    text-align: right;
    margin: 12px 0;
}
    .nav-content li{
        padding-right: 1em;
        font-size: 12px;
    }
/* */
#projects li{ font-size: 12px; }

/* */
    #links{ margin-bottom: 24px; }
    #links-me-elsewhere, #links-folks{
        float: left;
    }
    #links-feed{

    }               
        #links-feed .entry-content, .bookmark .entry-content, .bookmarks .entry-content{
            font-size: 14px; margin-bottom: 24px;
        }
        
    #links-folks{ }
        #links-folks ul{ }
        #links-folks li{
            display: inline;
        }

#links-afilliates{ }

    #links-afilliates h3{ 
        font-size: 16px; 
    }

    #links-afilliates h4{ 
        font-family: helvetica, sans-serif; color: #777; 
    }

    #links-afilliates li{ 
        display: inline; font-size: 12px;
    }
        
        #links-afilliates li a{ 
            margin-right: 0.75em; 
        }
        
        #links-afilliates li ul, #links-afilliates li ol{
            margin-bottom: 24px;
        }

/* twitter */
#twitter{ 
    margin-bottom: 48px;
}

    #twitter blockquote{ 
        padding: 0 40px 0 0; 
        min-height: 144px;
        background: url('gfx/birdie.png') 78% bottom no-repeat;

    }
    #twitter blockquote p{
        padding: 24px 25.3% 60px 40px;
        line-height: 24px;
    }
    #twitter p.author{
        text-align: right;
        margin-top: -48px;
        padding: 0 28% 12px 0;
    }


#info{ 
    font-size: 12px; text-align: center;
    color: #777;
    padding-bottom: 12px;
}

#info p{ width: 100%; margin-bottom: 0;}

/* articles and stuff-a-roo */

#trackbacks { margin: 24px 0; }

#trackbacks h2{
    margin-top: 11px; border-top: 1px solid #ccc; padding-top: 12px;
}           

.trackbacks-info { margin: 12px 0 24px 0; }

.article h2,.article h3,.article h4,.article h5,.article h6{
    text-indent: -0.1em;
}
    .article .hentry h2{ font-size: 24px; margin: 12px 0 12px 0; }
    .article .hentry h3{ font-size: 21px; margin: 12px 0; }
    .article .hentry h4{ font-size: 18px; margin: 0px 0 0 0; color: #333;  }
    .article .hentry h5{ font-size: 16px; color: #333;}
    .article .hentry h6{ font-size: 16px; color: #777;}

.article p, .article blockquote { width: 70.54%; float: left; }

.article .sidenote { color: #777; }
    .article .hfeed .sidenote { 
        text-indent: 0; 
        font-size: 12px;
        margin-bottom: 24px;
    }

.article .hfeed p { margin-bottom: 24px; }
    .article .hfeed p + p, 
    .article .hfeed blockquote + p, 
    .article .hfeed pre + p,
    .article .hfeed ul + p, 
    .article .hfeed ol + p{ 
        text-indent: 1.25em; 
    }
 
.article pre code{
    /* <div class="terminal">$ test hest fest test</div> */
    display: block;
    padding: 12px 30px; margin: 0 10px 24px 10px;
    background: #777; color: #ddd; font-family: Monaco; font-size: 13px;
}

.article blockquote{ 
    padding: 24px 0;
    background: transparent url('gfx/oquote.png') no-repeat 0 12px;
}
    /* closing quote, for browsers supporting the last-child pseudo selector */
    .article blockquote p:last-child{ 
        background: url('gfx/cquote.png') no-repeat bottom right; 
    }
    .article blockquote div:last-child{ 
        background: transparent url('gfx/cquote.png') no-repeat 0 right;
        /* clear the quote graphic, and readjust the vertical flow */
        padding-top: 36px; margin-top: -48px;
    }

    .article blockquote p{ 
        padding: 0 6%;
        width: 88%; font-style: italic; color: #333;
    }

    .article blockquote div{ 
        width: 100%;
        margin: -12px 0 12px 0; float: left; text-align: right;
    }
    .article blockquote cite{  padding-right: 1.25em;}

/* article lists */
.article ul, .article ol{ 
    margin: 12px 0;
    list-style: outside;
}   
    .article ul{ list-style: square;}
    .article ol{ list-style: decimal; }

    .article ul li, .article ol li{ margin-left: 6%; }
    .article li p{ float: none; width: 100%; }



.article .entry-tags{ color: #777; font-size: 12px;}
.entry-tags li{ display: inline; }
.entry-tags a{ display: inline; padding: 2px; margin-right: 0.75em; }




.bookmarks{ }
.bookmarks h2{
    color: #777;
    font-family: helvetica, sans-serif;
    font-size: 12px; margin-bottom: 24px;
}

.bookmark ol li, .bookmarks ol li{
    margin-bottom: 24px;
}

#content{ padding-bottom: 24px; }


.links-frontpage #links-feed h2{
    text-indent: -9999px; position: absolute;
}
.links-frontpage #links-feed h3, .bookmarks h3{ font-size: 18px;}

                             
    #links-archive ol li h3{ 
        font-size: 12px; line-height: 24px; 
        font-family: helvetica, sans-serif; color: #777; 
        display: inline;
        margin-right: 1em;
    }
    #links-archive ol li ol{ margin-bottom: 24px; display: inline; }
        #links-archive ol li ol li{ display: inline; margin-right: 1em; }

    #links-archive a{ line-height: 24px; font-size: 12px; }


body.archive #articles h2{
    font-family: 'hoefler text', georgia, serif;
    font-size: 18px; 
}
body.archive #articles blockquote{ font-size: 14px; }

body.archive #articles .sidenote{ font-size: 12px; color: #777; }

body.archive #articles{ width: 100%; }
body.archive #articles .hentry{ 
    float: left;
    margin-bottom: 24px; clear: left;
}


body.bookmark .entry-title{ font-size: 18px; }