/*
	AUTHOR: Scott Bradley
	scott@resolutioncomics.com
	
	big thanks to Chris Coyier! check out www.css-tricks.com
*/

/* RESETS & BASIC PAGE SETUP */
* { margin: 0; padding: 0; }
html {height: 100%; }
body { 
	font-family: "Tahoma", Verdana, sans-serif;
	background-color:#006633;
	height: 100%;
}

ul { list-style: none inside;
	font: 62.5% Verdana, sans-serif;
	font-size: 1.5em;
	line-height: 1.5em;
	margin-bottom: 1em;
	font-weight: bold;
	}
p { font-size: 1.25em; line-height: 1.5em; margin-bottom: 1.8em; }
	p.metadata { background: #fff9a7; padding: 3px;} 
a { outline: none;
	text-decoration: none;
	}
a img { border: none; }

/* TYPOGRAPHY ETC. */

h1 {
	font-size: 2.4em;
	font-weight: normal;
	color: #990000;
	}
	h1#logo {
		text-indent: -9999px;
		}

	h2 {
	font-size: 2em;
	font-weight: normal;
	text-align: center;
	color: #cc0000;
	}
	
h3 {
	font-size: 1.5em;
	font-weight: normal;
	text-align: center;
	color: #cc0000;
	}
h4{
	font-size: 1.5em;
	font-weight: normal;
	}
h5#FH2T {
		text-indent: -9999px;
		}

	
/* STRUCTURE */

.page-wrap
	{
	position: relative;
	width: 1024px;
	min-height: 100%;
	height: auto !important;
	height: 100%;
	margin: 0 auto;
	margin-bottom:-142px; /* the bottom margin is the negative value of the footer's height */
	}
	
	.header
		{
		position: relative;
		}
	#header-top {
		background: url(../images/header01.png) no-repeat;
		margin-top: -40px;
		width: 1020px;
		height: 228px;
		}
		
	ul#nav {
		height: 318px;
		}
		ul#nav li a {
			display: block;
			float: left;
			}
			ul#nav li a.home{
					text-indent: -9999px;
					background: url(../images/header02.png) no-repeat;
					background-position: 0px 0px;
					height: 232px;
					width: 330px;
					z-index:1;
					}
					ul#nav li a:hover.home{
					background-position: 0px -233px;
					}
			ul#nav li a.comics{
					text-indent: -9999px;
					background: url(../images/header03.png) no-repeat;
					background-position: 0px 0px;
					height: 232px;
					width: 164px;
					}
					ul#nav li a:hover.comics{
					background-position: 0px -233px;
					}		
			ul#nav li a.about{
					text-indent: -9999px;
					background: url(../images/header04.png) no-repeat;
					background-position: 0px 0px;
					height: 232px;
					width: 164px;
					}
					ul#nav li a:hover.about{
					background-position: 0px -233px;
					}
			ul#nav li a.links{
					text-indent: -9999px;
					background: url(../images/header05.png) no-repeat;
					background-position: 0px 0px;
					height: 232px;
					width: 362px;
					}
					ul#nav li a:hover.links{
					background-position: 0px -233px;
					}
	#latest-blog {
			width: 500px;
			margin: -110px 0px 20px 0px;
			background-color: white;
			float: left;
			padding-bottom: 10px;
			padding-left: 10px;
			padding-top: 10px;
			border: solid;
			border-width: 5px;
			border-color: black;
			}
			#latest-blog a{
				float:left;
				}
	#post-title{
				width: 285px;
				float:right;
				}
			#post-title h3{
				margin: 45px 5px 0px 5px;
				padding: 0px 5px 0px 5px;
				}
			#text-post{
			float:right;}

#blog-comment {
		padding: 10px 10px 10px 10px;
		background-color: #9dffcc;
		border: solid;
		border-width: 5px;
		border-color: #9dffcc;
		margin-bottom: 15px;
		}
.article-area{
			background-color:#99C2AD;
			min-height:100px;
			border:none;
			margin:-120px 0px 0px 0px;
			padding:20px 20px 20px 20px;
			}
		.article-area  li a{
			font-size:1em;
			}
		.article-area p{
			color:black;
			font-size:1em;
			}

.main-content-right{
				float:right;
				margin:-110px 0px 0px 20px;
				background-color: white;
				float: left;
				padding:10px 0px 10px 10px;
				border: solid;
				border-width: 5px;
				border-color: black;
				
				}
				
#comics-page-wrap{
			margin-top:-120px;
			}
				
				
	.caption-left{
			float:left;
			margin:0px 30px 0px 60px;		
			}
	.caption-right{
			margin: 20px 20px 0px 490px;
			}
	.comic-cover-full-right{
			float:right;
			margin: 20px 20px 0px 20px;
			}
	.comic-cover-full-left{
			float:left;
			margin: 20px 20px 0px 20px;
			}
	.comic-article-right{
			background-color:#cc8152;
			width:100%;
			max-width:610px;
			min-height:100px;
			border:solid;
			border-width: 3px;
			margin-right:40px;
			margin-top:40px;
			margin-left:280px;
			}
			.comic-article-right h4{
			margin:30px 0px 30px 20px;
			padding:0px 40px 0px 40px;
			}
			.comic-article-right p{
			margin:30px 0px 30px 20px;
			padding:0px 40px 0px 40px;
			}
			.comic-article-right form{
			margin:30px 0px 30px 20px;
			padding:0px 40px 0px 40px;
			}
.comic-article-left{
			background-color:#99C2AD;
			float:left;
			width:100%;
			max-width:610px;
			min-height:100px;
			border:solid;
			border-width: 3px;
			margin:-20px 280px 0px 40px;
			}
			.comic-article-left p{
			margin:30px 0px 30px 20px;
			padding:0px 40px 0px 40px;
			}
			.comic-article-left form{
			margin:30px 0px 30px 20px;
			padding:0px 40px 0px 40px;
			}
			.comic-article-left a{
			margin:60px 0px 30px 20px;
			padding:0px 40px 0px 40px;
			text-align:center;
			font-size: 1.5em;
			}
		
#webcomic-image{
			float:right;
			margin: -60px 60px 0px 0px;
			}
			.comic-cover {
				float:left;
				width:181px;
				margin-top: 20px;
				padding-right:20px;
				}

.individual-title-info{
			padding-top:200px;
			}
.comic-panels{
			float:left;
			margin: 10px 20px 10px 0px;
			}
	.clear{
			clear: both;
			}
			/* big thanks to Ryan Fait for the sticky footer www.ryanfait.com */
	.push{
			height: 142px;
			}
	.footer{
			height: 142px;
			}
			
/* Blog styles */
	#blog-title h1 a {
		color: red;
		margin-left: 60px;
		}
		#blog-title p{
			font-style: italic;
			margin-left: 130px;
			}
.post {
		padding: 10px 10px 10px 10px;
		background-color: #9dffcc;
		border: solid;
		border-width: 5px;
		border-color: #9dffcc;
		margin-bottom: 15px;
		}