html *{padding:0;margin:0}
* html{padding:0; margin:0}


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,hr,blockquote,
p,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,input,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
button,textarea {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  vertical-align:baseline;
  background:transparent}

h1,h2,h3,h4,h5,h6{font-weight:normal}

ol,ul{list-style:none}
blockquote:before,blockquote:after,
q:before,q:after{content:''; content:none}
/* remember to define focus styles! */
:active,:focus{outline:0}
button::-moz-focus-inner {border:0}
/* remember to highlight inserts somehow! */
ins{text-decoration:none}
del{text-decoration:line-through}
sub{vertical-align:sub}
sup{font-size:80%;vertical-align:top}
/* tables still need 'cellspacing="0"' in the markup */
table{border-collapse:collapse; border-spacing:0}


.cf{clear:both}
.hidden{display:none}
.hider{overflow:hidden}
.holder{
  overflow:auto}


/* Floats
 * --------------------- */
.aligncenter{margin-left:auto;margin-right:auto}
.alignleft{float:left}
.alignright{float:right}
.alignnone{}


/* Start Here
 * ------------- */

body {
  background:#fff;
  color:#696969;
  font:.625em/1 Arial, 'Myriad Pro', sans-serif}
a {
  color:#00aa74;
  text-decoration:none;
  font-weight:bold;}
a:focus,
a:hover {
  text-decoration:underline;}
#page {width:800px}
#pageWrapper {
  background:url(images/vectorhead.png) no-repeat 16px 60px;
  padding-left:30px}

#header {
  background:url(images/line.png) no-repeat 0 bottom;
  height:32px;
  margin-top:20px;
  overflow:hidden;
  position:relative}
h1 {
  height:20px;
  left:0;
  position:absolute;
  text-indent:-9999em;
  width:279px}
h1 a {
  background:url(images/logo.png) no-repeat;
  display:block;
  height:20px;
  text-indent:-9999em;
  width:279px}
h2 {
  background:url(images/brad.png) no-repeat right bottom;
  height:20px;
  position:absolute;
  right:20px;
  text-indent:-9999em;
  top:0;
  width:143px}

/* Intro */
#intro {
  padding:10px 20px 0px 210px}
#indentity {
  margin-bottom:2em;
  padding:5px 0}
#indentity li {
  float:left;
  padding-top:15px;
  width:20%}
#id-email {background:url(images/id-email.png) no-repeat}
#id-hometown {
  background:url(images/id-hometown.png) no-repeat 30% 0;
  text-indent:10px}
#id-dobsex {
  background:url(images/id-dobsex.png) no-repeat 45% 0;
  text-indent:25px}
#id-resume {
  background:url(images/id-resume.png) no-repeat 50% 0;
  text-indent:30px}
#id-network {
  background:url(images/id-net.png) no-repeat 80% 0;
  text-indent:39px}
#intro p {
  line-height:1.4;
  margin-bottom:1.6em}
#intro #latest-tweet {
  background:#e6e6e6 url(images/twitter.png) no-repeat 5px center;
  height:30px;
  line-height:30px;
  padding:0 5px 0 33px;
  position:relative;
  overflow:hidden;}
#latest-tweet .latest {
  left:33px;
  font-weight:bold;
  position:absolute}
#latest-tweet .expand {
  position:absolute;
  right:7px}
#intro #latest-tweet a {font-weight:bold}
h3 {
  color:#111;
  font-size:120%;
  font-weight:bold;
  text-transform:uppercase}
h3 a {text-decoration:none !important;}
#intro h3 {
  height:14px;
  text-indent:-9999em}
#intro #primary-skills {background:url(images/primary-skills.png) no-repeat}
#intro #clients-brands {background:url(images/clients-brands.png) no-repeat}
#intro #about {background:url(images/about.png) no-repeat}
#intro #further-info {color:#aeaeae;font-size:90%}

/* Work */
#work {}
#work h3 {
  padding-left:.2em;
  position:relative}
#work h3 a {
  color:#111;
  display:block}
#work h3 .expand,
#work h3 .collapse {
  color:#888;
  cursor:pointer;
  display:none;
  font-size:80%;
  position:absolute;
  right:23px;
  text-transform:none;
  top:0}
#work h3 span b {color:#00aa74}
#work .theList {margin-left:-5px}
#work h3 a:hover {color:#00aa74}
#work .item {
  background:url(images/line-black.png) no-repeat 20% bottom;
  margin-bottom:20px;
  overflow:auto;
  padding:20px 0}
#web, #print, #creative {
  background:url(images/line-gray.png) no-repeat 0 bottom;
  padding:16px 0 17px}
.collapse {
  display:none;
  font-size:110%;
  position:absolute;
  right:0;
  top:0}
.collapse a {
  font-size:130%;
  font-weight:bold}
.backtop {
  font-size:110%;
  padding-right:20px;
  text-align:right;
  text-transform:uppercase}
.sLeft {
  color:#333;
  background:url(images/shadow-small.png) no-repeat;
  float:left;
  line-height:1.3;
  width:285px}
.sLeft img {margin:3px 0 15px 5px}
.sLeft .status {margin-bottom:1em;padding-left:3px;line-height:12px;}
.sLeft .status a {font-weight:bold}
.sLeft .desc {margin-bottom:.6em}
.sLeft span {font-weight:bold}
.sLeft p,
.sLeft ul {
  font-size:110%;
  padding:0 2.2em 0 .4em}
.sLeft h4 {
  color:#111;
  font-size:140%;
  padding:0 1.6em 3px .2em;
  line-height:18px;}
.sLeft li {
  background:url(images/arrow.png) no-repeat 0 3px;
  margin-bottom:.4em;
  padding-left:10px;
  color:#696969;
}

.sRight {
  background:url(images/shadow-big.png) no-repeat 5px 0;
  float:right;
  padding:4px 0 30px;
  width:485px}
.sRight img {margin-left:15px}
#work li.other {
  font-size:110%;
  font-style:italic;
  line-height:1.3;
  padding:0 5px;
  margin-top:-10px;}
#creative li {
  background:url(images/shadow-wp.png) no-repeat 0 20px;
  padding:20px 0}
#creative li img {margin:3px 0 0 11px}

#footer {
  background:url(images/line.png) no-repeat;
  margin-top:20px;
  padding:10px 20px 10px 0;
  text-align:right}

/* Tweets */
#tweets {
  background:#e6e6e6;
  display:none;
  left:790px;
  position:absolute;
  top:62px;
  width:200px}
#tweets h3 {
  color:#333;
  font-size:110%;
  padding:.8em 10px 1em;
  text-transform:none}
.loading {
  background: url('images/ajax-loader.gif') center no-repeat;
  height: 60px}
#latest_tweet p {
  background:url(images/arrow2.png) no-repeat 10px 5px;
  font-size:110%;
  line-height:1.3;
  margin-bottom:1em;
  padding:0 10px 0 17px}
#follow {
  background:#222;
  font-size:110%;
  font-weight:bold;
  margin:0;
  padding:8px 10px}
#follow a:hover {
color:#0ce29e;
}
#tweets .close {
  font-style:italic;
  position:absolute;
  right:10px;
  top:8px}


/* Contact Popout */
#contact {
  background-color:#fff;
  background-image: url(images/blank.gif);
  display:none;
  width:435px}
#contact .close {background:#fff}
#contact form,
#contact .success {
  padding:20px 30px;
  position:relative}
#contact h3 {
  font-size:160%;
  text-transform:none}
#contact p {
  font-size:120%;
  line-height:1.3;
  padding:1.6em 0}
#contact li {
  margin-bottom:.8em;
  overflow:auto}
#contact label {
  float:left;
  font-size:120%;
  font-weight:bold;
  padding-top:8px;
  width:20%}
#contact .special label {
  line-height:1.1;
  padding-top:2px}
#contact form li span {color:#d31111}
#contact input,
#contact textarea {
  background:#e3e3e3;
  color:#777;
  float:right;
  padding:8px 5px;
  width:75%}
#contact input:focus,
#contact textarea:focus {
  background:#efefef;
  color:#222}
#contact button {
  color:#00aa74;
  cursor:pointer;
  float:right;
  font-size:110%;
  font-weight:bold;
  outline:0}
#contact button:hover,
#contact button:focus {
  color:#666}
#contact .submit {
  margin-bottom:0;
  padding:5px 0}
#contact .submit p {
  float:left;
  font-size:110%;
  font-style:italic;
  padding:0 0 0 22%;
  width:50%}
#contact .close {
  right: 30px;
  position:absolute}
#contact span.error {
  float:right;
  padding:3px 0;
  width:77%}
#contact .active {background:url(images/ajax-loader.gif) no-repeat right 0}