/* @override 
	http://localhost:3000/css/styles.css
	http://cotmf.com/css/styles.css
*/

/*******************************************************************/
/* css by justintalbott.com ****************************************/
/*******************************************************************/

/* reset & restore ****************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, 
tbody, tfoot, thead, tr, th, td 
{ margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
li { display: inline; }
blockquote, q { quotes: none; }
:focus { outline: 0; }
ins { text-decoration: none; }
del { text-decoration: line-through; }
table { border-collapse: collapse; border-spacing: 0; }
img { -ms-interpolation-mode: bicubic; }
a { cursor: pointer; text-decoration: none; }
a img { border: 0; }
em { font-style: italic; }
strong { font-weight: bold; }

/* general classes ****************************************/
.clear { clear: both; }
.hide { display: none; }
.textbox { padding: .1em .2em; }
.rounded, #cotmf img, #nav, #author img, #comments img, #comment, #list li a, #list li img, #pagination, #comment_form img, #comment_form, #comment_form img , #cotmf-video object, #cotmf-video embed{ -moz-border-radius: 5px; -webkit-border-radius: 5px; }
.shadow, #cotmf img, #author img, #comments img, #list li a, #comment_form img , #cotmf-video object, #cotmf-video embed { -webkit-box-shadow: 0 0 5px #ccc; -mozilla-box-shadow: 0 0 5px #ccc; }
#post_image, #top textarea { -webkit-box-shadow: 0 0 5px #fff; -mozilla-box-shadow: 0 0 5px #fff; }
#author img, #comments img, #comment_form img { border: 1px solid #ccc; padding: 3px; width: 70px; background: #fff; }
#nav, #comment, #pagination, #comment_form { display: block; background: #776; margin-top: 30px; }
#top form, #about, #comment_form { position: relative; display: block; }
#notice, #error { margin: 10px 20px 20px 20px; padding: 15px; border: 1px solid #cca; background: #fafafa; }
#top .slidewrap { position: relative; margin: 5px 0; }

/* font family ****************************************/
body { font-family:"Lucida Grande",geneva,helvetica,sans-serif; }

/* font colors ****************************************/
p, li { color: #333; }
a { color: #00f; }
input:focus, textarea:focus, select:focus { background: #fffddd; }
#top a, #nav li a, #comment, #pagination a, #top label { color: #fff; }
#top a:hover, #nav li a:hover, #comment:hover, #pagination a:hover, #top .logged-in a:hover, a:hover { color: #eae; }
#list li a:hover, #author img:hover, #comment img:hover { border-color: #eae; }

/* font styles ****************************************/
p, li { padding: .3em 0; /* 7px */ font-size: .875em; /* 14px */ line-height: 1.438em; display: block; } 
#top a.top-link { display: block; padding: 5px 0; }
.date, .username { font-style: italic; font-size: 10px; opacity: .8; -moz-opacity: .8; padding: .2em 0; }
.uppercase, #nav li a, #top a, #comment, #pagination span, #pagination a, label { text-transform: uppercase; letter-spacing: 2px; }
.caption { font-size: 1em; padding: 0 0 19px 0; }
label { font-size: .6em; }
textarea { padding: 2% 1%; width: 98%; }

/* here we go ****************************************/
body { margin-bottom: 30px; }
.wrap { width: 1024px; margin: 0 auto; }
#top { width: 100%; background: #111; margin-bottom: 20px; padding: 15px 0; position: relative; }
#top .wrap { position: relative; text-align: right; background: #111; }
#top .logged-in { position: absolute; right: 0; bottom: -35px; font-size: .7em; }
#top .logged-in a { color: #333; }

#content { width: 580px; float: left; display: inline; margin-right: 22px; }

#sidebar { width: 422px; float: left; }
#hand { display: block; height: 230px; width: 422px; background: url(/imgs/hand.png) no-repeat; margin-top: 25px; position: relative; }
h1 { display: block; height: 140px; width: 422px; background: url(/imgs/logo.png) no-repeat; overflow: hidden; text-indent: -9999px; }
#expand { display: block; height: 70px; width: 100px; position: absolute; top: 120px; }
h1:hover { background-position: bottom right; }
#about { text-align: right; margin: 20px; font-size: .7em; }

#nav { width: 100%; }
#nav li { float: left; width: 32%; font-size: .7em; }
#nav li a, #comment { display: block; text-align: center; padding: 15px 5%; }

#cotmf img { max-width: 540px; border: 1px solid #ccc; display: block; margin: 15px auto; padding: 5px; }
#cotmf-video object, #cotmf-video embed { margin: 15px 0 15px 19px; display: block; }
#author { font-size: 1.1em; }

#author, #comments li { position: relative; display: block; margin: 40px 24px; padding: 0 0 0 95px; }
#author .avatar, #comments li .avatar { position: absolute; left: 2px; }
#comment_form img { position: absolute; top: 10px; left: 10px; }

#comment { display: block; margin: 30px 20px; width: 86%; text-align: center; font-size: .8em; }
#comment_form { padding: 20px 20px 20px 100px; position: relative; margin: 20px 20px; }
#comment_form textarea {margin: 10px 0; }

/* index ****************************************/
#list li { width: 135px; padding: 5px; float: left; }
#list li a { float: left; overflow: hidden; border: 1px solid #ccc; background: #fff; padding: 5px; }
#list li img { width: 120px;  }

#pagination { margin-top: 40px; }
#pagination .prev_page, #pagination .next_page { display: block; float: left; width: 40%; padding: 15px 5%; font-size: .8em; }
#pagination a.last { text-align: right; }

#top form { width: 100%; text-align: left; }
#top .third { width: 340px; padding-left: 200px; position: relative; margin: 10px 20px; }
#top label { position: absolute; top: 5px; left: 0; }
#top label.noblock { position: relative; top: 0; }
#post_image { width: 100%; background: #fff; }
#post_video_link { width: 98.6%;; }
#top textarea { height: 40px; }
#top form .disclaimer { display: block; color: #fff; font-size: .7em; }