/*
Theme Name: Channel Thirty Eight
Theme URI: http://channelthirtyeight.org/
Description: Custom theme for Channel Thirty Eight.
Version: 0.5
Author: Sankho Mallik
*/

/*Stylesheet for Channel 38*/

/*******************RESET CSS*******************/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, cite, font, img, small, 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%;vertical-align: baseline;background: transparent;}
ul {list-style: none;}
ol  { list-style: decimal; }
table {border-collapse: collapse; border-spacing: 0;}
input, select, textarea {font-family: "Helvetica Neue", Helvetica, Arial, sans serif;}
legend {display: none;}
/****************END RESET*********************/

/*Containers*/
body { text-align: center; font: normal 12px/14px Arial serif; background: #ccc url(images/bg_body.jpg) repeat-x; }
#main-container { width: 894px; margin: 20px auto 0; padding: 76px 0 0; position: relative; text-align: left; }
h1#logo a { width: 298px; height: 65px; background: transparent url(images/h_logo.gif) no-repeat; position: absolute; top: 0; left: 20px; display: block; text-indent: -999em; z-index: 20; }
#header { background: transparent url(images/bg_header.jpg) repeat-x; height: 24px; width: 100%; position: relative; margin: 0; -moz-border-radius-topleft: 3px; -moz-border-radius-topright: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; }
#main { background: #fff; padding: 30px 20px 40px; overflow: hidden; border-bottom: 5px solid #ccc; }
#main h2, #main h3, #main h4 { text-shadow: 1px 1px 1px #aaa; }
#footer { width: 100%; background: #ccc; height: 12px; position: relative; margin-bottom: 10px; }

/*Globals*/
a { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }
p { font: normal 12px/14px Arial serif; }

/*header*/
#header ul { position: absolute; top: 5px; right: 25px; }
#header ul li { float: left; }
#header ul li h3 a { display: block; padding: 0 12px; height: 20px; font: normal 14px/14px Georgia; text-shadow: 2px 2px 2px #333; color: #fff; font-variant: small-caps; opacity: 0.90; filter: alpha(opacity=90); }
#header ul li h3 a:hover { text-decoration: none; opacity: 1; filter: alpha(opacity=100); }

/* social search header */
#social-search { position: absolute; top: 0px; right: 30px; z-index: 10; }
#social-search p { text-align: right; display: block; font: normal 14px/14px Georgia; color: #aaa; padding-bottom: 8px; }
#social-search ul { overflow: hidden; width: 100%; }
#social-search ul li { float: right; width: 16px; height: 16px; margin-left: 8px; }
#social-search ul li a { display: block; text-indent: -999em; float: right; width: 16px; height: 16px;}
#social-search ul li a.twitter { background: transparent url(images/twitter.png) no-repeat; }
#social-search ul li a.facebook { background: transparent url(images/facebook.png) no-repeat; }
#social-search ul li a.youtube { background: transparent url(images/youtube.png) no-repeat; }
#social-search ul li a.feed { background: transparent url(images/feed.png) no-repeat; }
#social-search #blog-search { margin-top: 10px; float: right; }
#social-search #blog-search fieldset { position: relative; height: 17px; width: 170px; overflow: hidden; }
#social-search #blog-search fieldset input { position: absolute; top: 0; right: -2px; z-index: 10; width: 170px; background: #333; padding: 1px 0 2px 5px; height: 14px; border: none; color: #fff; }
#social-search #blog-search fieldset button { position: absolute; top: 0; right: -2px; z-index: 20; border: none; background: #333 url(images/arrow-right-white.gif) no-repeat center center; width: 15px; height: 17px; display: block; text-indent: -999em; padding: 0; cursor: pointer; }

/*footer*/
#footer ul { position: absolute; top: -2px; right: 25px; }
#footer ul li { float: left; margin-left: 15px; }
#footer a { color: #333; }

/*home page*/
.homepage #main { background: transparent url(images/bg_main.jpg) repeat-x; position: relative; height: 330px; width: 814px; margin: 0; border: 5px solid #ccc; padding: 25px 35px 20px; }
.homepage .sociable { display: none !important; }
#featured-posts { float: left; width: 512px; height: 325px; position: relative; overflow: hidden; -webkit-box-shadow: 0 0 20px #222; -moz-box-shadow: 0 0 20px #222; }
#featured-posts ul#posts { position: absolute; top: 0; left: 0; z-index: 10; width: 99999px; }
#featured-posts ul#posts li { float: left; width: 512px; height: 325px; position: relative; }
#featured-posts ul#posts li img { position: absolute; top: 0; left: 0; width: 512px; height: 325px; }
#featured-posts ul#posts li .info { position: absolute; left: 0; bottom: 10px; }
#featured-posts ul#posts li .text { padding: 10px 20px; background: #fff; background: rgba(255,255,255,.85); color: #333; position: relative; width: 300px; }
#featured-posts ul#posts li .text h4 { font: normal 15px/17px Georgia; color: #333; padding-bottom: 7px; text-shadow: 1px 1px 1px #999; }
#featured-posts ul#posts li .text h2 a { font: normal 25px/28px Georgia; color: #333; text-shadow: 1px 1px 1px #999; }
#featured-posts ul#posts li .description { width: 343px; display: none; }
#featured-posts ul#posts li ul.links { margin-top: 10px; position: relative; top: 0; left: 0; overflow: hidden; }
#featured-posts ul#posts li ul.links li { float: left; padding: 0 5px 0 0; margin-right: 5px; border-right: 1px solid #333; height: auto; width: auto; }
#featured-posts ul#posts li ul.links li a { color: #003399; }
#featured-posts ul#posts li ul.links li.last { border: none; }
#featured-posts a.prev-btn { background: transparent url(images/btn_prev.png) no-repeat; width: 16px; height: 16px; display: block; text-indent: -999em; position: absolute; bottom: 25px; right: 50px; z-index: 30; }
#featured-posts a.next-btn { background: transparent url(images/btn_next.png) no-repeat; width: 16px; height: 16px; display: block; text-indent: -999em; position: absolute; bottom: 25px; right: 25px; z-index: 30; }
#home-sidebar { float: right; width: 280px; }
#home-sidebar .header h2 { background: transparent url(images/h_home_header.png) no-repeat; width: 280px; height: 65px; text-indent: -999em; }
#home-sidebar .header p { font: normal 13px/15px Arial; color: #fff; text-align: right; }
#home-sidebar .header p em { font-style: italic; }
#home-sidebar .archive h3 { background: transparent url(images/h_side_archive.png) no-repeat; width: 223px; height: 21px; text-indent: -999em; float: right; margin-top: 25px; }
#home-sidebar .archive ul { padding: 5px 0 30px; clear: both; }
#home-sidebar .archive ul li a { font: normal 12px/16px Arial; color: #fff; text-align: right; text-decoration: none; display: block; }
#home-sidebar .archive ul li a.more { padding-top: 12px; }
#home-sidebar .archive ul li a span { font: normal 11px/14px Arial; display: block; color: #ccc; }
#home-sidebar .archive ul li a:hover { color: #ccc; }
.homepage #home-sidebar h2.blog a { background: transparent url(images/h_home_blog.png) no-repeat; float: right; width: 231px; height: 29px; text-indent: -999em; display: block; }

/*========================================
==============Blog========================
========================================*/

/* sidebar */
#sidebar { float: right; width: 190px; padding: 0; }
#sidebar ul li.cat a.view-all { border-bottom: 1px dotted #333; margin-bottom: 20px; padding-bottom: 5px; }
#sidebar ul li.cat a { color: #003399; font: normal 18px/24px Georgia; display: block; text-align: right; text-shadow: 1px 1px 1px #ccc; }
#sidebar ul li.cat a:hover { text-decoration: none; color: #333; }
#sidebar ul li.cat ul { padding-bottom: 25px; }
#sidebar ul li.cat ul li { overflow: hidden; padding-top: 10px; }
#sidebar ul li.cat ul li a img { float: right; margin-left: 10px; }
#sidebar ul li.cat ul li a { font: normal 12px/16px Georgia; font-variant: small-caps; text-align: right; display: block; color: #990000; text-shadow: 1px 1px 1px #ccc; }
#sidebar ul li.cat ul li a span { display: block; color: #333; }
#sidebar ul li.cat ul li a:hover { color: #333; }

/* category header */
#cat-header { margin-bottom: 30px; width: 100%; position: relative; height: 157px; overflow: hidden; }
#cat-header img { position: absolute; top: 0; right: 0; z-index: 10; }
#cat-header .bg { position: absolute; top: 0; left: 0; background: transparent url(images/cat-bg.png) repeat-y; width: 100%; height: 100%; z-index: 20; }
#cat-header .bg h3 { margin-top: 20px; padding: 10px 25px 10px 20px; color: #990000; font: small-caps 40px/40px Georgia; }
#cat-header .bg p { padding: 13px 25px 13px 20px; font: small-caps 23px/23px Georgia; color: #333; }
#cat-header .bg h3, #cat-header .bg p { background: #fff; background: rgba(255,255,255,0.85); float: left; clear: left; }

/* posts area */
#post-container { float: left; width: 620px; }
#post-container a { color: #003399; }

/* post */
#post-container .post a.more-link { display: none; }
#post-container .post { padding-bottom: 60px; color: #111; position: relative; }
#post-container .post .social { float: right; width: 125px; }
#post-container .post .fb_share_count_wrapper { float: right; margin-right: 10px; }
#post-container .post .social .tweetmeme_button { float: right; }
#post-container .post p { padding: 5px 0; font: normal 12px/17px Georgia; }
#post-container .post h2 a { font: normal 28px/34px Georgia; color: #990000; width: 480px; display: block; float: left; }
#post-container .post .meta { font: normal 12px/14px Georgia; font-style: italic; color: #999; float: left; clear: left; }
#post-container .post .meta span { font-style: normal; color: #003399; }
#post-container .post .content { padding: 20px 0 25px; clear: left; }
#post-container .post .content ul { list-style-type: disc; padding-left: 20px; }
#post-container .sociable { float: right; color: #333; }
#post-container .sociable .sociable_tagline { display: inline; padding-right: 4px; }

/* blog nav */
#blog-nav { display: block; clear: both; padding: 20px 0; }
#blog-nav a { display: inline; clear: none; }
#blog-nav .new { float: left; }
#blog-nav .old { float: right; }

/* comments form */
#commentform p { padding: 5px 0; }
#commentform p label { padding-left: 10px; }
#commentform p textarea { width: 650px; }
#respond h3 { color: #333; padding-bottom: 5px; font: normal 16px/18px Georgia; }
#commentform input, #commentform textarea { -moz-border-radius: 2px; -webkit-border-radius: 2px; border: 1px dotted #333; padding: 3px; }
#commentform input:focus, #commentform textarea:focus { border: 1px solid #990000; }
#commentform #submit { border: 1px solid #333; background: #333; color: #fff; cursor: pointer; -moz-border-radius: 5px; padding: 5px; -webkit-border-radius: 5px; }
#commentform #submit:hover { background: #990000; }