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: #000; background: #fff; }
ol, ul { list-style: none; }
/* tables still need 'cellspacing="0"' in the markup */
table { border-collapse: separate; border-spacing: 0; vertical-align: middle; }
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }
q, blockquote { quotes: "" ""; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; }
a img { border: none; }
html body { font: 0.9em Helvetica; padding: 0; margin: 0; background: #d3d3d3 url(/images/page_bg.png) repeat-x; min-height: 730px; }
html body .loading { position: absolute; width: 100%; height: 100%; background: transparent url(/images/transparent_bg.png); z-index: 40; text-align: center; display: none; }
html body .loading .message { margin: 22% auto 0 auto; background: url(/images/loader.gif) center no-repeat; padding-top: 65px; font-weight: bold; font-size: 1.3em; letter-spacing: -1px; color: #525252; }
html body #header { width: 100%; height: 393px; background: #e7e7e7 url(/images/large_left_bg.jpg) no-repeat; position: absolute; top: 0; left: 0; }
html body #header .title { float: left; position: fixed; font-weight: bold; letter-spacing: -4px; font-size: 4em; line-height: 0.7em; top: 28px; left: 30px; }
html body #header .title a { color: #fff; text-decoration: none; }
html body #header .title a:hover { color: #efefef; }
html body #header #navigation { border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; background-color: #fff; float: right; position: fixed; right: 10px; top: 5px; left: auto; padding: 0 10px; z-index: 30; }
html body #header #navigation li { font-size: 1em; position: relative; float: left; }
html body #header #navigation li a { color: #cfcfcf; font-weight: bold; text-decoration: none; text-transform: lowercase; padding: 7px 7px; display: block; position: relative; }
html body #header #navigation li a.active { color: #52c6df; }
html body #header #navigation li a:hover { color: #5598b0; }
html body #header #navigation li #hire-panel { border-radius: 0px 0px 10px 10px; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius: 0px 0px 10px 10px; position: absolute; width: 155px; background-color: #fff; top: 30px; left: -65px; padding: 10px 10px 0 10px; font-size: 1.3em; font-weight: bold; letter-spacing: -1px; text-align: center; color: #656565; overflow: hidden; display: none; }
html body #header #navigation li #hire-panel li { text-align: center; float: left; width: 100%; }
html body #header #navigation li #hire-panel li .available { color: #72c66f; }
html body #header #navigation li #hire-panel li .unavailable { color: #cf3a34; }
html body #header #navigation li #hire-panel li .hours { color: #333; }
html body #header #navigation li #hire-panel li .contact { color: #63bbe3; }
html body #header #navigation li #hire-panel li .close { font-size: 0.8em; margin-bottom: 0; }
html body #wrapper { width: 950px; position: relative; margin: 35px auto; padding-top: 0px; }
html body #wrapper .panel { /* Webkit (Safari, Chrome) */ -webkit-box-shadow: #b7b7b7 0 0 4px; /* Gecko (Firefox, Camino) */ -moz-box-shadow: #b7b7b7 0 0 4px; /* CSS3 */ box-shadow: #b7b7b7 0 0 4px; }
html body #wrapper .panel .heading { margin: 7px; height: 58px; }
html body #wrapper #portfolio { background: #f7f7f7 url(/images/work_panel_bg.png) right top no-repeat; width: 100%; clear: both; position: relative; top: 60px; float: left; z-index: 5; }
html body #wrapper #portfolio .heading { background: url(/images/light_blue_bar_bg.png) repeat-x; }
html body #wrapper #portfolio .heading h2 { font-size: 2.5em; font-weight: bold; letter-spacing: -3px; padding-left: 10px; width: 253px; height: 58px; background: url(/images/h1_bg.jpg) top left no-repeat; color: #10a6c5; line-height: 1.6em; overflow: hidden; text-indent: -1000px; }
html body #wrapper #portfolio #featured { width: 601px; float: left; background: url(/images/big_screenshot_bg.png) no-repeat; margin-left: 18px; margin-top: 20px; padding: 7px; text-align: center; overflow: hidden; }
html body #wrapper #portfolio #featured #photos { float: left; width: 601px; height: 341px; margin-bottom: 10px; position: relative; overflow: hidden; }
html body #wrapper #portfolio #featured #photos ul { float: left; width: 100000px; list-style: none; padding: 0; margin: 0; }
html body #wrapper #portfolio #featured #photos ul li { float: left; margin: 0 7px 0 0; padding: 0; }
html body #wrapper #portfolio #featured #photos ul img { float: left; }
html body #wrapper #portfolio #featured #controls { height: 28px; clear: both; overflow: hidden; text-align: center; margin: 0px auto 25px auto; padding-top: 0px; }
html body #wrapper #portfolio #featured #controls a { background: transparent url(/images/controls_sprite.png) no-repeat; display: inline-block; overflow: hidden; text-indent: -1000px; width: 30px; }
html body #wrapper #portfolio #featured #controls a:active, html body #wrapper #portfolio #featured #controls a:active { position: relative; top: 1px; }
html body #wrapper #portfolio #featured #controls .arrow { height: 11px; width: 17px; position: relative; top: -1px; padding: 5px; }
html body #wrapper #portfolio #featured #controls .arrow.prev { margin-right: 10px; background-position: -46px 0px; }
html body #wrapper #portfolio #featured #controls .arrow.prev:hover { background-position: -67px 0px; }
html body #wrapper #portfolio #featured #controls .arrow.next { margin-left: 10px; background-position: 0 0; }
html body #wrapper #portfolio #featured #controls .arrow.next:hover { background-position: -22px 0; }
html body #wrapper #portfolio #featured #controls .list { display: inline; }
html body #wrapper #portfolio #featured #controls .list li { display: inline; }
html body #wrapper #portfolio #featured #controls .list li a { display: inline-block; width: 12px; height: 12px; padding: 5px; background-position: -90px 0; margin: 0px 3px; }
html body #wrapper #portfolio #featured #controls .list li a:hover { background-position: -124px 0; }
html body #wrapper #portfolio #featured #controls .list li a.active, html body #wrapper #portfolio #featured #controls .list li a:active { background-position: -107px 0; }
html body #wrapper #portfolio #featured #description { float: left; width: 100%; text-align: left; }
html body #wrapper #portfolio #featured #description .title { font-weight: bold; font-size: 1.8em; letter-spacing: -1px; float: left; text-transform: lowercase; }
html body #wrapper #portfolio #featured #description .title.websitemuscle { color: #af6709; }
html body #wrapper #portfolio #featured #description .title.websitemuscle .alt { color: #d8900e; }
html body #wrapper #portfolio #featured #description .title.gtrot { color: #d72d22; }
html body #wrapper #portfolio #featured #description .title.travel { color: #3053ab; }
html body #wrapper #portfolio #featured #description .title.travel .alt { color: #3666d7; }
html body #wrapper #portfolio #featured #description .title.paquette { color: #8296c2; }
html body #wrapper #portfolio #featured #description .title.paquette .alt { color: #aeccfc; }
html body #wrapper #portfolio #featured #description .title.styletribe { color: #000; }
html body #wrapper #portfolio #featured #description .title.styletribe .alt { color: #606060; }
html body #wrapper #portfolio #featured #description .technology { float: right; font-size: 0.8em; font-weight: bold; color: #bbb; margin-top: 10px; text-transform: lowercase; }
html body #wrapper #portfolio #featured #description .technology .tags { float: right; font-size: 0.95em; text-align: left; }
html body #wrapper #portfolio #featured #description .technology .tags li { border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; color: #fff; background-color: #c7c7c7; margin-left: 5px; text-align: center; padding: 1px 6px; float: left; }
html body #wrapper #portfolio #featured #description .technology .tags li.no_bg { background: none; color: #bbb; }
html body #wrapper #portfolio #featured #description p { clear: both; float: left; width: 100%; margin: 10px 0; line-height: 1.8em; font-style: italic; color: #797878; font-size: 0.9em; }
html body #wrapper #portfolio #projects { width: 267px; float: right; margin-top: 7px; margin-right: 15px; padding-left: 18px; padding-top: 8px; background: url(/images/work_vertical_separator.png) repeat-y; margin-bottom: 15px; }
html body #wrapper #portfolio #projects .project { float: left; width: 252px; height: 81px; padding: 7px 8px 15px 8px; margin-bottom: 3px; background: url(/images/little_screenshot_bg.png) no-repeat; }
html body #wrapper #portfolio #projects .project:active { position: relative; top: 2px; }
html body #wrapper #about { float: left; width: 0px; top: 65px; position: relative; left: -10px; overflow: hidden; background: #eeeded url(/images/about_panel_bg.png) top left no-repeat; height: 623px; display: none; color: #dcdbdd; z-index: 4; font-size: 1.25em; font-weight: bold; text-transform: lowercase; letter-spacing: -1px; }
html body #wrapper #about .heading { background: url(/images/dark_blue_bar_bg.png) repeat-x; margin-bottom: 20px; }
html body #wrapper #about .heading h2 { font-weight: bold; letter-spacing: -3px; padding-left: 10px; width: 253px; height: 58px; background: url(/images/h2_bg.jpg) top left no-repeat; color: #10a6c5; line-height: 1.6em; overflow: hidden; text-indent: -1000px; float: left; }
html body #wrapper #about .heading #close-about { float: right; margin-right: 15px; margin-top: 20px; color: #4089a9; font-size: 0.9em; text-decoration: none; display: none; }
html body #wrapper #about .heading #close-about:hover { color: #377590; }
html body #wrapper #about hr { margin: 20px 0; height: 2px; border: none; background: transparent url(/images/about_panel_separator.png) repeat-x; }
html body #wrapper #about .left { float: left; margin-left: 30px; margin-right: 20px; width: 290px; display: none; height: 430px; }
html body #wrapper #about .left h3 { font-size: 4.7em; font-weight: bold; width: 250px; letter-spacing: -5px; line-height: 0.7em; height: 189px; text-transform: none; }
html body #wrapper #about .left #skills li { font-weight: normal; letter-spacing: 0; font-size: 0.8em; color: #c9c7ca; }
html body #wrapper #about .left #skills li .skill { font-weight: bold; letter-spacing: -1px; font-size: 1.4em; }
html body #wrapper #about .left #skills li .skill.ruby { color: #ba4a4e; }
html body #wrapper #about .left #skills li .skill.php { color: #6e72aa; }
html body #wrapper #about .left #skills li .skill.photoshop { color: #4776ae; }
html body #wrapper #about .left #skills li .skill.illustrator { color: #dd9a51; }
html body #wrapper #about .left #skills li .skill.standard { color: #999999; }
html body #wrapper #about .right { float: left; width: 290px; display: none; height: 430px; }
html body #wrapper #about .right p { color: #979798; width: 95%; margin: 0 auto 15px auto; text-align: right; line-height: 1.6em; font-weight: normal; font-size: 0.75em; letter-spacing: 0; }
html body #wrapper #about #networks { clear: both; float: left; margin-left: 30px; width: 600px; margin-top: 10px; padding-top: 25px; background: transparent url(/images/about_panel_separator.png) top repeat-x; display: none; }
html body #wrapper #about #networks #icons { margin: 0 auto; width: 325px; }
html body #wrapper #about #networks #icons li { float: left; }
html body #wrapper #about #networks #icons li a { display: block; width: 30px; height: 30px; overflow: hidden; text-indent: -1000px; position: relative; top: 0; margin-right: 10px; }
html body #wrapper #about #networks #icons li a.shadow { /* Webkit (Safari, Chrome) */ -webkit-box-shadow: #1cb5d6 0 0 10px; /* Gecko (Firefox, Camino) */ -moz-box-shadow: #1cb5d6 0 0 10px; /* CSS3 */ box-shadow: #1cb5d6 0 0 10px; background-color: #95d3e2 !important; }
html body #wrapper #about #networks #icons li a.email { background: url(/images/icon_email.png); }
html body #wrapper #about #networks #icons li a.facebook { background: url(/images/icon_facebook.png); }
html body #wrapper #about #networks #icons li a.flickr { background: url(/images/icon_flickr.png); }
html body #wrapper #about #networks #icons li a.gowalla { background: url(/images/icon_gowalla.png); }
html body #wrapper #about #networks #icons li a.grooveshark { background: url(/images/icon_grooveshark.png); }
html body #wrapper #about #networks #icons li a.linkedin { background: url(/images/icon_linkedin.png); }
html body #wrapper #about #networks #icons li a.tumblr { background: url(/images/icon_tumblr.png); }
html body #wrapper #about #networks #icons li a.twitter { background: url(/images/icon_twitter.png); }
html body #wrapper #about #networks #icons li a.vimeo { background: url(/images/icon_vimeo.png); }
html body #wrapper #about #networks .note { clear: both; text-align: center; padding-top: 10px; font-size: 0.7em; font-weight: normal; letter-spacing: 0; }
html body #wrapper #about #networks .note a { color: #cecdcf; }
html body #footer { float: left; width: 100%; margin-top: 80px; position: fixed; padding-bottom: 20px; width: 100%; left: 0; bottom: 0; top: auto; /* *sniff* :background transparent url(/images/footer_bg.jpg) bottom left no-repeat */ margin-top: 5px; height: 309px; z-index: 0; }
html body #footer #power { margin: 0; padding: 0; border: 0; outline: 0; overflow: hidden; display: inline-block; float: left; position: absolute; bottom: 5px; left: 10px; top: auto; }
html body #footer #power { display: block; }
html body #footer #power li { list-style-type: none; margin-left: 0px; white-space: nowrap; display: inline; float: left; padding-left: 10px; padding-right: 10px; }
html body #footer #power li:first-child, html body #footer #power li.first { padding-left: 0px; }
html body #footer #power li:last-child, html body #footer #power li.last { padding-right: 0px; }
html body #footer #power li a { display: block; overflow: hidden; text-indent: -1000px; background: url(/images/footer_sprite.png) no-repeat; }
html body #footer #power .rackspace { width: 124px; height: 20px; background-position: 0 -24px; }
html body #footer #power .rackspace:hover { background-position: 0 -3px; }
html body #footer #power .sinatra { width: 64px; height: 20px; background-position: -144px -24px; }
html body #footer #power .sinatra:hover { background-position: -144px -3px; }
html body #footer #power .kiva { width: 48px; height: 20px; background-position: -227px -24px; }
html body #footer #power .kiva:hover { background-position: -227px -3px; }
html body #footer #power .compass { width: 77px; height: 20px; background-position: -361px -24px; }
html body #footer #power .compass:hover { background-position: -361px -4px; }
html body #footer #power .love { width: 47px; height: 20px; background-position: -298px -24px; }
html body #footer #power .love:hover { background-position: -298px -4px; }
html body #footer #copyright { float: right; font-size: 0.9em; color: #aaaaaa; font-weight: bold; position: absolute; right: 10px; bottom: 5px; }