* {
    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
{
    max-width: 100%;
}

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

        .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;
            }
            
            .content > .post > .title
            {
                font-size: 1.5em;
            }
            
            .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 */
            .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;
                     }
                     
        /* 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;
    }