/*
Theme Name: StepInto theme
Theme URI: http://tutorialzine.com/
Description: Design for http://tutorialzine.com
Version: 1
Author: Martin Angelov
Author URI: http://tutorialzine.com
Tags: custom
*/



body,h1,h2,h3,h4,p,quote,small,form,input,ul,li,ol{
	margin:0px;
	padding:0px;
}

body{
	background:url(images/bg.gif) repeat-x #162934;
	font-family:Arial, Helvetica, sans-serif;
	color:#51555C;
	height:100%;
	
	font-size:12px;
}

p{
	line-height:18px;
}

pre{
	line-height:18px;
}

a, a:visited {
	/*color:#d10200;*/
	color:#007bc4;
	text-decoration:underline;
	outline:none;

}
a:hover{
	text-decoration:none;
}

a img{
	border:none;
}

.main{
	width:971px;
	margin:15px auto;
	/*text-align:left;*/
}

.clear{
	clear:both;
}

h1{
	text-indent:-9999px;
	overflow:hidden;
	background:url(images/logo.gif) no-repeat;
	width:250px;
	height:54px;
	cursor:pointer;
}

#logo{
	width:250px;
	height:54px;
	overflow:hidden;
}

#tabs{
	height:59px;
	overflow:hidden;
	margin:40px 0px 0px 20px;
	width:auto;
}

#tabs a, #tabs a:visited{
	text-indent:-999px;
	overflow:hidden;
	display:block;
	background:url("images/button_labels_sprite.png") no-repeat #2d363b;
	margin-right:2px;
	
	height:59px;
	outline:none;
}

#tabs a:hover,#tabs a.active{
	background-color:#1d4156;
}

#tabs a.tutorials{
	background-position:center 0;
	width:186px;
}


#tabs a.freebies{
	background-position:center -60px;
	width:180px;
}

#tabs a.articles{
	background-position:center -120px;
	width:170px;
}

#tabs a.microtuts{
	background-position:30% -180px;
	width:210px;
}


ul li{
	list-style:none;
	float:left;
	margin-right:10px;
}

.topContent ul li{
	float:none;
	list-style:disc;
	margin-left:30px;
}

#topBar,#tabs a{
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

#topBar{
	height:30px;
	background:url(images/top_bar_center.gif) repeat-x;
	padding:10px 5px 5px 28px;
}

#topLeft{
	height: 45px;
	float:left;
	width:12px;
	background:url(images/top_bar_left.gif) no-repeat;
}

#topRight{
	height: 45px;
	float:right;
	width:12px;
	background:url(images/top_bar_right.gif) no-repeat;
}

#topMid{
	width:800px;
	padding:10px 5px 5px 28px;
	height:30px;
	overflow:hidden;
}

#content{
	background:url(images/bg_sidebar.gif) right repeat-y white;
}

#footer{
	background:url(images/bottom_bar_mid.gif) repeat-x #1b3240;
	padding:20px 0 20px 20px;
}

#bottomBottom{
	background:url(images/bottom_bar_bot.gif) top no-repeat;
	height:9px;
}

#botContent{
	padding:230px;
}

#cArea{
	width:670px;
	float:left;
	background:url(images/bg_top_content.gif) top repeat-x;
	overflow:hidden;
}

#sideBar{
	width:300px;
	float:left;
	overflow:hidden;
}

.tC{
	padding:20px;
}

.cats, .catsR{
	height:27px;
	overflow:hidden;
}

.cats a, .cats a:visited,
.catsR a, .catsR a:visited
{
	margin:0px;
	padding:5px 10px 0;
	background-color:#0c1d27;
	height:20px;
	
	display:block;
	
	overflow:hidden;
	white-space:nowrap;
	
	color:#eeeeee;
	font-weight:bold;
	font-family:sans-serif,Arial;
	
	text-decoration:none;
	outline:none;
	text-align:center;
	
	border:1px solid #214255;
	
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
}

.cats a:hover{
	background-color:#162f3d;
	color:#fcfcfc;
}

.catsR a,.catsR a:visited{
	background-color:#cf3614;
	border:1px solid #333;
	color:white;
	text-shadow:0 1px 1px darkred;

}

.catsR a:hover{
	background-color:#D80600;
	color:white;
}


h2,h3{
	margin-top:20px;
	color:#10649f;
	font-size:30px;
	font-weight:bold;
		
	font-family:"Trebuchet MS", Rockwell,Arial,sans-serif;
	border-bottom:1px solid #dddddd;
}

h2.topTitle{
	margin:0px;
	font-size:36px;
	color:#a84c10;
	height:normal;
	
	border:none;
}

.redError{
	color:#da0000;
}

p{
	margin:15px 0px 15px 0px
}

.topContent p{
	text-align:justify;
}

.topMeta{
	color:#999999;
	font-size:10px;
}

.wp-caption {
	-moz-border-radius:3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius:3px;
	
	background-color:#F3F3F3;
	border:1px solid #DDDDDD;
	margin:10px 10px 10px 0px;
	padding-top:4px;
	text-align:center;
}

.fancy-table{ border:1px solid #EEEEEE;}

.fancy-table td, .fancy-table th{
	background:none repeat scroll 0 0 #FCFCFC;
	border:1px solid #EEEEEE;
	padding:5px;
	
	-moz-box-shadow:1px 1px 0 #EEEEEE;
	-webkit-box-shadow:1px 1px 0 #EEEEEE;
	box-shadow:1px 1px 0 #EEEEEE;
}

.fancy-table th{
	background-color:#F4F4F4;
	text-shadow:1px 1px 1px white;
	
	-moz-box-shadow:1px 1px 0 #dddddd;
	-webkit-box-shadow:1px 1px 0 #dddddd;
	box-shadow:1px 1px 0 #dddddd;
}

.fancy-table caption{
	caption-side:bottom;
	font-style:italic;
	padding:6px;
}

.wp-caption p {
	margin:5px;
	text-align:center;
}

div.dd_after table td{
	padding:0 8px 0 0;
	vertical-align:top;
}

.sociable_tagline strong{
	text-transform:uppercase;
	font-size:11px;
}

.postPic{
	float:left;
	width:175px;
	text-align:left;
	border:1px;
}
.postContentRight{
	float:left;
	width:455px;
}

.topPost{
	margin-bottom:20px;
	padding-bottom:20px;
	border-bottom:1px solid #dddddd;
}

h2.entry-title{
	margin:0px 0px 6px 0px;
	border:none;
	
	font-size:26px;
}

h2.entry-title a,h2.entry-title a:visited{
	color:#a84c10;
	text-decoration:none;
}


h2.entry-title a:hover{
	text-decoration:underline;
}


.created-strip{
	font-size:10px;
	color:#999999;
}

.tutExcerpt p{
	margin-top:10px;
}

.syntaxhighlighter .line .content {
	padding-bottom:2px !important;
	padding-top:2px !important;
}

div.syntaxhighlighter .line code.number {
	padding:2px 0 2px 0 !important;
}

div.syntaxhighlighter .line.highlighted.alt1 .content, .syntaxhighlighter .line.highlighted.alt2 span.content {
	background-color:#FFFFCC !important;
}

div.syntaxhighlighter .toolbar{
	/*display:none;*/
}

a.cButton,a.cButton:visited{
	color:white;
	padding:3px 10px 3px 10px;
	background-color:#1d4156;
	font-weight:bold;
	
	font-size:12px;
	white-space:nowrap;
	text-decoration:none;
	
	-moz-border-radius:6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius:6px;
	
	display:block;
	width:75px;
}

a.cBwide,a.cBwide:visited{
	width:100px;
}

a.cButton:hover{
	background-color:#333333;
}

input,.feeds-list a{
	background:url(images/form.gif) repeat-x white;
	border:1px solid #dddddd;
	padding:2px;
	padding-left:5px;
}

input:focus{
	border:1px solid #28a3ec;
}

textarea{
	padding:3px;
	background-color:#f5f5f5;
	border:1px solid #dddddd;
	width:400px;
	
	font-family:Arial, Helvetica, sans-serif;
	font-size:12px;
	
	overflow:auto;
}

textarea:focus{
	border:1px solid #007bc4;
}

input[type=submit]:hover,input[type=button]:hover,.feeds-list a:hover{
	background-position:0px -5px;
	cursor:pointer;
}

ol.commentlist{
	margin-top:20px;
}

li.comment{
	background-color:#f5f5f5;
	margin:0px 0px 20px 0px;
	border:1px solid #dddddd;
	position:relative;
	
	-moz-border-radius:10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius:10px;
	
	padding:10px;
	list-style:none;
	
	min-height:125px;
}

.comment-meta{
	position:relative;
	bottom:15px;
	left:350px;
	display:inline;
}

.comment-author cite{
	padding-left:18px;
	font-size:14px;
	font-weight:bold;
	font-style:normal;
}

li.comment img.avatar{
	border:4px solid #dddddd;
	float:left;
}

div li.bypostauthor img.avatar {
	border:4px solid #777777;
}

div.comment-body p{
	margin-left:85px;
	margin-top:0;
}

div.comment-body em{
	padding-left:16px;
}

div.leave-response{
	float:right;
	position:relative;
	top:14px;
}


p code,#comments blockquote,
#comments pre{
	display:block;
	font-family:Verdana,Arial,Helvetica,sans-serif;
	font-size:11px;
	font-style:italic;
	margin-left:15px;
}

#comments pre{
	margin-left:85px;
}

li.bypostauthor {
	background-color:#333333 !important;
	color:#eeeeee !important;
	border-color:black;
}

li.bypostauthor a,li.bypostauthor a:visited{
	color:white;
}

div.shareArticle{
	margin-top:30px;
	padding:40px 0px 0px 20px;
	height:182px;
	background:url(images/share_bg.gif) no-repeat;
}

div.topPost div.rssSubscribe{
	margin-top:20px;
	height:138px;
	/*background:url(images/rss_bg.jpg) no-repeat;*/
	overflow:hidden;
}

div.topPost div.rssSubscribe a,
div.topPost div.rssSubscribe a:visited{
	display:block;
	background:url(images/rss_bg.jpg) no-repeat;
	
	padding-top:90px;
	text-indent:372px;
	
	width:100%;
	height:138px;
	
	color:white;
	text-decoration:none;
	text-transform:uppercase;
	font-size:10px;
	font-weight:bold;
}

#mashupBottom{
	height:45px;
	margin-top:20px;
	
	background:url(images/mashup_banner_bottom.png) no-repeat;
	cursor:pointer;
}

#mashupForm{
	-moz-border-radius:10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius:10px;

	background:url(images/form_bg_lightgray.jpg) repeat-x #F8F8F8;
	border:1px solid #EEEEEE;
	margin-top:20px;
	padding:7px 15px 15px 15px;
	
	display:none;
}

#mashupForm label{
	display:block;
	font-size:10px;
	margin-top:8px;
	text-transform:uppercase;
}

#mashupForm form{
	width:260px;
	float:left;
}

#mashupDescr{
	float:left;
	padding:10px;
	width:250px;
	
	border-left:1px solid white;
}

div.topPost div.rssSubscribe a:hover{
	text-decoration:underline;
}

h2.cHeading{
	margin:0px 0px 20px 0px;
}

.noline{
	border-bottom:none;
}

#searchform{
	height:30px;
}

#searchbox,#searchbutton{
	width:250px;
	height:20px;
	padding:4px 0px 0px 10px;
	
	border:1px solid #cccccc;
	
	-moz-border-radius:10px;
	-khtml-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius:10px;
	
	float:left;
}

#searchbutton{
	width:auto;
	
	height:25px;
	margin-left:10px;
	padding:0px 8px 0px 8px;
}

.subHeading{
	margin-bottom:20px;
	padding-bottom:20px;
	border-bottom:1px solid #dddddd;
}

#searchBoxHolder{
	background:url("images/search/search_box.gif") no-repeat;
	float:left;
	height:39px;
	overflow:hidden;
	padding:10px 0 0 25px;
}

#top-search{
	float:right;
	margin-top:10px;
}

#top-searchbox{
	background:none;
	border:medium none;
	color:#666666;
	float:left;
	outline:medium none;
	overflow:hidden;
	width:192px;
}

a#top-search-button{
	background:transparent url(images/search/search_button.gif) no-repeat;
	display:block;
	float:left;
	height:39px;
	text-indent:-9999px;
	width:79px;
}

a#top-search-button:hover{
	background-position:bottom;
}

.sidebar-container-dark{
	margin-left:2px;
	padding:13px 0 7px 13px;
	background:url(images/sidebar_border_bg.gif) bottom repeat-x;

/*	width:293px;
	overflow:hidden;*/
}

.sidebar-container-light{
	margin-left:2px;
	padding:13px 0 7px 13px;
	background:url(images/sidebar_border_light_bg.gif) bottom repeat-x #ededed;
}

.sideAd{
	width:125px;
	height:125px;
	background:url(images/ads.gif) no-repeat;
	float:left;
	margin:0px 10px 10px 0px;
	border:3px solid #eeeeee;
}

.zineAd{
	border:3px solid #eeeeee;
	width:265px;
	height:265px;
	margin-bottom:10px;
}

.zineBannerWide{
	margin:20px 0 20px -6px;
	position:relative;
}

#coolAds{
	border:3px solid #EEEEEE;
	margin-bottom:10px;
	width:265px;
	height:370px;
	position:relative;
}

#coolAds a{
	width:265px;
	height:370px;
	position:absolute;
	top:0;
	left:0;
}

.subscribe-label{
	width:192px;
	height:40px;
	background:url(images/rss_subscribe.gif) no-repeat;
	margin-bottom:5px;
}

.feeds-list{
	margin-left:50px;
	padding-bottom:10px;
}

.feeds-list a,.feeds-list a:visited{
	color:#e06e00;
	display:block;
	width:120px;
	margin-top:2px;
	text-decoration:none;
	
	font-size:10px;
	text-transform:uppercase;
	width:100px;
	
	float:left;
	margin-right:6px;
}

a.mailFeed span{
	background:url(images/mail_black.gif) no-repeat;
	width:10px;
	height:10px;
	text-indent:-2000px;
	display:block;
}

a.mailFeed,a.mailFeed:visited{
	height:12px;
	padding-top:3px;
	width:13px;
}

.feeds-specialized{
	font-size:10px;
	padding-top:5px;
	float:left;
	height:14px;
	width:160px;
}

.feed-twitter{
	text-indent:-9999px;
	background:url(images/twitter_follow.gif) no-repeat;
	
	width:158px;
	height:45px;
	display:block;
	
	margin-bottom:10px;
}

#ad2{
	background-position:top right;
}

#ad3{
	background-position:bottom left;
}

#ad4{
	background-position:bottom right;
}

#bloggybits-banner{
	width:260px;
	height:200px;
	
	background:url(images/banner_bloggybits.gif) no-repeat;
	
	display:block;
	text-indent:-9999px;

	margin-bottom:10px;
	border:3px solid #eeeeee;
}

#temp-content{
	height:300px;
}

#sideBar .noborder{
	background-image:none;
}

.fContainer{
	width:300px;
	/*border:1px solid white;*/
	float:left;
	
	margin:0px 33px 0px 0px;
}

.fAboutContainer{
	margin-right:0px;
	width:260px;
	float:left;
	
	color:#f5f5f5;
}

#fTitleRecent,#fTitlePopular,#fTitleAbout{
	background:transparent url(images/footer_titles.gif) no-repeat;
	height:30px;
	
	margin-bottom:15px;
	
	-moz-border-radius:6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius:6px;
	
	border:1px solid #1F4357;
}

#fTitleRecent{
	background-position: 0 -66px;
	width:150px;
}

#fTitlePopular{
	background-position:0 -35px;
	width:160px;
}

#fTitleAbout{
	background-position:0 -4px;
	width:78px;
}

.fContent{
	background: #182d39;
	padding:15px 20px 20px 20px;
	
	-moz-border-radius:6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius:6px;
	
	border:1px solid #1F4357;
	position:relative;
}

.fContent .license{
	bottom:-50px;
	font-size:10px;
	left:20px;
	position:absolute;
	padding-right:10px;
}

.fContent .license a, .fContent .license a:visited{
	color:#BBBBBB;
}

.fLinks,.fLinks:visited{
	border-bottom:1px solid #26516b;
	display:block;
	color:white;
	padding:5px 0px 2px 0px;
	margin-bottom:0px;
	
	text-decoration:none;
}

.fLinks:hover{
	background-color:#26516b;
	padding-left:5px;
}

.aLightGrey,.aLightGrey:visited{
	color:#bbbbbb;
}

#contactLinks a, #contactLinks a:visited{
	display:block;
	text-indent:15px;
	background:url(images/mail_black.gif) 0px 3px no-repeat;
	color:white;
	margin-bottom:4px;
}

a#contactRSS,a#contactRSS:visited{
	color:#e06e00;
	background:url(images/footer_titles.gif) no-repeat -17px -98px;
}

a#contactTwitter,a#contactTwitter:visited{
	color:#0bb0e0;
	background:url(images/footer_titles.gif) no-repeat -17px -116px;
}

.notification {
	padding:10px 15px 10px 15px;
	margin-bottom:15px;
	overflow:hidden;
		
	border:1px solid #FFF15F;
	background-color:#FFFABF;
	
	-moz-border-radius:8px;
	-khtml-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius:8px;
}

.nBlue{
	background-color:#f1f9ff;
	border-color:#7cc4f2;
}

.notification p{
	margin:0px;
	padding:0px;
}


/*
 * FRONT PAGE
*/

#loopContainer{
	background-color:#444444;
	padding:5px;
	margin-bottom:20px;
	
	/*width:600px;*/
	
/*	border:1px solid #dddddd;
	
	-moz-border-radius:8px;
	-khtml-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius:8px;*/
}

.container, .slides div,
#loopedSlider,#newsSlider{
	width:620px;
}

.container {

	height:340px;
	overflow:hidden;
	position:relative;
	cursor:pointer;
}

.slides {
	position:absolute;
	top:0;
	left:0;
}

.slides div {
	position:absolute;
	top:0;
	display:none;
}
/*
 * Optional
*/

#loopedSlider,#newsSlider {
	margin:0 auto;
	position:relative;
	clear:both;
}

#loopedSlider .previous,#loopedSlider .previous:visited,
#loopedSlider .next,#loopedSlider .next:visited{
	display:block;
	text-indent:-9999px;
	background:url(images/featured_arrows.png) no-repeat;
	width:40px;
	height:59px;
	position:absolute;
	top:140px;
}

#loopedSlider .previous:hover{
	background-position:bottom left;
}


#loopedSlider .next,#loopedSlider .next:visited{
	background-position:top right;
	right:0px;
	left:auto;
}

#loopedSlider .next:hover{
	background-position:bottom right;
}

ul.pagination {
	list-style:none;
	padding-right:10px;
	margin:5px 0;
	
	height:45px;
	
	position:absolute;
	top:auto;
	bottom:0px;
	left:auto;
	right:0px;
	
	/*background:#333333;*/
}

ul.pagination li {
	float:left;
	height:44px;
	width:44px;
	margin:0 5px 0 0;
}

ul.pagination li a {
	width:40px;
	height:40px;
	background-position:center !important;
	background-repeat:no-repeat;
	
	text-indent:-9999px;
	
/*	-moz-border-radius:6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius:6px;*/
	
	display:block;

	border:2px solid #444444;
}

ul.pagination li.active a {
	border:2px solid #3fbbeb;
}

#featuredPic{
	height:340px;
	margin:10px;
	width:620px;
}

#featuredDiv{
	background:#e4e4e4;
	border:1px solid #DDDDDD;
	margin:20px -6px 0;
	position:relative;
}

#buttonsDemo{
	background-color:#F5F5F5;
	border:1px solid #DDDDDD;
	margin:-1px -6px 0;
	padding:10px 10px 10px 125px;
	text-align:center;
}

#demoButton,#demoButton:visited,#downloadButton,#downloadButton:visited{
	display:block;
	height:62px;
	width:163px;
	margin-right:20px;
	
	background:url(images/buttons_demo_download.gif) no-repeat;
	text-indent:-9999px;
	float:left;
}

#downloadButton,#downloadButton:visited{
	margin:0px;
	background-position:top right;
	width:206px;
}

#downloadButton:hover{
	background-position:bottom right;
}


#demoButton:hover
{
	background-position:bottom left;
}

div.topContent p > img,
div.topContent p a > img{
	-moz-border-radius:3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius:3px;
	
	background-color:#F3F3F3;
	border:1px solid #DDDDDD;
	
	padding:5px;
}

.postPic a img,div.related-thumb{
	background:#F3F3F3 none repeat scroll 0 0;
	border:1px solid #DDDDDD;
	padding:5px;
}

h3{
	padding-bottom:4px;
}

h4{
	font-size:18px;
	color:#d76317;
	
	margin-top:15px;
}

h5{
	color:#D76317;
	font-size:15px;
	margin-bottom:-10px;
	margin-top:15px;
}

h4 a,h4 a:visited,h4 a:active{
	font-size:18px;
	color:#d76317;
	
	margin-top:15px;
}

hr{
	background-color:#DDDDDD;
	border:medium none;
	color:#DDDDDD;
	height:1px;
	margin:30px 0;
}

.horizRuler{
	border-bottom:1px solid #DDDDDD;
	margin:25px 0;
	display:none;
}

#related div.related-thumb{
	width:120px;
	height:120px;
	float:left;
	margin:15px 15px 0 0;
}
#related h4{
	font-weight:normal;
	margin-top:20px;
}

.topContent ol,
.topContent ul,
.topContent li{
	margin:4px 0 0 10px;
}

.topContent ul li{
	list-style-type:circle;
}


div.topPost blockquote{
	background:url(images/block_quote.gif) no-repeat #FDFDFD;
	border:5px solid #F5F5F5;
	margin:0;
	padding:10px 10px 10px 55px;
	color:#444444;
	
	-moz-box-shadow:0 0 1px #CCCCCC;
	-webkit-box-shadow:0 0 1px #CCCCCC;
	box-shadow:0 0 1px #CCCCCC;
}

div.topPost blockquote p{ margin:0 0 10px;}

div.topPost blockquote span.small{ font-size:10px; }

.editable-comment{
	font-size:10px;
	left:10px;
	position:absolute;
	top:82px;
}

.shareArticle iframe{
	display:none;
}