re@charset "utf-8";

/*
Theme Name: Tutorial Blog 01-2010
Theme URI: http://tutorialblof.info/
Description: Tutorial Blog Theme is a two-column, fixed-width and widget-ready Wordpress theme with featured content gallery slider.
Version: 1.0
Author: Mr. Hoang
Author URI: http://tutorialblog.info/

*/

/* CSS Document */
* { text-decoration: none;}
a{ color: #820306; text-decoration: none;}
a:hover { color: #006;text-shadow: 2px 2px 2px #cac8c8;}
#header_bg { background: #3f3f3f;}
#header_bg img#logo_img { margin-top: 20px;}

#search { background: url(images/input_s.jpg) top left no-repeat; width: 250px; height: 33px; float: right; margin-top: 40px; }
#searchform input  { border: none; float: left;}
#searchform input#s { background: none; width: 170px; color: #333; margin-left: 8px; padding-top: 7px;}
#searchform input#searchsubmit {width: 57px; height: 33px; background: url(images/submit_s.jpg) no-repeat top left;}


#nav_bar {height: 75px; background: url(images/nav_bg.jpg) left bottom repeat-x;}
#nav_bar ul#nav { list-style: none; height: 33px;}
#nav_bar ul#nav li { float: left; margin-left: 3px;}

#nav_bar ul#nav li a { display: block; height: 33px;background: url(images/nav_li_bg.jpg) top left repeat-x; color: #333; width:100px; text-align:center;}
#nav_bar ul#nav li a span { display: block; height: 33px; background: url(images/nav_l.jpg) top left no-repeat;}
#nav_bar ul#nav li a span span { display: block; height: 33px; background: url(images/nav_r.jpg) top right no-repeat; line-height: 33px; padding: 0 20px; text-transform: capitalize;}
#nav_bar ul#nav li a:hover { display: block; height: 33px;background: url(images/nav_li_bg_hover.jpg) top left repeat-x; color: #333;}
#nav_bar ul#nav li a:hover span { display: block; height: 33px; background: url(images/nav_l_hover.jpg) top left no-repeat;}
#nav_bar ul#nav li a:hover span span { display: block; height: 33px; background: url(images/nav_r_hover.jpg) top right no-repeat; line-height: 33px; padding: 0 20px; color: #FFF; text-transform: capitalize;}

#nav_bar ul#nav li ul li a, #nav_bar ul#nav li ul li a span, #nav_bar ul#nav li ul li a span span,#nav_bar ul#nav li ul li a:hover, #nav_bar ul#nav li ul li a:hover span, #nav_bar ul#nav li ul li a:hover span span  {line-height: 42px; color: #FFF; text-decoration: none; background: none;padding: 0px; padding-right: 10px; text-transform: capitalize;}

#nav_bar ul#nav li ul li a:hover, #nav_bar ul#nav li ul li a:hover span, #nav_bar ul#nav li ul li a:hover span span {color: #09C;}

#nav_bar ul#nav li ul { display:none;  position: absolute; width: 100%; left: 0;}

#nav_bar ul#nav li:hover ul {display: block;  float: left;}

/* Content
----------------------------------------------------------------------------------------------------*/
.left_content {}
.content_all { padding: 15px 0px; border-bottom: 1px dotted #999;}
.content {}
.content_bottom { margin-bottom: 5px;}
.title_content  {width: 100%;}
div.download, a.download { display: block;background: #CCC; border: #999 solid 1px; padding: 5px 10px; margin-bottom: 5px; color: #820306;}
a.download:hover { background: #d6d6d6;}

.download_icon { display: block;background: url(images/incon_download.png) left center no-repeat; height: 35px;}
.download_icon:hover { display: block;background: url(images/incon_download_hover.png) left center no-repeat; height: 35px;}

.preview_icon { display: block;background: url(images/preview_icon.jpg) left center no-repeat; height: 35px;}
.preview_icon:hover { display: block;background: url(images/preview_icon_hover.jpg) left center no-repeat; height: 35px;}

.preview_icon a, .download_icon a { display: block; padding-left: 40px; line-height: 35px; text-transform: uppercase; font-weight:bold;}

.content .grid_9 h1 a {letter-spacing: -1.5px;}
.content .grid_9 p.info { padding: 0;}
.content .comment a { display: block; width: 68px; height: 62px; background: url(images/icon_comment.jpg) top left no-repeat; float: right; line-height: 57px; text-align: center; font-size: 20px; color: #000;}
p.publish { padding-top: 5px;}
.entry { padding-top: 15px;}
.entry img { max-width: 400px; padding:10px; background: #CCC; border: 1px solid #999; margin: 0 70px;}
.entry p { padding: 5px;}
.entry ol { list-style: decimal; margin-left: 15px; margin-bottom: 10px;}
.entry h2 { color: #006;text-shadow: 2px 2px 2px #cac8c8;}
.thub_img { width: 190px; float: left; }
.thub_img img{background-color: #f0f0f0; border: 1px #c0c0c0 solid; overflow: hidden; padding: 5px;}
.thub_img a.readmore {display: block;width: 135px; height: 36px;background: url(images/readmore.jpg) left center no-repeat; line-height: 36px; color: #FFF; text-align: center; margin-top: 15px; margin-left: 15px;}
.thub_img a:hover.readmore {background: url(images/readmore_hover.jpg) left center no-repeat;}
.post-rate { margin-top: 5px;}

/* Comment
----------------------------------------------------------------------------------------------------*/
#commentform input, #commentform textarea#comment { padding: 9px; border: solid 1px #E5E5E5; outline: 0;font: normal 13px/100% Verdana, Tahoma, sans-serif;width: 200px;	background: #FFFFFF url('bg_form.png') left top repeat-x;background: -webkit-gradient(linear, left top, left 25, from(#FFFFFF), color-stop(4%, #EEEEEE), to(#FFFFFF));background: -moz-linear-gradient(top, #FFFFFF, #EEEEEE 1px, #FFFFFF 25px);box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;-moz-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;-webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; margin-bottom: 5px;}
#commentform textarea#comment { width: 600px;max-width: 600px;height: 150px;line-height: 150%;}
#commentform input:hover, #commentform textarea:hover, #commentform input:focus, #commentform textarea:focus { border-color: #C9C9C9; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 8px;}
#commentform .form label { margin-left: 10px; color: #999999; }
#commentform .submit input {	width: auto;padding: 9px 15px;background: #617798;border: 0;font-size: 14px;color: #FFFFFF;	-moz-border-radius: 5px;	-webkit-border-radius: 5px;	}

ol.commentlist > li { margin-bottom: 10px; padding: 10px; background-color: #e5e5e5; border: #c8c6c6 1px solid; list-style: none;}
ol.commentlist > li  p { clear: both; padding: 5px 10px; background: #FFF;}

.comment_inner { background: #efefef; margin-bottom: 5px; padding: 10px 10px 0 10px; border: 1px #9d9b9b solid;}
.comment-author img.img_avata {float: left;padding: 3px; border: 1px solid #CCC;}
.comment_text p.author_text { font-weight: bold; padding-bottom: 5px; border-bottom: 1px #CCC dotted; margin-bottom: 5px;}

/* Sidebar
----------------------------------------------------------------------------------------------------*/
.right_content { border: #cfcfcf 1px dotted; background-color: #efefef; margin-top: 50px;}
.right_content_inner { padding: 0 15px 10px 15px;}
.right_content li {list-style: none;}
#subscribe { padding-left: 15px; margin-top: 15px;}
#subscribe p { width: 186px; height: 29px; background: url(images/subscribe_mail.jpg) left no-repeat; float: left; padding-left: 5px;}
#subscribe p input {border: none;line-height: 29px; margin-top: 5px;}
#subscribe img {position: absolute;top: -7px;}
#advertisement h1, #tags h1, #friends h2, h2.widgettitle {width: 175px; margin: 10px 0; letter-spacing: -2px; color: #FFF; padding-left: 15px;}
h2.widgettitle { background-color: #0C9;}
h2.widgettitle
#advertisement {}
#advertisement h1 { background-color: #42c9fb;}
#advertisement .adver_img { width: 260px; margin: 0 auto;}
#advertisement a { margin-right: 5px;}

#tags {}
#tags h1 { background-color: #f86a1e;}
#tags #tags_inner { padding: 10px;}

#friends h2 { background-color: #666666;}
#friends { list-style: none; }
#friends li ul { width: 80%; margin: 0 auto;}
#friends li li {background-color: #ebebeb; margin-bottom: 10px; padding: 5px 5px 5px 15px; border: 1px #dedede solid;}
#friends li li a { color:#000;}
#friends li li a:hover {color:#820306;}
.textwidget { padding: 10px}
/* Footer
----------------------------------------------------------------------------------------------------*/
#footer { background: #3F3F3F url(images/footer_bg.jpg) top left repeat-x; color: #CCC; min-height: 43px;}
#footer p { text-align: right;}
#footer a { color: #0FC;}
#footer a:hover { color: #CCC; text-shadow: 1px 1px 1px #999;}
#footer_iner { padding: 10px 0;}
#footer div.ranpost { float: left; border: 1px solid #CCC; width: 90px; height: 90px; overflow: hidden; background: #a6a5a5; margin-right: 5px; margin-bottom: 5px;}
#footer div.ranpost img { margin: 2px;}
#footer div.ranpost a { display: block; width: 86px; height: 86px; opacity: 0.7; }
#footer div.ranpost a:hover {opacity: 1;}
/* Featured
----------------------------------------------------------------------------------------------------*/
#preview{position:absolute;	border:1px solid #ccc;background: #333 ;padding: 5px;display:none;color: #CCC;text-align: center;}

#featured{ padding-right:250px; position:relative; border:5px solid #ccc; height:310px; background:#fff;}
#featured ul.ui-tabs-nav{ position:absolute; top:0; left:470px; list-style:none; padding:0; margin:0; width:480px;}
#featured ul.ui-tabs-nav li{ padding:1px 0; padding-left:13px;  font-size:12px; color:#666; }
#featured ul.ui-tabs-nav li img{ float:left; margin:2px 5px; background:#fff; padding:2px; border:1px solid #eee; width: 80px; height: 50px; overflow: hidden;}
#featured ul.ui-tabs-nav li span{ font-size:11px; font-family:Verdana; line-height:18px; }
#featured li.ui-tabs-nav-item a{ display:block; height:60px; color:#333;  background: #e9e6e6; line-height:20px;}
#featured li.ui-tabs-nav-item a:hover{ background:#f4f4f4; }
#featured li.ui-tabs-selected{ background:url('images/selected-item.gif') top left no-repeat; }
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ background:#ccc; }
#featured .ui-tabs-panel{ width:470px; background:#999; position:relative;height: 310px;overflow: hidden;}
#featured .ui-tabs-panel img { max-width: 470px;}
#featured .ui-tabs-panel .info{ position:absolute;top: 240px; left:0; height:70px; background: url('images/transparent-bg.png'); width: 100%;}
#featured .info h2{ font-size:18px; font-family:Georgia, serif; color:#fff; padding:5px; margin:0; overflow:hidden; }
#featured .info p{ margin:0 5px; font-family:Verdana; font-size:11px; line-height:15px; color:#f0f0f0;}
#featured .info a{ text-decoration:none; color:#fff; }
#featured .info a:hover{ text-decoration:underline; }
#featured .ui-tabs-hide{ display:none; }

/* Featured
----------------------------------------------------------------------------------------------------*/

.wp-pagenavi { margin-top: 10px; clear: both;}

.wp-pagenavi a, .wp-pagenavi a:link {
	padding: 2px 4px 2px 4px; 
	margin: 2px;
	text-decoration: none;
	border: 1px solid #0066cc;
	background-color: #FFFFFF;	
}
.wp-pagenavi a:visited {
	padding: 2px 4px 2px 4px; 
	margin: 2px;
	text-decoration: none;
	border: 1px solid #0066cc;
	background-color: #FFFFFF;	
}
.wp-pagenavi a:hover {	
	border: 1px solid #000000;
	background-color: #FFFFFF;
}
.wp-pagenavi a:active {
	padding: 2px 4px 2px 4px; 
	margin: 2px;
	text-decoration: none;
	border: 1px solid #0066cc;
	background-color: #FFFFFF;	
}
.wp-pagenavi span.pages {
	padding: 2px 4px 2px 4px; 
	margin: 2px 2px 2px 2px;
	border: 1px solid #000000;
	background-color: #FFFFFF;
}
.wp-pagenavi span.current {
	padding: 2px 4px 2px 4px; 
	margin: 2px;
	font-weight: bold;
	border: 1px solid #000000;
	background-color: #FFFFFF;
}
.wp-pagenavi span.extend {
	padding: 2px 4px 2px 4px; 
	margin: 2px;	
	border: 1px solid #000000;
	background-color: #FFFFFF;
}

/* Google Adsense
----------------------------------------------------------------------------------------------------*/
.google_160 { width: 160px; margin: 0 auto;}
.ads_300 { min-width: 300px;}

/* WordPress Comments Styles */
h3#comments{
	margin:0px 0 0px 0;
}
.avatar{
	padding:3px;
	float:left;
	margin:0 10px 10px 0px;
	position:relative;
	background:#666 url(images/avatar.gif) no-repeat center center;
}
.avatar:hover{
	background:#ccc;
	border:0px solid #001f40;	
}