/* April Zero - Core Stylesheet - Revision B */

/* Table of Contents 

=====
Dash
=====
Navigation
=========
North:

West    |     East

=========
South:

West    |     East

=========
Footer

&&> 1. Typography

&&&&&&> a. Headers
&&&&&&> b. Text
&&&&&&> c. Links
&&&&&&> d. Blockquotes
&&&&&&> e. Lists
&&&&&&> f. Definitions

&&> 2. Dash

&&&&&&> a. Basics
&&&&&&> a. Logo

&&> 3. Navigation

&&&&&&> a. Bar
&&&&&&> b. Positioning
&&&&&&> c. Buttons
&&&&&&> d. Hover
&&&&&&> e. Current Page

&&> 4. North

&&&&&&> a. Background
&&&&&&> b. Two Columns

&&> 5. NorthWest Block

&&&&&&> a. Basics

&&> 6. NorthEast Block

&&&&&&> a. Basics
&&&&&&> b. Article Boxes

&&> 7. South

&&&&&&> a. Background
&&&&&&> b. Two Columns

&&> 8. SouthEast Block

Uncharted.

Let The Games Begin! */

@import url("ela.css");

* {
	margin: 0;
	padding: 0;
	}

body {
	text-align: center;
	background: #222;
	}

.container {
	text-align: left;
	margin: 0 auto;
	width: 975px;
	}

#progress {
	background: url(../i/progress.jpg);
	position: absolute;
	top: 0px;
	right: 15px;
	width: 298px;
	height: 120px;
	}

#dash .container {
	position: relative;
	}

.clear {
	clear:both;
}

/*&&&&&&> 1. Typography */

hr {
	border: 1px solid #ccc;
	border-width: 1px 0 0 0;
	height: 1px;
	margin-top:1px;
	margin-bottom:1px;
	}

#south hr {
	border-color: #555;
	}

/*&&&> 1a. Headers */

h1 {
	font: 16px/14px "lucida grande","trebuchet ms",verdana,sans-serif;
	color: #333;
	margin: 6px 0 0 0;
	text-decoration: none;
	}	

#south h1,#south h2 {
	color: #eee;
	}

#north h1 a {
	color: #333;
	}

#south h1 a {
	color: #ccc;
	}

h1 a,h2 a,h3 a {
	text-decoration: none;
	color: inherit;
	}

h2 {
	font: 14px/22px "lucida grande","trebuchet ms",verdana,sans-serif;
	color: #333;
	}

h3 {
	font: 12px/34px "lucida grande","trebuchet ms",verdana,sans-serif;
	color: #555;
	}

#south h3 {
	color: #777;
	}

/*&&&> 1b. Text */

p {
	font: 11px/22px "lucida grande","trebuchet ms",verdana,sans-serif;
	color: #555;
	margin: 6px 0;
	}	

#south p {
	color: #888;
	}
	
/*&&&> 1c. Link */

p a,h3 a {
	text-decoration: underline;
	}

p a:hover,h3 a:hover {
	text-decoration: none;
	}

p a:visited {
	text-decoration: none;
	}

/*&&&> 1e. Lists */

#north ul,#south ul {
	list-style: none;
	margin: 5.5px 0;
	}

#north ul li,#south ul li  {
	font: 12px/22px "lucida grande",verdana,sans-serif;
	}

#north ul li a,#south ul li a {
	display: block;
	padding: 0 0 0 0px;
	}

#north ul li a:hover,#south ul li a:hover {
	text-decoration: none;
	}

#south ul a {
	color: #ccc;
	}

/*&&&&&&> 2. Dash */

/*&&&> 2a. Basics */

#dash {
	background: url(../i/dash_background.jpg) repeat-x top; /* Blue! */
	height: 180px;
	position: relative;
	width: 100%;
	min-width: 975px;
	}

.blog #dash { /* redundant */
	background-image: url(../i/dash_background.jpg);
	}

.gallery #dash {
	background-image: url(../i/dash_red_black.jpg);
	}

.about #dash {
	background-image: url(../i/dash_green.jpg);
	}

.contact #dash {
	background-image: url(../i/dash_orange_black.jpg);
	}

.search #dash,.archives #dash {
	background-image: url(../i/dash_grey.jpg);
	}

/*&&&> 2a. Logo */

#dash h1 {
	background: url(../i/logo_2.jpg) no-repeat top left;
	height: 120px;
	width: 500px;
	margin: 0;
	position: relative;
	}

#dash h1 a {
	display: block;
	position: absolute;
	top: 17px;
	left: 20px;
	width: 300px;
	height: 80px;
	}

#dash a img {
	display: none;
	border: 0 none;
	}

/*&&&&&&> 3. Navigation */

/*&&&> 3a. Bar */

#navigation {
	list-style: none;
	position: absolute;
	top: 120px;
	height: 55px;
	width: 975px;
	}

/*&&&> 3b. Positioning */

#navigation li {
	float: left;
	height: 55px;
	width: 125px;
	}

#navigation li a { 
	background: url(../i/navigation.jpg) no-repeat top left;
	font: 12px/40px "lucida grande","trebuchet ms",verdana,sans-serif;
	color: #fff;
	display: block;
	text-align: center;
	text-decoration: none;
	width: 100%;
/* Short Links (Not Active Page) */
	margin: 8px 0 0 0;
	height: 42px; 
	}

.gallery #navigation li a.gallery,.contact #navigation li a.contact {
	background-image: url(../i/navigation_black.jpg);
	}

#navigation li a span {
	visibility: hidden;
	}

/*&&&> 3c. Buttons */

#navigation a.blog {
	background-position: 0 0;
	}

#navigation a.gallery {
	background-position: -125px 0;
	}

#navigation a.about {
	background-position: -250px 0;
	}

#navigation a.contact {
	background-position: -375px 0;
	}

/* Stagger! */

#navigation a.archives,#navigation a.feed {
	display: block;
	position: absolute;
	top: 0;
	width: 100px;
	}

#navigation a.archives {
	left: 675px;
	background-position: -500px 0;
	}

#navigation a.feed {
	left: 775px;
	background-position: -600px 0;
	}

/*&&&> 3d. Hover */

#navigation .blog:hover {
	background-position: 0 -97px;
	}

#navigation .gallery:hover {
	background-position: -125px -97px;
	}
	
#navigation .about:hover {
	background-position: -250px -97px;
	}

#navigation .contact:hover {
	background-position: -375px -97px;
	}

#navigation .archives:hover {
	background-position: -500px -97px;
	}

#navigation .feed:hover {
	background-position: -600px -97px;
	}

/*&&&> 3e. Current Page */

.blog #navigation .blog,.gallery #navigation .gallery,.about #navigation .about,.contact #navigation .contact,.search #navigation .search,.archives #navigation .archives,.blog #navigation .blog:hover,.gallery #navigation .gallery:hover,.about #navigation .about:hover,.contact #navigation .contact:hover,.search #navigation .search:hover,.archives #navigation .archives:hover  {
	margin: 0;
	height: 55px !important;
	}

.blog #navigation .blog {
	background-position: 0 -42px !important;
	}

.gallery #navigation .gallery {
	background-position: -125px -42px !important;
	}

.about #navigation .about {
	background-position: -250px -42px !important;
	}

.contact #navigation .contact {
	background-position: -375px -42px !important;
	}

.archives #navigation .archives {
	background-position: -500px -42px !important;
	}
	
.feed #navigation .feed {
	background-position: -600px -42px !important;
	}

/*&&&&&&> 4. North */

/*&&&> 4a. Background */

#north {
	background: #e1e1e1;
	padding: 5px 0 0px 0;
	margin: 0;
	width: 100%;
	min-width: 975px;
	}

.gallery #north {
	background: #1a1a1a;
	}

/*&&&> 4b. Two Columns (Home Page - East & West) */

#north .west {
	float: left;
	width: 665px;
	}

#north .east {
	float: left;
	margin: 0 0 0 10px;
	width: 275px;
	}

/*&&&&&&> 5. NorthWest Block */

/* Main content stuff */

#north a img {
	background: #bbb;
	border: 1px solid #fff;
	padding: 3px;
	}

#north a:hover img {
	background: #999;
	}

#north .west .left {
	float: left;
	}

#north .west a img.left {
	margin: 5px 10px 5px 0;
	}
	
#north .west .right {
	float: right;
	}

#north .west a img.right {
	margin: 5px 0 5px 10px;
	}

/* Blue Blog Color */

#latest h3,#latest p a {
	color: #0077ee;
	}

/*&&&> 5a. Background */

#north .west .block {
	width: 665px;
	background: #eee url(../i/latest_bg.jpg) no-repeat top left;
	/* Padding Applied in .Lightshadow */
	margin: 0 0 10px 0;
	}

/*&&&> 5b. Borders */

#north .west .highlight {
	border: 1px solid #f1f1f1;
	}

#north .west .darkshadow {
	border: 1px solid #dadada;
	}

#north .west .mediumshadow {
	border: 1px #e5e5e5;
	}

#north .west .lightshadow {
	border: 1px solid #eaeaea;
	padding: 5px 10px 0 10px;
	}

/*&&&> 5c. Load Stagger */

#north .west h1 {
	margin-top: 14px;
	margin-left: 13px;
	}

#north .west p,#north .west h3,#north .west hr {
	margin-left: 13px;
	margin-right: 13px;
	}

#north .west .lightshadow h1,#north .west .east .south h1 {
	margin-top: 6px;
	margin-left: 0;
	}

#north .west .lightshadow p,#north .west .lightshadow h3,#north .east .south .post,#north .east .south h3,#north .east .south hr,#north .west .lightshadow hr {
	margin-left: 0;
	margin-right: 0;
	}

/*&&&&&&> 6. NorthEast Block */

/* Blog Color: Blue */

#north li a {
	color: #777;
	}

#north .east h3,#north .east p a,#north .east hr {
	color: #0077ee;
	}

/*&&&> 6a. Basics */

#north .east .block {
	background: #e1e1e1 url(../i/northeast_bg.jpg) repeat-y top left;
	margin: 0 0 10px 0;
	}

#north .east .block .north {
	background: url(../i/northeast_north.jpg) no-repeat top left;
	}

#north .east .block .south {
	background: url(../i/northeast_south.jpg) no-repeat bottom left;
	padding: 8px 10px 4px 15px;
	}


/* Prevents Carrying over to .south in .post */

#north .east .block .post .south {
	padding: 0;
	background: transparent;
	}

/*&&&> 6b. Load Stagger */

#north .east h1 {
	margin-top: 14px;
	margin-left: 15px;
	}

#north .east .post {
	margin-left: 15px;
	}

#north .east h3,#north .east hr {
	margin-left: 15px;
	}

#north .east .south h1 {
	margin: 6px 0 0 0;
	}

#north .east .south .post,#north .east .south h3,#north .east .south hr {
	margin-left: 0;
	margin-right: 0;
	}

/*&&&> 6c. Content */

#north .east .post h1 {
	font: 14px/22px "lucida grande","trebuchet ms",verdana,sans-serif;
	margin: 0 !important;
	}

#north .east .post p {
	font: 11px/20px "lucida grande","trebuchet ms",verdana,sans-serif;
	margin: 0;
	color: #555;
	}

/*&&&&&&> 7. South */

#south {
	clear: both;
	background: #111;
	padding: 10px 0 0px 0;
	width: 100%;
	min-width: 975px;
	min-height: 50px;
	}

/*&&&> 7b. Two Columns (East & West) */

#south .west {
	background: transparent;
	width: 665px;
	float: left;
	}

#south .east {
	float: left;
	margin: 0 0 0 10px;
	width: 275px;
	}

#south .block {
	color: #777;
	}

/*&&&&&&> 8. SouthWest Block (Entries,Comments,Flickr,etc.) */

/* Blue Blog Color */

#entries h3,#entries p a,#entries hr,#entries li a,#entries a:hover {
	border-color: #9cf;
	color: #99ccff;
	}

/* Pink Flickr Color */

/* To be applied.. */

/*&&&> 8a. Basics */

#south .west .block {
	padding: 0;
	/* Padding Applied in Lightshadow */
	background: #202020;
	width: 665px;
	margin: 0 0 10px 0;
	}

/*&&&> 8b. Borders */

#south .west .block .highlight {
	border: 1px solid #242424;
	}

#south .west .block .darkshadow {
	border: 1px solid #151515;
	}

#south .west .block .mediumshadow {
	border: 1px solid #1a1a1a;
	}

#south .west .block .lightshadow {
	border: 1px solid #1d1d1d;
	padding: 5px 10px 0 10px;
	}
	
#south .west .block .highlight {
	border: 1px solid #222;
	}

#south .west .block .darkshadow {
	border: 1px solid #141414;
	}

#south .west .block .mediumshadow {
	border: 1px solid #1b1b1b;
	}

#south .west .block .lightshadow {
	border: 1px solid #1d1d1d;
	padding: 5px 10px 0 10px;
	}
/*&&&> 8c. Posts - Entries or Comments */

#south .west .post {
	background: url(../i/stripe_bg.jpg) repeat-y bottom left;
	padding: 0;
	margin: 11px 0;
	}

#south .west .info {
	float: left;
	background: url(../i/stripe_title.jpg) no-repeat top left;
	width: 210px;
	padding: 7px 30px 5px 10px;
	text-align: right;
	min-height: 88px;
	}

#south .west .info h1 {
	color: #fff;
	font: 14px "lucida grande","trebuchet ms",verdana,sans-serif;
	}

#south .west .info h3 {
	font: 11px/24px "lucida grande","trebuchet ms",verdana,sans-serif;
	}

#south .west .stripe {
	background: url(../i/stripe_blue.jpg) no-repeat top left;
	padding: 9px 10px 0px 0px;
	}

#south .west .content {
	margin: 0 0 0 265px;
	padding: 3px 0 0 0;
	min-height: 150px;
	}

#south .west .south {
	background: url(../i/stripe_south.jpg) no-repeat bottom left;
	padding: 0 0 5px 0;
	}

/* Stripe Load Stagger */

#south .west .info {
	padding: 16px 30px 15px 10px;
 	}

#south .west .content {
	padding: 12px 10px 0 0;
	}

#south .west .stripe .info {
	padding: 7px 30px 35px 10px;
	width: 210px;
	}

#south .west .stripe .content {
	padding: 3px 0 0 0;
	}

/*&&&&&&> 9. SouthEast Block (Diary,Tags,Etc) */

/*&&&> 9a. Basics */

#south .east .block {
	background: #111 url(../i/southeast_bg.jpg) repeat-y left;
	float: left;
	margin: 0 0 10px 0;
	padding: 0;
	width: 300px;
	}

/* Green Diary/Tags Color */

.home #south .east h3,.home #south .east a,.home #south .east hr,.home #south .east li a  {
	border-color: #9c3;
	color: #99cc33;
	}

#diary a,#diary h3,#diary hr,#tags a,#tags h3,#tags hr {
	border-color: #9c3;
	color: #99cc33;
	}


/*&&&> 9b. Octopus */

#south .east .north {
	background: url(../i/southeast_north.jpg) no-repeat top left;
	}

#south .east .south {
	background: url(../i/southeast_south.jpg) no-repeat bottom left;
	padding: 9px 10px 5px 15px;
	}

/*&&&> 9c. Load Stagger */

#south .east  h1 {
	margin-top: 14px;
	margin-left: 15px;
	}

#south .east  .post {
	margin-left: 15px;
	}

#south .east  h3,#south .east   hr {
	margin-left: 15px;
	}

#south .east  .south h1 {
	margin-top: 6px;
	margin-left: 0;
	}

#south .east  .south .post,#south .east  .south h3,#south .east  .south hr {
	margin-left: 0;
	margin-right: 0;
	}

/*&&&&&&> 10. Diary Entries (#south .east .block#diary .post) */

#south .east .post {
	background: #111 url(../i/diary_bg.jpg) repeat-y bottom left;
	margin: 11px 0;
	}

#south .east .post .stripe {
	padding: 15px 10px 10px 10px;
	background: url(../i/diary_stripe.jpg) no-repeat top left;
	}

#south .east .post .south {
	background: transparent;
	padding: 0;
	}

#south .east .post h1 {
	font: 14px/22px "lucida grande","trebuchet ms",verdana,sans-serif;
	margin: 0;
	}

#south .east .post p {
	font: 11px/22px "lucida grande","trebuchet ms",verdana,sans-serif;
	margin: 0;
	}

#south .east .post h3 {
	margin: 0;
	padding: 0;
	line-height: 18px;
	}	

/* Diary Load Stagger */

#south .east h1 {
	margin-top: 14px;
	margin-left: 15px;
	}

#south .east .post {
	margin-left: 15px;
	}

#south .east h3,#south .east  hr {
	margin-left: 15px;
	}

#south .east .south h1 {
	margin-top: 6px;
	margin-left: 0;
	}

#south .east .south .post,#south .east .south h3,#south .east .south hr {
	margin-left: 0;
	margin-right: 0;
	}

/*&&&&&&> 11. FlickR (#north .west .block#flickr) */

/* This part is kinda temporary - needs to be spiced up */

#flickr h3,#flickr p a,#flickr hr,#flickr span {
	border-color: #e25;
	color: #e25;
	}

#flickr ul {
	list-style: none;
	}

#flickr li {
	float: left;
	margin: 5px 3px;
	}

#flickr a img {
	background: #333 url(../i/flickr_inlay.jpg) repeat-x top;
	border: 0 none;
	padding: 5px;
	}

#flickr a:hover img {
	background-image: url(../i/flickr_inlay_pink.jpg);
	}

#flickr h3,#flickr hr {
	clear: both;
	}

#flickr h3 span {
	color: #fff !important;
	}

/*&&&&&&> 12. Comments (#north .west .block#comments (.post)) */

/*&&&> 12a. Basics */

#comments h3,#comments p a,#comments hr {
	border-color: #9cf;
	color: #99ccff;
	}

/*&&&> 12b. Boxes */

#comments .post {
	background: url(../i/stripe_bg.jpg) repeat-y bottom left;
	padding: 0;
	margin: 11px 0;
	clear: left;
	}

#south .west #comments .stripe {
	background-image: url(../i/stripe_grey.jpg);
	}

/* My comments blue! */

#south .west #comments .me .stripe {
	background-image: url(../i/stripe_blue.jpg);
	}

#south .west #comments .info {
	background-image: url(../i/comment_title.jpg);
	text-align: left;	
	position: relative;
	padding-left: 15px;
	}

.gravatar {
	position: absolute;
	width: 50px;
	height: 50px;
	top: 17px;
	right: 38px;
	border: 0 none;
	}

/*&&&&&&> 12. Comments Form */

#comment_form h3,#comment_form hr {
	color: #ffce40;
	border-color: #ffce40;
	}

#comment_form textarea {
	background: #111 url(../i/textarea_raquo_grey.jpg) no-repeat top left;
	border: 1px solid #333;
	color: #999;
	font: 11px/20px "lucida grande",verdana,sans-serif;
	padding: 3px 30px 5px 7px;
	margin: 5px 0 0 0;
	height: 120px;
	width: 598px;
	}

#comment_form textarea:hover {
	background-image: url(../i/textarea_raquo_blue.jpg);
	}	

#comment_form textarea:focus {
	background-image: url(../i/textarea_raquo_orange.jpg);
	}	

#comment_form input {
	background: #111 url(../i/input_raquo_grey.jpg) no-repeat top left;
	border: 1px solid #333;
	color: #999;
	font: 12px/22px "lucida grande",verdana,sans-serif;
	padding: 4px 35px 4px 7px;
	margin: 3px 10px 0 0;
	width: 205px;
	height: 17px;
	}

#comment_form input:hover {
	background-image: url(../i/input_raquo_blue.jpg);
	}

#comment_form input:focus {
	background-image: url(../i/input_raquo_orange.jpg);
	}

#comment_form small {
	font: 9px/20px "lucida grande",verdana,sans-serif;
	}	

#comment_form #submit {
	height: 25px;
	padding: 3px;
	margin: 0 0 5px 0;
	}

/*&&&&&&> 13. Footer */

#footer {
	background: #222 url(../i/footer_blue.jpg) repeat-x top;
	clear: both;
	text-align: center;
	padding: 0;
	color: #999;
	}

#footer p#mast {
	background: url(../i/footer_blue_mast.jpg) no-repeat center top;
	width: 975px;
	display: block;
	margin: 0 auto;
	color: #999;
	height: 45px;
	padding: 30px 0 0 0;
	text-align: center;
	}

.gallery #footer p#mast {
	background-image: url(../i/footer_red_mast.jpg);
	}

.gallery #footer {
	background-image: url(../i/footer_red.jpg);
	}

.about #footer p#mast {
	background-image: url(../i/footer_green_mast.jpg);
	}

.about #footer {
	background-image: url(../i/footer_green.jpg);
	}

.contact #footer p#mast {
	background-image: url(../i/footer_orange_mast.jpg);
	}

.contact #footer {
	background-image: url(../i/footer_orange.jpg);
	}


#south {
	margin-bottom: 0;
	}

#footer a {
	color: #aaa;
	}

#footer a:hover {
	color: #ccc;
	}

/*&&&&&&> 14. About */

.about #north h3,.about #north hr,.about #north p a {
	color: #598527;
	border-color: #598527;
	}

.about #vitals p {
	margin: 2px 0;
	}	

/*&&&&&> 15. Contact Form */

.contact #south .east p {
	margin: 2px 0;
	}

.contact #south h3,.contact #south hr,.contact #south a {
	color: #ffce40;
	border-color: #ffce40;
	}

.contact #north {
	display: none;
	}

.contact #contact_form fieldset {
	border: 0 none;
	width: auto;
	}

#contact_form h2 {
	margin: 1px 0;
	}

.contact textarea {
	background: #111 url(../i/textarea_raquo_grey.jpg) no-repeat top left;
	border: 1px solid #333;
	color: #999;
	font: 11px/20px "lucida grande",verdana,sans-serif;
	padding: 3px 30px 5px 7px;
	margin: 5px 0 0 0;
	height: 120px;
	width: 598px;
	}

.contact textarea:hover {
	background-image: url(../i/textarea_raquo_blue.jpg);
	}	

.contact textarea:focus {
	background-image: url(../i/textarea_raquo_orange.jpg);
	}	

.contact input {
	background: #111 url(../i/input_raquo_grey.jpg) no-repeat top left;
	border: 1px solid #333;
	color: #999;
	font: 12px/22px "lucida grande",verdana,sans-serif;
	padding: 4px 35px 4px 7px;
	margin: 3px 10px 0 0;
	width: 205px;
	height: 17px;
	}

.contact input:hover {
	background-image: url(../i/input_raquo_blue.jpg);
	}

.contact input:focus {
	background-image: url(../i/input_raquo_orange.jpg);
	}

.contact label {
	font: 9px/20px "lucida grande",verdana,sans-serif;
	}	

.contact #sendContactEmail {
	height: 25px;
	padding: 3px;
	margin: 0 0 5px 0;
	}

/*&&&&&> 16. Archives */

.archives #south h3 {
	color: #6dcff6;
	}

.archives #south .right,.archives #south .left {
	width: 300px;
	float: left;
	padding: 0 10px;
	}

.archives #south .center {
	float: left;
	width: 300px;
	margin: 0 10px;
	}

.archives #south {
	padding: 10px 0 15px 0;
	}
	
.archives #recentcomments li {
	padding:0 0 6px 0;
}

.archives #recentcomments a {
	display:inline;
}

/*&&&&&&> z. Patches */

/*&&&>  a. Clearfix */

.clear {
	clear:both;
}

.clearfix:after,#north:after,#south:after {
	content: "."; 
	display: block;
	height: 0; 
	clear: both; 
	visibility: hidden;
	}
	
.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix,* html #north,* html #south {height: 1%;}

/* End hide from IE-mac */