/* CSS by Joe Weber - 2016 -*/
/* aquajoe.batcave.net ---------*/

/* General */
* { margin: 0; }

html, body {
	height: 100%;
	background-color: #a717aa;
	color: black;
	font-family: sans-serif, helvetica;	
	font-size: 1.0em;
}

h2 {
	display: inline;
	font-family: helvetica;
	font-size: 1.25em;
	padding: 0.5em;
}

h3 {
	display: inline;
	font-family: helvetica;
	font-size: 1.0em;
	padding: 0.5em;
}

p {
	text-indent: 1em;
	font-family: sans-serif;
}

p:first-letter {
	font-family: Arizonia;
	font-weight: bold;
	font-size: 2.0em;					
	line-height: 1.0em;	
}

/* Header */
#header {
	height: 80px;
	overflow: hidden;
	background-color: #a717aa;
}

/* SectionBar */
@font-face {
    font-family: 'Arizonia';
    src: url('../fonts/Arizonia-Regular-OTF-webfont.eot');
    src: url('../fonts/Arizonia-Regular-OTF-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Arizonia-Regular-OTF-webfont.woff') format('woff'),
         url('../fonts/Arizonia-Regular-OTF-webfont.ttf') format('truetype'),
         url('../fonts/Arizonia-Regular-OTF-webfont.svg#ArizoniaRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

#sectionbar { 	
	width: 608px;
	height: 80px;
	overflow: hidden;
	margin: auto;	
}

#sectionbar a {		
	text-decoration: none;
	color: black;
	padding-top: 0px;	
	font-family: Arizonia;	
}

#sectionbar .home { 
	font-family: Arizonia;
	font-size: 3.0em;
	float: left;
	display: block;
	background: url(../pictures/header2.png) no-repeat;
	background-position: 0px -80px; 
	width: 336px; 	
	text-align: left; 
	text-indent: 48px; 	
	height: 80px; 	
}

#sectionbar .rightSide {
	float: right;
	display: block;
	width: 256px;
	height: 80px;
}

#sectionbar .slogan {	
	display: block;
	width: 256px; 	
	text-align: left;
	height: 32px;
	font-size: 1.5em;
	font-family: Arizonia;
}

#sectionbar .rightBottom {
	display: block;
	width: 256px; 
	height: 48px;	
}

#sectionbar .writing { float: left; width: 64px; height: 48px; background: url(../pictures/header2.png) -352px -112px; }
#sectionbar .coding { float: left; width: 64px; height: 48px; background: url(../pictures/header2.png) -416px -112px; }
#sectionbar .people { float: left; width: 64px; height: 48px; background: url(../pictures/header2.png) -480px -112px; }
#sectionbar .twitter { float: left; width: 64px; height: 48px; background: url(../pictures/header2.png) -544px -112px; }

#sectionbar .home:hover{ background-position: 0px 0px; color: #0aa }
#sectionbar .writing:hover { background-position: -352px -32px; color: #0aa }
#sectionbar .coding:hover{ background-position: -416px -32px; color: #0aa }
#sectionbar .people:hover { background-position: -480px -32px; color: #0aa }
#sectionbar .twitter:hover { background-position: -544px -32px; color: #0aa }

/* Main */

/* Wrapper for everything else */
#overall {
	min-height: 100%;
}
	
#content {
	width: 100%;
	overflow: hidden;
	padding-bottom: 96px;
}

/* Blog */
#blog { }

/* Blog Posts */
.post {
	background: #fff;
	overflow: hidden;
}

.postHeader{	
	float: left;
	height: 96px;
	width: 100%;
	background: url(../pictures/blogbg2.png) 0px 0px repeat-x;
}

.postHeader .toCenter {
	width: 80%;
	margin: auto;
}

.toCenter .postDate {
	float: left;
	background: url(../pictures/blog2.png) 0px 0px no-repeat;
	width: 80px;
	height: 96px;
}

.postDate .month { color: black; padding: 12px 0px 0px 28px; }
.postDate .day { color: black; font-size: 1.5em; font-weight: bold; padding: 2px 0px 0px 28px;}
.postDate .year { color: black; padding: 4px 0px 0px 24px; }

.toCenter .postTitle {
	float: left;
	display: inline;
	background: url(../pictures/blog2.png) -80px 0px no-repeat;
	width:  432px;
	height: 96px;
	padding-top: 36px;
}

.post .postContent {
	float: left;
	display: block;
	width: 100%;	
	background-color: #a717aa;	
	padding-left: 16px;
}

.postContent .textArea {		
	display: block;	
	width: 80%;
	margin: auto;
}

.post .postBottom {
	float: left;
	height: 64px;
	width: 100%;
	background: url(../pictures/blogbg2.png) 0px -96px repeat-x;
}

.postBottom .seperator {
	background: url( ../pictures/blog2.png) 0px -96px no-repeat; height: 64px;
	width: 512px;
	margin: auto;
}

/* Tangents sticky footer */
#tangents {
	background-color: #a717aa;
	position: relative;
	margin-top: -96px;
	height: 96px;
	clear: both;
	font-size: 0.75em;
}

#tangents ul.gallery {
	list-style: none;
	overflow: hidden;
	height: 96px;
}

#tangents li.galpic1 {
	list-style: none;
	float: left;
	width: 40px;
}

#tangents li.galpic1 a {
	list-style: none;
	display: block;
	float: left;
}

#tangents li.galpic1 a img {
	list-style: none;
	width: 32px;
	height: 32px;
	padding-top: 64px;
	border: 0;
}

#tangents li.galpic1 a:hover {
	list-style: none;
	height: 96px;
}

#tangents li.galpic1 a:hover img {
	list-style: none;
	height: 96px;
	width: 160px;
	padding-top: 0px;
	border: 0;
}

#tangents li.galpic2 {
	list-style: none;
	float: left;
	width: 40px;
}

#tangents li.galpic2 a {
	list-style: none;
	display: block;
	float: left;
}

#tangents li.galpic2 a img {
	list-style: none;
	width: 32px;
	height: 40px;
	padding-top: 56px;
	border: 0;
}

#tangents li.galpic2 a:hover {
	list-style: none;
	height: 96px;
}

#tangents li.galpic2 a:hover img {
	list-style: none;
	height: 96px;
	width: 160px;
	padding-top: 0px;
	border: 0;
}
#tangents li.galpic3 {
	list-style: none;
	float: left;
	width: 40px;
}

#tangents li.galpic3 a {
	list-style: none;
	display: block;
	float: left;
}

#tangents li.galpic3 a img {
	list-style: none;
	width: 32px;
	height:  48px;
	padding-top: 48px;
	border: 0;
}

#tangents li.galpic3 a:hover {
	list-style: none;
	height: 96px;
}

#tangents li.galpic3 a:hover img {
	list-style: none;
	height: 96px;
	width: 160px;
	padding-top: 0px;
	border: 0;
}

#tangents li.rwp {
	width: 320px;
	height: 64px;
	padding-top: 32px;
	padding-left: 320px;
}

/* Footer Opera Fix */
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;
}
