/*

Theme Name: Family Man
Theme URI: https://www.mindfaucet.com/
Author: Mindfaucet
Author URI: https://www.mindfaucet.com/
Description: Official Family Man Website
Version: 2.0

*/


html {
	margin: 0;
	padding: 0;
}

body {
    margin: 0;
	padding: 0;
	font-family: 'Alegreya', serif;
    font-size: 18px;
	line-height: 120%;
	font-weight: normal;
	color: #464331;
	background-color: #5e5a40;
	background-image: url(style/background.jpg);
	background-position: center;
	background-size: 100% auto;
	background-repeat: repeat;
}

a {
	color: #c80f21;
	text-decoration: none;
}

	a:hover {
		color: #0099d4;;
	}

	a:focus {
		outline: none;
	}
	
button::-moz-focus-inner {
	border: 0; 
}

input:focus {
	outline: none;
}

input::-moz-focus-inner {
	border: 0; 
}

hr {
	height: 4px;
	color: #e0e0e0;
	background-color: #e0e0e0;
	border: 0px;
}

img {
	border: none;
}

.clear {
	clear: both;
}

.clear-left {
	clear: left;
}

table {
	padding: 0;
	margin: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

tr, td {
	padding: 0;
	margin: 0;
}


/* HEADER */

#header {
	width: 100%;
	min-height: 10px;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}

#header img {
	float: left;
	display: block;
}

#header-top-left {
	width: 4.717%;
}

#header-top {
	width: 90.566%;
}

#header-top-right {
	width: 4.717%;
}

#header-middle-left {
	width: 4.717%;
}

.header-new {
	width: 15.330%;
}

.header-table {
	width: 12.382%;
}

.header-cast {
	width: 9.434%;
}

.header-notes {
	width: 12.382%;
}

.header-patron {
	width: 14.740%;
}

.header-books {
	width: 12.972%;
}

.header-more {
	width: 13.326%;
}

#header-middle-right {
	width: 4.717%;
}

#header-bottom {
	width: 100%;
}

#header a img.hover {
    display: none;
}
#header a img.default {
    display: block;
}
#header a:hover img.hover {
    display: block;
}
#header a:hover img.default {
    display: none;
}

#preload-01 { background: url('style/header-new-hover.jpg') no-repeat -9999px -9999px; }
#preload-02 { background: url('style/header-table-hover.jpg') no-repeat -9999px -9999px; }
#preload-03 { background: url('style/header-cast-hover.jpg') no-repeat -9999px -9999px; }
#preload-04 { background: url('style/header-notes-hover.jpg') no-repeat -9999px -9999px; }
#preload-05 { background: url('style/header-patron-hover.jpg') no-repeat -9999px -9999px; }
#preload-06 { background: url('style/header-books-hover.jpg') no-repeat -9999px -9999px; }
#preload-07 { background: url('style/header-more-hover.jpg') no-repeat -9999px -9999px; }

#comic {
	width: 100 0px;
	display: block;
	margin: 0 auto;
	box-shadow: 0 5px 15px #000;
}


/* COMIC */

#prev-desc {
	max-width: 1200px;
	padding: 10px 20px 20px 20px;
	margin: 0 auto;
	text-align: center;
	font-family: 'Alegreya', serif;
	color: #d4cfbc;
	font-style: italic;
	font-size: 1.5vw;
	line-height: 100%;
}

#prev-desc-label {
	font-family: 'Alegreya SC', serif;
	font-style: normal;
}

@media (min-width: 0px) and (max-width: 1200px) { 

	#prev-desc {
		font-size: 16px;
	}

}

#comic-wrap {
	margin: 0 auto;
	max-width: 1200px;
}

.comic-nav {
	width: 10%;
	float: left;
	display: block;
}

#comic {
	width: 80%;
	float: left;
	display: block;
}

#comic-wrap a img.hover {
    display: none;
}
#comic-wrap a img.default {
    display: block;
}
#comic-wrap a:hover img.hover {
    display: block;
}
#comic-wrap a:hover img.default {
    display: none;
}

@media (min-width: 0px) and (max-width: 800px) { 

	.comic-nav {
		width: 0%;
	}
	
	#comic {
		width: 94%;
		margin: 0 auto;
		float: none;
	}

}

#preload-08 { background: url('style/comic-prev-hover.png') no-repeat -9999px -9999px; }
#preload-09 { background: url('style/comic-next-hover.png') no-repeat -9999px -9999px; }


/* NAVIGATION */

#nav {
	margin: 10px auto 0 auto;
	max-width: 1000px;
}

@media (min-width: 0px) and (max-width: 1200px) { 

	#nav {
		width: 85%;
	}

}

@media (min-width: 0px) and (max-width: 800px) { 

	#nav {
		width: 100%;
	}

}

.nav-first {
	width: 16%;
	display: block;
	float: left;
}

#nav-spacer1 {
	width: 8%;
	display: block;
	float: left;
}

.nav-previous {
	width: 24%;
	display: block;
	float: left;
}

#nav-spacer2 {
	width: 8%;
	display: block;
	float: left;
}

.nav-next {
	width: 14%;
	display: block;
	float: left;
}

#nav-spacer3 {
	width: 10%;
	display: block;
	float: left;
}

.nav-latest {
	width: 20%;
	display: block;
	float: left;
}

#nav a img.hover {
    display: none;
}
#nav a img.default {
    display: block;
}
#nav a:hover img.hover {
    display: block;
}
#nav a:hover img.default {
    display: none;
}

#preload-10 { background: url('style/nav-first-hover.png') no-repeat -9999px -9999px; }
#preload-11 { background: url('style/nav-previous-hover.png') no-repeat -9999px -9999px; }
#preload-12 { background: url('style/nav-next-hover.png') no-repeat -9999px -9999px; }
#preload-13 { background: url('style/nav-latest-hover.png') no-repeat -9999px -9999px; }


/* BLOG */

#blog-top {
	height: 39px;
	background-image: url('style/blog-top.png');
	background-position: center top;
	background-repeat: no-repeat;
}

#blog-wrap {
	background-image: url('style/blog-wrap.png');
	background-position: center top;
	background-repeat: no-repeat;
}

#blog-repeat {
	width: 900px;
	margin: 0 auto;
	background-image: url('style/blog-repeat.jpg');
}

#blog {
	min-height: 1154px;
	background-image: url('style/blog.jpg');
	backround-position: center top;
	background-repeat: no-repeat;
}

#blog-shadow {
	height: 32px;
	background-image: url('style/blog-shadow.png');
	background-position: center top;
}

#blog-twitter {
	width: 55px;
	height: 55px;
	margin: 35px 0 0 0;
	display: block;
	float: right;
	text-indent: 9999px;
	overflow: hidden;
}

#blog-tumblr {
	width: 55px;
	height: 55px;
	margin: 35px 0 0 8px;
	display: block;
	float: right;
	text-indent: 9999px;
	overflow: hidden;
}

#blog-facebook {
	width: 55px;
	height: 55px;
	margin: 35px 0 0 8px;
	display: block;
	float: right;
	text-indent: 9999px;
	overflow: hidden;
}

#blog-patreon {
	width: 55px;
	height: 55px;
	margin: 35px 40px 0 8px;
	display: block;
	float: right;
	text-indent: 9999px;
	overflow: hidden;
}

#blog-content {
	padding: 0 50px 30px 120px;
}

h1  {
	font-size: 50px;
	font-weight: normal;
	font-style: italic;
	text-align: center;
	width: 650px;
}

#comic-page {
	font-family: 'Alegreya SC', serif;
	font-size: 24px;
	text-align: center;
	width: 650px;
}

#blog-date {
	padding: 0 0 20px 0;
	font-family: 'Alegreya SC', serif;
	text-align: center;
	width: 650px;
}

	#blog-date em {
		font-family: 'Alegreya', serif;
	}

@media (min-width: 0px) and (max-width: 925px) { 

	#blog-top {
		display: none;
	}
	
	#blog-wrap {
		padding-top: 10px;
		font-size: 16px;
	}
	
	#blog-repeat {
		width: 100%;
		margin: 0;
		background-image: url('style/blog-repeat.jpg');
		background-position: right top;
	}

	#blog {
		width: 100%;
		min-height: 0;
		background-image: url('style/blog.jpg');
		background-position: right top;
		background-repeat: no-repeat;
	}
	
	#blog-content {
		padding: 30px 5% 30px 5%;
	}
	
	h1  {
		font-size: 35px;
		font-weight: normal;
		font-style: italic;
		text-align: center;
		line-height: 100%;
		width: 100%;
	}

	#comic-page {
		font-family: 'Alegreya SC', serif;
		font-size: 18px;
		text-align: center;
		width: 100%;
	}

	#blog-date {
		padding: 0 0 20px 0;
		font-family: 'Alegreya SC', serif;
		text-align: center;
		width: 100%;
	}

}

	
/* FOOTER */

#footer {
	margin: 0 auto;
	max-width: 1000px;
	color: #29271d;
	text-align: center;
	line-height: 150%;
	font-size: 16px;
}

	#footer a {
		color: #55513e;
	}

#footer-top {
	display: block;
	width: 100%;
}

#footer-bottom-left {
	width: 6%;
	display: block;
	float: left;
}

#footer-bottom-middle {
	width: 88%;
	height: 65px;
	float: left;
	background: url('style/footer-bottom-middle.jpg');
	background-size: 100% auto;
}

		
#footer-bottom-right {
	width: 6%;
	display: block;
	float: left;
}

@media (min-width: 0px) and (max-width: 1000px) { 

	#footer {
		font-size: 1.9vw;
	}
	
	#footer-bottom-middle {
		height: auto;
	}
	
	#footer-bottom-middle::after {
		padding-top: 0.75%;
		display: block;
		content: '';
	}
	
}