/* ---------------------------------------------------------------------------
	
	Master Styles
				
	http://tschmeisser.com
	Author: Travis Schmeisser
	
--------------------------------------------------------------------------- */

/* RESET! */

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,
b, u, i, center,
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-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

/* --------------------------------------------------------------------------
	=layout
--------------------------------------------------------------------------- */

body {
	background: #000 url(../img/bg.png) repeat-x 0 0;
	color: #7e7e7e;
	font: 100%/1.25em Helvetica, Arial, sans-serif;	
}

/* ---------------------------------------------------------------------------
	=links
--------------------------------------------------------------------------- */

a:link {
	color: #bf5858;
	text-decoration: none;
}
	
a:visited {
	color: #df9595;
	text-decoration: none;
}
	
a:hover {
	color: #4ba3d1;
	text-decoration: none;
}

/* ---------------------------------------------------------------------------
	=typography
--------------------------------------------------------------------------- */

h1 {
	color: #000;
	letter-spacing: -0.075em;
	line-height: 1em;
	font-size: 1.375em;
	font-weight: bold;
}

h2 {
	color: #000;
	letter-spacing: -0.075em;
	line-height: 1em;
	font-size: 1em;
	font-weight: bold;
	margin-bottom: .3125em;
}

h3 {
	color: #000;
	letter-spacing: -0.075em;
	line-height: 1em;
	font-size: .875em;
	font-weight: bold;
	margin-bottom: .3125em;
}

h4 {
	color: #7e7e7e;
	font: italic .9375em/1em Georgia, 'Times New Roman', Times, serif;
	margin-bottom: .3125em;
}

h5 {
	color: #000;
	letter-spacing: -0.075em;
	line-height: 1em;
	font-size: .875em;
	font-weight: bold;
	margin-bottom: .3125em;
}

h6 {
	color: #000;
	letter-spacing: -0.075em;
	line-height: 1em;
	font-size: .875em;
	font-weight: bold;
	margin-bottom: .3125em;
}

p { margin-bottom: 1.25em; }

/* ---------------------------------------------------------------------------
	=lists
--------------------------------------------------------------------------- */

ul { margin-bottom: 1.25em; }

/* ---------------------------------------------------------------------------
	=header
--------------------------------------------------------------------------- */

#header {
	background: url(../img/logo-header.png) no-repeat 0 0;
	height: 240px;
	position: relative;
	width: 960px;
}

#logo {
	height: 145px;
	position: absolute;
	left: 80px;
	top: 38px;
	width: 310px;
}

#logo a {
	display: block;
	width: 100%;
	height: 100%;
}

#logo img {
	position: absolute;
	top: 0;
	left: -9999px;
}

#banner {
	background: url(../img/banner-about.png) no-repeat 0 0;
	height: 85px;
	left: 445px;
	margin: 0;
	padding: 0;
	position: absolute;
	text-indent: -9999px;
	top: 66px;
	width: 516px;
}

#nav {
	list-style: none;
	position: absolute;
	right: 246px;
	top: 117px;
	width: 230px;
}

#nav li {
	float: left;
	height: 31px;
	text-indent: -9999px;
}

#nav li a {
	display: block;
	height: 100%;
}

#nav #nav-work, #nav #nav-work a {
	background: url(../img/nav.png) no-repeat 0 0;
	width: 52px;
}

#nav #nav-work a:hover {
	background-position: 0 -31px;
}

body.work #nav #nav-work a, body.work #nav #nav-work a:hover {
	background-position: 0 -62px;
}

#nav #nav-about, #nav #nav-about a {
	background: url(../img/nav.png) no-repeat -52px 0;
	width: 111px;
}

#nav #nav-about a:hover {
	background-position: -52px -31px;
}

body.about #nav #nav-about a, body.about #nav #nav-about a:hover {
	background-position: -52px -62px;
}

#nav #nav-contact, #nav #nav-contact a {
	background: url(../img/nav.png) no-repeat -163px 0;
	width: 67px;
}

#nav #nav-contact a:hover {
	background-position: -163px -31px;
}

body.contact #nav #nav-contact a, body.contact #nav #nav-contact a:hover {
	background-position: -163px -62px;
}

#contact {
	background: #000 url(../img/banner-contact.png) no-repeat 0 0;
	height: 85px;
	left: 445px;
	list-style: none;
	margin: 0;
	padding: 0;
	position: absolute;
	top: 66px;
	width: 516px;
}

#contact li {
	position: absolute;
	margin: 0;
	text-indent: -9999px;
	top: 0;
}

#contact li a {
	display: block;
	height: 100%;
	width: 100%;
}

#contact #phone {
	left: -9999px;
}

#contact #email {
	background: url(../img/contact-email.png) no-repeat 0 0;
	height: 17px;
	left: 162px;
	top: 46px;
	width: 195px;
}

#contact #email a {
	background: url(../img/contact-email.png) no-repeat 0 0;
}

#contact #email a:hover {
	background-position: 0 -17px;
}

#contact #close {
	background: url(../img/btn-close.png) no-repeat 0 0;
	height: 51px;
	right: 0;
	top: 14px;
	width: 51px;
}

#contact #close a {
	background: url(../img/btn-close.png) no-repeat 0 0;
}

#contact #close a:hover {
	background-position: 0 -51px;
}

/* ---------------------------------------------------------------------------
	=content
--------------------------------------------------------------------------- */

#content {
	background: #f6f6f6 url(../img/bg-content.png) repeat-x 0 0;
	padding-left: 60px;
	border-bottom: 1px solid #f6f6f6;
}

#content-main {
	background: url(../img/bg-content-top.png) no-repeat 0 0;
	padding-top: 45px;
	width: 900px;
}

/* ---------------------------------------------------------------------------
	=foot
--------------------------------------------------------------------------- */

#foot {
	background: url(../img/bg-grid-3rows.png) repeat-x 0 0;
	padding: 165px 0 40px 60px;
}

#foot p {
	background: url(../img/foot.png) no-repeat 0 0;
	height: 12px;
	margin: 0;
	text-indent: -9999px;
}

/* ---------------------------------------------------------------------------
	=project list
--------------------------------------------------------------------------- */

#project-list {
	background: url(../img/bg-content-top.png) no-repeat 0 0;
	padding-top: 45px;
	width: 900px;
}

#project-list h1 {
	left: -9999px;
	position: absolute;
	top: 0;
}

div.project {
	background: url(../img/dash.png) repeat-x bottom left;
	float: left;
	margin: 0 0 40px 0;
	padding-bottom: 30px;
	width: 300px;
}

div.project:hover {
	background-color: #eee;
}

div.project img {
	padding-bottom: 20px;
}

div.project h2 {
	line-height: .875em;
	margin-bottom: 2px;
	padding-left: 20px;
}

div.project h2 a:link {
	color: #74a500;
}

div.project h2 a:visited {
	color: #aac862;
}

div.project h2 a:hover {
	color: #4ba3d1;
	text-decoration: none;
}

div.project p {
	font: italic .875em/1em Georgia, 'Times New Roman', Times, serif;
	margin-bottom: 0;
	padding-left: 20px;
}

/* ---------------------------------------------------------------------------
	=project detail
--------------------------------------------------------------------------- */

#project-detail {
	background: url(../img/bg-content-top.png) no-repeat 0 0;
	padding-top: 45px;
	position: relative;
	width: 900px;
}

ul.section-nav {
	clear: both;
	font-size: .6875em;
	font-weight: bold;
	list-style: none;
	margin-bottom: 0;
	text-transform: uppercase;
}

ul.section-nav li {
	display: inline;
	margin-right: 10px;
}

ul.section-nav a:link, ul.section-nav a:visited {
	color: #a1a1a1;
}

ul.section-nav a:hover {
	color: #4ba3d1;
}

ul.section-nav-top  {
	position: absolute;
	left: 0;
	top: -24px;
}

#project-header {	
	float: left;
	margin: 0 60px 20px 0;
	width: 240px;
}

#project-header p {
	font: italic 1em/1em Georgia, 'Times New Roman', Times, serif;
	margin-bottom: 0;
}

#project-about {
	float: left;
	font-size: .875em;
	line-height: 1.25em;
	margin: 0 0 20px 0;
	padding: 5px 0 0 0;
	width: 410px;
}

#visit {
	background: url(../img/btn-visit.png) no-repeat 0 0;
	float: right;
	height: 39px;
	margin-bottom: 20px;
	text-indent: -9999px;
	width: 110px;
}

#visit.inactive {
	background-position: 0 -78px;
}

#visit a {
	background: url(../img/btn-visit.png) no-repeat 0 0;
	display: block;
	height: 100%;
	width: 100%;
}

#visit a:hover {
	background-position: 0 -39px;
}

#project-templates {
	background: url(../img/dash.png) repeat-x 0 0;
	clear: both;
	margin-bottom: 15px;
	padding-top: 20px;
	width: 710px;
}

#project-templates h2 {
	float: left;
	font-size: .875em;
	margin-right: 60px;
	width: 240px;
}

#project-templates ul {
	float: left;
	font-size: .875em;
	line-height: 1em;
	list-style-position: inside;
	margin-bottom: 0;
	position: relative;
	top: -2px;
	width: 410px;
}

#project-templates li {
	margin-bottom: 5px;
}

#project-responsibilities {
	background: url(../img/dash.png) repeat-x 0 0;
	clear: both;
	margin-bottom: 30px;
	padding-top: 20px;
	width: 710px;
}

#project-responsibilities h2 {
	float: left;
	font-size: .875em;
	margin-right: 60px;
	width: 240px;
}

#project-responsibilities ul {
	float: left;
	font-size: .875em;
	line-height: 1em;
	list-style-position: inside;
	margin: 0;
	position: relative;
	top: -2px;
	width: 410px;
}

#project-responsibilities li {
	margin-bottom: 5px;
}

#project-samples {
	background: url(../img/bg-content-top.png) no-repeat 0 0;
	clear: both;
	padding-top: 35px;
}

#project-samples img {
	margin-bottom: 30px;
}

/* ---------------------------------------------------------------------------
	=about
--------------------------------------------------------------------------- */

body.about #content {
	position: relative;
}

body.about .back-top {
	left: 60px;
}

#about {
	float: left;
	font-size: .875em;
	width: 420px;
}

#about h1 {
	background: url(../img/title-about.png) no-repeat 0 0;
	height: 100px;
	margin-bottom: 30px;
	position: relative;
	right: 60px;
	text-indent: -9999px;
	width: 480px;
}

#btn-resume, #btn-resume a {
	background: url(../img/btn-resume.png) no-repeat 0 0;
	display: block;
	height: 39px;
	width: 184px;
}

#btn-resume {
	margin-bottom: 30px;
	text-indent: -9999px;
}

#btn-resume a:hover {
	background-position: 0 -39px;
}

#clients {
	background: url(../img/dash.png) repeat-x bottom left;
	margin-bottom: 30px;
	padding-bottom: 31px;
	text-align: center;
}

#clients p {
	background: url(../img/dash.png) repeat-x 0 0;
	font: italic 1.125em/1em Georgia, 'Times New Roman', Times, serif;
	margin-bottom: .625em;
	padding-top: 30px;
}

#accounts {
	list-style: none;
	margin-bottom: 30px;
}

#accounts li, #accounts li a {
	display: block;
	height: 59px;
	text-indent: -9999px;
	width: 100;
}

#accounts li {
	margin-bottom: 10px;
}

#account-twitter, #account-twitter a {
	background: url(../img/btn-twitter.png) no-repeat 0 0;
}

#account-flickr, #account-flickr a {
	background: url(../img/btn-flickr.png) no-repeat 0 0;
}

#account-linkedin, #account-linkedin a {
	background: url(../img/btn-linkedin.png) no-repeat 0 0;
}

#account-delicious, #account-delicious a {
	background: url(../img/btn-delicious.png) no-repeat 0 0;
}

#account-facebook, #account-facebook a {
	background: url(../img/btn-facebook.png) no-repeat 0 0;
}

#accounts li a:hover {
	background-position: 0 -59px;
}

#resume {
	float: right;
	width: 420px;
}

.resume-section {
	margin-bottom: 50px;
}

#resume h2 {
	background: url(../img/title-arrow.png) no-repeat 2% 50%;
	font-size: 1.25em;
	margin-bottom: .625em;
	padding-left: 25px;
}

.resume-set {
	background: url(../img/divider-texture.png) no-repeat 0 0;
	margin-bottom: 10px;
	padding-top: 20px;
}

.resume-set h3 {
	color: #74a500;
	font: italic normal .875em/1em Georgia, 'Times New Roman', Times, serif;
	letter-spacing: 0;
	margin-bottom: .625em;
}

.resume-set h3 .resume-title-divider {
	color: #a7a7a7;
	font-size: .875em;
	padding: 0 3px;
}

.resume-set h3 .resume-title-detail {
	color: #000;
	font: bold .9375em/1em Helvetica, Arial, sans-serif;
	letter-spacing: -1px;
}

.resume-set h3 .resume-date {
	color: #7e7e7e;
	font: bold .75em/1em Helvetica, Arial, sans-serif;
	letter-spacing: 0;
	padding-left: 2px;
	text-transform: uppercase;
}

.resume-set p {
	font-size: .8125em;
	line-height: 1.23em;
	margin-bottom: .625em;
	padding: 0 0 0 25px;
}

.resume-set p em {
	color: #616161;
	font-size: .75em;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
	=contact (only seen if javascript is disabled or unavailable)
--------------------------------------------------------------------------- */

body.contact #content {
	padding-top: 30px;
}

body.contact ul {
	list-style: none;
}

body.contact ul li {
	margin-bottom: 10px;
}

body.contact li em {
	color: #000;
	font-size: .8125em;
	font-style: normal;
	font-weight: bold;
	text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
	=page not found
--------------------------------------------------------------------------- */

body.page-not-found h1 {
	background: url(../img/title-page-not-found.png) no-repeat 0 0;
	height: 36px;
	margin-bottom: 25px;
	text-indent: -9999px;
}

body.page-not-found p a {
	font-weight: bold;
}

body.page-not-found p {
	margin-bottom: 2.5em;
}

/* ---------------------------------------------------------------------------
	=misc
--------------------------------------------------------------------------- */

p.more {
	margin-bottom: 0;
	text-indent: -9999px;
}

p.more, p.more a {
	background: url(../img/btn-more.png) no-repeat 0 0;
	display: block;
	height: 39px;
	width: 110px;
}

p.more a:hover {
	background-position: 0 -39px;
}

p.back {
	clear: both;
	font-size: .6875em;
	font-weight: bold;
	margin-bottom: 0;
	text-transform: uppercase;
}

p.back a:link, p.back a:visited {
	color: #a1a1a1;
}

p.back a:hover {
	color: #4ba3d1;
}

p.back-top {
	position: absolute;
	left: 0;
	top: -24px;
}

/* ---------------------------------------------------------------------------
	=clearing
--------------------------------------------------------------------------- */

#container:after,
#content:after,
div.project-row:after,
#project-main:after,
#project-templates:after,
#project-responsibilities:after,
#project-samples:after {
    content: "."; 
    display: block; 
    height: 0;
    clear: both; 
    visibility: hidden;
}