@import 'common.css';

body {
    margin    : 0 auto; /* center horizontally */
    max-width : 36em;
    _width    : 36em; /* for IE6 */
    padding   : 0 10px;
}

div.top {
    font-size: 260%;
    background-color: #e8e8e8;
    background-image: -webkit-linear-gradient(top, #f8f8f8, #e8e8e8);
    background-image:    -moz-linear-gradient(top, #f8f8f8, #e8e8e8);
    background-image:     -ms-linear-gradient(top, #f8f8f8, #e8e8e8);
    background-image:      -o-linear-gradient(top, #f8f8f8, #e8e8e8);
    background-image:    -moz-linear-gradient(top, #f8f8f8, #e8e8e8);
    border: 1px solid #b0b0b0;
    padding: 10px;
    margin-top: 10px;
    border-radius: 2px;
}

div.top img {
    border: 1px solid #fff;
    border-radius: 4px;
}

a.top-name {
    position: relative;
    top: -24px;
    text-decoration: none !important;
    font-weight: bold;
    font-size: 60%;
}

@media all and (min-width: 440px) and (min-device-width: 440px) {
    a.top-name {
        top: -21px;
        font-size: 80%;
    }
}

@media all and (min-width: 540px) and (min-device-width: 540px) {
    a.top-name {
        top: -18px;
        font-size: 100%;
    }
}

/* hyperlinks */

    a:link
    {
        color           : #204080;
    }

    a:visited
    {
        color           : #102060;
    }

    a:target
    {
        color           : #FF0000;
        font-weight     : bold;
    }

/* styles for config/html.erb */

    .outer-nav {
/*        background-color: #a0a0a0;*/
        padding: 4px 0;
/*        margin-top: 14px;*/
    }

    /* the main blog navigation menu */
    .navigation
    {
        position: relative;
        background-color: #e8e8e8;
        border: 1px solid #b0b0b0;
        border-radius: 2px;
        padding: 2px 10px;
    }

    .navigation span.linkhome {
        position: absolute;
        right: 40px;
    }

    .navigation .feedicon {
        float: right;
        padding: 5px;
    }

    /* the navigation item corresponding to the current web page */
    .navigation .current
    {
    }

/* styles for config/entry.erb */

    .entry {
        margin-top      : 4em;
    }

    /* title of the blog entry */
    .entry > .name {
        font-size       : 1.6em;
    }

    .entry .name {
        _display        : block; /* for IE6 */
    }

    .entry > .name a:link, .entry > .name a:visited {
        color           : #000000;
    }

    .entry .name a:link, .entry .name a:visited {
        _color          : #000000; /* for IE6 */
    }

    /* content of the blog entry */
    .entry .body
    {
    }

    .entry .body > img
    {
        margin          : 1em;
    }

    /* the "Read more..." link */
    .entry .more
    {
    }

    .entry .timestamp {
        border-bottom: 2px solid #c0c0c0;
    }

    .entry .timestamp a {
        color: #808080;
    }

    /* information about the blog entry */
    .entry .info
    {
        font-size       : smaller;
    }

/* additional styles for config/entry.erb (when @solo is true)
    (that is, when the entry is displayed alone, on its own page) */

    .entry-solo
    {
    }

    .entry-solo .toc
    {
    }

    .entry-solo .body
    {
    }

    .entry-solo .info
    {
    }

/* styles for config/listing.erb */

    .listing
    {
    }

    .listing > .name
    {
    }

/* styles for config/section.erb */

    .section
    {
    }

    .section > .name
    {
    }

/* styles for config/chapter.erb */

    .chapter
    {
    }

    .chapter > .name
    {
    }

    /* tag cloud */
    .chapter .cloud
    {
        padding         : 0;
        text-align      : center;

        max-width       : 70%;
        _width          : 70%; /* for IE6 */

        margin          : auto; /* center horizontally */
        margin-bottom   : 2em;
    }

    .chapter .cloud li
    {
        display         : inline;
        padding-right   : 10px;
    }

/* styles common to many templates */

    .listing > .name,
    .chapter > .name,
    .section > .name
    {
        text-align      : center;
        margin-top      : 1em;
        margin-bottom   : 1em;
    }

div#footer {
    position: relative;
    margin-top: 30px;
    border-top: 1px dotted #b0b0b0;
    font-size: 80%;
    text-align: center;
    color: #606060;
    clear: both;
}

div#footer a { color: #606060; }