/********************************************

Basic measures
**************

1em = 16px by default

Lengths
*******

M1  53em = 848px
    width of content area including padding

Colors
******
C1 #313131 base dark
    used for dark background and dark on bright text

C2 #9ac13a greenish
    used for color accents in blog title and logo

*********************************************/

.clear {clear: both;}

.block {
    display: block;
}

.center{
    display: block;
    margin: .5em auto;
}

.left {
    margin: .5em;
    float: left;
}

.right {
    margin: .5em;
    float: right;
}

body {
    background-color: #313131; /* C1 */
    color: #fff;
    margin-top: 3em;
}

a,
a:link,
a:visited {
    color: #83A728;
    font-weight: bold;
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
    color: #83A728;
    text-decoration: underline;
}

img {
    border: 0 none;
}

ins {
    text-decoration: none;
}

blockquote {
    border-left: 5px solid #ccc;
    clear: both;
    margin: .5em 0 1em 1em;
    padding-left: .5em;
}

#title {
    background: transparent url(../images/drop_shadow_top.png) bottom right no-repeat;
    height: 4em;
    padding: 0 0 32px 0;
    border-left: 8px solid #313131;
    position: relative;
} 

#title,
#body,
#byline {
    width: 56em;
    margin: 0 auto;
}

#title,
#title h1 em,
#title li a,
#byline,
#byline em {
    font-family: "Trebuchet MS", Helvetica, sans-serif;
    color: #eee;
    font-style: normal;
    text-decoration: none;
}

#title h1,
#title li {
    font-size: 2em;
    float: left;
}

#title h1 a,
#byline {
    color: #9ac13a;
    text-decoration: none;
}

#title h1 {
    color: #9ac13a;
    border-right: 2px solid #fff;
    padding-right: .75em;
    margin: .75em .375em 16px 0;
    font-weight: normal;
    line-height: 1.25em;

    position: relative;
    top: -0.125em;
}

#title li {
    list-style-type: none;
    padding: .75em .375em 0;
    line-height: 1.25em;
}

#title li a {
    font-size: .75em;
    display: block;
    padding-bottom: 16px;
}

#title li a.active {
    background: url(../images/white_triangle.gif) bottom center no-repeat !important;
}

#title li a:hover,
#title li a:active,
#title li a:focus {
    background: url(../images/grey_triangle.gif) bottom center no-repeat;
}

#body {
    background: #313131 url(../images/drop_shadow_left.png) top left repeat-y;
    clear: both;
    padding: 0 0 21px 8px;
    font-family: "Palatino Linotype","Book Antiqua",Palatino,serif;
    position: relative;
}

#drop-shadow-tl {
    height: 32px;
    width: 32px;
    background: transparent url(../images/drop_shadow_tl.png) top left no-repeat;
    position: absolute;
    top: -21px;
    left: 0;
}

#drop-shadow-bl {
    height: 32px;
    width: 36px;
    background: transparent url(../images/drop_shadow_bl.png) bottom left no-repeat;
    position: absolute;
    bottom: -11px;
    left: 0;
    z-index: 10000;
}

#body h1,
#body #preview-info,
#body .article,
#body .comments,
#body .comment-form,
#body .pagination,
#content-head {
    background: #fff url(../images/drop_shadow_right.png) repeat-y scroll right top;
    color: #313131;
    margin: 0;
    border: 0 none;
}

#body .article,
#body .comment-form {
    padding: .5em 6em 1.5em 3em;
}

#body h1,
#body .with-sidebar,
#body .pagination div {
    padding: .5em 6em 1.5em 10em;
}

#body #preview-info {
    padding: .5em 6em 0 10em;
}

.bloginfo {
    width: 20em;
    float: left;
    padding: .5em 0 1.5em 1em;
}

.twitter {
    width: 27em;
    float: right;
    padding: .5em 6em 1.5em 0;
}

.twitter h2,
.bloginfo h2 {
    margin: 0 0 .5em;
    font-size: 1.25em;
}

.twitter-date {
    font-size: .75em;
}

.twitter p,
.bloginfo p {
    margin: 0 0 .5em;
}

#preview-info p,
.comment-form ul.errorlist {
    background-color: #ffc;
    color: #666;
}

#body h1 {
    border-bottom: 1px dotted #313131;
    padding: 0.4em 3.2em 0 1.6em;
    font-size: 2.5em
}

#preview-info p,
.article p,
.article ul,
.article ol {
    font-size: 1.25em;
    line-height: 1.25em;
}

#preview-info p,
.article p,
.comment p {
    padding: .25em 0;
    margin: 0;
}

.article ul,
.article ol {
    margin: .25em 0;
}

.article ul p,
.article ol p {
    font-size: 1em;
}

.article h2,
.article h3,
.article h4,
.comments h2,
.comment-form h3 {
    padding-top: .5em;
    margin: 0 0 .5em 0;
    border-bottom: 1px solid #313131;
    line-height: 1.25em;
}

.article h2 {
    font-size: 2em;
}

.article h3 {
    font-size: 1.5em;
}

.article h4 {
    font-size: 1em;
}

.article h2 a,
.article h2 a:link,
.article h2 a:visited {
    color: #313131;
    text-decoration: none;
}


.article-info a.date,
.article-info a.date:link,
.article-info a.date:visited {
    color: #313131;
}

.article h2 a:hover,
.article h2 a:active,
.article h2 a:focus,
.article-info a.date:hover,
.article-info a.date:active,
.article-info a.date:focus {
    color: #9ac13a;
}

.article,
.comment {
    position: relative;
    clear: both;
}

.article-info {
    position: absolute;
    left: 1em;
    width: 8em;
    top: 2.375em;
}

.article-info h3 {
    font-size: 1em;
    border: 0 none;
    font-weight: normal;
    margin: .75em 0 0 ;
}

.article-info ul,
.article-info li,
.comment-form ul.errorlist,
.comment-form ul.errorlist li {
    list-style-type: none;
    padding: 0;
    font-size: 1em;
    margin: 0;
}

.article-info ul {
    margin: 0 0 1em;
}

.article-info a,
.article-info a:link,
.article-info a:visited {
    text-decoration: none;
}

.article-info a:hover,
.article-info a:active,
.article-info a:focus {
    text-decoration: underline;
}

/*
.article-info {
    margin-top: 1em;
}


.article-info div {
    font-size: 1em;
    padding-left: 24px;
    margin: .25em 0;
}

.article-info .date {
    background: url(../images/date.gif) center left no-repeat;
    clear: both;
}

.article-info .comments {
    background: url(../images/comments.gif) center left no-repeat;
    float: right;
}

.article-info .tags {
    background: url(../images/tag.gif) center left no-repeat;
    float: left;
    width: 70%;
}
*/

.comment-info {
    position: absolute;
    left: 1.3333333333em;
    width: 10.6666666666em;
    padding-top: 0.66666666666666em;
    font-size: .75em;
}

.comments {
    padding: .5em 6em .5em 0;
}

.comments h2 {
    margin-left: .6666666666em;
}

.comment-form div {
    margin: .5em 0;
}

.comment-form ul.errorlist {
    margin: 1em 0 0;

}

.comment-form ul.errorlist li {
    padding: .2em 0;
}


.pagination div {
    border-top: 1px dotted #313131;
    margin-right: 13px;
    position: relative;
}

.pagination .older {
    background: url(../images/left.gif) top left no-repeat;
    padding-left: 21px;
    margin-left: 1px;
    float: left;
}

.pagination .newer {
    background: url(../images/right.gif) top right no-repeat;
    padding-right: 21px;
    float: right;
    position: relative;
    left: 13px;
}

#byline {
    clear: both;
    font-size: 1em;
    padding: 32px 0 3em 0;
    border-left: 8px solid #313131;
    
    background: url(../images/drop_shadow_bottom.png) top right no-repeat;
    position: relative;
    top: -21px;
}