/*
	Theme Name: Mare Comic
	Theme URI: http://www.marecomic.com
	Description: Theme for the Mare Internum comic site
	Version: 1.2.1
	Author: DH/LC
*/

/* STYLE SHEET COLOR REFERENCE
   ---------------------------
   gray (bg fields)..................................5b4e6e
   plum (header fields)..............................2d1f34
   beige (text fields, header font color)............fff7f1
   maroon (text font color)..........................50101f
   blue (link text font color).......................27abff
   orange (header nav unselected color)..............ea6771
   yellow (header nav SUPPORT unselected color)......eaab67
   gold (header nav SUPPORT selected color)..........ffc600
   aqua (header nav selected color)..................5edfff
*/


/* CSS RESET
   --------- */
/*@import url("http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css");*/
@import url("reset.css");


/* TYPOGRAPHY
   ---------- */
/* Exo 2.0: Extra Light 200, Light 300, Normal 400 + italic, Medium 500 +italic */
@import url("https://fonts.googleapis.com/css?family=Exo+2:200,300,400,400italic,500italic,500");

/* Lato: Regular 400 */
@import url("https://fonts.googleapis.com/css?family=Lato:400");


/* MAIN
   ---- */
html {
	height: 100%;
	-webkit-text-size-adjust: 100%;
	overflow-y: scroll;
}

body {
	font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
	font-size: 13px;
	color: #50101f;
	min-height: 100%;
	background: #f9d6af url("/images/background_light.png") top repeat-x;
	overflow: auto; /* necessary to remove white gap caused by margin-top in the first child element */
}
	
	body.story-chapter-2,
	body.story-chapter-3,
	body.story-chapter-4,
	body.story-chapter-5,
	body.home.latest-chapter-2,
	body.home.latest-chapter-3,
	body.home.latest-chapter-4,
	body.home.latest-chapter-5 {
		background: #141e2f url("/images/background_dark.png") top repeat-x;
	}

p {
	line-height: 18px;
	margin-bottom: 13px;
}

blockquote {
	margin-bottom: 13px;
}

a {
	text-decoration: none;
	color: #27abff;
}

	a:hover {
		color: #ea6771;
	}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

sub, sup {
	font-size: 80%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
 
sup {
	top: -0.3em;
}
 
sub {
	bottom: -0.3em;
}


input[type="text"],
textarea {
	/* override default inner shadow of text input box in mobile Safari */
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgb(255,255,255)), to(rgb(255,255,255)));
}

/* STRUCTURE
   --------- */

#wrapper {
	margin: 0 auto;
	min-height: 100%;
	width: 700px;
}

#header {
	height: 100px;
}

#branding {
	height: 65px;
}

#logo {
	width: 545px;
	height: 65px;
	margin: 0 auto;
}

.logo_img {
/* 	filter: url('/images/shadow.svg#dropshadow'); /* temporary hack for Firefox 34 and older */ */
	-webkit-transform: translateZ(0); /* fix for bug in WebKit: failure to render SVGs with drop shadows at retina scale;
                                         see http://matthewhappen.com/fixing-css3-filter-blur-on-retina-displays/
										 and http://stackoverflow.com/questions/13347947/css-filter-on-retina-display-fuzzy-images
                                         and http://creativeandcode.com/fix-css-filters-creating-blurry-images-on-retina/ */
    -webkit-filter: drop-shadow(0 2px 1px rgba(0,0,0,0.5));
	filter: drop-shadow(0 2px 1px rgba(0,0,0,0.5));
                              
}

#menu {
	height: 35px;
	font-family: 'Exo 2', sans-serif;
	font-weight: 200;
	font-size: 20px;
	line-height: 35px;
	text-transform: lowercase;
	letter-spacing: 1px;
	overflow: hidden; /* to eliminate mysterious horizontal scroll bar */
}

.menu-main-container {
	float: left;
	width: 100%;
}

	.menu-main-container ul {
		float: left;
		position: relative;
		left: 50%;
	}
	
	.menu-main-container li {
		float: left;
		position: relative;
		right: 50%;
	}
	
	.menu-main-container a {
		padding: 0 20px;
		color: #ea6771;
	}
	
	.menu-main-container a:hover, .menu-main-container .current_page_item a {
		color: #5edfff;
	}
	
	/* Special styles for the SUPPORT menu item */
	.menu-item-support a {
		color: #eaab67;
	}
	
		.menu-item-support a:hover,
		.menu-item-support.current_page_item a {
			color: #ffc600;
		}

#footer {
	width: 660px;
	height: 35px;
	margin-top: 20px;
	padding: 0 20px;
	background: #5b4e6e;
	color: #2d1f34;
	font-family: 'Exo 2', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 35px;
	text-transform: lowercase;
}

#disclaimer {
	float: right;
}

/* PAGES
   ----- */
  
#container {
	margin-top: 10px;
}  

#container .header {
	width: 700px;
	height: 35px;
	background: #2d1f34;
	border-radius: 15px 15px 0 0;
}

	#container .header h1 {
		font-family: 'Exo 2', sans-serif;
		font-size: 20px;
		font-weight: 400;
		line-height: 35px;
		color: #fff7f1;
		text-align: center;
		letter-spacing: 1px;
	}
	
	#container .header h1 a {
		color: #fff7f1;
	}
	
		#container .header h1 a:hover {
			color: #ea6771;
		}

#container .entry-container {
	background: #5b4e6e;
	padding: 20px;
	overflow: hidden;
}

#container .entry-content-comic-wrap {
	width: 480px;
	float: left;
}

#container .entry-content-comic {
	background: #fff7f1;
	padding: 20px;
	line-height: 18px;
}

	#container .entry-content-comic .post-date-comments {
		font-weight: bold;
		margin-bottom: 13px;
	}
	
	#container .entry-content-comic .comments-link {
		font-weight: normal;
	}

#container .entry-content {
	background: #fff7f1;
	padding: 20px;
}
	
	#container .entry-content h1 {
		text-align: center;
		font-weight: 700;
		margin-bottom: 13px;
	}
	
	#container hr {
		margin: 20px -20px;
		border: none;
		height: 20px;
		background: #5b4e6e;
	}

/* COMICS
   ------ */
#comic-wrap {
	margin-bottom: 20px;
}
   
#comic-wrap #comic {
	background: #5b4e6e;
	border-radius: 15px 15px 0 0;
	text-align: center;
}

#comic-wrap #comic img {
	width: 650px;
	height: 950px;
}

#comic-nav-wrapper {
	height: 35px;
	width: 100%;
    background: #2d1f34;
    border-radius: 0 0 15px 15px;
    margin: 0;
    padding: 0;
}

	#comic-nav-wrapper tbody {
		float: left;
		width: 100%;
		position: relative;
	}
	
	#comic-nav-wrapper tr {
		float: left;
		position: relative;
		left: 50%;
		display: block; /* fix for IE */
	}
	
	#comic-nav-wrapper td {
		float: left;
		position: relative;
		right: 50%;
	}

.comic-nav {
	font-family: 'Exo 2', sans-serif;
	font-size: 20px;
	font-weight: 300;
	line-height: 35px;
	letter-spacing: 1px;
	text-transform: lowercase;
	padding: 0 20px;
}

.comic-nav a:link,
.comic-nav a:visited {
	color: #ea6771;
}

	.comic-nav a:hover {
		color: #5edfff;
	}
	
	.comic-nav span {
		color: #5b4e6e;
	}

/* SIDEBAR
   ------- */
#sidebar {
	float: right;
	width: 160px;
}

.widget-container {
	overflow: hidden;
	text-align: center;
}	

.patreon-sidebar .patreon-icon span,
.mare-social-sidebar .social-icon span,
.mare-social-sidebar .social-icon-wide span {
		position: absolute;
		left: -9999em;
	}

.sidebar-patreon-icon span,
.sidebar-meek-icon span,
.sidebar-hiveworks-icon span,
.two-icon-row-icon span,
.three-icon-row-icon span {
	position: absolute;
	left: -9999em;
}

.mare-integrated-sidebar {
}

	.mare-integrated-sidebar h1 {
		font-family: "Exo 2";
		font-size: 12px;
		text-align: center;
		text-transform: lowercase;
		height: 17px;
		line-height: 15px;
		color: #6f6281;
		background: #2d1f34;
		clear: both;
	}
	
	.mare-integrated-sidebar .sidebar-patreon-icon {
		display: block;
		width: 160px;
		height: 45px;
		margin: 4px 0;
	}
	
	.mare-integrated-sidebar #sidebar-patreon-link {
		background: url('/images/sidebar_sprite_patreon.png');
		background-position: -160px 0;
	}
	
	.mare-integrated-sidebar #sidebar-patreon-link:hover {
		background-position: 0 0 !important;
	}
	
	.mare-integrated-sidebar .sidebar-meek-icon {
		display: block;
		width: 160px;
		height: 103px;
		margin: 9px 0;
	}
	
	.mare-integrated-sidebar #sidebar-meek-link {
		background: url('/images/sidebar_sprite_meek.png');
		background-position: -160px 0;
	}
	
	.mare-integrated-sidebar #sidebar-meek-link:hover {
		background-position: 0 0 !important;
	}
	
	.mare-integrated-sidebar .two-icon-row,
	.mare-integrated-sidebar .three-icon-row {
		display: block;
		width: 160px;
	}
	
	.mare-integrated-sidebar .two-icon-row-icon,
	.mare-integrated-sidebar .three-icon-row-icon {
		display: block;
		height: 45px;
		width: 45px;
		margin-top: 4px;
		margin-bottom: 4px;
		float: left;
	}
	
	.mare-integrated-sidebar #sidebar-email-link {
		background: url('/images/sidebar_sprite_email.png');
		background-position: -45px 0;
		margin-left: 26px;
	}
	
	.mare-integrated-sidebar #sidebar-email-link:hover {
		background-position: 0 0 !important;
	}
	
	.mare-integrated-sidebar #sidebar-rss-link {
		background: url('/images/sidebar_sprite_rss.png');
		background-position: -45px 0;
		margin-left: 18px;
	}
	
	.mare-integrated-sidebar #sidebar-rss-link:hover {
		background-position: 0 0 !important;
	}
	
	.mare-integrated-sidebar #sidebar-twitter-link {
		background: url('/images/sidebar_sprite_twitter.png');
		background-position: -45px 0;
		margin-left: 7px;
	}
	
	.mare-integrated-sidebar #sidebar-twitter-link:hover {
		background-position: 0 0 !important;
	}
	
	.mare-integrated-sidebar #sidebar-facebook-link {
		background: url('/images/sidebar_sprite_facebook.png');
		background-position: -45px 0;
		margin-left: 9px;
	}
	
	.mare-integrated-sidebar #sidebar-facebook-link:hover {
		background-position: 0 0 !important;
	}
	
	.mare-integrated-sidebar #sidebar-tumblr-link {
		background: url('/images/sidebar_sprite_tumblr.png');
		background-position: -45px 0;
		margin-left: 9px;
	}
	
	.mare-integrated-sidebar #sidebar-tumblr-link:hover {
		background-position: 0 0 !important;
	}
	
	.mare-integrated-sidebar #hiveworks-ad {
		clear: both;
	}
	
	.mare-integrated-sidebar .sidebar-hiveworks-icon {
		display: block;
		width: 160px;
		height: 88px;
		margin: 4px 0;
	}
	
	.mare-integrated-sidebar #sidebar-hiveworks-link {
		background: url('/images/sidebar_sprite_hiveworks.png');
		background-position: -160px 0;
	}
	
	.mare-integrated-sidebar #sidebar-hiveworks-link:hover {
		background-position: 0 0 !important;
	}

.patreon-sidebar {
	margin-bottom: 18px;
}
	
	.patreon-sidebar .patreon-icon {
		display: inline-block;
		width: 145px;
		height: 43px;
		margin: 0 2px;
		vertical-align: top;
	}
	
	.patreon-sidebar #patreon-link {
		background: url('/images/sprite_patreon.png') top left no-repeat;
	}

	.patreon-sidebar #patreon-link:hover {
		background-position: -145px 0 !important;
	}

.mare-social-sidebar {
	width: 154px;
	margin: 0 auto;
	text-align: center;
}

	.mare-social-sidebar .social-icon {
		display: inline-block;
		width: 43px;
		height: 43px;
		margin: 0 2px;
		vertical-align: top; /* to account for the potential extra margin
		                        of the last social icon element */
	}
	
	.mare-social-sidebar .social-icon:last-child,
	.mare-social-sidebar .social-icon-wide:last-child {
		/* Only show gap after icons if icons are visible (not ad-blocked);
		   do this by adding the margin to just the last social icon element */
		margin-bottom: 14px;
	}
	
	.mare-social-sidebar .social-icon:hover {
		background-position: -43px 0 !important;
	}
	
/*
	.mare-social-sidebar .social-icon-wide:hover {
		background-position: -145px 0 !important;
	}
*/
	
	.mare-social-sidebar #social-meek-banner-link {
		background: url('/images/meek_link.png') top left no-repeat;
	}
	
	.mare-social-sidebar #social-meek-link {
		background: url('/images/sprite_meek.png') top left no-repeat;
	}
	
	.mare-social-sidebar #social-tumblr-link {
		background: url('/images/sprite_tumblr.png') top left no-repeat;
	}
	
	.mare-social-sidebar #social-twitter-link {
		background: url('/images/sprite_twitter.png') top left no-repeat;
	}
	
	.mare-social-sidebar #social-facebook-link {
		background: url('/images/sprite_facebook.png') top left no-repeat;
	}
	
	.mare-social-sidebar #social-reddit-link {
		background: url('/images/sprite_reddit.png') top left no-repeat;
	}
	
	.mare-social-sidebar #social-rss-link {
		background: url('/images/sprite_rss.png') top left no-repeat;
	}

.spw_widget {
	width: 160px;
	height: 600px;
	margin-top: 12px;
	background: #9c01ff;
}

.meek-teaser-small {
	margin-bottom: 10px;
}

	.meek-teaser-small img {
		width: 160px;
	}

/* HIVEWORKS
   --------- */
.hiveworks-sidebar {
	margin-bottom: 20px;
}

.sidebar-ad {
	display: block;
	height: 600px;
	width: 160px;
	margin-top: 20px;
	overflow: hidden;
}

.leaderboard-ad {
	display: block;
	height: 90px;
	width: 728px;
	overflow: hidden;
	margin: 8px auto 10px;
	background: #000;
}

#ibar {
	/* jump bar */
	display: block;
	height: 52px;
	width: 700px;
	margin: -10px 0 10px 0;
	overflow: hidden;
	background: #2d1f34;
}

#pixiestrip {
	display: block;
	height: 50px;
	margin-top: 1px;
}
	
/* COMMENTS
   -------- */
#comments {
	margin-top: 20px;
}

#comments h3 {
	font-weight: bold;
	margin-bottom: 13px;
}

.comment + .comment {
	margin-top: 20px;
}

.bypostauthor > .comment-content {
	/* box-shadow: 0 0 0 1px #ea6771 inset; */
	border: 1px solid #ea6771;
}

#comments-list {
	padding: 20px;
	background: #fff7f1;
}

	#comments-list .children {
		margin: 20px 0 0 20px;
	}

#respond {
	margin-top: 20px;
	padding: 20px;
	background: #fff7f1;
}

	#respond:first-child {
		margin-top: 0;
	}
	
	#respond + .comment {
		margin-top: 20px;
	}

	#comments-list #respond {
		width: inherit;
		padding: 15px;
		margin-left: 20px;
		border: 5px solid #5b4e6e;
	}

.comment-content {
	border: 1px solid #c6c1cc;
	padding: 8px 10px;
}

.comment-author {
	font-weight: bold;
	line-height: 18px;
}

	.comment-author a {
		color: #50101f;
	}
	
	.comment-author a:after {
		content: ' \00bb';
	}
	
	.comment-author a:hover {
		color: #27abff;
	}

.comment-meta-data {
	font-size: 11px;
	line-height: 18px;
}

	.comment-meta-data .separator {
		color: #c6c1cc;
	}

.comment-text {
	border-top: 1px solid #c6c1cc;
	clear: both;
	margin-top: 6px;
	padding-top: 7px;
	overflow: hidden;
}

.comment-notes,
.form-allowed-tags,
.logged-in-as {
	font-size: 11px;
	font-style: italic;
	line-height: 16px;
}

#respond .comment-reply-title small {
	display: block;
	float: right;
	line-height: 18px;
}

#respond label[for="author"],
#respond label[for="email"],
#respond label[for="url"] {
	float: left;
	width: 70px;
}

#respond input[type="text"],
#respond textarea {
	border: 1px solid #c6c1cc;
	box-sizing: border-box;
	padding-left: 3px;
	padding-right: 3px;
}

#respond input[type="text"] {
	width: 368px;
}

	#comments-list #respond input[type="text"] {
		width: 308px;
	}
	
	#comments-list .children #respond input[type="text"] {
		width: 288px;
	}
	
	#comments-list .children .children #respond input[type="text"] {
		width: 268px;
	}
	
	#comments-list .children .children .children #respond input[type="text"] {
		width: 248px;
	}
	
	#comments-list .children .children .children .children #respond input[type="text"] {
		width: 228px;
	}

#respond label[for="comment"] {
	display: block;
	line-height: 22px;
}

.comment-form-comment textarea {
	width: 100%;
	padding-top: 3px;
	padding-bottom: 3px;
}


/* ARCHIVE PAGE
   ------------ */
.comic-archive-chapter-wrap {
	
}

	.comic-archive-chapter-wrap + .comic-archive-chapter-wrap {
		margin-top: 27px;
	}

.comic-archive-chapter-heading {
	font-weight: bold;
	text-align: center;
	margin-bottom: 13px;
}
   
.comic-archive-chapter {
}

.comic-archive-chapter-description {
}

.comic-list {
	display: inline-block;
	margin: 0 10px 10px;
}

	.comic-list a:hover img {
		opacity: 0.8;
		filter: alpha(opacity=80);
	}


/* PATREON AD CAMPAIGN
   ------------------- */
.ig_action_bar.ig_hello.ig_container {
	background-color: transparent !important;
}

.ig_action_bar.ig_hello.ig_container.ig_bottom {
	box-shadow: none !important;
}

.ig_action_bar {
	height: 45px;
}

.ig_action_bar.ig_hello .ig_message {
	margin-right: 0 !important;
}

.ig_action_bar .ig_data {
	padding: 0 !important;
	line-height: 30px;
}
   
.ig_action_bar.ig_hello.ig_container.ig_bottom {
	border-top: none !important;
}

.ig_action_bar.ig_hello .ig_content {
	font-family: 'Lato', sans-serif;
	font-weight: 400;
	font-size: 15px;
}

.ig_action_bar .ig_content {
	background-color: #ff7900;
	margin-top: 15px;
	padding: 0 !important;
}


.ig_action_bar.ig_hello .ig_content p {
	padding-left: 50px;
	line-height: 30px !important;
	color: #344652;
}

	.ig_action_bar.ig_hello .ig_content p a {
		color: #fff1e5;
	}
	
	.ig_action_bar.ig_hello .ig_content p a:hover {
		color: #ffffff;
	}

.ig_action_bar .ig_message {
	line-height: 20px !important;
	font-size: inherit !important;
	padding: 0 !important;
}

.ig_action_bar .ig_message:before {
	content: url('/images/patreon_banner_logo.svg');
	position: absolute;
	display: block;
	bottom: 0;
}

.ig_action_bar .ig_close {
	width: 30px !important;
	height: 30px !important;
}

.ig_action_bar.ig_hello.ig_hide.ig_bottom .ig_close {
	margin-bottom: 0 !important;
}

.ig_action_bar.ig_hello.ig_hide .ig_close {
	border-style: none !important;
	background-color: #ff7900 !important;
}

.ig_action_bar.ig_hello .ig_arrow_block.ig_border {
	border: none !important;
	background-color: #ff7900 !important;
}

/* OTHER RESETS
   ------------ */
p:last-child,
#container .entry-content h1:last-child,
p.form-submit {
	margin-bottom: 0;
}

.avatar,
.comic-archive-date {
	display: none;
}