/*
STYLES for SCREEN MEDIA
Eric Grossnickle
January 2008

Color         Base      Lighter   Darker
----------    --------  --------  --------
Sand          #efecca   #f2f0d5   #ebe8c0
Lt. Brown     #e6e2af   #ebe8bf   #e1dca0
Dk. Brown     #a7a37e   #b9b598   #979266
Lt. Blue      #046380   #368299   #004769
Dk. Blue      #002f2f   #335959   #000909
Green         #69893d   #87a164   #4e731a
*/


@import "framework/reset.css";
@import "framework/default.css";
@import "framework/classes.css";
@import "type.css";


html { background: #f2f0d5 url(/img/header-bg.gif) left top repeat-x; }
body {
	width: 900px;
	margin: 0 auto;
	background: transparent;
	position: relative;
	}
#body {
	padding: 30px 30px 60px; 
	background: url(/img/content-bg-fixed.gif) 571px top no-repeat;
	min-height: 310px;
	}
#about #body,
#work #body { background: none; }
#content {
	float: left;
	width: 540px;
	}
#work #content { width: 840px; }
#sidebar {
	float: right;
	width: 240px;
	}
#footer { padding-bottom: 30px; }


/* Header
-------------------------------------------------------------------------------- */
#header {
	height: 150px;
	background: url(/img/header-logo-bg.gif) 0 50px no-repeat;
	position: relative;
	}
h1 {
	float: left;
	margin: 15px 0 0 30px;
	}
h1 a {
	display: block;
	width: 209px;
	height: 112px;
	background: url(/img/logo.png) no-repeat 0 0;
	text-indent: -1000em;
}
h1 a span { display: none; }
/*h1 {
	background: transparent url(/img/logo.png) left top no-repeat;
	width: 209px;
	height: 112px;
	margin: 15px 0 0 30px;
	float: left;
	}
h1 a { padding: 112px 209px 0pt 0pt; }*/
p#tagline {
	position: absolute;
	top: 118px;
	left: 0;
	width: 270px;
	text-align: right;
	color: #ccc;
	letter-spacing: 1px;
	margin: 0;
	}
ul#navigation {
	height: 30px;
	position: absolute;
	right: 0;
	bottom: 0;
	list-style: none;
	margin: 0; padding: 0;
	}
ul#navigation li {
	float: left;
	margin: 0; padding: 0;
	background: none;
	}
ul#navigation li a {
	display: block;
	height: 28px;
	width: 110px;
	margin-left: 3px; padding-top: 2px;
	background: url(/img/nav-tab-off.gif) left top no-repeat;
	text-align: center;
	line-height: 28px;
	color: #ccc;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	}
ul#navigation li a:hover {
	color: #fff;
	text-decoration: none;
	background: url(/img/nav-tab-on.gif) left top no-repeat;
	}
#home ul#navigation li#nav_home a,
#weblog ul#navigation li#nav_weblog a,
#weblog_entry ul#navigation li#nav_weblog a,
#weblog_archive ul#navigation li#nav_weblog a,
#work ul#navigation li#nav_work a,
#work_entry ul#navigation li#nav_work a,
#about ul#navigation li#nav_about a,
#contact ul#navigation li#nav_contact a {
	color: #444;
	font-weight: bold;
	font-size: 15px;
	letter-spacing: normal;
	background: url(/img/nav-tab-active.gif) left top no-repeat;
	}
#twitter {
	position: absolute;
	right: 0;
	width: 270px;
	bottom: 100px;
	margin-top: 0;
	background: transparent url(/img/twitter-tab.png) left top no-repeat;
	}
#twitter-logo {
	float: left;
	margin: 5px 9px 0 7px;
	}
#twitter-logo a {
	display: block;
	width: 15px;
	height: 19px;
	background: url(/img/twitter-logo.png) left top no-repeat;
	text-indent: -1000em;
	}
#twitter-status {
	padding: 7px 7px 4px;
	font-size: 10px;
	line-height: 16px;
	}
#twitter-status p {
	margin-top: 0;
	padding-left: 24px;
	line-height: 12px;
	}
#search_form {
	position: absolute;
	right: 0;
	bottom: 47px;
	width: 270px;
	}
#search_form input {
	background: url(/img/search-input-off.gif) top left no-repeat;
	border: 0;
	width: 240px;
	height: 27px;
	padding: 8px 15px 0;
	}
#search_form input:hover,
#search_form input.on { background: url(/img/search-input-on.gif) top left no-repeat; }


/* Intro
-------------------------------------------------------------------------------- */
#intro {
	background: url(/img/intro-lg-plant.jpg) right top no-repeat;
	height: 150px;
	width: 900px;
	margin-top: 20px;
	}
#intro.small { height: 60px; }
#intro_panel {
	background: url(/img/intro-lg.gif) left top no-repeat;
	height: 150px;
	}
#intro.small #intro_panel {
	background: url(/img/intro-sm-1.gif) left top no-repeat;
	height: 60px;
	}
#work_entry #intro.small #intro_panel,
#weblog_entry #intro.small #intro_panel,
#weblog_archive #intro.small #intro_panel,
#search #intro.small #intro_panel { background: url(/img/intro-sm-2.gif) left top no-repeat; }
#work #intro,
#work_entry #intro { background: url(/img/intro-sm-stalks.jpg) right top no-repeat; }
#weblog #intro,
#weblog_entry #intro,
#weblog_archive #intro { background: url(/img/intro-sm-grapes.jpg) right top no-repeat; }
#about #intro { background: url(/img/intro-sm-purple.jpg) right top no-repeat; }
#contact #intro { background: url(/img/intro-sm-cherries.jpg) right top no-repeat; }
#search #intro { background: url(/img/intro-sm-stems.jpg) right top no-repeat; }
#intro h2 {
	margin: 0 0 15px 30px;
	padding-top: 30px;
	}
#intro.small h2 { padding-top: 0; }
#intro p {
	margin-left: 30px;
	width: 300px;
	}


/* Projects
-------------------------------------------------------------------------------- */
.projects_row {
	clear: both;
	overflow: hidden;
	margin-bottom: 60px;
	}
.projects {
	float: left;
	width: 240px;
	margin-right: 60px;
	}
#work .projects .h3_sub { margin-top: 0; }
dl.project dt a { float: left; }
dl.project dt small {
	float: right;
	padding: 0px 3px 0 24px;
	border-right: 1px solid #e1dca0;
	border-bottom: 1px solid #e1dca0;
	background: #ebe8c0 url(/img/icons/date_small.gif) 3px 2px no-repeat;
	cursor: help;
	}
dl.project dd {
	clear: both;
	margin-top: 9px;
	}
dl.project dd a img { display: block; }
.extra {
	border-top: 1px dotted #b9b598;
	padding-top: 18px;
	}


/* Project Details
-------------------------------------------------------------------------------- */
#project_details dt { margin-top: 9px; }
#project_details dt img { display: block; }
#project_details dd p { margin-top: 0; }


/* Project Images
-------------------------------------------------------------------------------- */
#project_images p { margin-top: 0; }
#project_images p img { display: block; }
#project_thumbs {
	margin-top: 30px; padding-top: 18px;
	border-top: 1px dotted #b9b598;
	}
#project_thumbs a {
	float: left;
	margin: 0 9px 9px 0; padding: 3px;
	background: #b9b598;
	}
#project_thumbs a.current { background: #046380; }
#project_thumbs a:hover { background: #004769; }
#project_thumbs img { display: block; }


/* Entry
-------------------------------------------------------------------------------- */
.entry { margin-top: 60px; }
#weblog_archive .entry, #search .entry { margin-top: 30px; }
.entry:first-child { margin-top: 0 !important; }
.entry h3 { margin-bottom: 9px; }
.entry h4 {
	margin: 0 0 18px 0;
	padding-left: 23px;
	background: url(/img/icons/date.gif) left 1px no-repeat;
	}
.entry_meta {
	margin-top: 27px;
	padding-left: 15px;
	width: 420px;
	height: 30px;
	background: url(/img/entry-links.gif) left bottom no-repeat;
	}
.entry_meta .comments {
	margin-right: 30px;
	padding-left: 22px;
	background: url(/img/icons/comment.gif) left center no-repeat;
	}
.entry_meta .category {
	padding-left: 22px;
	background: url(/img/icons/folder.gif) left bottom no-repeat;
	}


/* Comments
-------------------------------------------------------------------------------- */
#comments { margin-top: 60px; }
#comments dl { position: relative; margin-bottom: 54px; }
#comment_form dl { margin-bottom: 72px; }
#comments dt {
	position: absolute;
	top: 100%;
	height: 25px;
	padding: 10px 0 0 55px;
	background: url(/img/comment-stem.gif) 20px top no-repeat;
	}
#comments dd {
	width: 540px;
	background: #ebe8c0 url(/img/comment-top.gif) left top no-repeat;
	}
#comments dd div {
	padding: 11px 20px 20px;
	background: url(/img/comment-bottom.gif) left bottom no-repeat;
	}
#comments dl.eric dt { background: url(/img/comment-stem-eric.gif) 20px top no-repeat; }
#comments dl.eric dd { background: #87a164 url(/img/comment-top-eric.gif) left top no-repeat; }
#comments dl.eric div { background: url(/img/comment-bottom-eric.gif) left bottom no-repeat; }
#comments dd p:first-child { margin-top: 9px; }
#comments dd p.note { margin-top: 9px; }
#comments dt a.comment_number { margin-right: 6px; }
h4#respond { margin-top: 72px; }
#comments textarea, #comments #details input {
	background: #e6e2af;
	border: none;
	border-top: 1px solid #e1dca0;
	border-left: 1px solid #e1dca0;
	}
#comments textarea:hover, #comments #details input:hover, #comments .form_hover {}
#comments textarea {
	margin: -10px -10px 0; padding: 10px;
	width: 499px;
	height: 90px;
	overflow: auto;
	}
#comments #details span {
	float: left;
	margin: 0;
	width: 155px;
	}
#comments #details input {
	padding: 5px;
	width: 130px;
	}


/* Contact
-------------------------------------------------------------------------------- */
#contact_form {
	margin-top: 18px;
	background: #ebe8c0 url(/img/comment-bottom.gif) left bottom no-repeat;
	}
#contact_form form {
	background: url(/img/comment-top.gif) left top no-repeat;
	padding: 20px;
	}
#contact_form dl { margin-top: 0; }
#contact_form dt { margin-top: 9px; }
#contact_form input.textbox,
#contact_form textarea {
	margin: 0; padding: 3px;
	border: 1px solid #979266;
	}
#contact_form input.textbox { width: 300px; }
#contact_form textarea {
	width: 400px;
	height: 144px;
	overflow: auto;
	}
#contact_form input.required,
#contact_form textarea.required { border-right: 5px solid #69893d; }
#contact_form p.error {
	margin: 0 0 18px; padding: 5px;
	border: 1px solid #ff0000;
	background: #ffcccc;
	text-align: center;
	}
#contact_form p.success {
	margin: 0 0 18px; padding: 5px;
	border: 1px solid #669900;
	background: #99cc66;
	text-align: center;
	}
#contact_form input.error,
#contact_form textarea.error { border-color: #ff0000; }


/* Sidebar
-------------------------------------------------------------------------------- */
ul#switcher {
	margin-top: 36px;
	background: url(/img/1px-b9b598.gif) left bottom repeat-x;
	overflow: hidden;
	position: relative;
	}
ul#switcher li {
	float: left;
	margin: 0; padding: 0;
	background: none;
	cursor: pointer;
	}
ul#switcher.tab-1 li.tab-1,
ul#switcher.tab-2 li.tab-2,
ul#switcher.tab-3 li.tab-3 {
	background: url(/img/tab.gif) left bottom no-repeat;
	cursor: default;
	}
ul#switcher li span {
	margin: 0 0 0 9px; padding: 0 15px 0 5px;
	display: block;
	height: 21px;
	line-height: 21px;
	background: none;
	}
ul#switcher li:first-child span { margin-left: 4px; }
ul#switcher.tab-1 li.tab-1 span,
ul#switcher.tab-2 li.tab-2 span,
ul#switcher.tab-3 li.tab-3 span {
	background: url(/img/tab.gif) right bottom no-repeat;
	}
ul#switcher.tab-1 li:first-child.tab-1,
ul#switcher.tab-2 li:first-child.tab-2,
ul#switcher.tab-3 li:first-child.tab-3 { background: url(/img/tab-first.gif) left bottom no-repeat; }
ul#switcher.tab-1 li:first-child.tab-1 span,
ul#switcher.tab-2 li:first-child.tab-2 span,
ul#switcher.tab-3 li:first-child.tab-3 span { background: url(/img/tab-first.gif) right bottom no-repeat; }
ul#switcher li.rss {
	position: absolute;
	bottom: 1px;
	right: 0;
	}
ul#switcher li.rss a {
	display: block;
	background: transparent url(/img/rss-heading.gif) right top no-repeat;
	height: 20px;
	width: 24px;
	text-indent: -9000px;
	}
p#magnolia, p#digg {
	margin-top: 18px;
	background: transparent url(/img/more-magnolia.gif) left top no-repeat;
	width: 141px;
	height: 25px;
	}
p#digg { background-image: url(/img/more-digg.gif); }
p#magnolia a, p#digg a { padding: 25px 141px 0pt 0pt; }


/* Footer
-------------------------------------------------------------------------------- */
#footer {
	background: url(/img/footer-bg-alt.gif) left top no-repeat;
	height: 100px;
	position: relative;
	}
#footer a.check { padding-left: 16px; background: url(/img/icons/check.gif) left -1px no-repeat; }
#copyright {
	float: left;
	margin: 0; padding: 30px 0 0 60px;
	}
#flickr {
	width: 300px;
	height: inherit;
	float: right;
	}
#flickr ul { margin: 0; }
#flickr li {
	float: left;
	margin: 0; padding: 0;
	background: none;
	}
#flickr li a {
	display: block;
	height: 75px;
	width: 75px;
	margin: 11px 0 0 8px; padding: 2px;
	background: #b9b598;
	}
#flickr li a:hover { background: #004769; }
#flickr p {
	background: transparent url(/img/footer-flickr-more.gif) left top no-repeat;
	width: 119px;
	height: 77px;
	margin: 0;
	position: absolute;
	right: 310px;
	top: 12px;
	}
#flickr p a { padding: 77px 119px 0pt 0pt; }


/* Classes
-------------------------------------------------------------------------------- */
.thumb {
	background: #fff;
	padding: 4px;
	border: 1px solid #b9b598;
	}
a:hover .thumb { background: #b9b598; }
ul.noarrow li { background: none; margin-left: 0; padding-left: 0; }
ul.condensed li { margin-top: 3px; }
.hide { display: none; }


/* WordPress
-------------------------------------------------------------------------------- */
img#wpstats { width:0px;height:0px;padding:0px;border:none;overflow:hidden; }


/* Clears
-------------------------------------------------------------------------------- */
ul#navigation:after,
#body:after,
#works:after,
dl.project dt:after,
#project_thumbs:after,
#comments #details:after,
#footer:after {
	clear: both;
	content: ".";
	display: block;
	height: 0pt;
	visibility: hidden;
	}