* {
    margin:         0;
    padding:        0;
    font-family:    "Helvetica Neue", Helvetica, Arial, sans-serif;

    -moz-box-sizing:    border-box;
    -webkit-box-sizing: border-box;
    box-sizing:         border-box;
}

img
{
    /* Prevent images from taking up too much space in comments */
    max-width: 100%;
}

html, body
{
    background-color:   #fff; /* #f5f8fa; */
    font-size:          1em;
    height:             100%;
    line-height:        1em;
    margin:             0;
    padding:            0;
    width:              100%;
}
    
    /* Page header */
    .header
    {
        padding:    1em 0;
        text-align: center;
    }
        
        /* Logo text */
        .header a.logo,
        .header a.logo:hover,
        .header a.logo:visited
        {
            color:              #000;
            font-weight:        bold;
            text-decoration:    none;
        }
        
            /* Logo picture */
            .header a.logo > img
            {
                height:         1.5em;
                margin:         0 1em;
                vertical-align: middle;
            }
        
        /* Menu under the logo */
        .header > .menu
        {
            padding: 1em 0;
        }
        
            .header > .menu > *
            {
                margin: 0 1em;
            }

            .header > .menu .new_messages
            {
                background-color:   rgb(255, 175, 50);
                border-radius:      4px;
                color:              #fff;
                font-weight:        bold;
                margin:             0 .5em 0 0;
                padding:            0em 0.5em;
                text-decoration:    none;
            }
    
    
    .content
    {
        padding:        1em 0;
        line-height:    1.5em;
    }
    
        .content .vote
        {
            margin: 0 1.5em 0 0;
        }
        
            .content .vote > a
            {
                display:            inline-block;
                margin:             0;
                overflow:           hidden;
                padding:            0;
                text-decoration:    none;
                vertical-align:     middle;
            }
            
            .content .vote img {
                cursor:     pointer;
                height:     1em;
                margin:     0;
                padding:    .2em;
                float:      left;
            }
            
            .content .vote .upvoted
            {
                background-color:   #fff;
                border:             1px solid #00E313;
                border-radius:      999em;
            }
            
            .content .vote .downvoted
            {
                background-color:   #fff;
                border:             1px solid #FF0000;
                border-radius:      999em;
            }
            
            .content .vote .count {
                margin: 0 .5em;
            }
        
        /* Home page */
        .content .posts
        {
        }
            
            .content .posts .post
            {
                margin:         0 0 2em 0;
                vertical-align: top;
            }
            
                .content .posts .post > .title
                {
                    font-size: 1.5em;
                }
                
                .content .posts .post > .title > a
                {
                    color: #000;
                }
                
                .content .posts .post > .info
                {
                    color:      #666;
                    margin:     .5em 0;
                    opacity:    .8;
                }
        
        /* New submission */
        .content > form.submit
        {
            margin:     auto;
            max-width:  30em;
        }
            
        /* View a post */
        .content > .post
        {
        }
            
            /* Style used to format Markdown tables */
            .content > .post table
            {
                background:         #fff;
                border-collapse:    collapse;
                text-align:         left;
            }
            
                .content > .post table th
                {
                    border-bottom:  2px solid #6678b1;
                    color:          #039;
                    font-weight:    normal;
                    padding:        0 1em;
                }
                
                .content > .post table td
                {
                    border-bottom:  1px solid #ccc;
                    color:          #669;
                    padding:        .5em 1em;
                }
                
                .content > .post table tbody tr:hover td
                {
                    color: #009;
                }
            
            /* The post title */
            .content > .post > .title
            {
                font-size: 1.5em;
            }
            
            /* Info below post title */
            .content > .post > .info
            {
                margin: 1em 0;
            }
            
            /* Post text */
            .content > .post > .text
            {
                margin:     1em 2.5em;
                word-wrap:  break-word;
            }
            
            /* Post "new comment" form */
            .content > .post > .new_comment
            {
                margin:     0 2.5em;
                overflow:   hidden;
            }
                
                .content > .post > .new_comment > textarea
                {
                    height: 2.5em;
                    
                    -webkit-transition: 1s;
                    transition:         1s;
                }
                
                    .content > .post > .new_comment > textarea:focus
                    {
                        height: 10em;
                    }
                
                .content > .post > .new_comment > input[type=submit]
                {
                    float:  right;
                    margin: 1em 0;
                }
            
            /* Comments tree for the Post page */
            .content > .post > .comments
            {
                margin: 5em 0 0 0;
            }
                
                .content > .post > .comments > .comment
                {
                    margin:     0 0 2em 0;
                    overflow:   hidden;
                }
                    
                    .content > .post > .comments > .comment > .pin
                    {
                        color:          #CD006B;
                        float:          left;
                        font-size:      .8em;
                        padding:        0 1em 0 0;
                        vertical-align: top;          
                    }
                    
                    .content > .post > .comments > .comment > .info
                    {
                        font-size:  .9em;
                        margin:     0 0 0 1em;
                    }
                    
                        .content > .post > .comments > .comment > .info .username > a,
                        .content > .post > .comments > .comment > .info .username > a:hover
                        {
                            font-weight: bold;
                        }
                        
                        .content > .post > .comments > .comment > .info .op > a,
                        .content > .post > .comments > .comment > .info .op > a:hover
                        {
                            background-color:   rgb(255, 175, 50);
                            border-radius:      4px;
                            color:              #fff;
                            font-weight:        bold;
                            margin:             0 .5em 0 0;
                            padding:            0em 0.5em;
                            text-decoration:    none;
                        }
        
                        .content > .post > .comments > .comment > .info > .vote
                        {
                            margin: 0 1em;
                        }
                     
                     .content > .post > .comments > .comment > .text
                     {
                         margin:    .5em 0 0 1.5em;
                         word-wrap: break-word;
                     }

                    /* Give the comment that's linked to in the URL location hash a lightyellow background color */
                    .content > .post > .comments > .comment:target
                    {
                        background-color: lightyellow;
                    }

                     
        /* User home page */
        .content table.user
        {
            /* If one length specified: both horizontal and vertical spacing
             * If two length specified: first sets the horizontal spacing, and
             *                          the second sets the vertical spacing
             */
            border-spacing:     2em 1em;
            border-collapse:    separate;
            margin:             auto;
            width:              80%;
        }
        
            .content table.user td:first-child
            {
                font-weight:    bold;
                text-align:     right;
                vertical-align: top;
                width:          30%;
            }
            
            .content table.user td:last-child
            {
                text-align: left;
            }
        
        /* User activity */
        .content > .user_activity
        {
        }
        
            .content > .user_activity > *
            {
                margin: 0 0 2em 0;
            }
            
                .content > .user_activity > * > .info
                {
                    color: #888;
                }
        
        /* Login page */
        .content > .login
        {
            margin:     auto;
            max-width:  20em;
        }
            
            .content > .login input[type=submit]
            {
                margin: 1em 0;
            }
        
        /* Edit a post or a comment */
        .content > .edit
        {
        }
        
        /* Reply to a comment */
        .content > .reply
        {
        }
        
        /* About page */
        .content > .about
        {
        }
        
            .content > .about > h3
            {
                margin: 1em 0 .5em 0;
            }
            
            .content > .about > p
            {
                line-height: 1.5em;
            }
        
    .footer
    {
        border-top: 1px solid #6ECFFF;
        margin:     3em 0 0 0;
        padding:    2em 0;
    }
        
        .footer img
        {
            height:         1.2em;
            margin:         0 .5em 0 0;
            vertical-align: middle;
        }
        
        .footer > ul
        {
            list-style: none;
            margin:     0;
            overflow:   hidden;
            padding:    0;
        }
        
            .footer > ul > li
            {
                float:  left;
                margin: 0 2em 0 0;
            }
        
    /* When users vote, this <iframe/> is used as target, such that
     * the page is not reloaded
     */
    .vote_sink
    {
        height:     1px;
        left:       -10px;
        position:   fixed;
        top:        -10px;
        width:      1px;
    }