@font-face {
    font-family: 'Mephisto';
    src: url('http://www.girlgeniusonline.com/mephisto.eot');
    src: url('http://www.girlgeniusonline.com/mephisto.eot') format('embedded-opentype'),
         url('http://www.girlgeniusonline.com/mephisto.woff') format('woff'),
         url('http://www.girlgeniusonline.com/mephisto.ttf') format('truetype'),
         url('http://www.girlgeniusonline.com/mephisto.svg#Mephisto?Regular') format('svg');
}
#transcriptionbox{
	clear:both;
	float:left;
	margin-left:70px;
	width:1007px;
	margin-top:30px;
	color:#fff;
}
#transcriptionbox tr{
	float:left;
	margin-right:10px;
}
#ibar{
	clear:both;
	float:left;
	margin-left:70px;
	width:1007px;
	margin-top:20px;
}
#patreon{
	position:absolute;
	background:url('patreon.png');
	width:250px;
	height:84px;
	top:217px;
	left:351px;
}

body{
	background-image:url('bg.jpg');
	font-family:Verdana, Arial, Helvetica, sans-serif;
}
a{
	color:#01356e;
	text-decoration:none;
}
#wrapper{
	margin: 0 auto;
	width:1165px;
	background-image:url('bgrepeat.png');
	min-height:600px;
	overflow:visible;
}
#header{
	position:relative;
	margin: 0 auto;
	width:1165px;
	height:249px;
	background-image:url('Header-Arkham.png');
}
#logo{
	float:left;
	display:block;
	margin-left:13px;
	margin-top:10px;
	width:385px;
	height:133px;
}
#leaderboard{
	width:728px;
	height:90px;
	float:left;
	margin-left:9px;
	margin-top:24px;
	overflow:hidden;
}
#menu{
	float:left;
	margin-left:51px;
	margin-top:55px;
}
#menu a{
	height:46px;
	float:left;
	display:block;
}

a#menucomic{
	width:120px;
	background-image:url('Latest.png');
}
a#menubooks{
	width:100px;
	background-image:url('Subscribe.png');
}
a#menushop{
	width:60px;
	background-image:url('About.png');
}
a#menublog{
	width:70px;
	background-image:url('Arkham.png');
}
a#menunewreaders{
	width:128px;
	background-image:url('Past.png');
}
a#menufunextras{
	width:110px;
	background-image:url('Free.png');
}

#comicarea{
	width:833px;
	float:left;
	margin-top:20px;
	position:relative;
}
#comicbody a{
	color:#e7c180;
}
#comictop{
	width:833px;
	height:161px;
	background-image:url('comictop.png');
}
#comicrepeat{
	width:833px;
	min-height:600px;
	background-image:url('comicrepeat.png');
}
#comicbottom{
	width:833px;
	height:171px;
	background-image:url('comicbottom.png');
	margin-top:-85px;
	z-index:40;
	position:relative;
}
#comicbody{
	color:#fff;
	width:700px;
	margin-left:66px;
	float:left;
	margin-top:-77px;
	position:relative;
	z-index:60;
}
#sidebar{
	width:270px;
	float:right;
	margin-right:30px;
	margin-top:29px;
}
#sidebartop{
	width:270px;
	height:119px;
	background-image:url('sidebartop.png');
}
#sidebarrepeat{
	width:270px;
	background-image:url('sidebarrepeat.png');
}
#sidebarbottom{
	width:270px;
	height:142px;
	background-image:url('sidebarbottom.png');
	margin-top:-50px;
}
#sidebarcontainer{
	text-align:center;
	margin-top:-50px;
	float:left;
}
#towerad{
	width:160px;
	height:600px;
	background:#ccc;
	margin-left:55px;
	
}
#donations{
	width:250px;
	text-align:center;
	margin-top:20px;
	margin-left:8px;
}
#topnav{
	width:833px;
	height:104px;
	margin-top:-210px;
	float:left;
	background-image:url('');
}
#topfirst{
	width:56px;
	height:49px;
	float:left;
	display:block;
	margin-left:178px;
	margin-top:75px;
}
#toplast{
	width:56px;
	height:49px;
	float:left;
	display:block;
	margin-left:41px;
	margin-top:75px;
}
#topprev{
	width:71px;
	height:56px;
	float:left;
	display:block;
	margin-left:39px;
	margin-top:75px;
}
#navspace{
	width:347px;
	height:56px;
	float:left;
}
#topnext{
	width:71px;
	height:56px;
	float:left;
	display:block;
	margin-left:144px;
	margin-top:75px;
}
#topbookmark{
	width:733px;
	height:26px;
	padding-top:3px;
	padding-left:100px;
	background-image:url('topbookmark.png');
	margin-top:-106px;
	float:left;
	font-size:14px;
}
#bottomnav{
	width:833px;
	height:107px;
	background-image:url('');
	float:left;
	z-index:80;
	position:relative;
}
#bottomfirst{
	width:56px;
	height:49px;
	float:left;
	margin-left:180px;
}
#bottomlast{
	width:56px;
	height:49px;
	float:left;
	display:block;
	margin-left:41px;
	margin-bottom:55px;
}
#bottomprev{
	width:71px;
	height:56px;
	float:left;
	display:block;
	margin-left:39px;
	margin-bottom:48px;
}
#bottomnext{
	width:71px;
	height:56px;
	float:left;
	display:block;
	margin-left:144px;
	margin-bottom:48px;
}
#bottombookmark{
	width:733px;
	padding-left:100px;
	padding-top:4px;
	height:26px;
	background-image:url('bottombookmark.png');
	float:left;
	z-index:80;
	position:relative;
	font-size:14px;
}
#storylines{
	float:left;
	width:380px;
	margin-top:19px;
}
#sharebuttons{
	width:350px;
	margin-top:15px;
	float:right;
}
#buyasprint{
	width:246px;
	float:left;
}
#comicdiv{
	width:1165px;
	height:335px;
	background-image:url('comicdiv.png');
	margin: 0 auto;
}
#shareinfo{
	width:1000px;
	height:40px;
	float:left;
	margin-left:73px;
	margin-top:0px;
	clear:both;
}
#bottomleader{
	width:775px;
	height:140px;
	background-image:url('bottomleader.png');
	margin-left:185px;
	float:left;
	clear:both;
}
#bottomleadercontainer{
	width:728px;
	margin: 0 auto;
	margin-top: 23px;
}
#newsarea{
	width:1165px;
	margin:0 auto;
	margin-top:-40px;
	clear:both;
}
#newstop{
	background-image:url('newstop.png');
	width:1165px;
	height:125px;
}
#newsrepeat{
	background-image:url('newsrepeat.png');
	width:1165px;
}
#newsbottom{
	background-image:url('newsbottom.png');
	width:1165px;
	height:133px;
}
#newscontent{
	width:950px;
	margin-left:100px;
	color:#fff;
	text-align:center;
	margin-top:-40px;
	font-size:12px;
	float:left;
}
#newscontent a{
	color: #e0ca79;
}
#savebookmark{
	width:150px;
	float:left;
	display:block;
	text-align:center;
}
#loadbookmark{
	width:150px;
	float:left;
	display:block;
	text-align:center;
}
#datestring{
	width:312px;
	float:left;
	text-align:center;
	display:block;
}
.floatit{
	float:left;
}
table,tbody,tr,td{
	padding:0;
	margin:0;
	border-collapse:collapse;
}
#contactbutton{
	width:110px; 
	height:60px;
	display:block;
	margin-left:520px;
	margin-top:65px;
	float:left;
}
.bookcontainer{
	width:298px;
	height:450px;
	float:left;
}
.bookframe{
	width:298px;
	height:426px;
	background-image:url('bookframe.png');
}
.bookpreview{
	width:248px;
	height:368px;
	margin-left:24px;
	margin-top:27px;
	float:left;
	position:relative;
	z-index:1;
}
.beginreading{
	background:url('beginreading.png');
	display:block;
	width:242px;
	height:64px;
	margin-left:28px;
	margin-top:-435px;
	z-index:99;
	position:relative;
}
.buythisbook{
	width:243px;
	height:54px;
	z-index:99;
	position:relative;
	display:block;
	background:url('buythisbook.png');
	margin-left:28px;
	margin-top:315px;
}
#shoppingguide{
	width:817px;
	margin-left:165px;
	padding-bottom:30px;
}
#shoppingguidetop{
	width:817px;
	height:147px;
	background:url('shoppingguide.png');
}
#shoppingguidecontainer{
	width:817px;
	height:150px;
	background:url('shoppingguiderepeat.png');
	color:#fff;
}
#shoppingguidecontent{
	font-family:'Mephisto';
	font-size:34px;
	text-align:center;
	padding:30px;
	width:757px;
	margin-top:-30px;
	float:left;
}
#shoppingguidebottom{
	width:817px;
	height:116px;
	background:url('shoppingguidebottom.png');
}
#shoparea{
	width:890px;
	margin-left:130px;
	padding-bottom:50px;
}
#regarea{
	width: 823px;
	margin-left:162px;
	padding-bottom:40px;
}
#regtop{
	width:823px;
	padding-top:60px;
	height:67px;
	background:url('regtop.png');
	font-family:'Mephisto';
	font-size:34px;
	color:#e7c180;
	text-align:center;
}
#regrepeat{
	width:683px;
	padding:0px 70px;
	background:url('regrepeat.png');
	font-size:16px;
	color:#fff;
	float:left;
}
#regrepeat a{
	color: #E0CA79;
}
#regbottom{
	width:823px;
	background:url('regbottom.png');
	height:118px;
	clear:both;
}
#newreadersboxes{
	overflow:visible;
	width:873px;
	margin-left:-95px;
}
.funextrastop{
	width:622px;
	height:141px;
	margin-top:-100px;
	margin-left:100px;
	float:left;
}
.funextrasleft{
	float:left;
	width:307px;
	margin-left:8px;
}
.funextrasright{
	float:left;
	width:307px;
	margin-left:50px;
}
#sociallinks{
	width:160px;
	margin-left:55px;
	margin-top:10px;
	font-family:'Mephisto';
	font-size:20px;
	color:#fff;
	text-align:center;
}
#hw-privacy{
	text-align:center;
	padding:20px;
}
#hw-privacy a{
	color:#fff;
}

/* Mobile and tablet support */

@media screen and (max-width: 1100px) {

    /* Keep the background */
    body {
        background-image: url('bg.jpg');
    }

    /* Make the wrapper fluid */
    #wrapper {
        width: 100%;
        min-height: auto;
        background-image: none;
    }

    /* Hide decorative header */
   
    #logo,
    #leaderboard,
    #patreon,
    #comicdiv,
    #newsarea,
    #bottomleader,
    #sidebar,
    #sidebartop,
    #sidebarrepeat,
    #sidebarbottom,
    #sidebarcontainer,
    #towerad,
    #donations,
	#regbottom,
	#regrepeat,
    #sociallinks,
	#topbookmark,
	#bottombookmark {
        display: none;
		background-image: none;
    }

    /* Hide comic frame graphics */
    #comictop,
    #comicbottom {
        display: none;
		background-image: none;
    }

    /* Remove frame backgrounds */
    #comicrepeat {
        background-image: none;
        width: 100%;
        min-height: auto;
    }

    /* Keep navigation visible */
    #topnav {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Make content fill screen */
    #comicarea {
        width: 100%;
        float: none;
        margin: 0;
    }

    #comicbody {
        width: 100%;
        margin: 0;
        padding: 0;
        float: none;
    }
	
	 #topbookmark,
    #bottombookmark {
        display: none;
        visibility: hidden;
        height: 0;
        width: 0;
        overflow: hidden;
        background: none;
        padding: 0;
        margin: 0;
    }
	/* Keep menu visible on phones */



/* Make menu wrap nicely */


#logo,
#leaderboard
{
    display:none;
	background-image: none; 
}
	
	
	  /* Hide decorative header */
   
    #logo,
    #leaderboard,
    #comicdiv,
    #newsarea,
    #bottomleader,
    #sidebar,
    #sidebartop,
    #sidebarrepeat,
    #sidebarbottom,
    #sidebarcontainer,
    #towerad,
    #donations,
	#regbottom,
	#regrepeat,
    #sociallinks,
	#topbookmark,
	#bottombookmark {
		
        display: none;
		background-image: none;
    }

    /* Hide comic frame graphics */
    #comictop,
    #comicbottom {
        display: none;
		background-image: none;
    }

    /* Remove frame backgrounds */
    #comicrepeat {
        background-image: none;
        width: 100%;
        min-height: auto;
    }

    /* Keep navigation visible */
    #topnav {
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Make content fill screen */
    #comicarea {
        width: 100%;
        float: none;
        margin: 0;
    }

    #comicbody {
        width: 100%;
        margin: 0;
        padding: 0;
        float: none;
    }
	
	

/* Keep button graphics */


	
	 
    #menu{
        display:flex;
        flex-wrap:wrap;
        justify-content:center;
        width:100%;
        margin:10px auto;
        padding:0;
        overflow:visible;
		float:none;
		text-align:center;
		
    }


 #menu a{
        background-image:none;
        color:white;
        font-size:18px;
        font-weight:bold;
        text-decoration:none;
        display:inline-block;
        padding:5px 15px;
        margin:4px;
        width:auto;
	    height:46px;
		float:none;
    background-repeat:no-repeat;
        
    }
	
  #header{
        display:block;
        width:100%;
        height:auto;
        background:none;
        overflow:visible;
    }
	
	

a#menucomic{
    width:120px;
    background-image:url('Latest2.png');
}

a#menubooks{
    width:100px;
    background-image:url('Subscribe2.png');
}

a#menushop{
    width:60px;
    background-image:url('About2.png');
}

a#menunewreaders{
    width:150px;
    background-image:url('Past2.png');
}

a#menufunextras{
    width:110px;
    background-image:url('Free2.png');
}


   #topnav {
        width: 100%;
        height: auto;
        min-height: 10px;
        margin: 0;
        float: none;
    }


#newstop{
	background-image: none;
	width:100%;
	
}
#newsrepeat{
	background-image: none;
	width:100%;
}
#newsbottom{
	background-image: none;
	width:100%;
	
}
#newscontent{
	display:none;
}

#patreon{
	position:absolute;
	background:url('patreon.png');
	width:250px;
	height:84px;
	top:217px;
	left:351px;
}



    /* Make iframe phone-friendly */
    iframe {
        width: 100%;
        max-width: 100%;
        min-height: 90vh;
        border: 2px solid #000;
    }

    /* Remove fixed widths */
    table,
    img {
        max-width: 100%;
        height: auto;
    }


}
/* Hide the logo image on desktop */
#after {
    display: none;
}

/* Show the logo only on tablets and phones */
@media screen and (max-width: 1100px) {
    #after {
        display: block;
        width: 80%;
        margin: 20px auto;
        padding: 0;
        text-align: center;
        clear: both;
    }

    #after img {
        display: block;
        width: 50%;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
}
@media screen and (max-width: 1100px) {

    html,
    body {
        margin: 0;
        padding: 0;
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    body {
        background-image: url('bg.jpg');
        background-repeat: repeat;
        background-position: top center;
        background-size: auto;
    }

    #header,
    #wrapper,
    #comicarea,
    #comicrepeat,
    #comicbody {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

 

}
/* Hide image on desktop */
#mobile-only-image {
    display: none;
}

/* Show image on phones and smaller screens */
@media screen and (max-width: 1100px) {

    #mobile-only-image {
        display: block;
        width: 70%;
        text-align: center;
        margin: 0px auto 15px;
        padding: 0;
        box-sizing: border-box;
    }

    #mobile-only-image img {
        display: block;
        width: 80%;
        max-width: 400px;
        height: auto;
        margin: 0 auto;
    }
}