/*
Theme Name: Johny Wuss Responsive (Home Designs)
Theme URI: http://johnywussresponsif.blogspot.com
Author: Maskolis / CB Design (Blogger original), WordPress port
Author URI: http://www.maskolis.com/
Description: WordPress port of the classic Blogger theme "Johny Wuss Responsive" (Magazine Home Designs layout). Two-column, right sidebar, responsive, category dropdown menu, compact thumbnail grid on index/archive/search pages, related posts, breadcrumbs and share box on single posts.
Version: 1.0.4
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: Creative Commons Attribution 3.0 (original Blogger template)
License URI: http://creativecommons.org/licenses/by/3.0/
Text Domain: johnywuss
Tags: two-columns, right-sidebar, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready, responsive-layout
*/

/* ============ Base ============ */
html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: #EAEDF0;
	color: #444;
	font: x-small Georgia Serif;
	font-size: small;
	text-align: center;
}

a {
	color: #0956a8;
	text-decoration: none;
}

a:hover {
	color: #333;
	text-decoration: underline;
}

a img {
	border-width: 0;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}

p {
	margin: 0 0 .75em;
}

h2 {
	line-height: 1.4em;
	text-transform: none;
	color: #333;
	margin: .5em 0 .25em;
}

h3.date-header {
	text-transform: none;
	font: normal 12px Arial;
	color: #999;
	line-height: 1.2em;
	margin: .1em 0;
}

.clear {
	clear: both;
}

.clearfix::after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.cb {
	display: none;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	overflow: hidden;
}

.screen-reader-text:focus {
	position: static !important;
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	display: block;
	padding: 6px 10px;
	background: #fff;
	color: #0a2e56;
	font: bold 12px Arial;
	z-index: 100000;
}

.alignleft {
	float: left;
	margin-right: 15px;
}

.alignright {
	float: right;
	margin-left: 15px;
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

/* ============ Layout shell ============ */
#outer-wrapper {
	background: #fff;
	max-width: 910px;
	text-align: left;
	font: 12px Arial;
	margin: 1px auto;
	padding: 8px;
}

#header-wrapper {
	max-width: 910px;
	margin: 0 auto;
	padding-top: 40px;
	padding-bottom: 5px;
}

#header-inner {
	background-position: center;
	margin-left: auto;
	margin-right: auto;
}

#header {
	float: left;
	max-width: 350px;
	text-align: left;
	color: #666;
	margin: 0;
}

#header2 {
	float: right;
	width: 468px;
	margin-right: 0;
	text-align: right;
	color: #555;
}

#header .widget,
.header2 .widget {
	margin: 0 auto;
	padding: 2px 0 5px;
}

#header h1,
#header p.site-title {
	line-height: 1.4em;
	text-transform: uppercase;
	font: bold 26px Oswald, Arial, sans-serif;
	margin: 0 auto;
	padding: 5px;
}

#header p.site-title {
	font-size: 20px;
}

#header a {
	color: #0a2e56;
	text-decoration: none;
}

#header a:hover {
	color: #D20000;
}

#header .description,
#header p.description {
	max-width: 100%;
	text-transform: none;
	letter-spacing: .01em;
	line-height: 1.4em;
	font: 12px Arial;
	color: #666;
	margin: 0 auto;
	padding: 0 5px 5px;
}

#header img {
	margin-right: auto;
	margin-left: auto;
}

#header .custom-logo {
	display: block;
}

#content-wrapper {
	margin: 0;
	padding: 0;
}

#main-wrapper {
	padding-top: 10px;
	width: 600px;
	float: left;
	word-wrap: break-word;
	overflow: hidden;
}

#sidebar-wrapper,
#sidebar1-wrapper {
	width: 300px;
	float: right;
	word-wrap: break-word;
	overflow: hidden;
	padding-top: 10px;
}

#skiplinks {
	display: none;
}

/* ============ Category nav (#cat-nav / #secnav) ============ */
#cat-nav {
	background: #156994;
	margin: 0 15px;
	padding: 0;
	height: 35px;
}

#cat-nav a {
	color: #eee;
	text-decoration: none;
	text-shadow: #033148 0 1px 0;
	border-right: 1px solid #156994;
}

#cat-nav a:hover {
	color: #fff;
}

#cat-nav li:hover {
	background: #000;
}

#cat-nav a span {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	color: #fff;
	text-shadow: none;
}

#cat-nav .nav-description {
	display: block;
}

#cat-nav a:hover span {
	color: #fff;
}

#secnav,
#secnav ul {
	position: relative;
	z-index: 100;
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 1;
	background: #0d5e88;
}

#secnav a {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 14px;
	display: block;
	z-index: 100;
	padding: 0 15px;
	line-height: 35px;
	text-decoration: none;
}

#secnav li {
	float: left;
	width: auto;
	height: 35px;
}

#secnav li ul {
	position: absolute;
	left: -999em;
	width: 200px;
	top: 35px;
	background: #0d5e88;
}

#secnav li ul li {
	height: 30px;
	border-top: 1px solid #fff;
}

#secnav li ul li a {
	font-family: Verdana, Geneva, sans-serif;
	width: 180px;
	line-height: 30px;
	padding: 0 10px;
	font-size: 11px;
	font-style: normal;
	font-weight: 400;
	color: #eee;
}

#secnav li ul ul {
	margin: -30px 0 0 180px;
}

#secnav li:hover ul ul,
#secnav li:hover ul ul ul {
	left: -999em;
}

#secnav li:hover ul,
#secnav li li:hover ul,
#secnav li li li:hover ul {
	left: auto;
}

#secnav li:hover,
#secnav li.hover {
	position: static;
}

#cat-nav #secnav {
	width: 100%;
	margin: 0 auto;
}

/* Responsive down menu (original #menu block) */
#menu {
	background: #484848;
	color: #F2F2F2;
	height: 35px;
	border-bottom: 2px solid #DDD;
}

#menu ul,
#menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none;
}

#menu ul {
	height: 40px;
	width: 1024px;
}

#menu li {
	float: left;
	display: inline;
	position: relative;
	font: bold 1em Arial;
	text-shadow: 1px 2px 4px #838383;
}

#menu a {
	display: block;
	line-height: 35px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFF;
}

#menu li a:hover {
	color: #E4E4E4;
	transition: all .1s ease-in-out;
	background: #5FC6EB;
}

#menu input {
	display: none;
	margin: 0;
	padding: 0;
	width: 80px;
	height: 30px;
	opacity: 0;
	cursor: pointer;
}

#menu label {
	font: bold 30px Arial;
	display: none;
	width: 35px;
	height: 36px;
	line-height: 36px;
	text-align: center;
}

#menu label span {
	font-size: 16px;
	position: absolute;
	left: 35px;
}

#menu ul.menus {
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #50B7DC;
	position: absolute;
	z-index: 99;
	display: none;
}

#menu ul.menus li {
	display: block;
	width: 100%;
	font: normal 1em Arial;
	text-transform: none;
	text-shadow: none;
	border-bottom: 1px dotted #31AFDB;
}

#menu ul.menus a {
	color: #FFF;
	line-height: 35px;
}

#menu li:hover ul.menus {
	display: block;
}

#menu ul.menus a:hover {
	background: #5FC6EB;
	color: #FFF;
}

/* ============ Search in nav ============ */
.menusearch {
	width: 200px;
	float: right;
	margin: 0 auto;
	padding: 0;
}

.searchform {
	margin-top: 0;
	display: inline-block;
	padding: 0;
	background: #eee;
	width: 200px;
	height: 23px;
	overflow: hidden;
	border-radius: 3px;
	border: 1px solid #021427;
	box-shadow: 0 0 5px 0 #666 inset;
}

.searchform input {
	font: italic 12px Arial;
	color: #222;
	line-height: 23px;
	height: 23px;
	padding: 0;
	margin: 0;
}

.searchform .searchfield {
	background: transparent;
	padding: 0 0 0 6px;
	margin: 0;
	width: 165px;
	height: 23px;
	border: 0;
	outline: none;
	line-height: 23px;
}

.searchform .searchbutton {
	border: none;
	margin: 0;
	padding: 0;
	font-size: 12px;
	height: 23px;
	width: 23px;
	background: transparent;
	cursor: pointer;
}

/* ============ Posts ============ */
.post {
	margin: 0 0 15px;
	padding: 5px 15px 15px;
}

.post h1,
.post h2,
.post-title {
	font-family: Arial, sans-serif;
	font-size: 160%;
	font-weight: 700;
	line-height: 1.2em;
	color: #0a2e56;
	margin: 0 0 0;
	padding: 4px 0;
}

.post h1 a,
.post h1 a:visited,
.post h2 a,
.post h2 a:visited,
.post .post-title a {
	display: block;
	text-decoration: none;
	color: #0a2e56;
	font-weight: 700;
}

.post h1 a:hover,
.post h2 a:hover,
.post .post-title a:hover {
	color: #333;
}

.post-body {
	border-top: 2px solid #ddd;
	padding-top: 10px;
	margin: 15px 0 .75em;
	text-align: left;
	font: 14px Arial;
	line-height: 1.4em;
}

.post-body blockquote {
	line-height: 1.4em;
}

.post blockquote {
	font: italic 14px Georgia;
	color: #000;
	letter-spacing: .001em;
	line-height: 1em;
	float: none;
	margin: 15px;
	padding: 0;
}

.post blockquote p {
	margin: .75em 0;
}

.post img,
table.tr-caption-container {
	border: 2px solid #f4f4f4;
	margin-right: 10px;
}

.tr-caption-container img {
	border: none;
	padding: 0;
}

.post-footer {
	color: #666;
	text-transform: none;
	letter-spacing: .01em;
	font: 12px Arial;
	line-height: 1.4em;
	margin: .75em 0;
}

.comment-link,
.comments-link {
	margin-left: .1em;
}

.post-thumbnail {
	width: 70px;
	height: 70px;
	float: left;
	margin-right: 10px;
	border: 2px solid #f4f4f4;
}

/* Featured image on the single post template. */
.post-featured-image {
	margin: 0 0 14px;
	line-height: 0;
}

.post-featured-image img {
	max-width: 100%;
	height: auto;
	border: 2px solid #f4f4f4;
}

.breadcrumbs {
	padding: 5px 5px 5px 0;
	margin: 0;
	font-size: 95%;
	line-height: 1.4em;
	border-bottom: 4px double #ccc;
}

/* ============ Pager ============ */
#blog-pager {
	clear: both;
	text-align: center;
	margin: 10px 5px 0;
	padding: 10px 0 0;
}

#blog-pager-older-link a,
#blog-pager-newer-link a,
a.home-link,
.blog-pager .page-numbers {
	width: 80px;
	text-align: center;
	display: inline-block;
	color: #eee;
	background: #1a4d86;
	font: bold 12px Arial;
	text-transform: none;
	margin: 0;
	padding: 5px;
	border-radius: 4px;
}

.blog-pager .page-numbers {
	width: 12px;
}

.blog-pager span.current,
.blog-pager .current {
	background: #0a2e56;
	color: #fff;
}

#blog-pager-older-link a:hover,
#blog-pager-newer-link a:hover,
a.home-link:hover,
.blog-pager a.page-numbers:hover {
	background: #0a2e56;
	color: #fff;
	text-decoration: none;
}

.feed-links {
	clear: both;
	line-height: 2.5em;
}

/* ============ Related posts ============ */
#related-posts {
	float: left;
	width: 100%;
	border-bottom: 0 solid #888;
	border-top: 0 solid #88daed;
	margin: 5px 0 10px;
	padding: 15px 0 10px;
}

#related-posts .widget h2,
#related-posts h3,
.related-post h4 {
	font: bold 18px Arial;
	color: #000;
	text-transform: none;
	margin: 0 0 10px;
	padding: 0;
}

#related-posts a,
.related-post a {
	color: #0973CF;
	font: 14px Arial;
}

#related-posts li,
.related-post li {
	background: url(data:image/gif;base64,R0lGODlhAgACAIAAAP///wAAACH5BAEAAAAALAAAAAACAgIAAAIDRFIPACH5BAkAAAAALAAAAAACAgIAAAIDElJOUwA7) no-repeat 0 10px;
	text-indent: 0;
	line-height: 1.3em;
	border-bottom: 1px dotted #ccc;
	margin: 0;
	padding: 3px 0 8px 12px;
	list-style: none;
}

#related-posts a:hover,
.related-post a:hover {
	color: #c00;
	text-decoration: none;
}

#related-posts ul,
.related-post ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#related-posts .widget,
.related-post .widget {
	margin: 0;
	padding: 0;
}

/* ============ Share box ============ */
.share-box {
	border-top: 3px solid #ccc;
	border-bottom: 1px solid #ddd;
	width: 100%;
	min-height: 24px;
	text-align: left;
	font: normal 11px Arial;
	color: #333;
	margin: 10px 0;
	padding: 10px 0 5px;
	overflow: hidden;
}

.share-box .share-label {
	float: left;
	padding: 1px 0;
	margin-right: 15px;
	font: bold 13px Arial;
	color: #777;
}

.share-box a {
	float: left;
	display: inline-block;
	margin: 0 6px 0 0;
	padding: 4px 10px;
	background: #1a4d86;
	color: #eee;
	font: bold 11px Arial;
	border-radius: 3px;
	text-decoration: none;
}

.share-box a:hover {
	background: #0a2e56;
	color: #fff;
	text-decoration: none;
}

/* ============ Sidebar ============ */
.sidebar,
.sidebar1 {
	color: #666;
	line-height: 1.3em;
	border-top: none;
	font: 11px Arial;
}

.sidebar h2,
.sidebar1 h2,
.sidebar .widget-title,
.sidebar1 .widget-title {
	background-color: #1a4d86;
	background-image: linear-gradient(to bottom, #2a6da8, #1a4d86);
	background-repeat: no-repeat;
	background-position: right center;
	font: bold 12px Arial;
	color: #eee;
	margin: 0;
	padding: 7px 0 7px 10px;
	text-shadow: 0 1px 1px #000;
	cursor: pointer;
}

#sidebar h2.active,
#sidebar .widget-title.active {
	background-image: linear-gradient(to bottom, #0f3a63, #1a4d86);
}

.sidebar li,
.sidebar1 li {
	line-height: 1.3em;
	margin: 0;
	padding: 5px 0 4px;
	border-bottom: 1px dotted #ddd;
}

.sidebar .widget,
.sidebar1 .widget {
	margin: 0 0 8px;
	padding: 0;
}

.sidebar .widget-content,
.sidebar1 .widget-content {
	margin: 0 auto;
	padding: 0 5px;
	background: #fff;
	border: 1px solid #eee;
	border-top: none;
}

.sidebar a,
.sidebar1 a {
	font: bold 12px Arial;
	color: #555;
	text-decoration: none;
}

.sidebar li a:hover,
.sidebar1 li a:hover {
	color: #015bb3;
}

.sidebar ul,
.sidebar1 ul {
	list-style: none;
	margin: 0;
	padding: 5px 0;
}

.sidebar select,
.sidebar1 select {
	width: 100%;
	padding: 6px;
	border: 1px solid #ddd;
	background: #fff;
	color: #555;
	font: 12px Arial;
}

.sidebar form,
.sidebar1 form {
	margin: 0;
	padding: 8px 0;
}

.popular-posts img,
.widget img {
	float: left;
	margin-right: 5px;
}

.widget .avatar,
.widget .wp-post-image {
	width: 32px;
	height: 32px;
}

/* Sidebar search box (was HTML2 widget) */
#searchbox {
	background: #d8d8d8;
	border: 4px solid #e8e8e8;
	padding: 20px 10px;
	width: 250px;
	box-sizing: border-box;
}

#searchbox input {
	outline: none;
}

#searchbox input[type="text"],
#searchbox .search-field {
	background: #fff;
	border: 1px solid #fff;
	font: bold 12px Arial, Helvetica, sans-serif;
	color: #bebebe;
	width: 55%;
	padding: 8px 8px 8px 30px;
}

#searchbox #button-submit,
#searchbox .search-submit {
	background: #6A6F75;
	border-width: 0;
	padding: 9px 0;
	width: 23%;
	cursor: pointer;
	font: bold 12px Arial, Helvetica;
	color: #fff;
	text-shadow: 0 1px 0 #555;
}

#searchbox #button-submit:hover,
#searchbox .search-submit:hover {
	background: #4f5356;
}

#searchbox #button-submit:active,
#searchbox .search-submit:active {
	background: #5b5d60;
	outline: none;
}

#searchbox #button-submit::-moz-focus-inner,
#searchbox .search-submit::-moz-focus-inner {
	border: 0;
}

/* ============ Footer ============ */
.picfooter {
	background-color: #111;
	background-image: linear-gradient(to bottom, #333 0, #111 100%);
	border-bottom: 1px solid #000;
	border-top: 4px solid #111;
	max-width: 910px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font: normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
}

#footer-wrapper {
	max-width: 890px;
	text-align: left;
	font: normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;
	margin: 0 auto;
	padding: 0 10px 10px;
}

#footer1-wrapper,
#footer2-wrapper,
#footer3-wrapper {
	width: 33.3333%;
	float: left;
	word-wrap: break-word;
	overflow: hidden;
}

#footer2-wrapper {
	width: 32%;
	margin: 0 1%;
}

#footer3-wrapper {
	width: 33%;
	float: right;
}

.footer h2,
.footer .widget-title {
	background: none;
	border-bottom: 1px solid #333;
	font: bold 14px Arial;
	padding-bottom: 8px;
	margin-bottom: 8px;
	line-height: 1.3em;
	text-transform: uppercase;
	color: #ddd;
}

.footer {
	color: #ccc;
	line-height: 1.3em;
	font: normal 12px Arial;
	text-shadow: -1px -1px #111;
}

.footer ul {
	list-style: none;
	color: #EAE9E8;
	margin: 0;
	padding: 0;
}

.footer li {
	background: none;
	font: normal 12px Arial;
	color: #626262;
	text-indent: 0;
	line-height: 1.2em;
	margin: 0;
	padding: 2px 0 3px 17px;
	border-bottom: none;
	position: relative;
}

.footer li::before {
	content: "\00BB";
	position: absolute;
	left: 0;
	color: #666;
}

.footer a,
.footer li a {
	color: #aaa;
	text-decoration: none;
}

.footer li a:hover {
	color: #fff;
}

.footer .widget {
	margin: 0 0 8px;
	padding: 6px 0;
}

.footer .widget-content {
	padding: 0;
	border: none;
	background: transparent;
}

.creditpic {
	background: #0a2e56;
	max-width: 910px;
	border-top: 1px solid #1a4d86;
	margin: 0 auto;
	padding: 0;
}

.credit {
	max-width: 880px;
	line-height: 1.6em;
	text-align: center;
	font-family: Arial, sans-serif;
	font-size: 11px;
	color: #9c9c9c;
	overflow: hidden;
	clear: both;
	margin: 0 auto;
	padding: 10px;
}

.credit a {
	color: #cecdcd;
	text-decoration: none;
}

.credit a:hover {
	color: #FaFaFc;
	text-decoration: none;
}

.credit-kiri {
	float: left;
	text-align: left;
}

/* ============ Comments ============ */
.comments {
	clear: both;
	margin-top: 10px;
	margin-bottom: 0;
	line-height: 1.3em;
	font: 13px Arial;
}

.comments h4,
.comment-reply-title,
.comments-title {
	font: bold 14px Arial;
	color: #333;
	margin: 12px 0 8px;
	padding: 0;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-list .comment,
.comment-list .pingback {
	margin: 8px 0;
	padding: 8px 10px;
	background: #f7f7f7;
	border: 1px solid #eee;
	border-radius: 3px;
}

.comment-list .children {
	list-style: none;
	margin: 8px 0 0 36px;
	padding: 0;
}

.comment-list .comment-body {
	overflow: hidden;
}

.comment-list .comment-author,
.comment-list .fn {
	font: bold 12px Arial;
	color: #0a2e56;
}

.comment-list .comment-meta,
.comment-list .comment-metadata {
	font: normal 11px Arial;
	color: #999;
	margin-bottom: 6px;
}

.comment-list .avatar {
	float: left;
	margin-right: 8px;
	border: 1px solid #ddd;
	border-radius: 2px;
}

.comment-list .reply,
.comment-list .comment-reply-link {
	float: right;
	display: inline-block;
	margin-left: 5px;
	padding: 1px 12px;
	color: #424242;
	text-align: center;
	text-decoration: none;
	font: 11px/18px sans-serif;
	background: #fff;
	border: 1px solid #E4E4E4;
	border-radius: 15px;
}

.comment-list .reply a:hover {
	background: #ccc;
	text-decoration: underline;
	color: #333;
}

.comment-list .comment-awaiting-moderation {
	display: block;
	color: #b00;
	font-size: 11px;
}

.paging-control-container {
	display: block;
	margin: 8px 0;
	font: 11px Arial;
	color: #999;
}

.comment-form {
	margin: 10px 0 0;
	padding: 10px;
	background: #f7f7f7;
	border: 1px solid #eee;
}

.comment-form p {
	margin: 0 0 8px;
}

.comment-form label {
	display: block;
	font: bold 11px Arial;
	color: #666;
	margin-bottom: 3px;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 60%;
	padding: 6px;
	border: 1px solid #ddd;
	background: #fff;
	font: 12px Arial;
	color: #444;
}

.comment-form textarea {
	width: 92%;
	height: 140px;
}

.comment-form .submit,
.wideform .submit {
	padding: 6px 16px;
	background: #1a4d86;
	border: none;
	border-radius: 4px;
	color: #eee;
	font: bold 12px Arial;
	cursor: pointer;
}

.comment-form .submit:hover {
	background: #0a2e56;
	color: #fff;
}

.comment-notes,
.form-allowed-tags,
.logged-in-as {
	font: normal 11px Arial;
	color: #888;
}

.form-allowed-tags code {
	font-size: 10px;
}

/* ============ Archive / search heading ============ */
.archive-heading {
	font: bold 14px Arial;
	color: #0a2e56;
	background: #f2f5f8;
	border-left: 4px solid #1a4d86;
	margin: 0 0 12px;
	padding: 8px 10px;
}

.archive-heading .archive-description {
	display: block;
	font: normal 11px Arial;
	color: #777;
	margin-top: 4px;
}

/* ============ wp body / element defaults ============ */
.widget_search .search-field,
.widget_search .search-submit {
	padding: 5px;
	border: 1px solid #ddd;
	font: 12px Arial;
}

.widget_rss cite,
.widget_text .rss-date {
	font: normal 11px Arial;
	color: #999;
}

.wp-caption {
	max-width: 100%;
	background: #f4f4f4;
	border: 1px solid #eee;
	padding: 4px;
}

.wp-caption-text,
.gallery-caption {
	font: normal 11px Arial;
	color: #777;
	text-align: center;
	margin: 4px 0 0;
}

.sticky {
	background: #fffdf0;
	border: 1px solid #eee6c4;
}

.bypostauthor {
	background: #f0f6fb;
	border-color: #cfe2f3;
}

.gallery {
	margin-bottom: 15px;
}

.gallery-columns-4 .gallery-item {
	max-width: 25%;
}

/* ============ Compact grid (home / archive / search / label) ============ */
body.jw-index h3.date-header,
body.jw-index .post-timestamp,
body.jw-index .post-footer,
body.jw-index .feed-links {
	display: none;
}

/* Blogger's compact index grid: every box is the same fixed size, which is what
   keeps the floated rows aligned. Letting the height grow made rows stagger. */
body.jw-index .post-outer {
	float: left;
	height: 106px;
}

body.jw-index .post {
	float: left;
	width: 274px;
	height: 90px;
	margin: 0 5px 5px 5px;
	padding: 7px 7px 1px;
	overflow: hidden;
	border-bottom: 1px dotted #ddd;
}

body.jw-index .post h1,
body.jw-index .post h2,
body.jw-index .post-title {
	line-height: 1em;
	margin: 0 0 4px;
	padding: 0;
	font: bold 12px Arial;
}

body.jw-index .post-title a {
	color: #0a2e56;
}

body.jw-index .post-title a:hover {
	color: #111;
}

body.jw-index .post-body {
	font: 11px Arial;
	border-top: none;
	padding-top: 0;
	margin: 0;
	background: none;
	text-align: left;
}

/* ============ Responsive ============ */
@media screen and (max-width: 998px) {
	#outer-wrapper {
		/* The original Blogger rule only set width:930px, which its own
		   max-width:910px clamped back down — 620px main + 300px sidebar then
		   exceeded the container and the sidebar dropped under the posts. */
		width: 930px;
		max-width: 930px;
	}

	#main-wrapper {
		width: 620px;
	}
}

@media screen and (max-width: 950px) {
	#outer-wrapper {
		width: 880px;
	}

	#main-wrapper {
		width: 570px;
	}

	#header,
	#header2 {
		max-width: 950px;
		width: auto;
		float: none;
		text-align: center;
	}
}

@media screen and (max-width: 900px) {
	#outer-wrapper {
		width: 810px;
	}

	#main-wrapper {
		width: 500px;
	}
}

@media screen and (max-width: 870px) {
	#outer-wrapper {
		width: 798px;
	}

	#main-wrapper {
		width: 488px;
	}

	.credit-kiri {
		max-width: 798px;
		width: auto;
		float: none;
		text-align: center;
	}

	#footer2-wrapper {
		margin: 0;
	}
}

@media screen and (max-width: 840px) {
	#outer-wrapper {
		width: 768px;
	}

	#main-wrapper {
		width: 458px;
	}
}

@media screen and (max-width: 790px) {
	#outer-wrapper {
		width: 720px;
	}

	#main-wrapper {
		width: 410px;
	}
}

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

	#outer-wrapper,
	#main-wrapper,
	#footer1-wrapper,
	#footer2-wrapper,
	#footer3-wrapper {
		max-width: 730px;
		width: auto;
		float: none;
	}

	#outer-wrapper {
		margin: 0;
		padding: 0;
	}

	#sidebar-wrapper,
	#sidebar1-wrapper {
		width: 100%;
		float: none;
	}

	#secnav li {
		float: none;
		height: auto;
	}

	#secnav li a {
		line-height: 32px;
	}

	#cat-nav {
		height: auto;
		margin: 0;
	}
}

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

	#footer1-wrapper,
	#footer2-wrapper,
	#footer3-wrapper {
		max-width: 680px;
		width: auto;
		float: none;
	}
}

@media screen and (max-width: 600px) {
	body.jw-index .post-outer {
		max-width: 100%;
		height: auto;
		float: none;
	}

	body.jw-index .post {
		max-width: 100%;
		width: auto;
		height: auto;
		float: none;
	}

	#main-wrapper {
		width: auto;
		float: none;
	}
}

@media screen and (max-width: 480px) {
	.credit-kiri {
		max-width: 480px;
		width: auto;
		float: none;
		text-align: center;
	}

	#header2 {
		display: none;
	}
}