@charset "UTF-8";

/* CSS Document */

/* GLOBAL ID'S
=====================================================================*/
* { margin: 0; }

html, body { height: 100%; background: #f8f8f8; margin:0; padding:0; }

abbr { border-bottom:1px dotted #333; cursor:help; }

#default { background: url(../images/placeholder.png) repeat-x scroll 50% 60px #f8f8f8; margin:0; padding:0; }

#header { background:#acafaf 50% 50%; width:100%; text-align:center; }

#content { margin: 135px 0px 20px 0px; }

#content h1 { background:url("../images/default-header.png") no-repeat scroll left top transparent; display:block; height:119px; margin:0; text-indent:-999em; width:960px; margin:20px 0px 25px 0px; }

#nav { min-height:68px; }

#buttons { background:transparent; margin:0px; }

#logo img { display:block; left:-1px; position:absolute; top:0; }

#feature { margin: 40px 0px 0px 10px; }

#feature h4 { color: #999; font-weight:normal; margin:0; padding:0; }

#feature h2 { margin:0; padding:0; }

#feature img { margin-left:-5px; }

#error { width:960px;text-align:right; padding:50px 0px 0px 0px; margin:0 auto; }

/* GLOBAL CLASSES'S
=====================================================================*/
.global { height:60px; position: relative; }

/* NAVIGATION
=====================================================================*/
#buttons { display:inline; float:right; height:68px; padding:0px; overflow:inherit; position:relative; top:0; }

#buttons a { white-space:pre; margin:0; padding:0; display:inline; outline:none; }

#buttons a.hellobtn { background: url(../images/btn-sprite.gif) no-repeat 0 0; width: 86px; height: 68px; margin:0; float:left; display: block; text-indent: -9999px; }

#buttons a.hellobtn:hover { background-position: 0 -280px; }

#buttons a.hello-pushed { background: url(../images/btn-sprite.gif) no-repeat 0 -560px; width: 86px; height: 68px; margin:0; float:left; display: block; text-indent: -9999px; }

#buttons a.worksbtn { background: url(../images/btn-sprite.gif) no-repeat 0 -70px; width: 86px; height: 68px; margin: 0px; display: block; float:left; text-indent: -9999px; }

#buttons a.worksbtn:hover { background-position: 0 -350px; }

#buttons a.worksbtn:active { background-position: 0 -350px; }

#buttons a.works-pushed { background: url(../images/btn-sprite.gif) no-repeat 0 -630px; width: 86px; height: 68px; margin:0; float:left; display: block; text-indent: -9999px; }

#buttons a.profilebtn { background: url(../images/btn-sprite.gif) no-repeat 0 -140px; width: 86px; height: 68px; margin: 0px; float:left; display: block; text-indent: -9999px; }

#buttons a.profilebtn:hover { background-position: 0 -420px; }

#buttons a.profilebtn:active { background-position: 0 -420px; }

#buttons a.profile-pushed { background: url(../images/btn-sprite.gif) no-repeat 0 -700px; width: 86px; height: 68px; margin:0; float:left; display: block; text-indent: -9999px; }

#buttons a.speakbtn { background: url(../images/btn-sprite.gif) no-repeat 0 -210px; width: 86px; height: 68px; margin: 0px; float:left; display: block; text-indent: -9999px; }

#buttons a.speakbtn:hover { background-position: 0 -490px; }

#buttons a.speakbtn:active { background-position: 0 -490px; }

#buttons a.speak-pushed { background: url(../images/btn-sprite.gif) no-repeat 0 -770px; width: 86px; height: 68px; margin:0; float:left; display: block; text-indent: -9999px; }

#buttons ul { list-style-type: none; }

ul#buttons li { display: inline; /* Prevents "stepdown" */ }

/* STEPS
=====================================================================*/
#one, #two, #three, #four { background:#eeeeee; min-height:175px; -moz-border-radius:7px 7px 7px 7px; -webkit-border-top-left-radius: 7px; -webkit-border-bottom-left-radius: 7px; -webkit-border-top-right-radius: 7px; -webkit-border-bottom-right-radius: 7px; margin-bottom: 50px; padding:30px 20px 0px 20px; width:180px; }

#one p { line-height:1.4em; }

#one h3 { margin-bottom: 5px; }

#one img { text-align:center; margin-bottom:15px; }

#one:hover { background:#e5e5e5; }


#two p { line-height:1.4em; }

#two h3 { margin-bottom: 5px; }

#two img { text-align:center; margin-bottom:15px; }

#two:hover { background:#e5e5e5; }


#three p { line-height:1.4em; }

#three h3 { margin-bottom: 5px; }

#three img { text-align:center; margin-bottom:15px; }

#three:hover { background:#e5e5e5; }


#four p { line-height:1.4em; }

#four h3 { margin-bottom: 5px; }

#four img { text-align:center; margin-bottom:15px; }

#four:hover { background:#e5e5e5; }

#arrow { background-image:url(../images/icon-arrow.png); background-position: 0px 6px; height:12px; width: 50px; display:block; background-repeat:no-repeat; padding-left: 12px; padding-bottom:5px; }

/* WORKS PAGE
=====================================================================*/

#works { margin:0px 0px 20px 0px; }

#works h1 { background:url("../images/hdr-sprite.png") no-repeat scroll 0 0 transparent; display:block; height:46px; margin:0; text-indent:-999em; width:212px; margin:59px 0px 0px 0px; }

#pocketlistings { background: url(../images/work-plnet.png) right bottom no-repeat #efefef; }

#whispurr { background: url(../images/work-whispurr.png) right bottom no-repeat #efefef; }

#yola { background: url(../images/work-yola.png) right bottom no-repeat #efefef; }

#moby { background: url(../images/work-moby.png) right bottom no-repeat #efefef; }

#endcorpabuse { background: url(../images/work-endcorp.png) right bottom no-repeat #efefef; }

#herbalife { background: url(../images/work-herbalife.png) right bottom no-repeat #efefef; }

#giftguide { background: url(../images/work-giftguide.png) right bottom no-repeat #efefef; }

#redesign { background: url(../images/work-redesign.png) right bottom no-repeat #efefef; }

#morework { background: url(../images/morework.png) center bottom no-repeat #efefef; }

.project { min-height:370px; margin:15px 5px; -moz-border-radius:7px 7px 7px 7px; border:#ddd 1px solid; -webkit-border-top-left-radius: 7px; -webkit-border-bottom-left-radius: 7px; -webkit-border-top-right-radius: 7px; -webkit-border-bottom-right-radius: 7px; padding:0px; }

.project p { margin:0px 0px 0px 20px; }

.project h2 { margin:30px 20px 10px 20px; }

.for { font-family:"Times New Roman", Times, serif; font-style:italic; color: #B9B9B9; font-size:0.6em; }

.client { font-size: 0.6em; font-family:Arial, Helvetica, sans-serif; color:#B9B9B9; font-weight:normal; margin: 0; padding:0; }

/*.project img { margin:5px 0px 10px 15px; } */

.project a { text-decoration: none; outline: none; color: #3680a1; }

.project a:hover { color: #2e2e2e; }

.project a:active { outline: 0; position: relative; top: 1px; }

#responsibilities { width:320px; }

#responsibilities h4 { margin:10px 0px 0px 20px; }

#responsibilities ul { list-style-image:url(../images/icon-arrow.png); line-height:18px; font-size: 11px; font-size:1.2em; margin-left:10px; margin-top:5px }

.launch { margin: 10px 0px 15px 20px; }

.launch img { vertical-align:1px; margin-right:5px; }

.launch a { font-size:12px; }

#project { display:inline; float:right; height:68px; padding:0px; overflow:inherit; position:relative; top:0; }

#works a { white-space:pre; margin:0; padding:0; display:inline; outline:none; }

#works a.ctabutton { background: url(../images/cta-sprite.png) no-repeat 0 -120px; width: 137px; height: 40px; margin:10px 0px 10px 15px; display: block; text-indent: -9999px; }

#works a.ctabutton:hover { background-position: 0 -160px; }

#feature a { white-space:pre; margin:0; padding:0; display:inline; outline:none; }

#feature a.ctabutton { background: url(../images/cta-sprite.png) no-repeat 0 0; width: 137px; height: 40px; margin:10px 0px 0px 0px; display: block; text-indent: -9999px; }

#feature a.ctabutton:hover { background-position: 0 -40px; }

#feature a.ctabutton:active { outline: 0; position: relative; top: 1px; }

/* PROFILE PAGE
=====================================================================*/
#profile { margin:0; }

#profile h1 { background:url("../images/hdr-sprite.png") no-repeat scroll 0 -47px transparent; display:block; height:45px; text-indent:-999em; width:376px; margin:40px 0px 20px 0px; }

h2.build { background:url("../images/hdr-sprite.png") no-repeat scroll 0 -141px transparent; display:block; height:75px; text-indent:-999em; width:600px; margin:40px 0px; }

/* TWITTER API
=====================================================================*/
#latest_tweet { padding: 0px 25px; }

#latest_tweet small, #latest_tweet a { color: #333; font-style:italic; font-family: Georgia, "Times New Roman", Times, serif; font-size:11px; }

.loading { background: url(../images/ajax-loader.gif) center no-repeat; height: 60px; }

/* FORM
=====================================================================*/
#speakform { margin: 0px; }

#speak { margin:70px 0px 0px 0px; }

#speak h1 { background:url("../images/hdr-dropmealine.png") no-repeat scroll 0 0 transparent; display:block; height:48px; text-indent:-999em; width:300px; margin:-10px 0px 30px 0px; }

.form-field { width:270px; padding:18px 10px; vertical-align:middle; background: #e1e1e1; border:0; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 0px 0px 10px 0px; font-size:30px; color:#cacaca; }

.form-field-lg { width:600px; height:240px; padding:10px; background: #e1e1e1; border:0; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-size:30px; color:#cacaca; font-family:Arial, Helvetica, sans-serif; overflow:auto; }

#ccoment { width:600px; height:240px; padding:10px; background: #e1e1e1; border:0; -moz-border-radius: 10px; -webkit-border-radius: 10px; font-size:30px; color:#cacaca; font-family:Arial, Helvetica, sans-serif; overflow:auto; }

#btn-speak { background: url(../images/img-speakbtn.png) no-repeat; width:290px; height:91px; border:0; outline:none; text-indent: -9999px; cursor:pointer; display:block; font-size:0; line-height:0; margin-top:1px; outline:none; }

#btn-speak:active { position:relative; top:1px; outline:none; }

#communication { font-size:2.4em; vertical-align:middle; margin:20px 0px 40px 0px; right:30px; text-align:right; }

#communication img { vertical-align:middle; margin:0px 10px; }

.vert-seperator { margin:0px 15px; !important
}

form.cmxform { }

form.cmxform legend { padding-left: 0; }

form.cmxform legend, form.cmxform label { color: #333; }

form.cmxform fieldset { border: none; }

form.cmxform fieldset fieldset { background: none; }

form.cmxform fieldset p, form.cmxform fieldset fieldset { padding: 5px 10px 7px; }

form.cmxform label.error, label.error { /* remove the next line when you have trouble in IE6 with labels in list */ color: red; font-style: italic }

div.error { display: none; }

input { width:270px; padding:18px 10px; vertical-align:middle; background: #e1e1e1; border:0; -moz-border-radius: 10px; -webkit-border-radius: 10px; margin: 0px 0px 10px 0px; font-size:30px; color:#cacaca; }

input.checkbox { border: none }

input:focus { background:#e9e9e9; color:#333; }

input.error { background: #F30; color:#FFFFFF; }

.form-field:focus, #message:focus, .btn-speak:focus { background:#e9e9e9; color:#333; }

/* PROFILE LINKS
=====================================================================*/

#modular-content { margin:10px; }

#downloads { -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #eeeeee; margin:70px 0px 0px 30px; padding:0px 0px 10px 0px; }

#downloads h4 { font-size:12px; text-transform: uppercase; color:#333; margin-bottom:10px; margin-left:35px; vertical-align:baseline; padding:10px 0px 0px 0px; }

#downloads ul li { list-style-image:url(../images/icon-arrow.png); line-height:14px; font-size: 11px; margin: 5px 30px; padding:0px; }

#downloads:hover { background:#e5e5e5; }

#downloads span { background: url(../images/icon-downloads.png) top left no-repeat; height:31px; margin-left:20px; margin-top:10px; display:block; }

#skillset { -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #eeeeee; margin:10px 0px 0px 30px; padding:0px 0px 10px 0px; }

#skillset h4 { font-size:12px; text-transform: uppercase; color:#333; margin-bottom:10px; margin-left:35px; vertical-align:baseline; padding:10px 0px 0px 0px; }

#skillset ul li { list-style-image:url(../images/icon-arrow.png); line-height:14px; font-size: 11px; margin: 5px 30px; padding:0px; }

#skillset:hover { background:#e5e5e5; }

#skillset span { background: url(../images/icon-skillset.png) top left no-repeat; height:29px; margin-left:20px; margin-top:10px; display:block; }

#latestfavbooks { -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #eeeeee; margin:10px 0px 0px 30px; padding:0px 0px 10px 0px; }

#latestfavbooks h4 { font-size:12px; text-transform: uppercase; color:#333; margin-bottom:10px; margin-left:35px; vertical-align:middle; padding:10px 0px 0px 0px; }

#latestfavbooks ul li { list-style-image:url(../images/icon-arrow.png); line-height:14px; font-size: 11px; margin: 5px 30px; padding:0px; }

#latestfavbooks:hover { background:#e5e5e5; }

#latestfavbooks span { background: url(../images/icon-favbooks.png) top left no-repeat; height:27px; margin-left:20px; margin-top:10px; display:block; }

#mylasttweet { -moz-border-radius: 10px; -webkit-border-radius: 10px; background: #eeeeee; margin:10px 0px 0px 30px; padding:0px 0px 10px 0px; }

#mylasttweet h4 { font-size:12px; text-transform: uppercase; color:#333; margin-bottom:10px; margin-left:35px; vertical-align:middle; padding:10px 0px 0px 0px; }

#mylasttweet ul li { list-style-image:url(../images/icon-arrow.png); line-height:14px; font-size: 11px; margin: 5px 30px; padding:0px; }

#mylasttweet span { background: url(../images/icon-twitter.png) top left no-repeat; height:27px; margin-left:20px; margin-top:10px; display:block; }

#mylasttweet:hover { background:#e5e5e5; }

/* LINK STYLES
=====================================================================*/
.footer a { color:#666; text-decoration:none; outline:none; }

.footer a:hover { color: #333; border-bottom: 2px solid #01cde9; text-decoration:none;  }

.footer a:active { position:relative; top: 1px; }

#four a { color: #333; border-bottom: 2px solid #01cde9; text-decoration:none; }

#four a:hover { color: #333; border-bottom: 2px solid #01cde9; text-decoration:none;  }

#four a:active { position:relative; top: 1px; }

#responsibilities a { color:#333; text-decoration:none; outline:none; }

#responsibilities a:hover { color: #666; border-bottom: 2px solid #01cde9; text-decoration:none;  }

#responsibilities a:active { position:relative; top: 1px; }

#modular-content a { color:#333; text-decoration:none; outline:none; }

#modular-content a:hover { color: #666; border-bottom: 2px solid #01cde9; text-decoration:none;  }

#modular-content a:active { position:relative; top: 1px; }

#communication a { color:#333; text-decoration:none; outline:none; }

#communication a:hover { color: #666; border-bottom: 2px solid #01cde9; text-decoration:none;  }

#communication a:active { position:relative; top: 1px; }

#error a { color:#333; text-decoration:none; outline:none; }

#error a:hover { color: #666; border-bottom: 2px solid #01cde9; text-decoration:none;  }

#error a:active { position:relative; top: 1px; }


/* FOOTER
=====================================================================*/
.wrapper { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -475px; }

.footer { height:475px; }

.push { height: 500px; }

.footer, .push { clear: both; }

.push-profile { height:300px; clear:both; }

.footer { background: url(../images/footer-top.png) repeat-x top #e3e3e3; color: #888; text-align:left; }

.footer li { list-style:none; font-size:1.1em; line-height:1.6em; margin:0; padding:0; }

.footer h5 { margin:0px 0px 3px 0px; padding:0; text-transform: uppercase; font-size:1.1em; color:#666; }

.author { font-style:italic; color:#999; text-align:right; margin-right:70px; font-weight:normal; }

#footer-quote { background: center left no-repeat url(../images/quote.png); padding:60px 0px 40px 40px; text-align:left; border-bottom:1px solid #f6f6f6; border-top:1px solid #f6f6f6; margin:40px 0px 20px 0px; }

.right-border { border-right:1px solid #f6f6f6; }

#footer-top { padding-top: 30px; }

#mt { background:url(../images/img-mediatemple.png) no-repeat top right; height:64px; width:115px; }

#mt p { font-size:100%; vertical-align:text-bottom; }

#creativecommon { line-height:1.6em; }

/* LIVE LOGO
=====================================================================*/

#logo a { background: url(../images/logo-sprite.png) no-repeat 0 0; width: 200px; height: 90px; margin:0; float:left; display: block; text-indent: -9999px; outline:none; }

#logo a:hover { background-position: 0 -90px; }

#logo a:active { background-position: 0 -89px; }

.bar { display:none; background: url('../images/ajax-loader.gif') no-repeat; margin-left:20px; margin-top:50px; height:20px; width: 230px; }