/* Custom theme for peppercarrot.com
 * Copyright (c) 2015 David Revoy,GPL license
 * (http://www.gnu.org/licenses/gpl.html)
*/

/* Typo */
@font-face { font-family: 'PepperCarrot'; src: url('../font/PepperCarrot.woff') format('woff'); font-weight: normal; font-style: normal; }
body { background-color: #fff; color: #412813; font-family: ubuntu, arial, sans-serif; }
a { background: transparent; color: #175eb3; text-decoration: underline; text-decoration-color: #97bac2;}
a:active, a:hover { color: #258fd6; outline: 0; text-decoration: underline; text-decoration-color: #258fd6; }
pre,code { color:#111; background-color: #FFF9F2; padding: 8px; font: 13px Consolas, "Liberation Mono", Menlo, Courier, monospace; overflow:auto; }
h1, h2, h3, h4, h5, h6 { font-family: 'PepperCarrot', cursive, sans-serif;}
h1 { font-size:2.4rem; }
h2 { font-size:2.0rem; }
h3 { font-size:1.5rem; margin-top:0.6rem; }
h4 { font-size:1.2rem }
figure + em, img + em, h1 + p em { display: block; max-width: 75%; margin: 0 auto; color: #6b5e4f; font-size: 1.1rem; text-align: center!important;}
.imgfill img { width: 100%; height: auto;}

/* Main style */
.containercomic { margin: 0 auto; padding-left: 1rem; padding-right: 1rem; width: 100%;}
.comicmonopagebg {margin: 0 auto; clear:both; max-width: 100%;}
.panel { text-align: center;}
.transcript { color: #000; border-radius: 8px; background: #FFF; padding: 20px 20px 20px 52px; max-width: 500px; margin: 10px auto; }
.menu.expanded li:hover { background-color: rgba(255,255,255,0); }
.menu.expanded li.active:hover { background-color: rgba(255,255,255,0); color: rgba(255,255,255,0); }

/* Buttons */
.button a { text-decoration: none; color: #FFFFFF!important; background: #98C25C url('../img/grain.png');  margin: 0.2rem 0.3rem; padding: 10px 12px 6px 12px; text-align: center; border-radius: 4px; box-shadow: 0 0 0 2px #98C25C inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50);}
.button a:hover { filter: brightness(1.1);}
.mandarine a { background-color: orange; box-shadow: 0 0 0 2px orange inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50);}
.cherry a { background-color: LightCoral; box-shadow: 0 0 0 2px LightCoral inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50);}
.gum a { background-color: #61C6B6; box-shadow: 0 0 0 2px #61C6B6 inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50);}
.choco a { background-color: #9B7761; box-shadow: 0 0 0 2px #9B7761 inset, 0 0 0 3px rgba(255,255,255,0.55) inset, 2px 2px 3px 0 rgba(20,0,0,0.50);}
.moka a { color: #806E5B!important; background-color: #F0ECE9; box-shadow: 0 0 0 2px #F0ECE9 inset, 0 0 0 3px rgba(222,168,131,0.55) inset, 1px 1px 2px 0 rgba(20,0,0,0.50);}
.milk a { color: #544840!important; background-color: #FFF; box-shadow: 0 0 0 2px #FFF inset, 0 0 0 3px rgba(0,0,0,0.25) inset, 1px 1px 2px 0 rgba(20,0,0,0.50);}
a.pcminilinkbutton { box-shadow: 0.15rem 0.15rem 0.2rem rgba(0, 0, 0, 0.25); max-width: 350px; display:block; margin: 1rem auto 0 auto ; background: #56958e url('".$root."/core/img/go.svg') no-repeat center right 14px; padding: 10px 35px 10px 28px; text-align: center; font-size: 1.1rem; line-height: 1.20rem; border-radius: 12px; color: #FFF; text-decoration: none; font-weight: 700;} a.pcminilinkbutton:hover { filter: brightness(1.3);}
.big { font-size:1.20rem;}
.top { font-size:1.10rem; display: inline-block;}
.top a { padding: 9px 10px; display: inline-block;}
.off { opacity: 0.42;}
.off, .off:hover { color: #EEE; cursor: default;}
.off img { opacity: 0.05;}

/* Cards */
.cardsocket { min-height: 550px; margin-bottom: 1rem; padding-left: 0.5rem; padding-right: 0.5rem;}
.cardblock { min-height: 535px; width: 100%; text-align: center; padding: 0 0; background: #F0ECE9 url('../img/bg.jpg'); border: 16px solid transparent; border-image: url('../img/cards.jpg') 10% round; }
.cardblockcontent { min-height: 460px; }
.cardblockcontent p { width: 90%; text-align: justify; margin: 10px auto 0 auto;}
.cardblock h3 { font-size: 1.8rem; margin-bottom: 0;}
.cardby { color: #ababab; font-size: 0.90rem;}
.cardblock img {width: 95%; margin: 0 0 10px 0; }
.cardlink {text-align: center; width: 100%; margin-bottom: 0.5rem; color: #ababab; font-size: 0.90rem; }
.cardblock .button a { display:inline-block; font-size:1.1rem; width: 90%; margin-bottom: 10px;}
.mini { min-height: 100%; border-image: url('../img/cards-pencil.jpg') 10% round; font-family: "Georgia", Times, serif; }


/* Artworks gallery */
#gallery { display: flex; flex-wrap: wrap; list-style-type: none; padding: 0 0;}
#gallery li {height: 180px; flex-grow: 1; margin: 0 0 6px 6px;}
#gallery img { max-height: 100%; min-width: 100%; object-fit: cover; vertical-align: bottom; }
#gallery a:hover { filter: brightness(110%); }
#gallery .label { display: block; position: relative; bottom: 20px; background-color: #FFF; width: 100%; padding-bottom: 0.8rem; max-height: 20px; text-overflow: clip;}

/* Goodies and Contribute */
#blockmenu { margin-top: 3px;}
#blockmenu a { position: relative; display: inline-block; }
#blockmenu .blockitem { position:relative; text-align: center; color: white; overflow: hidden; margin:0; border: 4px solid #FFF;}
#blockmenu .blockitem img { width: 100%;}
#blockmenu .blockcaption { position: absolute; top: 0; margin-top: 1rem; margin-left: 1.5rem; font: normal 32px 'PepperCarrot', cursive; text-decoration: none!important; text-align: left; color: #FFF; text-shadow: 1px 0px 30px #000, 1px 0px 5px #000; }
.blockitem:hover { text-decoration: none; color: #FFF; filter: brightness(110%);}

/* Viewer */
#viewer {background: #000000; text-align:center; position: absolute; top: 0; z-index:9001; width:100%; height:100%}
#viewer .viewheader { max-width:1200px; margin: 0 auto;}
#viewer .viewcloseallbutton { position: absolute; top: 10px; right: 10px; z-index:9101;}
#viewer .viewimagecontainer { position:relative; height:87%;}
#viewer .viewimagecontainer img { max-height:100%;}
#viewer #viewsrccontainer {position:absolute; overflow: scroll; overflow-y: auto; overflow-x:hidden; background: rgba(255, 255, 255, 1); top: 0; left: 10px; color: #444; padding: 6px 12px; font-size: 1.1rem; border: 1px solid #948780; max-width: 500px; height: 100%; margin: 0 auto;}
#viewer .viewsrcclosebutton { position: absolute; top: 20px; right: 20px;}
.viewsrcdownloadbutton { border: 1px solid #b5d0e1; display:inline-block;  color: #378ec8;  border-radius: 8px; margin: 0 -0.7rem 0.3rem 0; padding: 8px 12px; text-decoration: none; margin: 4px 0 0 4px; cursor: pointer;}
a.viewsrcdownloadbutton { background-color: #FFF; color: #3c98d7; text-decoration: none;}
a:hover.viewsrcdownloadbutton { text-decoration: none!important;}
a.viewsrcdownloadbutton.active { background-color: #d8ebfa; color: #555; text-decoration: none;}
#viewer .viewsrclicensebox { width: 80%; margin:0 auto; background: #e0e2e0; padding: 2rem;}
#viewer .viewsrclicensebox a { text-decoration:none;}
#viewer .ViewFooterInfo { font-size: 1.3rem; color: #a8a094; width: 100%; text-align: center}
#viewer .ViewFooterInfo a { text-decoration:none; color: #728cd4;}
#viewer .ViewFooterLinks { margin-top: 0.8rem; color: #a8a094;}
#viewer .ViewFooterLinks a { text-decoration:none; color: #728cd4;}
#viewer .ViewFooterDisclaimer { font-size: 1rem; color: #7f7970; width: 68%; text-align: center; margin: 0 auto;}


/* Header */
.logo { filter: invert(10%) sepia(100%) saturate(200%) hue-rotate(0deg) brightness(130%); }
#header { width: 100%; background: url('../img/header-bg.jpg') top left; min-height: 3.75em;}
#header a { text-decoration: none;}
#header h1 { margin: 4px 0 0 7px; padding: 0 0; }
#header h1 a { color: #412813; }
#header .grid { overflow: hidden; margin: 0 0;}
.title { text-align: center;}
.title img { margin: 3px 0  0 5px; height: 55px; max-width: none; }

/* Cover */
.cover { min-height: 600px;  border-radius: 8px; margin: 10px 0 20px 0; background: #305067 url('../img/2021-cover-lrg.jpg') no-repeat bottom left; }
.covertextoverlay { position: absolute; left: 75px; top: 20px; text-align:left; }
.cover h1 { display:block; max-width: 700px; color: #ffd269; margin: 10px 10px 30px 10px; line-height: 48px; font-size: 38px; text-align: center; text-shadow: 0px -1px 0px rgba(255,255,255,1), -1px 1px 2px #2b0d07,  1px 2px 2px #2b0d07,  1px -2px 0 #2b0d07,  -1px -2px 0 #2b0d07; letter-spacing: 0.031rem;}
.dr { display: block; margin: 10px auto 10px auto; }
.covertextoverlay .logo{ display: block; margin: 0 auto; }

/* main menu */
.menu.expanded { padding: 0 0 0 0; margin: 20px 0 0 0; font: normal 24px 'PepperCarrot', cursive; }
.menu.expanded li a { padding: 7px 14px 7px 14px; box-shadow: 0 7px 8px #3A2619; border-radius: 7px 7px 0 0; border-top: solid 1px #F3EDE8; background: rgba(255, 252, 247, 0.2); margin-right: 1px; }
.menu.expanded li a:hover { text-shadow: 1px 0px 20px yellow; transition: text-shadow 0.2s ease-in; }
.menu.expanded a { color: #3A2619; font-size: 24px; }
.menu.expanded li.active a, .menu.expanded li.active a:hover { color: #000; background-color: #FFF; text-shadow: 1px 0px 20px yellow; }
.menu.expanded li.external i { font-size: 0.8rem;}
.responsive-menu label { color: #3A2619; background-color: transparent; font: normal 2rem 'PepperCarrot', cursive; }
.responsive-menu label .logo { display: in-lineblock; height: 45px; max-width: none; margin-top: 3px;}
.responsive-menu label .burgermenu { display: in-lineblock; margin: 0 14px 12px 0;}

/* Buttons */
a.buttonpage { display:inline-block; box-shadow: 0.15rem 0.15rem 0.2rem rgba(0,0,0,0.4); background: #FF7816 url('../img/go.svg') no-repeat center right 14px; padding: 10px 30px 10px 18px; text-align: center; line-height: 1.20rem; border-radius: 50px; color: #FFF!important; font-weight: 700; text-decoration: none; margin: 1rem 0 1rem 0;}
a.buttonpage:hover { filter: brightness(1.1);}

.patronagebutton a { display:inline-block; margin: 0.92rem 0 0 0.92rem ; padding: 10px 18px; text-align: center; font-size: 0.95rem; line-height: 1.20rem; background: #f86754; border-radius: 50px; color: #FFF; font-weight: 700;}
.patronagebutton:hover { filter: brightness(1.3);}

a.moreinfobutton	{ box-shadow: 0.15rem 0.15rem 0.3rem #3A2619; text-decoration: none; display:block; max-width: 300px; background: #f86754 url('../img/go.svg') no-repeat center right 14px; margin: 1rem auto 0 auto; padding: 10px 30px 10px 18px; text-align: center; font-size: 16px; line-height: 1.20rem; border-radius: 50px; color: #FFF; font-weight: 700; }
a.moreinfobutton:hover	{ filter: brightness(1.3);}

a.loadmorebutton { box-shadow: 0.15rem 0.15rem 0.2rem #666; max-width: 250px; display:block; margin: 0.5rem 0.5rem 0 0; background: #FFF url('../img/go-dark.svg') no-repeat center right 14px; padding: 10px 35px 10px 28px; text-align: center; font-size: 1.1rem; line-height: 1.20rem; border-radius: 12px; color: #444; text-decoration: none; float: right;}
a.loadmorebutton:hover { filter: brightness(1.3);}

a.commentbutton { box-shadow: 0.15rem 0.15rem 0.2rem rgba(0, 0, 0, 0.25); max-width: 350px; display:block; margin: 1rem auto 3rem auto ; background: #567B95 url('../img/go.svg') no-repeat center right 14px; padding: 10px 35px 10px 28px; text-align: center; font-size: 1.1rem; line-height: 1.20rem; border-radius: 12px; color: #FFF; text-decoration: none; font-weight: 700;}
a.commentbutton:hover { filter: brightness(1.3);}

a.patronbutton { box-shadow: 0.15rem 0.15rem 0.2rem rgba(0, 0, 0, 0.25); max-width: 350px; display:block; margin: 1rem auto 0 auto ; background: #f86754 url('../img/go.svg') no-repeat center right 14px; padding: 10px 35px 10px 28px; text-align: center; font-size: 1.1rem; line-height: 1.20rem; border-radius: 12px; color: #FFF; text-decoration: none; font-weight: 700;}
a.patronbutton:hover { filter: brightness(1.3);}

.artbutton { width: 100%; max-width: 240px; height: 155px; text-align: center; box-shadow: 0.15rem 0.15rem 0.2rem rgba(0,0,0,40); display: block; box-sizing: border-box; padding: 0 0.7rem 0.4rem 1rem; margin-bottom: 1.2rem; border-radius: 1rem; font: normal 1.8rem 'PepperCarrot', cursive; text-decoration: none!important; color: #FFF; text-shadow: 1px 0px 30px #000, 1px 0px 5px #000; border: 4px solid #FFF;}
.artbutton.active { border: 4px solid #FF7816;}
a.artbutton:hover { text-decoration: none; color: #FFF; filter: brightness(110%);}
.artbutton.artworks {background: url('../img/thumb_artworks.jpg')}
.artbutton.sketchbook {background: url('../img/thumb_sketchbook.jpg')}
.artbutton.misc {background: url('../img/thumb_misc.jpg')}
.artbutton.framasoft {background: url('../img/thumb_framasoft.jpg')}
.artbutton.fanart {background: url('../img/thumb_fan-art.jpg')}
.artbutton.fancomics {background: url('../img/thumb_fan-comics.jpg')}
.artbutton.fanfiction {background: url('../img/thumb_fan-fictions.jpg')}


/* Translations dropdown menu */
.langmenu { font-size: 0rem; margin: 0; padding-left: 0;}
.langmenu li { display: inline-block; font-size: 1.1rem; list-style-type: none; margin-left: 1rem; text-align: left; }
.langmenu li:first-child { margin-left: 0;}
.langmenu li.active a {	color: #444;}
.langmenu.vertical li {	display: block;	margin-left: 0;}
.langmenu.expanded {	background-color: rgba(255, 255, 255, 0.9);}
.langmenu.expanded li {	margin-left: 0;}
.langmenu.expanded li:hover {	background-color: transparent;}
.langmenu.expanded li a {	color: #412813; display: block;	padding: .425rem .7rem;}
.langmenu.expanded li a:hover {	text-decoration: none; text-shadow: 1px 0px 30px green, 1px 0px 20px yellow, 1px 0px 10px yellow, 1px 0px 5px white, 1px 0px 5px white;}
.langmenu.breadcrumb li + li:before, .langmenu.expanded.breadcrumb > li + li a:before { content: "/";}
.langmenu.breadcrumb li + li:before, .langmenu.expanded.breadcrumb > li + li:before, .langmenu.expanded.breadcrumb > li + li a:before { margin-right: .7rem;}
.langmenu.expanded.breadcrumb > li + li:before { content: none;}
.langmenu.expanded li.active a, .langmenu.expanded li.active:hover { background-color: transparent; color: #412813; text-shadow: 1px 0px 30px green, 1px 0px 20px yellow, 1px 0px 10px yellow, 1px 0px 5px white, 1px 0px 5px white; }

.translabutton { background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(0, 54, 140, 0.2); display:inline-block;  color: #378ec8;  border-radius: 8px; margin: 0 0.15rem 0 0; padding: 8px 12px; text-decoration: none; cursor: pointer;}
a.translabutton { color: #3c98d7; text-decoration: none; }
a:hover.translabutton { text-decoration: none!important; }
a.translabutton.active { background-color: rgba(115, 179, 236, 0.6); color: #222; text-decoration: none;}
.bookmark { background: rgba(255, 255, 255, 0.1) url('../img/bookmark.svg') no-repeat 3px 0;}

.responsive-langmenu { margin: 10px 0 5px 0; position: relative; z-index: 100;}
.responsive-langmenu label { color: #1a1a1a; text-align: right; }
.responsive-langmenu label, .responsive-langmenu input[type=checkbox] {	display: none;}
.responsive-langmenu input[type=checkbox]:checked+ul { display: block;}
.responsive-langmenu ul { display: none; column-count: 4; padding: 3rem; margin: 5px 0 1rem 0; border: 1px solid #cecece; border-radius: 5px; box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,0.1); }
.responsive-langmenu label, .responsive-langmenu ul li {display: block; margin-left: 0}
.responsive-langmenu ul li:hover {background-color: #ddd;}
.responsive-langmenu ul li a {display: block;padding: .425rem .7rem; text-decoration: none!important;}
.responsive-langmenu ul li a:hover {text-decoration: none!important;}
.responsive-langmenu .langmenu.breadcrumb li + li:before, .responsive-langmenu .langmenu.expanded.breadcrumb > li + li a:before {content: none;}
.responsive-langmenu ul li.active a, .responsive-langmenu ul li.active:hover {background-color: #258fd6;color: #fff;}
.percent { color: #808080; font-size: 0.8rem; }

/* Switches for comic display options (hd/transcript) */
.comicoptions {position: relative; z-index: 100;}
.switch { border: 1px solid #dedede; display:inline-block; border-radius: 8px; margin: 0 -0.7rem 0.3rem 0; padding: 8px 12px 8px 32px; text-decoration: none; margin: 4px 0 0 4px; cursor: pointer;}
a.switch { color: #444; text-decoration: none; background: #ffffff url('../img/switch_off.svg') no-repeat left center; }
a:hover.switch { text-decoration: none!important; }
a.switch.active { color: #555; text-decoration: none; background: #d8ebfa url('../img/switch_on.svg') no-repeat left center;}
.bgcomic {background-color: #FFF;}
.filesize em{color: #444;}

/* Download/sources buttons */
.download { border: 1px solid #dedede; display:inline-block; border-radius: 8px; margin: 0 -0.7rem 0.3rem 0; padding: 8px 12px 8px 32px; text-decoration: none; margin: 4px 0 0 4px; cursor: pointer;}
a.download { color: #444; text-decoration: none; background: #ffffff url('../img/download_off.svg') no-repeat left center/26px 20px;}
a:hover.download { text-decoration: none!important; }
a.download.active { color: #555; text-decoration: none; background: #d8ebfa url('../img/download_on.svg') no-repeat left center/26px 20px;}
.viewdownload { border: 1px solid #dedede; display:inline-block; border-radius: 8px; margin: 0 -0.7rem 0.3rem 0; padding: 6px 10px 6px 30px; text-decoration: none; margin: 4px 0 0 4px; cursor: pointer; position: absolute; z-index:9002; top: 2px; left: 8px;}
a.viewdownload { color: #d0beb4; border: 1px solid #d0beb4; text-decoration: none; background: transparent url('../img/download_off.svg') no-repeat left center/26px 20px;}
a:hover.viewdownload { text-decoration: none!important;}
a.viewdownload.active { color: #555; text-decoration: none; background: #d8ebfa url('../img/download_on.svg') no-repeat left center/26px 20px;}

.notification { color: #555; max-width: 960px; border-radius: 8px; background: #d8ebfa url('../img/info.svg') no-repeat left 5px top 13px; padding: 20px 20px 20px 52px; text-decoration: none; margin: 20px auto; }
.xyz { color: #A22; max-width: 660px; text-align: center; margin: 20px auto; }
.xyz a { color: #A22; text-decoration: none; border-bottom: 1px dashed #A22; }

/* Thumbnail pictures*/
.thumbnail img{ position: relative; margin: 0 0 3px 0;}
.thumbnail a:hover { filter: brightness(110%); }
.thumbnail figcaption{ color: #999; min-height: 1rem; text-decoration: none; font-size: 1rem; font-style: italic; margin-bottom: 0.3rem; text-align: center; }
.thumbnail figcaption a { color: #999; text-decoration: none;}
.thumbnail figcaption a:hover { text-decoration: underline; cursor: pointer; }
.thumbnail .detail, .thumbnail .detail a{color: #BBB; font-size: 0.8rem; text-decoration: none!important;}
.notranslation img{ filter: sepia(0.8); opacity: 0.42; }

/* Translator credits on top of webcomic */
.translacredit { color: #746a62; font-size: 1.4rem; font-family: 'PepperCarrot'; text-decoration: none; text-align:center; margin: 0 0 1.3rem 0; clear:both; max-width: 540px }
.translacredit a { color: #746a62; text-decoration: none;}

/* prev/next button webcomic */
.readernav { margin: 0 0 0 0; clear:both; max-width: 915px }
.readernavbutton { display:block; width: 100%; margin-bottom: 0.2rem; padding: 6px 8px 6px 8px; font-size: 1.5rem; font-family: 'PepperCarrot'; text-decoration: none; text-align:center;}
.readernav a { color: #746a62;}
.readernav a:hover { color: #948780;}
.readernavbutton:hover { text-decoration: none;}
.readernavbutton .smaller { font-size: 1.1rem; color: #6daae2;}

/* Footer of webcomic */
.sourcebutton { background: #D7EBFA url('../ico/dl_sources.svg') no-repeat center left 10px; padding: 0.6rem 0.7rem 0.6rem 3rem; border-radius: 10px }

/* Hidden ( for top logo, transcripts for screen readers in webcomic) */
.hidden { height:0px; width:0px; font-size: 0.00001rem; opacity:0.0;}

/* About page */
.about { text-align: center;}
.about p { margin: 1rem auto; max-width: 720px; text-align: justify; font-family: "Georgia", Times, serif; font-size: 1.2rem; line-height: 1.55;}
.about h2 { margin: 3rem 0 1.5rem 0;}
.about h1{ font-size: 3.5rem; text-align: center; padding-bottom: 2.6rem; background: transparent url('../img/bordure.png') no-repeat bottom center; margin-bottom: 4rem;}
.about img { margin: 1rem 0 0.5rem 0;}
.about .button { text-align: center;  display: block;}
.about .button a { display: block; max-width: 300px; margin: 0 auto 2.5rem auto;}

/* TOS page */
.tos { max-width: 840px; font-size: 1.1rem; }
.tos p { text-align: left;}
.tos h2, .tos h1, .tos h3 { font-family: ubuntu, arial, sans-serif; text-align: left; }
.tos img { margin: 1rem 0 0.5rem 0;}
.tos .button { text-align: center;  display: block;}
.tos .button a { display: block; max-width: 300px; margin: 0 auto 2.5rem auto;}

/* Support page */
.support { background: transparent url('../img/support-thank-you.png'); margin: 1rem auto; max-width: 800px; text-align: justify; font-size: 1.2rem; float:none; padding: 2rem; border: 4px solid transparent;}
.support h2 { margin: 2rem 0 0.5rem 0;}
.support img { margin: 1rem 0 0.5rem 0;}
.support .button { text-align: center;  display: block;}
.support .button a { display: block; max-width: 300px; margin: 0 auto 2.5rem auto;}

/* Scenario page */
.scenariolist { color: #6e523c; font-size: 1.6rem; display: block; margin: 5px auto 0 auto; text-align: center;}
.scenariolist:hover { color: #b68763;}
.notes { color: #a45d25; font-size: 1rem; }

/* Wiki and default pages themes */
.notice {color:#aaa;}
.page { background: url('../img/bg.jpg'); border: 16px solid transparent; border-image: url('../img/page.jpg') 10% round; padding: 15px 120px 0 120px; font-family: "Georgia", Times, serif; text-align: justify; font-size: 1.2rem; margin-top: 16px;}
.page a { color: #423027; text-decoration-color: #c5b396;}
.page hr { border: dashed 1px #A79281; margin: 50px 0px;}
.page img { max-width: 125%; display: block; text-align: center; margin-left: 50%; border: 16px solid transparent; border-image: url('../img/border.png') 10% round; transform: translate(-50%, 0); }
.page .edit { text-align: right; margin-right: -12%;}
.page .edit .button { display:inline-block; font-size: 1rem;}
.page .edit img { display: inline; max-width: 100%; text-align: center; margin-left: 0; margin-right: 0; border: none; transform: translate(0, 0); }
.page h1{ font-size: 3.5rem; text-align: center; padding-bottom: 2.6rem; background: transparent url('../img/bordure.png') no-repeat bottom center;}
.page h2{ color: #50321e; font-size: 2.2rem; text-align: center; margin-bottom: 3rem;}
.page h3{ font-size: 1.8rem; margin-top: 2.6rem;}
.scenario blockquote { font-family: "Georgia", Times, serif; font-style: normal; background-color: #fafaf6; margin: 0px 0px; padding: 1px 20px 10px 20px; border-radius: 10px; }
.scenario p { margin: 20px 0 5px 0; }
.wikivertimenu { padding-top: 1rem;}
.wikibutton { width: 100%; display: block; box-sizing: border-box; padding: 0.2rem 0.7rem 0.4rem 1rem; margin-bottom: 0.5rem; border-radius: 4px; box-shadow: 0 0 0 2px #F0ECE9 inset, 0 0 0 3px rgba(222,168,131,0.55) inset, 1px 1px 2px 0 rgba(20,0,0,0.50); background: url('../img/bg.jpg'); font: normal 1.4rem 'PepperCarrot', cursive; text-align: left;  color: #412813; text-decoration: none!important;}
.wikibutton.active { color: #111; background: #fff;}
.wikibutton:hover { text-shadow: 1px 0px 30px green, 1px 0px 20px yellow, 1px 0px 10px yellow, 1px 0px 5px white, 1px 0px 5px white; text-decoration: none;}
.edit { padding-left: 1.2rem; line-height: 1.6;}
.page .credits { font-size: 1rem; text-align: center; padding-top: 2.6rem; background: transparent url('../img/bordure.png') no-repeat top center;}

/* Wiki theme specific for documentation */
.wikidoc .page { text-align: left; font-size: 1.1rem; font-family: ubuntu, arial, sans-serif; padding: 15px 100px 0 100px;}
.wikidoc .page img { border: none; border-image: none; }
.wikidoc .page a { color: #338008; text-decoration-color: #4ba617;}
.wikidoc .page .edit { text-align: right; margin-right: -12%;}
.wikidoc .page .edit .button { display:inline-block; font-size: 1rem;}
.wikidoc .page .edit img { display: inline; max-width: 100%; text-align: center; margin-left: 0; margin-right: 0; border: none; transform: translate(0, 0); }
.wikidoc pre, .code { tab-size: 2; border-radius: 6px; font-family: "Monospace", "DejaVu Sans Mono", "Liberation Mono", Monaco, monospace; font-size: 0.85rem; color:#a23500; background-color: rgba(255,255,255,0.3); margin: 10px 0 10px 0; border:1px dotted #ddd4c8; padding: 16px; overflow:auto; border: 1px solid #ddd; line-height: 1.6; page-break-inside: avoid; word-wrap: break-word; display: block; max-width: 100%;}
.wikidoc code { border-radius: 3px; font-family: "Monospace", "DejaVu Sans Mono", "Liberation Mono", Monaco, monospace; font-size: 1rem; color:#a23500; background-color: rgba(255,255,255,0); padding: 0 0; }
.wikidoc .page h1{ font-size: 2.6rem; text-align: left; padding-bottom: 1.6rem; background: none; font-family: ubuntu, arial, sans-serif;}
.wikidoc .page h2{ color: #111; font-size: 2.4rem; text-align: left; margin: 3.2rem 0 2rem 0; font-family: ubuntu, arial, sans-serif;}
.wikidoc .page h3{ color: #111; font-size: 1.9rem; text-align: left; margin-bottom: 1.2rem; font-family: ubuntu, arial, sans-serif;}
.wikidoc .page h4{ color: #111; font-size: 1.5rem; text-align: left; margin-bottom: 1.2rem; font-family: ubuntu, arial, sans-serif;}
.wikidoc .wikibutton { font: normal 1.2rem ubuntu, arial, sans-serif; padding: 10px;}
.wikidoc .page .credits { font-size: 1rem; text-align: center; padding-top: 2.6rem; background: none;}
.page .action {display: block; color: #000!important; max-width: 300px; padding: 8px 4px 8px 20px; margin: 0 4px; text-decoration: none; background: #e1d698 url('../img/grain.png'); border-radius: 4px; box-shadow: 0 0 0 2px #e1d698 inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50); cursor: pointer;}
.page details > summary {max-width: 300px; padding: 4px 4px 4px 20px; margin-bottom: 4px; text-decoration: none; background: #c0d7a4 url('../img/grain.png'); border-radius: 4px; box-shadow: 0 0 0 2px #c0d7a4 inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50); cursor: pointer;}
.page details > ol,.page details > p {background-color: rgba(255,255,255,0.50); padding: 40px; margin-top: 0!important;}

/* Sources page */
.buttonsource { background: #AE6A6A linear-gradient(to bottom, #f7f7f7, #ababab); border-radius: 0.6rem; color: #262526; border: solid #DADADA 1px; padding: 0.6rem; margin: 0 0 10px 0;}
.source { background-color: #FFF; margin-bottom: 2rem; font-size: 1rem; }
.source figure { min-height: 350px;}
.filesize { font-size: 0.7rem; color: #999; }
.sourcescaptions a {height: 3rem; text-decoration: none;}
.content { max-width: 1000px; margin: 0 auto; }
.content img{ margin-top: 0.7rem; }
.readme { font-size: 0.8rem;}
.readme ul {  margin: 0; padding: 0; }
.readme li { margin: 0; padding: 0; }
.readme h1,.readme h2 { font-size: 1.4rem;}
.ccbox { background: #e0e2e0; padding: 2rem;}
.ccbox a{ text-decoration:none;}

/* Footer */
#footer { color: #bbb; background: url('../img/header-bg-dark.jpg') center center; border-top: 1px solid rgba(64,56,52,0.1); box-shadow: 0 -0.1rem 0.2rem rgba(49,20,0,0.2); padding: 0.6rem 0 1rem 0; margin: 0 0 0 0; }
#footer .container { max-width: 1100px; margin-top: 1.4rem; margin-bottom: 2.8rem; text-align: center; }
#footer img { margin: 0.2rem 0.2rem 0 0; }
#footer img:hover { filter: brightness(1.2); }
#footer p{ font: normal 0.8rem ubuntu, arial, sans-serif; margin: 0.4rem; }
#footer a{ color: #fff; text-decoration: none; }
#footer a:hover{ text-decoration: none; color: #3c98d7}

/* RESPONSIVE RULES */
/* -----------------*/

/* 1080p */
@media (max-width: 1930px) {
  #viewer #viewsrccontainer {font-size: 1rem;}
}

@media (max-width: 1640px) {
  .menu.expanded {margin: 1.4rem 0 0 0;}
  .menu.expanded li a { padding: 6px 8px; font-size: 1.40rem;}
}

/* 1280 laptop */
@media (max-width: 1380px) {
  .title img { width: 98%; height: auto; margin: 8px 0 0 5px;}
  .cover h1 { font-size: 2.2rem;}
  .cover .logo { width: 78%; height: auto }
  .cover { background: #305067 url('../img/2021-cover-lrg.jpg') no-repeat bottom right -120px; }
  .covertextoverlay { left: 3.5rem; top: 2rem;}
  .menu.expanded li a { padding: 4px 6px; font-size: 20px; margin: 16px 0 0 0;}
  .translabutton { padding: 6px 12px; margin: 0 0 0 2px;}
  #viewer #viewsrccontainer {font-size: 0.9rem;}
  #viewer .viewheader {max-width: 700px;}
  #viewer #viewsrccontainer {max-width: 350px;}
  #viewer h1 { font-size: 1.8rem; margin: 10px 0 0 0;}
  .viewsrcthumb {height: 150px; }
  #viewer .viewsrclicensebox {width: 95%; padding: 1rem;}
  #viewer .readernavbutton { font-size: 1.3rem; }
  #viewer .viewheadertitle  { font-size: 1.3rem; }
  #viewer .viewheaderattribution  { font-size: 0.9rem; }
  #viewer .viewcloseallbutton {width: 25px; height: 25px; top: 15px; right: 15px;}
}

/* Tablet mode */
@media (max-width: 1140px) {
  .title img { margin: 12px 0 0 5px;}
  .cover h1 { font-size: 30px; width: 600px; }
  .menu.expanded li a { font-size: 1.15rem; padding: 2px 6px 6px 6px;}
  .menu.expanded li a .homeicon{ width:18px; }
  .cover { background: url('../img/2021-cover-lrg.jpg') no-repeat bottom right -150px;}
  .patronagebutton a { font-size: 0.8rem; }
  .cardblock h3{ font-size: 1.6rem; }
  .cardblock .button {font-size: 1rem; }
  .cardblock .button a { display:inline-block; min-width: 90%; font-size: 1rem;}
  .responsive-langmenu ul { column-count: 3; }
  a.viewdownload {font-size: 0.8rem; }
  .translabutton { padding: 6px 8px; margin: 0 0 0 2px; font-size: 0.9rem;}
}

/* (1024=plucss-med) Tablets and Laptops */
@media (max-width: 1023px) {
  #header { background: rgba(255,255,255,0.95) url('../img/header-small.jpg') repeat-x top center ; }
  .cover { min-height: 540px; background: url('../img/2021-cover-lrg.jpg') no-repeat center right -250px;}
  .cover .logo { width: 90%; height: auto; }
  .cover .dr { width: 50%; height: auto; margin-bottom: 0.9rem; }
  .covertextoverlay { left: 1rem; top: 1rem; max-width: 400px;}
  .cover h1 { width: 450px; font-size: 22px; line-height: 30px;}
  .patronagebutton a { margin-top: 10px;}
  .menu.expanded li a { padding: .5rem .6rem .5rem 1.6rem; box-shadow: none; border: none; border-radius: 0px; font-size: 1.7rem;}
  .containercomic .main {margin: 56px -0.8rem 0 -0.8rem; }
  .containercomic {padding-left: 0; padding-right: 0;}
  a.viewdownload {padding:4px 6px 4px 32px;}
  #viewer #viewsrccontainer {top: -30px; height: 105%;}
  #viewer h1 { font-size: 1.2rem; margin: 10px 0 0 0;}
  .langshortcuts { display: none; }
  .responsive-langmenu {text-align: right;}
  .translabutton { font-size: 1rem;}
  .readernav { margin: 0 0 0 0; padding: 0 25px 0 15px;}
  .wikivertimenu { column-count: 3;}
  .page { padding: 15px 80px 0 80px; font-size: 1.2rem;}
  .page .edit { margin-right: -8%;}
  .artbutton { height: auto;}
}

/* (767=plucss-sml) Tablet mode: vertical */
@media (max-width: 767px) {
  .thumbnail, .thumbnail img { width: 100%;}
  .covertextoverlay { right: 2.3rem;}
  .cardsocket { min-height: 550px;}
  .cardblock { min-height: 550px;}
  .mini { min-height: 100%; }
  .wikivertimenu { column-count: 2;}
  .page, .wikidoc .page { padding: 15px 15px 0 15px; font-size: 1.15rem;}
  .page .edit, .wikidoc .page .edit { margin-right: -2%;}
  .readernavbutton { padding: 3px 4px 3px 4px; font-size: 1.25rem;}
  .readernav { margin: 0 0 0 0; padding: 0 25px 0 15px;}
  .translacredit { font-size: 1.1rem;}
  a.viewdownload {top: auto; bottom: 10px; left: 10px; background-color: rgba(0, 0, 0, 0.5); }
  #viewer .viewcloseallbutton {width: 20px; height: 20px; top: 10px; right: 10px;}
  #viewer #viewsrccontainer {top: -60px; height: 105%;}
  .responsive-langmenu ul { padding: 1.5rem;}
    .langmenu.expanded li a { font-size: 1rem;}
  .patronagebutton a { margin: 12px 3px 0 0 ; padding: 6px 8px; float: right; font-size: 0.8rem; line-height: 1.20rem;  }
}

/* Smartphones: vertical */
@media (max-width: 500px) {
  .cover { background: url('../img/2021-cover-sml.jpg'); min-height: 390px; }
  .cover .dr { display: none; }
  .cover h1 { width: 100%; font-size: 22px; line-height: 30px; margin: 0.3rem 0 1.1rem 0;}
  .cover .logo {width:80%; }
  .responsive-menu label .logo { width: 80%; height: auto; margin: 8px 0 0 0;  }
  .responsive-menu label .burgermenu { margin: 0 10px 6px 0;  }
  .covertextoverlay { left: 20px; top: 20px;}
  a.moreinfobutton	{ margin: 1.5rem auto 0 auto; font-size: 0.9rem;}
  .container {padding: 0;}
  .responsive-langmenu ul { column-count: 2;}
  .responsive-menu label { font-size: 1.8rem;}
  .cardsocket { width: 100%!important;}
  .big { font-size:1.10rem;}
  .page { font-size: 1.1rem;}
  .readernavbutton { margin: 0 auto 0 auto; padding: 3px 0 3px 0; font-size: 1.15rem;}
  .translacredit { font-size: 1rem;}
  .readernav { margin: 0 0 0 0; padding: 0 25px 0 15px;}
  .mini img { display: none;}
  .mini { border-image: none!important;}
  #viewer .viewheaderattribution {display: inline-block; width: 350px; }
  #viewer .viewcloseallbutton {z-index: 100;}
  #viewer #viewsrccontainer {position: fixed; width: 100%; height: 100%; top: 0; left: 0; max-width: 500px; z-index: 200; }
  #viewer .ViewFooterInfo {font-size: 1.15rem;}
  .patronagebutton a { margin: 12px 3px 0 0 ; padding: 6px 8px; float: right; font-size: 0.8rem; line-height: 1.20rem;  }
  #gallery li {height: 155px;}
  #blockmenu .blockcaption { text-align: inherit; margin: .5rem 2px 0; font-size: 28px; width: 100%; }
  .about p {margin: auto 1rem;}
}

/* Smartphones: horyzontal */
@media (max-height: 400px) {
  #viewer .viewimagecontainer img {height: 80%;}
}

/* Dark-theme */
@media (prefers-color-scheme: dark) {
  body { color: #FFF; background-color: #2c2929; }
  h1, h2, h3, h4 { color: #fff;}
  a { color: #ffb65c; text-decoration-color: #ffb861;}
  a:active, a:hover { color: #ffb65c; text-decoration-color: #ffb65c;}
  
  /* Buttons */
  .button a { color: #FFFFFF!important; background: #556336 url('../img/grain.png'); box-shadow: 0 0 0 2px #3A422F inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50);}
  .mandarine a { background-color: orange; box-shadow: 0 0 0 2px orange inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50);}
  .cherry a { background-color: LightCoral; box-shadow: 0 0 0 2px LightCoral inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50);}
  .gum a { background-color: #61C6B6; box-shadow: 0 0 0 2px #61C6B6 inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50);}
  .choco a { background-color: #9B7761; box-shadow: 0 0 0 2px #9B7761 inset, 0 0 0 3px rgba(255,255,255,0.55) inset, 2px 2px 3px 0 rgba(20,0,0,0.50);}
  .moka a { color: #FFC486 !important; background-color: #323031; box-shadow: 0 0 0 2px #333230 inset, 0 0 0 3px rgba(255, 178, 126, 0.55) inset, 1px 1px 2px 0 rgba(0, 0, 0, 0.5);}
  .milk a { color: #544840!important; background-color: #FFF; box-shadow: 0 0 0 2px #FFF inset, 0 0 0 3px rgba(0,0,0,0.25) inset, 1px 1px 2px 0 rgba(20,0,0,0.50);}
  
  /* Header */
  #header { background: url('../img/header-bg-darker.jpg') top left;}
  #header .logo, .menu img, .responsive-menu img { filter: invert(100%) saturate(0%) brightness(130%);}
  .patronagebutton a {background: #da5749;}

  /* Menu */
  .menu.expanded li a { box-shadow: 0 7px 8px rgba(0, 0, 0, 0.40);; border-top: solid 1px #716969; background: rgba(255, 252, 247, 0.15); }
  .menu.expanded li a:hover { text-shadow: 1px 0px 20px  #ffb65c; }
  .menu.expanded a { color: #ffffff;}
  .menu.expanded li.active a, .menu.expanded li.active a:hover { color: #000; background-color: #ffb65c; text-shadow: 1px 0px 20px  #ffffff; }
  .responsive-menu label { color: #ffffff;}
  
  /* Translation */
  .translabutton {color: #fff; background-color: rgba(101, 151, 171, 0.3); border: 1px solid rgba(0, 0, 0, 0.2);}
  .translabutton:hover {border: 1px solid rgba(255, 255, 255, 0.4);}
  a.translabutton.active {color: #ffffff; background-color: rgba(106, 194, 247, 0.6);}
  a.translabutton {color: #ffffff;}
  .langmenu.expanded { background-color: rgba(0, 0, 0, 0.3);}
  .responsive-langmenu ul {color: #ffffff; border: 1px solid #000000;box-shadow: 0 0.2rem 0.2rem rgba(0,0,0,0.1);}
  .langmenu.expanded li a {color: #ffffff;}
  .percent {color: #a2a2a2;}
  .langmenu.expanded li.active a, .langmenu.expanded li.active:hover, .langmenu.expanded li a:hover { color: #ffffff; text-shadow: 1px 0px 30px #49d4ff, 1px 0px 20px #4fdeff, 1px 0px 10px #1e44d7, 1px 0px 5px black, 1px 0px 5px white;}
  
  /* Homepages */
  figure + em, img + em, h1 + p em {color: #ebcead;}
  .cover {background-color: #000;}
  .rssbox { color: #fff;}
  a.loadmorebutton { box-shadow: 0.15rem 0.15rem 0.2rem #000000;  background: #22191e url('../img/go.svg') no-repeat center right 14px;  color: #fff;}
    
  /* Pages */
  .page h2,.page  h3,.page  h4 { color: #ffb65c;}
  .page { background: url('../img/bg_dark.jpg'); border-image: url('../img/page_dark.jpg') 10% round;}
  .page a, .wikidoc .page a { color: #ffb65c; text-decoration-color: #ffb65c;}
  .page .credits { background: transparent url('../img/bordure_w.png') no-repeat top center;}
  .page img {border-image: url('../img/border_dark.png') 10% round;}
  .wikibutton { box-shadow: 0 0 0 2px #2C2929 inset, 0 0 0 3px rgba(222,168,131,0.55) inset, 1px 1px 2px 0 rgba(20,0,0,0.50); background: url('../img/bg_dark.jpg'); color: #ffb65c;}
  .wikibutton.active { color: #1d1616; background: #ffb65c;}
  .wikibutton:hover { text-shadow: 1px 0px 30px #4b3325, 1px 0px 20px #a56d2d, 1px 0px 10px #a5802a, 1px 0px 5px white, 1px 0px 5px white;}
  .page .action {color: #fff!important; background: #a66640 url('../img/grain.png'); box-shadow: 0 0 0 2px #a66640 inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50);}
  .page details > summary {background: #5d7b39 url('../img/grain.png'); box-shadow: 0 0 0 2px #5d7b39 inset, 0 0 0 3px rgba(255,255,255,0.80) inset, 2px 2px 3px 0 rgba(20,0,0,0.50); cursor: pointer;}
  .page details > ol,.page details > p {background-color: rgba(255,255,255,0.50);}
  .wikidoc .page h1, .wikidoc .page h2, .wikidoc .page h3, .wikidoc .page h4 { color: #ffffff;}
  .wikidoc pre, .code , .wikidoc code {color: #c890ff; background-color: #201D1D; border: none;}
  .wikibutton:hover {text-shadow: 1px 0px 30px #0b0705, 1px 0px 20px #000000, 1px 0px 10px #000000;}
  .page details > ol, .page details > p {background-color: #262424}
  tfoot, thead {background-color: #201d1d;}
  td, th {border: 1px solid #9a9696;}

  /* Comics */
  .bgcomic {background-color: #2c2929;}
  .thumbnail figcaption {color: #c2c2c2;}
  .notranslation img { filter: sepia(0.4); opacity: 0.62;}
  .source {background: none;}
  .ccbox {background: #1d1616;}
  .buttonsource {background: #AE6A6A linear-gradient(to bottom, #4f4f4f, #000000); color: #fff8ff; border: solid #000000 1px;}
  .buttonsource a {text-decoration: none;}
  .buttonsource img { filter: invert(100%) saturate(0%) brightness(130%);}
  .filesize em{color: #999499;}
  .translacredit, .translacredit a {color: #9a8c82;}
  .readernav a {color: #9a8c82;}
    
  /* Other */
  #blockmenu .blockitem { border: 4px solid transparent;}
  .artbutton {border: 4px solid #ffffff}
  .about h1, .page h1 {background: transparent url('../img/bordure_w.png') no-repeat bottom center;}
  #gallery .label {background-color: rgba(0,0,0,0.6);}
}