html { font: 14px/20px Helvetica, Arial, Sans-Serif; color: #111; }

body { background: #e8e8e8; }

/* Headings */
h1, h2, h3, h4 { font-family: "Droid Sans", Helvetica, Arial, Sans-Serif; }

h1 { font-size: 26px; letter-spacing: -1px; font-weight: bold; }

h2 { font-size: 34px; }
h2.home { text-align: center; }

h3 { font-size: 26px; letter-spacing: -1px; }
h3.top { margin-top: 0; }

h4 { font-size: 20px; color: #880909; margin: 20px 0; }

h5 { font-size: 14px; font-weight: bold; }

p { margin: 20px 0; }
p.info { padding: 10px 20px; background: #eee; margin: 0 -20px 20px; }
p.info.chalkboard { padding-left: 50px; background: #eeeeee url("../images/icons/chalkboard.png") 20px center no-repeat; margin-top: 15px; }

em { font-style: italic; }

small { font-size: 12px; }
small p { margin: 0; text-align: center; }

a { color: #000; }
a:hover { color: #333; }

ul li { list-style: disc; list-style-position: inside; }

blockquote { font-family: "Vollkorn", Georgia, "Baskerville", Serif; font-size: 30px; line-height: 40px; text-align: center; margin-top: 20px; background: url("../images/quote.png") no-repeat left center; }
blockquote.home { font-size: 22px !important; line-height: 140%; margin-bottom: 40px; }
blockquote cite { font-size: 16px; display: block; }
blockquote.small { font-size: 16px; background: none; margin: 26px 0 20px; text-align: left; line-height: 22px; font-family: Georgia, "Baskerville", Serif; }
blockquote.small cite { font-size: 14px; margin-top: 10px; }
blockquote.about { background: url("../images/quote.png") no-repeat left center; padding-left: 140px; margin-left: -120px; }
blockquote.about cite { margin-left: 80px; }

.container { width: 940px; padding: 0 10px; margin: 0 auto; }

.primary { width: 620px; margin-right: 20px; float: left; }

.secondary { width: 300px; float: left; }

a.new-client { width: 151px; display: block; height: 20px; padding: 5px 10px; text-decoration: none; color: #fff; background: url("../images/button.png"); }
a.new-client:hover { background-position: center; }
a.new-client:active { background-position: center bottom; position: relative; top: 1px; }

/* --- Header ------------------------------------------------------------------------------------------------------------------------------------- */
header { height: 40px; background: #f7f7f7 url("../images/header.png") repeat-x bottom; padding-bottom: 16px; margin-bottom: 20px; }
header h1 a { float: left; width: 95px; height: 14px; background: url("../images/logo.png"); text-indent: -9001px; margin-top: 17px; }
header h1 a:active { position: relative; top: 1px; }
header nav { float: right; overflow: hidden; margin-top: 15px; font-weight: bold; font-size: 13px; }
header nav li { float: left; margin-left: 20px; padding: 1px 5px 0 5px; text-transform: uppercase; /* Sprite positions */ }
header nav li a { color: #111; text-decoration: none; padding-left: 25px; background: url("../images/nav/sprite.png") no-repeat; }
header nav li a:active { position: relative; top: 1px; }
header nav li.current { background-color: #E4E4E4; }
header nav li.current a { color: #000; }
header nav li.home a { background-position: 0 -7px; }
header nav li.about a { background-position: 0 -34px; }
header nav li.team a { background-position: 0 -63px; }
header nav li.work a { background-position: 0 -92px; }
header nav li.contact a { background-position: 0 -118px; }
header nav li.blog a { background-position: 0 -147px; }
header a.new-client { float: left; margin: 10px 0 0 20px; }

/* --- Content ------------------------------------------------------------------------------------------------------------------------------------ */
section#steps { margin: 20px 0; overflow: hidden; }
section#steps p { margin: 20px 0 0 0; float: left; }
section#steps .step { width: 220px; float: left; margin-right: 20px; }
section#steps .step h4 { font-family: "Yanone Kaffeesatz"; font-size: 30px; margin-bottom: 10px; }
section#steps .step h4 span { display: inline-block; width: 32px; height: 32px; background: url("../images/numbers.png"); text-indent: -9001px; line-height: 28px; font-family: Georgia, "Baskerville", Serif; }
section#steps .step h4 span.two { background-position: 0 -32px; }
section#steps .step h4 span.three { background-position: 0 -64px; }
section#steps .step h4 span.four { background-position: 0 -96px; }
section#steps .step.last { margin-right: 0; }
section#steps .step p { margin: 0; }

section#featured_project { background: url("../images/featured-project.png"); height: 150px; margin-top: 40px; }
section#featured_project img { float: right; margin: -215px 150px 0 0; }
section#featured_project p { float: right; text-align: right; margin: 25px 480px 0 0; width: 380px; }
section#featured_project p.more-link { padding-top: 5px; }

section#info { overflow: hidden; }
section#info article { float: left; width: 300px; margin: -10px 20px 0 0; }
section#info article.last { margin-right: 0; }

#slider { margin-top: 20px !important; }

section#people { overflow: hidden; margin-top: 40px; }
section#people section.person { width: 300px; margin-right: 20px; float: left; }
section#people section.person.last { margin-right: 0; }
section#people section.person img { float: left; margin: 0 20px 5px 0; }
section#people section.person p.personal-links a { background-repeat: no-repeat !important; background-position: 0 1px !important; padding: 1px 10px 1px 20px; }
section#people section.person p.personal-links a.github { background: url("../images/icons/github_16.png"); }
section#people section.person p.personal-links a.home { background: url("../images/icons/home_16.png"); }
section#people section.person p.personal-links a.twitter { background: url("../images/icons/twitter_16.png"); }
section#people section.person a.dribbble:hover { background: url("../images/icons/dribbble_16.png") no-repeat; padding-left: 20px; margin-left: -20px; }

section#open_source { margin-bottom: 40px; }
section#open_source ul { overflow: hidden; }
section#open_source ul li { width: 300px; margin-right: 20px; float: left; list-style: none; }
section#open_source ul li.last { margin-right: 0; }
section#open_source ul li ul.part-list { margin-top: 60px; }
section#open_source ul li ul li { overflow: hidden; margin-bottom: 10px; list-style: none; background: #eee; padding: 10px; width: 280px; }
section#open_source ul li ul li a { display: block; font-size: 16px; }
section#open_source ul li ul li .avatars { padding-top: 5px; }
section#open_source ul li ul li .avatars img { margin-right: 10px; border: 1px solid #999; }

section#portfolio section { border-bottom: 1px dotted #999; margin-bottom: 20px; overflow: hidden; }
section#portfolio section img { float: left; margin-left: -20px; }
section#portfolio section .info { float: left; width: 140px; margin-right: 20px; }
section#portfolio section .info img { float: none; margin: -5px 0 -10px; }
section#portfolio section blockquote { min-width: 300px; margin-top: 50px; }
section#portfolio section blockquote img { float: none; }
section#portfolio section p.date { color: #999; }

section#ready { margin: 30px 0; }
section#ready .new-client { float: right; margin-top: -45px; }

section#blog article { margin-bottom: 20px; overflow: hidden; }
section#blog article header { height: auto; background: none; padding-bottom: 0; margin: 0 0 0 240px; padding: 5px 0; }
section#blog article footer { width: 220px; background: none; color: #111; padding: 0; margin: 25px 20px 0 0; float: left; text-align: left; }
section#blog article footer a { color: #000; }
section#blog article footer a:hover { color: #333; }
section#blog article footer img { margin: 0 20px 0 0; float: left; border: 1px solid #000; }
section#blog article footer time { display: block; color: #999; }
section#blog article footer span { display: block; }
section#blog article article { width: 700px; float: left; /* Headings withing blog posts */ /* Images */ }
section#blog article article h1, section#blog article article h2, section#blog article article h3, section#blog article article h4 { font-family: "Droid Sans", Helvetica, Arial, Sans-Serif; color: #880909; font-weight: normal; }
section#blog article article h1 { font-size: 26px; letter-spacing: -1px; }
section#blog article article h2 { font-size: 24px; letter-spacing: -1px; }
section#blog article article h3 { font-size: 22px; letter-spacing: -1px; }
section#blog article article h4 { font-size: 18px; }
section#blog article article h5 { font-size: 16px; }
section#blog article article img { padding: 10px; background: #eee; }

a.rss { background: url("../images/icons/rss_32.png"); float: right; text-indent: -9001px; display: block; height: 32px; width: 32px; margin-top: -30px; }
a.rss:active { position: relative; top: 1px; }

section#banners { overflow: hidden; }
section#banners a { margin: 0 20px 20px 0; display: block; float: left; }
section#banners a.last { margin-right: 0; }
section#banners p { margin-top: -5px; float: left; }
section#banners p a { margin: 0; float: none; display: inline; }

#twitter { margin: 20px 0; /*img{display:none;}*/ }
#twitter a.twitter { height: 136px; text-indent: -9001px; padding-top: 0; width: 233px; float: left; margin: -30px 0 0 -13px; background: url("../images/twitter.png") no-repeat top left; }
#twitter ul { overflow: hidden; }
#twitter ul li { width: 220px; float: left; margin-left: 20px; padding-top: 10px; list-style: none; }
#twitter ul li.last { margin-right: 0; }
#twitter ul li span { display: block; font-size: 12px; }
#twitter ul li span a { color: #666; }

ul#mantra li { list-style: none; }

.avatar { float: left; margin: 0 20px 20px 0; border: 1px solid #000; }

.contact-page-ribbon { background: url("../images/ribbon_available.png"); width: 149px; height: 87px; display: block; margin: 0 0 -84px -3px; position: relative; }

a.vcard-download { background: url("../images/icons/vcard.png") no-repeat; padding: 20px 0 10px 50px; margin-left: -2px; display: block; }
a.vcard-download:active { position: relative; top: 1px; }

section.person { overflow: hidden; }
section.person h4 { margin-top: 0; }

.secondary ul li { margin-bottom: 10px; }

form.formtastic fieldset.inputs li { margin-bottom: 10px; }
form.formtastic fieldset.inputs li label { width: 160px; display: inline-block; float: left; }
form.formtastic fieldset.inputs li input { width: 288px; border: 1px solid #999; padding: 5px; }
form.formtastic fieldset.inputs li textarea { width: 458px; border: 1px solid #999; height: 100px; max-width: 458px; }
form.formtastic fieldset.inputs li.boolean { width: 100%; margin: -5px 0 15px 160px; }
form.formtastic fieldset.inputs li.boolean label { width: auto; }
form.formtastic fieldset.inputs li.boolean label input { width: auto; margin-right: 5px; }
form.formtastic fieldset.inputs li .inline-errors { color: #880909; display: inline; margin-left: 20px; }
form.formtastic fieldset.inputs li.text .inline-errors { color: #880909; display: inline; margin-left: 0; position: relative; top: -80px; }
form.formtastic fieldset.buttons input { margin-left: 160px; }
form.formtastic fieldset.buttons input { width: 171px; display: block; height: 30px; float: left; padding: 5px 10px; text-decoration: none; color: #fff; border: 0; background: url("../images/button.png"); }
form.formtastic fieldset.buttons input:hover { background-position: center; cursor: pointer; }
form.formtastic fieldset.buttons input:active { background-position: center bottom; }

#map { margin: 20px 0; }
#map iframe { border: 1px solid #999; }

.credits { background: #eee; padding: 20px; }
.credits h5 { padding-left: 12px; }
.credits ul { line-height: 20px; }
.credits ul li { margin: 0; list-style-type: circle; }

ul#badges_download { border-left: 60px solid #eee; padding-left: 20px; }
ul#badges_download li { list-style: none; margin-left: -10px; }

ul#logos_download li { list-style: none; float: left; }
ul#logos_download li img { width: 300px; margin: 0 20px 20px 0; }
ul#logos_download li img.last { margin-right: 0; }

.square-logos a { width: 140px; display: block; float: left; margin-right: 20px; }

/* --- Mailchimp ---------------------------------------------------------------------------------------------------------------------------------- */
#mc_embed_signup { padding: 10px 20px; background: #eee; margin: -10px -20px 20px; }
#mc_embed_signup form fieldset div { display: inline; }
#mc_embed_signup form fieldset div input.email { width: 690px; background: #fff; border: 1px solid #e8e8e8; padding: 5px; margin: 0 5px 0 10px; }
#mc_embed_signup form fieldset div input.btn { width: 124px; background: #fff; border: 1px solid #e8e8e8; padding: 5px; }
#mc_embed_signup form fieldset div div.mce_inline_error { color: #880909; display: block; float: left; margin-top: 5px; }
#mc_embed_signup form fieldset div div.mce-success-response { color: #008809; display: block; float: left; margin-top: 5px; }
#mc_embed_signup form fieldset div div#mce-success-response.response { color: #008809; display: block; float: left; margin-top: 5px; }
#mc_embed_signup form fieldset div div#mce-error-response.response { color: #880909; display: block; float: left; margin-top: 5px; }

/* --- Abingo ------------------------------------------------------------------------------------------------------------------------------------- */
.abingo { padding-bottom: 20px; }
.abingo h4 { margin-bottom: 10px; }
.abingo table { width: 100%; margin-bottom: 40px; }
.abingo table tr { margin: 1px; }
.abingo table tr.header_row { background: #eee; }
.abingo table tr.header_row th:first-child { font-weight: bold; }
.abingo table tr.experiment_row { background: #eee; }
.abingo table tr.experiment_row td:first-child { font-weight: bold; }
.abingo table tr.significance { background: #eee; }
.abingo table tr.alternative_row { padding-left: 20px; }
.abingo table tr td, .abingo table tr th { padding: 5px 0; border: 1px solid #bbb; border-left: none; border-right: none; }
.abingo table tr td:first-child, .abingo table tr th:first-child { width: 520px; }

/* --- Footer ------------------------------------------------------------------------------------------------------------------------------------- */
footer { background: #333333 url("../images/footer.png") repeat-x; color: #999; padding: 20px 0; margin-top: 20px; overflow: hidden; text-align: center; }
footer a { color: #aaa; }
footer a:hover { color: #ccc; }
footer hr { margin: 20px 0; border: none; height: 1px; background: #434343; }
footer img { margin: 20px 0 10px; }
footer small { color: #666; }
footer .vcard .tel { display: inline; }
footer .vcard .org { display: none; }
footer .vcard .adr { display: inline; }
footer .vcard .adr .street-address { display: inline; }

/* Stickey footer */
html, body, #wrap { height: 100%; }

body > #wrap { height: auto; min-height: 100%; }

#wrapper { padding-bottom: 148px; }

/* must be same height as the footer */
footer { position: relative; margin-top: -148px; clear: both; }

/* --- Miscellaneous ------------------------------------------------------------------------------------------------------------------------------ */
p.flash { border: 1px solid #999; padding: 10px; background: #eee; }
p.flash.success { border-color: #069929; background: #D8FFEB; }
p.flash.error { border-color: #991B1B; background: #FFDDD9; }

hr.stripes { background: url("../images/hr.png"); height: 30px; border: 0; margin: 15px 0; }

.clearing { clear: both; }