/* ------------------------------------------------------------------------ */
/* IMPORT FONTS FROM GOOGLE FONTS                                           */
/* ------------------------------------------------------------------------ */

@import url(https://fonts.googleapis.com/css?family=Catamaran:400,700&subset=latin,latin-ext);

/* ------------------------------------------------------------------------ */
/* GENERAL SETTINGS FOR PAGE                                                */
/* ------------------------------------------------------------------------ */

* {
	margin: 0;
	padding: 0;
}

body {
	font-family: Catamaran, sans-serif;
	overflow-x: hidden;
	background: #fcfcfc;
}

a img {border: none;}

.invisible {
	display: none;
}

/* ------------------------------------------------------------------------ */
/* HEADER                                                                   */
/* ------------------------------------------------------------------------ */

header {
	color: #ffffff;
	background: #000000;
	position: relative;
}

header h1 {
	display: inline-block;
	font-size: 100%;
	padding: 0.5em 1em;
}

header a {
	color: #ffffff;
}

header h1.page-title a {
	display: block;
	position: relative;
	padding-left: calc(32px + 2em);
	line-height: 24px;
/*	background: url(nettserierboble.png) no-repeat; */
}

header h1.page-title a:before {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: calc(-0.5em - 4px);
	width: calc(32px + 1em);
	height: calc(32px + 1em);
	background: url(nettserierboble.png) #000000 no-repeat;
	background-position: calc(.5em + 2px) calc(.5em + 4px);
	border: solid 2px #fcfcfc;
	border-radius: 34px;
	z-index: 120;
}

header h1.page-title:hover a:before {
	background-color: #3d004d;
	border-color: #fdcb02;
}

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

header h1 a {
	text-decoration: none;
}

header nav.main-menu {
	z-index: 100;
	position: relative;
}

header nav.main-menu ul {
	border-top: dotted 1px #ffffff;
}

header nav.main-menu ul li {
	padding: 0.5em 1em;
	border-bottom: dotted 1px #ffffff;
}

header nav.show-menu {
	float: right;
	padding: 0.5em;
	position: absolute;
	top: 0;
	right: 0;
	display: none;
}

header nav.show-menu ul li {
	display: inline-block;
	padding: 0 0 0 10px;
	vertical-align: middle;
}

header nav.show-menu ul li a.icons {
	display: block;
	padding-left: 24px;
	line-height: 24px;
	background: no-repeat;
	width: 0;
	overflow: hidden;
	text-decoration: none;;
}

header nav.show-menu ul li a.show-menu-link {
	background: url(menu.png);
}

header nav.show-menu ul li a.show-search-link {
	background: url(search.png);
}

nav.user-menu ul li {
	padding: 0.5em 1em;
}

/* Header (comic-specific) */

.comicheader {
	min-height: 150px;
}

header .titleblock {
	display: inline-block;
	padding: 0.5em 1em;
}

header .titleblock h1 {
	display: block;
	font-size: 150%;
	padding: 0;
}

header .titleblock h1.page-title a {
	display: inline;
	padding-left: 0;
	line-height: auto;
	background: none;
}

header .portal-menu {
	position: relative;
	z-index: 100;
}
header .portal-menu h2 {
	font-size: 100%;
	margin-top: 1em;
	padding: 0.5em 1em;
	border-bottom: dotted 1px #ffffff;
	border-top: solid 1px #e8e8e8;
	background: #3d004d;
}

header .portal-menu ul li {
	padding: 0.5em 1em;
	border-bottom: dotted 1px #ffffff;
}

header .header-buttons {
	float: right;
	position: absolute;
	bottom: .5em;
	right: .5em;
	font-size: 120%;
	z-index: 100;
}
header .header-buttons a {
	display: inline-block;
	padding: 0 1em;
	font-weight: bold;
	border: solid 1px #e8e8e8;
	border-radius: 1em;
	box-sizing: content-box;
	background: #3d004d;
	line-height: 2em;
}

header .header-buttons a.following {
	color: #000000;
	border: solid 1px #000000;
	background: #fdcb02;
}

header .header-buttons a.following:hover {
	color: #ffffff;
	border: solid 1px #e8e8e8;
	background: #aa0000;
}

nav.user-menu a.block {
	color: #aa0000;
	font-weight: bold;
}

/* ------------------------------------------------------------------------ */
/* MAIN SECTION                                                             */
/* ------------------------------------------------------------------------ */

.main {
	padding: 1em;
}

.main img {
	max-width: 100%;
}

.main a {
	color: #3d004d;
}

.main p {
	margin: 0 0 1em;
}

.main h2 {
	font-size: 200%;
	margin: 0 0 .5em;
}

.main h3 {	
	font-size: 166.66%;
	margin: 0 0 .6em;
}

.main ul {
	margin: 0 0 1em;
	padding: 0 0 0 40px;
}

.main ul li ul {
	margin: 0;
}

.main table {
	margin: 0 0 1em;
}

/* Frontpage */

.main .fp-comics-display {
	text-align: center;
}

.main .fp-splash {
	position: relative;
	margin: -1em -1em 2em; 
}

.main .fp-splash .comicbox {
	position: relative;
	width: 100%;
	text-align: center;
	height: 300px;
	overflow: hidden;
}
.main .fp-splash h3 {
	position: absolute;
	bottom: 0;
	left: 0;
	padding: 0 .5em;
	z-index: 120;
	text-shadow:
   -1px -1px 0 #fcfcfc,
    1px -1px 0 #fcfcfc,
   -1px  1px 0 #fcfcfc,
    1px  1px 0 #fcfcfc;
}

.main .fp-splash h3 a {
	text-decoration: none;
}
.main .fp-splash .comicbox img {
	width: 100%;
	vertical-align: middle;
}

.main .fp-splash .comicbox:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 250px;
	height: 50px;
	width: 100%;
	background-image: linear-gradient(transparent, #000000);
}

.main .fp-splash .comic-para {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
}

.main .fp-splash .comic-para img {
	display: inline;
	vertical-align: middle;
}

.main .fp-comics-display h2 {
	color: #3d004d;
}

.main .fp-comics-display .comicbox {
	/* max-height: 200px;
	max-width: 200px;
	position: relative;
	overflow: hidden;
	line-height: 200px;
	border-radius: 104px;
	background: #dddddd;
	border: solid 4px #aaaaaa; */
	margin: 0 auto 2em;
}

.main .fp-comics-display .comicbox img {
	vertical-align: middle;
	/*-webkit-filter: grayscale(100%);
	filter: grayscale(100%); */
}
.main .fp-comics-display .comicbox h3 {
/*	font-size: 100%;
	line-height: 100px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	width: 200px;
	color: #3d004d;
	text-shadow:
	   -1px -1px 0 #ffffff,
		1px -1px 0 #ffffff,
	   -1px  1px 0 #ffffff,
		1px  1px 0 #ffffff; */
}

.main .fp-comics-display .comic-para {
	max-height: 250px;
	overflow: hidden;
}

.main .fp-comics-display .comicbox h3 a {
	color: #3d004d;
	text-decoration: none;
}

/* .main .fp-comics-display .comicbox:hover {
	background: #e8e8e8;
} */

.main .fp-comics-display .comicbox:hover img {
	height: 250px;
	object-fit: contain;
}

.main .fp-comics-display .comicbox:hover .comic-para {
	z-index: 120;
	position: relative;
}

/*
.main .fp-comics-display .comicbox:after {
	content: "";
	display: block;
	position: absolute;
	left: 0;
	top: 175px;
	height: 25px;
	width: 100%;
	background-image: linear-gradient(transparent, #ffffff);
}
*/


/* Form errors */

.errorbox {
	background: #ffdddd;
}

.errorbox .errormsg {
	font-weight: bold; color: #800000;
}

.main .nav_menu {
	padding: 0;
	list-style-type: none;
}

.main .nav_menu li {
	background: #eeeeee;
	border: solid 1px #808080;
	margin: 0 0 1em;
	text-align: center;
	padding: .5em;
	border-radius: .5em;
}

.main .nav_menu li.good {
	background: #ddffdd;
}
.main .nav_menu li.bad {
	background: #ffdddd;
}

.main input, .main select, .main textarea {
  width: 100%;
  border: solid 1px #808080;
  padding: .5em;
  border-radius: .5em;
  box-sizing: border-box;
  }

.main textarea {
	height: 10em;
}

.main input[type="checkbox"], .main input[type="radio"] {
	width: auto;
}

.main input.urlpart {
	border: none;
	border-radius: none;
	border-bottom: dotted 1px #808080;
	width: 40%;
}

.main .profile_pic {
	text-align: center;
	position: relative;
}

.main .profile_pic img {
	border: solid 4px #e8e8e8;
	border-radius: calc(50% + 4px);
	max-width: 100%;
}

.main .profile_pic .sponsor-icon {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	border: none;
}

.main table.strips-to-edit {
	width: 100%;
	max-width: 100%;
	table-layout: fixed;
}

.main .strips-to-edit .checkbox-cell {
	width: 5%;
}

.main .strips-to-edit .thumbnail-cell {
	width: 30%;
}

.main .thumbnail-box {
	max-height: 80px;
	overflow: hidden;
}

.main .thumbnail-cell img {
	max-width: 100%;
}

.main .strips-to-edit .title-cell {
	width: 40%;
	padding: 0 1em;
}

.main .strips-to-edit .title-cell h3 {
	font-size: 100%;
}

.main .strips-to-edit .title-cell nav ul {
	margin: 0;
	padding: 0;
}

.main .strips-to-edit .title-cell nav li {
	display: inline;
	font-size: 90%;
}

.main .strips-to-edit .title-cell nav li:before {
	content: " | ";
}

.main .strips-to-edit .title-cell nav li:first-child:before {
	content: "";
}

.main .strips-to-edit .date-cell {
	width: 25%;
}

/* COMICS */

.main .comicbox {
	text-align: center;
}

.main .navigate-pages ul {
	margin: 0;
	padding: 0 0 1em;
}
.main .navigate-pages li {
	display: inline-block;
	width: 25%;
	text-align: center;
}

.main .navigate-pages li.next:first-child {
	margin-left: 50%;
}

.main .navigate-pages li.prev:last-child {
	margin-right: 50%;
}

/* _ns/pages/feed.php */

.main .feed-box {
	margin-bottom: 1em;
	border: solid 1px #dddddd;
	border-radius: 1em;
	padding: 1em;
	font-size: 90%;
}

.main .feed-box h3 {
	text-align: center;
}

.main .feed-box .comic-para {
	text-align: center;
}

.main .feed-box .feed-pubtime {
	margin: 0;
	text-align: center; 
	font-size: 80%;
	color: #808080;
	letter-spacing: .1em;
}

.main .feed-sidebar {
	background: #eeeeee;
	padding: 1em;
	border: solid 1px #808080;
	border-radius: 1em;
}

.main .feed-sidebar h3 {
	font-size: 120%;
}

.main .feed-sidebar h4 {
	font-size: 100%;
	margin-bottom: .5em;
}

.main .feed-sidebar p {
	margin-bottom: .5em;
}

.main fieldset {
	padding: 1em;
	margin-bottom: 1em;
}

.main fieldset ul {
	list-style-type: none;
}

.main .weekdays li {
	display: inline-block;
	margin-right: .5em;
}

.main .edit-comic {
	border: solid 1px #808080;
	border-radius: 1em;
	padding: 1em;
	margin-bottom: 1em;
}
.main .edit-comic .movelinks {
	clear: both;
	text-align: right;
}

.main .edit-comic .movelinks li {
	display: inline-block;
	margin-left: 1em;
}

.main .edit-comic .edit-image-preview {
	max-height: 200px;
	overflow-y: auto;
}

.main input.dateandtime {
	box-sizing: border-box;
	width: 40%;
}

.main .comment-section h4 {
	font-size: 120%;
	margin-bottom: .5em;
}

.main .comment-section .comment {
	position: relative;
	margin-bottom: 2em;
	padding: 1em 1em 2em calc(104px + 2em);
	background: #ffffff;
	border-radius: 2em;
	border: solid 2px #e8e8e8;
	min-height: calc(104px - 1em);
	overflow: hidden;
}

.main .comment-section .comment .last-comment {
	max-height: 250px;
	overflow-y: auto;
}

.main .comment-section .comment .comment-header {
	background: #e8e8e8;
	margin: -1em -1em 1em calc(-104px - 2em);
	padding: .5em 1em .5em calc(104px + 2em);
	position: relative;
}

.main .comment-section .comment .comment-header:after {
	content: "";
	display: block;
	clear: both;
}

.main .comment-section .comment .comment-header p {
	margin: 0;
}


.main .comment-section .comment .comment_author {
	font-weight: bold;
	font-size: 110%;
	display: inline-block;
}
.main .comment-section .comment .comment_time {
	font-style: italic;
	display: inline-block;
	float: right;
}

.main .comment-section .comment .comment_avatar {
	position: absolute;
	top: 1em;
	left: 1em;
	border: solid 2px #e8e8e8;
	border-radius: 52px;
	overflow: hidden;
	width: 100px;
	height: 100px;
}

.main .comment-section .comment .comment-meta {
	position: absolute;
	right: 2em;
	bottom: 0;
	font-size: 90%;
}

.main .comment-section .comment .comment-meta ul {
	margin: 0;
	padding: 0;
}

.main .comment-section .comment .comment-meta ul li {
	display: inline;
}

.main .comment-section .comment .comment-meta ul li:before {
		content: " | ";
}

.main .comment-section .comment .comment-meta ul li:first-child:before {
		content: "";
}

.main .comment-section .comment-add {
	margin-left: calc(106px + 2em);

}

.main .browse-table {
	width: 100%;
	margin: 0 auto 1em;
}

.main .browse-table th {
	background: #e8e8e8;
	padding: .2em .5em;
	text-align: left;
	border-radius: .5em;
}

.main .browse-table td {
	background: #ffffff;
	padding: .2em .5em;
	border-radius: .5em;
	border: solid 1px #dddddd;
}

.main .browse-table .main-cell {
	width: 100%;
}

/* ------------------------------------------------------------------------ */
/* FOOTER                                                                   */
/* ------------------------------------------------------------------------ */

footer {
	font-size: 80%;
	color: #454545;
	padding: .5em 1em;
	position: relative;
	clear: both;
}

footer h2 {
	font-size: 100%;
}

footer nav {
	margin-bottom: .5em;
}

footer nav ul {
	margin: 0 0 1em;
	padding: 0 0 0 30px;
}


footer .copyright {text-align: center;}

/* Fix height of comic box on cellphones */

@media screen and (max-width: 500px) {
	.main .fp-splash .comicbox {
		height: 200px;
	}
	.main .fp-splash .comicbox:after {
		top: 150px;
	}
	
}

/* ------------------------------------------------------------------------ */
/* DESKTOP EDITION                                                          */
/* ------------------------------------------------------------------------ */

@media screen and (min-width: 800px) {
	/* -------------------------------------------------------------------- */
	/* Desktop: Header                                                      */
	/* -------------------------------------------------------------------- */

	header h1 {
		display: inline-block;
	}
	header nav {
		display: inline-block;
	}

	header nav.main-menu ul {
		border-top: none;
		border-left: dotted 1px #ffffff;
	}

	header nav.main-menu ul li {
		display: inline-block;
		border-bottom: none;
		border-right: dotted 1px #ffffff;
	}

	nav.user-menu {
		display: block;
		margin: 0 0.5em;
		text-align: right;
		font-size: 80%;
	}

	nav.user-menu ul li {
		display: inline-block;
		padding: 0.5em;
		vertical-align: middle;
		border: none;
	}

	nav.portal-menu h2 {
		border: none;
		padding: 0;
		background: transparent;
	}

	header.comicheader {
		position: relative;
	}
	
	header .titleblock {
		max-width: 45%;
	}

	header.comicheader .main-menu {
		position: absolute;
		bottom: 0;
		left: 0;
		display: block;
		font-size: 90%;
		width: 100%;
		border-top: dotted 1px #e8e8e8;
	}

	header.comicheader .main-menu ul {
		border-left: none;
	}
	
	header .portal-menu {
		position: absolute;
		right: 1em;
		top: .5em;
		font-size: 80%;
	}
	
	header .portal-menu h2 {
		display: inline;
	}
	header .portal-menu ul {
		display: inline;
		margin: 0;
		padding: 0;
	}
	
	header .portal-menu ul li {
		padding: 0;
		display: inline;
		border-bottom: none;
	}

	header .portal-menu ul li:before {
		content: " | ";
	}

	.main .profile_pic {
		float: right;
	}

	.main .thumbnail-box {
		max-height: 200px;
	}

	footer h2 {display: inline;}
	footer nav ul {display: inline; margin: 0; padding: 0;}
	footer nav li {display: inline;}
	footer nav li:before {content: " | ";}

	footer .copyright {
		text-align: right;
		position: absolute;
		bottom: 1em;
		right: 1em;
	}

	.main .edit-comic:after {
		content: "";
		display: block;
		clear: both;
	}

	.main .edit-comic .edit-image-preview {
		width: 30%;
		float: left;
	}

	.main .edit-comic fieldset.edit-comic-info {
		width: calc(70% - 3em);
		float: right;
	}

	.main .edit-comic .edit-image-preview {
		max-height: 500px;
	}

	.main .fp-comics-display {
		/*width: calc(624px + 4em);*/
		margin: 0 auto;
	}

	.main .fp-comics-display:after {
		clear: both;
		content: "";
		display: block;
	}
	.main .fp-comics-display .comicbox {
		width: calc((100% - 4em) / 3);
		/*width: 200px;*/
		float: left;
		margin-right: 2em;
		margin-bottom: 2em;
	}
	
	.main .fp-comics-display .comicbox:nth-child(3n) {
		margin-right: 0;
	}
	.main .fp-comics-display .comicbox:nth-child(3n+1) {
		clear: left;
	}

	.main .comment-section {
		width: 80%;
		max-width: 1000px;
		margin: 0 auto;
	}

	.main .browse-table {
		width: 80%;
	}

	.main .browse-table td {
		white-space: nowrap;
	}

	.main .browse-table .main-cell {
		white-space: normal;
	}

	.main .about-us {
		columns: 3;
		column-rule-style: solid 1px #ffffff;
	}
}

@media screen and (min-width: 1200px) {
	.main .feed {
		float: left;
		width: calc(80% - 2em - 3px);
	}
	.main .feed-sidebar {
		float: right;
		width: 20%;
		margin-right: -1em;
		border-right: none;
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
	}
}

/* ------------------------------------------------------------------------ */
/* PRINTER FRIENDLY                                                         */
/* ------------------------------------------------------------------------ */

@media print {
	header {display: none;}
	nav.user-menu {display: none;}
	footer {display: none;}
}