/* `Reset - Copyright 2009 Eric A. Meyer
---------------------------------------------------------------------------------------------------- */
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; }
:focus { outline: 0; }
body { line-height: 1; color: black; background: white; }
ol, ul { list-style: none; }
table { border-collapse: separate; border-spacing: 0; }
/* tables still need 'cellspacing="0"' in the markup */
caption, th, td { text-align: left; font-weight: normal; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
/* ---------------------------------------------------------------------------------------------------- */
@font-face { font-family: 'Din'; src: url('../fonts/DIN.eot'); /* here you go, IE */
src: local('DINPro Bold'), local('DINPro-Bold'), url('../fonts/DIN.ttf') format('truetype'); }
html { margin-top: 30px; position: relative; }
html:after { position: absolute; width: 100%; height: 30px; top: -30px; left: 0; background: #f6f6f6; display: block; color: #888; line-height: 30px; text-align: center;  content: "You are viewing an older version of jeffwolff.net";}
body { background: #e3e3e3; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 18px; color: #999; }
/* `Structure
---------------------------------------------------------------------------------------------------- */
#bar-wrap { background: url('../images/sprite.gif') repeat-x; width: 100%; height: 25px; border-bottom: 1px solid #c4c4c4; }
#bar { width: 960px; height: 20px; margin: 0 auto; padding: 5px 0 0 0; overflow: hidden; }
#bar a { border: none; }
#bar a#network { float: left; color: #929292; text-decoration: none; text-shadow: 0 1px #fff; }
#bar ul { float: right; }
#bar li { background: none; display: inline; padding-right: 40px; }
#bar li.last { padding-right: 0; }
#bar li a { color: #9b9b9b; text-transform: uppercase; text-decoration: none; text-shadow: 0 1px #fff; }
#bar li a:hover { color: #bebebe; }
#headbit { width: 960px; height: 48px; margin: 11px auto 0; }
#body-wrap { width: 972px; margin: 0 auto; }
#content-wrap { background: #dedede; width: 972px; padding: 5px 0; }
#content { position: relative; background: #fff; width: 880px; margin: 0 auto; padding: 35px 40px; border: 1px solid #cacaca; }
#left { width: 630px; float: left; }
#right { width: 205px; float: right; }
#footer { float: right; margin: 7px 6px 6px; }
.clear { clear: both; }
/* `Typography
---------------------------------------------------------------------------------------------------- */
p { color: #999; margin: 0; padding: 25px; }
#right p { color: #999; margin: 0; padding: 10px 10px 5px; line-height: 18px; }
a { color: #999; text-decoration: none; border-bottom: 1px solid #999; }
a:hover { color: #ccc; border-color: #ccc; }
ul { list-style-type: none; margin: 0; padding: 0; line-height: 18px; color: #999; }
body#about #right ul { padding: 10px 0 0 10px; }
body#about #right li { margin-bottom: 10px; }
li { background: url('../images/check.gif') no-repeat 0 5px; padding: 0 0 0 18px; }
h1 { color: #fff; font-family: "Din", Helvetica, Arial, sans-serif; font-size: 3.5em; line-height: 1; font-weight: normal; float: left; height: 40px; }
h1 a { color: #fff; border: none; }
h1 a:hover { color: #e9e9e9; }
h2 { color: #fff; font-family: "Din", Helvetica, Arial, sans-serif; font-size: 4.25em; line-height: 1.25em; font-weight: normal; padding: 5px 0; }
h2 a { color: #fff; border: none; }
h2 a:hover { color: #e9e9e9; }
h3 { margin: 0; padding: 0 0 1px; font-family: Helvetica, Arial, sans-serif; font-size: 14px; font-weight: normal; line-height: 14px; color: #999; border-bottom: 1px solid #dedede; }
h4 { font-weight: normal; font-size: 2em; line-height: 1; text-transform: lowercase; margin: 13px 0 0 10px; height: 27px; float: left; }
form { width: 656px; margin: 0; padding: 25px; }
label { float: left; width: 150px; padding-top: 15px; font-size: 1.167em; color: #cacaca; text-transform: lowercase; }
input { background: url('../images/sprite.gif') repeat-x #ffffff 0 -1377px; font-family: Helvetica, Arial, sans-serif; float: left; width: 373px; font-size: 1.667em; line-height: 1; color: #888888; padding: 12px 12px 8px; border: 1px solid #cacaca; margin-bottom: 14px; }
input:focus, textarea:focus { border-color: #f33447; }
textarea { background: url('../images/sprite.gif') repeat-x #ffffff 0 -1377px; font-family: Helvetica, Arial, sans-serif; float: left; width: 478px; height: 230px; font-size: 1.25em; line-height: 18px; color: #888888; padding: 16px 13px; border: 1px solid #cacaca; margin-bottom: 14px; }
button.submit { background: #dedede; font-family: Helvetica, Arial, sans-serif; float: left; font-size: 1.667em; line-height: 1; color: #888888; padding: 10px 16px 6px; border: 1px solid #cacaca; float: right; cursor: pointer; }
.form-row { overflow: hidden; }
span.project-title { position: absolute; top: 50px; left: 25px; font-size: 1.667em; color: #bbbbbb; }
span.project-link { position: relative; left: 130px; top: 90px; font-size: 0.917em; }
/* `About
---------------------------------------------------------------------------------------------------- */
body#about h1 { text-shadow: 0 -1px #1b5e40; }
body#about h2 { text-shadow: 0 -1px #1b5e40; }
body#about h3 { color: #31ca84; }
body#about #right h3 { width: 205px; }
body#about h4 { color: #06321e; text-shadow: 0 1px #68d0a1; }
body#about #head { background: url('../images/sprite.gif') repeat-x 0 -857px; width: 100%; height: 150px; border-top: 1px solid #fff; }
body#about #headbit { border-bottom: 1px solid #268157; /* top of divider */ }
body#about #page-title { width: 960px; margin: 0 auto; border-top: 1px solid #43e79c; /* bot of divider */ }
/* `Portfolio
---------------------------------------------------------------------------------------------------- */
body#portfolio h1 { text-shadow: 0 -1px #005874; }
body#portfolio h2 { text-shadow: 0 -1px #00729e; }
body#portfolio h3 { color: #01a8de; }
body#portfolio #right h3 { width: 205px; }
body#portfolio h4 { color: #022b38; text-shadow: 0 1px #9cc8d7; }
body#portfolio #head { background: url('../images/sprite.gif') repeat-x 0 -707px; width: 100%; height: 150px; border-top: 1px solid #fff; }
body#portfolio #headbit { border-bottom: 1px solid #047ca4; /* top of divider */ }
body#portfolio #page-title { width: 960px; margin: 0 auto; border-top: 1px solid #11c2ff; /* bot of divider */ }
.row { position: relative; width: 100%; margin: 35px 0 60px; }
.row p { float: right; width: 430px; padding: 0; margin-top: 5px; }
.row .client { float: right; text-align: right; line-height: 12px; position: absolute; right: 0; bottom: 0; }
a.box { position: relative; display: block; float: left; background: url('../images/sprite.gif') repeat-x 0 -1157px; width: 427px; height: 110px; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; }
a.box:hover { background: url('../images/sprite.gif') repeat-x 0 -1267px; cursor: pointer; border-top: 1px solid #dcdcdc; border-bottom: 1px solid #dcdcdc; }
a.box img { position: relative; bottom: 20px; right: 10px; float: right; }
a.box:hover img { opacity: 0.8; }
a.box:hover span.project-title { color: #c3c3c3; text-shadow: 0 1px #fff; }
a.altbox { float: right; }
/* `Contact
---------------------------------------------------------------------------------------------------- */
body#contact h1 { text-shadow: 0 -1px #681d24; }
body#contact h2 { text-shadow: 0 -1px #922932; }
body#contact h3 { color: #f33447; }
body#contact #right h3 { width: 205px; }
body#contact h4 { color: #300202; text-shadow: 0 1px #df7680; }
body#contact #head { background: url('../images/sprite.gif') repeat-x 0 -1007px; width: 100%; height: 150px; border-top: 1px solid #fff; }
body#contact #headbit { border-bottom: 1px solid #a62e39; /* top of divider */ }
body#contact #page-title { width: 960px; margin: 0 auto; border-top: 1px solid #ff4556; /* bot of divider */ }
/* `Home
---------------------------------------------------------------------------------------------------- */
body#home #head { background: url('../images/sprite.gif') repeat-x 0 -25px; width: 100%; height: 215px; border-top: 1px solid #fff; overflow: hidden; }
body#home #head a { color: #eee; border-bottom-color: #eee; font-weight: bold; }
body#home #head a:hover { color: #fff; border-bottom-color: #fff; }
body#home #headbit { border-bottom: 1px solid #047ca4; /* top of divider */ }
body#home #page-title { position: relative; width: 960px; margin: 0 auto; padding: 16px 0 0 0; border-top: 1px solid #11c2ff; /* bot of divider */ }
#featured-content { margin-top: 5px; width: 195px; float: left; }
body#home #page-title p { padding: 0; color: #fff; line-height: 20px; padding: 10px 0 0 5px; }
body#home #page-title img { float: right; }
body#home h1 { text-shadow: 0 -1px #005874; }
body#home h2 { font-size: 3em; color: #fff; text-shadow: 0 -1px #00729e; }
body#home h2 strong { color: #d3f4ff; font-weight: 600; }
body#home a.more { font-size: .353em; font-weight: normal; font-style: italic; }
body#home h3 { color: #01a8de; }
body#home #right h3 { width: 205px; }
body#home h4 { color: #022b38; text-shadow: 0 1px #9cc8d7; }
span.featured-title { font-size: 1.167em; color: #fff; text-shadow: 0 -1px #00729e; }
/* `Slideshow
---------------------------------------------------------------------------------------------------- */
#slideshow { position: relative; left: -111px; width: 1104px; height: 847px; clear: both; }
#slideshow img { position: absolute; top: 0; left: 0; z-index: 8; opacity: 0.0; cursor: pointer; }
#slideshow img.active { z-index: 10; opacity: 1.0; }
#slideshow img.last-active { z-index: 9; }
#pager { position: relative; top: 20px; z-index: 100; float: right; }
#pager a { background: url('../images/dots.png') no-repeat -15px 0; width: 15px; height: 15px; display: inline-block; text-indent: -9999px; border: none; margin-left: 5px; }
#pager a.activeSlide { background: url('../images/dots.png') no-repeat 0 0; }