/* validate with http://jigsaw.w3.org/css-validator/#validate_by_input */
html
{
    background: #4F5054;
    color: #fff;    
}

body
{
    background: #4F5054;
    color: #fff;    
    font-size: 1em;
    font-family: Tahoma, Geneva, sans-serif;
    color: #424242;
}

#content img
{
    margin-right: 1em;
    margin-bottom: 1em;
}

#archive td, #archive th
{
    padding: .1em .5em;
    border-right: 2px solid #fff;
}

#archive th
{
    color: #fff;
    background: #000;
}

#archive td.comments, #archive th.comments
{
    text-align: center;
}

#archive table
{
    margin-bottom: 1em;
}

#footer td
{
    vertical-align: top;
    padding-right: 1em;
}

#content td, #content th
{
    background: #fff;
    font-size: 1.1em;
}

#page-margin
{
    margin: 1em; /* need a wrapper to have a minimum margin */
}

#page-body
{
    margin: 0 auto; /* center the page */
    max-width: 70em;       
    min-width: 57em;
    border: 2px solid #000;
}

#header
{
    color: #fff;
    background: #060707;
    padding: .5em;
    min-height: 7.2em; 
    height: 7.2em;        /* see "ie8 min-height hack" comment at end of page */
    overflow: auto/9;   /* ie8 hack. overflow is broken in ie8. /9 will prevent ie8 from using overflow but ie8 will resize for us. */
}

#title
{
    float: left;
    color: #ee1c25;
    background: #060707;
    font-size: 4em;
    line-height: .8em;
    text-transform: uppercase;
    text-align: right;
}

#title a
{
    color: #ee1c25;
    text-decoration: none;
}

#title a:visited
{
    color: #ee1c25;
    text-decoration: none;
}

#cover
{
    float: left;
    margin:  .4em 0 0 1em;
}

#right-header
{
    float: right;
    width: 35em;
}

#search
{
    color: #fff;
    background: #060707;
    text-align: right;
    margin: .5em 1em 0 0;
}

#search input
{
    vertical-align: top;
}

#menu
{
    color: #fff;
    background: #060707;
    margin-top: 2.2em; /* lines the bottom of text with Nicole Murphy */
    float: right;
}

#follow
{
    float: right;
}

#menu ul
{
    float: right;
}

#menu a
{
    color: #fff;
    background: #060707;
    text-decoration: none;
    font-weight: bold;
}

#menu a:visited
{
    color: #fff;
    background: #060707;
    text-decoration: none;
    font-weight: bold;
}

#menu a:hover
{
    text-decoration: underline;
}

#menu li
{
    float: left; /* display items horizontally instead of vertically. */
    margin-right: 1em;
    margin-top: .7em; /* lines bottom of text with rss and twitter images. */
}

#content
{
    clear: both;
    background: #fff;
    min-height: 40em;
    height: 40em;	/* see "ie8 min-height hack" comment at end of page */
    padding: 2em;
    font-size: 1.1em;
}



#content a, h1
{
    color: #ee1c25;
    background: #fff;
    text-decoration: none;
}

#content a:visited
{
    color: #b33c42;
    background: #fff;
    text-decoration: none;
}

#content h1 a:visited
{
    color: #ee1c25;
    background: #fff;
    text-decoration: none;
}

#content a:hover
{
    text-decoration: underline;
}

#content h1
{
    font-size: 2em;
    font-weight: bold;
} 

#content h2
{
    font-size: 1.5em;
    color: #060707;
    border-bottom: 1px dotted #060707;
    margin-bottom: .5em;
} 

#content p, #content ul, #content ol, #content blockquote
{
    margin-bottom: 1em;
}

#content ul, #content ol
{
    margin-left: 4em;
}

#content blockquote
{
    margin-left: 2.7em;
    margin-right: 4.7em;
    padding: .5em;
    background-color: #e0e0e0;
}

#content ul li
{
    list-style-type: disc;
}

#content ol li
{
    list-style-type: decimal;
}

#footer
{
    color: #fff;
    background: #060707;
    padding: 1em;
    overflow:auto;
}

#footer a, #footer a:visited
{
    color: #fff;
    text-decoration: none;
}

#footer a:hover
{
    text-decoration: underline;
}

#footer ul
{
    margin-bottom: 1em;
}

#footer li
{
    margin-bottom: .2em;
}

#footer h2, #footer h4
{
    font-weight: bold;
    color: #ee1c25;
}

#footer .signin
{
    color: #060707;
}

#footer .signin a:hover
{
    color: #fff;
}

#footer .left, #footer .middle
{
    float: left;
    width: 30%;
}

#footer .right
{
    float: right;
    width: 35%;
}

#footer .recentPosts span
{
    visibility: collapse;
}

.post, .comment
{
    position: relative;
    margin-left: 3em;
}

.post .date
{
    color: #ee1c25;
    background: #060707;
    font-size: .8em;
    width: 3em;
    padding: .5em;
    text-align: center;
    font-weight: bold;
    left: -5em;
    top: 0;
    position: absolute;
    -webkit-border-radius: .4em; 
    -moz-border-radius: .4em;
}

.post .year
{
    color: #fff;
    background: #060707;
    font-weight: normal;
}

.post .footer
{
    border-top: 1px dotted;
    margin-bottom: 3em;
}

.post .footer p
{
    text-align: right;
}

div.comment 
{
    padding: 1em;
    margin-bottom: 1em;
}

div.comment .content
{
    margin-bottom: 2em;
}
    
div.comment, #content div.comment a, #content div.comment a:visited
{
    background-color: #FFD9D9;
}

div.comment
{
    -webkit-border-radius: 1em; 
    -moz-border-radius: 1em;
}
    
.comment .author
{
    font-style: italic;
}

/****************************************************************************************************************************************************
BlogEngine.NET hacks.

Following css is for when BlogEngine.NET inserts HTML code that we have no control over via the site.master, CommentView.ascx or PostView.ascx files.
****************************************************************************************************************************************************/
#relatedPosts a
{
    margin-right: 1em;
}

#relatedPosts div
{
    margin-bottom: 1em;
}

#comment, #relatedPosts p
{
    font-size: 1.5em;
    color: #060707;
    border-bottom: 1px dotted #060707;
} 

#relatedPosts
{
    position: relative;
    margin-left: 3em;
}

#comment-form
{
    position: relative;
    margin-left: 3em;
}

#comment
{
    margin-left: 2em; /* Don't know why this must be different to "#comment-form, #relatedPosts" */
}

.commentForm {
	padding: 5px;
}

.commentForm label {
	float: left;
	display: block;
	width: 80px;
	margin-top: 4px;
}

.commentForm input {
	width: 300px;
	margin-bottom: .5em;
}

.commentForm textarea {
	width: 100%;
	height: 150px;
	border:1px solid silver;
}

#commentPreview{
	display:none;
}

.success {
	color: green;
	font-weight: bold;
}

.commentForm .bbcodeNoLivePreview {
    visibility: hidden;
}

#addcomment
{
    font-weight: bold;
}

/****************************************************************************************************************************************************
ie8 min-height hack

ie8 use height instead of min-height. Therefore when min-height is used for other browsers we set the height as well for ie8 and probably less than
ie8. The following css now sets height for all browsers other that ie8 back to auto the way it should be.

see http://www.webdevelopment2.com/ie-css-min-height-hack/ for more info. 
****************************************************************************************************************************************************/
html > body #content, html > body #header
{
    height: auto;
}