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-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}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:none}table{border-collapse:collapse;border-spacing:0}

html {
	background: #fff;
	color: #000;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 14px;
	-webkit-font-smoothing: antialiased;
	margin: 0 auto 21px auto;
	padding-top: 34px; /* to fix hover bubbles on IE, and lack of <main> margins */
	width: 75%;
	min-width: 840px !important;
	/* */
	-webkit-transition: translate3d(0,0,0);
	-webkit-backface-visibility: hidden;
}

body { margin-left: 220px; }

#sidebar, header, footer { margin-left: -230px; }

header { margin-top: -13px; margin-bottom: -6px; float: left; }
header img {
	width: 70px;
	height: 80px;
	border: none;
}

#sidebar { clear: left; margin-bottom: 100px; }

footer {
	clear: both;
	border-top: 2px solid #e9e9e9;
	padding: 11px 5px 8px 5px;
	margin-top: -2px;
	margin-bottom: 25px;
	line-height: 1.6em;
	font-size: 12px;
	color: #adadad;
}

footer p { font-size: 13px; padding-bottom: 1px; }
footer p > strong { font-weight: inherit; }


/**********************************************************************/
/**********************************************************************/
/* TEXT */

strong { font-weight: bold; }
em { font-style: oblique; }

::selection { background: #d0d0d0; color: #444; }


h2, h2 a, h2 a:visited, h2 a:visited:hover, h2 a:hover, h2 a:active {
	font-size: 20px;
	font-weight: 300;
	color: #535353;
	text-decoration: none;
	margin-bottom: 6px;
	letter-spacing: normal;
	line-height: normal;
}
h2 a:active, h2 a:visited:active { color: #000; }

h3 {
	font-family: 'Montserrat', sans-serif;
	margin: 24px -1px 0 -1px;
	font-size: 18px;
	color: #4bbb27;
	text-transform: uppercase;
}

#sidebar h4 {
	font-family: 'Montserrat', sans-serif;
	margin: 0 -1px 8px 0;
	font-size: 12px;
	color: #58871a;
}

article h4 {
	font-family: 'Montserrat', sans-serif;
	margin: 24px -1px 0 -1px;
	font-size: 15px;
	color: #851458;
	text-transform: uppercase;
}


/**********************************************************************/
/**********************************************************************/
/* ARTICLE */

article {
	padding-bottom: 16px;
	margin-bottom: 24px; /* 28px */
	min-height: 240px;
	border-bottom: 1px solid #e9e9e9;
	font-size: 1.1em;
	line-height: 1.2em;
	color: #999;
}

article p.meta {
	text-transform: uppercase;
	font-weight: 200;
	font-size: 13px;
	margin: 7px 0 9px 0;
	color: #abaaa0;
}
article p.meta strong {
	font-weight: 300;
	color: #30302f; /* #000 */
}

article p.meta a, article p.meta a:visited {
	color: #d33c78;
	text-decoration: none;
}
article p.meta a:hover {
	color: #ef78a7;
	text-decoration: none;
}
article p.meta a:active {
	color: #7d2649;
	text-decoration: none;
}


#error404 { border-bottom: none; }

#pagination {
	padding-bottom: 28px;
	margin-bottom: 20px;
}

#pagination p.next { float: right; }

#pagination p.disabled, #pagination a, #pagination a:visited, #pagination a:hover, #pagination a:active {
	display: inline-block;
	padding: 10px 11px;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	background: #dcdcda;
	text-decoration: none;
	color: #7c7c7b;
	font-size: 13px;
}
#pagination a:hover {
	background: #e9e9e4;
	border: 1px solid #dcdcda;
	color: #6b6b6a;
	padding: 9px 10px;
}
#pagination a:active { color: #000; }

#pagination p.disabled {
	background: none;
	border: 1px solid #dbdbd8;
	color: #c0c0bb;
	padding: 10px;
}


#continued { margin: 16px 0; }


article p.readmore i { color: #00f; }

article p.readmore a.more {
	font-size: 14px;
	color: #00f;
	font-weight: 300;
}
article p.readmore a.more:visited { color: #4848ff; }
article p.readmore a.more:hover, article p.readmore a.more:visited:hover { color: #00f; text-decoration: none; }
article p.readmore a.more:active, article p.readmore a.more:visited:active { color: #f00; }

article p.readmore a.more strong { font-weight: bold; }


article p.under {
	margin-top: 23px;
	font-size: 12px;
	color: #a2a2a2;
}

article p.under i { font-size: 11px; color: #a2a2a2; }
article p.under a:hover i { color: #f00; }

article p.under a { color: #a2a2a2; text-decoration: none; text-transform: uppercase; }
article p.under a:hover, article p.under a:visited:hover, article p.under a:active:hover { color: #f00; text-decoration: none; text-transform: uppercase; }
article p.under a:visited { color: #a2a2a2; text-decoration: none; text-transform: uppercase; }
article p.under a:active { color: #f00; text-decoration: none; text-transform: uppercase; }

article p.under iframe { margin: 0 -6px -6px 0; float: right; }
#post p.under iframe { float: none; }


#post_ad { padding-left: 2px; }


/**********************************************************************/
/**********************************************************************/
/* ARTICLE CONTENT */


article > div strong { font-weight: bold; color: #555; /* #606060 */ }
article > div a strong, article > div strong a { font-weight: bold; } /* 500 weight looks better but doesn't work in IE */

article > div ul { list-style: square; }
article > div ol { list-style: decimal; list-style-position: outside; }
article > div ul li, article > div ol li { padding: 2px 0 4px 0; }

article > div p, article > div ul, article > div ol, article > div figure { margin: 14px 0; }

article > div img {
	padding: 4px;
	background: #a2a2a2;
}

article > div figure figcaption:before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	margin: -26px 0 6px 74px;
	border-top: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #343434;
}
article > div figure figcaption {
	background: #343434;
	padding: 9px;
	width: 477px;
	margin: 7px 0 16px 3px;
	color: #fff;
	font-style: oblique;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
}
article > div figure figcaption a, article > div figure figcaption a:visited { color: #a2a2a2; }
article > div figure figcaption a:hover, article > div figure figcaption a:visited:hover { color: #ccc; }
article > div figure figcaption a:active, article > div figure figcaption a:visited:active { color: #666; }


article > div a, #disqus_thread a { color: #30302f; }
article > div a:hover, #disqus_thread a:hover { color: #000; text-decoration: none; }
article > div a:visited, #disqus_thread a:visited:hover { color: #484847; }
article > div a:visited:hover, #disqus_thread a:hover { color: #181817; }
article > div a:active, article > div a:visited:active, #disqus_thread a:active, #disqus_thread a:visited:active { color: #f00; }

article > div a:hover, article > div a:visited:hover, article > div a:active, article > div a:visited:active, #disqus_thread a:hover, #disqus_thread a:visited:hover, #disqus_thread a:active, #disqus_thread a:visited:active { text-shadow: 0 0 5px #fff; }

article > div a strong { color: inherit; }

article > div div.highlight {
	padding: 8px;
	border: 1px solid #ccc;
}
article > div div.highlight pre { white-space: pre-wrap; }

article > div blockquote {
	margin: 8px;
	border-left: 4px solid #e4e4e4;
	padding-left: 14px;
}


article > div table {
	font-size: 12px;
	color: #333333;
	width: 100%;
	border-width: 1px;
	border-color: #729ea5;
	border-collapse: collapse;
}

article > div table th, article > div table td:first-child {
	font-size: 12px;
	background-color: #acc8cc;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #729ea5;
	text-align: center;
	font-weight: bold;
}
article > div table tr:first-child th { font-size: 13px; }

article > div table tr {
	background-color: #d4e3e5;
}
article > div table td {
	font-size: 12px;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #729ea5;
	text-align: center;
}

article > div table td.g { background-color: #c2f395; }
article > div table td.y { background-color: #f3e895; }
article > div table td.r { background-color: #f3a595; }

article > div table th:first-child, article > div table tr:first-child { background: none; }


/**********************************************************************/
/**********************************************************************/
/* SIDEBAR */

#sidebar {
	width: 186px;
	float: left;
	margin-top: -2px;
}


#sidebar h4 { text-transform: uppercase; }
#sidebar h4.s { margin-top: 23px; }


#sidebar a, footer a { color: #0b729f; text-decoration: none; }
#sidebar a:visited, footer a:visited { color: #476471; text-decoration: none; }
#sidebar a:hover, #sidebar a:visited:hover, footer a:hover, footer a:visited:hover { color: #00f; text-decoration: underline; }
#sidebar a:active, #sidebar a:visited:active, footer a:active, footer a:visited:active { color: #f00; text-decoration: none; }


#sidebar section {
	padding: 0 20px 30px 0;
	margin-bottom: 14px;
	border-bottom: 1px solid #e9e9e9;
	font-size: 11px;
	color: #a8a8a8;
}


#sidebar section.search {
	padding: 0 0 3px 0;
}


#sidebar section.about h4 { color: #f35000; }
#sidebar section.about h4 img {
	width: 68px;
	height: 11px;
	margin: 0 0 -1px 3px;
}


#sidebar section.about ul.info { padding: 2px 0; }
#sidebar section.about ul.info li {
	margin: 6px 0;
	text-transform: uppercase;
	color: #888;
}

#sidebar section.about ul.info li i.fa {
	color: #bbb;
	margin-right: 3px;
}


#sidebar section.about div.map > a {
	margin: 10px 0 8px 0;
	border: none;
	background: url(/images/side_map.png) no-repeat;
	background-size: 160px 110px;
	width: 160px;
	height: 110px;
	text-align: right;
	display: block;
}


#sidebar section.about div.map ul li {
	display: inline-block;
	margin: 5px 5px 0 0;
	color: #999;
}
#sidebar section.about div.map ul li:even { min-width: 85px; }

#sidebar section.about div.map ul li span {
	width: 8px;
	height: 8px;
	margin: 0 0 -2px 0;
	border: 1px solid #dbdbcd;
	overflow: hidden;
	display: inline-block;
}
#sidebar section.about div.map ul li span strong { visibility: hidden; }

#sidebar section.about div.map ul li a { color: inherit; text-decoration: none; }
#sidebar section.about div.map ul li a:hover { color: inherit; text-decoration: underline; }


#sidebar section.apps ul { margin: 10px 0 7px 0; }
#sidebar section.apps ul li {
	margin: 0 4.5px 4px 0;
	display: inline-block;
}
#sidebar section.apps ul li, #sidebar section.apps ul li img {
	border-radius: 13px;
	width: 48px;
	height: 48px;
	border: none;
}

#sidebar section.apps ul li.b { background: #ccc; }

#sidebar section.apps ul li img {
	opacity: 1;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
	/* */
	-moz-transition: opacity 50ms ease-in, border-color 50ms ease-in;
    -webkit-transition: opacity 50ms ease-in, border-color 50ms ease-in;
    -o-transition: opacity 50ms ease-in, border-color 50ms ease-in;
    transition: opacity 50ms ease-in, border-color 50ms ease-in;
}
#sidebar section.apps ul li img:hover {
	opacity: 0.60;
	-webkit-filter: none;
	-moz-filter: none;
	filter: none;
}


#sidebar section.history ul, #sidebar section.tags ul {
	list-style: square;
	list-style-position: outside;
	padding: 2px 0;
}
#sidebar section.history ul li, #sidebar section.tags ul li { margin: 6px 0; }


#sidebar section.history img {
	width: 160px;
	height: 66px;
	margin-top: 6px;
}


aside #popularposts ol {
	list-style: decimal;
	list-style-position: outside;
	color: #d0d0d0;
	padding: 2px 0;
}
aside #popularposts ol li { margin: 6px 0; }


#sidebar section.tags ul li a { text-decoration: none; }
#sidebar section.tags ul li a span.name { text-decoration: underline; }
#sidebar section.tags ul li a span.count { color: #aaa; }


#sidebar div.caption {
	font-size: 13px;
	line-height: 14px;
	background-color: #393939;
	color: #ebe7e3;
	position: absolute;
	z-index: 10;
	display: none;
	text-align: left;
	max-width: 180px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	border-radius: 2px;
	padding: 10px 11px;
}
#sidebar div.caption a, #sidebar div.caption a:visited, #sidebar div.caption a:hover, #sidebar div.caption a:active {
	text-decoration: none;
	color: #ebe7e3;
	font-weight: normal;
}

#sidebar div.caption div.arrow {
	left: -1px;
	top: 8px;
	width: 20px;
	height: 20px;
	z-index: -10;
	position: absolute;
	background-color: #393939;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
}


#sidebar a.ext {
	display: block;
	background: #f7f6f4;
	box-shadow: 0 -20px 50px #f1f0ed;
	text-align: center;
	font-size: 30px;
	min-height: 30px;
	text-decoration: none;
	color: #666;
	width: 160px;
	position: absolute;
	opacity: 0.90;
	filter: alpha(opacity=90);
	/* */
	border: 1px solid #e9e9e9;
	border-top: none;
}
#sidebar a.ext:hover { background: #fff; color: #444; }
#sidebar a.ext:active { background: #f7f6f4; }


/**********************************************************************/
/**********************************************************************/
/* ARCHIVES */

#archive > ul.posts {
	margin-bottom: 29px;
	min-height: 420px;
}

#archive > ul.posts > li { margin: 9px 0 14px 160px; }
#archive > ul.posts > li > span {
	width: 160px;
	margin: 4px 0 0 -160px;
	float: left;
	display: block;
}

#archive > ul.posts > li ul {
	list-style: square;
}
#archive > ul.posts > li ul li {
	padding-bottom: 3px;
	line-height: 1.4em;
	font-size: 1.2em;
}


#archive ul.tags {
	margin-bottom: 29px;
	min-height: 420px;
}

#archive ul.tags li {
	margin: 6px 6px 6px 0;
	display: inline-block;
}

#archive ul.tags li a, #archive ul.tags li a:visited:hover, #archive ul.tags li a:visited:active {
	font-size: 1.2em;
	display: block;
	border: 1px solid #ddd;
	background-color: #eee;
	padding: 7px 9px;
	opacity: 0.8;
	text-decoration: none;
	-moz-transition: color 50ms ease-in, border-color 50ms ease-in, background-color 50ms ease-in;
    -webkit-transition: color 50ms ease-in, border-color 50ms ease-in, background-color 50ms ease-in;
    -o-transition: color 50ms ease-in, border-color 50ms ease-in, background-color 50ms ease-in;
    transition: color 50ms ease-in, border-color 50ms ease-in, background-color 50ms ease-in;
}
#archive ul.tags li a:visited {
	border-color: #e7e7e7;
	background-color: #efefef;
}
#archive ul.tags li a:hover, #archive ul.tags li a:active, #archive ul.tags li a:visited:hover, #archive ul.tags li a:visited:active { opacity: 1; }

#archive ul.tags li a span.name { text-decoration: underline; }

#archive ul.tags li a span.count {
	font-size: 12px;
	color: #aaa;
	text-decoration: none;
}




/**********************************************************************/
/**********************************************************************/
/* PORTFOLIO */

main > p.spb {  margin: 0 0 25px 0; font-size: 1.1em; }

main > p.spb a { color: #30302f; }
main > p.spb a:hover { color: #000; text-decoration: none; }
main > p.spb a:visited { color: #484847; }
main > p.spb a:visited:hover { color: #181817; }
main > p.spb a:active { color: #f00; }


h3.g { color: #999; }

article.portfolio { min-height: 0; } /* for first '???' row in portfolio */

article.portfolio, article.portfolio div ul.ln { clear: right; }

article.portfolio div ul.ln { margin: 20px 0; }
article.portfolio div ul.ln li {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
article.portfolio div ul.cs li span { color: #ddd; }
article.portfolio div ul.cs li span span.green { color: #50a81d; }
article.portfolio div ul.cs li span span.red { color: #aa2020; }


article.portfolio div ul.ln li.pr, article.portfolio div ul.ln li.pr i.fa { color: #98c3e4; }

article.portfolio div ul.ln li.pr a { color: #7aa7ca; }
article.portfolio div ul.ln li.pr a:visited { color: #768fa3; }
article.portfolio div ul.ln li.pr a:hover, article.portfolio div ul.ln li.pr a:visited:hover { color: #7dc2f6; }
article.portfolio div ul.ln li.pr a:active, article.portfolio div ul.ln li.pr a:visited:active { color: #3f637f; }


/* article.portfolio div p.i { text-align: center; } */
article.portfolio div p.i img { width: 400px; }

article.portfolio:last-of-type { border-bottom: none; }


/**********************************************************************/
/**********************************************************************/
/* SHARE WIDGET */

#share {
	position: fixed;
	bottom: 0;
	right: 0;
	border: 1px solid #ccc;
	background: #fff;
	box-shadow: 1px 2px 3px rgba(142,142,142,0.4);
	margin: 26px;
	width: 290px;
	display: none;
}

#share p {
	margin: 12px 9px;
}

#share h4 {
	color: #000;
	font-size: 18px;
	font-weight: bold;
	margin: 12px 10px;
}

#share div.twitter-follow {
	border-top: 1px solid #ddd;
	background: #f0f0f0;
	padding: 10px 10px 9px 10px;
}
#share div.twitter-follow > a > img {
	float: right;
	width: 28px;
	height: 28px;
	border: none;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
}

#share > a {
	margin: 8px 9px;
	float: right;
	display: block;
	text-decoration: none;
	font-size: 21px;
	line-height: 16px;
	font-weight: bold;
	color: #bbb;
}



/**********************************************************************/
/**********************************************************************/
/**********************************************************************/
/**********************************************************************/
/**********************************************************************/
/* AUXILIARY */


/**********************************************************************/
/* GOOGLE CSE */

#cse-search-box { margin: 16px 0; padding: 0 0; }
#cse-search-box input, #cse-search-box-404 input {
	border: 1px solid #d9d9d9;
	padding: 4px;
	background-position-x: 2px !important;
	margin: 0 -1px;
	width: 151px;
	box-shadow: rgb(213, 212, 210) 1px 1px,
		rgb(220, 219, 217) 2px 2px,
		rgb(227, 226, 223) 3px 3px,
		rgb(234, 233, 230) 4px 4px,
		rgb(241, 240, 237) 5px 5px;
}


/**********************************************************************/
/* GOOGLE 404 */

#goog-wm > div.content > ul { margin: 14px 0; }

#goog-wm li.search-goog { display: none; }

#cse-search-box-404 input { width: 400px; margin: 8px 0; }


/**********************************************************************/
/* DISQUS RELATED */

/* #post { border-bottom: none; } */
#disqus_disclaimer {
	clear: right;
	/* border-top: 1px solid #dbdbcd; */
	font-style: oblique;
	padding: 0 5px 7px 5px; /* 22px */
	margin-top: 22px;
	color: #adadad;
}
#disqus_thread {
	padding: 5px;
	margin-bottom: 23px;
}


/**********************************************************************/
/* VIMEO LIST */

#sidebar section.vimeo div.container {
	line-height: 0;
	font-size: 0;
}

#sidebar section.vimeo div.clip {
	display: inline-block;
	margin: 0 3px 3px 0;
}

#sidebar section.vimeo div.clip img {
	width: 80px;
	/* border: 1px solid #fff; */
	opacity: 1;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
	/* */
	-moz-transition: opacity 50ms ease-in, border-color 50ms ease-in;
    -webkit-transition: opacity 50ms ease-in, border-color 50ms ease-in;
    -o-transition: opacity 50ms ease-in, border-color 50ms ease-in;
    transition: opacity 50ms ease-in, border-color 50ms ease-in;
}
#sidebar section.vimeo div.clip img:hover {
	opacity: 0.60;
	/* border-color: #f1f0ed; */
	-webkit-filter: none;
	-moz-filter: none;
	filter: none;
}

#sidebar section.vimeo > p { margin-top: 12px; }


/**********************************************************************/
/* DRIBBBLE LIST */

#sidebar section.dribbble ul { list-style: none; }
#sidebar section.dribbble ul li {
	display: inline-block;
	margin: 0 3px 3px 0;
}

#sidebar section.dribbble ul li img {
	width: 80px;
	/* border: 1px solid #fff; */
	opacity: 1;
	-webkit-filter: grayscale(100%);
	-moz-filter: grayscale(100%);
	filter: grayscale(100%);
	/* */
	-moz-transition: opacity 50ms ease-in, border-color 50ms ease-in;
    -webkit-transition: opacity 50ms ease-in, border-color 50ms ease-in;
    -o-transition: opacity 50ms ease-in, border-color 50ms ease-in;
    transition: opacity 50ms ease-in, border-color 50ms ease-in;
}
#sidebar section.dribbble ul li img:hover {
	opacity: 0.60;
	/* border-color: #f1f0ed; */
	-webkit-filter: none;
	-moz-filter: none;
	filter: none;
}

#sidebar section.dribbble > p { margin-top: 12px; }