/* 
Theme Name:		Veritable Hokum
Theme URI:		http://veritablehokum.com/
Description:	oh jesustits i hope this works
Author:			Korwin Briggs
Author URI:		http://korwinbriggs.com/
Template:		comicpress
Text Domain:	veritable-hokum
 */


/*
NOTES TO MY FUTURE SELF:
All the !important things, more or less, are there because in addition to the parent theme's style.css, there are a couple other shitty annoying css things influencing this site, including inline css added by Comicpress's php and some miscellaneous documents added by Comic Easel's plugin. So if I've gone to update something and the site's gone tits up, odds are good that that's where the issue is.
*/


@import url(http://fonts.googleapis.com/css?family=IM+Fell+English);

/* CSS REST */

    /**
    * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
    * http://cssreset.com
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
	color:#150d1b;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }
	
	
	
	/* END CSS RESET */
	

body {
	font-family: 'IM Fell English', serif;
	font-size:16px;
	line-height:1.6em;
}

p, a {
	font-size:1em;
}

p {
	margin-bottom:1em;
}

h1, h2, h3, h4, h5, h6 {
	text-align:center;
	padding-bottom:.5em;
}

h1 {
	font-size:1.8em;
}

h2 {
	font-size:1.4em;
}

h3 {
	font-size:1.3em;
}

h4 {
	font-size:1.2em;
}

h5 {
	font-size:1.1em;
}

h6 {
	font-size:1.1em;
}

a {
	color:#9c1e06;
	text-decoration:none;
	font-weight:normal;
}

a:hover {
	color:#e44a06;
}

a:visited {
	color:#5a1103;
}

#page {
	background:none !important;
	width:95% !important;
	margin:auto;
}

#page-wrap {
	background-color:#FFF;
}

#header {
	background-size:contain !important;
	width:100% !important;
	height:auto !important;
}

.header-info {
	text-align:center;
	float:none !important;
	margin:auto !important;
	display:block !important;
}

.header-info h1 {
	display:block !important;
	background-position:center !important;
}

.header-info h1 a {
	text-align:center !important;
	margin:auto !important;
	height:100% !important;
	width:30% !important;
}


/*the menu banner background is done by putting the center tile in the back-most div, and then the ends repeated once on the right and left of their respective divs in front of that.*/
#sidebar-menubar {
	background-image:url("images/bannercenter.png");
	background-repeat:repeat-x;
	background-position:bottom;
	background-size:contain;
	margin-top:-.5em;
	margin-bottom:.5em;
}

#nav_menu-2 {
	background-image:url("images/bannerleft.png");
	background-position:left;
	background-repeat:no-repeat;
	background-size:contain;
}

#menu-navigation-menu {
	background-image:url("images/bannerright.png");
	background-position:right;
	background-repeat:no-repeat;
	background-size:contain;
	height:2.8em;
	text-align:center;
	width:100%;
}

#menu-navigation-menu li {
	display:inline-block;
	line-height:2.4em;
	text-align:center;
}

#content-wrapper {
	margin:auto;
}

.navi {
	padding:0 !important;
}

#sidebar-under-comic {
	background-image:url('images/dividerh.png');
	background-repeat:repeat-x;
	background-position:center bottom;
	overflow:hidden;
}

.comic_navi_wrapper {
	float:left;
	width:50%;
	height:40px;
	width:176px;
}

.comic_navi_left span, .comic_navi_left a, .comic_navi_center a, .comic_navi_right span, .comic_navi_right a {
	display:block;
	float:left;
	padding:0;
	width:40px;
	height:40px;
	text-indent: -9999px;
}

.navi-prev {
	background-image:url('images/buttonssmall.png');
	margin:0 2px;
}
a.navi-prev {
	background-position:0px -80px;
}
a.navi-prev:hover {
	background-position:0px -120px;
}
span.navi-prev {
	background-position:-200px -80px;
}
.navi-archives {
	background-image:url('images/buttonssmall.png');
	background-position:-120px -80px;
	margin:0 2px;
}
.navi-archives:hover {
	background-position:-120px -120px;
}
.navi-random {
	background-image:url('images/buttonssmall.png');
	background-position:-80px -80px;
	margin:0 2px;
}
.navi-random:hover {
	background-position:-80px -120px;
}
.navi-next {
	background-image:url('images/buttonssmall.png');
	margin:0 2px;
}
a.navi-next {
	background-position:-40px -80px;
}
a.navi-next:hover {
	background-position:-40px -120px;
}
span.navi-next {
	background-position:-200px -120px;
}
	

/*a2a is all related to the social media buttons below and right of comic */

#a2a_share_save_widget-2 {
	float:right;
	width:50%;
	text-align:right;
	width:176px;
}

.a2a_kit {
}

.a2a_kit a {
	width:40px;
	height:40px;
	background-image:url('images/buttonssmall.png');
	padding:0 !important;
	margin:0 2px;
}

.a2a_svg {
	background-image:none !important;
	opacity: 0 !important;
}

.a2a_button_facebook {
	background-position:0px -40px;
}
.a2a_button_facebook:hover {
	background-position:0px 0px;
}	
.a2a_button_twitter {
	background-position:-120px -40px;
}
.a2a_button_twitter:hover {
	background-position:-120px 0px;
}
.a2a_button_google_plus {
	background-position:-160px -40px;
}
.a2a_button_google_plus:hover {
	background-position:-160px 0px;
}
.a2a_button_pinterest {
	background-position:-200px -40px;
}
.a2a_button_pinterest:hover {
	background-position:-200px 0px;
}
.a2a_button_tumblr {
	background-position:-80px -40px;
}
.a2a_button_tumblr:hover {
	background-position:-80px 0px;
}

/*text-4 and text-5 are the Navigation and Share labels*/
#text-4 {
	display:block;
	float:left;
	clear:left;
	width:50%;
	max-width:176px;
	font-size:.9em;
	line-height:1.5em;
	padding-top:.5em;
}

#text-5 {
	display:block;
	float:right;
	clear:right;
	width:50%;
	max-width:176px;
	font-size:.9em;
	line-height:1.5em;
	padding-top:.5em;
}
	
#subcontent-wrapper {
	display:block;
	margin:auto;
	max-width:980px;
	padding:1em 0;
}

#content-column {
}

#content {
	padding-right:1em;
}

/* random stuff info from the comic post that I don't want to bother with */
.post-calendar-date, .comic-post-info, .post-cat, .post-tags {
	display:none;
}

.post-content {
	padding:1em 0;
}

.post-info {
	text-align:center;
}

.post-text {
	font-size:.9em;
}

.posted-on {
	display:none;
}

.entry {
	padding-top:1em;
	padding-bottom:1em;
}

#sidebar-right .sidebar{
	background-image:url('images/dividerv.png');
	background-position:left;
	background-repeat:repeat-y;
	padding-left:1em;
}

#text-3, #text-6, #text-7, #text-8, #ceo_latest_comics_widget-2, .Yop{
	background-image:url('images/dividerh.png');
	background-repeat:repeat-x;
	background-position:bottom;
	padding:1em 0;
}

.widget-title {
	text-align:center;
	padding-bottom: .5em;
	font-size:1.25em;
	clear:both;
}

/*email form */

input, label { 
	font-size:.9em;
	font-family: 'IM Fell English', serif;
}

input[type="text"], input[type="email"] {
	width:95%;
	clear:both;
	margin:auto;
}

input[type="submit"], button {
	display:table;
	margin:auto;
	text-align:center;
}

.yop_poll_vote_button {
	margin:.5em auto;
}

/*posterad size fix*/
.sidebar-image {
	width:100%;
}

/*follow me buttons*/
#text-6 {
	overflow:hidden;
}

#followmebuttons {
	margin:auto;
	max-width:220px;
}
#followfacebook, #followtwitter, #followinstagram, #followpinterest, #followfeed {
	background-image:url('images/buttonssmall.png');
	display:block;
	width:40px;
	height:40px;
	overflow:hidden;
	text-indent:-9999px;
	margin:2px;
	float:left;
}
#followfacebook {
	background-position:0px -40px;
}
#followfacebook:hover {
	background-position:0px 0px;
}
#followtwitter {
	background-position:-120px -40px;
}
#followtwitter:hover {
	background-position:-120px 0px;
}
#followinstagram {
	background-position:-40px -40px;
}
#followinstagram:hover {
	background-position:-40px 0px;
}
#followpinterest {
	background-position:-200px -40px;
}
#followpinterest:hover {
	background-position:-200px 0px;
}
#followfeed {
	background-position:-160px -120px;
}
#followfeed:hover {
	background-position:-160px -80px;
}

/*poll*/

.yop_poll_vote_button {
	font-size:1em !important;
	font-family: 'IM Fell English', serif; !important;
}

/*footer*/

#footer {
	clear:both;
	background:none !important;
	display:block;
	width:90%;
	margin:auto;
}

#footertext {
	font-size:.6em;
}

/* Specific page css begins here - need to chane things for the archive and whatnot */

.archive-date {
	display:inline-block;
	width:5em;
}

/*about page*/

#qtmbfaipfamq-description {
	font-size:.9em;
	text-align:center;
}


@media only screen and (min-width:1031px) {
	
	body {
		font-size:18px;
	}
	
	#page-wrap {
	}
	
	#page {
		max-width:1031px !important;
	}
	
	/*.header-info h1 is where the logo image is as a background. for some reason the Comicpress parent theme keeps normal text there, but has it offset like a thousand pixels to the left of the block. So, h1 in practice is the logo image. */
	.header-info h1 {
		height:229px !important;
	}
	
	#menu-navigation-menu li {
		padding:0 1.5em;
	}
	
	#content-wrapper {
		width:90% !important;
	}
	
	#comic {
		max-width:980px;
	}
	
	#content-column {
		width:67% !important;
		float:left;
	}
	
	#sidebar-right {
		width:33% !important;
		float:left;
	}
	
}

@media only screen and (min-width:751px) and (max-width:1030px) {
	
	body {
		font-size:18px;
	}
	
	#page-wrap {
	}
	
	#page {
		width:95% !important;
	}
	
	#header {
		width:100% !important;
		padding-top:24% !important;
		position:relative !important;
	}
	
	.header-info h1 {
		position:absolute !important;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	
	#menu-navigation-menu li {
		padding:0 1em;
	}
	
	#content-wrapper {
		width:90% !important;
	}
	
	#content-column {
		width:67% !important;
		float:left;
	}
	
	#sidebar-right {
		width:33% !important;
		float:left;
	}
	
}

@media only screen and (min-width:501px) and (max-width:750px) {
	
	body {
		font-size:16px;
	}
	
	#page-wrap {
	}
	
	#page {
		width:100% !important;
	}
	
	#header {
		margin:auto;
		width:95% !important;
		padding-top:24% !important;
		position:relative !important;
	}
	
	.header-info h1 {
		position:absolute !important;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	
	#menu-navigation-menu li {
		padding:0 .5em;
	}
	
	#content-wrapper {
		width:95% !important;
	}
	
	#content-column {
		width:60% !important;
		float:left;
	}
	
	#sidebar-right {
		width:40% !important;
		float:left;
	}
	
	#footer {
		width:95%;
	}
	
}

@media only screen and (max-width:500px) {
	
	body {
		font-size:16px;
	}
	
	#page-wrap {
	}
	
	#page {
		width:95% !important;
	}
	
	#header {
		margin:auto;
		width:95% !important;
		padding-top:24% !important;
		position:relative !important;
	}
	
	.header-info h1 {
		position:absolute !important;
		top:0;
		left:0;
		right:0;
		bottom:0;
	}
	
	#sidebar-menubar {
		background-image:none;
		margin-top:auto;
	}
	
	#nav_menu-2 {
		background-image:none;
	}
	
	#menu-navigation-menu {
		background-image:none;
		height:auto;
	}
	
	#menu-navigation-menu li {
		padding:0;
		line-height:inherit;
		width:100%;
	}
	
	#subcontent-wrapper {
		padding:1.8em .8em;
	}
	
	#content-column {
		width:100% !important;
		margin:auto;
		float:none;
	}
	
	#sidebar-right {
		width:100%;
		margin:auto;
		float:none;
		padding:1em 0;
	}
	
	#sidebar-right .sidebar{
		border:none;
		background-image:none;
		padding:0;
	}
	
}