/* Font Declarations */
@font-face {
    font-family: 'anastasia';
    src: url('anastasia-webfont.woff2') format('woff2'),
         url('anastasia-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'broadway';
    src: url('broadway-webfont.woff2') format('woff2'),
         url('broadway-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* General */
body 		{ margin: 0; padding: 0; font: normal normal normal 12px/18px Verdana, Geneva, sans-serif; color: #a58e61; background: #462e18 url('body_bg.jpg') repeat-x top left; }
a			{ color: #cbbb9a; }
a:hover		{ color: #ffffff; }
a img		{ border: 0; }

/* Form Elements */
select 		{ background-color: #250201; color: #ae9059; }

/* Headers */
h2 {
    font: normal normal normal 50px/60px anastasia, serif;
    color: #dcb381;
    display: block;
    background: -webkit-linear-gradient(#661305, #861706);
    background-clip: inherit;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: .8px #dcb381;
    text-align: center;
    margin: 0 100px 20px 0;
}
h2::before {
    content: url(section_header_left.png);
    padding-right: 20px;
}
h2::after {
    content: url(section_header_right.png);
    padding-left: 20px;
}

h3 { margin: 0; padding: 0; font: normal normal normal 24px/32px Georgia, "Times New Roman", Times, serif; }

/* High Level */
#footer		{ text-align: center; line-height: 50px; color: #caad93; clear: both; }

/* Heading */
#header 	{ overflow: auto; margin: auto; width: 850px; height: 160px; background: transparent url('header_bg.jpg') no-repeat center; }
h1			{ margin: 50px auto 0 auto; width: 550px; height: 55px; overflow: hidden; }
h1 a		{ display: block; padding-top: 100px; width: 100%; }

/* Navigation */
#nav { margin-top: 10px; }
#nav ul {
    display: block;
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: center;
}
#nav li {
    text-transform: lowercase;
    margin: 0 5px;
    font: normal normal normal 18px/30px broadway, sans-serif;
    display: inline-block;
}
#nav li a {
    color: #efcc7f;
    text-decoration: none;
}
#nav li a:hover {
    color: #fff;
}

#mobile_ks {
    display: none;
}

/* Pagination */
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 550px;
}
.pagination a {
    margin: 0 3px;
    text-decoration: none;
}
.pagination .current {
    font-weight: bold;
    color: #fff;
}

.pagination .pagenext {
    margin-left: 10px;
}

.pagination .pageprev {
    margin-right: 10px;
}

.olderposts {
    font-size: 20px;
    line-height: 30px;
    text-align: center;
}

/* Patreon Overlay */
#patreon_cartouche	{ position: absolute; top: 0; right: 10px; width:127px; height:230px; background: transparent url("patreon_cartouche.png") no-repeat; }
#patreon_cartouche a { display: block; height: 100%; text-indent:100%; white-space: nowrap; overflow: hidden; }

/* Normal Page Overrides */
#page	 	{ width: 100%; min-width: 850px; background: transparent url('normalpage_bg.jpg') no-repeat center 160px; }
#container	{ position: relative; width: 850px; margin: auto; }
/* this makes it 618px wide */
#content	{ margin: 20px 0 0 230px; padding: 1px; height: auto !important; height: 655px; min-height: 655px; }

/* Archives */
#archives dl{ margin: 0; width: 200px; float: left; }
#archives dt{ font: normal normal normal 24px/32px Georgia, "Times New Roman", Times, serif; }
#archives dd{ margin: 0; padding: 0; }

/* News Archives */
#newsarchive { color: #000; width: 550px; }
#newsarchive a		    { color: #630; }
#newsarchive a:hover	{ color: #960; }
#newsarchive dd			{ margin: 0; }
#newsarchive .article		{ margin: 0 0 20px 10px; padding: 20px; position: relative; z-index: 2; }
#newsarchive .article::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-style: solid;
    border-width: 23px 109px 49px 69px;
    border-image: url('article_bg.png') 23 109 49 69 fill round;
}
#newsarchive .articletitle	{ margin: 0; font: normal normal bold 24px/24px "Times New Roman", Times, serif; border-bottom: 1px solid #000; }
#newsarchive .articledate	{ text-align: right; font-size: 10px; font-weight: bold; }

/* Gallery */
#gallery img{ margin: 0 10px 10px 0; }
#gallery h3	{ margin: 10px 0 10px 0; clear: both; }

#previews,#sketchbook { overflow:hidden; }
#previews ul, #sketchbook ul { margin-top:0; }

.leftContentColumn, .rightContentColumn { float: left; width: 250px; }

/* Ishkabibble */
#ishkabibble dt {
    padding-left: 35px;
    font: normal normal normal 24px/32px Georgia, "Times New Roman", Times, serif;
    background: url(bullet_left.png) no-repeat left;
}
#ishkabibble dt:nth-of-type(2n) {
    background: url(bullet_right.png) no-repeat left;
}
#ishkabibble dt a {
    text-decoration: none;
}
#ishkabibble dd {
    margin: 0 0 10px 35px;
    padding: 0;
}

/* FAQ */
#faq dt	{ font-weight: bold; color: #cbbb9a; }
#faq dd { margin: 5px 0 20px 0; padding: 0; }

/* Glossary */
#glossary dt { width: 130px; padding-right: 20px; float: left; clear: both; font-weight: bold; color: #cbbb9a; text-align: right;   }
#glossary dd { margin: 0 0 10px 0; width: 450px; float: left; }

/* Making a Comic */
#makingacomic h3 { color: #cbbb9a; clear: both; padding-top: 20px; }
#makingacomic p	{ clear: both; }
#makingacomic img	{ margin-bottom: 10px; }

/* Links */
#links		{ margin-left: 20px; }
#links h3 	{ clear: both; }
#links ul	{ list-style: none; margin: 0 0 30px 0; padding: 0; overflow: hidden; }
#links li	{ float: left; width: 250px; }

/* Acknowledgements */
.bibliography dt			{ float: left; font-weight: bold; color: #cbbb9a; }
.bibliography dd.author		{ float: left; margin: 0 0 0 10px; }
.bibliography dd.publisher	{ clear: both; margin: 0 0 10px 20px; }

/* Wallpapers */
#wallpapers h3	{ margin-bottom: 10px; clear: both; }
#wallpapers	dl	{ float: left; width: 150px; min-height: 160px; margin: 0; padding: 0; }
#wallpapers .guestcontributions dl { margin-bottom: 20px; }
#wallpapers dd.author			{ font-weight: bold; }
#wallpapers dt, #wallpapers dd	{ margin: 0; text-align: center; }

/* GENERAL FULL-WIDTH PAGE OVERRIDES */
.full #page { background: none; }
.full #content { margin: auto; }
.full #container { width: auto; text-align: center; }
.full .description	{ width:600px; margin: 20px auto; }
.full h2 { margin: 0; }

/* Exhibit */
.exhibit h2	{ 
    font: normal normal normal 24px/32px Georgia, "Times New Roman", Times, serif; 
    color: #cbbb9a; 
    background: none; 
    margin: .83em 0;
    background-clip: unset;
    -webkit-background-clip: unset;
    -webkit-text-fill-color: unset;
    -webkit-text-stroke: unset;
}
.exhibit h2::before, .exhibit h2::after {
    content: unset;
    padding: unset;
}
.exhibit span.select { position: absolute; width: 215px; height: 25px; padding: 0 25px 0 10px; line-height: 22px; color: #ae9059; background:transparent url('select.jpg') no-repeat; overflow: hidden; }

/* Comic Display Page */
.comicnav		{ margin: 0 0 10px 0; }
.comicnav *	    { text-align: left; }
.comicnav div	{ display: inline-block; vertical-align: text-top; }
.comicselect    { margin-top: 5px; }

/* Exhibit Display Page */
.exhibitnav		{ margin: 0 0 10px 0; }
.exhibitnav *	{ text-align: left; }
.exhibitnav div	{ display: inline-block; vertical-align: text-top; }
.exhibitselect  { margin-top: 5px; }

.prev, .next { font: normal normal normal 28px/36px anastasia, serif; margin: 0 5px; }
.prev { width: 100px; }
.next { width: 70px; }
.prev a, .next a { color: #ae9059; text-decoration: none; }
.prev a {padding-left: 30px; background: transparent url(nav_previous_arrow.png) no-repeat left 5px center; }
.next a {padding-right: 30px; background: transparent url(nav_next_arrow.png) no-repeat right 5px center; }
.prev a:hover { color: #fff; background-position: left 0 center; }
.next a:hover { color: #fff; background-position: right 0 center; }

/* ******************** */
/* FRONT PAGE OVERRIDES */
/* ******************** */
body.home       { color: #000; }
.home a		    { color: #630; }
.home a:hover	{ color: #960; }

.home #page	 	{ width: 100%; min-width: 850px; height: 1000px; background: transparent url('frontpage_bg.jpg') no-repeat top center; }
.home #header   { background: none; }
.home #footer	{ position: absolute; top: 950px; width: 100%; }

#news				{ position: absolute; top: 170px; left: 10px; width: 420px; height: 556px; padding-right: 10px; overflow: auto; }
#news_contentwrapper{ background: #ead4a8 url('news_bg.jpg'); }
#news dd			{ margin: 0; }
#news .article		{ margin: 0 0 30px 0; padding: 0; }
#news .articletitle	{ margin: 0; font: normal normal bold 24px/24px "Times New Roman", Times, serif; border-bottom: 1px solid #000; }
#news .articledate	{ text-align: right; font-size: 10px; font-weight: bold; }

#comicpreview		{ position: absolute; top: 245px; left: 495px; font-family: Georgia, "Times New Roman", Times, serif; transform: rotate(3deg); }
#comicpreview img	{ border: 3px solid #2b170b; width: 340px; height: 235px; }
#comicpreview .caption { text-align: center; color: #fff; font-size: 16px; font-weight: bold; }

/* External Links */
#speciallinks	{ position: absolute; top: 520px; left: 545px; }
#speciallinks ul{ margin: 0; padding: 0; list-style: none; }
#speciallinks li{ position: absolute; }
#speciallinks a	{ display: block; text-indent: -9999px; width: 40px; height: 45px; overflow: hidden; }

#donate { top: 120px; left: -660px; width: 100px; height: 190px; }
#donate a { width: 100%; height: 100%; }

#devlog { top: 0; left: -70px; width: 220px; height: 300px;}
#devlog a { width: 100%; height: 100%; }

#webtoon		{ left: -615px; top: -420px; }
#webtoon a		{ width: 80px; height: 60px; }
#patreon		{ left: -605px; top: -354px; }
#youtube		{ left: -605px; top: -298px; }
#tumblr			{ left: -605px; top: -249px; }
#twitter		{ left: -605px; top: -197px; }
#facebook		{ left: -605px; top: -143px; }
#discord		{ left: -605px; top: -90px; }
#rssfeed		{ left: -605px; top: -39px; }
#wiki			{ left: -605px; top: 11px; }
#instagram		{ left: -605px; top: 61px; }

/*  scrollgeneric is used for corrective styling of elements, and should not be modified or removed */ 
.scrollgeneric {line-height: 1px;font-size: 1px;position: absolute;top: 0; left: 0;}

.vscrollerbar 		{ width: 19px; background: #d7bb85 url('scrollbar.jpg') -19px 0px repeat-y;}
.vscrollerbarbeg 	{ height: 8px !important; width: 19px;background: url('scrollbar.jpg') -57px -32px no-repeat;}
.vscrollerbarend 	{ height: 8px; width: 36px; background: url('scrollbar.jpg') -57px 0px no-repeat;}
.vscrollerbase 		{ width: 19px; background: #d7bb85 url('scrollbar.jpg') 0px 0px repeat-y;}
.vscrollerbasebeg 	{ width: 19px; height: 20px !important;background: url('scrollbar.jpg') -38px -20px no-repeat;}
.vscrollerbaseend 	{ width: 19px; height: 20px; background: url('scrollbar.jpg')  -38px 0px no-repeat;}
.hscrollerbase 		{height: 16px; background-color: white;}
.hscrollerbar 		{height: 16px; background-color: black;}
.vscrollerbar, .hscrollerbar {padding: 20px;z-index: 2;}
.scrollerjogbox 	{width: 36px;height: 16px;top: auto; left: auto;bottom: 0px; right: 0px;background: #37917A;}