@import url('https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap');
* { margin: 0; padding: 0; }
body { background: url(bg-1.jpg) repeat-x; font-size: 13px; font-family: 'Fira Sans', sans-serif; }
a { text-decoration: none; color: #46a; }
a:hover { /*text-decoration: underline; */color: #22a; }
h1 { font-weight: normal; font-size: 21px; margin-top: 15px; color: #aaa; padding: 0 5px; }
h1 span { color: #444; }
h2 { font-weight: normal; font-size: 18px; }
input, select { padding: 2px; }
textarea { padding: 2px; }
fieldset { border: none; }

#wrapper { margin: 0 auto; max-width: 1920px; min-width: 1280px; }
header {position: fixed; width: 100%; background-color: rgba(255,255,255,.6); left: 0;
	z-index: 3; }
header > div { min-width: 1280px; max-width: 1920px; margin: 0 auto; }
#header { height: 150px; background: url(header-1.jpg) no-repeat -85px 0; }
header > div > a { position: relative; opacity: 0; left: 30px; }
#header > a { position: relative; top: 110px; left: 30px; }
#header > a img, header > div > a > img { height: 32px; }
#header > a img:hover { background: rgba(255,255,255,.3); }
#header ul { padding: 0 6px; max-width: 1920px; margin-right: 170px; white-space: nowrap;
	z-index: 9; float: right; }
#header li { display: inline-block; line-height: 30px; color: #000; position: relative; }
#header ul a { display: inline-block; padding: 2px; }
#header ul a:hover { background: #eee; }
/*#header li:before { content: "| " }*/
#header li:first-child:before, #header li:last-child:before { content: ""; }
#header .notification { display: inline-block; background: rgba(192,0,0,.8); width: 16px; line-height: 16px;
	border-radius: 6px; color: #fff; text-align: center; font-size: 10px; top: 25px; right: -4px; position: absolute;
	font-weight: bold; }
#leaderboard { position: absolute; right: 0; width: 728px; height: 90px; margin: 5px; margin-top: 45px; }
#skyscraper { float: right; width: 160px; height: 600px; margin: 5px; margin-top: 55px; }
#body { padding: 6px 5px; margin-right: 170px; background: url(header-1.jpg) no-repeat -85px -150px; position: relative; }
#search { position: absolute; right: 0; top: 10px; height: 30px; padding: 5px 0; }
#search input { padding: 5px 10px; font-size: 14px; }
#search input[type=text] { border-radius: 15px; border: 1px solid rgba(128,128,128,.5); transition: border .5s;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.1); }
#search input[type=text]:hover { border-color: rgba(128,128,128,1); }
#search input[type=image] { padding: 7px 13px; font-size: 14px; width: 14px; height: 14px; opacity: .6;
	border-left: 1px solid rgba(128,128,128,.5);
	position: absolute; top: 5px; right: 0px; background: rgba(128,128,128,.1); border-radius: 0 15px 15px 0; }
#search input[type=image]:hover { background: rgba(128,128,128,.2); }
#search a { font-size: 8pt; margin-left: .5em; }
#tabs { height: 40px; margin-top: -40px; }
#tabs li { display: block; float: left; margin: 0 5px; margin-top: 5px; height: 40px; }
#tabs li.active {  background: #fff; }
#tabs li a { display: block; line-height: 40px; font-size: 18px; color: #048; padding: 0 10px; transition: all .5s;
	text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff;
}
#tabs li.active a { text-shadow: none; color: #036; }
#tabs li a:hover { text-shadow: none; background: rgba(255,255,255,.6); color: #024; }
#footer { clear: both; /*background: url(bg-1.jpg) repeat-x; background-position: 0 -150px; */line-height: 40px;
	padding: 0 5px; color: #000; margin: 10px -10px -5px -5px; min-height: 100px; background: rgba(128,128,128,.15); }
#language-form, #theme-form { float: right; margin: 0 2px; }

#content { float: left; width: 69.6%; padding-top: 40px; }
#content h3 { font-size: 11pt; font-weight: normal; padding: 1em 5px 0 5px; color: #aaa; }
#content h3 a { font-size: 11pt; font-weight: bold; color: #3B5998; }
#content p { padding: 5px; }

.ac_results { margin-left: 10px; z-index: 9; }
.ac_results ul { border: 1px solid #444; text-align: left; background: #fff; }
.ac_results li { display: block; padding: .2em; }
.ac_results a { padding: 2px 1em; display: block; padding: .2em; }
.ac_results strong { font-weight: bold; }
.ac_results span { color: #777; }
.ac_results a:hover, .ac_over { background: #eee; }

.breadcrumbs > * {
  position: relative;
  text-align: center;
  padding: 2px 10px;
  margin: 2px 0 2px -5px;
  line-height: 20px;
  display: inline-block;
  z-index: 1;
}
#content .breadcrumbs > * { background: none; }
.breadcrumbs > *:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 50%;
  width: 100%;
  background: #acf;
  transform: skew(20deg, 0deg);
  z-index: -1;
}
.breadcrumbs > *:after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 50%;
  width: 100%;
	background: #acf;
  transform: skew(-20deg, 0deg);
  z-index: -1;
}
@keyframes bgColor {
  12.5% {   background-color: #ff8888;  }
  25% {   background-color: #ffff88;  }
  37.5% {   background-color: #88ff88;  }
  50% {   background-color: #88ffff;  }
  62.5% {   background-color: #8888ff;  }
  75% {   background-color: #ff88ff;  }
  87.5% {   background-color: #ff8888;  }
}

.pagination { text-align: center; margin: 20px; clear: left; }
.pagination span { margin: 0 auto; }
.pagination a { padding: 10px; background: #08f; color: #fff; font-size: 10pt; transition: all .5s; }
.pagination a:hover { background: #f80; text-decoration: none; }
a[rel=start] { background: #aaa; }

#browse-filters { padding: .5em; border-bottom: 1px solid #ccc; margin: 1em 0; clear: left; }
#browse-filters a { padding: 5px; /* background: rgba(0,128,255,.15); */ }
#browse-filters a:hover { background: rgba(0,128,255,.3); }

a.active { font-weight: bold; }
#thumbs { margin: 5px; }
#thumbs li { display: block; height: 262px; clear: left; }
#thumbs li li { height: 75px; padding: 2px; border: 1px solid #e0e0e0; clear: none; }
#thumbs li li a, .smallthumbs a { height: 75px; width: 75px; display: block; background-position: center 20%; }
.tags, .tags a { font-size: 9pt; }

.smallthumbs { height: 84px; overflow: hidden; }
#menu .smallthumbs { margin: 0 5px; }
.smallthumbs li { display: block; height: 75px; width: 75px; margin: 2px 2px 0 0;
	float: left; padding: 2px !important; border: 1px solid #e0e0e0; background: #fff; }
.smallthumbs .active { border: 1px solid #000; }
.smallthumbs .active a { opacity: 1; }
#content .smallthumbs li:hover, #menu .smallthumbs li:hover { border: 1px solid #444; }

.carousel { position: relative; }
.carousel ul { overflow: hidden; white-space: nowrap; padding: 0 20px; }
.carousel::before, .carousel::after { display: block; content: " "; background: linear-gradient(to right, #fff, transparent);
	width: 8%; height: 68px; position: absolute; pointer-events: none; }
.carousel::after { background: linear-gradient(to left, #fff, transparent); right: 0px; left: auto; top: 0px; z-index: 2; }
.carousel li { display: inline-block; background: #222; margin: 3px; background-size: cover; color: #fff; max-height: 40px;
	border-radius: 20px; box-shadow: 2px 2px 5px #aaa; white-space: nowrap; padding: 0 10px 0 0; transition: all .5s; }
.carousel li:hover { background: #444; }
.carousel ul .active span { background: rgba(0,0,0,.6); }
.carousel ul .active a { font-weight: bold; }
.carousel span { width: 50px; max-width: 100px; position: relative; top: -10px; }
.carousel li:first-child { margin-left: 20px; }
.carousel a { max-height: 60px; overflow: hidden; text-overflow: ellipsis;
	color: #fff; text-shadow: 1px 1px 2px #000, 1px 1px 2px #000; }
.carousel a:hover {text-decoration: none; }
.carousel img { border-radius: 50%; object-fit: cover; height: 20px; width: 20px; padding: 5px; }

.thumb { float: left; width: 246px; height: 242px; text-align: center; padding: 0 10px; margin-right: 10px; }

#thumbs2 { margin-top: 1em; }
#thumbs2.small-thumbs li { display: block; width: 260px; height: 280px; float: left; text-align: center; transition: transform .2s; }
/* #thumbs2 li:hover { transform: scale(1.2); } */
#thumbs2 span { display: block; position: absolute; bottom: -25px; left: -5px; font-size: 120%; width: 40px; line-height: 40px;
	background: url(fav3.png); background-size: contain; color: #fff; transition: opacity 1s; opacity: 0;
	border-radius: 50%; z-index: 2; text-align: center; }
#thumbs2 li:hover span { opacity: 1; }
#thumbs2 li > a { display: inline-block; background: #eee; }

#thumbs2 p { font-size: 8pt; color: #444; background: #eee; display: inline-block; padding: 5px; transition: all .5s;
	position: relative; top: -20px; left: 60px; transform: rotate(-5deg); color: #888; box-shadow: 1px 1px 2px rgba(0,0,0,.5); }
#thumbs2 p:hover { background: #222; }
#thumbs2 p:hover a { color: #acf; }
/*#thumbs2 li:nth-child(odd) a img:hover { transform: scale(1.02) rotate(-2deg); }*/
#thumbs2 .trusted p { background: #7b5672; color: #fff; }
#thumbs2 .trusted p a { color: #fff; }
#thumbs2 input[type=checkbox] { float: left; display: none; margin-right: -20px; }
#thumbs2 a { color: #048; position: relative; }
#thumbs2 li:hover p { opacity: 1; }
#thumbs2 li:hover a { font-style: normal; text-decoration: none; }

#thumbs2.medium-thumbs { column-count: 3; }
#thumbs2.medium-thumbs li { display: block; text-align: right; width: 252px;
  break-inside: avoid; position: relative; margin: 10px 0; }
#thumbs2.medium-thumbs li:first-child { margin-top: 0; }
#thumbs2.medium-thumbs img { margin-bottom: -25px; box-shadow: 2px 2px 4px rgba(0,0,0,.1); }
#thumbs2.medium-thumbs img:hover { box-shadow: 2px 2px 4px rgba(0,0,0,.3); }
#thumbs2.medium-thumbs p { top: 0; left: 0; }
#thumbs2.medium-thumbs input[type=checkbox] { position: absolute; left: 22px; top: 10px; }
#thumbs2.medium-thumbs .child {overflow: hidden; }
#thumbs2.medium-thumbs .child p { top: -50px; left: auto; display: block; background: rgba(0,0,0,.8); color: #fff;
	margin: 0 -10px; pointer-events: none; text-align: center; }
#thumbs2.medium-thumbs .child p a { color: #fff; font-size: 140%; }
#thumbs2.medium-thumbs .child p+p { background: rgba(0,0,0,.64); left: auto; opacity: 0; }
#thumbs2.medium-thumbs .child:hover p { top: -80px; }
#thumbs2.medium-thumbs .child:hover p + p { opacity: 1; }

#thumbs2.justified li { float: left; margin: 0 10px; display: block; text-align: right; }
#thumbs2.justified img { }
#thumbs2.justified p { left: 0; }
#thumbs2.justified input[type=checkbox] { position: absolute; left: 10px; top: 10px; }

#thumbs .thumb a img, #thumbs2 a img { padding: 6px; background: #fff; transition: all .5s; position: relative; }
#thumbs .thumb a img, #thumbs2 a img, #large > a img { box-shadow: 2px 2px 4px rgba(0,0,0,.5); }
#thumbs2 .loaded { opacity: 1; }

#content #tags li { display: block; width: 49%; float: left; padding: 10px 0 0 .5%; }
#content #tags li li { width: 75px; padding: 2px; }

#massmod { margin-bottom: 10px; }
#massmod > p { clear: left; padding: 1em; background: #f0f0f0; }

#suggestions { padding: 10px; line-height: 28px; }
#suggestions > span { padding: 8px; border-radius: 20px; white-space: nowrap; }
#suggestions a { font-weight: bold; font-style: italic; }
#suggestions a img { width: 22px; position: relative; top: 8px; margin-right: 5px;  }
#suggestions a span { font-weight: normal; font-style: normal; }

#children { margin: 1em 0 0 10%; }
#children li { display: block; width: 300px; padding: 8px 4px; float: left; height: 75px; border-radius: 50px;
	transition: background 1s; margin: 10px 0; border: 1px solid #fff; }
#children li:hover { background: rgba(128,128,128,.1); border: 1px solid rgba(128,128,128,.2); }
#children .child-thumb { width: 75px; height: 75px; float: left; /*box-shadow: 1px 1px 3px rgba(0,0,0,.5);*/
	margin: 0 10px 0 5px; background-image: url(75/default.png); background-position: center 20%; border-radius: 50%; }
#children h3 { padding-top: 5px; }
#children h3 a { font: 12pt Trebuchet MS; font-weight: bold; }
#children span { color: #888; }

#menu-collapsed { width: 1%; float: right; border-left: 1px solid #e0e0e0; }
#menu-collapsed a { display: block; height: 50px; }
#menu { width: 30%; float: right; padding-top: 40px; margin: 10px 0; font-size: 9pt; }
#menu h2 { margin: 15px 5px 0 5px; border-bottom: 1px dotted #def; text-align: right; }
#menu h2, #menu h2 * { font: 12pt Trebuchet MS; color: #439; }
#menu h2 a:hover { color: #08f; }
#menu h2 span { color: #777; }
#menu ul { margin: 0 5px; }
#menu form li { display: block; }
#menu li { padding: 6px; display: block; border-bottom: 1px solid rgba(0,0,0,.1); }
/* #menu li a { font-size: 10pt; } */
#menu form { background: #fcfcfc; padding: 5px; margin: 5px 0;  }
#menu label { display: block; font-weight: bold; margin-top: 1em; }
#menu label[for] { display: inline; font-weight: normal; }
#menu input[type="text"], #menu textarea { width: 80%; padding: 4px; margin: 3px 0; }
#menu p { margin: 1em 5px; }
#menu #rectangle { margin: 10px 5px; }
#menu .smallthumbs li { border-radius: 0; }

.subscribe { background: #048; color: #fff; padding: 8px 15px; transform: rotate(-5deg); display: inline-block; }
.subscribe:hover { background: #26a; color: #fff; text-decoration: none; }
.fade { position: absolute; bottom: 0; width: 100%; height: 50px; background: linear-gradient(transparent, #fff); z-index: 9; }
.tag-admin-notice { background: #f8f8f8; padding: .5em; text-align: center; line-height: 1.5em; }
.tag-admin-notice a { white-space: nowrap; }

#favtags li, #tags li { position: relative; }
.del-link, .pri-link { display: none; position: absolute; right: 0; top: -5px; z-index: 1; border: 1px solid #fff;
	box-shadow: 0 0 3px #000;
	background : #aaa; border-radius: 20px; width: 15px; height: 15px; text-align: center; }
.del-link:hover, .pri-link:hover { background: #888; }
#menu .del-link, #menu .pri-link { color: #fff; }
.pri-link { right: auto; left: 0; }
li:hover .del-link, li:hover .pri-link { display: inline; }
#fav-tag-link { background: none; position: static; margin: 0; }

#menu .tags li { font-size: 9pt; color: #444; display: inline-block; padding: 0 10px 5px 0px; margin: 3px;
	border-radius: 15px; transition: background .5s; }
#menu .tags li img { width: 22px; height: 22px; margin: 0 5px; position: relative; top: 5px; /*border-radius: 13px;*/ }

.mangaka, .breadcrumbs .mangaka:before, .breadcrumbs .mangaka:after  { background: #fcd; } .mangaka a { color: #800; }
.studio, .breadcrumbs .studio:before, .breadcrumbs .studio:after  { background: #fdd; } .studio a { color: #800; }
.series, .breadcrumbs .series:before, .breadcrumbs .series:after { background: #def; }
.game, .breadcrumbs .game:before, .breadcrumbs .game:after { background: #ccf; } .game a { color: #80f; }
.character, .group, .breadcrumbs .character:before, .breadcrumbs .character:after { background: #fed; } .character a, .group a { color: #c80; }
.transformation { background: #ff8; }
.theme, .breadcrumbs .theme:before, .breadcrumbs .theme:after { background: #e0e0e0; } .theme a { color: #888; }
.source, .breadcrumbs .source:before, .breadcrumbs .source:after { background: #ece186; } .source a { color: #a29100; }
.meta, .breadcrumbs .meta:before, .breadcrumbs .meta:after { background: #eee; } .meta a { color: #444; }
.artbook { background: #488; } .artbook a { color: #8ff; }
.vtuber, .breadcrumbs .vtuber:before, .breadcrumbs .vtuber:after { background: #ebe; } .vtuber a { color: #959; }

.mangaka:hover { background: #f8a; }
.studio:hover { background: #faa; }
.series:hover { background: #acf; }
.game:hover { background: #a8f; } .game:hover a { color: #204; }
.character:hover, .group:hover { background: #fca; }
.meta:hover { background: #dddde8; }
.theme:hover { background: #ccc8c4; } .theme:hover * { color: #000; }
.source:hover { background: #d9cb57; }
.artbook:hover { background: #266; }
.vtuber:hover { background: #c9c; }

.mangaka img, .studio img { filter: invert(13%) sepia(49%) saturate(7325%) hue-rotate(2deg) brightness(71%) contrast(116%); }
.series img { filter: invert(28%) sepia(92%) saturate(681%) hue-rotate(175deg) brightness(104%) contrast(90%); }
.game img { filter: invert(27%) sepia(100%) saturate(1487%) hue-rotate(239deg) brightness(83%) contrast(93%); }
.character img, .group img { filter: invert(49%) sepia(94%) saturate(1741%) hue-rotate(16deg) brightness(96%) contrast(101%); }
.theme img { filter: invert(59%) sepia(0%) saturate(0%) hue-rotate(135deg) brightness(92%) contrast(84%); }
.source img { filter: invert(48%) sepia(31%) saturate(3152%) hue-rotate(32deg) brightness(99%) contrast(101%); }
.meta img { opacity: .3; }
.artbook img { filter: invert(75%) sepia(18%) saturate(747%) hue-rotate(131deg) brightness(80%) contrast(85%);}
.vtuber img { filter: invert(32%) sepia(24%) saturate(1566%) hue-rotate(251deg) brightness(90%) contrast(81%);}

.browsing-options { font-size: 11px; float: right; line-height: 18px; }
#search-within { display: none; clear: both; background: #fcfcfc; padding: 10px;  }

#posts { margin: 1em 0 5em 0; }
#posts li { margin-top: 2em; clear: left; display: block; border-top: 1px solid #eee;  }
#posts li div:first-child { float: left; width: 300px; text-align: center; }
#posts li div:last-child { margin-left: 300px; }
#posts li div p { padding: .5em 0; line-height:  1.45em; }
#posts li div:first-child span { color: #777; font-size: 11px; }
#posts form { display: none; margin: 5px 0; }
#posts textarea { width: 100%; height: 100px; }
#comment-form { margin: 1em 5px; clear: left; }
#comment-form div { float: left; width: 300px; min-height: 200px; text-align: center; }
#comment-form > p { margin-right: 300px; margin: 0; }
#comment-form textarea { width: 65%; }

.user { background: rgba(128,128,128,.1); border-radius: 20px; padding: 5px 10px 5px 5px; margin: 0 5px; white-space: nowrap;
	transition: background .5s; }
.user:hover { background: rgba(128,128,128,.3); }
.user img { width: 25px; border-radius: 50%; position: relative; top: 3px; margin: 0 5px -5px 0; }
.avatar img { /* border: 1px solid #eee; */ padding: 5px; border-radius: 50%; box-shadow: 1px 1px 2px rgba(0,0,0,.3); }

#loader { display: none; position: fixed; width: 100%; height: 100%; background: #000; filter: Alpha(Opacity=60); opacity: .6;
	top: 0; z-index: 99; background: #000 url(ajax-loader.gif) center 40% no-repeat; }
#tooltip { position: absolute; width: 300px; z-index: 99; background: #fff; border: 1px solid #000; padding: 5px; text-align: left;
	-webkit-box-shadow: 1px 1px 3px #000; top: 0; left: 0; display: none; }

.admin, .admin * { color: #f88 !important; }
.admin a:hover { color: #f00 !important; }
#overlay-bg { position: absolute; width: 100%; top: 0; z-index: 10; opacity: .7; height: 1000px;
	background: #000; display: none; }
#overlay { position: absolute; width: 100%; top: 0; left: 50%; z-index: 11; display: none;
	width: 500px; padding: 20px; background: #fff; margin: 20px 0 20px -300px; }
.required { font-weight: bold; }
.required:after { content: " *"; font-weight: normal; color: #f00; }
input[type="text"], textarea { }
input[type=submit], input[type=button] { padding: 5px 10px; background: #08f; color: #fff;
	border: none; transition: background .5s; cursor: pointer; }
input[type=submit]:hover, input[type=button]:hover { background: #f80; }
input[type=text][readonly=readonly] { background: #eee; color: #888; border: 1px solid #888; }
#content #thumbs2 form li { display: block; }
label[for] { display: inline; }
.error { color: #f00; }

.toggle { position: absolute; right: 10px; top: 5px; }
.toggle span { display: inline-block; width: 60px; height: 30px; background: linear-gradient(to bottom, #777, #999);
	border-radius: 15px; cursor: pointer; box-shadow: inset 2px 1px 2px rgba(0,0,0,.3); }
.toggle span:hover { background: linear-gradient(to bottom, #999, #bbb); }
.toggle span:before { position: absolute; content: ""; height: 22px; width: 22px; left: 4px;
	box-shadow: 1px 1px 2px rgba(0,0,0,.4);
	top: 4px; background: linear-gradient(to bottom, #fff, #ccc); border-radius: 11px; transition: left .5s; }
input:checked + .toggle span { background: linear-gradient(to bottom, #08f, #4af); }
input:checked + .toggle span:hover { background: linear-gradient(to bottom, #4af, #8cf); }
input:checked + .toggle span:before { left: 32px; }

#mod-tools { visibility: hidden; clear: left; padding: 1em; background: #f0f0f0; }
#mod-tools:hover { visibility: visible; }

#large { text-align: center; margin-top: 20px; }
#large .smallthumbs { float: left; width: 0; overflow: visible; z-index: 1; position: relative; }
#large p { color: #aaa; }
#large p span { font-size: 10pt; }

@keyframes bounce {
	0%, 100% { transform: translateY(0) }
	25% { transform: translateX(-10px) }
	75% { transform: translateX(10px) }
}

#large a[rel=prev], #large a[rel=next] { position: relative; float: left; margin-right: -10%; width: 10%; z-index: 1; }
#large a[rel=next] { float: right; margin-left: -10%; margin-right: 0; }
#large a[rel=prev] b, #large a[rel=next] b { display: inline-block; width: 20px; height: 20px; border: 5px solid #000;
	opacity: .5; border-width: 5px 0 0 5px; transform: rotate(-45deg); }
#large a[rel=prev]:hover, #large a[rel=next]:hover { animation-name: bounce; animation-duration: 1s; animation-iteration-count: infinite;
	animation-timing-function: linear;}
#large a[rel=prev]:hover b, #large a[rel=next]:hover b { opacity: 1; }
#large a[rel=next] b { border-width: 5px 5px 0 0; transform: rotate(45deg); }

#fullMessage { margin: 5em 2em 10em 2em; text-align: center; padding: 0 10em; }

#shoutbox { margin: 5px; }
#shoutbox dt { margin-top: .5em; color: #ccc; font-size: 10pt; }
#shoutbox dt span { color :#ccc; font-size: 11px; }

#notifications { position: fixed; bottom: 10px; right: 10px; width: 250px; }
#notifications li { display: block; margin: 5px; background: rgba(0,0,0,.9); padding: 10px; color: #fff; height: 80px; }
#notifications img { float: left; border: 1px solid #aaa; padding: 1px; height: 70px; margin-right: 10px; }