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

@font-face {
	font-family: 'ComicSpice';
	src: url('../font/ComicSpice.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

/* rewrite plucss rules */
body { background-color: #fff; }
.button { border-radius: 0.4rem; }
.containercomic { margin:0 auto; padding-left:1rem; padding-right:1rem; width:100% }
.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);; }

/* general styles */
body { color: #232323; font-family: ubuntu, arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'ComicSpice', 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}

/* title */
.header { background: url('../img/header-bg.jpg') center center; box-shadow: inset 0 0.5em 3em #3A2619; }
.header a { text-decoration: none;}
.title { min-width: 280px; }
.title img { margin-top: 15px;}

/* Follow */
.follow { margin-top: 0.3rem; font-size: 0.85rem; color:#453224; }
.follow .logo { margin-right: 3px; }
.follow a { color: #FFF;}
.follow a:hover { opacity: 1; }

/* main menu */
.menu.expanded { padding: 0 0 0 0; margin: 1.2rem 0 0 0; font: normal 1.9rem 'ComicSpice', cursive; }
.menu.expanded li a { box-shadow: 0 0.2rem 0.4rem #3A2619; border-top-left-radius: 0.4rem; border-top-right-radius: 0.4rem; border-top: solid 1px #F3EDE8;  }
.menu.expanded li a:hover { text-shadow: 1px 0px 20px yellow; color:#fff; transition: all 0.2s ease-in; }
.menu.expanded a { color: #3A2619; font-size: 1.6rem; }
.menu.expanded li.active a, .menu.expanded li.active a:hover { color: #000; background-color: #FFF;  }
.menu.expanded li.external a:hover { color: #FFF; }
.menu.expanded li.external i { font-size: 0.8rem;}
.responsive-menu label { color: #3A2619; background-color: transparent; font: normal 2rem 'ComicSpice', cursive; }

/* translation pills */
.translabar { padding: 0 0 0 0; margin: 0.5rem 0; max-width: 1060px }
.translabar li { background-color: #FFF; margin: 0.2rem; padding: 0.3rem 0.4rem; border: solid 1px #D7EBFA; border-radius: 10px }
.translabar li.active { background-color: #D7EBFA; border: solid 1px #B1D6F2;}
.translabar a { text-decoration: none; font-size: 0.9rem; }

/* HOMEPAGE */

/* cover */
.cover { height: 400px; border-radius: 0.4rem; margin-bottom: 0.3rem; background: url('../img/pepper-carrot-cover3_by-david-revoy.jpg') no-repeat center left; }
.cover h1 { color: #414141; margin: 0.4rem; line-height: 2.8rem; font-size: 2.4rem; text-align:right; text-shadow: 0 0 4px rgba(255,255,255,0.5), 0 0 2px rgba(255,255,255,0.7);}
.homepage-title { font-family: 'ComicSpice', cursive; font-size:1.5rem;}
.covertextoverlay { position: absolute; right: 5.5rem; top: 1.8rem; text-align:right; }
#supportmebox { position: absolute; right: -1.5rem; top: 9.4rem; color: #222; width: 450px; height: 170px; text-align: center; border-radius: 0.4rem; }
#moreinfobox { position: absolute; right: 0rem; top: 21rem; color: #222; width: 450px; height: 170px; text-align: right; border-radius: 0.4rem; }
.moreinfobutton	{ color: #FFF; background: #258fd6 url('../ico/go.svg') no-repeat center right 8px; font-size: 0.85rem; font-family: ubuntu, arial, sans-serif; text-align: center; padding: 8px 24px 8px 8px; margin: 0 4px 0 0;	border-radius: 6px; cursor: pointer; }
.moreinfobutton:hover	{ color: #FFF; background-color: #1c6ea5; }

/* Support box */
.bigbuttonpatreon { font-size: 1.8rem; font-weight: bold; font-family: ubuntu, arial, sans-serif; color: #FFFFFF; text-align: center; min-height: 80px; min-width: 374px; padding: 0 0 10px 0; margin: 0 auto 8px auto; display: inline-block; text-decoration: none; border-radius: 10px; box-shadow: 0 2px 3px rgba(23,23,23,0.3);  background: #F96854 url('../img/logo-patreon.svg') no-repeat 120px 36px; background-size: 42px 42px; text-shadow: 0 1px 1px rgba(0,0,0,0.4) }
.bigbuttonpatreon:hover { color: #FFF; text-decoration: none;}
.alternatives {font-size: 0.8rem; font-weight: normal; font-family: ubuntu, arial, sans-serif; color: rgba(0,0,0,0.5); margin: 0 0 8px 0;}
.alternativesbutton	{ font-size: 0.85rem; font-family: ubuntu, arial, sans-serif; text-align: center; padding: 8px 8px 8px 24px; margin: 0 2px 0 0; background-color: #777;	border: solid 1px #D7EBFA; border-radius: 10px; cursor: pointer; }
.alternativesbutton:hover	{ color: #111; }
.tipeee { padding-left: 26px; background: #FFF url('../img/logo-tipeee.svg') no-repeat center left 5px; background-size: 18px 18px;}
.paypal { background: #FFF url('../img/logo-paypal.svg') no-repeat center left 5px; background-size: 18px 18px;}
.liberapay { background: #FFF url('../img/logo-liberapay.svg') no-repeat center left 5px; background-size: 18px 18px;}
.G1 { background: #FFF url('../img/logo-g1.svg') no-repeat center left 5px; background-size: 18px 18px;}
.iban { background: #FFF url('../img/logo-iban.svg') no-repeat center left 5px; background-size: 18px 18px;}

/* box */
.homebox { position: relative;}
.homebox h2 { font: normal 1.5rem 'ComicSpice', cursive; margin: 0 0 0.4rem 0; padding: 0 0; min-height: 1rem; text-decoration: none; overflow: hidden; white-space: nowrap; }
.news {margin-bottom: 1rem;}

/* last episode */
.lastep { position: relative; border-radius: 0.4rem; }
.lastep img { border: solid 1px #EFEFEF; border-radius: 0.4rem; border: solid 1px #EFEFEF; width:100% }
.lastep img:hover { border: solid 1px #258fd6; }
.lastep figcaption{ color: #fff; font-weight: bold; width:100%; position:absolute; padding: 0.3rem;top: 0px; text-align:center; width:100%; text-decoration: none; font-size: 0.85rem; overflow: hidden; white-space: nowrap; margin-bottom: 0.3rem; }
.lastep .detail, .homethumbnail .detail a{ color: #fff; font-size: 0.85rem; text-shadow: 0 2px 2px #000; }
/* news and update */
.homethumbnail { background-color: #FFF; position: relative; border: solid 1px #EFEFEF; border-radius: 0.4rem; }
.homethumbnail img { border-radius: 0.4rem; width:100% }
.homethumbnail:hover { border: solid 1px #258fd6; }
.homethumbnail figcaption{ width:100%; position:absolute; padding: 0.3rem;bottom: 0px; left:0px; width:100%; min-height: 2.3rem; text-decoration: none; font-size: 0.85rem; overflow: hidden; white-space: nowrap; margin-bottom: 0.3rem; background: linear-gradient(to bottom, rgba(255,255,255,0.65) 0%,rgba(255,255,255,0.85) 30%,rgba(255,255,255,1) 100%); }
.homethumbnail figcaption a { color: #111; }
.homethumbnail figcaption a:hover { text-decoration: none; color: #258fd6; }
.homethumbnail .detail, .homethumbnail .detail a{ color: #666; font-size: 0.8rem; }
.moreposts { font-size: 0.8rem; width: 100%; text-align: right; margin: 1rem 0 0 0; }
.moreposts i{ margin: 0 0 0 0.3rem; }

/* UTILS */
/* thumbnail+caption under */
.thumbnail img { border: solid 1px #EFEFEF; border-radius: 0.4rem;}
.thumbnail img:hover { border: solid 1px #258fd6; }
.thumbnail figcaption{ min-height: 2.3rem; text-decoration: none; font-size: 0.85rem; overflow: hidden; white-space: nowrap; margin-bottom: 0.3rem; }
.thumbnail figcaption a { color: #444; }
.thumbnail figcaption a:hover { text-decoration: none; color: #258fd6; }
.thumbnail .detail, .thumbnail .detail a{ color: #BBB; font-size: 0.8rem; }

/* Protect SVG icons */
.lastep .svg, .lastep .svg:hover, .homethumbnail .svg, .thumbnail .svg:hover, .thumbnail .svg { width: auto; border:none; }

pre,code { color:#111; background-color: #f7f7f7; padding: 1em; line-height: 1.45; border-radius: 3px; font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace; overflow:auto; }
.post { background-color: #FFF; padding: 2rem; box-shadow: 0 0 1rem rgba(23,23,23,0.3); margin-bottom: 2rem; border-radius: 0.4rem; }
.post h1,.post h3 { margin-top: 0; color: #000;}
.post h1 a { color: #2c2c2c;}

.page h2 { margin-top: 0.2rem;}

.category { padding-top: 2rem;}

input[type=search] { margin: 1.2rem 0 0 0; background: #ededed url(../img/search.png) no-repeat 9px center; padding: 9px 10px 9px 32px; }

.arrow a { font-size: 2em; color: #2D2D2D; font-family: 'ComicSpice', cursive; text-decoration: none;}
.arrow { position: relative; padding: 0px;}
.arrow img { padding: 0; box-shadow: 0 2px 3px rgba(23,23,23,0.3); }
.left { float: left;}
.right { float: right;}

.article { margin: 1.2rem 0 0 0;}
.article header{ text-align: center;}
.article header h1 { font-size: 2rem; margin-bottom: 0; margin-top:0;}
.article header h1 a { color: #444; }
.article header h1 a:hover { color: #258fd6; text-decoration: none; }
.article footer { padding-top: 1.3rem }


/* Navigation for reading comic ( prev/next ) */
.readernav { margin 1.2rem 0 1.2rem 0; padding: 0.6rem 0 0 0; clear:both; max-width: 915px }
.readernavbutton { display:block; width: 100%; background-color: #FFF; margin-bottom: 0.2rem; padding: 6px 8px 6px 8px; font-size: 1.5rem; font-family: 'ComicSpice'; text-decoration: none;}
.readernavbutton:hover { text-decoration: none;}
.readernavbutton .smaller { font-size: 1.1rem; color: #6daae2;}
.off, .off:hover { color: #EEE; cursor: not-allowed;}
.off img { opacity: 0.05; }
.off .smaller { color: #EEE;}

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

/* Share buttons*/
.share { color: #aaa; }
.share a { color: #aaa; background: #FFF url('../ico/share.svg') no-repeat center left 5px;  line-height: 2rem; background-color: #FFF; margin: 0.2rem; padding: 0.3rem 0.4rem 0.3rem 22px; border: solid 1px #dedede; border-radius: 10px; }
.share a:hover { background: #FFF url('../ico/share-hover.svg') no-repeat center left 5px; color: #62A7DC; border: solid 1px #62A7DC;  }

/* More */
.more {text-align: right;}
.more a { background-color: #659EBD; color: #FFF; margin-bottom: 0.2rem; padding: 6px 8px 6px 8px; border: solid 1px #659EBD; border-radius: 10px; text-decoration: none; }
.more a:hover { background-color: #D7EBFA; color: #659EBD; border: solid 1px #B1D6F2; padding: 6px 8px 6px 8px; border-radius: 10px;}
.tabletransla td, th {padding: 0.3rem;}

/*     BLOG    */
/* ----------- */
/* Listing */
.limit {margin-top:1rem; margin-bottom:1rem; color:#aaa;}

/* Sidebar */
.aside { padding-top: 1rem;  }
.catbutton { border-radius: 0.4rem; box-shadow: 0 0.1rem 0.1rem #C6BCB5; background: url('../img/bg.jpg'); font: normal 1.4rem 'ComicSpice', cursive; text-align: left; width: 100%; color: #111111; padding: 0.2rem 0.7rem 0.4rem 1rem; box-sizing: border-box; display: block; margin-bottom: 0.5rem; }
.catbutton.active { color: #111; background: #fff; }
.catbutton:hover { text-shadow: 0px 0px 10px #258FD6; color:#fff; }
.catbutton a { color: #3A2619; font-size: 1.6rem; }
.catbuttonnumber { color: #6F5341; padding:0 0.2rem; border-radius: 0.3rem; margin: 0 0 0 0.2rem; font-size: 0.9rem; text-shadow: none; }
.lastcom a{ font-size: 0.8rem; color: #333; }
.lastcom li { margin: 0.3rem; padding: 0.3rem; }
.tag { border-radius: 0.4rem; box-shadow: 0 0.1rem 0.2rem rgba(58,38,25,0.3); line-height: 2.3rem; padding: 0.3rem; margin: 0 0.1rem 1.4rem 0; background-color: rgba(255,255,255,0.6); }
.tag-size-1 {font-size: 0.6rem; color: #333; }
.tag-size-2 {font-size: 0.7rem; color: #333; }
.tag-size-3 {font-size: 0.8rem; color: #333; }
.tag-size-4 {font-size: 0.9rem; color: #333; }
.tag-size-5 {font-size: 1rem; color: #333; }
.tag-size-6 {font-size: 1.1rem; color: #333; }
.tag-size-7 {font-size: 1.2rem; color: #333; }
.tag-size-max {font-size: 1.4rem; color: #333; }

/* Sidebar (wiki specific) */
.edit {padding-left: 1.2rem; line-height: 1.6;}
.edit img {opacity: 0.8; }

/* Comments */
.comments { max-width: 720px; margin: 0 auto; padding:0 0;}
.singlecom { padding: 0.5rem 0; text-align: justify; }
.com_content { max-height: 32em; overflow-y: auto; overflow-x: hidden; padding-right:1.5rem; }
.admin { background-color: #F5F9FC; }
.level-0 {margin-left: 0; border-top: solid 1px #EEE;}
.level-1 {margin-left: 8rem; border-left: double 5px #F5F9FC; }
.level-2 {margin-left: 8rem; border-left: double 5px #F5F9FC; }
.level-3 {margin-left: 8rem; border-left: double 5px #F5F9FC; }
.level-4 {margin-left: 8rem; border-left: double 5px #F5F9FC; }
.level-5,.level-max {margin-left: 8rem; border-left: double 5px #F5F9FC; }
.nbcom {background-color: #258fd6;color: #fff;padding: .2rem .3rem;}
.nbcom:hover {background-color: #3a6c96;color: #fff;text-decoration: none;}
.capcha-letter,.capcha-word {font-weight: bold;}
.capcha-word {background-color: #ccc;letter-spacing: 0.3em;	padding: .525rem .7rem;}

/*     STATIC PAGES    */
/* ------------------- */
/* Philosophy page */
.philosophy { text-align: center; }
.philosophy h2{ font-size: 2.6rem; }
.philosophy img{ padding-bottom: 3.8rem; }
.philobutton { text-align: center; padding: 0.9rem; margin: 0 auto; max-width: 570px;  }
.philobutton a{ color: #ED7E78; }
.philobutton:hover { background-color:#FFF; }

/* Sources  */
.source { background-color: #FFF; margin-bottom: 2rem; font-size: 1rem; }
.filesize { font-size: 0.7rem; color: #999; }
.sourcescaptions {height: 3rem;}
.buttonkrazip { background: #AE6A6A; background-image: linear-gradient(to bottom, #f7f7f7, #ababab); border-radius: 0.6rem; color: #262526; border: solid #DADADA 1px; margin: 0 0 0 0; padding: 0.6rem;}
.buttonkrazip .ico{ font-size: 24px; float:left; color: #888; margin: 5px 10px 0 5px; }
.buttonlangzip {background: #AE6A6A; background-image: linear-gradient(to bottom, #f7f7f7, #ababab); border-radius: 0.6rem; color: #262526; border: solid #DADADA 1px; margin: 1rem 0 2rem 0; padding: 0.6rem;}
.buttonlangzip .ico{ font-size: 24px; float:left; color: #888; margin: 5px 10px 0 5px; }
.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;}

/* Contribute/Community */
.buttonlist { padding: 0 0 0 0; margin: 0.5rem 0; max-width: 1060px }
.buttonlist li { background-color: #FFF; margin: 0.2rem; padding: 0.3rem 0.4rem; border: solid 1px #D7EBFA; border-radius: 10px }
.buttonlist a { text-decoration: none; font-size: 0.9rem; }

/* TOS/Privacy */
.tosprivacy { font-size: 1.02rem; max-width: 600px; margin: 0 auto; }
.tosprivacy h1{ font-family: ubuntu, arial, sans-serif; font-size: 2.5rem; border-bottom: solid 1px #444; text-align: center; margin-bottom: 2.6rem;}
.tosprivacy h2{ font-family: ubuntu, arial, sans-serif; font-size: 2rem; margin-bottom: 2rem;}
.tosprivacy h3{ font-family: ubuntu, arial, sans-serif; font-size: 1.6rem; margin-top: 2.6rem;}
.tosprivacy img{ margin-top: 0.7rem; }

.cc { font-weight: bold; color: #111; padding: 0.1rem 0.3rem 0.3rem 0.3rem; }
.license { margin: 0 0 1.2rem 0;}
ul.menu.tag li a.button{ margin: 0 0 1.2rem 0;}

/* Banner ( hidden )  */
.banner { height: 120px; max-width: 1180px; margin-top: 1rem; background: url('../img/banner_001.jpg') no-repeat center left; border-radius: 0.4rem; color:#505E61; text-align:center; border: solid 1px #FFF;}
a:hover { text-decoration:none;}
.banner:hover { border: solid 1px #258fd6; }
.bannertext { font-family: 'ComicSpice'; color: #FFF; text-shadow: 0 2px 2px #000; margin: 0.4rem; font-size: 2.4rem; }

/* RESPONSIVE RULES*/
/* mini laptop */
@media (max-width: 1255px) {
.menu.expanded a { font-size: 1.5rem; }
}

/* tablet horyzontal */
@media (max-width: 1050px) {
.cover h1 { font-size: 2.2rem; }
}
@media (max-width: 980px) {
.menu.expanded a { font-size: 1.3rem; }
}

/* tablet vertical */
@media (max-width: 900px) {
.menu.expanded a { font-size: 1.15rem; }
input[type=search] { margin: 1.2rem 0 1.2rem 0; max-width: 300px; }
.cover h1 { font-size: 2.2rem; margin: 1rem 0 0.4rem 0;}
.cover { background: url('../img/pepper-carrot-cover3_by-david-revoy.jpg') no-repeat 32% 80%; }
.moreposts { text-align: center; margin: 1rem 0 0 0; }
.follow {font-size: 0.65rem;}
.follow img {width: 22px;}
}

/* small devices */
@media (max-width: 700px) {
.cover { background: url('../img/pepper-carrot-cover3_by-david-revoy.jpg') no-repeat 35% 5%; }
.cover h1 { font-size: 1.8rem; margin: 0.3rem 0 0.4rem 0; }
.covertextoverlay { right: 1.3rem;}
}

/* vertical smartphone */
@media (max-width: 500px) {
.cover { color: #FFF; background: url('../img/pepper-carrot-cover3_by-david-revoy.jpg') no-repeat 75% 5%; height: 430px; width: 100%; margin: 0 auto; }
.percentdomain {width:295px;}
.cover h1 { font-size: 1.48rem; margin: 0.3rem 0 1.1rem 0; }
.bigbuttonpatreon { min-width: 280px; height: 72px; font-size: 1.4rem; background: #F96854 url('../img/logo-patreon.svg') no-repeat 80px 24px; background-size: 42px 42px; }
#supportmebox {width: 380px; right: -4,2rem;}
.alternativesbutton {line-height: 2.6rem;}
#moreinfobox {top: 24rem; right: 6.5rem;}
/* Comments */
.singlecom { padding: 0.5rem 0; text-align: justify; }
.com_content { padding-right:0.5rem; }
.admin { background-color: #F5F9FC; }
.level-0 {margin-left: 0; border-top: solid 1px #EEE;}
.level-1 {margin-left: 1.5rem; border-left: double 5px #F5F9FC; }
.level-2 {margin-left: 1.5rem; border-left: double 5px #F5F9FC; }
.level-3 {margin-left: 1.5rem; border-left: double 5px #F5F9FC; }
.level-4 {margin-left: 1.5rem; border-left: double 5px #F5F9FC; }
.level-5,.level-max {margin-left: 1.5rem; border-left: double 5px #F5F9FC; }
.nbcom {background-color: #258fd6;color: #fff;padding: .2rem .3rem;}
}

/* grille-pain */
@media (max-width: 350px) {
.cover { display:none; }
}

/* footer */
.footer { background: url('../img/header-bg.jpg') center center; box-shadow: inset 0 0.5em 3em #3A2619; color: #3A2619; }
.footer p{ font: normal 0.8rem ubuntu, arial, sans-serif; }
.footer .button{ background-color: #444; }
.footer li a{ border:none; }
.footer a{ color: #3A2619; text-decoration: underline; }
.footer li a:hover{ border:none; text-decoration: none; color: #258fd6}
.reshare input { max-width: 460px; font-size: 0.8rem; margin: 0 0 1rem 0; }
.footer .menu.expanded { padding: 0 0 0 0; margin: 1.2rem 0 0 0; font: normal 0.8rem 'ComicSpice', cursive; }
.footer .menu.expanded a:hover { background-color: #aaa; }
.footer .menu.expanded li:hover { background-color: #2D2D2D; }
.footer .menu.expanded a { color: #FFF; font-size: 1rem; background-color: #444; margin: 0 0.6rem 0.6rem 0 ;}
.footer hr { border: solid 1px #333;  }

.main {	background-color: #fff;	margin-bottom: 2rem;}

/* blog pager */
.pagination a {	background-color: #258fd6;color: #fff;padding: .525rem .7rem;}
.pagination a:hover {background-color: #3a6c96;	color: #fff;text-decoration: none;}
.pagination span:first-letter,.pagination a:first-letter {text-transform: uppercase;}
.p_first,.p_prev,.p_current,.p_next,.p_last {display: inline-block;}