/* Global Rules */

.clear { clear: both; margin: 0; padding: 0; }
a { overflow: hidden; } /* truncates long dotted outline wrap around negatively indented text links */
.hidden {display: none; }

a { color: #f842a3; text-decoration: none; }
a:hover { color: #000; text-decoration: underline; }

/* Primary content containers */

body {
	background: #fff;
	color: #999;
	font: 13px Helvetica, Arial, Verdana, sans-serif;
	line-height: 20px;
	margin: 0 auto;
	padding: 0;
	text-align: center; /* Stupid IE. */
	}
	
#header-container { /* places full-width background pattern on header */
	background: url(../img/header-bg.png);
	height: 180px;
	margin: 0 auto;
	padding: 0;
	position: relative;
	}
	
#xhome #header-container { /* Heightens header on Home page */
	height: 450px;
	}
	
#header { /* Constrains header content area */
	margin: 0 auto;
	padding: 60px 0 0 0;
	position: relative;
	width: 940px;
	}
	
#content-container {
	background: url(../img/moulding.png) center top repeat-x;
	margin: 0 auto;
	padding: 70px 0 0;
	position: relative;
	}
	
#xportfolio-i #content-container, #xweblogue-i #content-container { /* Pushes content down to make room for prev/next navigation */
	padding: 110px 0 0;
	}
		
#content {
	margin: 0 auto;
	position: relative;
	text-align: left;
	width: 940px;
	}
	
#footer {
	background: url(../img/bg-footer.png) center top no-repeat;
	margin: 80px auto 0 auto;
	padding: 60px 0;
	left: 0;
	top: 0;
	text-align: left;
	width: 940px;
	}
	
#footer span {
	background: url(../img/skippy.png) no-repeat right bottom;
	display: block;
	}
	
#logo {
	height: 75px;
	position: relative;
	width: 520px;
	}

#logo { left: -8px; position: relative; }
#logo a { background: url(../img/logo.png) 0 0 no-repeat; display: block; height: 75px; text-indent: -9999px; width: 520px; }
#logo a:hover { background: url(../img/logo.png) 0 -75px no-repeat; display: block; height: 75px; text-indent: -9999px; width: 520px; }
	
#col1 {	width: 640px; } /* Global width for this column */
#xabout #col1 { width: 520px; } /* Width adjustment */

#col2 {
	border-left: 1px dotted #e2e2e2;
	font-family: Georgia, "Times New Roman", Times, serif;
	left: 660px;
	padding: 0 20px;
	position: absolute;
	text-align: center;
	top: 0;
	width: 229px;
	}
	
/* Main Navigation */

#nav { /* Navigation container. */
	background: transparent;
	height: 75px;
	left: 523px;
	margin: 25px 0 0;
	padding: 0;
	position: relative;
	width: 417px;
	top: -100px;
	}
	
#nav ul {
	border: 0;
	height: 75px;
	margin: 0;
	padding: 0;
	width: 417px;
	position: relative;
	}

#nav li {
	background: transparent;
	list-style: none;
	position: absolute;
	top: 0;
	}*/

#nav li, #nav a {
	margin: 0;
	padding: 0;
	height: 75px;
	position: relative;
	}

#nav li a { 
	border: 0;
	color: transparent;
	display: block; /* turns links into blocks */
	margin: 0;
	padding: 0;
	position: relative;
	text-indent: -99999999px;
	text-decoration: none;
	height: 75px;
	}
	
/* Sets background image positions of initial state */
#about a { background: url(../img/nav.png) 0 0; }
#portfolio a { background: url(../img/nav.png) -114px 0; }
#weblogue a { background: url(../img/nav.png) -254px 0; }

/* Sets positions of initial state */
#about { top: 0; left: 0px; width: 114px; }
#portfolio { top: 0; left: 114px; width: 140px; }
#weblogue { top: 0; left: 254px; width: 163px; }
	
/* Sets background image positions of hover state */
#about a:hover { background: transparent url(../img/nav.png) 0px -75px no-repeat; height: 75px; }
#portfolio a:hover { background: transparent url(../img/nav.png) -114px -75px no-repeat; height: 75px; }
#weblogue a:hover { background: transparent url(../img/nav.png) -254px -75px no-repeat; height: 75px; }

/* You are here. */
#xabout #about a { background:  url(../img/nav.png) 0px -150px no-repeat; height: 75px; z-index: 100; }
#xportfolio #portfolio a, #xportfolio-i #portfolio a { background: transparent url(../img/nav.png) -114px -150px no-repeat; height: 75px; }
#xweblogue #weblogue a, #xweblogue-i #weblogue a { background: transparent url(../img/nav.png) -254px -150px no-repeat; height: 75px; }

/* Portfolio filtering */

#portfolio-filter {
	font-size: 9px;
	letter-spacing: 3px;
	list-style-type: none;
	margin: -30px 0 50px 0;
	text-transform: uppercase;
	}
	
#portfolio-filter li {
	background: none;
	display: inline;
	margin: 0;
	padding: 0;
	}
	
#portfolio-filter li a {
	color: #ccc;
	margin: 0;
	padding: 10px;
	}
	
#portfolio-filter li a:hover {
	background: #f4f4f4;
	color: #f842a3;
	text-decoration: none;
	}
	
#portfolio-filter li a.current {
	color: #999;
	background: #eaeaea;
	text-decoration: none;
	}

/* Page-level element positioning */

.floatright { float: right; margin: 0 0 3px 20px; padding: 0; }
.floatleft { float: left; 0 10px 3px 0; }
.embed { margin: 10px auto; padding: 0; text-align: center; }
.imginline { float: left; margin: 0 10px 10px 0; padding: 0; background: none; }
.snapright { float: right; margin: 0 0 10px 10px; padding: 0; background: none; }

/* Typography */

h1, h2, h3, h4, h5, h6 { font-weight: normal; font-family: Georgia, "Times New Roman", Times, serif; }

h1 { font-size: 30px; line-height: 36px; margin-bottom: 10px; }
h2 { font-size: 18px; font-style: italic; line-height: 24px; margin: 10px 0; }
h3 { font-size: 16px; font-style: italic; line-height: 22px; margin: 10px 0; }

#xportfolio-i #col1 h1, #xportfolio-i #col1 h2 { width: 940px; } /* Breaks text out of 1-column constraint */

p { margin-bottom: 20px; }
p img { margin-bottom: 0; } /* Removes bottom margin on images wrapped in <p> tags (like in individual article & portfolio item pages */

#notes {
	border-bottom: 1px dotted #e1e1e1; 
	font: 14px Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	margin-bottom: 20px;
	padding-bottom: 10px;
	}

#notes p {
	font: 14px Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	line-height: 20px;
	margin: 8px 0 5px 0;
	padding: 0;
	}
	
#notes span {
	color: #5d5d5d;
	}
	
#xabout p { font-size: 14px; line-height: 24px; }
.metadate { font-family: Georgia, "Times New Roman", Times, serif; font-style: italic; margin: 0 0 3px 0; padding: 0; } /* Blog date style */

#footer p {
	font: 11px Georgia, serif;
	letter-spacing: 2px;
	line-height: 18px;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
	}
	
#col2 p { font-size: 11px; line-height: 18px; }

blockquote {
	background: url(../img/bq.png) no-repeat;
	margin: 0;
	padding: 0 0 0 30px;
	}
	
blockquote p { font-style: italic; }
.even blockquote { background: url(../img/bq.png) no-repeat; margin: 0; padding: 0 0 0 30px; }
.owner blockquote { background: url(../img/bq.png) no-repeat; margin: 0; padding: 0 0 0 30px; }

abbr { border-bottom: 1px dotted #999; }

.focus {
	 background: #eaeaea;
	 border: 1px solid #ddd;
	 color: #999;
	 padding: 10px;
	 font-style: italic;
	 }

.caps { font-family: Georgia, "Times New Roman", serif; text-transform: uppercase; }

/* Images */

img {
	border: 1px solid #e1e1e1;
	margin-bottom: 20px;
	}
	
#xhome #header img {
	border: none;
	position: absolute;
	left: 364px;
	top: 132px;
	}
	
#xabout #img-about-jared {
	border: none;
	float: left;
	left: 360px;
	position: absolute;
	top: -100px;
	}
	
#portfolio-tiles img { border: none; margin-bottom: 0; } /* Remove borders on portfolio tiles */
#xportfolio-i #col1 img { margin: 20px 0 0; } /* Adds a little extra space for portfolio images */

/*#xweblogue #col1 p img, #xweblogue-i #col1 p img, #xweblogue #col1 img, #xweblogue-i #col1 img, p.embed { display: block; margin: 0 auto; } /* Centers blog post images. */

abbr.amp {
	border-bottom: none;
    font-family: Baskerville, Palatino, Constantia, "Book Antiqua", "URW Palladio L", serif;
    font-style: italic;
	font-weight: normal;
}
	
/* Lists */

ul { margin: 0 0 20px 0; padding: 0; list-style: none; }
li {
	background: url(../img/bullet.gif) no-repeat left 6px;
	margin: 0 0 0 13px;
	padding: 0 0 4px 10px;
	}

#prevnext ul {
	color: #ccc;
	display: block;
	font-size: 9px;
	letter-spacing: 3px;
	list-style: none;
	overflow: auto;
	position: absolute;
	text-transform: uppercase;
	top: -70px;
	width: 940px;
	}
	
#prevnext a { color: #ccc; }
#prevnext a:hover { color: #f842a3; text-decoration: none; }
	
#prev {
	background: url(../img/bg-prev.png) no-repeat left 4px;
	float: left;
	line-height: 14px;
	padding-left: 15px;
	width: 420px;
	}
	
#next {
	background: url(../img/bg-next.png) no-repeat right 4px;
	float: right;
	line-height: 14px;
	padding-right: 15px;
	text-align: right;
	width: 420px;
	}
	
#about-links {
	display: block;
	margin: 0;
	padding: 0 0 100px 0;
	position: relative;
	width: 540px;
	}
	
#about-links li {
	float: left;
	height: 40px;
	margin: 0 20px 0 0;
	padding: 0;
	width: 40px;
	}
		
#about-links-twitter { background: url(../img/tile-twitter.png) no-repeat left top; }
#about-links-fb { background: url(../img/tile-fb.png) no-repeat left top; }
#about-links-tumblr { background: url(../img/tile-tumblr.png) no-repeat left top; }
#about-links-lastfm { background: url(../img/tile-lastfm.png) no-repeat left top; }
#about-links-flickr { background: url(../img/tile-flickr.png) no-repeat left top; }
#about-links-ff { background: url(../img/tile-ff.png) no-repeat left top; }
#about-links-dribbble { background: url(../img/tile-dribbble.png) no-repeat left top; }
#about-links-delicious { background: url(../img/tile-delicious.png) no-repeat left top; }
#about-links-viewzi { background: url(../img/tile-viewzi.png) no-repeat left top; }

#about-links li a {
	color: transparent;
	display: block;
	height: 40px;
	text-indent: -99999999px;
	width: 40px;
	}
	
	
#cv {
	background: #f5f5f5;
	border-top: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	display: block;
	height: 50px;
	margin: 40px 0 30px -10px;
	padding: 13px 0 0 15px;
	width: 945px;
	}	
	
#cv-resume {
	background: url(../img/cv-resume.png) no-repeat left top;
	display: block;
	height: 35px;
	left: 0;
	margin-right: 40px;
	position: relative;
	top: 0;
	width: 186px;
	}
	
#cv-linkedin {
	background: url(../img/cv-linkedin.png) no-repeat left top;
	display: block;
	height: 35px;
	left: 206px;
	position: relative;
	top: -38px;
	width: 220px;
	}
	
#cv li a { display: block; height: 35px; color: transparent; text-indent: -99999999px; }

ol { margin: 0 0 10px 25px; padding: 0; }

ol li {
	background: none;
	list-style-type: decimal;
	margin: 0 0 5px 0;
	padding: 0;
	}
	
#col2 li { background: none; font-size: 11px; line-height: 16px; margin-left: 0; }

/* Archive Page Styles. Again, special. ---------------------------------------------------------------------------------*/

dl.archive.dt, dl.archive dd { margin: 0 0 10px 0; }

dl.archive {
	margin: 0 0 0 12px;
	padding: 0;
	border: 0;
	text-align: left;
	}

dl.archive dt {
	font-family: Georgia, "Times New Roman", Times, serif;
	margin: 0;
	padding: 5px 0 10px 0;
	border: 0;
	font-size: 18px;
	line-height: 24px;
	}
	
dl.archive dd {
	margin: 0 0 5px 0;
	padding: 0 0 0 20px;
	}

/* Portfolio tiles list style */
	
#portfolio-tiles { /* Tiled arrangement for displaying portfolio thumbnails */
	width: 960px;
	}
	
#portfolio-tiles div { /* Tiled arrangement for displaying portfolio thumbnails */
	float: left;
	margin: 0 9px 25px 0;
	width: 227px;
	}
	
#portfolio-tiles h3 {
	font-size: 14px;
	font-weight: normal;
	}

	
/* Image text replacement */

#xhome .text-intro {
	background: url(../img/text-home-intro-serious.png) no-repeat;
	color: transparent;
	height: 233px;
	left: 0;
	position: absolute;
	text-indent: -99999999px;
	top: 200px;
	width: 554px;
	}
	
#xhome .text-jared-blurb {
	background: url(../img/text-home-jared-blurb.png) no-repeat;
	color: transparent;
	height: 51px;
	left: 850px;
	position: absolute;
	text-indent: -99999999px;
	top: 200px;
	width: 95px;
	}
	
#h-home-featured {
	background: url(../img/h-home-featured.png) no-repeat;
	color: transparent;
	height: 14px;
	margin-bottom: 20px;
	text-indent: -99999999px;
	width: 940px;
	}
	
#text-about-intro {
	background: url(../img/text-about-intro.png) no-repeat;
	color: transparent;
	height: 83px;
	margin-bottom: 30px;
	text-indent: -99999999px;
	width: 520px;
	}
	
#text-about-links {
	background: url(../img/text-about-links.png) no-repeat;
	color: transparent;
	height: 53px;
	margin: 40px 0;
	text-indent: -99999999px;
	width: 520px;
	}	
	
#text-about-contact {
	background: url(../img/text-about-contact.png) no-repeat;
	color: transparent;
	height: 53px;
	text-indent: -99999999px;
	width: 520px;
	}
	
#text-weblogue-col2 {
	background: url(../img/text-weblogue-col2.png) no-repeat center;
	color: transparent;
	height: 61px;
	margin: 0 auto 20px auto;
	text-indent: -99999999px;
	width: 175px;
	}
	
/* Comment form. Thanks to Mr. Alex Bischoff for cluing me into using a definition list for the form. Nifty. */

#txpCommentInputForm { border: none; margin: 0; padding: 0; }

#txpCommentInputForm dt, #txpCommentInputForm dd { clear: both; margin: 0; padding: 0; }
#txpCommentInputForm dl label, #txpCommentInputForm dl input { clear: both; }
#txpCommentInputForm dl label { font-family: Georgia, "Times New Roman", Times, serif; font-size: 14px; }
#txpCommentInputForm dl input { background: #eaeaea; margin: 0 0 10px 0; padding: 2px; width: 50%; }

#txpCommentInputForm textarea {
	background: #eaeaea;
	font: 11px Verdana, "Lucida Grande", Calibri, Arial, sans-serif;
	height: 200px;
	line-height: 18px;
	margin: 5px 0 0 0;
	padding: 5px;
	width: 100%; }

#personalinfo input { float: left; margin: 7px 5px 0 0; }
#personalinfo label { float: left; }

#preview { margin: 0 5px 20px 0; }
#commentbuttons { clear: both; padding: 10px 0 30px 0; }
.button { float: left; margin-right: 5px; }
	
/* Comments. */

.odd {
	margin: 0 0 10px 0;
	padding: 10px;
	text-align: left;
	}

.even {
	margin: 0 0 10px 0;
	padding: 10px;
	text-align: left;
	background: #f5f5f5;
	}
	
.photoid { margin-bottom: 5px; }
.photoid img { border: 4px solid #ccc; float: right; margin: 0 0 20px 10px; padding: 0; } /* Gravatar styling */

.commentsub {
	background: url(../img/dash-brown.gif) repeat-x left bottom;
	margin: 0 0 10px 0;
	padding: 0 0 10px 0;
	}

.commentsub img { border: 0; margin: 0; padding: 0; }

.owner { background: #ffd1ea; margin: 0 0 10px 0; padding: 10px; } /* Author Comment style */
.owner a { color: #f842a3; }
.owner a:hover { color: #000 }
.owner p, .owner li { color: #666; }
.owner .photoid img {  border: 0; background: #fff; }

#cpreview .owner,
#cpreview .odd,
#cpreview .even { background: #ffe5f8; border: 3px solid #272c28; margin: 0 0 10px 0; padding: 10px; }

#cpreview .owner p,
#cpreview .odd p,
#cpreview .even p { color: #555;}

#cpreview .owner p a,
#cpreview .odd p a,
#cpreview .even p a { border-bottom: 1px dotted; color: #d63597; padding: 1px; text-decoration: none; }

#cpreview .owner p a:hover,
#cpreview .odd p a:hover,
#cpreview .even p a:hover { background: #272c28; color: #fff; }

#cpreview #cpreview-notice { background: #272c28; color: #fff; margin: 0; padding: 5px; font-weight: bold; }