/* Box */
.box {
    border: 1px solid #333333;
    border-radius: 7px;
    border-top: 0;
    -webkit-background-clip: padding-box;
    box-shadow: 10px 10px 5px 2px #686868;
    /* We can't have overflow property set here because we want the
     * Facebook like button's bubble to be displayed outside the box. */
}

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

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

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

.box .heading {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #333333;
    font-weight: bold;
    padding: 3px 10px;
    overflow: hidden;
}

.box h2, .box h3, .box h4 {
    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: lightcyan;
    text-decoration: none;
}


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

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

.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;
    text-shadow: 2px 2px 2px #686868;
}


/* Comments */
#solutions {
    margin-top: 1.5em;
}

#comments-list {
    padding: 10px;
    /* padding-top: 1px; */ /* TODO remove after June 30, 2012 if not
    required. */
}

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

.comment {
    border: 1px solid #cccccc;
    border-radius: 7px;
    -webkit-background-clip: padding-box;
    margin: 20px 0 0 0; 
    overflow: hidden;
}

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

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

/* The long selectors are necessary to be more specific than the
 * .solved/.unsolved selectors. */
.box #comments-list .comment .heading a:link,
.box #comments-list .comment .heading a:visited {
    color: #0000e0;
    text-decoration: none
}

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


/* 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;
}

/* Unsolved theme */
.unsolved .box {
    border-color: #016700;
}

.unsolved .box .heading {
    background: #016700;
}

.unsolved .box .tags, .unsolved .post-nav a {
    color: #016700;
}

.unsolved .box .heading a:hover, .unsolved .box .heading a:active {
    color: #caf89f;
}


/* Solved theme */
.solved .box {
    border-color: #223344;
}

.solved .box .heading {
    background: #223344;
}

.solved .box .tags, .solved .post-nav a {
    color: #223344;
}

.solved .box .heading a:hover, .solved .box .heading a:active {
    color: #d8e8f8;
}


/* PopoBlog extension */
.email-notice {
    margin-top: 2em;
    text-shadow: 1px 1px 2px #686868;
}

.after-comments-ad {
    margin-top: 2em;
    text-align: center;
}

#credits {
    margin-top: 1.5em;
}

#reading {
    margin-top: 3em;
}



/* Content related */
/* TODO - This should be moved to content section of base.css. */
div.theorem {
    margin-top: 1em;
}

div.theorem em {
    font-style: normal;
    font-weight: bold;
    margin-right: 0.5em;
}

div.proof {
    margin-top: 2em;
}

div.proof em {
    margin-right: 0.5em;
}

div.proof div.qed {
    text-align: right;
    font-size: 150%;
    margin-top: -1em;
}

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

    .post .widgets .links {
        float: right;
        /* height: 1em; */ /* Uncomment this if no problems after June 30.  */
    }

    .post .widgets .links div {
        /* display: inline; */ /* Uncomment this if no problems after June 30.  */
    }

    .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. */
        height: 1em;
    }
}