/******************* CSS RESET *******************/ html, body { width: 100%; height: 100%; font-size: 12px;} body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0; } table { border-collapse:collapse; border-spacing:0; } fieldset,img { border:0; } address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal; } ol,ul { list-style:none; } caption,th { text-align:left; } h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal; } q:before,q:after { content:''; } abbr,acronym { border:0; } /** DEFAULT STYLES **/ h1 { font-size:183.3%; /*22px*/ } h2 { font-size:133.1%; /*16px*/ } h3 { font-size:116.6%; /*14px*/ } h1,h2,h3,h4,h5,h6,strong { font-weight:bold; /*bringing boldness back to headers and the strong element*/ } abbr,acronym { border-bottom:1px dotted #000; cursor:help; /*indicating to users that more info is available */ } em { font-style:italic; /*bringing italics back to the em element*/ } blockquote,ul,ol { margin:1em; /*giving blockquotes and lists room to breath*/ } ol,ul { margin-left:2em; /*bringing lists on to the page with breathing room */ } ol li { list-style: decimal outside; /*giving OL's LIs generated numbers*/ } dl dt { width: 100px; float: left; min-height: 20px; clear: left; } dl dd { margin-left: 100px; min-height: 20px;} th,td { padding:.5em; /*padding to make the table readable*/ } th { font-weight:bold; text-align:center; border-bottom: solid 1px #ccc; /*distinguishing table headers from data cells*/ } caption { margin-bottom:.5em; /*coordinated marking to match cell's padding*/ text-align:center; /*centered so it doesn't blend in to other content*/ } p,fieldset,table { margin-bottom:1em; /*so things don't run into each other*/ } .contain:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .contain { display: block; min-height: 0; } * html .contain {height: 1%;} /* ie6 */ input, textarea, select { font-family: serif; } /************ END RESET & DEFAULT STYLES *************/ body { background: #fff url(../images/bg.png) no-repeat top center; font: 10pt serif;} a { color: #333; text-decoration: none;} code { font: 10pt "Monaco",monospace;} pre code { font-size:11px;line-height:1.3em;word-wrap:break-word;white-space:pre;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap; } #container { width: 805px; margin: 0 auto; position: relative; padding-top: 57px; } #header { background: url(../images/pencil-mark-combo-1.png) no-repeat; position: relative; padding: 30px 240px 85px 0; z-index: 5;} #header h1 a { display: block; overflow: hidden; background: url(../images/logo.png) no-repeat; width: 115px; height: 0; padding-top: 17px; margin: 0;} #header ul { position: absolute; top: 35px; right: 0; list-style: none; width: 210px; padding: 0; margin: 0;} #header li { list-style: none; line-height: 12pt; } body.work li.work a, body.about li.about a, body.contact li.contact a, body.blog li.blog a { color: #999; } #content { background: url(../images/pencil-mark-combo-2.png) no-repeat; position: relative; padding: 30px 240px 1em 0; z-index: 5; min-height: 200px;} #content p { font-size: 133.1%; color: #999; line-height: 1.2em;} #content img { margin: 1em 0;} #content h3.heading { overflow: hidden; height: 0; background-repeat: no-repeat; padding-top: 33px; width: 100%; } #content ul.page-nav { margin-left: 0;} #content .entry p:first-child img { margin-top: 0;} #content * { font-weight: normal; } #footer { background: url(../images/pencil-mark-combo-3.png) no-repeat; color: #999; position: relative; padding: 30px 240px 50px 0; height: 49px; margin-bottom: 50px; line-height: 12pt; z-index: 5;} #footer a { color: #999; } #footer #addresses .address { display: block; float: left; width: 200px; } #footer #addresses .location { display: block; color: #999;} #footer #phones { position: absolute; display: block; width: 210px; top: 30px; right: 0; white-space: nowrap;} #footer #other-contact { position: absolute; display: block; width: 210px; bottom: 50px; right: 0; } #footer #other-contact span { display: block;} #art { width: 225px; padding: 10px 0 0 580px; position: absolute; top: 0; z-index: 1; height: 400px; } #art a.change, #art a.hide { display: block; float: left; width: 40px; height: 11px; color: #ccc; overflow: visible; background: url(../images/button-change.png) no-repeat left center; padding-left: 15px; margin-right: 20px; } #art a.change { color: #000; } #art a.hide { background-image: url(../images/button-hide.png) } #content ul.work-links { position: absolute; top: 54px; margin: 0; padding: 0; left: 180px;} #content ul.work-links li { list-style: inside disc; font-size: 100%; } #section-nav { width: 210px; position: absolute; right: 0; top: 2em; } #section-nav a.title { display: block; font-size: 10pt; font-weight: normal; margin-bottom: 0 !important; color: #999; line-height: 12pt;} #section-nav ul { margin: 1em 0; } #section-nav ul li { list-style: none; } #section-nav ul li a.selected { color: #999; } ul.articles { margin: 1em 0;} ul.articles span a { display: block; margin: 1em 0 0; color: #999;} .entry { margin-bottom: 60px; } .entry .meta { color: #999; margin-bottom: 2em;} .entry .body { } .entry h1 { font-size: 133.1%; margin-bottom: 1em; font-weight: normal;} .entry h2 { margin-bottom: 1em;} .entry ul li, .entry ol li { color: #999; font-size: 133.1%; line-height: 1.2em; } .comments-block { width: 565px; } .comments-block form label { margin-left: 10px; font-size: 10pt; color: #ccc;} .comments-block form div { margin: 3px 0;} /*** Page-specific styles ***/ body.index #content h2 { overflow: hidden; background: url(../images/heading-we-are-a-design-firm.png) no-repeat; width: 569px; height: 0; padding-top: 97px; margin: 0;} body.index #content div.products { background: url(../images/pencil-mark-wide-3.png) no-repeat; margin: 25px 0 0; padding: 30px 0 0;} body.index #content h3 { overflow: hidden; background: url(../images/heading-products.png) no-repeat; width: 454px; height: 0; padding-top: 28px; } body.index #content ul { list-style: none; height: 58px; padding: 0; margin: 10px 0;} body.index #content li { list-style: none; display: inline; } body.index #content li a { display: block; float: left; margin-right: 43px; overflow: hidden; height: 0; padding-top: 57px; background: url(../images/products-sprite.png) no-repeat; } body.index #content li.last a { margin-right: 0; } body.index #content li.eachday a { width: 145px; background-position: 0 0; } body.index #content li.eachday a:hover { background-position: 0 -57px; } body.index #content li.notoriety a { width: 162px; background-position: -145px 0; } body.index #content li.notoriety a:hover { background-position: -145px -57px; } body.index #content li.growshow a { width: 169px; background-position: -307px 0; } body.index #content li.growshow a:hover { background-position: -307px -57px; } body.index .entry { margin-bottom: 0;} body.eachday #content h2.title { overflow: hidden; background: url(../images/products-sprite.png) no-repeat; height: 0; padding-top: 57px; width: 145px; } body.eachday h3.heading { background-image: url(../images/heading-eachday.png); width: 536px; } body.notoriety #content h2.title { overflow: hidden; background: url(../images/products-sprite.png) no-repeat -145px 0; height: 0; padding-top: 57px; width: 162px; } body.notoriety h3.heading { background-image: url(../images/heading-be-noticed.png); width: 525px; } body.notoriety ul.work-links { top: 67px; } body.growshow #content h2.title { overflow: hidden; background: url(../images/products-sprite.png) no-repeat -307px 0; height: 0; padding-top: 57px; width: 169px; } body.growshow h3.heading { background-image: url(../images/heading-slideshows-that-do-more.png); width: 536px; } body.growshow ul.work-links { top: 51px; left: 200px;} body.eachday #content h2, body.eachday #content h3, body.notoriety #content h2, body.growshow #content h2, body.growshow #content h3 { margin-bottom: 2em;} body.work #section-nav ul, body.client-work #section-nav ul, body.giving-back #section-nav ul { margin-left: 1em;} body.about #content h3 { margin-bottom: 1em; } body.about #content ul { margin-bottom: 1em; } body.about #content #section-nav ul { margin: 0;} body.about #content ul li { font-size: 133.1%; color: #999; line-height: 1.2em;} body.about #content #section-nav li { font-size: 10pt; line-height: 12pt;} body.about #content b { font-weight: normal; color: #000; } body.approach #content p { color: #000; } body.contact form { margin-top: 2em;} body.contact form label { display: block; margin: 1em 0 0;} body.contact form .input input, body.contact form .input textarea { background: #eee; font-size: 12pt; width: 390px; border: solid 1px #ddd; border-left-color: #bbb; border-top-color: #bbb;} body.contact form .submit { margin: 1em 0; } body.contact form .submit input { font-size: 12pt; } /* Style for code blocks - for use with code generated from Textmate */ pre, pre.textmate-source{margin:1em 0 2em;padding:10px;font-family:Monaco,monospace;font-size:11px;line-height:1.3em;word-wrap:break-word;white-space:pre;white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-o-pre-wrap;} pre, pre.textmate-source.sunburst{color:#F8F8F8;background-color:#000000;} pre.textmate-source .linenum{width:75px;padding:0.1em 1em 0.2em 0;color:#888;background-color:#eee;} pre.textmate-source.sunburst span{padding-top:0.2em;padding-bottom:0.1em;} pre.textmate-source.sunburst ::selection{background-color:rgba(237,14,255,0.80);} pre.textmate-source.sunburst .comment{color:#AEAEAE;font-style:italic;} /* Comment */ pre.textmate-source.sunburst .constant{color:#3387CC;} /* Constant */ pre.textmate-source.sunburst .entity{color:#89BDFF;} /* Entity */ pre.textmate-source.sunburst .keyword{color:#E28964;} /* Keyword */ pre.textmate-source.sunburst .storage{color:#99CF50;} /* Storage */ pre.textmate-source.sunburst .string{color:#65B042;} /* String */ pre.textmate-source.sunburst .support{color:#9B859D;} /* Support */ pre.textmate-source.sunburst .variable{color:#3E87E3;} /* Variable */ pre.textmate-source.sunburst .invalid_deprecated{color:#FD5FF1;font-style:italic;text-decoration:underline;} /* Invalid – Deprecated */ pre.textmate-source.sunburst .invalid_illegal{color:#FD5FF1;background-color:rgba(86,45,86,0.75);} /* Invalid – Illegal */ pre.textmate-source.sunburst .text .source{background-color:rgba(177,179,186,0.03);} /* ♦ Embedded Source (Bright) */ pre.textmate-source.sunburst .entity_other_inherited-class{color:#9B5C2E;font-style:italic;} /* ♦ Entity inherited-class */ pre.textmate-source.sunburst .string_quoted .source{color:#DAEFA3;} /* ♦ String embedded-source */ pre.textmate-source.sunburst .string .constant{color:#DDF2A4;} /* ♦ String constant */ pre.textmate-source.sunburst .string_regexp{color:#E9C062;} /* ♦ String.regexp */ pre.textmate-source.sunburst .string_regexp .constant_character_escape,pre.textmate-source.sunburst .string_regexp .source_ruby_embedded,pre.textmate-source.sunburst .string_regexp .string_regexp_arbitrary-repitition{color:#CF7D34;} /* ♦ String.regexp.«special» */ pre.textmate-source.sunburst .string .variable{color:#8A9A95;} /* ♦ String variable */ pre.textmate-source.sunburst .support_function{color:#DAD085;} /* ♦ Support.function */ pre.textmate-source.sunburst .support_constant{color:#CF6A4C;} /* ♦ Support.constant */ pre.textmate-source.sunburst .meta_preprocessor_c{color:#8996A8;} /* c C/C++ Preprocessor Line */ pre.textmate-source.sunburst .meta_preprocessor_c .keyword{color:#AFC4DB;} /* c C/C++ Preprocessor Directive */ pre.textmate-source.sunburst .entity_name_type{text-decoration:underline;} /* j Entity Name Type */ pre.textmate-source.sunburst .meta_cast{color:#676767;font-style:italic;} /* j Cast */ pre.textmate-source.sunburst .meta_sgml_html .meta_doctype,pre.textmate-source.sunburst .meta_sgml_html .meta_doctype .entity,pre.textmate-source.sunburst .meta_sgml_html .meta_doctype .string,pre.textmate-source.sunburst .meta_xml-processing,pre.textmate-source.sunburst .meta_xml-processing .entity,pre.textmate-source.sunburst .meta_xml-processing .string{color:#494949;} /* ✘ Doctype/XML Processing */ pre.textmate-source.sunburst .meta_tag,pre.textmate-source.sunburst .meta_tag .entity{color:#89BDFF;} /* ✘ Meta.tag.«all» */ pre.textmate-source.sunburst .source .entity_name_tag,pre.textmate-source.sunburst .source .entity_other_attribute-name,pre.textmate-source.sunburst .meta_tag_inline,pre.textmate-source.sunburst .meta_tag_inline .entity{color:#E0C589;} /* ✘ Meta.tag.inline */ pre.textmate-source.sunburst .entity_name_tag_namespace,pre.textmate-source.sunburst .entity_other_attribute-name_namespace{color:#E18964;} /* ✘ Namespaces */ pre.textmate-source.sunburst .meta_selector_css .entity_name_tag{color:#CDA869;} /* § css tag-name */ pre.textmate-source.sunburst .meta_selector_css .entity_other_attribute-name_tag_pseudo-class{color:#8F9D6A;} /* § css:pseudo-class */ pre.textmate-source.sunburst .meta_selector_css .entity_other_attribute-name_id{color:#8B98AB;} /* § css#id */ pre.textmate-source.sunburst .meta_selector_css .entity_other_attribute-name_class{color:#9B703F;} /* § css.class */ pre.textmate-source.sunburst .support_type_property-name_css{color:#C5AF75;} /* § css property-name:*/ pre.textmate-source.sunburst .meta_property-group .support_constant_property-value_css,pre.textmate-source.sunburst .meta_property-value .support_constant_property-value_css{color:#F9EE98;} /* § css property-value;*/ pre.textmate-source.sunburst .meta_preprocessor_at-rule .keyword_control_at-rule{color:#8693A5;} /* § css @at-rule */ pre.textmate-source.sunburst .meta_property-value .support_constant_named-color_css,pre.textmate-source.sunburst .meta_property-value .constant{color:#DD7B3B;} /* § css additional-constants */ pre.textmate-source.sunburst .meta_constructor_argument_css{color:#8F9D6A;} /* § css constructor.argument */ pre.textmate-source.sunburst .meta_diff,pre.textmate-source.sunburst .meta_diff_header{color:#F8F8F8;font-style:italic;background-color:#0E2231;} /* ⎇ diff.header */ pre.textmate-source.sunburst .markup_deleted{color:#F8F8F8;background-color:#420E09;} /* ⎇ diff.deleted */ pre.textmate-source.sunburst .markup_changed{color:#F8F8F8;background-color:#4A410D;} /* ⎇ diff.changed */ pre.textmate-source.sunburst .markup_inserted{color:#F8F8F8;background-color:#253B22;} /* ⎇ diff.inserted */ pre.textmate-source.sunburst .markup_italic{color:#E9C062;font-style:italic;} /* Markup:Italic */ pre.textmate-source.sunburst .markup_bold{color:#E9C062;font-weight:bold;} /* Markup:Bold */ pre.textmate-source.sunburst .markup_underline{color:#E18964;text-decoration:underline;} /* Markup:Underline */ pre.textmate-source.sunburst .markup_quote{color:#E1D4B9;font-style:italic;background-color:rgba(254,224,156,0.07);} /* Markup:Quote */ pre.textmate-source.sunburst .markup_heading,pre.textmate-source.sunburst .markup_heading .entity{color:#FEDCC5;background-color:#632D04;} /* Markup:Heading */ pre.textmate-source.sunburst .markup_list{color:#E1D4B9;} /* Markup:List */ pre.textmate-source.sunburst .markup_raw{color:#578BB3;background-color:rgba(177,179,186,0.03);} /* Markup:Raw */ pre.textmate-source.sunburst .markup .comment{color:#F67B37;font-style:italic;} /* Markup:Comment */ pre.textmate-source.sunburst .meta_separator{color:#60A633;background-color:#242424;} /* Markup:Separator */ pre.textmate-source.sunburst .meta_line_entry_logfile,pre.textmate-source.sunburst .meta_line_exit_logfile{background-color:rgba(238,238,238,0.16);} /* Log Entry */ pre.textmate-source.sunburst .meta_line_error_logfile{background-color:#751012;} /* Log Entry Error */