body {
    color: $base-font-color;
    background: #ffffff;
	  font-family: $serif;

    a { text-decoration: none; }

    img.left {
        float: left;
        margin: 0 1em 1em 0;
    }

    img.right {
        float: right;
        margin: 0 0 1em 1em;
    }

    .container {
        @include outer-container;

        #header {
            header {
                @include span-columns(2);
                h1 {
                    a {
                        font-family: $typewriter;
                        color: #343434;
                    }
                }
                @include media($mobile) {
                    @include span-columns(4);
                }
            }

            nav {
                text-transform: uppercase;
                line-height: 3em;
                @include span-columns(6);
                ul.navigation {
                    border-left: 1px solid #dedede;
                    padding-left: 1em;

                    li {
                        display: inline;
                        list-style-type: none;
                        padding: 0 1em 0 0;

                        a {
                            color: #303030;
                        }
                    }
                }
                @include media($mobile) {
                    @include span-columns(4);
                    line-height: 1em;
                    ul.navigation {
                        border-left: 4px solid #dedede;
                        padding-left: 0.5em;
                    }
                }
            }
        }

        #main {
            clear: both;
            padding: 1em 0;
            border-top: 1px solid #dedede;

            figure {
              margin: 0;

              cite {
                font-size: 0.8em;

                a {
                  color: #ababab;
                }
              }
            }

            article.hentry {
                border-bottom: 1px #dedede solid;

                header time {
                  color: transparentize($base-font-color, .6);
                  font-size: 0.9em;
                  font-style: italic;
                  margin-bottom: 0.3em;
                }

                h1 {
                  font-size: 1.6em;
                  margin-bottom: 0.5em;
                }

                pre {
                  padding: 0.5em;
                  overflow: auto;
                }

                code {
                  background: #F7F7F7;
                  border-radius: $base-border-radius * 1.5;
                  border: 1px solid #E0E0E0;
                  font-family: monaco;
                  font-size: 0.75em;
                  font-style: normal;
                  padding: 0.1em 0.4em;
                  white-space: nowrap;
                }

                .feature-image {
                    width: 100%;
                    max-height: 300px;
                }

                footer {
                  font-size: 0.8em;
                }
            }

            article {
                .gist-file pre {
                    color: #000;
                }
            }

            article.list {
                clear: both;
                border-bottom: 1px solid #dedede;
                line-height: 2;
                time {
                    display: block;
                    float: left;
                    width: 8em;
                    color: #696969;
                }
                @include media($mobile) {
                    time {
                        display: none;
                    }
                }

            }

            .vcard {
                padding: 10px 0;
                margin: 1em 0 0 0;
                clear: both;

                p {
                    margin: 0 0 0.5em 0;
                }

                img {
                    float: left;
                    margin: 0 0.5em 0 0;
                    border: 1px #dedede solid;
                    padding: 3px;
                }
            }
        }
    }
}
