/* CSS Reset */
html{color:#848789;background:#080E13;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
fieldset,img{border:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
 
/* Clearfix */
.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0;}
.clearfix{display:inline-block;}
html[xmlns] .clearfix{display:block;}
* html .clearfix{height:1%;}

/* Typography */
body{font-size:75%;}
body *{font-family:helvetica,arial,sans-serif;line-height:1.5;}
h1{font-size:4.2em;margin:0 0 0.33em;letter-spacing:-3px;}
h2{font-size:1.8em;margin-bottom:0.75em;color:#FFFFFF;}
h3{font-size:1.5em;line-height:1;margin-bottom:1em;}
a { color: #FFFFFF; text-decoration: none; }
a:hover { text-decoration: underline; }

/* Background */
html,
body { background: #060B0E url('../images/body_bg.png') repeat-y center top; }

/* Layout */
div.container { width: 950px; margin: 0 auto; }
div.column { width: 430px; }
div.column.left { float: left; }
div.column.right { float: right; }

/* Header */
#header { background: url('../images/header_bg.png') repeat-x center top; height: 375px; }
#header .container { position: relative; background: url('../images/header_container_bg.png') no-repeat center top; height: 205px; padding: 85px 50px; }
#header .description { font-size: 2.4em; }
#header .description .designer { display: block; color: #C1C3C4; }
#header .description .programmer { display: block; color: #848789; }
#header .description .private { display: block; color: #464A4E; }
#intro { float: left; width: 430px; }
#photo { float: right; width: 430px; position: relative; top: -20px; }
#photo img { display: block; margin: auto; }
#whatido { max-width: 350px; position: absolute; right: 125px; top: 279px; text-align: right ;}
#whatido b.tail { border: 8px solid transparent; border-top: 0; border-bottom: 8px solid #FFFFFF; display: inline-block; height: 0; width: 0; margin: 0 80px 0 0; position: relative; z-index: 25; }
#whatido blockquote { overflow: hidden; text-align: left; width: auto; background: #FFFFFF; padding: 20px; font-size: 1.2em; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; color: #000000; box-shadow: 0 0 20px #464A4E; -webkit-box-shadow: 0 0 20px #464A4E; -moz-box-shadow: 0 0 20px #464A4E; position: relative; z-index: 24px; }
#whatido blockquote strong { white-space: nowrap; font-weight: normal; padding: 2px 4px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; background: #E0E1E2; }
#whatido blockquote a { color: #464A4E; text-decoration: underline; }
#whatido blockquote a:hover { text-decoration: none; }

/* Work */
#work { margin: 0 0 40px; }
#work #flickr_badge_wrapper { overflow: hidden; margin: 0 0 20px; }
#work #flickr_badge_wrapper div.flickr_badge_image { float: left; margin: 0 10px 0 0; }
#work #flickr_badge_wrapper div.flickr_badge_image a { display: block; height: 75px; width: 75px; padding: 1px; border: 1px solid #848789; overflow: hidden; }
#work #flickr_badge_wrapper div.flickr_badge_image a:hover { border-color: #FFFFFF; }
#work p { font-size: 1.2em; }

/* Follow */
#follow { background: url('../images/follow_bg.png') repeat-x center top; }
#follow .container { background: url('../images/follow_container_bg.png') no-repeat center top; padding: 50px 0; }
#twitter { margin: 0 0 20px; }
#twitter ul li { list-style: none; margin: 0 0 1em; background: url('../images/avatar_small.gif') no-repeat left 2px; padding: 0 0 0 21px;  }
#twitter ul li b.tail { margin: 6px 0 0 0; float: left; display: block; height: 0; width: 0; border: 5px solid transparent; border-right: 5px solid #262B2E; border-left: none; }
#twitter ul li blockquote { font-size: 1.2em; margin: 0 0 0 5px; background: #262B2E; padding: 5px 10px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }
#twitter ul li>a { font-size: 0.9em; text-align: right; display: block; color: #464A4E; }
#twitter ul li>a:hover { color: #FFFFFF; }
#twitter a.twitter_link { display: block; margin: 10px 0 0; text-decoration: none; }
#twitter a.twitter_link img { margin: 0 10px 0 0; position: relative; top: 5px; }
#twitter a.twitter_link span { text-decoration: underline; font-size: 1.2em; }
#also ul { overflow: hidden; }
#also ul li { list-style: none; margin: 0 0 1em 0; padding: 0 0 0 21px; font-size: 1.2em; display: block; background-repeat: no-repeat; background-position: left 2px; }
#also ul li.linkedin { background-image: url('../images/favicons/linkedin.gif'); }
#also ul li.flickr { background-image: url('../images/favicons/flickr.gif'); }
#also ul li.facebook { background-image: url('../images/favicons/facebook.gif'); }
#also ul li.digg { background-image: url('../images/favicons/digg.gif'); }
#also ul li.lastfm { background-image: url('../images/favicons/lastfm.gif'); }
#also ul li.delicious { background-image: url('../images/favicons/delicious.gif'); }
#also ul li.youtube { background-image: url('../images/favicons/youtube.gif'); }
#also ul li.snooth { background-image: url('../images/favicons/snooth.png'); }
#also ul li.goodreads { background-image: url('../images/favicons/goodreads.gif'); }
#also ul li small { font-size: 0.9em; }

/* Contact */
#contact p { font-size: 1.2em; }