/* Comic View - CSS Styles */

.clearfix{
	height:0.1em;
	clear:both;
}

#page-container{
	margin:20px 0px;
}

@media screen and (max-width: 480px){
	#the-comic{
		min-width:107%!important;
		margin-left:-3.5%!important;
		margin-right:0px!important;
		text-align: center!important;
	}
	
	#the-comic-wrapper{
		text-align:center!important;
		margin-left:auto!important;
		margin-right:auto!important;
	}
}

/* Navbar */

.navbar{
	min-height:10px!important;
}

/* Comic Nav */

.comic-navbar .navbar{
	margin:0px!important;
	padding:0px!important;
	text-align:center!important;
}

.comic-navbar .navbar-nav{
	display: block!important;
	float: none!important;
	padding:0px!important;
	margin:0px!important;
}

.comic-navbar .navbar-inner{
    padding: 0;
}

.comic-navbar .nav{
    margin: 0;
	padding: 0;
    display: table;
    width: 100%;
}

.comic-navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
		text-align:center!important;

}

.comic-navbar .nav-link{
   text-align:center!important;
}

.comic-navbar li a{
	padding-right: 5px!important;
	padding-left: 5px!important;
	padding-top: 0px!important;
	padding-bottom: 0px!important;
}

		.comic-navbar li img{
			max-width:100%!important;
		}

@media screen and (max-width: 480px){
	
	h1,h2{
		font-size:23px;
	}
	
	.comic-navbar .nav{
		margin: 0;
		display: block;
		width: 100%;
	}

	.comic-navbar .nav li{
		display: inline-block;
		width: 30%;
		float: none;
	}
	
	.comic-navbar li a{
		padding:0px 15px!important;
		margin:0px!important;
	}

		.comic-navbar li img{
			max-width:135%!important;
			padding:0px!important;
		}

}

/* Comic Nav Buttons */
/* Generated by http://responsive-css.spritegen.com Responsive CSS Sprite Generator */

.comic-nav-button{
	max-width: 100%;
	background-size: 100%;
	/* New CSS gubbins - first URL is custom URL, if file doesn't exist it apparently defaults to the other! */
	background-image: url('/assets/custom/navigation_buttons.png'), url('/assets/icons/buttons_template.png');
}
 
.comic-nav-button-prev{ 
	background-position: 0 0%;
	background-size: 100%;
}

.comic-nav-button-next{
	background-position: 0 16.666667%;
	background-size: 100%;
}

.comic-nav-button-first{
	background-position: 0 33.333333%;
	background-size: 100%;
}

.comic-nav-button-last{
	background-position: 0 50%;
	background-size: 100%;
}

.comic-nav-button-random{
	background-position: 0 66.666667%;
	background-size: 100%;
}

.comic-nav-button-chapterfirst{
	background-position: 0 83.333333%;
	background-size: 100%;
}

.comic-nav-button-chapterlast{
	background-position: 0 100%;
	background-size: 100%;
}

/* Tags Page */

.tag-link{
	display:block;
	margin:5px 0px;
	text-decoration:none!important;
}
	
.tag-thumbnail{
	background: url('/assets/icons/tag-loading.gif') #000 no-repeat;
	background-position: center;
	border: 1px solid #ccc;
	width: 100%;
	height: 200px;
}

	.tag-thumbnail p{
		text-align:center;
		margin-top:10px;
		color:#fff;
	}

	.tag-thumbnail-img{
		width:100%;
		height:100%;
		background-position: center;
		background-size: 100%;
		background-repeat:no-repeat;
	}

	.character-thumbnail:hover, .tag-thumbnail:hover{
		opacity: 0.8;
	}

.character-thumbnail{
	background-color: #000;
	background-repeat: no-repeat;
	border: 1px solid #ccc;
	width: 125px;
	height: 125px;
	background-position: top;
	background-size: 150%;
	float:right;
}

/* Mobile Prompts */

.left-swipe, .right-swipe{
	background-color:#fff;
	padding:5px;
	width:75px;
	text-align:center;
	position:fixed;
    top:50%;
	z-index:5000;
}

	.left-swipe{
		float:left;
		border-top-right-radius:10px;
		border-bottom-right-radius:10px;
		border:2px solid #6d6a66;
		border-left:0px solid #000;
		box-shadow:-2px 2px 5px #888888;
		left:0;
	}
	
	.right-swipe{
		float:right;
		border-top-left-radius:15px;
		border-bottom-left-radius:15px;
		border:2px solid #6d6a66;
		border-right:0px solid #000;
		box-shadow:2px 2px 5px #888888;
		right:0;
	}