@charset "utf-8";
/*
	@Website: http://www.youdevelop.net
	@Author: Dzhavat Ushev
	@Last update: 10.04.2017
	@License: None (open for everyone)
*/
/*
	@RESET
	@Website: http://meyerweb.com/eric/tools/css/reset/
	@License: none (public domain)
*/
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, 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,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	border: 0;
	font: inherit;
	font-size: 100%;
	font-weight: normal;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0px;}
/*  END RESET  */

/* General style */
body {
	color: #281208;
	font: 14px/21px Verdana, Arial, sans-serif;
}
#top-background {
	background: url("/images/top-background.png") repeat-x;
	height: 160px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -9999;
}
.container {margin:auto; width:960px;}
.main-window {margin:auto; width:940px;}
.main-content {width:620px;}
.sidebar {width:300px;}
h1, h2, h3, h4, h5, h6 {font-family:"Ubuntu", "Century Gothic", Verdana, sans-serif; font-weight: normal;}
.right {float:right;}
.left {float:left;}
.clear {clear:both;}
.hide {display:none;}
.overflow {overflow:hidden;}
.center {text-align:center;}
strong, .bold {color:#373737; font-weight:bold;} /* #252528 */
em, .italic {font-style:italic;}
.double_space {margin:30px 0;}
.space {margin:15px 0;}
code {
	color: #BE3821;
	font-family: monospace;
	padding: 0 2px;
	font-size: 14px;
}
pre {
	color: #fff;
	padding: 2em;
	border-radius: 3px;
	background-color: #444;
	white-space: pre;
	word-wrap: normal;
	overflow: auto;
	margin: 1em 0 2em;
}
pre code {
	background-color: transparent;
	padding: 0;
	line-height: 1.75;
	color: #fff;
}
/* Link styling */
a {color:#005286; text-decoration:none;}
a:hover {text-decoration:underline;}
.post a, #post-comments a {border-bottom:1px solid #005286;}
.post a:hover, #post-comments a:hover {border-bottom:2px solid #f17842; text-decoration:none;}

.post a.button, post a.button:hover {border:none;}

/* End Link styling */
.separator {
	background:url("/images/separator.png") repeat-x;
	clear:both;
	height:5px;
	margin:15px 0;
	width:100%;
}
.navigation-social {
	font-family: Verdana, Arial, sans-serif;
	font-size: 15px;
	height: 46px;
	margin-bottom: 25px;
	margin-top: 4px;
}
/* End General style */
/* Specific style */
/* header */
.header {height: 95px;}
.header h1 {
	color: #CCC;
	font-size: 20px;
	line-height: 30px;
	padding-top: 15px;
	text-align: right;
}
.header .logo {
	padding-top: 38px;
}
/* end header */
/* navigation */
/* Sticky Menu */
.sticky #main-menu {
	background: #D9F2F7 url("/images/top-background.png") repeat-x 100% 100%;
	box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.1);
	left: 0;
	top: 0;
	position: fixed;
	width: 100%;
	z-index: 100;
}
.sticky #main-menu ul {
	margin: 0 auto;
	width: 940px;
	z-index: 100;
}
.sticky #main-menu ul li ul {
	width: 200px;
}
/* End Sticky Menu */
.navigation ul li {
	background: url("/images/sprite-icons.png") no-repeat;
	float: left;
}
.navigation ul li a {
	color: #5a5a5a;
	display: block;
	height: 46px;
	line-height: 46px;
	padding: 0 10px;
}
.navigation ul li a:hover {
	background: #b7e6ef url("/images/sprite-icons.png") no-repeat;
	text-decoration: none;
}
.navigation ul li ul.sub {
	display: none;
	position: absolute;
	width: 200px;
	z-index: 100;
}
.navigation ul li ul.sub li {
	background-image: none;
	float: none;
	position: relative;
	background-color: #D9F2F7;
	z-index: 100;
}
.navigation ul li ul.sub li a {
	background-image:none;
	background-color:inherit;
	border:1px solid #b7e6ef;
	border-top:none;
	font-size:12px;
	height:35px;
	line-height:35px;
}
.navigation ul li ul.sub li a:hover {
	background-color: #b7e6ef;
	background-image: none;
}
.navigation ul li ul.sub li.current {background-color: #b7e6ef;}
.navigation ul li ul.sub li a span.tut-number {font-size:9px;}
.navigation .current {background-color: #b7e6ef;}
.navigation .home {
	background-position: 16px 13px;
	text-indent: -9999px;
	width: 52px;
}
.navigation .home a:hover { background-position: 16px 13px; }
.navigation .coding, .navigation .coding a:hover { background-position: 76px -25px; }
.navigation .website, .navigation .website a:hover { background-image: none; }
.navigation .about, .navigation .about a:hover { background-image: none; }

.navigation .design, .navigation .design a:hover { background-position: 55px -25px; }
.navigation .forum, .navigation .forum a:hover { background-image: none; }
/*  end navigation  */
/* social */
.social {
	float: right;
	height: 46px;
}
.social ul li {
	background: url("/images/sprite-icons.png") no-repeat;
	float: left;
	height: 46px;
	margin-right: 18px;
	text-indent: -9999px;
	width: 35px;
}
.social ul li a {
	display: block;
	color: #5a5a5a;
	height: 46px;
	line-height: 46px;
	text-decoration: none;
}
.social .rss {
	background-position: -60px -72px;
	margin-right: 0;
}
/* end social */

/* main-content */
.main-content .category {
	border-bottom:1px solid #e6e6e6;
	clear:left;
	height:33px;
	margin-bottom:25px;
	padding-top:20px;
}
.main-content .category h2 {
	font-size:26px;
	line-height:30px;
	width:100%;
}
.main-content .category h2 span {color:#f17842;}

/* === POST === */
.post p {margin-bottom:20px;}
.post h2, #related-articles h2,
#post-comments h2 {
	color: rgb(68, 68, 68);
	font-size: 28px;
	line-height: 1.5;
	margin-bottom: 0;
	text-shadow: 0 0 1px rgba(153, 153, 153, .75);
}
#related-articles h2 span {color:#beb28f;font-size:21px;}
#related-articles .rl-article {
	border-top:1px solid #d0d0cb;
	box-shadow:0 1px 0 rgba(255, 255, 255, .6) inset;
	clear:both;
	overflow:hidden;
	padding:20px 0;
}
#related-articles h2 + .rl-article {border-top:none;}
#related-articles .rl-article .rl-article-text {
	padding: 0 10px;
}
#related-articles .rl-article:hover {background-color:#e7e7e4;}
#related-articles .rl-article h3 {
	font-family: Verdana, Arial, sans-serif;
	font-size: 18px;
	margin-bottom: 5px;
}
#related-articles .rl-article h3 a {color:#a14821;}
#post-comments h2 {float:none;margin-bottom:30px;}
.post h2 a {color:#444; border-bottom:none;}
.post h2 a:hover {color:#005286;}
.post .comment-bubble {
	display:inline-block;
	left:10px;
	position:relative;
	text-align:center;
	top:6px;
	vertical-align:top;
}
.post .comment-bubble a,
.post .comment-bubble a:hover {
	background:url("/images/comment-bubble.png") no-repeat;
	border-bottom:none;
	color:#fff;
	display:block;
	font-family:Verdana, Arial, sans-serif;
	font-size:15px;
	height:34px;
	line-height:30px;
	width:39px;
}
.post .comment-bubble a:hover {
	background-position:0 -36px;
}

/* Post Meta Info */
.post-meta {
	margin-bottom: 20px;
}

.post-meta li {
	font-size: 11px;
	display: inline-block;
	margin: 0;
}

.post-meta li + li {
	margin-left: 1rem;
}

.post-meta .post-category {
	padding-left: 0;
}

.post-meta .post-date span,
.post-meta .post-category span {
	color: #988d72;
}

/* End Post Meta Info */
.post .post-content .post-thumb {
	float:left;
	margin:0 20px 10px 0;
}
/* Continue Reading a post */
.post .post-read-more .continue-post {float:right;}
.post .post-read-more .continue-post a {
	background-color: #E16D61;
	border-bottom: none;
	border-radius: 5px;
	color: #fff;
	display: block;
	line-height: 30px;
	padding: 0 15px;
}
.post .post-read-more .continue-post a:hover {background-color: #33A3C2;}
/* End Continue Reading a post */
/* Share Post */
.post-content .post-share {
	border-radius: 5px;
	clear: both;
	color: #243d51;
	margin: 25px 0;
	padding: 20px;
}
.post-content .tutorial {background-color:#eeedd3;}
.social-buttons a {
	color: #fff;
	border: none;
	border-radius: 3px;
	font-size: 14px;
	margin-right: 5px;
	padding: 8px;
}
.social-buttons a:hover {
	border-bottom: none;
}
.social-buttons .facebook {
	background-color: #3B5998;
}
.social-buttons .facebook:hover {
	background-color: #4563c4;
}
.social-buttons .twitter {
	background-color: #65BEF6;
}
.social-buttons .twitter:hover {
	background-color: #61ade3;
}
/* End Share Post */
/* Post Demo/Download Buttons */
.post .post-content .demo-download-buttons {
	border-bottom: 1px solid #CFCFCF;
	border-top: 1px solid #CFCFCF;
	margin: 25px 0;
	padding: 20px 0 25px 0;
}
.post .post-content .demo-download-buttons a {
	background: rgba(241, 120, 66, 1);
	background: linear-gradient(to bottom, rgba(241,120,66,1) 0%, rgba(221,79,73,1) 100%);

	border: none;
	border-radius: 5px;
	color: #fff;
	display: inline-block;
	font-size: 18px;
	height: 50px;
	line-height: 50px;
	margin:0 15px;
	text-shadow: 0 1px 1px rgba(0,0,0,0.4);
	width: 120px;

	box-shadow: 0 6px 0 #ae3e39, 0 10px 3px rgba(0, 0, 0, 0.3);

	transition: 0.1s linear;
}
.post .post-content .demo-download-buttons a:hover {
	background: rgba(221,79,73,1);
	background: linear-gradient(to bottom, rgba(241,133,85,1) 0%, rgba(221,95,89,1) 100%);
}
.post .post-content .demo-download-buttons a:active {
	box-shadow: 0 3px 0 #C46D00, 0 6px 3px rgba(0, 0, 0, 0.2);

	position: relative;
	top: 5px;
}
@font-face {
	font-family: 'EntypoRegular';
	src: url('/webfont/entypo-webfont.eot');
	src: url('/webfont/entypo-webfont.eot?#iefix') format('embedded-opentype'),
		 url('/webfont/entypo-webfont.woff') format('woff'),
		 url('/webfont/entypo-webfont.ttf') format('truetype'),
		 url('/webfont/entypo-webfont.svg#EntypoRegular') format('svg');
	font-weight: normal;
	font-style: normal;
}
.post .post-content .demo-download-buttons span {
	font-family: 'EntypoRegular';
	font-size: 20px;
	font-weight: normal;
	vertical-align: middle;
	line-height: 0;
	margin-right: .1em;
}
.demo:after { content: 'M'; font-size: 34px; }
.download:after { content: 'w'; font-size: 34px; }
/* End Post Demo/Download Buttons */
.post h3, .sidebar h3 {
	border-bottom:1px solid #E6E6E6; /* or #BCBCBC */
	color:#BE3821;
	font-size:21px;
	letter-spacing:1px;
	line-height:25px;
	margin:35px 0 15px;
	padding:5px;
	text-shadow:0 0 1px #999;
}
.post h3:target:before,
.post h4:target:before,
.post h5:target:before,
#post-comments h2:target:before {
	content:"";
	display:block;
	margin:-30px 0 0;
}
.post h3:target:before,
.post h4:target:before,
.post h5:target:before {
	height: 80px;
}
#post-comments h2:target:before {
	height: 50px;
}
.post h4 {
	font-size:18px;
	font-weight:bold;
	letter-spacing:1px;
	margin:20px 0 10px;
	padding:5px;
}
.post h5 {
	color: #00648E;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 1px;
	margin: 0;
	padding: 10px 15px;
}
.post .post-content .note {
	background:#EEEEEE url("/images/Notepad.png") no-repeat 20px 14px; /* ##FDEBAE */
	border-radius: 15px;
	border:1px solid #DDDDDD; /* #E6C555 */
	/* color:#9E660D; */
	margin-top:20px;
	padding:15px;
	font-style: italic;
}
.post .post-content .note span {
	font-style:italic;
	display:block;
	padding-bottom:20px;
	padding-left:40px;
}
.post .post-content p img {
	border:1px solid #cfcfcf;
	border-radius: 5px;
	display:block;
	margin:15px auto;
	padding:8px;
}
.go-top {
	border-radius: 5px;
	background-color: #D9F2F7;
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.3);
	bottom: 2em;
	color: #5A5A5A;
	display: none;
	font-size: 12px;
	padding: 1em;
	position: fixed;
	right: 2em;
	z-index: 10;
}
.go-top:hover {
	text-decoration: none;
	background-color: #B7E6EF;
}
.post .post-content .surprise h2 {
	float: none;
}
.post .post-content .surprise p img {
	border: none;
	padding: 0;
	clear: both;
}
/* Competition Page */
.post .competition p img {
	border:1px solid #cfcfcf;
	border-radius: 0;
	display:block;
	margin:0;
	padding:5px;
}
.post .competition a {
	border-bottom: none;
}
/* End Competition Page */
.post .post-content p a img {border:none; display:inline;}
.post .post-content p.icons-list a {border:none;}

.post .post-content .demo-download img {
	border:none;
	display:inline;
	margin:0;
	padding:0;
}

.post .post-content .snippet-container {margin:10px 0 30px;}
.post .post-content ul {list-style:disc outside none;}
.post .post-content ol {list-style:decimal outside none;}
.post .post-content ul,
.post .post-content ol {
	margin-left:15px;
	padding:0 5px 15px 25px;
}
.post .post-content li ul {padding:7px 10px 0 25px}
.post .post-content ul li, .post .post-content ol li {margin-bottom:7px;}
.post .post-content .post-meta ul {
	list-style:none;
	margin:0;
	padding:0;
}
.post .post-content .ad-after-tutorial {text-align:center;}
.post .post-content .post-meta ul li {margin-bottom:0;list-style:none;}
.main-content .post-middle-separator {
	background: url("/images/post-middle-separator.png") no-repeat center;
	clear: both;
	height: 30px;
	margin: 15px 0;
	width: 100%;
}
.post .about-me {overflow: hidden;}
.post .profile-pic {
	margin-right: 20px;
	width:120px;
}
.post .profile-desc {width:480px;}
.post p.smaller {font-size:11px;}
.post .explore-tuts p a {
	background:url("/images/button.png") no-repeat;
	color:#844b22;
	display:block;
	font-size:14px;
	float:left;
	height:37px;
	line-height:37px;
	margin-right:10px;
	text-align:center;
	width:102px;
}
.post .explore-tuts p a:hover {background-position:0 -39px;}
.post .explore-tuts p a:hover {background-position:0 -39px;}
.post p.last {margin-bottom:30px;}
.post .profile-desc table {margin-bottom:15px;}
.post .profile-desc table td {width:230px;}
.post .profile-desc table td ul {list-style:inside url("/images/plus.png");}
.post .profile-desc table td ul li {padding-bottom:5px;}
.post .profile-desc p.icons a {border-bottom:none;}
.main-content .page-nav {margin-bottom:25px;}
.main-content .page-nav ol li {
	color:#fff;
	display:inline; /*IE6Problem*/
	float:left;
	height:36px;
	margin:0 5px;
	text-align:center;
	width:36px;
}
.main-content .page-nav a {
	background:#e16d61;
	border-radius: 18px;
	color:#fff;
	display:block;
	line-height:36px;
	text-decoration:none;
}
.main-content .page-nav a:hover,
.page-nav a.current {
	background-color:#33a3c2;
}
.page-nav ol li.disabled {
	color: #707070;
	line-height: 50px;
	margin: 0 -5px;
}
.page-nav p {
	font-size:11px;
	height:36px;
	line-height:36px;
	text-align:right;
}
/* ===== COMMENTS ===== */
#commentslist ol li {
	background-color:#FDFDFD;
	border:1px solid #dcdcdc;
	margin-bottom:15px;
	padding:20px;
}
/* Code inside comments */
#commentslist pre ol li {
	background-color:transparent;
	border:none;
	margin-bottom:0;
	padding:0;
}
#commentslist ol li .comment-number {
	background:url("/images/commentNumber.png") no-repeat;
	font-size:18px;
	float:right;
	height:36px;
	line-height:36px;
	padding:0;
	text-align:center;
	width:36px;
}
#commentslist ol li .comment-author {
	color:#75280C;
	font-size:18px;
	padding:5px 0;
}
#commentslist ol li .comment-date {
	color:#988D72;
	font-size:11px;
}
#commentslist ol li p {padding:15px 0 0 15px;}
#respond {padding:40px 0 10px;}
#commentMsg {
	padding:20px 10px;
	text-align:center;
}
/* end main-content */

/* sidebar */
.sidebar .search-box {
	border:1px solid #e6e6e6;
	height:53px;
	width:99%;
}
.search-box input#searchfield {
	background-color:#efefef;
	border:1px solid #999;
	color:#666;
	float:left;
	height:30px;
	line-height:30px;
	margin:9px 0 0 25px;
	outline:none;
	padding-left:5px;
	width:200px;
}
.search-box input#searchfield:focus {
	background-color:#b7e6ef;
	color:#000;
}
.search-box #searchsubmit {margin-top:9px;}
#searchsubmit {
	background: url("/images/search_btn.png") no-repeat;
	border:none;
	cursor:pointer;
	height:34px;
	width:43px;
}
.sidebar .beginners .tabs {margin:0 0 15px 10px;}
.sidebar .beginners .tabs li {
	background-color:#b7e6ef;
	border-radius: 5px;
	float:left;
	margin-right:10px;
}
.sidebar .beginners .tabs li a {
	color:#fff;
	display:block;
	padding:5px 8px;
	text-decoration:none;
}
.sidebar .beginners .tabs li:hover,
.sidebar .beginners .tabs li.active {
	background-color:#33a3c0;
}
.sidebar .beginners .tab-container {
	clear:both;
	margin-bottom:15px;
}
.sidebar .beginners .tab-container ul li a {
	border-bottom:1px solid #dcdcdc;
	display:block;
	text-decoration:none;
	padding:8px 0 8px 10px;
	transition:background-color .4s, color .4s;
}
.sidebar .beginners .tab-container ul li a:hover {
	background:#d9f2f7 url("/images/arrow.png") no-repeat 0 50%;
	border-left:2px solid #33a3c0;
	color:#5a5a5a;
	padding-left:8px;
	transition:background-color .4s, color .4s;
}
.advertisemets .ads125 {overflow:hidden;}
.advertisemets .ads125 a {
	background-color: #f0f0f0;
	border:1px solid #d7d7d7;
	float: left;
	height: 125px;
	padding: 7px;
	width: 125px;
}
.ads125 .odd {margin: 10px 9px 0 0;}
.ads125 .even {margin: 10px 0 0 9px;}
.sidebar h3 {color:#444; margin:15px 0;}
.sidebar .friends-list li {
	padding:3px 20px;
}
/* end sidebar */

/* footer */
.footer {
	background: #192028 url("/images/footer-bkg.png") repeat-x;
	clear: both;
	height: 230px;
	margin-top: 20px;
	padding-bottom: 4em;
	width: 100%;
}
.footer #footer-top {
	background: url("/images/separator.png") repeat-x;
	height:5px;
	position:relative;
	top:-5px;
	width:100%;
}
.footer-content .footer-navigation,
.footer-content .footer-design,
.footer-content .footer-coding {
	border-right: 1px solid #191e22;
	float: left;
	margin: 20px 0 0 25px;
	width: 130px;
}
.footer .footer-content h3 {
	color:#7bd0e2;
	font-size:15px;
}
.footer .footer-content ul li {
	margin:0 0 0 10px;
	padding:3px;
}
.footer .footer-content ul li a {
	color:#fff;
	padding:4px;
}
.footer .footer-content ul li a:hover {
	background-color:#b7e6ef;
	color:#000;
	text-decoration:none;
}
.footer .footer-content .footer-followus {
	float:right;
	height:180px;
	margin-top:20px;
	width:280px;
}
.footer-followus .social-footer {height:46px;}
.footer-followus .social-footer ul li {
	background:url("/images/sprite-icons.png") no-repeat;
	float:left;
	height:40px;
	margin-right:18px;
	text-indent:-9999px;
	width:35px;
}
.footer-followus .social-footer ul li a {
	display:block;
	color:#5a5a5a;
	height:40px;
	line-height:40px;
	text-decoration:none;
}
.footer-followus .social-footer ul li a:hover {
	background-color:transparent;
}
.footer-followus .social-footer .rss {background-position:-60px -72px; margin-right: 0;}
.footer-followus .logo-footer {margin-top: 20px;}
.footer-content .footer-names {
	clear:both;
	height:20px;
	margin-right:30px;
	padding-top: 1.5em;
}
.footer-content .footer-names p {
	color: #707070;
	font-size: 11px;
	text-align: center;
}