/*
Theme Name: The Personality
Theme URI: http://thetylerhayes.com
Description: A personal theme for Tyler Hayes, by Tyler Hayes. (Built on the framework of Elliot Jay Stocks' WONDERFUL Starkers - the totally nude - theme)
Version: 1.0
Author: Tyler Hayes
Author URI: http://thetylerhayes.com
Tags: the, tyler, hayes
*/

	/* TheTylerHayes.com layout  */
	/* You may copy or adapt elements of this CSS in your own projects, but the design is copyright 2010 Tyler Hayes and may not be reproduced without permission. */
	/* Last updated Apr 29, 2010 */ 
	
	/* Table of Contents
	1.0 Remove browser styles, a.k.a. reset.css
	2.0 IE (all versions), a.k.a. ie.css
	3.0 Typography, a.k.a. typography.css
	  3.1 Font stack options, as recommended by Nathan Ford
	4.0 The general layout, a.k.a. layout.css
	  4.1 Site-wide rules
	  4.2 Re-usable elements
	  4.3 Template, incl. Header, Index, Comments, Sidebar, Footer
	  4.4 About-specific
	  4.5 Blog Home-specific
	  4.6 Single-specific
	  4.7 Page-specific
	  4.8 Archive-specific
	  4.9 Search-specific
	*/
	
	
	/* My fellow Americans. As a young boy, I dreamed of being a baseball, but tonight I say, we must move forward, not backward, upward not forward, and always twirling, twirling, twirling towards freedom. -- Kodos gives a speech, "Treehouse of Horror VII" */
	
	
	/* 1.0 Remove browser styles (see http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/) */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}


	/* 2.0 IE (all versions) */
	/* ----------------------------------------- */
	
/* Nothing to see here people, move along... */

	/* 3.0 Typography */
	/* ----------------------------------------- */
	
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	font: 1em "ff-tisa-web-pro-1","ff-tisa-web-pro-2",serif;
}

h1 {
	font-size: 300%;
	text-shadow: #ccc 2px 2px 0;
}

h2 {
	font-size: 200%;
	padding: 1em 0 .25em 0;
	text-shadow: #CCC 2px 2px 0;
}

h3 {
	font-size: 150%;
	padding-top: 1em;
}

h4 {
	font-size: 112.5%;
}

h5 {
	font-size: 90%;
	padding-bottom: 10px;
}

h6 {
	font-size: 75%;	
}

p {
	margin-bottom: 1em;
}

strong {
	font-weight: bold;	
}

em {
	font-style: italic;
}

.alert { background:red; color:white } /* 'alert' has a basic style, since it's useful to have it standing out for testing purposes. */

blockquote {
	margin: 0 0 1em 1em;
	padding-left: .5em;
	border-left: #666 1px solid;
}

	/* 3.1 Font stack options

	The following represents a list of font stacks, as recommended by Nathan Ford in
	http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/

	I've added inverted commas around the relevant family names to ensure compatibility.
	p = balanced for paragraphs or body copy
	t = balanced for headlines or titles

	- - - -

Arial, "Helvetica Neue", Helvetica, sans-serif - p, t

Baskerville, "Times New Roman", Times, serif - p
Baskerville, "Times, Times New Roman", serif - t

Cambria, Georgia, Times, "Times New Roman", serif - p, t
"Century Gothic", "Apple Gothic", sans-serif - p, t

Consolas, "Lucida Console", Monaco, monospace - p, t

"Copperplate Light", "Copperplate Gothic Light", serif - p, t

"Courier New", Courier, monospace - p, t

"Franklin Gothic Medium", "Arial Narrow Bold", Arial, sans-serif - p, t

Futura, "Century Gothic", "Apple Gothic", sans-serif - p, t

Garamond, "Hoefler Text", "Times New Roman", Times, serif - p
Garamond, "Hoefler Text", Palatino, "Palatino Linotype", serif - t

Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, sans-serif - p
Geneva, Verdana, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif - t

Georgia, Palatino, "Palatino Linotype", Times, "Times New Roman", serif - p
Georgia, Times, "Times New Roman", serif - t

GillSans, Calibri, Trebuchet, sans-serif - p
GillSans, Trebuchet, Calibri, sans-serif - t

"Helvetica Neue", Arial, Helvetica, sans-serif - p
Helvetica, "Helvetica Neue", Arial, sans-serif - t

Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif - p, t

"Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", sans-serif - p, t

Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif - p
Palatino, "Palatino Linotype", "Hoefler Text", Times, "Times New Roman", serif - t

Tahoma, Geneva, Verdana - p
Tahoma, Verdana, Geneva - t

Times, "Times New Roman", Georgia, serif - p, t

Trebuchet, "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif - p
Trebuchet, Tahoma, Arial, sans-serif - t

Verdana, Geneva, Tahoma, sans-serif - p
Verdana, Tahoma, Geneva, sans-serif - t

*/


/* 4.0 Layout */
	/* ----------------------------------------- */

/* These rather presentational classes are generated by WordPress, so it's useful to have some styles for them. Edit as you see fit. More info: http://codex.wordpress.org/CSS */
.aligncenter { display:block; margin:0 auto }
.alignleft { float:left }
.alignright { float:right }
.wp-caption { border:1px solid #666; text-align:center; background:#ccc; padding:10px; margin:10px }

/* You might find the following useful */
/* div, ul, li { position:relative } This will save you having to declare each div / ul / li's position as 'relative' and allows you to absolutely position elements inside them */
br.clear { clear:both; display:block; height:1px; margin:-1px 0 0 0 } /* Use this br class to clear your floated columns */
li#theme-switcher { background:#fff; border:10px solid red; padding:20px; position:fixed; top:0; right:0 } /* Use this if you have the Theme Switcher Reloaded plugin (http://themebot.com/webmaster-tools/1-wordpress-theme-switcher-reloaded) installed and want to make it nice and obvious */


/* =========================================
    4.1 Site-wide rules
   ========================================= */

body {
	background: #D7E2F4 repeat-x top left; /* old bg: F8F9FF */
	font: 1em "ff-tisa-web-pro-1","ff-tisa-web-pro-2",serif;
	color: #333;
	text-align: center;
}

.left {
	float: left;
}

.right {
	float: right;
}

.medpad {
	padding: 5px;	
}

img, fieldset {
	border: none;
}

li {
	margin: 0 10px;
}

sup {
	vertical-align: super;
	font-size: smaller;	
}

.textcenter {
	text-align: center;
}

.center {
	display: block;
	margin: 0 auto;
}

/* =========================================
    4.2 Re-usable elements
   ========================================= */

.pad2 {
	padding: 2px;	
}

.pad3 {
	padding: 3px;	
}

.pad5 {
	padding: 5px;	
}

.round5 {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.orangebg {
	background: #F6D89F;
}

.orangebg-light {
	background: #F6E9D1;
}

.redbg {
	background: #ED99A3;
}

.redbg-light {
	background: #ECC6CB;
}

.bluebg {
	background: #8B97F0;
}

.bluebg-light {
	background: #BCC2F0;
}

/* =========================================
    4.3 Template, incl. Header, Index, Comments, Sidebar, Footer
   ========================================= */

* {
	margin: 0;
	padding: 0;
}

#fyi {
	background: #000;
	color: #fff;
	padding: 1em 0;
}

#container {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
	position: relative;
	clear: both;
	overflow: hidden;
}

#header {
	width: 960px;
	margin: 0 auto;
	padding: 0;
	text-align: left;
}

#logo {
	padding-top: 10px;
	float: left;
}

.clouds {
	width: 100%;
	position: absolute;
	top: 0;
	z-index: -1;
}

#cloud2 {
	float: left;
	position: relative;
	left: 430px;
	z-index: -10;
}

#cloud3 {
	float: left;
	position: relative;
	left: 350px;
	z-index: -5;
}

#navigation,
#description {
	float: left;
	margin: 26px 0 0 10px;
	padding: 25px 5px 10px 5px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

#navigation {
	background: #ED99A3;
	border: #333 solid 1px;
}

#description {
	padding: 10px 5px 5px 5px;
	font-style: italic;
}

#navigation a {
	color: #000;
	text-decoration: none;
	font: .85em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	display: block;	
	padding: 10px;
}

#navigation ul {
	list-style-type: none;
	overflow: auto;
	padding: 0 0 10px 0;
	margin: 0;
}

#navigation li {
	background: #CCC;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #666;
	float: left;
	margin: 0 5px;
}

#navigation li:hover,
#navigation li:focus {
	background: #AAA;
}

body.home #navigation li#homenav,
body.single #navigation li#blognav,
body.archive #navigation li#blognav,
body.search #navigation li#blognav,
body.page-id-622 #navigation li#quotesnav,
body.page-id-998 #navigation li#aboutnav,
body.page-id-15 #navigation li#contactnav,
body.page-id-1918 #navigation li#rummagenav {
	background: #AAA;
	border: 1px solid #333;
}

div.comments {
	margin-top: 1em;
}

.postform {
	border: 0;
	font: .85em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	margin: 3px;
	background: #CCC;
	padding: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.postform :hover,
.postform :focus {
	border: 1px solid #000;
}

form#searchform {
	padding-bottom: 10px;
}

input[type="text"],
input[type="submit"] {
	padding: 3px;
	margin-left: 3px;
	font: .85em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

input[type="text"] {
	border: 1px solid #CCC;	
}

input[type="text"]:focus {
	border: 1px solid #333;
}

input#s {
	width: 140px;	
}

div.sidebar {
	float: left;
	width: 240px;
	margin: 4em 0 0 8px;
	padding: 10px 5px;
	background: #F6E9D1;
	border: #333 solid 1px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

div.sidebar .textwidget {
	border-bottom: 1px solid #999;
	padding: 1em 0;
}

#footer {
	background: #333;
	color: white;
	margin-top: 5em;
	padding-top: 2em;
}

#footerlinks {
	width: 960px;
	margin: 0 auto;
	padding: 1em 0;
	background: white;
	color: #333;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	text-shadow: #ccc 1px 1px 0;
}

#footernotes {
	padding: 1em;
	width: 960px;
	margin: 0 auto;
}

#footernotes a {
	color: #fff;	
}

/* =========================================
    4.4 About-specific
   ========================================= */

#floatarrow {
/*	position: fixed;
	top: 200px; */
	text-align: center;
	margin: 0 auto;
	width: 260px;
	text-shadow: #ccc 1px 1px 0;
	float: left;
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

figure#floatarrow legend {
	width: 100px;	
}

#floatarrow p {
	font-size: .8em;
}
 
#intro {
	padding: 20px 0;
}
 
.hi {
	color: #333;
	padding: 0;
}

.whoistyler {
	text-shadow: #ccc 1px 1px 0;
	color: #333;
	padding: 0;
}

.latestproject {
	padding: 8px;
	width: 300px;
	margin: 20px 0;
}

.cta {
	background: #3f53ec;
	color: white;
	width: 640px;
	margin: 20px auto;
	padding: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}

.cta a:link, .cta a:visited {
	color: white;
}

.cta a:hover, .cta a:focus {
	color: #CCC;	
}

.abouttyler {
	width: 720px;
	margin: 0 65px 0 145px;
	padding: 50px 15px 50px 15px;
	clear: both;
	overflow: auto;
/*	background: url(hl.jpg) no-repeat top center; */
}

.aboutleft, .aboutright{
	width: 340px;
	float: left;
	padding: 0 10px;
	background: inherit;
}

div.aboutleft li,
div.aboutright li {
	list-style-type: square;
	color: #000;
	list-style-position: inside;
}

.abt1 {
	background: #f9be50;
	-webkit-border-top-left-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topleft: 10px;
	-moz-border-radius-topright: 10px;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
}

.abt2 {
	background: #ec3f53;
}

.abt3 {
	background: #f9be50;
	-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}

.image {
	padding: 8px;
	width: 300px;
	margin: 20px 0;
	border: 2px solid #FFFFE8;
}

.image:hover {
	border: 2px solid #333;
}

.image-about {
	padding: 8px;
	width: 293px;
	margin: 20px 0;
	border: 2px solid #FFFFE8;
}

.image-about:hover {
	border: 2px solid #333;	
}

.caption {
	width: 293px;
	float: left;
	background: white;
	color: black;
	padding: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: 1px solid #000;
}

.q {
	font-weight: bold;
	margin-top: 8px;
}

/* =========================================
    4.5 Blog Home-specific
   ========================================= */

img.indexoriglink {
	padding-left: 5px;	
}

input.bar {
	font: 1em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	margin: 2em auto;
	width: 100%;
	padding: 3px;
}

div.post {
	margin-bottom: 40px;	
}

div.post h2 {
	font-size: 120%;
	text-shadow: none;
}

div.post h2.sharedpost {
	font-size: 100%;	
}

div.post h3 {
	font-weight: bold;
	font-size: 100%;
}

body.home div#container div#content div.category-my-posts {
	margin: 6em 0;
	border-top: 1em solid #8B97F0;
	border-bottom: 1em solid #8B97F0;
}

div.date {
	color: #666;
}

/* =========================================
    4.6 Single-specific
   ========================================= */

body.single ol {
	list-style-type: decimal;	
}

body.single h1 {
	font-size: 200%;
}

body.single h3 {
	font-weight: bold;
	font-size: 100%;
}

p.readtime {
	color: #666;	
}

div#content {
	float: right;
	padding: 2em 0 0 30px;
	width: 570px;
	margin-right: 100px;
}

div#content li {
	list-style-type: square;
	color: #000;
	list-style-position: inside;
}

div#content ul,
div#content ol {
	padding-bottom: 1em;
}

p.origpost {
	padding-top: 5px;
	display: inline-block;
	border-top: 1px #000 dashed;
}

div.postmeta {
	background: #BAE4F8;
	border-top: 1px #666 solid;
	border-bottom: 1px #666 dashed;
	padding: 0 1em;
}

div.nearbyposts {
	background: #DDD;
	border-bottom: 1px #666 solid;
	padding: 0 1em;
}

/* =========================================
    4.7 Page-specific
   ========================================= */
   
/* =========================================
    4.8 Archive-specific
   ========================================= */
   
/* =========================================
    4.9 Search-specific
   ========================================= */
   
body.search h3 {
	font-weight: normal;
}