/*
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 Home-specific
	  4.5 Project-specific
	  4.6 Portfolio-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;
	-webkit-font-smoothing: antialiased; /* inspired by http://maxvoltar.com/archive/-webkit-font-smoothing */
}
/* 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;
	font: 1em "ff-tisa-web-pro-1","ff-tisa-web-pro-2",serif;
	color: #333;
	text-align: center;
}

.left {
	float: left;
}

.right {
	float: right;
}

.half {
	width: 50%;	
}

.medpad {
	padding: 5px;	
}

img, fieldset {
	border: none;
}

li {
	margin: 0 10px;
}

.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;
	behavior: url(/PIE.htc);
}

.round10 {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	behavior: url(/PIE.htc);
}

.orangebg {
	background: #F6D89F;
}

.orangebg-light {
	background: #F6E9D1;
}

.solidorange {
	background: #f9be50;	
}

.redbg {
	background: #ED99A3;
}

.redbg-light {
	background: #ECC6CB;
}

.solidred {
	background: #ec3f53;	
}

.bluebg {
	background: #8B97F0;
}

.bluebg-light {
	background: #BCC2F0;
}

.solidblue {
	background: #3f53ec;
}

a.button-orangelight {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	behavior: url(/PIE.htc);
	background: #F6E9D1;
	display: inline-block;
	padding: 12px;
	font-size: 100%;
}

a.afterbutton {
	font-size: 80%;
	color: inherit;
}

.cta {
	background: #3f53ec;
	color: white;
	width: 640px;
	margin: 20px auto;
	padding: 10px;
	clear: both;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	behavior: url(/PIE.htc);
}

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

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

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

* {
	margin: 0;
	padding: 0;
}

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

.container {
	margin: 0 auto;
	width: 960px;
}

#navhome, #navportfolio, #navcontact {
	display: inline-block;
	padding: 10px;
	text-align: center;
	margin-left: 2em;
}

#navhome {
	width: 9em;	
}

#navportfolio {
	width: 7em;
}

#navcontact {
	width: 12em;	
}

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

#logo {
	width: 110px;
	padding-right: 20px;
	float: left;
}
 
img#logoicon {
	padding-top: 30px;
}

#intro {
	padding-bottom: 20px;
	width: 830px;
}
 
.hi {
	color: #333;
	padding: 0;
}

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

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

.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;
}

#nav {
	text-align: left;
	margin: 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;
	behavior: url(/PIE.htc);
	text-shadow: #ccc 1px 1px 0;
}

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

#copyright a {
	color: #fff;	
}

/* =========================================
    4.4 Home-specific
   ========================================= */

.latestproject {
	padding: 8px;
	margin: 20px 0;
	background: #3f53ec;
	color: white;
	width: 640px;
	clear: both;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	behavior: url(/PIE.htc);
}

.latestproject .screenshot,
.latestproject .storytime {
	width: 50%;
}

.latestproject p {
	font-size: 125%;	
}

.latestproject h3.title {
	padding-bottom: 1em;	
}

.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;
	behavior: url(/PIE.htc);
}

.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;
	behavior: url(/PIE.htc);
}

.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;
	behavior: url(/PIE.htc);
	border: 1px solid #000;
}

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

/* =========================================
    4.5 Project-specific
   ========================================= */

.caps {
	font-size: 225%;
	font-weight:bold;
	font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
}

.storytime, .details {
	width: 720px;
	color: #333;
	margin: 20px auto;
	padding: 10px;
}

.storytime {
	font-size: 125%;
}

.details {
	font-size: 100%;
}

/* =========================================
    4.6 Portfolio-specific
   ========================================= */
   
div#content {
	width: 960px;
	clear: both;
}

div.project {
	clear: both;
	font-size: 125%;
	margin-bottom: 5em;
	overflow: auto;
}
   
div.screenshot {
	width: 560px;
	float: left;
}

div.projectdesc {
	width: 400px;
	float: left;
	margin-top: 2em;
}