/*
Theme Name: Screenwave Media Comic (Snafu Version)
Author: Screenwave Media
Author URI: http://screenwavemedia.com
Version: 1.0
License: Proprietary
Text Domain: swmcomic
*/


* {padding:0; margin:0; text-decoration:none; transition:0.5s; -webkit-transform:0.5s;}

html {}
body {background:#1c1023;}

.bs , .lowerseries , .threewidthseries {box-shadow:0 2px 5px rgba(0,0,0,0.4); -webkit-box-shadow:0 2px 5px rgba(0,0,0,0.4); -moz-box-shadow:0 2px 5px rgba(0,0,0,0.4);}
.clr {clear:both;}

.wrapper {
	padding-top:10px;
}

a { color: #ff0060; }

.headerarea {background: #000;
display: block;
position: fixed;
width:100%;
z-index: 9999;
box-shadow: 0 0 8px #000;
-moz-box-shadow: 0 08px #000;
-webkit-box-shadow: 0 0 8px #000;}
	.logoarea {padding:13px 16px 10px 16px;}
	.menuarea {}

.headarea {display:block; height:103px; background:url(img/bg_top-ads.png) bottom center repeat-x; padding-top:93px;  }
.headwrap {display:block; width:1000px; margin:0 auto; }
	.leaderboardarea {width:728px;float:left; height:90px;}
	.rotatorarea {width:245px; height:90px; float:left;margin-left:17px;}

.contentarea {background:#210334; width:1000px; margin: 80px auto; position:relative; padding-bottom:1px;}



	.seriesarea {height:375px; }




/* ------ UPPER SERIES ------ @lower */


		.upperseriesarea {display:block; clear:both; width:98%;height:213px;padding:1%}
			.series {}
			.upperseries {}
			.threewidthseries {float:right; width:32.75%; margin-left:0.75%; overflow:hidden; display:block; background:#000; height:215px; }
				.threewidthseries:last-child {margin-left:0; width:33%;}
				.threewidthseries a {}
				.threewidthseries img.seriesfeature {}
				.threewidthseries img.seriesfeaturethree {position:relative; z-index:5; width:100%;  opacity:1;}

				.seriescaption {}
				.seriescaptionlarge {}
				.seriescaptionthree {background:rgba(27,2,49,0.9); float:right; margin-top:-60px; padding:10px; position:relative; z-index:10; }
.threewidthseries:hover .seriescaptionthree {padding-right:80px;}
					.seriescaptionthree span.seriestitle {}
					.seriescaptionthree span.seriestitlelarge {color:#ff0060; text-transform:uppercase; font:400 18px Oswald, Arial;}
					.seriescaptionthree span.seriesauthor {}
					.seriescaptionthree span.seriesauthorlarge {color:#fff; font:300 italic 17px Oswald, Arial;}

.threewidthseries:hover img {opacity:0.5;}



/* ------ LOWER SERIES ------ @lower */

		.lowerseriesarea {display:block; clear:both; width:98%; padding:1%;}
			.lowerseries {float: left;
width: 77px;
margin-right: 5px;
position: relative;
background: #000;
overflow: hidden;}
			.lowerseries:last-child {margin:0;}
			.lowerseries .seriesimagesmall {float:right; width:56px; height:100px;}
				.seriesimagesmall a {display: block; height: 100px; position:relative; z-index:30;}
				.seriesimagesmall a img {opacity:0.5;}
		


			.seriescaptionone {text-align:right; display:block; position:absolute; top:0; width:100px; height:100px;
			
				/* Safari */
				-webkit-transform: rotate(-90deg);
				/* Firefox */
				-moz-transform: rotate(-90deg);
				/* IE */
				-ms-transform: rotate(-90deg);
				/* Opera */
				-o-transform: rotate(-90deg);
				/* Internet Explorer */
				filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

				.seriestitlesmall {padding-right:5px; color:#fff; font: 14px Iceland, Arial; text-transform:uppercase; }

/* lower series HOVER */

				.lowerseries:hover .seriestitlesmall {color:#ff0060 !important}
				.lowerseries:hover img {opacity:1;}








/* ------ HOME FEED ------ @feed */


#feed {display: block;
width: calc(100% - 360px);
background: #210334;
font-family: Oswald, Arial;
text-transform: uppercase;}

section.row {width:100%; height:130px; background:#112; padding:10px; display:block; margin-bottom:10px; margin-left:10px; 
position:relative;
 }

 
section.row:hover {
background:#000; 
}

section.row .expandable {float: left;
display: block;
overflow: hidden;
position:absolute;
height:130px;
width: 37%;
z-index:2; 
opacity:0.8;
}

section.row .fixed {float: left;
display: block;
overflow: hidden;
background-color:#000;
position:absolute;
height:130px;
width: 37%;
z-index:2; 
opacity:0.8;
}

section.row:hover .expandable {height: 300px;
z-index: 999; margin-top:-90px;opacity:1;
-moz-box-shadow:0 3px 10px #000; 
-webkit-box-shadow:0 3px 10px #000; 
box-shadow:0 3px 10px #000; 
}
section.row .expandable img {margin-top:-80px;margin-left:-20px;}
section.row:hover .expandable img {margin-top:0;}


section.row .info {margin-left:40%;}
section.row .pubdate {color:#a541b7; font-family:'Iceland', Arial;font-weight:300; font-size:12px; line-height:16px;margin-bottom:-1px;margin-top:13px;}
section.row h2 {font-size:20px; line-height:24px; color:#fff; font-weight:300; display:block;  height:48px; padding-right:10px; margin-bottom:12px;}

section.row .author {font:11px 'Open Sans', Arial; display:block; height:24px;}
section.row .author img {float:left; margin-right:10px; margin-top:1px; width:24px; height:24px;}
section.row .authorsays {color:#ff0060; text-transform: uppercase; display:block;   position: relative; line-height:14px;
  top: 50%;
  	-webkit-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);}
section.row .authorsays span {color:#fff; text-transform:none;}









/* ------ ARCHIVE FEED ------ @archive */


#archive {display: block;
width: calc(100% - 370px);
background: #210334;
font-family: Oswald, Arial;
text-transform: uppercase;}

#archive section.row {width:100%; background:#112; padding:15px 15px 16px 15px; display:block; margin-bottom:6px; margin-left:10px; 
position:relative;
	height:auto;
 border-left:0px solid #c09;
 }

 
#archive section.row:hover {background:#000;border-left:10px solid #c09; width:calc(100% - 10px); }

#archive section.row .expandable, #archive section.row .fixed {display:none;}
#archive section.row .expandable img {}
#archive section.row:hover .expandable img {}


#archive section.row .info {margin-left:0;}
#archive section.row .pubdate {color:#a541b7; font-family:'Iceland', Arial;font-weight:300; font-size:12px; line-height:16px;margin-bottom:-1px; margin-top:0;}

#archive section.row:hover .pubdate, #archive section.row:hover .pubdate strong {color:#c06 !important;}
 
#archive section.row h2 {font-size:20px; line-height:24px; color:#fff; font-weight:300; display:block;  height:auto; padding-right:10px; margin-bottom:0;}

#archive section.row .author {display:none;}
#archive section.row .author img {display:none;}
#archive section.row .authorsays {display:none;}
#archive ection.row .authorsays span {}









/* ------ SIDEBAR HOME and COMIC ------ @home @sidebar */

#sidebarhome {width: 300px;
float: right;
padding-right: 10px;}
#sidebarhome .widget, #sidebarhome .sbwidget {margin-bottom:20px;}
	.sbad {}
	#sidebarhome .widget {background:rgba(0,0,0,0.2); padding:30px;}
#sidebarhome, #sidebarcomic li {list-style:none; margin:0;}
.widget h2 {font:400 22px Oswald, Arial; color:#fff; text-transform: uppercase; margin: 0 0 12px 0 ; padding:0;}
#sidebarhome .widget p {font:12px 'Open Sans', Arial; color:#a7a;}


#sidebarcomic {width: 160px;
float: right;
margin-right: 10px;
padding-top: 1px;}
#sidebarcomic .widget, #sidebarcomic .sbwidget {margin-bottom:20px;}
	

	.concatitle {font:300 18px Oswald, Arial; color:#fff; text-transform: uppercase; padding-left:2px; border-top:1px solid rgba(255,255,255,0.1); padding-top:19px; }
	.concalyear {font:400 24px Oswald, Arial; color:#fff; text-transform: uppercase; margin-top:-6px; margin-bottom:16px; padding-left:2px; }
	.concal {color:#a7a; font:10px 'Open Sans', Arial; width:150px;line-height:15px; padding-left:2px; }
	.concal strong {display:block; text-transform: uppercase; color:#fff;}
	.concal a {display:block; margin-bottom:12px; color:#ff0090; font-size:12px; margin-top:-2px;}

/* ------ COMIC PAGE ------ @comic */

.comicpost {width: calc(100% - 200px);
margin-top: 20px;
padding: 10px;}
.comicpage {width:100%;}
.comicpage img {width:100%;}

.comicnav { text-align: center; }
.comicnav a {display:inline-block; background-color:#7500a1; width:28px; height:28px; margin: 10px 5px;  border-radius:5px; background-image:url(img/comicnav.png);background-repeat:no-repeat; background-position: 9px 0px;}

.comicnav a.previous {background-position: 9px 10px;}
.comicnav a.next {background-position: 9px -25px;}

.comicnav a.latest {background-position: 9px -78px;}
.comicnav a.first {background-position: 9px -113px;}

.comicnav a.archive {background-position: 9px -165px;}
.comicnav a.rss {background-position: 9px -200px;}

.comicnav a:hover {background-color:#f07}

.comicshare {	width: calc(100% - 330px);
	float: left;
	height:250px;
	clear: both;
	margin:0 10px;
	color: #fff;
	display: inline-block;
	background: rgba(0,0,0,0.5);
	line-height: 12px;}

	.comicshareleft {float:left; width:255px; margin:40px; padding-right:40px; border-right:1px solid rgba(255,255,255,0.1);}
	.comicshareright {float:left; width:254px; margin:40px 40px 40px 0;}

	.comicname a { color: #ff0060; }

	.comicshare p {font:11px 'Open Sans', Arial; text-align: center;margin-top:5px;}
	.comicshare code, .form-allowed-tags code {font: 12px Iceland, Arial;
		color: #fff;
		background: #202;
		display: block;
		padding: 15px;
		margin-top: 15px;
	}
	
	/* comments */
	footer, .logged-in-as, .comment-reply-login, .must-log-in, .form-allowed-tags, .comment-notes, .comment-reply-link { font:11px 'Open Sans', Arial; margin-top:5px; }
	footer a, .logged-in-as a, .comment-reply-login a, .must-log-in a, .form-allowed-tags a, .comment a { color: #ff0060 !important; }
	.logged-in-as, .must-log-in { margin-bottom: 5px;}
	.comment-form-comment label { display: none; }
	.children { margin-left: 5%; }
	.comment-reply-title { font: 22px Oswald, Arial; text-transform: uppercase; color: #c04; }
	.comment-form-author, .comment-form-email, .comment-form-url { margin: 10px 0px; }
	.comment-form-author label, .comment-form-email label, .comment-form-url label { font:11px 'Open Sans', Arial; display: inline-block; width: 100px; }
	.comment-form-author input, .comment-form-email input, .comment-form-url input { width: 250px; background: #202; padding: 5px; border-radius: 5px; border: #726 1px solid; }
	#comments textarea { background: #202; color: #fff; width: 100%; padding: 5px; border: #726 1px solid; border-radius: 5px;}
	#comments .submit { display: block; color: #fff; font: 16px Iceland, Arial; background-color: #202; margin: 10px 0px 0px 0px; border-radius: 5px; border: #726 1px solid; padding: 10px; }
	.comment { list-style-type: none; width: 100%; margin-bottom: 10px; display: block; border-left: 1px solid rgba(255,255,255,0.1); padding-left: 10px;}
	.comment p.meta, .comment p.meta a { font: 11px Iceland, Arial; text-transform: uppercase; color: #a7a; border-bottom: 1px solid rgba(255,255,255,0.1); width: 300px; padding-bottom: 5px; }
	.comment-body { font: 12px 'Open Sans', Arial;   margin: 10px 0px 5px 0px; line-height: 16px; }
	.comment-author { font: 16px Oswald, Arial; text-transform: uppercase; margin-bottom: -3px; color: #c04;}
	.comment-author img { float: left; width: 36px; height: 36px; margin: 0 11px 0 0;}
	
	.sharethisarea { width: 100%; padding: 10px; text-align: center;}

.comicsharead {float:left; width:300px; }

h5.comicposttitle {width: calc(100% - 40px);
	float: left;
	clear: both;
	font:12px Iceland, Arial; 
	text-align:left;
	text-transform: uppercase;
	margin:10px;
	color: #eee;
	height:auto;
	display: block;
	background: rgba(0,0,0,0.5);
	line-height: 12px;
padding:10px;}

h5.comicposttitle span {float:right; color:#a7a}

.comicblurb, .comiccomments {	width: calc(100% - 80px);
	float: left;
	clear: both;
	margin:10px;
	color: #fff;
	height:auto;
	display: block;
	background: rgba(0,0,0,0.5);
	line-height: 12px;
padding:30px;
}
.postblurb {
	width: calc(100% - 60px);
	font: 13px 'Open Sans', Arial;
	color: #fff;
	height:auto;
	min-height: 600px;
	display: block;
	background: rgba(0,0,0,0.5);
	line-height: 17px;
	padding:30px;
}

.postblurb h1,h2,h3,h4,h5,h6 {
    font-weight: bold;
    margin-top: 0.75em;
    color: #ff0060;
    margin-bottom: 0.75em;
    font-size: 1.35em;
}
h1.postblurbtitle {
	color: white;
	margin: -10px 0 0 0;
	font: 2.75em Oswald, Arial;
	text-transform: uppercase;
}
.bbp-forum-description .avatar {
    float: left;
    margin-right: 5px;	
}
.postblurb .author {
	color: #ff0060;
	margin-top: 10px;
	margin-bottom: 30px;
	line-height: 20px;
	text-transform: uppercase;
}

.comicblurb .avatar {float:left; width:36px; height: 36px; margin: 0 11px 0 0;  } 

.comicauthor {display:inline-block; float:left; margin: -4px 20px 0 0 ; }
.comicauthor p.comicauthorname {font:22px Oswald, Arial; text-transform:uppercase; margin-bottom:-3px; color:#c04;}
.comicauthor p.comicpub {font:11px Iceland, Arial; text-transform: uppercase; color:#a7a; }

.comicnote { display:table-cell; padding:0 10px 0 20px; border-left:1px solid rgba(255,255,255,0.1);}
.comicblurb p {font:12px 'Open Sans', Arial; margin-bottom:10px; line-height:16px;  }

a.comiccomment {font:12px 'Iceland', Arial; color:#907; text-transform: uppercase; display:inline-block;margin-top:10px;}

/* ------ PAGING ------ @paging */
.paging {
	margin: 10px 0px 6px 10px;
	padding: 10px 0px 10px 0px;
}
a.page-numbers {
	color: #a541b7;
}
a.page-numbers:hover {
	color:#ff0060;
	background: #000;
}
span.page-numbers {
	color: #fff;	
}
a.page-numbers, span.page-numbers {
	background: #112;
	padding: 10px;
	margin-right: 3px;
	font-size: 12px;
	font-family: Oswald, Arial;	
} 

/* ------ MENU ------ @menu */
#menu-header {
list-style-type: none;
display: block;
position: absolute;
top: 35%;
right: 15px;
}
#menu-header li.menudiv {
	color: #fff !important;
	text-transform: uppercase;
	font-size: 16px;
	font-family: Oswald, Arial;		
}
#menu-header li a {
	color: #a541b7;
	text-transform: uppercase;
	font-size: 16px;
	font-family: Oswald, Arial;	
}
#menu-header li a:hover {
	color:#ff0060;
}
#menu-header li {
list-style: none;
margin: 0;
padding: 0 0 0 20px;
float: left;
}
#menu-header li.menusmall, #menu-header li.menudiv {
	padding: 0 0 0 10px;
	margin-top: 4px !important;
	font-size: 10px !important;
}
#menu-header li.menusmall a {
	color:#ff0060;
	font-size: 10px !important;
}
#menu-header li.menusmall a:hover {
	color: #a541b7;
	font-size: 10px !important;
}

/* ------ FOOTER ------ @footer */

footer {clear: both; display:block; font:10px Iceland, Arial; text-transform:uppercase; padding:20px; text-align: center; color:#fff;}
footer a {margin:0; padding:0; color:#708; clear:both; }

/* End Footer */

/* Forums */
	#bbpress-forums {
		clear: none;
	}
	.postblurb input[type="text"], .postblurb textarea, #bbpress-forums #bbp-your-profile fieldset input, #bbpress-forums #bbp-your-profile fieldset textarea {
	    background: #202;
	    color: #fff;
	    padding: 5px;
	    border: #726 1px solid;
	    border-radius: 5px;
	}
	.postblurb input[type="button"], .postblurb input.button, .submit button, button.submit {
	    color: #fff;
	    font: 16px Iceland, Arial;
	    background-color: #202;
		box-shadow: none;
	    border-radius: 5px;
	    border: #726 1px solid;
	}
	.submit button, button.submit {
		  padding: 5px;
	}
	.postblurb fieldset {
	    border: #726 1px solid !important;		
	}
	fieldset.password, fieldset.submit {
		border: 0 !important;
	}
	div.quicktags-toolbar {
	    background: inherit;
	    border: 0;
	}
	
	.postblurb span.description, .bbp-user-profile-link a.url {
	    background: inherit !important;
	    border: 0 !important;
	}
	
	.bbp-forums, .bbp-forums li {
		background-color: inherit !important;
		background: inherit !important;
		border: 0 !important;
	}
	
	#bbpress-forums ul.bbp-lead-topic, #bbpress-forums div.bbp-topic-header, #bbpress-forums ul.bbp-topics, #bbpress-forums ul.bbp-forums, #bbpress-forums ul.bbp-replies, #bbpress-forums ul.bbp-search-results, #bbpress-forums li.bbp-header,#bbpress-forums div.bbp-reply-header, #bbpress-forums li.bbp-header, #bbpress-forums li.bbp-footer, #bbpress-forums div.odd, #bbpress-forums ul.odd, #bbpress-forums div.even, #bbpress-forums ul.even {
		background-color: inherit;
		border: 0;
	}
	
	#bbpress-forums div.bbp-forum-header, #bbpress-forums div.bbp-topic-header, #bbpress-forums div.bbp-reply-header {
	  background-color: inherit;
	  border: 0;
	}
	
	#bbpress-forums div.odd, #bbpress-forums ul.odd, #bbpress-forums div.even, #bbpress-forums ul.even, li.bbp-footer
	{
		border-top: #726 1px solid !important;
	}
	
	#bbp_search_submit {
		  padding: 4px;
	}
	
	#bbpress-forums #bbp-single-user-details #bbp-user-navigation li.current a {
	  background: #ff0060;
	  color: #fff;
	  opacity: 1;
	}
	
	#bbpress-forums #bbp-user-wrapper ul.bbp-lead-topic, #bbpress-forums #bbp-user-wrapper ul.bbp-topics, #bbpress-forums #bbp-user-wrapper ul.bbp-forums, #bbpress-forums #bbp-user-wrapper ul.bbp-replies {
	  clear: both;
	}
	
	#bbpress-forums, #bbpress-forums #bbp-user-wrapper fieldset.bbp-form {
	  clear: none;
	}
	
	#bbpress-forums img.avatar {
		border: 3px solid #1c1023 !important;
	}
	
	.bbp-single-user img.avatar {
		border: 0 !important;
	}
	
	#subscription-toggle {
		padding-left: 10px;
	}
	
	div.bbp-template-notice.info, div.bbp-template-notice {
		font: 12px Iceland, Arial;
	    background: #202;
	    color: #fff;
	    border: #726 1px solid;
	}
	div.bbp-template-notice.info a {
  	  	color: #ff0060;
	}
/* End Forums */

/* Responsive */

@media only screen and (max-device-width : 480px) {
	html, body {
	    max-width: 100%;
	    overflow-x: hidden;
	}
	.wrapper {
	  margin-top: -20px;
	}
	.contentarea, .headerarea {
		width: 100%;
	}
	.contentarea {
	    padding-top: 77px;
	}
	.menu-item, .menudiv {
		display: none;
	}
	.headarea, .headarea div {
		display: none !important;
	}
	.seriesimage {
		display: none;
	}
	.series {
		width: 100%;
		padding: 0.5em;
	}
	.seriesarea {
		height: auto;
	}
	.seriesauthor {
		display: none;
	}
	.seriescaption {
		width: 100% !important;
		height: auto !important;
		float: none !important;
		text-align: left;
		position: relative;
		top: auto;
		margin: 0;
		padding: 0;
		-webkit-transform: rotate(0deg) !important;
		-moz-transform: rotate(0deg) !important;
		-ms-transform: rotate(0deg) !important;
		-o-transform: rotate(0deg) !important;
		filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0) !important;
	}
	.seriestitle {
	  color: #ff0060;
	  text-transform: uppercase;
	  font: 400 18px Oswald, Arial;
	}
	.upperseriesarea {
		height: auto;
		width: 100%;
		padding: 0;
	}
	.seriescaptionthree {
		background: inherit;
	}
	.threewidthseries, .threewidthseries:last-child {
		float: none;
		width: auto;
		margin: 0;
		background: inherit;
		overflow: hidden;
		height: auto;
	}
	.lowerseries {
	  float: none;
	  width: 100%;
	  margin: 0;
	  position: inherit;
	  background: inherit;
	  overflow: hidden;
	}
	.lowerseriesarea {
		width: 100%;
		padding: 0;
		background: inherit;
	}
	#sidebarhome {
		display: none;
	}
	#feed, #archive, .comicpost {
		width: 100%;
	}
	.comicpost {
		padding: 0;
	}
	.comicshare {
		margin: 0;
		display: none;
	}
	.comicsharead {
	    float: none;
	    margin: 0 auto;
	}
	h5.comicposttitle {
		width: 100%;
		margin: 0;
	}
	h5.comicposttitle span {
		width: 100%;
	}
	section.row {
		margin: 0 !important;
	}
	section.row h2 {
		overflow: hidden;
	}
	.sharethisarea, #sidebarcomic, .comicshareleft, .comicshareright {
		display: none;
	}
}

/* End Responsive */