@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand+SC&display=swap');

:root {
	--accent-dark: #000000;
	--accent-light: #ba2321;
	--accent-mid: #93211f;
	--font-fancy: 'Patrick Hand SC', cursive;
}

html{
	width:100%;
	min-width:1162px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
body{
	margin:0;
	padding:0;
	background:#ae9c9c;
	width:100%;
}
a{
	color:var(--accent-mid);
	text-decoration:none;
}
a:hover { color: var(--accent-light); }
#overflowwrap{
	overflow-x:hidden;
	width:100%;
}
#wrapper{
	width:1162px;
	margin: 0 auto;
}
#header{
	width:1550px;
	margin-left:-192px;
	height:521px;
	display:block;
	position:relative;
	background:url('images/header.png');
}
#mainarea{
	width:1162px;
	background:#000;
	margin: 0 auto;
	min-height:200px;
}
#top-space{
	width:728px;
	height:90px;
	position:absolute;
	top:30px;
	left:420px;
	background:#000;
}
#logo{
	position:absolute;
	width:755px;
	height:120px;
	top:130px;
	left:400px;
	background: url(images/logo.png) no-repeat;
}
#topmenu{
	width:860px;
	height:40px;
	left:350px;
	top:250px;
	position:absolute;
	font-family: var(--font-fancy);
	font-size: 36px;
	display: flex;
	justify-content: center; 
}
#topmenu a{
	margin: 0 15px;
	color: #000;
}
#topmenu a:hover { text-shadow: 0 0 5px red; }

#topmenu div.dropdown { display: inline-block; }
#topmenu div.dropdown .dropdown-content { display: none; background: var(--accent-mid); position: absolute; z-index: 500; padding: 5px; }
#topmenu div.dropdown:hover .dropdown-content { display: block; height: auto; }
#topmenu div.dropdown .dropdown-content a { display: block; }

#belowmenu { 
	width:900px;
	left:350px;
	top:330px;
	position:absolute;
	display: flex;
	justify-content: space-between; 
}
#bigpatreon{
	width:260px;
	height:65px;
	background: url(images/patreon.png) no-repeat;
}
#kofi{
	width:260px;
	background: url(images/kofi.png) no-repeat;
}
#socialbuttons{
	height:60px;
}
#socialbuttons a{
	width:61px;
	float:left;
	display:block;
	height:60px;
}
#socialbuttons a#twitter { background: url(images/x.png) no-repeat; }
#socialbuttons a#da { background: url(images/deviantart.png) no-repeat; }
#socialbuttons a#fa { background: url(images/furaffinity.png) no-repeat; }
#socialbuttons a#tumblr { background: url(images/tumblr.png) no-repeat; }
#socialbuttons a#rss { background: url(images/rss.png) no-repeat; }

#hiveworks{
	display:block;
	width:250px;
	height:100px;
	background: url(images/hiveworks.png);
	margin: 1em auto;
}
#contentfloat{
	width:1135px;
	margin-left:13px;
	margin-top:-95px;
	float:left;
	position:relative;
	z-index:20;
}
#contentleft{
	width:940px;
	float:left;
}
#contentright{
	width:195px;
	float:right;
}
#comicarea{
	min-height:815px;
	padding:20px;
	background:#fff;
}
.cc-nav{
	width:880px;
	margin: 0 auto;
	height:89px;
}
.cc-nav a{
	height:89px;
	width:118px;
	float:left;
}
.cc-first{
	background:url('images/first.png');
}
.cc-prev{
	background:url('images/prev.png');
}
.cc-next{
	margin-left:408px;
	background:url('images/next.png');
}
.cc-last{
	background:url('images/last.png');
}
#tower, #middle-space{
	width:160px;
	height:600px;
	background:#000;
	margin: 0 auto;
}
#menu{
	width:195px;
	margin-top:10px;
	font-family: var(--font-fancy);
	font-size: 36px;
}
#menu a{
	width:195px;
	height:45px;
	display:block;
	background: var(--accent-mid);
	color: #000;
	margin: 5px 7px;
	text-align: center;
}
#menu a:hover { text-shadow: 0 0 5px red; }

#hw-jumpbar{
	position:relative;
	z-index:50;
	margin-top:20px;
	background: var(--accent-mid);
}
.hw-jump-title { background: var(--accent-mid); }
#bottomcomments{
	width:1060px;
	margin: 0 auto;
	margin-top:20px;
}


#commentsleft, #pagecontent{
	float:left;
	width:700px;
	padding:20px;
	background:#fff;
	margin: 0 0 1em;
}
#commentsright{
	width:300px;
	float:right;
}
#boxad, #bottom-space{
	width:300px;
	min-height:250px;
	background:#000;
}
#cc-comicbody{
	text-align:center;
}
#incentives{
	width:180px;
	margin: 0 auto;
	margin-top:10px;
	text-align:center;
}

.cc-newsbody, .cc-newsbody p {margin: 0; padding: 0; }
.cc-tagline { font-size: 0.8em;}
.cc-blog-publishtime {
    padding-bottom: 5px;
    font-size: 0.8em;
    padding-top: 10px; }
article.cc-blogpost { margin-bottom: 1em; border-bottom: 2px solid #000; }
#moreblog { text-align: center; }

#bottommenu { margin: 1em auto; text-align: center; }
#bottommenu a { font-family: var(--font-fancy); font-size: 24px; margin: 0 10px; text-transform: uppercase; }

h2#translations { font-family: var(--font-fancy); background: var(--accent-mid); width: 100%; text-align: center; font-size: 36px; margin-bottom: 16px; }
h3.translation { font-family: var(--font-fancy); color: #fff; margin: 0; font-size: 24px; }
ul.translation-list { color: #fff; list-style-type: disclosure-closed; }
ul.translation-list a { color: #fff; }
ul.translation-list a:hover { text-decoration: underline; }