http://pocotumblr.tumblr.com/

pocotumblr.css

@charset "UTF-8";

/* ================================================== [ Reset ] */

* {
	margin: 0;
	padding: 0;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
address, caption, cite, code, em, strong, th {
	font-style: normal;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
fieldset, iframe, img, legend, object {
	border: none;
}
img {
	vertical-align: bottom;
}
textarea {
	overflow: auto;
	vertical-align: top;
}
table {
	border-spacing: 0;
}
caption, th {
	text-align: left;
}

/* ================================================== [ Base ] */

/* -------- Structure */

body {
	line-height: 1.8;
	overflow-x: hidden;
	margin: 0 20px 0 40px;
	color: #555;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body:before {
	position: fixed;
	top: 0;
	left: 50%;
	width: 100%;
	height: 100%;
	margin-left: 215px;
	background-color: #eff0eb;
	content: "";
}

/* -------- Text */

h2 {
	line-height: 1.4;
	margin-bottom: 5px;
	font-size: 25px;
}
h3 {
	margin-bottom: 20px;
	font-size: 19px;
}
h4 {
	margin-bottom: 5px;
	font-size: 15px;
}
strong, em {
	color: #d2323c;
}
abbr[title], span[title] {
	padding: 2px 4px;
	background-color: #f7f7f5;
	cursor: help;
}
kbd {
	padding: 2px 7px;
	border: solid 1px #ccc;
	border-radius: 3px;
	box-shadow: 0 1px 0 #999;
	font-size: 12px;
}
pre, code, kbd, samp {
	font-family: monospace;
}
pre {
	margin-bottom: 30px;
	padding: 10px;
	border: 1px solid #e5e5e1;
	border-radius: 3px;
	background-color: #f7f7f5;
	font-size: 12px;
	white-space: pre;
	white-space: pre-wrap;
	word-wrap: break-word;
}
blockquote {
	margin-bottom: 30px;
	padding-left: 15px;
	border-left: 5px solid #eff0eb;
}
blockquote + p.cite {
	margin: -30px 0 30px !important;
	padding: 10px 0 0 15px;
	border-left: 5px solid #eff0eb;
	font-size: 11px;
	color: #aaa;
	text-align: right;
}
blockquote + p.cite:before {
	content: "\2013";
	margin-right: 5px;
}
blockquote + p.cite a {
	border-bottom: 1px dotted #aaa !important;
	color: #aaa;
}
blockquote + p.cite a:hover {
	border-bottom-color: #555 !important;
	color: #555;
}
small {
	color: #999;
	font-size: 11px;
}
sub, sup {
	position: relative;
	line-height: 0;
	font-size: 10px;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}

/* -------- Edit */

del {
	color: #999;
}
ins {
	color: #999;
	text-decoration: none;
}
ins[datetime]:before {
	margin-right: 5px;
	color: #aaa;
	font-size: 11px;
	content: "[\8ffd\52a0:"attr(datetime)"]";
}

/* -------- Image */

img, object {
	max-width: 100%;
}

/* -------- Link */

a {
	color: #668000;
	text-decoration: none;
	-webkit-transition: border-bottom-color 0.2s, background-color 0.2s, color 0.2s;
	-moz-transition: border-bottom-color 0.2s, background-color 0.2s, color 0.2s;
	-o-transition: border-bottom-color 0.2s, background-color 0.2s, color 0.2s;
	transition: border-bottom-color 0.2s, background-color 0.2s, color 0.2s;
}
a:hover {
	color: #555;
}
a:focus {
	outline: 1px dotted #666;
}

/* -------- Selection */

::selection {
	background: #8b8c88;
	color: #fff;
}
::-moz-selection {
	background: #8b8c88;
	color: #fff;
}

/* ================================================== [ Layout ] */

/* -------- container */

#container {
	position: relative;
	min-width: 240px;
	min-height: 1600px;
	max-width: 940px;
	margin: 100px auto 0;
	overflow: hidden;
}

/* -------- header */

header[role="banner"] {
	position: absolute;
	top: -100px;
	right: 0;
	width: 240px;
	padding: 100px 0;
	background-color: #eff0eb;
	text-align: center;
	z-index: 1;
}
header[role="banner"] #siteid {
	width: 220px;
	height: 24px;
	overflow: hidden;
	margin: 0 auto 30px;
}
header[role="banner"] #siteid a {
	display: block;
	padding-top: 27px;
	background: url(http://static.tumblr.com/o2dvg3i/EG7m3tclm/logo.png) no-repeat;
	background-size: contain;
}
header[role="banner"] ul {
	margin-left: -10px;
}
header[role="banner"] ul li.twitter,
header[role="banner"] ul li.rss {
	display: inline-block;
	width: 30px;
	height: 30px;
	overflow: hidden;
	margin-left: 10px;
	border-radius: 15px;
	background: #dfe0dc url(http://static.tumblr.com/o2dvg3i/ze7m5eo1t/icon.png) no-repeat;
	-webkit-transition: background-color 0.2s;
	-moz-transition: background-color 0.2s;
	-o-transition: background-color 0.2s;
	transition: background-color 0.2s;
}
header[role="banner"] ul li.twitter {
	background-position: left 0px;
}
header[role="banner"] ul li.rss {
	background-position: left -30px;
}
header[role="banner"] ul li.twitter:hover,
header[role="banner"] ul li.rss:hover {
	background-color: #7a9900;
}
header[role="banner"] ul li.twitter a,
header[role="banner"] ul li.rss a {
	display: block;
	padding-top: 30px;
	background: url(http://static.tumblr.com/o2dvg3i/ze7m5eo1t/icon.png) no-repeat;
	opacity: 0;
	-webkit-transition: opacity 0.2s;
	-moz-transition: opacity 0.2s;
	-o-transition: opacity 0.2s;
	transition: opacity 0.2s;
}
header[role="banner"] ul li.twitter a {
	background-position: -30px 0px;
}
header[role="banner"] ul li.rss a {
	background-position: -30px -30px;
}
header[role="banner"] ul li.twitter a:hover,
header[role="banner"] ul li.rss a:hover {
	opacity: 1;
}
header[role="banner"] ul li.search {
	display: inline-block;
	min-width: 30px;
	height: 30px;
	overflow: hidden;
	margin-left: 10px;
	border-radius: 15px;
	background: #dfe0dc url(http://static.tumblr.com/o2dvg3i/ze7m5eo1t/icon.png) no-repeat left -60px;
}
header[role="banner"] ul li.search input {
	width: 30px;
	height: 30px;
	vertical-align: 30px;
	border: none;
	background-color: transparent;
	opacity: 0;
	-webkit-transition: width 0.2s, opacity 0.2s;
	-moz-transition: width 0.2s, opacity 0.2s;
	-o-transition: width 0.2s, opacity 0.2s;
	transition: width 0.2s, opacity 0.2s;
}
header[role="banner"] ul li.search input:hover,
header[role="banner"] ul li.search input:focus {
	width: 100px;
	padding: 0 20px 0 30px;
	outline: none;
	opacity: 1;
}

/* -------- #content */

#content article {
	position: relative;
	margin-bottom: 30px;
}

/* -------- #main */

#main {
	margin-right: 310px;
}
#main ul.pagination {
	clear: both;
	overflow: hidden;
	margin-bottom: 100px;
	padding-top: 12px;
	line-height: 1.2;
	border-top: 1px #e5e5e1 solid;
	font-size: 0;
	text-align: right;
}
#main ul.pagination li {
	display: inline-block;
	margin-bottom: 20px;
	vertical-align: top;
	border-right: 1px #ccc solid;
	font-size: 12px;
}
#main ul.pagination li:first-child {
	border-left: 1px #ccc solid;
}
#main ul.pagination li a {
	padding: 0 8px;
	color: #aaa;
}
#main ul.pagination li a:hover {
	color: #7a9900;
}
#main ul.pagination li span {
	padding: 0 8px;
	font-weight: bold;
}
#main ul.pagination li.prev,
#main ul.pagination li.next {
	border: none;
	width: 2em;
	height: 2em;
	line-height: 2em;
	margin-top: -0.5em;
	border-radius: 3px;
	background-color: #e4e6e1;
	text-align: center;
}
#main ul.pagination li.prev {
	margin-left: 10px;
}
#main ul.pagination li.next {
	margin-left: 3px;
}
#main ul.pagination li.prev a,
#main ul.pagination li.next a {
	display: block;
	padding: 0;
	border-radius: 3px;
	background-color: #e4e6e1;
}
#main ul.pagination li.prev a:hover,
#main ul.pagination li.next a:hover {
	background-color: #7a9900;
	color: #fff;
}
#main p.search-result {
	margin-bottom: 30px;
	padding: 8px 12px;
	border-radius: 3px;
	background-color: #f7f7f5;
	font-size: 12px;
}
#main p.search-result + p.notice {
	margin-bottom: 100px;
}
#main p.search-result span.tag {
	margin: 0 10px 0 -1px;
	padding-left: 21px;
	background: url(http://static.tumblr.com/o2dvg3i/ze7m5eo1t/icon.png) no-repeat left -129px;
	color: #aaa;
}

/* -------- #main article */

#main article {
	margin-bottom: 100px;
	font-size: 13px;
}
#main article h2 {
	font-weight: normal;
}
#main article h2 a {
	color: #668000;
}
#main article h2 a:hover {
	color: #555;
}
#main article ul.meta {
	float: left;
	margin-bottom: 30px;
	font-size: 11px;
}
#main article ul.meta li {
	float: left;
	margin: 0 15px 0 -1px;
	padding-left: 23px;
	background: url(http://static.tumblr.com/o2dvg3i/ze7m5eo1t/icon.png) no-repeat;
	color: #aaa;
	text-indent: 0;
}
#main article ul.meta li:before {
	display: none;
}
#main article ul.meta li.time {
	background-position: left -96px;
}
#main article ul.meta li.tag {
	background-position: left -126px;
}
#main article ul.meta li.reaction {
	background-position: left -156px;
}
#main article ul.meta li a {
	margin-left: 6px;
	border-bottom: 1px #aaa dotted;
	color: #aaa;
}
#main article ul.meta li a:first-child {
	margin-left: 0;
}
#main article ul.meta li a:hover {
	border-bottom-color: #555;
	color: #555;
}
#main article ul.share {
	overflow: hidden;
	margin: 50px 0 15px -15px;
}
#main article ul.share li {
	float: left;
	margin-left: 15px;
}
#main article ul.share li.twitter iframe {
	width: 90px !important;
}
#main article ul.share li div#___plusone_0 {
	width: 61px !important;
}
#main article div.fb-comments,
#main article div.fb-comments span,
#main article div.fb-comments iframe {
	width: 100% !important;
}

/* -------- #main article div.body */

#main article div.body {
	clear: both;
	overflow: hidden;
	margin-bottom: 100px;
}
#main article div.body h3 {
	margin: 40px 0 20px;
	color: #444;
}
#main article div.body h4 {
	margin: 30px 0 5px;
}
#main article div.body p {
	margin-bottom: 1.2em;
}
#main article div.body ul,
#main article div.body ol {
	margin-bottom: 1.2em;
}
#main article div.body ul li,
#main article div.body ol li {
	margin-left: 2.7em;
	text-indent: -2.7em;
}
#main article div.body ul li:before {
	display: inline-block;
	width: 2em;
	margin-right: 0.7em;
	color: #999;
	text-align: right;
	content: "\2022";
}
#main article div.body ol {
	counter-reset: item;
}
#main article div.body ol li:before {
	display: inline-block;
	width: 2em;
	margin-right: 0.7em;
	color: #999;
	text-align: right;
	content: counter(item) "\2e";
	counter-increment: item;
}
#main article div.body table {
	width: 100%;
	margin-bottom: 30px;
	border-radius: 3px;
}
#main article div.body table th,
#main article div.body table td {
	padding: 8px 10px;
	border-right: 1px solid #e5e5e1;
	border-bottom: 1px solid #e5e5e1;
	vertical-align: middle;
}
#main article div.body table th {
	border-color: #dbdbd7 !important;
	background-color: #eff0eb;
	font-weight: bold;
}
#main article div.body table tr:first-child th,
#main article div.body table tr:first-child td {
	border-top: 1px solid #e5e5e1;
}
#main article div.body table tr th:first-child,
#main article div.body table tr td:first-child {
	border-left: 1px solid #e5e5e1;
}
#main article div.body table tr:first-child th:first-child,
#main article div.body table tr:first-child td:first-child {
	border-top-left-radius: 3px;
}
#main article div.body table tr:first-child th:last-child,
#main article div.body table tr:first-child td:last-child {
	border-top-right-radius: 3px;
}
#main article div.body table tr:last-child th:first-child,
#main article div.body table tr:last-child td:first-child {
	border-bottom-left-radius: 3px;
}
#main article div.body table tr:last-child th:last-child,
#main article div.body table tr:last-child td:last-child {
	border-bottom-right-radius: 3px;
}
#main article div.body a {
	border-bottom: 1px #668000 dotted;
}
#main article div.body a:hover {
	border-bottom-color: #555;
}
#main article div.body p.c {
	text-align: center;
}
#main article div.body p.c a {
	display: inline-block;
	padding: 4px;
	border: none;
	background-color: #e4e5e1;
}
#main article div.body p.c a:hover {
	background-color: #7a9900;
}
#main article div.body p.more {
	margin-top: 3em;
}

/* .bt */
#main article div.body .bt {
    display: inline-block;
    margin: 2px;
    padding: 0.5em 1em;
    border: 1px solid #d4d4d4;
    text-decoration: none;
    text-shadow: 1px 1px 0 #fff;
    color: #333;
    white-space: nowrap;
    outline: none;
    background-color: #ececec;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
    background-image: -moz-linear-gradient(#f4f4f4, #ececec);
    background-image: -o-linear-gradient(#f4f4f4, #ececec);
    background-image: linear-gradient(#f4f4f4, #ececec);
    border-radius: 3px;
    cursor: pointer;
}
#main article div.body .bt:hover,
#main article div.body .bt:active,
#main article div.body .bt.active {
    border-color: #708c00;
    text-shadow: -1px -1px 0 #627a00;
    color: #fff;
    background-color: #7a9900;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#8eb200), to(#7a9900));
    background-image: -moz-linear-gradient(#8eb200, #7a9900);
    background-image: -o-linear-gradient(#8eb200, #7a9900);
    background-image: linear-gradient(#8eb200, #7a9900);
}
#main article div.body .bt:active {
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#7a9900), to(#8eb200));
    background-image: -moz-linear-gradient(#7a9900, #8eb200);
    background-image: -o-linear-gradient(#7a9900, #8eb200);
    background-image: linear-gradient(#7a9900, #8eb200);
}
#main article div.body .bt[disabled],
#main article div.body .bt[disabled]:hover,
#main article div.body .bt[disabled]:active {
	border-color: #ddd;
	text-shadow: -1px -1px 0 #fff;
	color: #aaa;
	background-color: #ececec;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
    background-image: -moz-linear-gradient(#f4f4f4, #ececec);
    background-image: -o-linear-gradient(#f4f4f4, #ececec);
    background-image: linear-gradient(#f4f4f4, #ececec);
    cursor: default;
}

/* ================================================== [ Google Code Prettify ] */

#main article pre.prettyprint.linenums {
	box-shadow: inset 40px 0 0 #eff0eb, inset 41px 0 0 #e5e5e1;
}
#main article pre.prettyprint ol.linenums {
	margin-bottom: 0;
}
#main article pre.prettyprint ol.linenums li {
	margin-left: 40px;
	text-indent: -60px;
}
#main article pre.prettyprint ol.linenums li:before {
	width: 42px;
	margin-right: 18px;
}

#main article pre .str { color: #d2323c; }  /* string content */
#main article pre .kwd { color: #114480; }  /* a keyword */
#main article pre .com { color: #999; }  /* a comment */
#main article pre .typ { color: #008080; }  /* a type name */
#main article pre .lit { color: #825a24; }  /* a literal value */

#main article pre .tag { color: #114480; }  /* a markup tag name */
#main article pre .atn { color: #825a24; }  /* a markup attribute name */
#main article pre .atv { color: #d2323c; }  /* a markup attribute value */

#main article pre .nocode { color: #999; }

/* -------- #secondary */

#secondary {
	position: absolute;
	top: 125px;
	right: 0;
	width: 240px;
	overflow: hidden;
	background-color: #eff0eb;
	text-align: center;
	z-index: 1;
}
#secondary h3 {
	height: 45px;
	line-height: 36px;
	background: url(http://static.tumblr.com/o2dvg3i/NJcm3td40/bg_capt.png) no-repeat center top;
	font-weight: normal;
	text-transform: uppercase;
	text-shadow: 0 1px 0 #fff;
	letter-spacing: 1px;
}
#secondary ul.tag {
	overflow: hidden;
	margin: 0 0 40px -10px;
}
#secondary ul.tag li {
	float: left;
	width: 115px;
	margin: 0 0 10px 10px;
}
#secondary ul.tag li a {
	display: block;
	padding: 5px 0;
	border-radius: 3px;
	background-color: #e4e5e1;
	color: #555;
}
#secondary ul.tag li a:hover {
	background-color: #7a9900;
	color: #fff;
}
#secondary ul.following {
	overflow: hidden;
	margin: 0 0 40px -10px;
}
#secondary ul.following li {
	float: left;
	margin: 0 0 10px 10px;
}
#secondary ul.following li img {
	border-radius: 3px;
}
#secondary ul.ad {
	margin-bottom: 40px;
	text-align: center;
}
#secondary ul.ad li {
	margin-bottom: 30px;
}
#secondary ul.ad li a img {
	display: block;
	margin: 0 auto 5px;
}

/* -------- footer */

footer[role="contentinfo"] {
	clear: both;
}
footer[role="contentinfo"] p#pagetop {
	position: fixed;
	right: 50%;
	bottom: 20px;
	margin-right: -480px;
}
footer[role="contentinfo"] p#pagetop a {
	padding: 4px 0 4px 28px;
	background: url(http://static.tumblr.com/o2dvg3i/ze7m5eo1t/icon.png) no-repeat left -185px;
	color: #888;
	font-size: 11px;
}
footer[role="contentinfo"] p#pagetop a:hover {
	color: #555;
}
footer[role="contentinfo"] p.copyright {
	margin: 0 310px 20px 0;
}

/* ================================================== [ Media queries ] */

@media screen and (max-width: 1000px) {

	/* -------- Structure */

	body:before {
		right: 0;
		left: auto;
		width: 285px;
		margin-left: 0;
	}

	/* -------- footer */

	footer[role="contentinfo"] p#pagetop {
		right: 20px;
		margin-right: 0;
	}
}

@media screen and (max-width: 480px) {

	/* -------- Structure */

	body {
		margin: 0;
	}
	body:before {
		display: none;
	}

	/* -------- container */

	div#container {
		width: auto;
		margin: 0;
	}

	/* -------- header */

	header[role="banner"] {
		position: static;
		width: 100%;
		margin-bottom: 50px;
		padding: 40px 0 15px;
	}
	header[role="banner"] #siteid {
		margin: 0 auto 10px;
	}

	/* -------- #main */

	#main {
		margin: 0 15px;
	}
	#main article {
		margin-bottom: 60px;
	}

	/* -------- #secondary */

	#secondary {
		position: static;
		width: 100%;
		padding-top: 20px;
	}
	#secondary ul {
		padding: 0 40px;
	}
	#secondary ul.tag li {
		width: 90px;
	}

	/* -------- footer */

	footer[role="contentinfo"] {
		position: static;
		padding-bottom: 15px;
		background-color: #eff0eb;
		text-align: center;
	}
	footer[role="contentinfo"] p#pagetop {
		display: none;
	}
	footer[role="contentinfo"] p.copyright {
		margin: 0;
	}
}