/* Box */
.box {
}

.box .text {
    padding: 7px 7px;
    overflow: auto;
}

.box .text p:first-child,
.box .text ul:first-child,
.box .text li:first-child {
    margin-top: 0;
}

.box .text p:last-child,
.box .text ul:last-child,
.box .text li:last-child {
    margin-bottom: 0;
}

.box .heading {
    background-color: #333333;
    font-weight: bold;
    padding: 3px 7px;
    overflow: hidden;
}

.box .heading h2, .box h3.heading, .box h4.heading {
    margin: 0;
    color: #ffffff;
}

.box .heading a:link, .box .heading a:visited {
    color: #ffffff;
    text-decoration: none;
}

.box .heading a:hover, .box .heading a:active {
    color: orange;
    text-decoration: none;
}

/* Post */
.post-item {
    margin-bottom: 35px;
}

.post-date {
    text-align: right;
    margin-top: 0;
    margin-bottom: 0.1em;
    padding-right: 2px;
    font-weight: normal;
    font-size: 85%;
}

.post .heading .title {
    float: left;
    font-size: 125%;
}

.post .widgets {
    padding: 7px 10px;
}

.post .widgets .tags {
    margin-bottom: 0.5em;
}

.post .widgets .comments-count {
    margin-bottom: 0.5em;
    display: block;
}

/* Navigation buttons */
.post-nav {
    color: #ffffff;
    font-family: verdana;
    float: right;
    font-size: 125%;
}

.post-nav a, .post-nav span {
    letter-spacing: -3px;
    text-decoration: none;
}

.post-nav .bar {
    font-size: 80%;
    position: relative;
    top: -2px
}

.post-nav .inactive {
    color: #b0b0b0;
}

/* Special wrapper for navigation buttons at bottom */
.bottom-nav {
    margin-top: 1.5em;
    font-weight: bold;
    overflow-x: hidden;
}

/* Comments */
#comments {
    margin-top: 1em;
}

#comments-list {
    padding: 10px;
}

.comment:first-child {
    margin-top: 0;
}

.comment {
    border: 1px solid #cccccc;
    margin: 20px 0 0 0; 
    overflow: hidden;
}

#comments .comment .heading {
    border-bottom: 1px solid #cccccc;
    background: #f0f0f0;
    padding: 2px;
    padding-left: 7px;
    font-weight: normal;
    font-size: 100%;
    color: #333333;
}

.comment .date {
    font-size: 85%;
    padding: 7px 7px;
}

.comment .heading a:link,
.comment .heading a:visited {
    color: #0000e0;
    text-decoration: none
}

.comment .heading a:hover,
.comment .heading a:active {
    color: #0000ff;
    text-decoration: underline
}

#comments .comment.authority {
    border: 4px double #cccccc;
}

/* Comment form frame */
#comment-form-box {
    margin-top: 1.5em;
}

#comment-form-frame {
    border: 0;
    height: 600px;
    width: 95%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}


/* Comment Form */
#comment-form label {
    margin-top: 1em;
    display: block;
}

#comment-form input {
    width: 95%;
}

#comment-form textarea {
    width: 95%;
    height: 150px;
}

#comment-form input#submit {
    width: 62%;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-top: 1em;
}

#comment-form div.status {
    width: 95%;
    margin-top: 1em;
}

#comment-form div.errors {
    color: red;
    border: 3px double red;
}

#comment-form div.success {
    color: #008000;
}

@media screen and (min-width: 600px) {
    .post .widgets .comments-count {
        margin-bottom: 0.5em;
        display: inline;
    }

    .post .widgets .links {
        float: right;
    }

    .comments-count {
        position: relative;
        bottom: 4px;
        margin-right: 30px;
    }

    /* Social media */
    .gplus-button, .twitter-button, .fb-button {
        display: inline-block; /* Prevent stacking on top of one another. */
                               /* inline didn't work in Chrome. gplus moved
                                * to next line. inline-block fixed it. */
    }
}