/*
Theme Name: MODE Theme
Theme URI: None
Description: Custom theme designed for MODE.
Version: 1.0 beta
Author: Corey Ballou
Author URI:
Tags: mode, mode visual, visual

        MODE Theme 1.0 beta

        This theme was designed and built by Corey Ballou
*/



/****************/
/* GLOBAL RESET */
/****************/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0;padding:0;border:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body {line-height:1.5;}
ol, ul {list-style: none;}
table {border-collapse:separate;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;}
table, td, th {vertical-align:middle;}
blockquote:before, blockquote:after, q:before, q:after {content:"";}
blockquote, q {quotes:"" "";}
a { text-decoration: none; color: #666; }
a:hover { color: #333; }
a img {border:none;}

/* slightly enhanced, universal clearfix hack */
.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

.clear { clear: both; }





/**********************************/
/*********** WRAPPERS *************/
/**********************************/

body { font-size: 62.5%; font-family: 'Georgia, Verdana, Arial, Sans-Serif'; background: #4e4e4e; color: #666; text-align: center; }
#page { width: 874px; background-color: #FFF; text-align: left; border: 0; margin: 40px auto 0 auto; padding-bottom: 40px; }

/************************************/
/********** HEADER LAYOUT ***********/
/************************************/

/* 874 overall width */
#header { display: block; position: relative; width: 766px; height: 133px; margin: 0 54px 42px; background: transparent url('images/dotted_line.gif') bottom left repeat-x; }

#headerimg 	{ float: left; display: block; position: absolute; bottom: -10px; left: 0; margin: 0; width: 154px; height: 67px; }	/* 175 - 133 = 42 */
#headerimg h1 { display: block; margin: 0; padding: 0; line-height: 67px; height: 67px; width: 154px; z-index: 4; }
#headerimg h1 a { display: block; margin: 0; padding: 0; line-height: 67px; height: 67px; width: 154px; }

#headerimg .description { font-size: 1.2em; text-align: center; }

#headerlinks { float: right; display: inline; position: relative; margin: 0; width: auto; height: 133px; width: 612px; }
#headerlinks ul { position: absolute; bottom: 6px; right: 0; height: 14px; margin: 0; margin-right:14px; padding: 0; }
#headerlinks ul li { list-style-type: none; float: left; display: inline; border-left: 1px solid #666; font-size: 10px; padding: 0 7px; height: 14px; line-height: 14px; }
#headerlinks ul li.first { border-left: 0; padding-left: 0; }
#headerlinks ul li.last { padding-right: 0; }
#headerlinks ul li a { float: left; display: inline; height: 14px; line-height: 14px; color: #666; }
#headerlinks ul li a:hover { color: #333; }
#headerlinks ul li a.rssfeed{ height: 14px; line-height: 14px; padding-right: 24px; background: transparent url('images/btn_rss.gif') top right no-repeat; overflow: hidden; }
#headerlinks ul li a.rssfeed:hover { background-position: bottom right; }

/********************************/
/********* MAIN COLUMN **********/
/********************************/

#content { margin-left: 54px; }

#content.narrowcolumn { float: left; display: inline; width: 508px; padding: 0; }

#content.widecolumn { float: left; display: inline; width: 820px; margin: 0; padding: 0; }
#content.widecolumn .smallattachment { text-align: center; float: left; width: 128px; margin: 5px 5px 5px 0px; }
#content.widecolumn .attachment { text-align: center; margin: 5px 0px; }

/********************************/
/********* BLOG POST ************/
/********************************/

#content .post { display: block; width: 508px; font-size: 12px; line-height: 18px; position: relative; padding-bottom: 20px; margin-bottom: 40px; background: transparent url('images/dotted_line.gif') bottom left repeat-x; }
#content .single.post { background: transparent; }

/* one entry per author */
#content .post .authortag { position: absolute; top: 0; left: -54px; height: 23px; width: 46px; }
#content .post .authortag a { display: block; height: 23px; width: 46px; }
#content .post .authortag a.m  { background: transparent url('images/authors/emp_icon_m.gif') top left no-repeat; }
#content .post .authortag a.aw { background: transparent url('images/authors/emp_icon_aw.gif') top left no-repeat; }
#content .post .authortag a.bm { background: transparent url('images/authors/emp_icon_bm.gif') top left no-repeat; }
#content .post .authortag a.cb { background: transparent url('images/authors/emp_icon_cb.gif') top left no-repeat; }
#content .post .authortag a.cd { background: transparent url('images/authors/emp_icon_cd.gif') top left no-repeat; }
#content .post .authortag a.cg { background: transparent url('images/authors/emp_icon_cg.gif') top left no-repeat; }
#content .post .authortag a.iv { background: transparent url('images/authors/emp_icon_iv.gif') top left no-repeat; }
#content .post .authortag a.jm { background: transparent url('images/authors/emp_icon_jm.gif') top left no-repeat; }
#content .post .authortag a.jp { background: transparent url('images/authors/emp_icon_jp.gif') top left no-repeat; }
#content .post .authortag a.kb { background: transparent url('images/authors/emp_icon_kb.gif') top left no-repeat; }
#content .post .authortag a.mv { background: transparent url('images/authors/emp_icon_mv.gif') top left no-repeat; }
#content .post .authortag a.pp { background: transparent url('images/authors/emp_icon_pp.gif') top left no-repeat; }
#content .post .authortag a.th { background: transparent url('images/authors/emp_icon_th.gif') top left no-repeat; }

#content .post .headerimage { display: block; width: 100%; overflow: hidden; margin-bottom: 30px; }

#content .post h2.title { display: block; width: 100%; font-size: 18px; color: #4e4e4e; line-height: 23px; }
#content .post h2.title a { color: #4e4e4e; }
#content .post h2.title a:hover { color: #000; }

#content .post h3 { color:#4E4E4E; display:block; font-family:Georgia,serif; font-size:14px; line-height:20px; padding: 12px 0 10px; width:100%; }

#content .post small.postedby { display: inline; font-size: 11px; color: #999; }
#content .post small.postedby a { color: #999; }

#content .post .entry { display: block; width: 100%; font-size: 12px; color: #666; padding-top: 12px; }
#content .post .entry p { display: block; width: 100%; margin-bottom: 12px; }
#content .post .entry p a, #content .post .entry ul a { color: #86D0DB; }
#content .post .entry p a:hover, #content .post .entry ul a:hover { color: #333; }

#content .post .entry ul { margin-top: 10px; margin-left: 15px; }
#content .post .entry ul { list-style-type: square; margin-bottom: 12px; }

#content .post .entry p a.more-link { color: #86D0DB; font-weight: bold; }
#content .post .entry p a.more-link:hover { color: #aaa; }

#content .post .postmetadata { display: block; width: 100%; font-size: 10px; color: #666; margin-top: 18px; line-height: 19px; }
#content .post .postmetadata .left { float: left; display: block; width: auto; }
#content .post .postmetadata a.comment { float: left; display: inline; height: 19px; width: 69px; margin-right: 10px; background: transparent url('images/btn_comment.gif') 0 0 no-repeat; overflow: hidden; }
#content .post .postmetadata a.comment:hover { background-position: 0 -19px; }
#content .post .postmetadata span.tags { font-style: italic; }

#content .post .postmetadata.search { margin-top: 0; }

/*****************************/
/********* ARCHIVES **********/
/*****************************/

#content h2.pagetitle { display: block; width: 100%; font-size: 22px; line-height: 30px; color: #88d2df; margin-bottom: 24px; }

/*****************************/
/********* COMMENTS **********/
/*****************************/

#content h3.commenttitle { padding: 28px 0 2px 4px; display: block; width: 100%; font-size: 18px; color: #CCC; line-height: 23px; background: transparent url('images/dotted_line.gif') bottom left repeat-x; }

#content .comments,
#content .nocomments { display: block; width: 100%; padding-bottom: 20px; font-size: 12px; background: transparent url('images/dotted_line.gif') bottom left repeat-x; }

#content .comments p,
#content .nocomments p { display: block; width: 100%; padding: 15px 15px 20px; line-height: 18px; color: #666; }

#content .comments ol.commentlist { display: block; width: 100%; }
#content .comments ol.commentlist li { display: block; width: 100%; padding: 15px 15px 8px; }
#content .comments ol.commentlist li.alt { background-color: #f2f2f2; }
#content .comments ol.commentlist li span.commenter { display: block; color: #333; margin-bottom: 6px; }
#content .comments ol.commentlist li p { line-height: 18px; color: #666; padding: 0; margin-bottom: 12px; }
#content .comments ol.commentlist li p.moderated { font-weight: bold; }


#content h3.postcomment { display: block; width: 500px; padding: 15px 4px; font-size: 14px; color: #666; line-height: 18px; background: transparent url('images/dotted_line.gif') bottom left repeat-x; }

#content #respond { clear: left; float: left; display: block; width: 500px; padding: 12px 4px 30px; background: transparent url('images/dotted_line.gif') bottom left repeat-x; }
#content #respond p { clear: left; float: left; display: block; width: 100%; line-height: 18px; font-size: 12px; margin-bottom: 6px; }
#content #respond p span.loggedin { float: left; display: inline; color: #999; margin-left: 85px; }

#content #respond p label { float: left; display: inline; width: 75px; margin-right: 10px; line-height: 18px; font-size: 12px; color: #999; }
#content #respond p input.text { float: left; display: inline; width: 342px; font-size: 11px; font-family: 'Georgia, Verdana, Arial, Sans-Serif'; }
#content #respond p textarea { float: left; display: inline; width: 342px; height: 100px; font-size: 11px; font-family: 'Georgia, Verdana, Arial, Sans-Serif'; line-height: 15px; }
#content #respond p button.submit { float: left; display: inline; width: 150px; height: 19px; margin: 12px 0 0 85px; border: 0; background: transparent url('images/btn_submit.gif') 0 0 no-repeat; cursor: pointer; cursor: hand; }
#content #respond p button.submit:hover { background-position: 0 -19px; }

/****************************/
/******** RIGHT NAV *********/
/****************************/

#sidebar { position: relative; display: block; float: right; width: 145px; margin-right: 54px; }

#sidebar ul li.current-cat, #sidebar ul li.current-cat a { color: #333; }

#sidebar ul li.authors { display: block; margin-top: 40px; }
#sidebar ul li.authors h2.authors { display: block; width: 67px; height: 8px; line-height: 8px; margin-bottom: 10px; background: transparent url('images/nav_authors.gif') top left no-repeat; }

#sidebar ul li.categories { display: block; }
#sidebar ul li.categories h2.categories { display: block; width: 67px; height: 8px; line-height: 8px; margin-bottom: 10px; background: transparent url('images/nav_categories.gif') top left no-repeat; }

#sidebar ul li.logout { display: block; margin-top: 40px; }

#sidebar ul li.search { display: block; margin-top: 40px; }
#sidebar ul li.search h2.search { display: block; width: 67px; height: 8px; line-height: 8px; margin-bottom: 10px; background: transparent url('images/nav_search.gif') top left no-repeat; }
#sidebar ul li.search div input#s { float: left; width: 96px; margin: 0; padding: 0 2px; height: 13px; font-size: 10px; color: #666; font-family: 'Georgia, Verdana, Arial, Sans-Serif'; }
#sidebar ul li.search div input#searchsubmit { float: left; margin-left: 5px; border: 0; height: 17px; line-height: 17px; width: 17px; padding: 0; overflow: hidden; background: transparent url('images/btn_search.gif') 0 0 no-repeat; cursor: pointer; cursor: hand; }
#sidebar ul li.search div input#searchsubmit:hover { background-position: 0 -17px; }
/*****************************/
/********* FOOTER ************/
/*****************************/

#footer { clear: both; display: block; width: 874px; height: 77px; margin: 10px auto 0px; }
#footer .logo { float: right; display: block; height: 27px; width: 143px; margin-right: 54px; background: transparent url('images/logo_mode.gif') top right no-repeat; }