/*  
Theme Name: Smoking Fetish Blog Theme
Theme URI: http://www.smokingfetishblog.com
Description: High end custom design for Smoking Fetish Blog
Version: 1.0
Author: FDSign
Author URI: http://fdsign.com
*/

/* RESET BROWSERS */ 
html, body {
	margin : 0;
	padding : 0;
}

body {
	font : 12px Helvetica, Verdana, Helvetica, sans-serif; color : #333;
	background : #000 url(images/bg.jpg) no-repeat; background-position:bottom; padding-bottom:160px;
	text-align : center; /* IE centering */
	width : 100%; min-width : 920px; line-height:1.2;
}


p {letter-spacing:1.2px;}
hr{clear:both; margin:20px 0; visibility:hidden;}

h1{font-size:24px; font-family: "Century Gothic", Verdana, Helvetica, Arial, sans-serif; margin:0; color:#666;}

h2{font-size:24px; font-family: "Century Gothic", Verdana, Helvetica, Arial, sans-serif; margin:0; color:#ed0000;}
h3 {margin:3px; font-size:18px; margin-top:6px;}

h2 a:link{text-decoration:none;}

/* LINK PSEUDO */


a:link {
	color : #ed0000;
	text-decoration : none;
}

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

a:hover {
	color : #f90;
	text-decoration : underline;
}


/* LAYOUT & POSITION + HEADER GFX */


#container {position:relative;
text-align : left; width : 920px; margin : auto auto;
background:#fff;}

#header {
	position:absolute; left:0px; top:0px;
	width:920px; height:260px; z-index:10;
}
#header img{border:0; width:920px; height:250px;}

#sub-header {
	position:relative; left:0px; top:0px;
	width:860px; height:180px; z-index:0; overflow:hidden;
}

#nav{position:absolute; top:250px; left:0; width:920px; height:40px;
background:#333 url(images/nav-bg.png) repeat-x; border-bottom:1px solid #444; 
}

#nav ul{width:640px; list-style-type:none; margin-left:-20px;}
#nav li{display:inline; font-size:18px;}
#nav li a{color:#fff; letter-spacing:1.5px; padding:8px 15px;}
#nav li a:hover{background:#f60; text-decoration:none;}
#search{position:relative; top:-40px; left:650px; width:320px;}
#search input {background:url(images/search-bg.png) no-repeat; border:0; width:267px; height:34px; padding:10px 0 0 75px; color:#333;}

/** START MAIN BODY **/
#mainbody{background:#fff url(images/body-bg.png) repeat-x;
background-position:bottom center; position:relative; top:60px; padding-bottom:30px; }
#mainbody-single{background:#fff url(images/body-bg.png) repeat-x;
background-position:bottom center; position:relative; top:68px; padding-bottom:30px; padding-top:20px;}

/** SINGLE **/
.navigation > .alignleft{border:0; margin:10px; background:#333; color:#fff; padding:5px 10px;}
.postmetadata{border:1px solid #ccc; margin:20px 10px; background:#eee; color:#000; padding:7px;}
#respond{margin:30px 40px 10px;}
#respond h3{font-size:24px;}
textarea{background:#fff url(images/jquery-tab-head-bg-act.png) repeat-x; border:1px solid #aaa;}
#submit{background:#333; border:1px solid #f30; color:#f9f9f9; padding:6px;}
#submit:hover{background:#555; border:1px solid #000;}
#comments{margin-top:50px;}
#comments h3{margin:8px;}

/** ARCHIVE **/

.pagetitle{margin:12px;}
.archivepost{background:#f9f9f9; padding:10px; margin:15px -2px; border:1px solid #eee;}


/** CAROUSEL **/

.stepcarousel{
position: relative; /*leave this value alone*/
border: 0px solid black;
top:90px; left:0; 
overflow: scroll; /*leave this value alone*/
width: 900px; /*Width of Carousel Viewer itself*/
height: 270px; /*Height should enough to fit largest content's height*/
background:url(images/featured-bg.png) no-repeat; margin:auto auto;
}

.stepcarousel .belt{
position: absolute; /*leave this value alone*/
left: 0;
top: 0;
}

.stepcarousel .panel{
float: left; /*leave this value alone*/
overflow: hidden; /*clip content that go outside dimensions of holding panel DIV*/
margin: 15px; /*margin around each panel*/
width: 223px; /*Width of each panel holding each content. If removed, widths should be individually defined on each content DIV then. */
}


#slider{position:relative; top:0; left:0; width:900px; height:260px; background:#333 url(images/featured-bg.png) no-repeat; margin:auto auto; overflow:hidden;}
#slider p{color:#fff; text-align:center;}
.ad{width:189px; height:223px; margin:15px;}
#content{width:620px; float:left;}
.post{width:600px; margin:15px 9px;}
.post-top{background:url(images/post-top.png) no-repeat; font-family: "Century Gothic", Verdana, Helvetica, Arial, sans-serif; width:600px; height:60px;}
.post-top h2{width:510px; float:left; margin:10px;}
.date{background:url(images/date.png) no-repeat; float:left; width:51px; height:46px; text-align:center; margin:5px;}
.month{color:#c1c1c1; margin:0; line-height:1; font-size:18px;}
.day{color:#ed0000; margin:0; line-height:1; font-size:24px;}
.post-body{background:#f0f0f0 url(images/post-body.png) repeat-y; padding:10px; padding-bottom:30px;}
.thumb{float:left; border:1px solid #333; margin:10px 10px 10px 0;}
.post-bottom{background: url(images/post-bottom.png) no-repeat; background-position:bottom; width:600px; height:50px; color:#f6f6f6; font-size:20px;}
.postcat{float:left; width:580px; margin:3px 5px;}
.posttags{float:left; width:290px; margin:5px;}
.postcat a, .posttags a{font-size:14px; color:#f70;}
.postcat a:hover, .posttags a:hover{font-size:14px; color:#0cf; text-decoration:none;}
.comments-edit{font-size:13px; color:#f9f9f9; line-height:0.8; margin:0 5px;}
.alignleft{float:left; margin:0 10px 2px 0; border:1px solid #333;}
.alignleft:hover{border:1px solid #f90;}

/** SIDEBAR **/

#sidebar{width:280px; float:left; margin:14px 8px;}
#sidebar-top{width:280px; height:10px;}
#sidebar-body{background:url(images/rightcol.png); padding:0px 10px; margin-top:-32px;}
#sidebar-bottom{width:280px; height:10px; margin-top:-42px;}
#sidebar h4{color:#333; font-family: "Century Gothic", Verdana, Helvetica, Arial, sans-serif; font-size:24px;}
ul.no-side{list-style-image:url(images/arrow-bullet-side.png); margin-left:-20px; font-size:18px; font-family: "Century Gothic", Verdana, Helvetica, Arial, sans-serif;}
.no-side-li{width:180px; height:22px; padding:2px; color:#fff;}
.no-side-li a:hover{color:#f9f9f9; text-decoration:none;}
.no-side-li:hover{background:url(images/tab-bg.png) no-repeat; color:#f9f9f9; text-decoration:none; width:180px; height:22px;}
.sidebanner{margin:5px; float:left;}
#sidebar-body li{list-style-image:url(images/arrow-bullet-side.png); font-size:15px; font-family: "Century Gothic", Verdana, Helvetica, Arial, sans-serif;}

ul .widget{list-style-type:none;}
.widget li{font-size:13px; list-style-type:none; margin: 5px -30px;}
.widgettitle{list-style-type:none;}
#wp-calendar{margin:20px 0; font-size:15px;}
#wp-calendar caption{background:#333; color:#f9f9f9; font-size:20px; font-weight:bold;}

#twitter-1 {font-size:10px; color:#666;}
#twitter-1 li{font-size:12px;}
#twitter-1 h4{font-size:24px;}

/** FOOTER **/

#footer{width:921px; height:475px; background:url(images/footer-bg2.png) no-repeat; position:relative; top:60px; color:#f9f9f9;}



/** JQUERY TABS **/

#left-foot{width:390px; float:left; margin:0 20px; margin-top:110px;}
#mid-foot{width:280px; float:left; margin:0 5px; margin-top:100px;}
#mid-foot h4, #right-foot h4{display:none;}
#mid-foot a, #right-foot a{background:#e00; font-weight:bold; font-size:13px; padding:3px; line-height:1.6; margin:5px 0; color:#fff;}
#right-foot{width:180px; float:left; margin:0 5px; margin-top:100px;}
#left-foot .widget{width:390px; height:250px; background:transparent; }
.tw-rotate { float:left; margin:0 0 1em 0; padding:0; width:100%; position:relative; top:-4px; }
.tw-hide { display:none; }
.without_title { margin-top:0; }
.ui-tabs-nav, .ui-tabs-panel { float:left; width:100%; clear:both; }
.tw-tabbed-widgets, #left-foot .tw-tabbed-widgets { margin:0; padding:0; float:left; width:100%; }




/* tabs */
ul.tw-nav-list, #left-foot ul.tw-nav-list { list-style: none; float:left; width:375px; margin:0; padding:0; background:#333;}
ul.tw-nav-list li, #left-foot ul.tw-nav-list li { list-style:none; list-style-image:none; display:block; float:left; clear:none; margin:2px; padding:0 0 3px 0;  background:url(images/jquery-tab-head-bg.png);}
ul.tw-nav-list li:before, #left-foot ul.tw-nav-list li:before, #left-foot li.widget:before { content:''; }
ul.tw-nav-list a, #left-foot ul.tw-nav-list a { font-weight:bold; float:left; width:auto; padding:0.45em 0.6em 0.55em; color:#f9f9f9;  background:url(images/jquery-tab-head-bg.png); }
ul.tw-nav-list a:hover, #left-foot ul.tw-nav-list a:hover { text-decoration:underline; color:#f9f9f9;   }
ul.tw-nav-list li.ui-tabs-selected, #left-foot ul.tw-nav-list li.ui-tabs-selected  {background:url(images/jquery-tab-head-bg.png); padding-bottom:3px; }
ul.tw-nav-list li.ui-tabs-selected a, #left-foot ul.tw-nav-list li.ui-tabs-selected a,
ul.tw-nav-list li.ui-tabs-selected a:hover, #left-foot li.ui-tabs-selected a:hover { background:url(images/jquery-tab-head-bg-act.png); color:#029ec6; text-decoration:none; font-weight:bold; }
.ui-tabs-panel, #left-foot .ui-tabs-panel { margin:0 0 1em 0; padding:0.75em 0 1em 0; float:left; width:100%;  background:transparent url(images/jquery-tab-bg.png) no-repeat;}
#left-foot .without_title { margin-top:0; }
* html #left-foot li.widget { float:left; margin-bottom:1em; }
* html #left-foot .ui-tabs-panel { float:none; } 

#left-foot .ui-tabs-panel a{color:#f9f9f9; font-size:13px;}



.ui-tabs-nav .ui-tabs-selected a:link, .ui-tabs-nav .ui-tabs-selected a:visited, .ui-tabs-nav .ui-tabs-disabled a:link, .ui-tabs-nav .ui-tabs-disabled a:visited { 
	/* @ Opera, use pseudo classes otherwise it confuses cursor... */
    cursor: text;
}
.ui-tabs-nav a:hover, .ui-tabs-nav a:focus, .ui-tabs-nav a:active,
.ui-tabs-nav .ui-tabs-unselect a:hover, .ui-tabs-nav .ui-tabs-unselect a:focus, .ui-tabs-nav .ui-tabs-unselect a:active { 
	/* @ Opera, we need to be explicit again here now... */
    cursor: pointer;
}

/* Caution! Ensure accessibility in print and other media types... */
@media projection, screen { /* Use class for showing/hiding tab content, so that visibility can be better controlled in different media types... */
    .ui-tabs-hide {
        display: none;
    }
}

/* Hide useless elements in print layouts... */
@media print {
	.tw-rotate { margin:0; }
    ul.tw-nav-list { display: none; }
    .tw-hide, .tw-rotate h1, .tw-rotate h2, .tw-rotate h3, .tw-rotate h4 { display:inherit; }
}