/*----------------------------------------------------------------------------*/
/*========================= make things a bit saner ==========================*/
/*----------------------------------------------------------------------------*/


* {
        margin: 0;      
        padding: 0;      
}


/*----------------------------------------------------------------------------*/
/*========================= /make things a bit saner =========================*/
/*----------------------------------------------------------------------------*/




/*----------------------------------------------------------------------------*/
/*================================== tags ====================================*/
/*----------------------------------------------------------------------------*/
html {
        height: 100%;
}

body {    
        text-align: center; 
        font-family: verdana,helvetica,sans-serif;  
        min-height: 100%;
        margin: 0;
        padding: 0;
        border-right: 12px solid black;
        border-bottom: 12px solid black;
        border-top: 12px solid black;
        border-left: 12px solid black;
}

img {
        border: 0px;        
}

a {
        text-decoration: none;        
}

a:hover {
        background-color: black;        
        color: beige;        
}

pre {
        margin: 20px 30px;
        padding: 15px 10px;
        line-height: 14px;
        overflow: auto;
        font-weight: bold;
}

/*----------------------------------------------------------------------------*/
/*================================== /tags ===================================*/
/*----------------------------------------------------------------------------*/




/*----------------------------------------------------------------------------*/
/*================================== errors ==================================*/
/*----------------------------------------------------------------------------*/


#errorExplanation {
        border: 1px solid red;        
}

/*----------------------------------------------------------------------------*/
/*================================= /errors ==================================*/
/*----------------------------------------------------------------------------*/





/*----------------------------------------------------------------------------*/
/*================================= layout ===================================*/
/*----------------------------------------------------------------------------*/


#wrapper {
        text-align: left;
        margin-left: auto;     
        margin-right: auto;        
        width: 630px;        
        padding-top: 3em;
        padding-bottom: 3em;
        padding-left: 1em;
}

#menu {
        border-top: 12px solid black;
        border-bottom: 12px solid black;
        border-left: none;
        border-right: none;
        width: 100%;
        height: 55px;
}

#header {
        margin-top: 4em;        
        margin-bottom: 4em;
        margin-left: auto;
        margin-right: auto;
        width: 630px;        
}

#showcase {        
        width: 630px;        
        border-top: 1px solid black;        
        border-bottom: 1px solid black;        
        margin-bottom: 2em;       
}

#title {
        float: right;        
}

#article {
        margin-bottom: 1em;
        clear: both;
}

#article_info {
        float: right;
        margin-bottom: 1em;
}

#comments_area {
        border-top: 1px solid black;
        padding: 1em;
        margin-left: auto;
        margin-right: auto;
}

#comment {
        background-color: beige;
        padding: 5px;
        margin-left: auto;
        margin-right: auto;
        width: 561px;
        color: #444444;
}

#posted_by {
        font-size: 12px;
        color: #888888;
}

p#comment_body {
        padding: 5px;
        font-size: 12px;
}

#comment_form {
        float: left;
        background-color: beige;
        width: 288px;
        height: inherit;
        border-left: 12px solid black;
        border-right: 6px solid black;
}

#live-preview {
        background: black;
        width: 595px;
        margin-left: auto;
        margin-right: auto;
}

#live-comment {
        background-color: beige;
        padding: 5px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.5em;
        margin-bottom: 0.5em;
        width: 561px;
        color: #444444;
}

#preview_text {
        float: right;
        font-size: 10px;
        color: green;
}

#new_comment {
        margin-left: auto;
        margin-right: auto;
        height: 285px;
        width: 595px;
}

#comment_information {
        padding: 1px;
        width: 288.5px;
        font-size: 10px;
        border-left: 6px solid black;
        border-right: 12px solid black;
        border-top: 0px;
        border-bottom: 0px;
        background-color: beige;
        height: inherit;
}

#comment_information thead {
        background: beige;
        text-align: center;
        padding: 1px;
        font-size: 12px;
}

#comment_information td {
        padding: 1px;
}

.odd {
        background-color: black;
        width: 595px;
        margin-right: auto;
        margin-left: auto;
}

.even {
        background-color: #555;
        width: 595px;
        margin-right: auto;
        margin-left: auto;
}

.clear {
        clear: both;
}

.validation-advice {
        display: none;
}
.required, .validate-url {
        border-left: 6px solid white;
        border-right: 6px solid white;
        background-color: white;
        border-top: none;
        border-bottom: none;
        padding-left: 2px;
        padding-right: 2px;
        padding-top: 6px;
        padding-bottom: 6px;
        width: 272px;
        margin-left: auto;      
        margin-right: auto;
}

input.validation-failed {
        border-left: 6px solid red;
        border-right: 6px solid red;
        background-color: white;
        border-top: none;
        border-bottom: none;
}

input.validation-passed {
        border-left: 6px solid #A0D119;
        border-right: 6px solid #A0D119;
        background-color: white;
        border-top: none;
        border-bottom: none;
}

textarea.validation-failed {
        border-left: 6px solid red;
        border-right: 6px solid red;
        background-color: white;
        border-top: none;
        border-bottom: none;
}

textarea.validation-passed {
        border-left: 6px solid #A0D119;
        border-right: 6px solid #A0D119;
        background-color: white;
        border-top: none;
        border-bottom: none;
}

#comment_field {
        padding-top: 5px;
        padding-bottom: 5px;
}

#comment_submit {
        border-left: 5px solid black;
        border-right: 5px solid black;
        border-top: 0px;
        border-bottom: 0px;
        background-color: beige;
        color: #333;
        font-family: verdana;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 10px;
        line-height: normal;
        font-size-adjust: none;
        font-stretch: normal;
        letter-spacing: 0.09em;
        padding: 2px;
        
}

#comment_submit.validation-passed {
        border-left: 5px solid black;
        border-right: 5px solid black;
        border-top: 0px;
        border-bottom: 0px;
        background-color: beige;
        color: #333;
        font-family: verdana;
        font-style: normal;
        font-variant: normal;
        font-weight: normal;
        font-size: 10px;
        line-height: normal;
        font-size-adjust: none;
        font-stretch: normal;
        letter-spacing: 0.09em;
        padding: 2px;
        
}

.center {
        text-align: center;
}

#screenshot {
        margin-top: 2em;
}

#screenshot_buffer {
        text-align: center;
        padding: 2em;
}

/*----------------------------------------------------------------------------*/
/*================================== /layout =================================*/
/*----------------------------------------------------------------------------*/




/*----------------------------------------------------------------------------*/
/*================================= markdown =================================*/
/*----------------------------------------------------------------------------*/

.markdown h1 {
        font-size: 90%
}

.markdown h2 {
        font-size: 90%
}

.markdown h3 {
        font-size: 90%
}

.markdown h4 {
        font-size: 90%
}

.markdown h5 {
        font-size: 90%
}

.markdown h6 {
        font-size: 90%
}

.markdown blockquote {
        margin-left: 2em;
        padding-left: 1em;
        padding-right: 1em;
        padding-top: 5px;
        padding-bottom: 5px;
        border-left: 3px solid black;
}

.markdown ol{
        margin-left: 2em;
}

.markdown ul{
        margin-left: 2em;
}






/*----------------------------------------------------------------------------*/
/*================================ /markdown =================================*/
/*----------------------------------------------------------------------------*/