/* defaults, globals, etc.
==============================================================================*/
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;
font: 12px "Georgia", serif;
text-align: left;
background: #FFFFFF url('../../portfolio2_images/greyback1.jpg') repeat  top center;}

ol, ul 
{list-style: none;}

table 
{border-collapse: separate;
border-spacing: 0;}

caption, th, td 
{text-align: left;
font-weight: normal;}

a, a img
{text-decoration: none}

button 
{width: auto;
overflow: visible;}

.clearit 
{clear: both;
height: 0;
line-height: 0.0;
font-size: 0;}

h1, .work_item a span em, #bio p em, #twitter_update_list li span, #elsewhere ul, #stuffthings h2
{font-family: "ff-din-web-condensed-1","ff-din-web-condensed-2";}

 .wf-loading {
 color: rgba(43, 41, 37, 0.0);
  }


/* structure, layout
==============================================================================*/
.container
{width:960px;
margin:0 auto;
padding: 0 9px;}

#navfootwrapper
{position: absolute;
width: 100%;
height: 100%;
}

#intro
{width: 960px;
height: 771px;
margin-bottom: 224px;
overflow: hidden;
position: relative;
background: transparent url('../../portfolio2_images/circles.png') no-repeat fixed top center;
}

#work
{width: 960px;
padding-top: 72px;
padding-bottom: 300px;
margin: -4px 0 4px;
position: relative;}

#profile
{width: 960px;
height: 700px;
padding-top: 72px;
position: relative}

#hire
{width: 960px;
height: 1200px;
padding-top: 72px;
margin-top: 2px;
position: relative}

.left_col, .center_col, .right_col
{width: 964px;
float: left;
z-index: 600;
background: #FFFFFF url('../../portfolio2_images/greyback1.jpg') repeat  top center;}

#hire_wrapper
{background: transparent url('../../portfolio2_images/wavy.png') repeat-x fixed bottom center;}

#asterisk
{width: 960px;
height: 600px;
margin-top: -4px;
position: relative}


/* my work
==============================================================================*/

.work_item
{position: relative;
float: left;
padding-bottom: 2px;
z-index: 600;
}


.work_item a img
{padding: 4px;
background-color: white;}

img.color
{position: absolute;
opacity: 0.0;
top: 0;
left: 0;}

.work_item a:hover img.color
{opacity: 1.0}

.work_item strong
{opacity: 0.0;
display: block}

.work_item a.add
{visibility: hidden}

.work_item a span
{opacity: 0.0;
background: transparent url(black50.png);
background: rgba(43, 41, 37, 0.9) none; 
color: #FFF;
position: absolute;
bottom: 9px;
left: 4px;
text-align: center;
padding: 12px 0;
font-size:0.917em;
line-height: 14px;
font-style: italic;}

.work_item a span em
{text-transform: uppercase;
font-style: normal;
display: block;
letter-spacing: .1em;
font-size: 1.2em;}

.work_item a:hover span
{opacity: 1.0}

.left_col > .work_item a img
{margin-right: 1px;}

.left_col > .work_item a span
{width: 231px;
left: 4px;}

.center_col > .work_item a img
{margin: 0 4px 0 0 ;}

.center_col > .work_item a span
{width: 229px;
left: 4px;}

.right_col > .work_item img
{margin-left: 1px}

.right_col > .work_item a span
{width: 231px;
left: 5px;}


/* profile
==============================================================================*/
#bio
{width: 100%;
float: left;
padding: 3px 0 5px;

}

#bio p
{color: #5d5952;
font-size:1.083em;
line-height: 1.385em;
padding-bottom: 1.385em;
margin-right: 18px;
text-align: justify}

#bio p em
{float: left;
margin-bottom: -0.2em;
padding-right: 3px;
font-size:40px;
line-height: 1.05em;
font-weight: 900;
color: #ddb036;}

#twitter
{width: 640px;
min-height: 72px;
margin-top: 26px;
margin-bottom: 13px;
float: left;
position: relative;
background: transparent url('../../portfolio2_images/twitterbird.png') no-repeat 18px bottom;}

.tweet
{position: absolute;
bottom: 7px;
color: #5d5952;
padding-left: 108px;}

#twitter_update_list li
{font-style: italic}

ul#twitter_update_list li span
{display: block;
color: #5d5952;
text-transform: uppercase;
font-size:1.333em;
font-style: normal;
line-height: 1.125em;}

.tweet a, #lastfm a, #stuffthings a, #sideprojects a, #hiremeblurb h4 a
{padding: 0 2px;
margin: 0 -2px;
}

.tweet a:link, .tweet a:visited
{color: #8d877d;} 

#lastfm, #elsewhere
{width: 640px;
float: left;}

#lastfm h3
{border-bottom: 1px solid #e0e0e0;
border-top: 1px solid #e0e0e0;
font-size:0.833em;
line-height: 1.8em;
padding: 4px 0;
margin-left: 18px;
color: #5e5e5e;
font-style: italic;
font-family: "Georgia", serif;}

#lastfm h3 em
{color: #8D9758}

#lastfm h3 strong
{text-transform: uppercase;
letter-spacing: .15em;
font-style: normal;
}

#lastfm a
{padding: 0 2px;
margin: 0 -2px}

#lastfm a.make_space
{margin-left: 1px;}

#lastfm a:link, #lastfm a:visited
{color: #5d5952;}


#elsewhere ul
{margin-left: 18px;
border-bottom: 1px solid #e0e0e0;}

#elsewhere li
{width: 103px;
height: 36px;
float: left;
font-size:1.083em;
text-transform: uppercase;
line-height: 29px;

}

#elsewhere li a
{padding: 5px 0 2px 24px;
}


li.delicious a
{background: transparent url('../../portfolio2_images/delicious.png') no-repeat 4px;
padding-left: 24px}

li.flickr a
{background: transparent url('../../portfolio2_images/flickr.png') no-repeat 4px;
padding-left: 24px}

li.twitterl a
{background: transparent url('../../portfolio2_images/twitter2.png') no-repeat 4px;
padding-left: 24px}

li.behance a
{background: transparent url('../../portfolio2_images/behance.png') no-repeat 4px;
padding-left: 24px}

li.dribbble a
{background: transparent url('../../portfolio2_images/dribbble.png') no-repeat 4px;
padding-left: 24px}

li.lastfml a
{background: transparent url('../../portfolio2_images/lastfm.png') no-repeat 4px;
padding-left: 24px}

#elsewhere li a:link, #elsewhere li a:visited, #stuffthings a:link, #stuffthings a:visited, #sideprojects a:link, #sideprojects a:visited
{color: #5d5952; font-weight: bold}

#hiremeblurb h4 a:link, #hiremeblurb h4 a:visited
{color: #5d5952;}

#elsewhere li a:focus, #elsewhere li a:hover, #elsewhere li a:active, #lastfm a:focus, #lastfm a:hover, #lastfm a:active, .tweet a:focus, .tweet a:hover, .tweet a:active, #stuffthings a:focus, #stuffthings a:hover, #stuffthings a:active, #sideprojects a:focus, #sideprojects a:hover, #sideprojects a:active, #hiremeblurb h4 a:focus, #hiremeblurb h4 a:hover, #hiremeblurb h4 a:active
{background-color: #2b2925;
color: #FFF}


#sideprojects
{width: 622px;
padding-top: 4px;
margin-left: 18px;
float: left;}

#sideprojects h4
{font-size:0.75em;
line-height: 2em;
color: #5d5952;
padding-bottom: 4px;
border-bottom: 1px solid #e0e0e0;
text-transform: uppercase}

#sideprojects h4 em
{text-transform: lowercase;
letter-spacing: normal;
font-style: italic;
padding: 0 2px;}

.project1
{width: 622px;
float: left;
padding: 9px 0;
}

.project1 img
{float:left;
margin-right: 9px;}

.project2
{width: 311px;
float: left;
padding: 18px 0;
}

.project2 img
{float: left;
margin: 0 9px 0 18px}

.project1 p
{margin-right: 18px;}

#sideprojects p
{color: #5d5952;
font-size:0.917em;
line-height: 1.636em;
padding-top: 14px;
font-style: italic;}

#stuffthings
{width: 100%;
padding: 24px 0 17px;
float: left;
margin-left: 18px;
border-bottom: 1px solid #e0e0e0;
text-align: justify;}

#stuffthings h2
{font-size:1.333em;
line-height: 1.125em;
color: #5d5952;
text-transform: uppercase;
padding:  1px 0 0 24px;
margin-bottom: .175em;
height: .95em;
overflow: hidden;
background: transparent url('../../portfolio2_images/stuffthings.gif') no-repeat;}


#stuffthings h2 em
{font-family: Georgia;
text-transform: none;
font-style: italic;
font-size: .6em;
margin-left: 6px;}

#stuffthings h2 em a
{margin: 0px;}

#stuffthings p
{font-size:1.083em;
line-height: 1.5em;
color: #5d5952;}

#stuffthings p a
{font-style: italic;}

#stuffthings img
{display: none;}


/* hire me
==============================================================================*/
#hiremeblurb
{width: 600px;
float: right;
padding-top: 18px;}

#hiremeblurb h1
{color: #FFF;
text-shadow: rgba(0, 0, 0, 0.05) 0 2px 0;
text-transform: uppercase;
font-size:6em;
line-height: .98em;
padding-left: 36px;
margin-bottom: 18px}

#hiremeblurb h2
{padding-left: 36px;
font-size:1.167em;
line-height: 1.286em;
color: #5e5e5e;}

#contactform
{width: 359px;
min-height: 400px;
position: relative;
float: left;
border-right: 1px solid #e0e0e0;}

#contactform h3
{font-size:0.833em;
line-height: 1.8em;
text-transform: uppercase;
padding-top: 3.5em;
letter-spacing: .15em;
text-align: center;
color: #5e5e5e;
font-family: "Georgia", serif;}

#contactform h3 em
{font-size: 2em;
display: block;
color: #d3624b;}

#redcircle
{width: 10em;
height: 10em;
-webkit-border-radius: 5em;
-moz-border-radius: 5em;
border-radius: 5em;
border: 1px solid #e0e0e0;
position: absolute;
top: 4%;
left: 30%;
}

label
{padding-right: 9px;
font-size:0.917em;
line-height: 1.636em;
color: #5e5e5e;
clear: both;
font-family: "Georgia", serif;
font-style: italic}

.line
{padding-top: 18px;
margin-right: 36px;
border-bottom: 1px solid #e0e0e0;
clear: both;}

#field_comment
{padding-top: 18px;
margin-right: 36px;
border-bottom: 1px solid #e0e0e0;
}

#textblock
{background-color: transparent;
width: 72%;
height: 7em;
border: none;
float: right;
font-size:0.917em;
line-height: 1.636em;
font-style: italic;
color: #5e5e5e;
font-family: "Georgia", serif;
}

.controls
{padding-top: 24px}

input
{float: right;
width: 72%;
border: 1px solid transparent;
padding: 0;
margin-top: -1px;
background-color: transparent;
font-size:0.917em;
line-height: 1.636em;
font-style: italic;
color: #5e5e5e;
font-family: "Georgia", serif;}

button
{text-align: center;
border: none;
background: transparent url(black50.png);
background: rgba(255, 255, 255, 0.55) none;
padding: 9px 18px; 
font-size:0.833em;
line-height: 1.8em;
text-transform: uppercase;
letter-spacing: .15em;
text-align: center;
color: #5e5e5e;
font-family: "Georgia", serif;
cursor: pointer}

#phoneball
{width: 100px;
height: 100px;
float: left;
margin-left: 36px;
margin-right: 18px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: relative;
background: transparent url('../../portfolio2_images/greenwood.jpg') repeat fixed top center;}

#phoneball img
{position: absolute;
top: 14px;
left: 14px;}

#hiremeblurb h3
{font-size:1.083em;
line-height: 1.385em;
color: #5e5e5e;
padding-top: 24px}

#hiremeblurb h4
{font-size:0.917em;
line-height: 1.636em;
color: #5e5e5e;
font-style: italic;}

#hiremeblurb h4 em
{color: #7c776d;
padding: 0 4px;}

#asterisk h3
{text-align: center;
position: absolute;
font-style: italic;
bottom: 387px;
width: 960px;
color: #5e5e5e;}

#asterisk h3 a
{color: #d3624b;
font-size: 2em}

#asterisk h1, #asterisk > #ball1, #asterisk > #ball2, #asterisk > #ball3, #asterisk > #ball4, #asterisk > #meball, #asterisk > #xmas, #asterisk > #vday
{display: none;}


/* navigation, footer
==============================================================================*/
.nav
{width: 960px;
position: fixed;
top: 18px;
height: 36px;
z-index: 900;
background: transparent url(black50.png);
background: rgba(255, 255, 255, 0.75) none;}

.nav li
{width: 240px;
height: 36px;
text-align: center;
text-transform: uppercase;
font-style: italic;
line-height: 36px;
letter-spacing: .2em;
float: left;
font-size:0.917em; }

.nav li a, #elsewhere li a
{display: block}

.nav li a:link, .nav li a:visited
{color: #2b2925; }

.nav li a:hover, button:hover
{background: #2b2925;
color: #FFF }

#navblock_1
{position: absolute;
top: 12px;
width: 240px;
height: 49px;
z-index: 990;
background: transparent url('../../portfolio2_images/redline.png') no-repeat  center;}

#navblock_2
{position: absolute;
top: 12px;
left: 240px;
width: 240px;
height: 49px;
z-index: 990;
background: transparent url('../../portfolio2_images/redline.png') no-repeat  center;}

#navblock_3
{position: absolute;
top: 12px;
left: 480px;
width: 240px;
height: 49px;
z-index: 990;
background: transparent url('../../portfolio2_images/redline.png') no-repeat  center;}

#navblock_4
{position: absolute;
top: 12px;
right: 0px;
width: 240px;
height: 49px;
z-index: 990;
background: transparent url('../../portfolio2_images/redline.png') no-repeat  center;}

#footer
{width: 960px;
position: fixed;
bottom: 16px;
z-index: 300;}

#footer h1
{padding-left: 45px;
color: #5d5952;
padding: 22px 18px 18px 45px;
margin-left: 18px;
font-size:1.167em;
line-height: 14px;
display: block;
float: right;
text-transform: uppercase;
letter-spacing: .03em;
background: transparent url('../../portfolio2_images/tflogo.png') no-repeat left;}

#footer h1 em
{display: block;
font-family: "Georgia", serif;
text-transform: none;
letter-spacing: normal;
font-style: italic;
font-size: .7em;}


/* introduction
==============================================================================*/
#intro h1
{color: #FFF;
text-shadow: rgba(0, 0, 0, 0.8) 0 2px 0;
text-transform: uppercase;
position: relative;
font-size:8.5em;
line-height: .87em;
letter-spacing: .04em;
margin-top: 4em;
text-align: center;
z-index: 600;}

#intro h1 a
{color: #FFF;}

#intro h3
{display: none;}


#ball1
{width: 200px;
height: 200px;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
position: absolute;
top: 300px;
z-index: 300;
left: 209px;
background: transparent url('../../portfolio2_images/greenwood.jpg') repeat fixed top center;}

#ball2
{width: 100px;
height: 100px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
position: absolute;
top: 150px;
z-index: 300;
left: 509px;
background: transparent url('../../portfolio2_images/vintage.jpg') repeat fixed top center;}


#ball3
{width: 50px;
height: 50px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
position: absolute;
top: 250px;
z-index: 300;
left: 689px;
background: transparent url('../../portfolio2_images/pink.png') repeat fixed top center;}


#ball4
{width: 44px;
height: 44px;
-webkit-border-radius: 22px;
-moz-border-radius: 22px;
border-radius: 22px;
position: absolute;
bottom: 360px;
z-index: 300;
right: 319px;
background: transparent url('../../portfolio2_images/brown.gif') repeat fixed top center;}

#meball
{width: 398px;
height: 398px;
-webkit-border-radius: 199px;
-moz-border-radius: 199px;
border-radius: 199px;
position: absolute;
bottom: 272px;
z-index: 300;
right: 23.34em;
background: transparent url('../../portfolio2_images/david-hill-01.jpg') repeat fixed center 101px;
}

#xmas
{width: 398px;
height: 398px;
-webkit-border-radius: 199px;
-moz-border-radius: 199px;
border-radius: 199px;
position: absolute;
bottom: 272px;
z-index: 300;
right: 23.34em;
background: transparent url('../../portfolio2_images/christmas2012.jpg') repeat fixed center 101px;
}


#vday
{width: 398px;
height: 398px;
-webkit-border-radius: 199px;
-moz-border-radius: 199px;
border-radius: 199px;
position: absolute;
bottom: 272px;
z-index: 300;
right: 23.34em;
background: transparent url('../../portfolio2_images/mk.jpg') repeat fixed center 101px;
}