/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 27, 2014 */
@font-face {
    font-family: 'Clear Sans';
    src: url('../fonts/clearsans-bold-webfont.eot');
    src: url('../fonts/clearsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/clearsans-bold-webfont.woff') format('woff'),
         url('../fonts/clearsans-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Clear Sans';
    src: url('../fonts/clearsans-bolditalic-webfont.eot');
    src: url('../fonts/clearsans-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/clearsans-bolditalic-webfont.woff') format('woff'),
         url('../fonts/clearsans-bolditalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Clear Sans';
    src: url('../fonts/clearsans-italic-webfont.eot');
    src: url('../fonts/clearsans-italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/clearsans-italic-webfont.woff') format('woff'),
         url('../fonts/clearsans-italic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Clear Sans';
    src: url('../fonts/clearsans-regular-webfont.eot');
    src: url('../fonts/clearsans-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/clearsans-regular-webfont.woff') format('woff'),
         url('../fonts/clearsans-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


/* Editor */
.mceContentBody								{ margin:6px; padding:0; }


/* WordPress styles */
#comment-nav-above							{ border-bottom:4px solid #eaeaea; margin-bottom:1em; }
#comment-nav-below							{ border-top:4px solid #eaeaea; margin-top:1em; }

.commentlist								{ padding:0; counter-reset:comment; }
.commentlist li								{ background:#fcfcfc; border-left:4px solid #eaeaea; list-style:none; position:relative; margin-bottom:1em; }
.commentlist .reply							{ font-size:.857em; margin-bottom:0; }

.commentlist article						{ border:none; min-height:64px; margin:0; padding:1em; position:relative; }
.commentlist article:before					{ counter-increment:comment; content:counter(comment); position:absolute; top:-30px; right:0; color:#efefef; font-size:120px; font-weight:bold; line-height:1; z-index:1; }
.commentlist .comment-content				{ position:relative; z-index:2; }
.commentlist .comment-author				{ font-size:.857em; }

.commentlist .children						{ list-style:none; margin:0; padding:0 16px 1px 16px; }
.commentlist .children li					{ border:2px dashed #eaeaea; }
.commentlist .children li li				{ border-style:dotted; }
.commentlist .children li li li				{ border-style:solid; }
.commentlist .children li li li li			{ border-style:dashed; }

.commentlist .avatar						{ position:absolute; top:0; left:-138px; }
.commentlist .children li .avatar			{ left:-156px; }
.commentlist .children li li .avatar		{ left:-174px; }
.commentlist .children li li li .avatar		{ left:-192px; }
.commentlist .children li li li li .avatar	{ left:-210px; }

.commentlist .comment-author:before							{ content:" "; background:#eaeaea; height:4px; position:absolute; top:24px; right:100%; left:-70px; }
.commentlist .children li .comment-author:before			{ left:-88px; }
.commentlist .children li li .comment-author:before			{ left:-106px; }
.commentlist .children li li li .comment-author:before		{ left:-124px; }
.commentlist .children li li li li .comment-author:before	{ left:-142px; }

	.category-computing .comment-author:after				{ background-color:#3b5998; }
	.category-css_lessons .comment-author:after				{ background-color:#008e8e; }
	.category-html_lessons .comment-author:after			{ background-color:#f7941c; }
	.category-general .comment-author:after					{ background-color:#9d080d; }
	.category-programming .comment-author:after				{ background-color:#588526; }
	.category-projects .comment-author:after				{ background-color:#cc3300; }
.commentlist .comment-author:after							{ content:" "; border:4px solid #eaeaea; border-radius:8px; width:6px; height:6px; position:absolute; top:19px; left:-43px; }
.commentlist .children li .comment-author:after				{ left:-61px; }
.commentlist .children li li .comment-author:after			{ left:-79px; }
.commentlist .children li li li .comment-author:after		{ left:-97px; }
.commentlist .children li li li li .comment-author:after	{ left:-115px; }

.commentlist + #respond						{ border-top:4px solid #eaeaea; margin-top:2em; padding-top:1em; }
#reply-title								{ position:absolute; clip:rect(0 0 0 0); }
.comment-notes, .form-allowed-tags			{ font-size:.857em; }
.required									{ font-weight:bold; }
#commentform input,
#commentform textarea						{ background:#fcfcfc; border:0; border-left:4px solid #eaeaea; padding:.5em; outline:none; width:50%; }
#commentform input:focus,
#commentform textarea:focus					{ border-color:#008ed6; }
#commentform input[type="submit"]			{ border:none; background:#3b5998; color:#fff; width:auto; }
#commentform input[type="submit"]:hover,
#commentform input[type="submit"]:focus		{ background:#008ed6; }
#commentform input.error,
#commentform textarea.error					{ border-color:#b94a48; }
#commentform span.error						{ background:transparent; border:0; display:block; color:#b94a48; font-size:.857em; line-height:1.2; padding:4px 0 0 0; position:static; width:auto; }

.gallery									{ text-align:center; padding:0; overflow:hidden; }
.gallery li									{ display:inline-block; list-style:none; margin:.5em; vertical-align:middle; }
.gallery-columns-1							{ text-align:left; float:left; margin:0 0 0 -192px; width:128px; }
.gallery-columns-1 li						{ display:block; margin:8px 0 0 0; }

.continue-reading,
.more-link									{ display:inline-block; margin-top:1em; }
.lead + .more-link							{ margin-top:0; }

.widget										{ margin-bottom:3em; }
.widget-title								{ border-bottom:4px solid #eaeaea; margin-bottom:1em; }

.wp-caption-text							{ margin-top:0; }

.wp-post-image								{ float:right; margin:0 0 1em 1em; }
.wp-post-image.list							{ float:left; margin:.7em 1em 1em 0; }


/* Common */
/* font-family:Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; */
:link, a, a:visited							{ color:#3b5998; text-decoration:none; }
a:hover, a:active, a:focus					{ color:#008ed6; text-decoration:underline; }
body										{ background:url(../img/bg.jpg); color:#212121; font-family:"Clear Sans", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:100%; line-height:1.5; padding:4em 0; }
code, kbd, pre, samp						{ font-family:Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier, monospace; }
code										{ background:#f5f2f0; color:#dd1144; padding:2px 4px; }
h1, h2, h3, h4, h5, h6						{ font-family:"Roboto Slab", "Arial Black", Arial, sans-serif; font-weight:normal; }
h1 code										{ background:none; border:none; padding:0; }
h2											{ font-size:1.728em; }
h3											{ font-size:1.44em; font-weight:bold; }
h4											{ font-size:1.2em; }
h5											{ font-size:1em; font-style:italic; font-weight:bold; }
h6											{ font-size:1em; font-style:italic; }
textarea									{ resize:vertical; }
label										{ display:block; }
pre											{ font-size:.813em; -moz-box-sizing:border-box; box-sizing:border-box; width:100%; white-space:pre; overflow:auto; }
pre code									{ padding:0; }

.clearfix:before,
.clearfix:after								{ content:" "; display:table; }
.clearfix:after								{ clear:both; }

.visuallyhidden								{ position:absolute; clip:rect(0 0 0 0); }

.alert										{ background-color:#fcf8e3; border:1px solid #fbeed5; color:#c09853; margin-bottom:20px; padding:8px 35px 8px 14px; }
.alert-danger, .alert-error					{ background-color:#f2dede; border-color:#eed3d7; color:#b94a48; }
.alert-info									{ background-color:#d9edf7; border-color:#bce8f1; color:#3a87ad; }

.attachment-thumbnail,
.attachment-medium,
.avatar,
.img-polaroid,
.post-thumb									{ border:4px solid #fff; -webkit-box-shadow:0 0 2px rgba(0, 0, 0, .25); box-shadow:0 0 2px rgba(0, 0, 0, .25); }


.pager										{ margin:2em 0; padding:0 30px; }
.pager li									{ list-style:none; margin:0; padding:0; }
.pager li.previous							{ float:left; }
.pager li.previous a:before					{ border-width:20px 40px 20px 0; border-color:transparent #3b5998 transparent transparent; left:-30px; }
.pager li.previous a:hover:before,
.pager li.previous a:focus:before			{ border-color:transparent #008ed6 transparent transparent; }
.pager li.next								{ float:right; }
.pager li.next a:before						{ border-width:20px 0 20px 40px; border-color:transparent transparent transparent #3b5998; right:-30px; }
.pager li.next a:hover:before,
.pager li.next a:focus:before				{ border-color:transparent transparent transparent #008ed6; }
.pager li a									{ background:#3b5998; display:block; width:1em; height:1.5em; position:relative; }
.pager li a:before							{ content:" "; display:block; width:0; height:0; border-style:solid; position:absolute; top:50%; margin-top:-20px; }
.pager li a:hover, .pager li a:focus		{ background:#008ed6; text-decoration:none; }



/* Category colors */
.category-computing .entry-title,
.main-menu .computing a						{ color:#5274bc; }
.main-menu .computing a:before				{ background-color:#5274bc; }
article.category-computing					{ border-color:#5274bc; }

.category-css_lessons .entry-title,
.category-css-tutorials .entry-title,
.main-menu .css-tutorials a					{ color:#008e6b; }
.main-menu .css-tutorials a:before			{ background-color:#008e6b; }
article.category-css_lessons,
article.category-css-tutorials				{ border-color:#008e6b; }

.category-html_lessons .entry-title,
.category-html-tutorials .entry-title,
.main-menu .html-tutorials a				{ color:#f7941c; }
.main-menu .html-tutorials a:before			{ background-color:#f7941c; }
article.category-html_lessons,
article.category-html-tutorials				{ border-color:#f7941c; }

.category-general .entry-title,
.main-menu .general a						{ color:#b5090f; }
.main-menu .general a:before				{ background-color:#b5090f; }
article.category-general					{ border-color:#b5090f; }

.category-programming .entry-title,
.main-menu .programming a					{ color:#708526; }
.main-menu .programming a:before			{ background-color:#708526; }
article.category-programming				{ border-color:#708526; }

.category-projects .entry-title,
.main-menu .projects a						{ color:#e63900; }
.main-menu .projects a:before				{ background-color:#e63900; }
article.category-projects					{ border-color:#e63900; }


/* Grid */
#wrapper									{ margin:0 auto; width:920px; }
#primary									{ float:left; width:640px; }
#sidebar									{ float:left; margin-right:30px; width:250px; position:relative; }
#secondary-sidebar							{ display:none; font-size:.857em; position:relative; }
#colophon									{ clear:both; margin-top:2em; padding-top:2em; }


/* Left sidebar */
#top										{ border-bottom:4px solid #eaeaea; padding-bottom:1em; position:relative; text-align:right; }
#top li										{ display:inline-block; list-style:none; margin:0; padding:0; }
#top li:before          					{ content:'\00b7'; display:inline-block; margin:0 .5em; }
#top li:first-child:before	     			{ content:none; }

.ambassador                                 { display:inline-block; margin:12px 0; vertical-align:top; width:100%; }
.ambassador img                             { dispaly:block; max-width:80%; vertical-align:top; }

.logo                                       { display:inline-block; margin-bottom:12px; vertical-align:top; font-family:"Roboto Slab", "Arial Black", Arial, sans-serif; font-size:80px; letter-spacing:-4px; line-height:1; }
.logo:hover                                 { text-decoration: none; }
.logo span                                  { display:inline-block; margin-left:-.2em; font-size:22px; letter-spacing:0; }

.main-menu									{ margin:1em 0 0 0; padding:0; text-align:right; }
.main-menu li								{ list-style:none; margin:0 0 8px 0; padding:0; position:relative; overflow:hidden; }
.main-menu li:hover a:before				{ width:250px; }
.main-menu li:hover a:after					{ clip:rect(0 auto 40px 0px); }
.main-menu li a								{ display:block; padding:3px 10px 3px 0; position:relative; z-index:1; font-size:1.2em; line-height:1; }
.main-menu li a:before						{ content: " "; position:absolute; top:0; right:0; bottom:0; width:4px; z-index:2;  -webkit-transition: width 200ms cubic-bezier(0.600, 0.040, 0.980, 0.335) 20ms; transition: width 200ms cubic-bezier(0.600, 0.040, 0.980, 0.335) 20ms; }
.main-menu li a:after						{ content: attr(data-item-text); clip:rect(0 auto 40px 250px); position:absolute; top:3px; right:10px; bottom:0; left:0; z-index:3; color:#fff; -webkit-transition: clip 200ms cubic-bezier(0.600, 0.040, 0.980, 0.335) 20ms; transition: clip 200ms cubic-bezier(0.600, 0.040, 0.980, 0.335) 20ms; }
.main-menu li a:hover,
.main-menu li a:focus						{ text-decoration:none; }

.lt-ie9 .main-menu li:hover a				{ color:#fff; }

.qtrans_language_chooser					{ clear:right; float:right; margin:1em 0; padding:0; font-size:.813em; }
.qtrans_language_chooser li                 { display:inline-block; list-style:none; margin:0; padding:0; }

.top-menu									{ clear:right; float:right; margin:0; padding:0; text-align:right; }


/* Right sidebar */
#secondary-sidebar.spinner					{ background:url(../img/spinner.gif) center top no-repeat; height:32px; }


/* Footer */
#colophon aside								{ display:block; float:left; width:50%; }
#colophon aside > div						{ margin-left:1em; }
#colophon aside:first-child > div			{ margin-left:0; margin-right:1em; }
#colophon aside .widget-title				{ display:none; }
#colophon .widget							{ margin-bottom:0; }


/* Article */
article										{ border-left:4px solid #eaeaea; padding-left:30px; margin-bottom:4em; }
.entry-title								{ font-size:2.074em; font-weight:normal; line-height:1; margin:0; -webkit-hyphens:auto; -moz-hyphens:auto; hyphens:auto; }
.entry-title a								{ color:inherit; }
.entry-title .comments-link					{ background:#999; display:inline-block; position:relative; vertical-align:4px; width:1.5em; color:#fff; font-size:16px; font-weight:bold; line-height:1.5em; text-align:center; text-decoration:none; }
.entry-title .comments-link:before			{ content:" "; width:0; height:0; position:absolute; left:4px; bottom:-7px; border-style:solid; border-width:7px 10px 0 0; border-color:#999 transparent transparent transparent; }
.entry-title .comments-link:hover,
.entry-title .comments-link:focus			{ background:#008ed6; }
.entry-title .comments-link:hover:before,
.entry-title .comments-link:focus:before	{ border-color:#008ed6 transparent transparent transparent; }
.entry-content img.img						{ max-width:100%; }

.posted-on									{ margin:0; }
.posted-on .date							{ font-weight:bold; }

.post-tags									{ margin-top:.5em; }
.post-tags a								{ background:#999; display:inline-block; margin-left:1em; padding:0 .6em; height:20px; position:relative; color:#fff; font-size:.875em; line-height:19px; text-align:center; text-decoration:none; white-space:nowrap; }
.post-tags a:hover,
.post-tags a:focus							{ background:#008ed6; }
.post-tags a:hover:before,
.post-tags a:focus:before					{ border-color:transparent #008ed6 transparent transparent; }
.post-tags a:before							{ content:" "; width:0; height:0; position:absolute; top:50%; left:-10px; margin-top:-10px; border-style:solid; border-width:10px 10px 10px 0; border-color:transparent #999 transparent transparent; }
.post-tags a:after							{ content:" "; width:5px; height:5px; position:absolute; top:8px; left:-2px; background:#eaeaea; border-radius:50%; }

.single-post .entry-content .lead			{ font-size:1.2em; line-height:1.4; }

.featured-post								{ position:relative; top:4px; left:-48px; }
.featured-post span							{ display:inline-block; width:117px; height:36px; color:#fff; font-weight:bold; line-height:26px; text-align:center; background:url(../img/featured.png) no-repeat; }


/* Page */
.page .comments-link						{ display:none; }
.page .lead									{ font-size:1.2em; line-height:1.4; }
.page .thumb								{ float:right; margin:0 0 1em 1em; }


/* Plugins - Widgets */
b.ra1-pw-count span							{ display:block !important; }
.pw-widget.pw-horizontal					{ border-top:4px solid #eaeaea; border-bottom:4px solid #eaeaea; margin:2em 0; padding:1em 0; white-space:normal; }

.widget_advanced_post-in-a-widget			{ background:#fcfcfc; border-left:4px solid #eaeaea; padding:1em; }

.wpcf7 input, .wpcf7 textarea				{ background:#fcfcfc; border:0; border-left:4px solid #eaeaea; padding:.5em; outline:none; width:50%; }
.wpcf7 input:focus, .wpcf7 textarea:focus	{ border-color:#008ed6; }
.wpcf7 input[type="submit"]					{ border:none; background:#3b5998; color:#fff; width:auto; }
.wpcf7 input[type="submit"]:hover,
.wpcf7 input[type="submit"]:focus			{ background:#008ed6; }

.wpcf7 .lead								{ font-size:1em; line-height:1.2; }
.wpcf7-not-valid							{ border-color:#b94a48; }
span.wpcf7-not-valid-tip					{ background:transparent; border:0; display:block; color:#b94a48; font-size:.857em; line-height:1.2; padding:4px 0 0 0; position:static; width:auto; }
div.wpcf7-validation-errors					{ background-color:#f2dede; border-color:#eed3d7; color:#b94a48; margin:1em 0; padding:1em; }



/* Compatibility with old content */
.row-fluid .thumbnails						{ text-align:center; padding:0; overflow:hidden; }
.row-fluid .thumbnails li					{ display:inline-block; list-style:none; margin:.5em; vertical-align:middle; }

.pull-right									{ clear:right; float:right; margin-left:1em; }