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,font,img,ins,kbd,q,s,samp,small,strike,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;vertical-align:baseline;}
body{font-size: 13px;-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility;font-family:"Helvetica Neue",Helvetica,arial,sans-serif;color:black;background:transparent url(/themes/bg_body.png) repeat-y 850px 0;}
html > body{font-size:13px;line-height:20px;}
p,ul{margin-bottom:19px;font-size:13px;}
ul{padding:0 0 0 20px;}
h2{font-size:24px;font-weight:bold;margin-bottom:20px;line-height:30px;letter-spacing:-.01em;color:#111;}
h2 a{color:#111;text-decoration:none;}
h2 a:hover{color:black;text-decoration:underline;}
h3{font-size:16px;margin-bottom:16px;letter-spacing:-.01em;color:#606060;}
a{color:#333;}
a:hover{color:#349acd;}/* grey>999, magenta> ff005a, cyan> 349acd */
a:hover{-webkit-transition:color .05s linear;-moz-transition:color .05s linear;-o-transition:color .05s linear;}
blockquote{padding:0 10px;font-family:georgia, times;font-style: italic;}
#page{width:750px;float:left;}
#header{padding:0 0 20px 60px;float:left;}
	#header h1{width:130px;height:40px;float:left;}
		#header h1 a{display:block;width:130px;height:40px;background:rgba(0,0,0,.9);color:#fff;text-indent:-9999px;background:transparent url(/themes/logo.png) no-repeat 0 0;}
	#header #nav{float:left;display:block;list-style:none;margin:0 0 0 35px;padding:0;}
	 #header #nav li{float:left;line-height:41px;}
		#header #nav li a{display:block;padding:0 15px;margin-left:10px;text-transform:uppercase;text-decoration:none;font-size:10px;font-weight:bold;}
		#home li.n-home a,
		#archive li.n-archive a,
		#about li.n-about a{background-color:#eee;color:#aaa;}
#content{width:500px;float:right;position:relative;padding:0 0 20px;}
	#content #articles,.article-meta, .tags-list, #follow{list-style:none;padding-left:0;}
.article{position:relative;margin-bottom:15px;padding-bottom:1px;}

.article-meta, .tags-list, #follow{float:left;margin-left:-190px;width:130px;padding:0 30px 0 0;font-size:11px;border-right:1px dotted #ccc;text-align:right;}
.article-meta .meta-date{}
.article-meta .meta-tags a:before,.tags-list li a:before{content:"#";}
.article code, pre {font-family: Monaco,Courier;color:#555;font-size:11px;}
.article pre {font-size:11px;color:#707070;padding:12px;margin:0 0 19px;background:#eee;border:none;overflow-x: auto;}
.article .article-image{margin-left:-120px;padding:8px;border:1px solid #909090;background-color:rgba(0,0,0,.1);-moz-border-radius:2px;-webkit-border-radius:2px;}
.article .article-footer{background:#f0f0f0;padding:10px 20px 15px 20px;text-shadow:none;-webkit-border-radius: 9px;-moz-border-radius: 9px;border-radius: 9px;}
.article .article-footer h4{color:#000;xtext-transform:uppercase;font-size:16px;font-weight:500;margin-bottom:10px;}
.article .article-footer p{margin:0;font-size:12px;}
#archive-list{width:500px;float:left;list-style:none;padding-left:0;}
#archive-list li{position:relative;border-bottom:1px dotted #cccccc;padding:6px 0 5px 110px;line-height:30px;}
#archive-list li.month{padding:0 0 0 10px;font-weight:bold;line-height:23px;color:#333;}
#archive-list li a{font-weight:normal;text-decoration:none;line-height:19px;display:block;}
#archive-list li a span{display:block;position:absolute;left:10px;font-weight:normal;font-size:11px;}
#archive-list li a:hover span{color:#333;}
.tags-list li strong,#follow li strong{text-transform:uppercase;font-size:10px;}
#follow li{margin-bottom:5px;}
#follow li a{padding:0 25px 0 0;display:block;background-position:right 50%;background-repeat:no-repeat;background-color:transparent;}
#follow li#dribbble_profile a{background-image:url(/themes/dribbble_16.png);}
#follow li#facebook_profile a{background-image:url(/themes/facebook_16.png);}
#follow li#flickr_profile a{background-image:url(/themes/flickr_16.png);}
#follow li#gowalla_profile a{background-image:url(/themes/gowalla_16.png);}
#follow li#lastfm_profile a{background-image:url(/themes/lastfm_16.png);}
#follow li#twitter_profile a{background-image:url(/themes/twitter_16.png);}
#footer{float:left;padding:10px 0;margin-left:60px;width:100%;border-top:1px dotted #ccc;font-size:11px;}
#footer a{float:right;}
/* Media Query */
/* @media screen and (max-width: 800px) {
	.article-meta,
	.tags-list{float:none;width:auto;text-align:left;margin:0;}
	
	#page{padding:0 20px;width:auto;}
	#header{padding-left:0;width:100%;}
	#header #nav{margin:0;}
	#content{width:auto;}
		.article-meta{border-right:none;border-bottom:1px dotted #ccc;margin-bottom:20px;}
		.article .article-image{width:95%;height:auto;margin-left:0;}
	#footer{margin:0;text-align:center;}
	#footer a{float:none;display:block;}
} */

@media 	screen and (max-device-width: 480px) and (orientation:portrait), 
				screen and (max-device-width: 480px) and (orientation:landscape), 
				screen and (max-width: 600px) {
	/* Generic */
	#page,
	#header,
	#header h1,
	.article-meta,
	.tags-list,
	#archive-list{float:none;}
	#page{width:100%;}
	#header{padding:0;width:100%;}
	#header h1{width:auto;background-color:#212121;}
	#header #nav{margin:0;width:100%;display:inline;border-bottom:1px solid #ccc;border-top:1px solid #fff;}
	#header #nav li{width:25%;padding:0;margin:0;text-align:center;line-height:35px;}
	#header #nav li a{margin:0;background-color:#eee;color:#aaa;border-right:1px solid #ccc;border-left:1px solid #fff;}
	#home #header #nav li.n-home a,
	#archive #header #nav li.n-archive a,
	#about #header #nav li.n-about a{color:#349acd;}
	#footer{margin:0 10px;text-align:center;width:auto;}
	#footer p{font-size:10px;}
	#footer a{float:none;}
	#content{width:auto;padding:10px;}
	/* Specific - Article(s) */
	.article{border-bottom:1px dotted #ccc;}
	.article .article-image{width:93%;height:auto;margin-left:0;}
		.article-meta{border-right:none;margin:0 0 10px 0;width:auto;text-align:left;background-color:#eee;padding:10px 10px 10px 10px;text-shadow:0 1px 0 #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
		.article-meta li{display:inline;}
		.meta-date{font-weight:bold;padding-right:5px;margin-right:5px;border-right:1px solid #ccc;}
		pre {overflow-x: auto;width:auto;white-space: pre-wrap;white-space: -moz-pre-wrap !important;}
		h2{margin-bottom:10px;font-weight:normal;}
	/* Specific - Archive(s) */
	#archive-list{width:auto;}
	.tags-list{margin:0 0 10px 0;border:none;padding:0;text-align:left;width:auto;background-color:#eee;padding:10px 10px 10px 10px;text-shadow:0 1px 0 #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}
	.tags-list li{display:inline;margin-right:5px;}
}