/*
Theme Name: Adam4d
Theme URI: http://adam4d.com
Description: Responsive Comic Theme
Author: Reagan Rose
Author URI: http://unctioncreative.com
Version: 2.0
Tags: black, gray, red, three-columns, grid, flexible-width, 

License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* WP Throws stupid warnings if these aren't in the stylesheet but we don't use them. */
.wp-caption {}
.wp-caption-text {}
.sticky {}
.gallery-caption {}
.bypostauthor {}
.alignright {}
.alignleft {}
.aligncenter {}

/* BASIC */

body {
	background:#000000;
	color:#000;
	font-family: sans-serif;
	margin:0;
	padding:0;
}
#header a {
	border: none;
	outline: 0;
}
#header img {
	border: none;
	outline: 0;
}
.wrapper {
	margin:0 auto;
	min-width: 320px;
	background: #FFFFFF;
}
a {
	color: #000000;
	text-decoration: none;
	outline: 0;
} 

a:hover {
	color: #ff0000;
	text-decoration: underline;
}

h1 {
	font-family: 'Sanchez', serif;
	font-size: 2em;
	margin:0px;
}
h2 {
	font-family: 'Sanchez', serif;
	font-size:1.3em;
	margin:0px;
	color: #000;
	padding: 1em 0 0;
}
ul,
ol {
	margin:0;
}
#home-grid img,
#single-grid img {
	width:100%!important;
	height:auto!important;
}
#main-comic img {
	display:block;
	margin:0 auto;
	max-width: 1004px;
	height:auto;
}
#main-comic h1 {
	text-align: center;
}
#home-grid h2,
#single-grid h2 {
	display:none;
}
/* HEAD */
#header {
	background:#000000;
	position: relative;
	padding: 0 20px;
}
#header .logo {
/* 	background:url("images/logo.jpg") no-repeat scroll 50% 50% / 230px auto #000; */
	display: block;
	height:70px;
	max-width: 980px;
	margin:0 auto;
}
#header .top {
	height:80px;
	position: relative;
	padding:16px 0;
}
.menu {
    border-radius: 5px;
    height: 35px;
    position: absolute;
    top: 33.3%;
    width: 47px;
}
.menu:hover {
	color:#FFF;
	text-decoration: none;
}
#navigation {
	background:none repeat scroll 0 0 #000000;
}
#navigation ul {
	list-style: none;
	height: auto;
	overflow:auto;
	text-align: center;
	font-family: 'Sanchez', serif;
	font-size: 1.2em;
}
#navigation ul li {
	padding:5px 20px;
	display: inline-block;
}
#navigation ul li a {
	color: white;
	text-decoration: none;
}
#navigation ul li a:hover {
	color: #f7c33f;
}
.special-note-box {
	background: #e0e0e0;
}
#archive {
	text-align: center;
}
.banner {
	margin:0 auto;
	text-align:center;
}
.banner img {
	width: auto;
	max-width: 980px;
	height:auto;
}
.description {
	border:1px solid #747575; 
	padding:10px;
	text-align: center;
}
/* Search Form */
.search-form {
	color: #000;
	border-radius: 3px;
}
input.search-field {
	border: none;
	height: 37px;
	position: relative;
	font-family: 'Sanchez', serif;
	font-size: 1em;
	color: #000;
	outline: 0;
	-webkit-appearance: none;
	border-radius: 3px;
	width: 250px; 
}
.search-submit { 
	border:none;
	background:none;
	color:#FFF;
	font-size:1em;
	cursor: pointer;
	white-space: nowrap; 
}
/* Search Page Search Form */
.more-comics .search-container {
	width: 500px;
	margin: 0 auto;
}
.more-comics .search-form {
	border:none;
}
.more-comics .search-field {
	padding:0 5px;
	border-radius: 3px;
}
.more-comics .search-submit { 
	color:#000;
	font-size:1.2em;
	padding:none;
}

/* MAIN CONTENT */
.container {
	display: block;
	max-width:980px;
	margin:0 auto;
	padding:10px;
}
.content {
	background: #FFFFFF;
}
.first-comic {
	margin-bottom: 2%;
}
.newest h1 {
	background: #ff0000;
	color: #FFFFFF;
	padding: 5px 0 0 15px
}
.newest .box-image {
	border:4px solid #ff0000;
}
.featured h1 {
	color:#000000;
}
.buttons {
	font-family: 'Sanchez', serif;
	font-size:2em;
	padding:30px 0;
	text-align: center;
	clear:both;
}
.buttons a {
	border-radius: 5px;
	padding: 5px;
}
.buttons-top {
	padding:20px 0 0px 0!important;
	display: block;
	clear: both;
}
.buttons-top .previous,
.buttons-top .random,
.buttons-top .next {
	border-width: 3px!important;
	border-radius: 4px!important;
}

.buttons .previous:hover ,
.buttons .next:hover {
	color:#000;
	border: 5px solid #000000;
}
.random {
	color:#FFFFFF;
	background: #ff0000;
	border: 5px solid #000;
}
.random:hover {
	background:#747474;
}
.buttons .previous {
	border:5px solid #747474;
	color: #747474;
}
.buttons.next { position: relative; background: #ffffff; border: 5px solid #747474; } /* .next:after, .next:before { left: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .next:after { border-color: rgba(255, 255, 255, 0); border-left-color: #ffffff; border-width: 24px; margin-top: -24px; } .next:before { border-color: rgba(116, 116, 116, 0); border-left-color: #747474; border-width: 31px; margin-top: -31px; } */
.buttons.previous { position: relative; background: #ffffff; border: 5px solid #747474; } /* .previous:after, .previous:before { right: 100%; top: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .previous:after { border-color: rgba(255, 255, 255, 0); border-right-color: #ffffff; border-width: 24px; margin-top: -24px; } .previous:before { border-color: rgba(116, 116, 116, 0); border-right-color: #747474; border-width: 31px; margin-top: -31px; } */
.buttons .next {
	border:5px solid #747474;
	color: #747474;
}
.more-comics {
	background-color:#e0e0e0;
	text-align: center;
	padding:10px 0;
	clear:both;
}
.social {
	text-align: center;
	height:60px;
}
.social a {
/* 	border:1px solid #000; */
	padding: 0;
	margin: 0;
	margin-right: 2%;
	width: 50px;
	height: 50px;
	display: inline-block;
}
.sprite {
	background-image: url(images/social-sprites.png);
	background-repeat: no-repeat;
	background-size: 100px;	
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
   opacity: 1;
}
.sprite:hover {
	opacity:0.8;
}
.sprite-white {
	background-image: url(images/social-sprites-white.png);
	background-repeat: no-repeat;
	background-size: 100px;	
	opacity:1;
	transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
.sprite-white:hover {
	opacity:0.8;
}
.social .tw {
	background-position: 0px 0px;
}
.social .fb {
	background-position: -50px 0px;
}
.social .gp {
	background-position: 0px -50px;

}
.social .rd {
	background-position: -50px -50px;
}
.social .rs {
	background-position: 0px -100px;
}
.social .em {
	background-position: -50px -100px;
	margin-right: 0;
}

/* Share Buttons */
ul.share-buttons{
  list-style: none;
  padding: 20px 0px 0px 0px;
  margin: 0 20%;
}

ul.share-buttons li{
  display: inline;
}

/* FOOTER */

.grey-foot {
	clear:both;
	display: block;
	background: #e0e0e0;
	margin:0 auto;
	padding:15px 0 0 0;
}
.black-foot {
	display: block;
	background: #000000;
	height:auto;
	margin:0 auto;
	color: #FFF;
	padding: 20px 0;
}
.black-foot span {
	display: block;
	font-family: sans-serif;
	font-size: 0.8em;
	text-align: center;
	padding: 10px 0;
}
.black-foot a {
	color: #ff0000;
	text-decoration: none;
} 
.black-foot a:hover {
	color: #FFFFFF;
	text-decoration: underline;
}
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}
.section a {
	text-decoration: none;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 2% 3%;
}
#home-grid .col:first-child,
#home-grid .col:nth-child(3n+4) { 
	margin-left: 0; 
}
#single-grid .col:first-child,
#single-grid .col:nth-child(3n+4) { 
	margin-left: 0; 
}

/*  GROUPING  */
.group:before,
.group:after {
	content:"";
	display:table;
}
.group:after {
	clear:both;
}
.group {
    zoom:1; /* For IE 6/7 */
}
/* GRID OF THREE */
	
.span_3_of_3 {
	width: 100%; 
	margin: 0;
	float: none;
}

.span_2_of_3 {
	width: 66.13%; 
}

.span_1_of_3 {
	width: 31.33%; 
}
.box-image,
.attachment-square-thumb {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border:3px solid #747575;
}
.box-image:hover,
.attachment-square-thumb:hover {
	border-color:#ff0000;
}
.ads {
}
footer {
	background:#FFF;
}

/* Pagination */
.pagination{
	text-align: center;
	margin:40px 0;
}

.pagination ul {
	display: inline-block;
	background-color: #FFFFFF;
	white-space: nowrap;
	padding: 0;
	clear: both;
	border-radius: 3px;
}

.pagination li {
  padding: 0;
  margin: 0;
  float: left;
  display: inline;
  overflow: hidden;
  border-right: 1px solid #e0e0e0;
}

.pagination a, .pagination span {
  margin: 0;
  text-decoration: none;
  padding: 0;
  line-height: 1em;
  font-size: 1em;
  font-weight: normal;
  padding: 0.75em;
  min-width: 1em;
  display: block;
  color: #000000;
 }

.pagination a:hover, .pagination a:focus, .pagination span:hover, .pagination span:focus  {
	background-color: #ff0000;
	color: #FFFFFF;
}

.current{
	cursor: default;
	color: #FFFFFF;
	background-color: #e0e0e0;
}

.current:hover, .current:focus {
	background-color: #e0e0e0!important;
}
.d-none {
	display:none;
}
.text-post {
	max-width: 700px;
    font-family: georgia, serif;
    margin: 0 auto;
    line-height: 1.58;
    font-size: 21px;
    color: rgba(0,0,0, 0.8);
    letter-spacing: -0.003em;
}

.text-post a {
	color: #ff0000;
	text-decoration: none;
} 
.text-post a:hover {
	color: #000000;
	text-decoration: underline;
}

@media only screen and (max-width: 1024px) {
	#main-comic img {
		height:auto;
		max-width: 747px;
	}
}  
@media only screen and (max-width: 767px) {
	#main-comic img,
	.banner img {
		display:block;
		margin:0 auto;
		width:440px!important;
		height:auto!important;
	}
	.buttons-top {
		display:none;
	}
	.text-post {
		font-size:18px;
		padding:0 10px;
	}
/*
	.featured-img {
		background-size: 190%!important;
	}
*/
}
/*  GO FULL WIDTH AT LESS THAN 480 PIXELS */
@media only screen and (max-width: 480px) {
	h1 {
		font-size: 1.5em;
	}
	#header .logo {
		height:40px;
	}
	#header .top {
		height:35px;
	}
	#main-comic img,
	.banner img {
		display:block;
		margin:0 auto;
		width:100%!important;
		height:auto!important;
	}
	.featured-img {
		height:88.7vw!important;	
	}
	.col { 
		margin: 3% 0 1% 0%;
	}
	.span_3_of_3 {
		width: 100%; 
	}
	.span_2_of_3 {
		width: 100%; 
	}
	.span_1_of_3 {
		width: 100%;
	}
	input.search-field {
		width:80%;
	}
	.search-submit {
		 float:right;
		 padding-top:6px;
		 width:20%;
	}
	.more-comics .search-container {
		padding: 0 10px;
		width:auto;
	}
	.buttons {
		padding:30px 0 10px;
		font-size:1em;
	}
	.buttons a {
		border-width: 3px!important;
	}
	.buttons.previous,
	.buttons.random,
	.buttons.next {
		position: static;
		display: block;
		margin:0 0 10px 0;
		width: auto;
		clear:both;
	}
	#navigation ul {
		text-align: left;
	}
	#navigation ul li {
		display: block;
		padding: 5px 0;
	}
	ul.share-buttons {
		margin:0;
	}
	.m-none {
		display:none;
	}
	.d-none {
		display:block;
	}
}