/*
 Theme Name:     Comicpress Child
 Theme URI:      http://npccomic.com/comicpress-child/
 Description:    Comicpress Child Theme
 Author:         Mary Varn 
 Author URI:     http://maryvarn.com
 Template:       comicpress
 Version:        1.0.0
*/

@import url("../comicpress/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */


html, body {
  overflow-x: hidden;
}
 
#page {
width: 100% !important;
max-width: 100% !important;
  display: table;
  table-layout: fixed;
}
#page-wrap {
padding-top:0px;
}

body {
color: #000; 
background: #ffffff;
font-family: 'Merriweather', serif;
font-size: 16px;
}

a:link {color: #333333;}
a:visited {color: #333333;}
a:hover {text-decoration: underline;}

p a:link {color: #326dc0;}
p a:visited {color: #326dc0;}
p a:hover {text-decoration: underline;}

h2.page-title{
padding-bottom:5px;
line-height:32px;
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-style: italic;
letter-spacing: 0px;
text-transform: uppercase;
}

.sidebar .widget {
margin-bottom: 0px;
}

h2, h2 a{
font-family: 'Exo 2', sans-serif;
font-size: 34px;
letter-spacing: 0px;
line-height: 34px;
}

h3, h3 a {
letter-spacing: 0px;
}

span.posted-on{display:none;}

/*HEADER*/
div#header{
/*background-image:url('images/header_bg.png');*/
background-repeat: no-repeat;
background-color: #000;
text-align: center;
/*make header full width - not sure if this does anything*/
position: relative;
overflow-x: hidden;
}

/*style display text widgets in the header horizontally*/
#header .widget.widget_text, #header .widget{
display: inline-block;
vertical-align: text-top;
padding-top:10px;
}

.header-info {
display:none;
}

#sidebar-header {
float:none !important;
margin: 0 -3000px;
padding: 0 3000px;
}

#header-logo{
padding-right:20px;
}

#header-middle{
padding-right:25px;
}

#header-ad{
padding-left:65px;
}
#header-pp{
padding-left:65px;
}
/*MENU*/
div#comicpress_menubar_widget-3.widget.comicpress_menubar_widget{
margin:0px;
font-size:24px;
font-family: 'Exo 2', sans-serif;
}

div#menubar-wrapper{
background-color: #333;
font-color: #fff;
letter-spacing: 2px;
}

/*center menu on page and within itself*/
.menu-container { display: table; margin: 0 auto; padding: 15px 0;}

/*TOP MENU*/
#top-menu{
text-align: center;
background: #333;
font-family: 'Exo 2', sans-serif;
font-size:24px;
letter-spacing: 2px;
text-transform: uppercase;
color: #ffffff;
padding: 15px 0 15px 0;
}
#top-menu li, #top-menu a{
color: #ffffff;
display: inline;
margin:10px;
}
#top-menu a:hover {
color: #fff;
background-color: #555;
}
/*COMICS MENU*/
#comics-menu{
text-align: center;
background: #333;
font-family: 'Exo 2', sans-serif;
font-size:16px;
letter-spacing: 1px;
text-transform: uppercase;
color: #888;
padding: 15px 0 15px 0;
border-top: 1px solid #fff;
}
#comics-menu li, #comics-menu a{
color: #cccccc;
display: inline;
margin-top:10px;
}
#comics-menu a:hover {
color: #fff;
background-color: #555;
}

/*Promos*/
div#promos li,  a{
margin: 0px;
display: inline;
}
div#text-banner{
text-align: center;
background: #fff;
padding: 5px;
color: #333;
font-family: 'Exo 2', sans-serif;
font-size: 24px;
font-weight: 700;
}
/*GET RID OF BORDER, CENTER CONTENT*/
#content-wrapper {border: 0px; padding: 0px; }

/*UNDER COMIC*/
#under-comic { 
text-align: center;

font-family: 'Exo 2', sans-serif;
font-size:16px;
letter-spacing: 1px;
text-transform: uppercase;
color: #fed030;
padding: 0 0 10px 0;

}

#under-comic li, #under-comic a{
text-decoration: underline;
color: #fed030;
display: inline;
margin-top:10px;
}
#under-comic a:hover {
color: #fed030;
background-color: #555;
}
/*COMIC*/
#comic-wrap {  
background-color: #eeeeee;
padding:0px;
}

/*
.comic-table {
width: 1000px ;
display: table;
margin: 0 auto;
}
*/
/*eliminate space under comic*/
#comic img {
margin:0 0 -5px 0 !important;
}
/*UNDER COMIC*/
#sidebar-under-comic {
overflow: hidden;
margin: 0 auto;

}

#sidebar-under-comic .widget{
margin: 0 auto;
}

.comic_navi_wrapper {
background: #333;
padding: 10px 0;
}

/*this puts the like button, comic nav, comic title in a line. have to add them in widgets.
#a2a_share_save_widget-3{
text-align: center;
width: auto !important;
display:inline-block;
margin-right: 20px;
padding-top: 10px;
}

.comic_navi_wrapper{
text-align: center;
width: auto !important;
display:inline-block;

}

.comic_navi_title{
padding-top: 10px;
}
*/


/*thumbnail widget*/

.comic-thumb-wrap {
padding:10px 0px 10px 0px; 
display: inline-block;
vertical-align: text-top;
}

.comic-thumb-title{
width:180px;
}


/*over blog text widget*/
div#text-370904839.widget.widget_text{ 
margin: 0px;
color: #000;
}

/*RESPONSIVE VIDEO EMBEDS*/
.video-container {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
}

.video-container iframe,  
.video-container object,  
.video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.entry-content img, 
.entry-content iframe, 
.entry-content object, 
.entry-content embed {
        max-width: 100%;
}

/*BLOG*/
#subcontent-wrapper{
padding:15px 0px 15px 0px;
width: 1000px; display: table; margin: 0 auto;
}

div#content-column, #content.narrowcolumn {
width: 685px !important; 
margin: 0px; padding: 0px; 
border: solid 0px;
}

body.wide #content.narrowcolumn{
	width: auto !important;
	float: none !important;
}

h2.post-title {
padding: 0 0 5px 0;
line-height:32px;
font-family: 'Exo 2', sans-serif;
font-weight: 700;
font-style: italic;
letter-spacing: 0px;
text-transform: uppercase;
}

.post-info{
padding:0;
}

.post-text {
border-top: 1px solid #555;

padding: 5px 0;
color:#555555;
}

span.post-date{
float: left;
margin-right:10px;
}

div.comic-chapter{
float: left;
margin-right:10px;
}

div.comic-characters{
float: left;
margin-right:10px;
}

div.addtoany_share_save_container {

}
div.entry div.addtoany_share_save_container {
margin: 5px 0 0 0;
}
.entry {
	line-height: 26px;
	padding: 0;
}
/*
.uentry{
border: solid 0px;
}
*/
.transcript-border {
border: none !important;
margin: 0 !important;
}
#transcript {
border:none !important;
padding: 0 0 0 10 !important;
}
a.transcript-title {
border:none !important;
padding: 0 !important;
font-family: 'Merriweather', serif !important;
font-weight: 300 !important;
font-size: 12px !important;
text-transform: none !important; 
letter-spacing: 0px !important; 
margin: 0 !important;
}

.post-tags {
display: none;
}
.comment-link {
text-align: left;
padding: 0 0 0 10;
font-family: 'Merriweather', serif !important;
font-size: 12px !important;
font-weight: 300 !important;
}
#comment-wrapper {
padding:0;
}
.commentsrsslink {
display:none;
}

span.embed-youtube{
max-width: 100%;
}

#submit, .searchform button, #comic button, .comicpress_control_panel_widget .button-primary  {
background: #fff !important;
}

#submit, .searchform button, #comic button, .comicpress_control_panel_widget .button-primary  a hover{
color: #333 !important;
}

div.entry hr{
height:1px;
border: 0px;
border-style: solid;
border-width: 0px;
background-color: #555;
}

/*SIDEBAR RIGHT*/
body.layout-2clw #sidebar-left, body.layout-2crw  #sidebar-right {float: right; width: 300px !important; padding:0px 0px 0px 0px; margin: 0px;}
.sidebar {margin: 0px;}   

#patreon-promo{
background: url("images/sidebar_patreon_bg.png") no-repeat;
width: 300px;
height: 137px;
margin-bottom: 15px;
}

#patreon-promo h2{
padding: 15px 0 0 15px;
font-style: italic;
line-height: 24px;
}

#patreon-promo p{
padding:10px 15px 0 15px;
font-size: 16px;
line-height: 26px;
}

#facebook-promo{
background: url("images/sidebar_facebook_bg.png") no-repeat;
width: 300px;
height: 137px;
margin-bottom: 15px;
}

#facebook-promo h2{
padding: 15px 0 0 15px;
font-style: italic;
line-height: 24px;
}

#facebook-promo p{
padding:10px 15px 0 15px;
font-size: 16px;
line-height: 26px;
}

#amazon-promo{
background-color: #eeeeee;
width: 300px;
height: 137px;
margin-bottom: 15px;
}

#amazon-promo h2{
padding: 15px 0 0 15px;
font-style: italic;
line-height: 24px;
}

#amazon-promo p{
padding:10px 15px 0 15px;
font-size: 16px;
line-height: 26px;
}
#sidebar-pw{
margin: 0 0 0 138px;
}

/*Blog NAV*/
div#wp-paginav{
background: #fff; 
}

div.blognav {
display: none;
width: 825px;
background: white;
}

.pagejumper-wrap {
display: none;
}

/*UNDER BLOG*/
div#wp-paginav {
background-color: #eeeeee;
}
#pagenav {
background-color: #eeeeee;
}
/*FOOTER*/
#footer{
background-repeat: no-repeat;
background-color: #000;
text-align: center;
/*make footer full width - not sure if this does anything*/
position: relative;
overflow-x: hidden;
}

#footer .widget.widget_text, #sidebar-footer .widget{
display: inline-block;
vertical-align: text-top;
padding:0;
}

#footer-sidebar-wrapper {
display: block;
}

#sidebar-footer {
float:none !important;
text-align: center;
display: block;
width: auto;
padding: 0px;
}
div#footer-pp{
margin: 48px 24px 48px 0px;
width: 300px;
}

div#footer2-pw{
margin: 48px 24px 48px 24px;
width: 300px;
}
div#footer-links{
margin: 48px 0px 48px 24px;
width: 300px;
height: 250px;
background-color: #eeeeee;
}
div#footer-links li{
text-align: center;
padding: 5px;
margin: 0;
border-top: 1px solid #888888;
}
p.copyright-info a:link {color: #333333;}
p.copyright-info a:visited {color: #333333;}
p.copyright-info a:hover {color: #821542;}
p.copyright-info{
padding: 15px 0;
}
/*Cast Portraits*/
.character-bink-2 {
     background: url('http://www.npccomic.com/wp-content/themes/comicpress-child/images/cast/bink.jpg') top center no-repeat;
}
.character-mike-2 {
     background: url('http://www.npccomic.com/wp-content/themes/comicpress-child/images/cast/mike.jpg') top center no-repeat;
}
.character-lisa-2 {
     background: url('http://www.npccomic.com/wp-content/themes/comicpress-child/images/cast/lisa.jpg') top center no-repeat;
}
.character-granny-leet {
     background: url('http://www.npccomic.com/wp-content/themes/comicpress-child/images/cast/granny_leet.jpg') top center no-repeat;
}
.character-poopal-2 {
     background: url('http://www.npccomic.com/wp-content/themes/comicpress-child/images/cast/poopal.jpg') top center no-repeat;
}
.character-patrick-2 {
     background: url('http://www.npccomic.com/wp-content/themes/comicpress-child/images/cast/patrick.jpg') top center no-repeat;
}
.character-kendra-2 {
     background: url('http://www.npccomic.com/wp-content/themes/comicpress-child/images/cast/kendra.jpg') top center no-repeat;
}
.character-chloe-2 {
     background: url('http://www.npccomic.com/wp-content/themes/comicpress-child/images/cast/chloe.jpg') top center no-repeat;
}
.character-jenny-2 {
     background: url('http://www.npccomic.com/wp-content/themes/comicpress-child/images/cast/jenny.jpg') top center no-repeat; border: 0px;
}

.character-jin-ho {
     background: url('http://www.npccomic.com/wp-content/themes/comicpress-child/images/cast/jinho.png') top center no-repeat; border: 0px;
}

table.cast-wrapper{
border-spacing:0px;
}

/*Archive Page*/

.comic-archive-list-wrap{
padding-left: 15px !important;
}
.comic-archive-date {
width: auto !important;
}

.comic-archive-thumbnail {
width: 150px !important;
}

/* MOBILE OPTIMIZATION CODE*/
/* Applies to all */
@media screen and (max-width: 767px) {

/*No horizontal scrolling */
html{
overflow-x:hidden;
}


/*MENUS*/
#top-menu{
font-size:70% !important;
}
#top-menu li, #top-menu a{
margin:10px 5px 10px 5px !important;
}
#comics-menu li{
font-size:70% !important;
}
/*TURN OFF ADS*/

#header-pp{
display:none;
}
#header-ad{
display:none;
}
#sidebar-ad{
display:none;
}
#footer-ad{
display:none;
}
#footer-pp{
display:none;
}
#footer-pw{
display:none;
}
#footer1-pw{
display:none;
}
#footer2-pw{
display:none;
}
#sidebar-pw{
display:none;
}
#comic img{
/* this sizes the comic correctly in landscape*/
min-width: 100% !important;
height: auto !important;
}

#sidebar-over-comic.sidebar{
max-width:100% !important;
}
div#over-comic a img{
max-width:100% !important;
}

#sidebar-under-comic.sidebar{
max-width:100% !important;
}
.comic_navi_wrapper{
max-width:100% !important;
}

#subcontent-wrapper {
display: block !important;
width: auto !important;
padding: 10px !important;
}
div#content-column, #content.narrowcolumn {
max-width: 100% !important;
}
#sidebar-right{
text-align:center !important;
clear:both !important;
float:none !important;
width:auto !important;
margin: auto !important;
}
#patreon-promo{
margin: 15px auto !important;
}
#facebook-promo{
margin: 15px auto !important;
}
#amazon-promo{
margin: 15px auto !important;
}
#footer{
text-align:center !important;
max-width: 100% !important;
margin: 0 auto !important;
}
#footer-links{
margin:48px 0 48px 0 !important;
}

}

/*PHONE PORTRAIT*/
@media screen and (max-width: 767px) and (orientation: portrait) {

a.navi.navi-first, span.navi.navi-first.navi-void, a.navi.navi-last-in, span.navi.navi-last-in.navi-void, a.navi.navi-last, span.navi.navi-last.navi-void, a.navi.navi-first-in, span.navi.navi-first-in.navi-void{
display:none !important;
}

#top-menu{
font-size:50% !important;
}

}

/* TABLET*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  {

/*TURN OFF ADS*/
#header-ad{
display:none !important;
}
#header-pp{
display:none !important;
}
#sidebar-ad{
display:none;
}
#footer-ad{
display:none;
}
#footer-pp{
display:none;
}
#footer1-pw{
display:none;
}
#footer2-pw{
display:none;
}
#sidebar-pw{
display:none;
}
}

/* TABLET PORTRAIT*/
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  and (orientation: portrait){
#comic img{
/* this sizes the comic correctly in landscape*/
min-width: 100%;
height: auto !important;
}

#sidebar-over-comic.sidebar{
max-width:100%;
}
div#over-comic a img{
max-width:100%;
}
#sidebar-under-comic.sidebar{
max-width:100%;
}
.comic_navi_wrapper{
max-width:100% !important;
}

#subcontent-wrapper {
display: block !important;
width: auto;
padding: 10px;
}
div#content-column, #content.narrowcolumn {
max-width: 100% !important;
}
#sidebar-right{
text-align:center;
clear:both !important;
float:none !important;
width:auto !important;
margin: auto !important;
}
#patreon-promo{
margin: 15px auto;
}
#facebook-promo{
margin: 15px auto;
}
#amazon-promo{
margin: 15px auto;
}
#footer{
text-align:center;
max-width: 100% !important;
margin: 0 auto !important;
}
#footer-links{
margin:48px 0 48px 0 !important;
}
}
/*END MOBILE OPTIMIZATION CODE*/