/** * Gravity Department * http://gravitydept.com * * Copyright 2011 Gravity Department. All rights reserved. * * Welcome, fellow nerd. Now we can talk about 'LORD OF THE RINGS' finally. * Feel free to inspect this code, but keep it honest and write your own. * Otherwise we'll suddenly destabilize your local gravity. Sound like fun? * 100x gravity === buried alive. So behave. For Frodo. */ /*-------------------------------------------*/ /* RESET /*-------------------------------------------*/ * { margin:0; padding:0; outline:0; } body { background:#FFF; color:#000; line-height:1; } html, body, img, fieldset, abbr, acronym { border:0; } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; font-style:normal; } th, code, cite, caption { font-weight:normal; font-style:normal; text-align:left; } ol, ul { list-style:none; } table { border-collapse:collapse; border-spacing:0; } /* still need cellspacing=0 in markup */ q:before, q:after { content:''; } /* HTML5 shiv */ article, aside, audio, canvas, figure, figure img, figcaption, footer, header, hgroup, nav, section, time, video { display:block; } /*-------------------------------------------*/ /* COMMON & OVERRIDE /*-------------------------------------------*/ body, button, input, select, table, textarea { color:#404040; font-family:adelle, serif; font-size:15px; font-weight:300; line-height:1.6; } body { background:#F2F2EB; /* cream */ background:#F3F3F3; /* gray */ -webkit-text-size-adjust:none; } /* Typography */ h1, h2, h3, h4 { color:#383838; font-weight:600; text-rendering:optimizeLegibility; } h1 { font-size:36px; font-weight:300; line-height:42px; } h2 { margin-bottom:0.6em; font-size:20px; line-height:1.4; } h3 { margin-bottom:6px; font-family:myriad-pro, san-serif; font-size:18px; line-height:1.333; } h4 { margin-bottom:6px; font-family:myriad-pro, san-serif;font-size:14px; text-transform:uppercase; } p { margin-bottom:1.6em; line-height:1.6; } blockquote { margin-bottom:1.6em; } blockquote p:last-of-type { margin-bottom:0; } em { font-style:italic; } strong { font-weight:600; } abbr, dfn { display:inline-block; border-bottom:1px dotted #909090; color:#808080; line-height:1; } abbr:hover, dfn:hover { border-bottom-color:#98BB29; color:inherit; cursor:help; } /* Links */ a { color:#1398CC; text-decoration:none; -moz-transition:color 150ms ease 0; -webkit-transition:color 150ms ease 0; transition:color 150ms ease 0; } a:hover, a:focus { color:#98BB29; } a:active { color:#F03; } /* Code */ code { background:#404040; color:#FFF; font-family:Monaco, monospace; font-size:11px; line-height:15px; } p code { position:relative; top:-1px; margin:0 2px; padding:3px; background:#404040; white-space:nowrap; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; } pre { display:inline-block; margin-bottom:1.4em; padding:4px; background:#F3F3F3; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; -webkit-box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; } pre code { display:inline-block; overflow-x:auto; max-width:720px; padding:15px 10px; border:1px solid #404040; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:rgba(0,0,0,0.12) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.12) 0 1px 2px; box-shadow:rgba(0,0,0,0.12) 0 1px 2px; } time { font-family:myriad-pro, sans-serif; color:#808080; font-size:14px; font-weight:300; line-height:1.4; text-transform:uppercase; } /* WebKit scrollbars */ pre code::-webkit-scrollbar { width:7px; height:7px; } /* one is variable, set both */ pre code::-webkit-scrollbar-corner { background:transparent; } pre code::-webkit-scrollbar-track { background:#2C2C2C; -webkit-border-radius:4px; } pre code::-webkit-scrollbar-thumb { background:#71C1E0; -webkit-border-radius:4px; } pre code:hover::-webkit-scrollbar-thumb { background:#1398CC; } pre code:hover::-webkit-scrollbar-thumb:active { background:#98BB29; } pre code::-webkit-scrollbar-button:start:increment, pre code::-webkit-scrollbar-button:end:increment { display:none; } pre code::-webkit-scrollbar-button:start:decrement, pre code::-webkit-scrollbar-button:end:decrement { display:block; width:0; height:0; background:transparent; } /* add padding to terminals of track */ /* Text selection */ ::moz-selection { color:#FFF; background:#98BB29; } ::selection { color:#FFF; background:#98BB29; } /*-------------------------------------------*/ /* FORMS /*-------------------------------------------*/ label { font-family:myriad-pro, sans-serif; font-size:13px; font-weight:600; text-transform:uppercase; } textarea { width:494px; max-width:494px; height:170px; padding:6px 8px; } input[type=text], input[type=email] { width:235px; height:30px; padding:2px 7px 2px 65px; line-height:1; } :moz-placeholder { color:#808080; } ::-webkit-input-placeholder { color:#808080; } input[type=text], input[type=email], textarea { border:0; background:#FFF; font-family:myriad-pro, sans-serif; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; -moz-box-shadow:rgba(0,0,0,0.12) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.12) 0 1px 2px; box-shadow:rgba(0,0,0,0.12) 0 1px 2px; -moz-transition:-moz-box-shadow 150ms ease 0; -webkit-transition:-webkit-box-shadow 150ms ease 0; transition:box-shadow 150ms ease 0; } input[type=text]:hover, input[type=email]:hover, textarea:hover { /* blue */ -moz-box-shadow:rgba(19,152,204,0.6) 0 0 10px; -webkit-box-shadow:rgba(19,152,204,0.6) 0 0 10px; box-shadow:rgba(19,152,204,0.6) 0 0 10px; } input[type=text]:focus, input[type=email]:focus, textarea:focus { /* green */ -moz-box-shadow:rgba(152,187,41,1) 0 0 10px; -webkit-box-shadow:rgba(152,187,41,1) 0 0 10px; box-shadow:rgba(152,187,41,1) 0 0 10px; } /* Input Wrapper */ .inset { position:relative; float:left; overflow:hidden; margin-bottom:15px; padding:4px; background:#F3F3F3; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; -webkit-box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; } .inset label { position:absolute; left:12px; top:3px; line-height:34px; } /* NASA Button */ .nasa-button { position:relative; display:block; width:110px; height:155px; padding-top:90px; border:0; border-bottom:1px solid rgba(0,0,0,0.09); background:url(images/button-aluminum.jpg) #D0D0D0 0 0 no-repeat; color:rgba(0,0,0,0.6); font-family:myriad-pro, san-serif; font-size:12px; font-weight:600; letter-spacing:1px; text-shadow:rgba(255, 255, 255, 0.8) 0 1px 0; text-transform:uppercase; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; } .nasa-button:hover { cursor:pointer; } .nasa-button:active { background-position:-120px 0; } .nasa-button .led { display:none; position:absolute; left:29px; top:36px; width:53px; height:53px; background:url(images/button-led.png) no-repeat; } .nasa-button:hover .led { display:block; -moz-animation-name:nasa-led; -moz-animation-duration:1s; -moz-animation-direction:alternate; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:ease; -webkit-animation-name:nasa-led; -webkit-animation-duration:1s; -webkit-animation-direction:alternate; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:ease; } @-moz-keyframes nasa-led { from { opacity:0; } to { opacity:1; } } @-webkit-keyframes nasa-led { from { opacity:0; } to { opacity:1; } } /*-------------------------------------------*/ /* LAYOUT /*-------------------------------------------*/ #wrapper { overflow:hidden; min-width:1130px; /* 1050+60+20 */ } #header { margin:0 auto; background:url(images/paper-black.png) right repeat #171615; } #header .wrapper { position:relative; z-index:2; width:1050px; height:327px; margin:0 auto; } #matter { position:relative; top:-157px; width:1050px; margin:0 auto -157px; padding:0 30px; } #footer { height:135px; /*height:300px;*/ /*see post-nav too*/ background:/*url(images/orbit-arc.png) 50% 10px no-repeat,*/ url(images/paper-black.png) repeat; background-color:#171615; color:#FFF; } #footer .wrapper { position:relative; width:1050px; height:100%; margin:0 auto; padding:0 30px; } /* for #post-nav layering */ #header, #footer { position:relative; z-index:1; } /*-------------------------------------------*/ /* HEADER /*-------------------------------------------*/ body.cms-home #header .wrapper { height:620px; } body.cms-home #matter { top:-110px; margin-bottom:-110px; } #logo { position:absolute; left:0; top:26px; z-index:10; display:block; width:190px; height:53px; margin:15px; padding:15px; } #logo:active { top:27px; } #the-moon { position:absolute; right:0; top:0; z-index:1; width:780px; height:327px; background:url(images/moon-header.png); } body.cms-home #the-moon { height:620px; } /* orbit */ #anim { position:absolute; left:-235px; top:184px; width:391px; height:391px; } #anim div { position:absolute; left:0; top:0; width:100%; height:100%; } #anim #orbit-path { z-index:1; background:url(images/orbit-path.png) no-repeat; } #anim #orbit-1 { z-index:5; background:url(images/orbit-1.png) no-repeat; position:relative; -moz-animation-name:orbit-1; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; -webkit-animation-name:orbit-1; -webkit-animation-duration:5s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } #anim #orbit-2 { z-index:5; background:url(images/orbit-2.png) no-repeat; -moz-animation-name:orbit-2; -moz-animation-duration:5s; -moz-animation-iteration-count:infinite; -moz-animation-timing-function:linear; -webkit-animation-name:orbit-2; -webkit-animation-duration:5s; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:linear; } @-moz-keyframes orbit-1 { from { -moz-transform:rotate(0deg); } to { -moz-transform:rotate(360deg); } } @-moz-keyframes orbit-2 { from { -moz-transform:rotate(360deg); } to { -moz-transform:rotate(0deg); } } @-webkit-keyframes orbit-1 { from { -webkit-transform:rotate(0deg); } to { -webkit-transform:rotate(360deg); } } @-webkit-keyframes orbit-2 { from { -webkit-transform:rotate(360deg); } to { -webkit-transform:rotate(0deg); } } /* Big tagline */ .stabil { z-index:10; position:absolute; top:190px; width:1050px; text-shadow:rgba(51,0,51,0.9) 1px 1px 1px; -webkit-font-smoothing:antialiased; } .stabil h1 { margin-bottom:45px; color:#FFF; font-family:myriad-pro, sans-serif; font-size:80px; font-weight:600; letter-spacing:14px; line-height:96px; text-align:center; text-transform:uppercase; /* webkit-smoothing */ } .stabil p { width:650px; margin:0 auto; color:#FFF; font-size:28px; font-weight:300; line-height:36px; text-align:center; /* webkit-smoothing */ } /*-------------------------------------------*/ /* HEADER - NAV /*-------------------------------------------*/ .nav { position:absolute; right:-141px; top:0; width:440px; height:300px; padding:0 141px 0 145px; } .nav ul { margin-top:69px; height:32px; padding:0 15px; border-right:2px solid #1398CC; border-left:2px solid #1398CC; background:#000; /*background:rgba(0, 0, 0, 0.7);*/ -moz-box-shadow: 10px 7px 10px rgba(0,0,0,0.15), -10px 7px 10px rgba(0,0,0,0.15); -webkit-box-shadow:10px 7px 10px rgba(0,0,0,0.15), -10px 7px 10px rgba(0,0,0,0.15); box-shadow: 10px 7px 10px rgba(0,0,0,0.15), -10px 7px 10px rgba(0,0,0,0.15); } .nav li { position:relative; top:-35px; float:left; } .nav li.current { background:url(images/nav-current.png) -50px 0 no-repeat; } .nav li a { display:block; height:32px; padding:36px 0; color:#FFF; font-size:15px; line-height:32px; text-align:center; } .nav li a:hover { color:#1398CC; } .nav li a:active { color:#98BB29; } .nav li.current a { color:#1398CC; } .nav li.current a:hover { color:#98BB29; } .nav li.current a:active { color:#F03; } /* link */ #nav-method a { width:90px; } #nav-work a { width:74px; } #nav-blog a { width:66px; } #nav-about a { width:78px; } #nav-contact a { width:98px; } /* white orb */ .nav.method .current { background-position:-74px 0; } .nav.work .current { background-position:0 0; } .nav.blog .current { background-position:-164px 0; } .nav.about .current { background-position:-230px 0; } .nav.contact .current { background-position:-308px 0; } /* thin arc */ .nav.method, .nav.work, .nav.blog, .nav.about, .nav.contact { background:url(images/nav-arc.png) no-repeat; } .nav.method { background-position:0px -120px; } .nav.work { background-position:82px -120px; } /* 0+(90/2)+(74/2) */ .nav.blog { background-position:152px -120px; } /* 82+(74/2)+(66/2) */ .nav.about { background-position:224px -120px; } /* 152+(66/2)+(78/2) */ .nav.contact { background-position:312px -120px; } /* 224+(78/2)+(98/2) */ /*-------------------------------------------*/ /* FOOTER /*-------------------------------------------*/ #logo-tag { position:absolute; left:30px; top:0; display:block; width:270px; height:100px; background:#F03; } #footer nav { position:absolute; left:300px; top:40px; margin-left:23px; } #footer nav li { display:inline-block; } #footer nav li a { display:inline-block; padding:0 7px; color:#FFF; font-size:15px; line-height:18px; } #footer nav li a:hover { color:#1398CC; } #footer nav li a:active { color:#F03; } #footer .icons { position:absolute; right:30px; top:27px; } #footer .icons li { float:left; margin-left:10px; background:url(images/icon-footer.png) 0 0 no-repeat; } #footer .icons li a { display:block; width:46px; height:46px; text-indent:-9999px; } #footer .icons .basecamp { background-position:-50px 0; } #footer .icons .basecamp:hover { background-position:-50px -50px; } #footer .icons .feed { background-position:0 0; } #footer .icons .feed:hover { background-position:0 -50px; } #footer .icons .twitter { background-position:-100px 0; } #footer .icons .twitter:hover { background-position:-100px -50px; } #copyright { position:absolute; right:20px; bottom:15px; margin-bottom:0; color:#808080; font-family:myriad-pro, sans-serif; font-size:12px; } /*-------------------------------------------*/ /* SHARED /*-------------------------------------------*/ .papel { position:relative; z-index:1; margin-bottom:50px; background:#FFF; -moz-border-radius:1px; -webkit-border-radius:1px; border-radius:1px; -moz-box-shadow:rgba(0,0,0,0.1) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.1) 0 1px 2px; box-shadow:rgba(0,0,0,0.1) 0 1px 2px; } .papel > header { position:relative; margin-bottom:30px; padding-bottom:5px; background:url(images/divider.png) repeat-x bottom; } .papel > header h1 { padding:25px 20px 25px 30px; color:#1398CC; } .papel > header hgroup { overflow:hidden; } .papel > header hgroup h1 { float:left; } .papel > header hgroup h2 { float:left; margin:0; padding:25px 0; color:#505050; font-family:myriad-pro, sans-serif; font-size:20px; font-weight:300; line-height:42px; } .papel > header aside, .papel > header nav { position:absolute; right:30px; top:50%; margin-top:-13px; } .papel header.sub h1 { padding:15px 10px 15px 30px; font-size:24px; line-height:32px; } .papel header.sub nav { right:30px; } .has-keyframe > header { margin-bottom:0; padding-bottom:0; background:none; } /* Classes */ .blog-list > li { position:relative; overflow:hidden; margin-bottom:12px; padding:0 30px 12px; border-bottom:1px solid #E0E0E0; } .blog-list > li:last-child { margin-bottom:0; padding-bottom:30px; border:0; } .blog-list h2 { float:left; width:510px; margin:0 0 0 120px; font-size:24px; font-weight:300; line-height:36px; } .blog-list time { position:absolute; left:30px; top:0; font-size:16px; line-height:36px; } .blog-list .excerpt { float:left; width:510px; } .blog-list .comment-count { float:left; } .blog-list .tags { float:right; width:300px; margin:6px 0 4px; } .btn { display:inline-block; padding:2px 7px; background:#B8B8B8; color:#FFF; font-family:myriad-pro, sans-serif; font-size:13px; line-height:1.4; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; -moz-transition: all 250ms ease; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .btn:hover, .btn.mass2:hover, .btn.mass3:hover, .btn.mass4:hover, .btn:focus, .btn.mass2:focus, .btn.mass3:focus, .btn.mass4:focus { background:#1398CC; color:#FFF; } .btn:active, .btn.mass2:active, .btn.mass3:active, .btn.mass4:active { background:#98BB29; } .btn + .btn { margin-left:2px; } .btn-medium { padding:3px 8px; font-size:16px; } .btn-large { padding:4px 10px; font-size:18px; } .callout { margin-bottom:30px; padding:15px; border-top:5px solid #98BB29; border-bottom:1px solid rgba(152, 187, 41, 0.25); background:#F7F7F0; } .comment-count { position:relative; margin-bottom:0; padding-left:20px; color:#808080; font-family:myriad-pro, sans-serif; font-size:16px; line-height:36px; } .comment-count:after { content:''; position:absolute; left:0; top:12px; width:15px; height:11px; background:url(images/sprite.png) 0 0 no-repeat; } .comment-count:focus, .comment-count:hover { color:#1398CC; } .comment-count:focus:after, .comment-count:hover:after { background-position:0 -15px; } .comment-count:active { color:#98BB29; } .comment-count:active:after { background-position:0 -30px; } .gravatar { padding:4px; background:#F3F3F3; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:rgba(0,0,0,0.12) 0px 1px 2px inset; -webkit-box-shadow:rgba(0,0,0,0.12) 0px 1px 2px inset; box-shadow:rgba(0,0,0,0.12) 0px 1px 2px inset; } .gravatar img { display:block; -moz-box-shadow:rgba(0,0,0,0.117188) 0px 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.117188) 0px 1px 2px; box-shadow:rgba(0,0,0,0.117188) 0px 1px 2px; } .keynote { overflow:hidden; } .keynote p { margin:0 30px 1.3em; font-family:myriad-pro, sans-serif; font-size:28px; font-weight:300; line-height:1.3; } .keynote em { font-weight:inherit; } .qa { font-family:myriad-pro, sans-serif; line-height:1.5; } .qa dt { margin-top:18px; font-size:15px; font-weight:600; } .qa dd p { margin-bottom:0; font-size:15px; line-height:inherit; } .std p + h2 { margin-top:1.45em; } /* Tags */ .tags { overflow:hidden; } .tags li { float:left; margin:0 2px 2px 0; font-family:myriad-pro, sans-serif; font-size:13px; font-weight:300; line-height:18px; white-space:nowrap; } .tags a { display:inline-block; padding:2px 7px; background:#B8B8B8; color:#FFF; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; -moz-transition: all 250ms ease; -webkit-transition: all 250ms ease; transition: all 250ms ease; } .tags a:hover, .tags a:focus { background:#1398CC; color:#FFF; } .tags a:active { background:#98BB29; } /*-------------------------------------------*/ /* HOME /*-------------------------------------------*/ .hero { padding:30px 0; } .hero .info { position:absolute; left:30px; top:30px; width:310px; } .hero .info h2 { margin-bottom:0; font-size:24px; } .hero .info p { font-family:myriad-pro, sans-serif; font-size:24px; font-weight:300; line-height:1.3; } /* Grid */ .home-col { float:left; margin-top:30px; } .home-col.grid-1 { width:445px; margin-right:45px; margin-left:30px } .home-col.grid-2 { width:500px; margin-right:30px; } .home-col .content { padding-top:15px; padding-bottom:15px; border-top:5px solid #E0E0E0; -moz-transition:border-top-color 500ms ease 0; -webkit-transition:border-top-color 500ms ease 0; transition:border-top-color 500ms ease 0; } .home-col section:hover .content { border-top-color:#98BB29; } /* Studio Intro */ .about-gravdept .content { position:relative; padding-left:100px; } .about-gravdept .profile { position:absolute; left:0; top:19px; } .about-gravdept .description { margin-bottom:1em; } /* Products */ .product-list li { position:relative; padding-left:100px; } .product-list .description { margin-bottom:1em; } .product-list .product-image { position:absolute; left:0; top:4px; } .product-list .product-image img { display:block; } /* Recent Work */ .recent-work { margin-bottom:30px; } /* Discourse */ .discourse ul { margin-bottom:15px; } .discourse li { margin-bottom:15px; padding:0 0 15px; border-bottom:1px solid #E0E0E0; } .discourse .excerpt p { margin-bottom:0; } /*.discourse li:first-child .excerpt { display:block; }*/ /*-------------------------------------------*/ /* METHOD /*-------------------------------------------*/ .process { margin:40px 0 70px; } .process h2 { padding:0 30px; } .process nav { position:relative; width:1050px; height:355px; background:url(images/process-gravimeter.png) no-repeat; } .process nav li { position:absolute; width:70px; height:70px; } .process nav a { display:block; width:70px; height:70px; background:url(images/process-icon.png) no-repeat; text-indent:-9999px; } .process nav .current a:hover { cursor:default; } /* position */ .process nav .discover { left:65px; top:20px; } .process nav .plan { left:230px; top:210px; } .process nav .design { left:370px; top:20px; } .process nav .build { left:580px; top:210px; } .process nav .measure { left:730px; top:20px; } .process nav .orbit { left:890px; top:195px; } /* link */ .process nav .discover a { background-position:0 0; } .process nav .plan a { background-position:-80px 0; } .process nav .design a { background-position:-160px 0; } .process nav .build a { background-position:-240px 0; } .process nav .measure a { background-position:-320px 0; } .process nav .orbit a { background-position:-400px 0; } /* hover */ .process nav .discover a:hover { background-position:0 -80px; } .process nav .plan a:hover { background-position:-80px -80px; } .process nav .design a:hover { background-position:-160px -80px; } .process nav .build a:hover { background-position:-240px -80px; } .process nav .measure a:hover { background-position:-320px -80px; } .process nav .orbit a:hover { background-position:-400px -80px; } /* current */ .process nav .current.discover a { background-position:0 -160px; } .process nav .current.plan a { background-position:-80px -160px; } .process nav .current.design a { background-position:-160px -160px; } .process nav .current.build a { background-position:-240px -160px; } .process nav .current.measure a { background-position:-320px -160px; } .process nav .current.orbit a { background-position:-400px -160px; } /* no JavaScript */ .js-off .process nav ol { display:none; } /* process blocks */ .js .process .steps { position:relative; left:-12px; width:1074px; /* 1050+24 */ height:70px; background:#1398CC; } .js .process .steps li { position:relative; float:left; width:100px; height:70px; border-left:1px solid #FFF; background:#1398CC; color:#FFF; } .js .process .steps li:first-child { border-left:0; } .js .process .steps li:hover { background:#98BB29; cursor:pointer; } .js .process .steps h3 { margin:0; padding:18px 0 0 12px; } .js .process .steps h3 .phase { color:#FFF; font-size:20px; font-weight:normal; line-height:24px; } .js .process .steps h3 .num { display:block; font-family:adelle, serif; color:rgba(255,255,255,0.6); font-size:12px; font-weight:300; font-style:italic; line-height:1; } .js .process .steps p { display:none; } .js .process .steps li.preset { position:relative; top:-10px; padding:10px 0; background:#383838; } .js .process .steps li.current { position:relative; top:-10px; width:569px; padding:10px 0; background:#383838; cursor:auto; } .js .process .steps li.current h3 .num { color:#98BB29; } .js .process .steps li.current p { position:absolute; left:105px; top:13px; display:block; margin-right:12px; color:rgba(255,255,255,0.85); font-family:myriad-pro, sans-serif; font-size:14px; line-height:1.5; } .js .process .steps li.current.hider p { display:none; } /* no JavaScript */ .js-off .process .steps { overflow:hidden; padding:0 15px; } .js-off .process .steps li { float:left; width:140px; padding:0 15px; } .js-off .process .steps li p { font-size:14px; line-height:20px; } .our-services { float:left; width:600px; margin-bottom:50px; padding-left:30px; } .our-services .summary p { font-size:16px; } .our-services .devices { width:570px; text-align:center; } .our-services .column { float:left; width:285px; } .our-services .column:first-child { margin-right:30px; } .magento { float:right; width:345px; padding-right:30px; background:url(images/method/magento.png) right 44px no-repeat; } .magento .specialty p { width:230px; } .magento .what-is-magento p { margin-bottom:2em; color:#808080; font-style:italic; } .basecamp-pm { float:left; padding:0 0 30px 155px; background:url(images/method-basecamp-moon.png) -20px 10px no-repeat; } .basecamp-pm p { width:435px; } .basecamp-pm img { position:absolute; right:45px; bottom:-42px; } /*-------------------------------------------*/ /* WORK /*-------------------------------------------*/ .projects-list { overflow:hidden; } .projects-list .project { float:left; margin:0 0 30px 30px; } .project { position:relative; z-index:0; background:url(images/work-poster.png) 0 335px no-repeat #F7F7F0; } .project a { display:block; width:310px; height:460px; color:inherit; } .project a:hover { color:inherit; } /* content */ .project .wrapper { position:relative; z-index:-2; height:330px; padding:15px; border-top:5px solid #98BB29; /* onMouseOut, return z-index immediately */ /* Firefox tax */ -moz-transition-property:z-index; -moz-transition-duration:0; -moz-transition-timing-function:linear; -moz-transition-delay:0; /*-moz-transition:z-index 0 linear 0;*/ -webkit-transition:z-index 0 linear 0; transition:z-index 0 linear 0; } .project:hover .wrapper { z-index:1; /* onHover, increase z-index after sliding */ /* Firefox tax */ -moz-transition-property:z-index; -moz-transition-duration:0; -moz-transition-timing-function:linear; -moz-transition-delay:350ms; /*-moz-transition:z-index 0 linear 350ms;*/ -webkit-transition:z-index 0 linear 350ms; transition:z-index 0 linear 350ms; } .project h2 { font-family:myriad-pro, sans-serif; } .project p { font-size:14px; } .project .meta p { margin-bottom:0; font-family:myriad-pro, sans-serif; } .project .view-project { position:absolute; right:15px; bottom:45px; padding-right:46px; background:url(images/icon-arrow-large.png) right top no-repeat; color:#1398CC; font-size:13px; line-height:36px; } .project .view-project:hover { background-position:right -40px; color:#98BB29; } .project .view-project:active { background-position:right -80px; color:#F03; } .project .coming-soon { position:absolute; left:15px; bottom:45px; color:#808080; font-size:13px; font-style:italic; line-height:36px; } /* poster */ .project .poster { position:absolute; left:0; bottom:0; overflow:hidden; height:460px; -moz-box-shadow:rgba(0,0,0,0.2) 0 0 1px inset; -webkit-box-shadow:rgba(0,0,0,0.2) 0 0 1px inset; box-shadow:rgba(0,0,0,0.2) 0 0 1px inset; /* Firefox tax */ -moz-transition-property:height; -moz-transition-duration:350ms; -moz-transition-timing-function:ease; -moz-transition-delay:0; /*-moz-transition:height 350ms ease 0;*/ -webkit-transition:height 350ms ease 0; transition:height 350ms ease 0; } .project:hover .poster { height:100px; } .project .poster img { position:relative; z-index:-1; } /* Promo */ .hire { padding:30px; border-top:1px solid #E0E0E0; } /* Dribbble */ #dribbble { margin:0 30px; } #dribbble ul { overflow:hidden; } #dribbble li { float:left; margin-left:30px; } #dribbble li:first-child { margin-left:0; } #dribbble img { display:block; width:310px; } /*-------------------------------------------*/ /* WORK - PROJECT /*-------------------------------------------*/ .case-study { overflow:hidden; margin-top:30px; padding:0 25px 30px 30px; } .case-study h1 { margin-bottom:20px; color:#1398CC; font-size:54px; font-weight:300; font-style:normal; letter-spacing:-1px; line-height:54px; } .case-study .info { width:345px; } .case-study .media { float:right; width:615px; } .case-study .media img { display:block; } #slides { position:relative; } .slides_container { width:615px; } .slides_container div { width:615px; padding-right:5px; } #slides .prev { position:absolute; left:0; top:-20px; } #slides .next { position:absolute; right:0; top:-20px; } #slides .pagination { position:absolute; left:50%; top:-20px; } #slides .pagination li { float:left; } /*-------------------------------------------*/ /* BLOG /*-------------------------------------------*/ .blog-latest-list { overflow:hidden; float:left; width:580px; margin-left:30px; } .blog-latest-list li { padding:30px 0; border-top:1px solid #E0E0E0; } .blog-latest-list li:first-child { padding-top:0; border-top:0; } .blog-latest-list time { margin-bottom:5px; } .blog-latest-list h2 { margin-bottom:0.5em; font-size:26px; font-weight:400; line-height:1.2; } .blog-latest-list .excerpt p { font-size:16px; } /*-------------------------------------------*/ /* Featured Articles */ .blog-featured { float:right; width:340px; margin-right:30px; } .blog-featured .key { font-size:14px; } .blog-featured-list { margin-top:20px; } .blog-featured-list li { margin-bottom:30px; } .blog-featured-list h3 { font-family:myriad-pro, san-serif; font-size:18px; font-weight:600; line-height:1.333; } .blog-featured-list .excerpt p { margin-bottom:0; } /*-------------------------------------------*/ /* Blog Footer */ .blog-index-footer { clear:both; padding-top:30px; border-top:1px solid #E0E0E0; } /*-------------------------------------------*/ /* BLOG - ARCHIVES /*-------------------------------------------*/ /*-------------------------------------------*/ /* BLOG - TAGS /*-------------------------------------------*/ .all-tags { width:990px; /* = 5 * 198px (30px gap + 168px column) to width for n columns */ padding:10px 30px 30px; /* remember to increment these */ -moz-column-count:5; -webkit-column-count:5; column-count:5; -moz-column-gap:30px; -webkit-column-gap:30px; column-gap:30px; } .all-tags li { margin-bottom:5px; } .all-tags a { overflow:hidden; max-width:100%; text-overflow:ellipsis; white-space:nowrap; } .all-tags .mass2 { background:#989898; } .all-tags .mass3 { background:#787878; } .all-tags .mass4 { background:#585858; } /*-------------------------------------------*/ /* BLOG POST - ARTICLE /*-------------------------------------------*/ #post { margin-bottom:30px; } .post { position:relative; } /* Post Margins */ .post h2, .post h3, .post h4, .post > p, .post > ul, .post > ol, .post .embed-wrapper, .post .twitter-tweet { margin-right:175px !important; margin-left:270px !important; } /* columns on 135 180 225 270 315 360 */ .post blockquote { margin-right:175px; margin-left:285px; } /* +15px indent */ .post pre { margin-left:270px; } /* Header */ .post header { position:relative; } .post .keyframe { position:relative; } .post .keyframe:before { content:''; position:absolute; left:0; top:0; width:100%; height:5px; background:url(images/divider.png) repeat-x; } .post .keyframe:after { content:''; position:absolute; left:0; bottom:0; width:100%; height:1px; background:rgba(0, 0, 0, 0.1); } .post .keyframe img { display:block; } .post .lede { position:relative; } .post .lede h1 { margin:35px 30px 20px 270px; font-size:48px; font-weight:800; line-height:1.15; } .post-datetime { margin-left:30px; position:absolute; top:6px; width:165px; } .post-datetime strong { display:block; color:#404040; font-size:13px; text-transform:uppercase; } .post .excerpt { margin:0 30px 36px 270px; } .post .excerpt p { margin:0; font-family:myriad-pro, sans-serif; font-size:28px; font-weight:300; line-height:1.3; } /* Heading */ .post h2 { margin-top:1.4em; } /* List */ .post > ol:not([class]) { list-style:decimal outside; margin-bottom:1.4em; padding-left:1.4em; } .post > ul:not([class]) { list-style:disc outside; margin-bottom:1.4em; padding-left:1.4em; } .post > ul:not([class]) p { margin-bottom:0; } .post > ul:not([class]) p + p { margin-top:1em; } .post > p, .post > ol:not([class]) .post > ul:not([class]) { font-size:16px; } /* Blockquote */ .post blockquote { position:relative; padding:0.5em 0 0.5em 1.5em; color:#707070; } .post blockquote:before { content:''; position:absolute; left:-5px; top:0; width:5px; height:100%; background:#E0E0E0; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px; } .post blockquote:after { content:'\201C'; position:absolute; left:-30px; top:0.23em; color:#E0E0E0; font-size:54px; line-height:1; } .post blockquote footer { margin-top:1em; color:#404040; font-family:myriad-pro, sans-serif; font-size:15px; } .post blockquote footer:before { content:'~ '; } .post blockquote.full { overflow:hidden; width:990px; margin:36px 0; padding:15px 30px; border-width:1px 0; border-style:solid; border-color:#F3F3F3; background:#FBFBFB; font-size:28px; font-weight:300; font-style:normal; line-height:36px; } .post blockquote.full cite { float:right; font-weight:300; } /* Twitter Tweet Widget */ .post .twitter-tweet { margin-bottom:1.6em !important; } /* YouTube + SpeakerDeck */ .post .embed-wrapper { margin-bottom:1.6em; } /* Aside */ .post aside.right { float:right; width:195px; } .post aside.left { float:left; width:195px; } /* Figure - All */ .post figure { position:relative; } .post figure img { display:block; } .post figure figcaption { font-family:myriad-pro, sans-serif; font-size:13px; line-height:1.5; } .post figure figcaption p { margin-bottom:1.5em; line-height:1.5; } .post figure figcaption p:last-child { margin-bottom:0; } /* Figure - Block */ .post > figure { margin:2em 0; } /* Figure - Standard */ .post > figure:not([class]) { margin-left:270px; } .post > figure:not([class]) figcaption { margin:10px 175px 0 270px; } /* Figure - Full */ .post figure.full figcaption { margin:10px 175px 0 270px; padding-bottom:13px; border-bottom:1px solid #E0E0E0; } /* Figure - Pull Caption */ .post figure.pull-caption { overflow:hidden; } .post figure.pull-caption img, .post figure.pull-caption iframe { float:left; margin-left:270px; } .post figure.pull-caption figcaption { position:absolute; left:0; top:0; width:210px; margin:0 30px 0 0; padding:1em 0 0 30px; border-top:1px solid #E0E0E0; } /* iFrame */ .post iframe { border:none; } /* Photo Grid */ .post .photo-grid { margin:2em 0 2em 270px; } .post .photo-grid li { display:table-cell; width:150px; height:150px; padding-right:20px; background:#f0f0f0; text-align:center; vertical-align:middle; } .post .photo-grid li img { max-width:100%; max-height:100%; } /* Photo Square - Single */ .post figure.square { overflow:hidden; margin-left:270px; } .post figure.square a { float:left; } .post figure.square a:hover:after { content:''; position:absolute; z-index:2; left:0; top:0; width:90px; height:90px; border:5px solid #98BB29; } .post figure.square figcaption { float:left; width:300px; margin-left:15px; padding-top:5px; border-top:1px solid #E0E0E0; font-family:myriad-pro, sans-serif; font-size:13px; line-height:1.5; } /* Photo Squares - Set */ .post .photo-squares { margin:2em 0 2em 270px; } .post .photo-squares:after { clear:both; content:''; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0; } /* clearfix */ .post .photo-squares li { position:relative; float:left; margin:0 10px 10px 0; } .post .photo-squares a { display:block; } .post .photo-squares figcaption { display:none; } .post .photo-squares figcaption:after { content:''; position:absolute; left:50%; bottom:-5px; width:0; height:0; margin-left:-2px; border-top:5px solid #202020; border-right:5px solid transparent; border-left:5px solid transparent; } .post .photo-squares li:hover a:after { content:''; position:absolute; z-index:2; left:0; top:0; width:90px; height:90px; border:5px solid #98BB29; } .post .photo-squares li:hover figcaption { display:block; position:absolute; z-index:2; left:-20px; bottom:110px; width:130px; padding:5px; background:#202020; color:#FFF; font-family:myriad-pro, sans-serif; font-size:13px; font-weight:300; line-height:1.4; text-align:center; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } /*-------------------------------------------*/ /* BLOG POST - NAVIGATION /*-------------------------------------------*/ /* nav */ #post-nav { position:fixed; /*bottom:335px;*/ bottom:170px; width:1050px; height:46px; } #post-nav a { position:absolute; top:0; z-index:0; height:46px; } #post-nav a:hover { z-index:2; } #post-nav .older { left:-30px; padding-left:53px; } #post-nav .newer { right:-30px; padding-right:53px; text-align:right; } #post-nav a .label { display:inline-block; padding:5px 8px; font-family:myriad-pro, sans-serif; font-size:13px; line-height:18px; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } #post-nav a:hover .label { background:#98BB29; color:#FFF; -moz-box-shadow:rgba(0,0,0,0.12) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.12) 0 1px 2px; box-shadow:rgba(0,0,0,0.12) 0 1px 2px; } #post-nav .older:hover .label:after { content:''; position:absolute; left:50px; top:50%; width:0; height:0; margin-top:-2px; border-top:3px solid transparent; border-right:3px solid #98BB29; border-bottom:3px solid transparent; } #post-nav .newer:hover .label:after { content:''; position:absolute; right:50px; top:50%; width:0; height:0; margin-top:-2px; border-top:3px solid transparent; border-left:3px solid #98BB29; border-bottom:3px solid transparent; } #post-nav a strong { display:block; color:#404040; text-align:inherit; text-transform:uppercase; } #post-nav a:hover strong { color:#FFF; } #post-nav a:before { content:''; position:absolute; top:0; width:46px; height:46px; } #post-nav .older:before { left:0; background:url(images/icon-shift-red.png) 0 0 no-repeat; } #post-nav .newer:before { right:0; background:url(images/icon-shift-blue.png) 0 0 no-repeat; } #post-nav .older:hover:before { background-position:0 -50px; } #post-nav .newer:hover:before { background-position:right -50px; } /*-------------------------------------------*/ /* BLOG POST - META /*-------------------------------------------*/ .post > footer { min-height:54px; margin-top:50px; padding:24px 0; border-top:1px solid #E0E0E0; } .post-meta { font-family:myriad-pro, sans-serif; font-size:13px; } .post-meta h1 { margin:0; font-size:13px; font-weight:600; line-height:1.4; text-transform:uppercase; } .post-meta p { margin:0; line-height:1.4; } /* Author */ .meta-author { position:relative; float:left; width:134px; margin-left:30px; padding-left:76px; } .meta-author .title { color:#808080; } .meta-author .gravatar { position:absolute; left:0; top:-3px; } /* Tags */ .meta-tags { float:left; width:600px; margin-left:30px; } .meta-tags h1 { margin-bottom:1px; } /* Permalink */ .meta-permalink { float:right; margin:15px 30px 0 0; } /*-------------------------------------------*/ /* BLOG POST - COMMENTS /*-------------------------------------------*/ /* No Commments & Comments Off */ #post.uncommentable { margin-bottom:116px; } /* Has Comments */ #discussion { margin-top:76px; margin-bottom:116px; } #discussion > h2 { margin-bottom:0; padding:30px 30px 1.2em; background:url(images/divider.png) repeat-x bottom; color:#404040; font-family:myriad-pro, sans-serif; font-size:30px; font-weight:300; line-height:1.3; text-transform:lowercase; } .comments-list { margin-top:12px; } .comments-list > li { position:relative; min-height:82px; padding-top:24px; border-bottom:1px solid #E0E0E0; } .comments-list .is-author { min-height:112px; /* 82+28 */ } .comments-list .is-author-flag { position:absolute; left:30px; top:88px; width:58px; background:#202020; color:#FFF; font-family:myriad-pro, sans-serif; font-size:13px; line-height:20px; text-align:center; -moz-border-radius:3px; -webkit-border-radius:3px; border-radius:3px; } .comments-list .is-author-flag:after { content:''; position:absolute; left:50%; top:-3px; width:0; height:0; margin-left:-1px; border-right:3px solid transparent; border-bottom:3px solid #202020; border-left:3px solid transparent; } .comment { overflow:hidden; } .comment article { margin-bottom:24px; } .comment article header { float:left; width:141px; padding:0 30px 0 99px; } .comment article section { float:left; width:605px; } .comment h3 { margin-bottom:0; font-size:15px; font-weight:600; line-height:1.3; } .comment time { /*position:absolute; right:30px; top:28px;*/ } .comment .gravatar { position:absolute; left:30px; top:23px; } .comment .comment-permalink { position:absolute; right:30px; top:23px; } .comment blockquote { margin:27px 0; padding:15px 20px; border-top:1px dashed #B1B1B1; border-bottom:1px dashed #B1B1B1; font-style:italic; } .comment ol { list-style:decimal outside; margin:0 0 1.4em 2em; } .comment ul { list-style:disc outside; margin:0 0 1.4em 2em; } .comment p, .comment ol, .comment ul { font-size:16px; } /* Has Comments & Comments Off */ .comments-off { padding:30px; font-family:myriad-pro, sans-serif; font-size:24px; font-weight:300; font-style:italic; line-height:1.3; } /* Gravitons */ #respond { margin-bottom:116px; padding:30px 0 15px; } #respond .gravitons { overflow:hidden; } #respond .gravitons h2 { float:left; margin:0 15px 24px 30px; } #show-rules { float:left; } #respond .guidelines { position:absolute; right:30px; top:30px; font-size:14px; line-height:18px; } /* Comment Rules */ .js #comment-rules { display:none; } #comment-rules { overflow:hidden; margin:0 30px 30px; padding:15px; background:#F3F3F3; font-size:13px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; -webkit-box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; } #comment-rules p { margin-bottom:0; } #comment-rules section { float:left; } #comment-rules .basics { width:380px; } #comment-rules .allowed-tags { width:535px; margin-left:45px; } #comment-rules .allowed-tags code { line-height:23px; } #comment-form { overflow:hidden; clear:both; } #comment-form .credentials { float:left; width:330px; margin-left:30px; } #comment-form .message { float:left; width:550px; } #comment-form .message textarea { display:block; width:511px; max-width:511px; height:136px; } #comment-form .send { float:left; } /* form submitted */ .respond-message { margin:0 30px 24px; padding:6px 15px; background:rgba(152,187,41,0.6); color:#FFF; text-shadow:rgba(0,0,0,0.3) 1px 1px 1px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; -webkit-box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; } /* form errors */ .respond-errors { overflow:hidden; margin:0 30px 24px; padding:0 15px; background:rgba(255,0,51,0.6); color:#FFF; text-shadow:rgba(0, 0, 0, 0.3) 1px 1px 1px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px; -moz-box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; -webkit-box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; box-shadow:rgba(0,0,0,0.12) 0 1px 2px inset; } .respond-errors li { float:left; padding:6px 30px 6px 0; } .respond-errors p { margin-bottom:0; } /*-------------------------------------------*/ /* ABOUT /*-------------------------------------------*/ .brendan-intro { position:relative; height:350px; background:#A0A0A0; margin-bottom:30px; } .brendan-intro .background { width:330px; height:320px; padding:30px 30px 0 30px; } .brendan-intro p { color:#FFF; font-family:myriad-pro, serif; font-size:18px; line-height:1.5; text-shadow:transparent 0 0 0, rgba(0, 0, 0, 0.4) 0 1px 1px; /* Chrome bug: http://stackoverflow.com/a/4831490 */ } .brendan-intro img { position:absolute; right:0; top:0; } /**/ .brendan-details { position:relative; overflow:hidden; padding-bottom:15px; } .brendan-details .story { float:left; width:345px; margin-left:30px; } .brendan-details .elsewhere { position:absolute; right:30px; top:0; width:210px; font-size:13px; line-height:1.4; } .brendan-details .elsewhere a { position:relative; display:block; height:45px; margin-top:15px; padding:5px 0 0 60px; } .brendan-details .elsewhere img { position:absolute; left:0; top:0; width:50px; height:50px; -moz-box-shadow:rgba(0,0,0,0.117188) 0px 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.117188) 0px 1px 2px; box-shadow:rgba(0,0,0,0.117188) 0px 1px 2px; } .brendan-details .elsewhere .name { font-weight:600; } .brendan-details .elsewhere .desc { color:#808080; font-family:myriad-pro, sans-serif; font-size:13px; } /*-------------------------------------------*/ /* CONTACT /*-------------------------------------------*/ .say-hello { position:absolute; right:30px; top:33px; font-size:18px; line-height:28px; } /* Start A Project */ .start-project { padding-top:30px; border-top:1px solid #E0E0E0; } .start-project .how-to { position:relative; float:left; width:375px; margin-left:210px; } .start-project .how-to p:last-child { color:#808080; font-style:italic; } .start-project a.download { position:absolute; left:-210px; top:0; width:150px; height:210px; padding:15px; background:url(images/download-worksheet.png) 15px 15px no-repeat #1398CC; -webkit-transition:background-color 150ms ease 0; } .start-project a.download:hover { background-color:#98BB29; } .start-project a.download:active { background-color:#F03; } .start-project a.download .file-tag { margin-top:180px; color:#FFF; font-size:13px; font-weight:600; line-height:1.4; } .start-project a.download .file-tag span { display:block; color:#FFF; color:rgba(255,255,255,0.8); font-weight:300; font-style:italic; } #project-qa { float:right; width:325px; margin:0 30px 30px 0; } /*-------------------------------------------*/ /* ROGIE'S VIEW.JS /*-------------------------------------------*/ .viewer li { -webkit-transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); -moz-transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); } /*-------------------------------------------*/ /* CODE HIGHLIGHTER /*-------------------------------------------*/ /* HTML */ code.html .attribute { color:#6EAEDB; } /* blue */ code.html .comment { color:#808080; } /* gray */ code.html .doctype { color:#EA7E27; } /* orange */ code.html .string { color:#ADE16A; } /* green */ code.html .tag { color:#6EAEDB; } /* blue */ /* CSS */ code.css .comment { color:#808080; } /* gray */ code.css .keywords { color:#EA7E27; } /* orange */ code.css .properties { color:#ADE16A; } /* green */ code.css .selectors { color:#FBE382; } /* yellow */ /*code.css .units { color:#FFF; }*/ /* JavaScript */ code.javascript .brackets { color:#E3C2F8; } /* light purple */ code.javascript .comment { color:#808080; } /* gray */ code.javascript .keywords { color:#EA7E27; } /* orange */ code.javascript .string { color:#ADE16A; } /* green */ code.javascript .symbol { color:#6EAEDB; } /* blue */ /* Ruby */ /* code.ruby .comment { color:#808080; } code.ruby .brackets { color:#E3C2F8; } code.ruby .keywords { color:#C761A3; } code.ruby .string { color:#A5C261; } code.ruby .symbol { color:#6D9CBE; } */ /*-------------------------------------------*/ /* CLEARFIX /*-------------------------------------------*/ #post-nav a:after, .papel:after, .post-meta:after, .respond form:after, .studio:after { clear:both; content:' '; display:block; font-size:0; line-height:0; visibility:hidden; width:0; height:0; } /* clearfix */ /*-------------------------------------------*/ /* REFERENCE /*-------------------------------------------*/ /*-------------- COLORS 404040 (56,56,56) text 383838 text - bold 171615 (23,22,21) slate 1398CC (19,152,204) blue F03 (255,0,51) red 330033 (51,0,51) purple 98BB29 (152,187,41) green F2F2EB (242,242,235) tan - background F7F7F0 (247,247,240) tan - lighter F3F3F3 (0,0,0,0.04) background gray E0E0E0 border gray --------------- Z-INDEX 10 #logo 10 .stabil 5 #anim #orbit-1 5 #anim #orbit-2 2 #header .wrapper 2 #post-nav a:hover 2 .post figure.square a:hover:after 2 .post .photo-squares li:hover a:after 2 .post .photo-squares li:hover figcaption 1 #anim #orbit-path 1 #header, #footer 1 #the-moon 1 .papel 1 .project:hover .wrapper 0 #post-nav a 0 .project -1 .project .poster img -2 .project .wrapper --------------- TYPOGRAPHY 54 / 54 h1 - post title 42 / 42 hgroup h1 24 / 42 hgroup h2 26 / 32 h2 18 / 24 h3 28 / 36 tagline 19 / 26 paragraph - large 18 / 26 paragraph - reading 16 / 24 paragraph - standard 15 / 22 paragraph - narrow 14 / 18 small 12 / 16 copyright 15 / 22 input / textarea --------------*/