/** * Screen Stylesheet * * @package http://kevinthompson.info * @author Kevin Thompson * * Colors * - Green: #bfd259 * - Teal: #abddd5 * - Pink: #ef4665 * - Maroon: #a62a57 * - Orange: #faa532 * - Grey: #e7e8e9 * * **/ /* Base Elements ---------------------------------------- */ html { height:100%; background:#fff; height:100%; } body {height:100%;} img { width:100%; display:block; } img[width] {width:auto;} hr { height:0; line-height:0; overflow:hidden; border:0; border-top:2px solid #000; margin:10px 5px; clear:both; } p { margin:0 0 1em; } /* Typography ---------------------------------------- */ body, input, select, textarea { font:normal normal 14px/1.5 'ff-nuvo-web-pro',Arial,sans-serif; color:#000; } h2 { font:italic normal 18px/1.5 'adelle',Georgia,serif; text-transform:uppercase; color:#000; border-top:2px solid #000; border-bottom:2px solid #000; margin:0 0 10px; padding:5px 5px 0; } h3 { font:italic normal 14px/1.5 'adelle',Georgia,serif; margin:0 0 10px; padding:5px 5px 0; } a, a:active, a:visited { color:#3ba1b3; text-decoration:none; } a:hover { color:#2ebbd5; text-decoration:none; } a:link { -webkit-tap-highlight-color: #c1ecf4; } /* Layout ---------------------------------------- */ .page { min-height: 100%; height: auto !important; height: 100%;} .container { max-width:480px; margin-left:auto; margin-right:auto; position:relative; } .page > header > .container { padding:20px 0 6px; } /* Utilities ---------------------------------------- */ .horizontal li { float:left; list-style-type:none; } .image { margin:0 5px; } .main .header:after, .container:after, .content:after, .clear:after { clear:both; display:block; visibility:hidden; overflow:hidden; height:0 !important; line-height:0; content:"."; } .lo-res { display:none !important; } .hi-res { display:block !important; } /* Sprites ---------------------------------------- */ .sprite { background:url('/images/interface/sprite.png') no-repeat 0 0; text-indent:-999em; overflow:hidden; display:inline-block; *display:inline; } .sprite.right-circle { background-position:-60px -55px; width:20px; height:20px; margin:0 0 0 10px; } .sprite.left-circle { background-position:-40px -55px; width:20px; height:20px; margin:0 10px 0 0; } .sprite.right-circle-large { background-position:-175px -87px; width:24px; height:24px; margin:0 0 0 10px; } .sprite.left-circle-large { background-position:-152px -87px; height: 24px; margin: 0 10px 0 0; width: 24px; } .sprite.up-circle { background-position:0px -55px; width:20px; height:20px; margin:0 10px 0 0; } .sprite.close { background-position:-100px -55px; width:20px; height:20px; margin:0 10px 0 0; } .sprite.light-close { background-position:-80px -55px; width:20px; height:20px; margin:0 10px 0 0; } .sprite.right-arrow { background-position:-140px -55px; width:20px; height:20px; } .sprite.right-arrow-hover { background-position:-140px -45px; width:20px; height:20px; } .sprite.left-arrow { background-position:-120px -55px; width:20px; height:20px; } .sprite.left-arrow-hover { background-position:-120px -45px; width:20px; height:20px; } .sprite.bullet { background-position:-186px -55px; width:13px; height:20px; } .sprite.right-circle-large.pagination { display: block; float: right; margin-top: 10px; } .sprite.left-circle-large.pagination { display: block; float: left; margin-top: 10px; } /* Content ---------------------------------------- */ .logo { margin:0 auto 10px; width:128px; border-bottom:2px solid #abddd5; } .logo a { background-position:0 0; width:128px; height:36px; margin:0 0 5px; } .menu {text-transform:uppercase;} .menu a {display:block;} .menu.social { position:absolute; top:5px; right:5px; } .menu.social a, .menu.social a:link, .menu.social a:hover, .menu.social a:active .menu.social a:visited { color:#a7a5a6; margin-left:6px; } .menu.social li:first-child a {margin-right:14px;} .menu.social a[href*="facebook"] { background-position:0 -36px; width:18px; height:18px; } .menu.social a[href*="twitter"] { background-position:-18px -36px; width:18px; height:18px; } .menu.social a[href*="linkedin"] { background-position:-36px -36px; width:18px; height:18px; } .menu.main { background:#abddd5; padding:10px 6px; margin:0 0 10px; } .menu.main ul { text-align:center; margin:0 5px 0 0; padding:0; } .menu.main li { display:inline-block; *display:inline; float:none; } .menu.main a, .menu.main a:link, .menu.main a:hover, .menu.main a:active { font-size:18px; color:#000; line-height:1; padding:4px 14px; } .menu.main a.active {font-weight:bold;} .menu.main li:last-child a {padding-right:0;} .intro .image { margin:0 5px; } .intro .unit {margin-bottom:0;} .intro .unit .content { border:0; height:auto; } .unit { margin:0 0 10px; background-color:#fff; } .unit .content { margin:0 5px; position:relative; } .unit h1 { margin:0 5px; padding:8px 3px 4px; font:normal normal 15px/1.5 'adelle',Georgia,serif; border-bottom:2px solid #000; text-transform:uppercase; } .unit h1 .link { float:right; font:italic normal 12px/1.35 'ff-nuvo-web-pro',Arial,sans-serif; color:#000; text-transform:none; } .unit.case-study h1 {background:#e7e8e9;} .unit-nav { margin:50px 0 0; } .unit-nav .previous { float:left; width:50%; } .unit-nav .next { float:right; width:50%; } .unit-nav .next.two-lines a { float:right; width:130px;} .unit-nav .previous.two-lines a {width:150px;} .unit-nav a { display:block; padding:20px 0 10px; margin:0 10px 0 0; text-align:right; text-transform:uppercase; color:#000; } .unit-nav .previous a {text-align:left;} .unit-nav ul {margin-left:0px;} .grid > .unit > .content { border-bottom:2px solid #000; } .grid > .unit > h1 { padding-right:20px; position:relative; text-overflow: ellipsis; -o-text-overflow: ellipsis; -moz-binding: url( 'bindings.xml#ellipsis' ); white-space: nowrap; overflow: hidden; max-width: 100%; } .grid .unit h1 a {color:#000;} .grid .unit h1:after { display:block; content:""; background:url('/images/interface/sprite.png') no-repeat 0 0; background-position:-140px -35px; width:20px; height:20px; position:absolute; right:0; top:6px; opacity:0; } .grid .unit.categories h1:after {display:none;} .grid > .unit:hover > h1:after {opacity:1;} .grid > .unit:hover > h1 a {color:#82724e;} .unit.twitter p { border-top:2px solid #000; color:#a62a57; font-size:18px; line-height:1.25; padding:10px 0 0; } .unit.twitter .date { position:absolute; bottom:-30px; right:0; } .about .unit h1 { margin:0 0 6px; border-top:2px solid #000; } .about .person img { padding:6px 0 0; border-top:2px solid #000; margin:0 0 6px; } .about .person .bio { margin:6px 0 0; } .about .intro h2 { font-style:normal; font-size:14px; border-color:#000; margin:6px 0; padding:8px 3px 4px; } .about .sidebar { margin:0 5px; } .about .sidebar .content { margin:0 0 20px; border-bottom:2px solid #000; } .about .sidebar ul { margin:15px 0 0; } .about .sidebar li { float:left; width:50%; list-style-type:none; } .blog .post h1 { margin:0 0 3px; } .blog .post .body { margin:0 3px; } .blog header .content { border-top:2px solid #000; } .blog .related ul { list-style-type:none; margin:0; } .blog .related li { border-top:2px solid #000; border-bottom:2px solid #000; padding:6px 0; margin:0 0 20px; } .blog .related a { color:#000; text-transform:uppercase; font-size:18px; line-height:20px; } .blog .related span { display:block; font-size:14px; } .contact .unit .content p { font-size:18px; line-height:1.3; padding:0 5px; } .contact .details { font-size:14px; padding:0 5px; } .contact .main .social { border-top:2px solid #000; margin:0 5px; } .contact .main .social ul { text-align:center; margin:0 0 30px; } .contact .main .social li { display:inline-block; margin:0 12px; *display:inline; } .main .social a[href*="facebook"] { background-position:0 -76px; width:37px; height:38px; } .main .social a[href*="twitter"] { background-position:-37px -76px; width:37px; height:38px; } .main .social a[href*="linkedin"] { background-position:-74px -76px; width:37px; height:38px; } .process h2 { font-style:normal; text-transform:none; padding-left:3px; } .process .step {display:none;} .process .step p { margin:0 3px; } .process .step-controls { margin:10px 0; padding:60px 0 0; border-top:2px solid #000; } .process .step-controls ul { list-style-type:none; margin:0; } .process .step-controls .previous {float:left;} .process .step-controls .next {float:right;} .process .step-controls a { line-height:30px; color:#000; } .process .step-controls span { display:inline-block; *display:inline; float:none; position:relative; top:6px; margin-left:6px; } .process .left-circle { margin:0 0 0 6px; } .slider .slider-item {position:absolute;} .slider .slider-item:hover {cursor:pointer;} .slider .slider-item:last-child {display:none;} .slider .slider-item-caption { background:none repeat scroll 0 0 #FFFFFF;border:1px solid #CFD0CF;color:#7D7463;font-size:11px;left:10px;padding:5px 10px;position:absolute;top:10px;width:250px; } .slider-top-button + .slider .slider-item-caption {top:45px;} .slider-controls { position:absolute; width:100%; } .slider-controls .dots { position:absolute; left:0; font-size:20px; } .slider-controls .dots a {float:left;} .slider-controls ul { position:absolute; bottom:0; right:0; } .slider-controls li { display:inline-block; *display:inline; } .case-study-button{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #D1DCE4;border-right:none;font-size:12px;color:#7d7463;margin:10px;padding:5px 10px 3px;position:absolute;text-transform:uppercase;z-index:1000;font-family: Helvetica, sans-serif;} .all-projects.case-study-button{background-image:url("/images/interface/sprite.png");background-position:-136px -13px;border-right:medium none;height:18px;left:0;width:8px;} .case-study-button + .case-study-button{background-image:url("/images/interface/sprite.png");border-left:none;left:133px;background-position:-135px -32px;height:18px;width:8px;} .all-projects.case-study-button + .case-study-button{background:none repeat scroll 0 0 #FFFFFF;border:1px solid #D1DCE4;border-left:none;color:#7D7463;font-size:12px;left:30px;margin:10px;padding:5px 10px 3px;position:absolute;text-transform:uppercase;width:inherit;z-index:1000;} .blog .share img {display:none;} .blog .comments {width:660px;float:left;} .blog .comments p {font-size:12px;line-height:20px;margin-bottom:5px;margin-top:20px;} .blog .comments h1 {text-transform:inherit;font:normal normal 30px/1.5 'adelle',Georgia,serif; text-transform:uppercase; color:#ef4665; border:0; margin:0;} .blog .comments label {clear:both;float:left;height:24px;} .blog .comments label {color:#666;} .blog .comments input[type="text"], .blog .comments textarea {clear:both;float:left;border:1px solid #999;width:380px;} .blog .comments label.save_info, .blog .comments input[type="submit"], .blog .comments textarea {margin-top:20px;} .blog .comments label input {margin-top:6px;} .blog .comments input {float:left;clear:both;} .home .intro h2, .about h2, .contact h2 { border-top:2px solid #ef4665; border-bottom:2px solid #ef4665; } .menu.footer { background:#abddd5; padding:10px 6px; } .menu.footer ul { text-align:center; margin:0; padding:0; } .menu.footer li { display:inline-block; *display:inline; float:none; margin:0 20px; } .menu.footer li a, .menu.footer li a:link, .menu.footer li a:hover, .menu.footer li a:active, .menu.footer li a:visited { font-size:18px; color:#000; } .copyright { float:right; display:block; margin:12px 5px 0 0; } .left {float:left;} .right {float:right;} /* Responsive Segments ---------------------------------------- */ /* Small Screens (Smart Phones & Tablets ) */ @media handheld and (max-width: 480px), screen and (max-device-width: 480px), screen and (max-width: 990px) { .lo-res { display:block !important; } .hi-res { display:none !important; } .sprite.right-circle-large.pagination { margin-top: 2px; } .sprite.left-circle-large.pagination { margin-top: 2px; } .blog .comments label { margin-top: 20px; } .content.slider { height: 240px; } .slider .slider-item:hover {cursor:inherit;} .slider-controls { top:0px; padding-top: 28%; } .slider-controls ul { width:100%; margin:0; left:0px; } .slider-controls ul li + li {float:right;} .slider-controls .previous {margin-left:10px;} .slider-controls .next {margin-right:10px;} .unit-nav a { font-size: 10px; margin:0px; } .unit-nav .next.two-lines a { float:right; width:110px; } .unit-nav .previous.two-lines a {width:130px;} } /* iPhone Only */ @media screen and (max-device-width: 480px), screen and (max-width: 500px) { html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } } /* iPad Only */ /*@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { }*/ /* Average Screen Resolutions */ @media screen and (min-width: 990px) { h2, .home .intro h2, .about h2, .contact h2 { padding: 8px 5px 3px; border-top-width:1px; border-bottom-width:1px; } hr {border-top-width:1px;} .page { margin:0 0 -58px; } .container { width:990px; max-width:none; } .container.main { padding:0 0 58px; } .logo { margin:0 0 0 5px; border:0; } .logo a {margin:0;} .page > header > .container {padding-top:30px;} .menu.main { margin:0 0 20px; } .menu.main a, .menu.main a:link, .menu.main a:hover, .menu.main a:active {font-size:14px;} .menu.main ul {float:right;} .menu.main li { border-right:1px solid #000; float:left; display:block; } .menu.main li:last-child {border-right:none;} .main .header { border-bottom:1px solid #000; margin:0 5px 10px; padding:0 0 10px; } .main .header .unit { margin:0; position:relative; } .main .header .unit .content { height:350px; margin:0 0 0 10px; } .main .header .unit.two-column { width:650px; margin:0; } .main .header .unit.two-column .content {margin:0;} .main .header h1 { border-top:1px solid #ef4665; border-bottom:1px solid #ef4665; font-style:italic; font-size:18px; margin:0 0 10px; } .menu.footer li a, .menu.footer li a:link, .menu.footer li a:hover, .menu.footer li a:active, .menu.footer li a:visited {font-size:14px;} .unit { width:330px; float:left; margin:0 0 20px; } .unit h1 { border-bottom:1px solid #000; } .unit.two-column {width:660px;} .unit.three-column {width:990px;} .unit.three-column header { width:auto; float:none; } .unit.three-column header h1 { padding-left:0; padding-right:0; width:650px; } .unit.three-column .sidebar .unit {margin-right:5px;} .unit.full {width:100%;} .unit.case-study h1 {background:transparent;} .unit.twitter .date { bottom:10px; font-size:14px; } .unit.categories h1 { border-top:2px solid #000; } .unit.categories h1+div+h1 { border-top:1px solid #000; } .unit.categories .content {border-bottom:0;} .unit.categories ul { float:left; list-style-type:none; margin:10px 0 0 0; padding:0; width:50%; } .unit.categories li {margin-left:3px;} .grid > .unit > .content { height:218px; overflow:hidden; border-bottom-width:2px; } .grid .unit.post > .content { height:auto; border-bottom-width:0; } .about .intro h2 { margin-top:0; border-color:#ef4665; font-style:italic; font-size:18px; } .about .person { border-bottom:1px solid #000; margin:0 5px 20px; } .about .content h1 { border-top:2px solid #000; margin:0; border-bottom-width:1px; } .about .person img { float:left; width:50%; border:0; padding:0; margin:0; } .about .bio { float:left; width:50%; padding:15px 0 0; } .about .bio p { margin:0 0 1em 10px } .about .sidebar .content {border-bottom-width:1px;} .about .sidebar {margin:0;} .blog .post h1 { font:normal normal 30px/1.5 'adelle',Georgia,serif; text-transform:uppercase; color:#ef4665; border:0; margin:0; } .blog .post .date, .blog .post .author { font-size:14px; display:block; } .blog .post .author { margin:0 0 8px; } .blog .post .footer { clear:both; border-top:2px solid #000; margin:0 5px; font-size:11px; line-height:28px; } .blog .post .footer a {color:#000;} .blog .post .footer .sprite { position:relative; top:5px; margin:0 0 0 8px; } .blog .post .footer .categories {margin-left:40px;} .blog .post .footer .bar { border-bottom:1px solid #000; } .blog .post .meta .left a {margin-right:40px;} .blog .post .body {margin:0;} .blog .post h2 a {color:#000;} .blog .post .case-study a { display:block; color:#ef4665; } .blog .sidebar h2 { font-style:normal; font-size:14px; padding-left:0; } .blog .sidebar li {margin-left:0;} .blog .sidebar .unit { width:auto; float:none; margin-left:5px; margin-bottom:40px; } .blog .sidebar .content {margin-left:0;} .blog .related li { border:0; margin:0; } .blog .related a { font-size:14px; line-height:1.5; text-transform:none; } .blog .unit.categories .content { height:181px !important; } .blog .grid > .unit.categories:hover > h1 a {color:#000;} .blog .grid > .unit.categories > h1 a:hover {color:#82724e;} .contact .unit .content { height:463px; position:relative; } .contact .unit .content p { font-size:25px; line-height:1.3; margin-bottom:100px; } .contact .details {font-size:17px;} .slider-controls { position:absolute; bottom:0; width:100%; } .slider-controls .dots { position:absolute; bottom:0; left:0; font-size:20px; } .slider-controls .dots a {float:left;} .grid .three-column.project h1 { border:0; color:#82724e; font-size:18px; font-weight:bold; padding-top:0; } .grid .three-column.project .unit.two-column {margin-bottom:5px;} .project .slider { height:500px; border-bottom:2px solid #000; } .project .unit.two-column .content { padding:0 0 20px; } .project hr { margin-top:0; margin-bottom:0; } .project .close { position:absolute; right:0; top:5px; z-index:20; } .process .main .unit {margin:0;} .process .main h2 { border-top-width:2px; font-size:24px; } .process .step { position:static; display:block; } body > footer { font-size:12px; text-transform:uppercase; margin:20px 0 0; } .menu.footer { border-top:2px solid #000; padding:10px 0 8px; margin:0 5px; background:transparent; } .menu.footer li { margin:0 20px 0 0; float:left; display:block; } .lo-res { display:none !important; } .hi-res { display:block !important; } } /**** Isotope filtering ****/ .isotope-item { z-index: 2; } .isotope-hidden.isotope-item { pointer-events: none; z-index: 1; } /* Browser Specific Styles ---------------------------------------- */ /* JavaScript Dependent Styles ---------------------------------------- */ .loading { opacity:0; -webkit-border-radius: 32px; -moz-border-radius: 32px; border-radius: 32px; height:52px; background:#000; background:rgba(0,0,0,.8); width:130px; padding:0 24px; position:fixed; bottom:40px; left:50%; margin-left:-89px; color:#fff; font-size:24px; } .loading span { display:block; float:left; margin:7px 12px 7px 0; } .loading img { width:auto; display:inline; margin:10px 0; }