/* CSS Document */


/* Mobile Layout: 480px and below. 
------------------------------------------------------------------------------------------------------------------------------------------*/
  
/*GLOBALS (mobile)
-----------------------------------------*/  
.gridContainer {
	margin-left: auto;
	margin-right: auto;
	width: 91.9021%;
	padding-left: 1.5489%;
	padding-right: 1.5489%;
	clear: none;
	float: none;
}

.masthead {
	margin-top:10px;
	width:100%;	
	display:block;
	height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-top:26%;
	background-position:center top;
    background-size: 100%;
    background-repeat: no-repeat;
	border: 3px solid white;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
	position:relative;
}

.editionsMasthead {
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/bg-editions-retina.jpg);
}

.valentinesMasthead {
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/bg-about-retina.jpg);
}

.starWarsMasthead {
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/bg-starwars-retina.jpg);
}

.superheroMasthead {
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/bg-superhero-retina.jpg);
}

.halloweenMasthead {
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/banner-halloween.jpg);
}

.christmasMasthead {
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/banner-christmas.jpg);
}

.aboutMasthead {
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/bg-new-about.jpg);
}

.contactMasthead {
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/bg-contact-retina.jpg);
}

.shopMasthead {
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/banner-shop.jpg);
}



.masthead h1 {
	position:absolute;
	bottom:10px;
	left:30px;	
}

.superheroMasthead h1, .halloweenMasthead h1 {
	color:white;
}

h2 {
	line-height: none;
	padding-bottom:0px;
	
}

.bigButton {
	border-bottom:none;
	text-align:center;
	font-family: 'Alegreya Sans', sans-serif;
	color:white;
	font-size:18px;
	line-height:40px;
	border-radius:5px;
	display:block;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px #888;
	box-shadow: 0 0 5px #888;
}

.boxBackgroundStyle {
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/bg06b.jpg);
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
}


/*HEADER (mobile)
-----------------------------------------*/

.pageHeader {
    height: auto;
	margin-top: 0px;
	text-align: center;
}

.logo {
	display:block;
	width: 73.6842%;
    margin-bottom: 0px;
}

.logo a:hover {
	border-bottom:none;
}

.logo img{
	margin-top:8px;
}

/*NAV (mobile)
-----------------------------------------*/
.mainNav {
	width: 100%;
	margin-bottom:20px;
}

.mainNav ul {
	/*float:left;*/
	/*display: block;*/
	width: 100%;
	margin: 0;
	padding: 0;
}

.mainNav ul li {
	width: 25%;
	margin: 0;
	padding: 0;
	text-align: center;
	float: left;
}
.mainNav ul li a {
	display: block;
	color: black;
	line-height: 35px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-bottom: none;
	font-size: 13px;
	border:black solid 1px;
	border-radius:5px;
	margin-right: 5px;
	background-color:rgba(0,0,0,0.3);
}

.mainNav ul li:last-child a {
	margin-right: 0;
}

/*COMIC NAV (mobile)
-----------------------------------------*/
.comicNav {
	height: auto;
	margin-top:10px;
	width: 100%;
	clear: both;
	margin-left: 0;
}
.comicNav ul {
	/*float:left;*/
	display: block;
	width: 100%;
	margin: 0;
	padding: 0
}
.comicNav ul li {
	width: 25%;
	margin: 0;
	padding: 0;
	text-align: center;
	float: left;
}
.comicNav ul li a {
	display: block;
	color: black;
	line-height: 35px;
	padding-top: 5px;
	padding-bottom: 5px;
    text-transform: uppercase;
	border-bottom: none;
	font-size: 10px;
    font-weight: 600;
	border: 1px solid black;
	border-radius:5px;
	margin-right: 5px;
	background-color: rgba(255,255,255,.3);
}
.comicNav ul li:last-child a {
	margin-right: 0;
}

a.first:before {
	content: "<<";
	font-family: 'Modern Pictograms', sans-serif;
	font-size: 1.5em;
	position: relative;
	right: .2em;
}
a.previous:before {
	content: "<";
	font-family: 'Modern Pictograms', sans-serif;
	font-size: 1.5em;
	position: relative;
	right: .2em;
}
a.next:after {
	content: ">";
	font-family: 'Modern Pictograms', sans-serif;
	font-size: 1.5em;
	position: relative;
	left: .2em;
}
a.last:after {
	content: ">>";
	font-family: 'Modern Pictograms', sans-serif;
	font-size: 1.5em;
	position: relative;
	left: .2em;
}

/*COMIC (mobile)
-----------------------------------------*/

.comicPanel {
	background-repeat: no-repeat;
	background-position:center;
	background-size: auto 100%;
	height: auto;
}


.comicTitleContainer {
	width: 100%;
	margin-top: 5px;
	text-align:center;
	/*background-color:rgba(0,0,0,0.20);*/
	/*height:40px;*/
	height:auto;
}

.comicTitleContainer p {
	font-family: 'Alegreya Sans', cursive;
	margin:0;
}

.comicTitleContainer .comicTitleStyle {
	font-size:18px;
	margin-bottom:0px;
}

.comicTitleContainer .comicDateStyle {
	font-size:12px;
	margin-top:0px;
}

a.buyThis {
	width: 100%;
	color:white;
	clear: both;
	margin-left: 0;
	margin-top:10px;
	background-color:#db1075;
}

a.buyThis:hover {
	border-bottom:none;
}


a.shareThis {
	margin-top:10px;
	width:100%;
	clear: both;
	background-color:#db1075;
	height:40px;
	text-align:center;
	line-height:40px;
	border-radius:5px;
    text-transform: uppercase;
	text-decoration:none;
	border-bottom:none;
}

a.shareThis:hover {
	color:white;
}


/*MAIN SECTION  (mobile)
-----------------------------------------*/

.main {
	width:100%;
	margin-top:10px;	
	padding: 10px;
}

.news {
	width: 100%;
	/*background-color: rgba(255,255,255,0.6);*/
	/*background-color:white;*/
	height: auto;
	/*-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;*/
}

.news h1 {
	line-height:44px;
	font-size:44px;
    font-weight: normal;
	padding-bottom:0px;
	margin-bottom:5px;
    text-transform: uppercase;
    margin-top: 10px;
}

.news h3, h4, h5 {
    font-family: 'Alegreya Sans', sans-serif;
	margin-left: 0px;
}
.news h3 {
	margin-top:5px;
	margin-bottom:5px;
	font-size: 24px;
	color: black;
	font-weight:500;
	text-transform: uppercase;
	border-bottom:dashed 1px black;
    padding-bottom: 0px;
    padding-top: 10px;
}
.news h4 {		
	font-size:22px;
	font-weight: 300;
	font-style: italic;
	margin-top:10px;
	margin-bottom:0px;    
}



.news h5 {
	font-size: 18px; 
	font-weight: 500;
	margin-bottom: 0px;
	margin-top: 5px;
}

.news p {
    margin: 0;
    margin-top: 0px;
	font-size: 16px;
	color: black;
	margin-bottom: 5px;
}

.news p.photo-credit {
	font-size: 10px;
	font-style: italic;
	color: #646464;
	margin-bottom: 10px;
}

.news img {
	border: 5px solid white;
	background-color: white;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
	margin-bottom:10px;
}

.date {
	font-family: 'Alegreya Sans', sans-serif;
	color:#646464;
	font-size:14px;
    margin-bottom: 10px;
}

.title {
	font-family: 'Chelsea Market', cursive;
    font-weight: normal;
	font-size:26px;
    line-height: 30px;
}

.news .quote p {
	font-size:40px;
}

.news .subtitle p{
	font-size:48px;
}

.news ul {
	list-style:circle;
	margin-left:20px;
	padding-left:10px;
}

.news ul li {
	font-family: 'Alegreya Sans', sans-serif;
	font-weight:bold;
}



/*ASIDE   (mobile)
------------------------------------------------------------------------------*/

.pageAside {
	width: 100%;
	clear: both;
	margin-left: 0;
	height: auto;
	margin-top: 10px;
	padding:0;
}

.pageAside h3 {
    margin-top: 5px;
}


/*SOCIAL MEDIA  (mobile)
-----------------------------------------*/
.social {
	margin-bottom:10px;
	padding:10px;
}



.social ul {
	width:100%;
	margin-bottom:30px;
	padding:0;
	margin:0;
}

/* SOCIAL ICON SIZING */
.social ul li {
	/* width: 25% ORIG */ 
	width:16.666%;
	text-align:center;
	float:left;
	margin:0px;
	padding:3px;
}

.social ul li a{
	width:100%;
	height:auto;
	display:block;
	background-color:#db1075;
	padding:6px;
	border-radius:10px;
}


.social ul li img {
	padding:0;
	margin:0;
}

.social ul li a:hover {
	border-bottom:none;
}

/*NEWSLETTER SIGNUP  (mobile)
-----------------------------------------*/

.signUpForm {
	padding:10px;
	margin-bottom:10px;
}

#mc_embed_signup form{
	padding:0;
}

#mc_embed_signup {
	font-family: 'Alegreya Sans', sans-serif;
}

#mc_embed_signup input.email{
	margin-left:0px;
	width:100%;
	background-color:hsla(0,0%,81%,1.00);
	border:1px #db1075 solid;
	line-height:30px;
	padding:5px;
	font-family: 'Alegreya Sans', sans-serif;	
}

#mc_embed_signup input.button {
font-family: 'Alegreya Sans', sans-serif;
	text-transform:uppercase;
	background-color:#db1075;
	color:white;
	margin-top:10px;
	width:100%;
	height:40px;
	line-height:40px;
	font-size:18px;
    font-weight: normal;
}


/*FOOTER  (mobile)
-----------------------------------------*/

.pageFooter {
	background-color: rgba(11,174,203,1.00);
	min-height: 100px;
	margin-top: 10px;
	padding: 10px;
	text-align: center;
}



/*EDITIONS page  (mobile)
-------------------------------------------------------------------------------------------------------------------------*/

.editionsContent h1 {
	margin-top:0px;
	font-size:44px;
	line-height:44px;
}
.editionsContent h2 {
	margin-left:0px;
	font-size:20px;
}

.editionsContent p {
	font-size:16px;
}

.editionsContent a.imageButton {
	display:block;
	width:100%;
	height: 0;
    padding: 0; /* remove any pre-existing padding, just in case */
    padding-bottom: 39.04%;
    /*background-position: center center;*/
	background-position:center top;
    background-size: 100%;
    background-repeat: no-repeat;
	/*border: 3px solid #82AF00;*/
	border-radius:5px;
	background-color: white;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
}

.editionsContent a.imageButton:hover {
	border:none;
}

.editionsContent a.imageButton span {
	display:none;
}

.editionsContent a.valentinesButton {
	background-image:url(/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-valentines-color.jpg);
}

.editionsContent a.retroGamesButton {
	background-image: url(/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-retro-color.jpg);
}

.editionsContent a.starWarsButton {
	background-image: url(/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-starwars-color.jpg);
}

.editionsContent a.superheroButton {
	background-image: url(/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-superhero-color.jpg);
}

.editionsContent a.halloweenButton {
	background-image: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-halloween-color.jpg");
}

.editionsContent a.christmasButton {
	background-image: url("/National_Library/oe_/https://dearinnerdemons.com/_images/btn-editions-christmas-color.jpg");
}

.editionsContent img{
	border: 5px solid white;
	background-color: white;
	-moz-box-shadow: 0 0 5px #888;
	-webkit-box-shadow: 0 0 5px#888;
	box-shadow: 0 0 5px #888;
	margin-top:10px;
	margin-bottom:0px;
}

.editionsContent ul li {
	border-top:dashed 1px black;
	padding:30px 0px 30px 0px;
}

.editionsContent h3 {
	text-transform:uppercase;
}

.editionsContent h4 {
	font-size:12px;
}


/* VALENTINES edition page (tablet)
------------------------------------------------------------------------*/
h1.stacked {
	font-size:38px;
	line-height:38px;
}


/*ABOUT page  (mobile)
-------------------------------------------------------------------------------------------------------------------------*/

.aboutPageContent h2 {
	margin:0;
	padding:0;
	border-top:1px dashed black;
	padding-top:20px;
	margin-top:30px;
	font-size:20px;
}

.aboutPageContent p {
	margin-top:0;
}

.aboutPageContent h2:first-of-type {
	border-top:none;
	padding-top:0px;
	margin-top:0px;
}


/*CONTACT page  (mobile)
-------------------------------------------------------------------------------------------------------------------------*/

.contactPageContent h2 {
	font-size:20px;
}

.contactPageContent a.emailButton {
	font-size:12px;
	color:white;
	background-color:#db1075;
	margin-bottom:40px;
}

.contactPageContent a.emailButton:hover {
	border:none;
}


/* FORM -------*/
	form label .bold{
		font-weight:bold;
	}

    .form-label{
        width:150px !important;
    }
    .form-label-left{
        width:150px !important;
    }
    .form-line{
        padding-top:12px;
        padding-bottom:12px;
    }
    .form-label-right{
        width:150px !important;
    }
    .form-all{
        /*width:480px;*/
		width:100%;
        color:#555 !important;
        font-family:'Lucida Grande';
        font-size:14px;
    }
    .form-radio-item label, .form-checkbox-item label, .form-grading-label, .form-header{
        color:#555;
    }
	
	.form-submit-button {
		text-transform:uppercase; 
		margin-bottom:20px;
		width:100%;
		border:none;
		background-color:#db1075;
	}

.form-textbox, .form-textarea {
	width:100%;
	background-color:hsla(0,0%,81%,1.00);
	border:1px #db1075 solid;
	line-height:30px;
	padding:5px;
	font-family: 'Alegreya Sans', sans-serif;	
}

.boldBig {
	font-size:18px;
	font-weight:bold;
}

.form-required {
	font-size:20px;
	color:red;
}

.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

/* STORE PAGE 
------------------------------------------*/

a.store-btn {
	width: 100%;
	color:black;
	clear: both;
	margin-left: 0;
	margin-top:5px;
	background-color:transparent;
    border: 2px solid #db1075;
}

a.store-btn:hover {
    background-color: #db1075;
    color: white;
}

.storeButtonsWrapper {
    width: 100%;
    padding: 5px 10px 10px 10px;
    height: auto;
    margin-top: 10px;
}

.bitch-left {
    width: 49%;
    float:left;
}

.bitch-right {
    width: 49%;
    float: right;
}

.storeCartWrapper {
    width: 100%;
    padding: 10px;
    height: auto;
    margin-top: 10px;
}