/* CSS Stylesheet */ /* Copyright Andrew Pautler 2009+ */ /*Color Guide*/ /* green links: #93b03b // gray body: #2b2b2a */ /*Font Families*/ /* "anivers-1","anivers-2","HelveticaNeue-Light","Helvetica-Neue",Helvetica, Arial,sans-serif // font-family: "museo-slab-1","museo-slab-2", Georgia, serif;*/ /*reset*/ html {color:#000;} * {margin:0; padding:0; border:0;} table {border-collapse:collapse; border-spacing:0;} fieldset,img {border:0;} caption,th {text-align:left;} abbr,acronym {border:0; font-variant:normal;} sup {vertical-align:text-top;} sub {vertical-align:text-bottom;} input,textarea,select {font-family:inherit; font-size:inherit; font-weight:inherit;} input,textarea,select {*font-size:100%;} legend {color:#000;} h1,h2,h3,h4,h5,h6,strong {font-weight:bold;} em {font-weight:italic;} ul,ol {margin:0 0 20px 25px; list-style:none;} p {margin:0 0 20px;} :focus {outline: 0;} /*fixes*/ #content:after, #contact-page:after, #contact-info ul:after, #about-content:after, footer:after, #bottom-section:after, div.specialty:after {content:"."; display: block; height: 0; clear:both; visibility:hidden;} /****************************************/ /* Body */ /****************************************/ html {padding: 0; margin: 0; background: #ebebe9; font: 14px/1.6 "anivers-1","anivers-2","Lucida Grande","HelveticaNeue-Light","Helvetica-Neue",Helvetica, Arial,sans-serif;} .wrapper {width: 940px; margin: 0 auto;} #wrapper {margin: 0; padding: 0;} body {margin: 0; padding: 0; color: #2b2b2a;} p {font-weight: 100;} a {text-decoration: none; color: #93b03b;} a:hover {border-bottom: 1px dotted #93b03b;} a:active {position: relative; top: 1px;} h3 {text-transform: uppercase; font-size: 30px; font-weight: 500; letter-spacing: 1px; text-shadow: 1px 1px 1px #fff; padding-bottom: 0px; margin-bottom: 10px; border-bottom: 1px solid #333; font-family: "museo-slab-1","museo-slab-2", Georgia, serif;} #background {position: absolute; z-index: -2; width: 100%; height: 800px; background: #ebebe9 url('../assets/background-texture.jpg') repeat-x top;} #content {margin: 30px 0 0 20px;} /****************************************/ /* Contact Section */ /****************************************/ #contact-page {display: none; padding: 35px 0; background:#201d1d; color: #f2f2f2;} #contact-page h2 {font-size: 28px; font-weight: 500; font-family: "museo-slab-1","museo-slab-2", Georgia, serif;} /*Contact Form*/ #contact-form {width: 465px; padding-right: 30px; float: left;} #contact-form p {padding: 0; margin: 0;} form {padding: 10px 0 0 0px; font-size: 14px; font-family: "anivers-1","anivers-2", "Lucida Grande","HelveticaNeue-Light","Helvetica-Neue",Helvetica, Arial,sans-serif;} label {margin: 13px 10px 7px -80px; display: inline; width: 70px; float: left; line-height: 1.6; text-align:right;;} input.txt, textarea, .fsField {margin: 7px 0; width: 420px; border: none; background: #fff; color: #455560; padding: 10px 5px; box-shadow: 0px 0px 10px rgba(0,0,0,.7) inset; -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.7) inset; -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.7) inset; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} .field textarea {max-width: 430px; overflow:auto; height: 120px;} input.submit {margin: 10px 35px 15px; padding: 15px 25px 15px 25px; color: #fff; text-transform: uppercase; text-shadow: 1px 1px 1px #566622; font-weight: 900; font-size: 15px; cursor: pointer; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; font-family: "anivers-1","anivers-2", "Lucida Grande","HelveticaNeue-Light","Helvetica-Neue",Helvetica, Arial,sans-serif; box-shadow: 0px 0px 4px rgba(69,85,96,.3); -webkit-box-shadow: 0px 0px 4px rgba(69,85,96,.3); -moz-box-shadow: 0px 0px 4px rgba(69,85,96,.3); background: #95b23c; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.46, rgb(122,149,40)), color-stop(0.5, rgb(149,178,60))); background-image: -moz-linear-gradient(center bottom, rgb(122,149,40) 46%, rgb(149,178,60) 50%);} .submit {clear: both; text-align: right;} input.submit:hover { background: #99a76c; background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.46, rgb(126,139,85)), color-stop(0.5, rgb(153,167,108))); background-image: -moz-linear-gradient(center bottom, rgb(126,139,85) 46%, rgb(153,167,108) 50%);} input.submit:active {position: relative; top: 1px;} form #human {visibility: hidden; display:none;} /*Contact Information*/ #contact-info {background: rgba(0,0,0,.5); font-size: 14px; float: left; width: 356px; padding: 20px 25px; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px;} #contact-info h4 {font-size: 18px; text-transform: uppercase; font-weight: 500; font-family: "museo-slab-1","museo-slab-2", Georgia, serif;} #contact-info p {text-transform: uppercase; padding:7px 0 0px; margin:0;} #contact-info a {text-transform: none; color: #95b23c;} #contact-info ul {margin: 0 0 0 -7px;} #contact-info ul li {display: inline;} #contact-info ul li a {color: #fff; text-decoration: none; float: left; width: 100px; padding: 7px 7px 7px 35px;} #contact-info li#twitter a {background: url('/assets/contact-twitter-2.png') no-repeat 7px center;} #contact-info li#facebook a {background: url('/assets/contact-facebook.png') no-repeat 7px center;} #contact-info li#behance a {background: url('/assets/contact-behance.png') no-repeat 7px center;} #contact-info li#linkedin a {background: url('/assets/contact-linkedin.png') no-repeat 7px center;} #contact-info li#readernaut a {background: url('/assets/contact-readernaut.png') no-repeat 7px center;} #contact-info li#dribbble a {background: url('/assets/contact-dribbble.png') no-repeat 7px center;} #contact-info li#forrst a {background: url('/assets/contact-forrst.png') no-repeat 7px center;} #contact-info li#vimeo a {background: url('/assets/contact-vimeo.png') no-repeat 7px center;} #contact-info li#flickr a {background: url('/assets/contact-flickr.png') no-repeat 7px center;} #contact-info li#gowalla a {background: url('/assets/contact-gowalla.png') no-repeat 7px center;} #contact-info li#google-plus a {background: url('/assets/contact-googleplus.png') no-repeat 7px center;} #contact-info ul li#twitter a:hover, #contact-info ul li#facebook a:hover, #contact-info ul li#behance a:hover, #contact-info ul li#linkedin a:hover, #contact-info ul li#readernaut a:hover, #contact-info ul li#dribbble a:hover, #contact-info ul li#vimeo a:hover, #contact-info ul li#flickr a:hover, #contact-info ul li#gowalla a:hover, #contact-info ul li#forrst a:hover, #contact-info li#google-plus a:hover {background-color: #231f20; border: none; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px;} /*Form Validation*/ #contact-form #error {color:red; font-size:10px; display:none;} #contact-form .needsfilled {/*border:1px solid #911;*/ background: #F2A0A0; color:#911;} /****************************************/ /* Header / Nav */ /****************************************/ header {display: block;} header .wrapper {height: 130px;} header h1 {display: inline;} header h1 a {z-index: 2; display: block; margin: 10px 0 0 -20px; float: left; width: 140px; height: 61px; text-indent: -9999px; overflow: hidden; background: url('/assets/logo.png') no-repeat;} header h1 a:hover {border: none; opacity: 0.9; -moz-opacity:0.9; -khtml-opacity: 0.9;} header h1 a:active {position: relative; top: 1px;} nav {display: block; font-family: "anivers-1","anivers-2", "Lucida Grande","HelveticaNeue-Light","Helvetica-Neue",Helvetica, Arial,sans-serif;} nav ul#nav-primary {float: right; margin: 28px 0;} nav ul#nav-primary li {display: inline;} nav ul#nav-primary li#nav-contact a {padding: 30px 55px 30px 40px; background: url('/assets/contact-arrow.png') no-repeat 108px;} nav ul#nav-primary li#nav-contact a:hover {background-color: rgba(157,183,77,.2); -webkit-transition: background-color 0.5s ease-in; -moz-transition: background-color 0.5s ease-in; -o-transition: background-color 0.5s ease-in; transition: background-color 0.5s ease-in;} nav ul#nav-primary li#nav-contact a.arrow-down {background: url('/assets/contact-arrow-down.png') no-repeat 108px;} nav ul#nav-primary li a {text-decoration: none; border: none; color: #2b2b2a; text-transform: uppercase; font-weight: bold; padding: 30px 40px; margin: 0px 0px; text-shadow: 1px 1px 1px #fff;} nav ul#nav-primary li a:hover {background-color: rgba(157,183,77,.2); -webkit-transition: background-color 0.5s ease-in; -moz-transition: background-color 0.5s ease-in; -o-transition: background-color 0.5s ease-in; transition: background-color 0.5s ease-in;} nav ul#nav-primary li a:active {position: relative; top: 1px; padding-top: 31px;} nav ul#nav-primary li a.current {color: #fff; text-shadow: 1px 1px 1px #393f22; background: #95b23c;} nav ul#nav-primary li a.current:hover {color: #fff; text-shadow: 1px 1px 1px #393f22; background: #95b23c;} /****************************************/ /* Home Page */ /****************************************/ #mobile, .mobile {display: none;} #slider {position:relative; width: 1091px; height: 390px; margin: 10px 0 30px -75px; background:#b4b4b4 url('../assets/loading.gif') no-repeat 50% 50%;} #slider img {position:absolute; top:0px; left:0px; display:none;} #slider a {border:0; display: block;} #slider a.nivo-imageLink {height: 100%; left: 0px; position: absolute; top: 0px; width: 100%;} .nivo-controlNav {display: block; position:absolute; left:47%; bottom:10px;} .nivo-controlNav a {display:block; width:10px; height:10px; background:url('../assets/home-slider-bullets.png') no-repeat; text-indent:-9999px; border:0; margin-right:8px; float:left;} .nivo-controlNav a.active {background-position: 0 -10px;} .nivo-directionNav a {position: absolute; display:block; width:34px; height:34px; text-indent:-9999px; border:0; opacity: 0.5; -moz-opacity:0.5; -khtml-opacity: 0.5;} .nivo-directionNav a:hover {opacity: 1.0; -moz-opacity: 1.0; -khtml-opacity: 1.0;} a.nivo-nextNav {background:url('../assets/home-slider-button-right.png') no-repeat; top: 180px; right: 94px;} a.nivo-prevNav {background:url('../assets/home-slider-button-left.png') no-repeat; top: 180px; left: 85px;} #bottom-section {width: 960px; margin-bottom: 50px;} #bottom-section section {width: 220px; border-top: 6px solid #c0cf93; float: left; padding: 5px 0 0 0; margin: 0 20px 0 0; -webkit-transition:border 0.5s ease-in; -moz-transition:border 0.5s ease-in; -o-transition:border 0.5s ease-in; transition:border 0.5s ease-in;} #bottom-section section:hover {border-top: 6px solid #93b03b; -webkit-transition:border 0.4s ease-in; -moz-transition:border 0.4s ease-in; -o-transition:border 0.4s ease-in; transition:border 0.4s ease-in;} #bottom-section section h3 {margin-bottom: 0px; border-bottom: none;} /****************************************/ /* About Section */ /****************************************/ #about-content {width: 950px; position: relative; } #about-section {float: left; width: 670px; margin: 20px 0 0; padding: 10px 30px 10px 0;} #about-section img#portrait {float: right; margin: 4px 0 15px 15px; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; -moz-box-shadow: 2px 2px 2px #333; -webkit-box-shadow: 2px 2px 2px #333; box-shadow: 2px 2px 2px #333;} h3.specialty-header {margin-bottom: 0px;} div.specialty {clear: both; height: auto; padding: 15px 0 10px; border-bottom: 1px solid #9e9e9c;} /* div.specialty:hover {-webkit-transition:opacity 0.4s ease-in; -moz-transition:opacity 0.4s ease-in; -o-transition:opacity 0.4s ease-in; transition:opacity 0.4s ease-in;}*/ div.specialty h4 {font-size: 14px; padding: 10px 10px 5px; text-transform: uppercase; text-shadow: 1px 1px 1px #fff;} div.specialty p {} div.specialty.left p {float: right; padding-right: 10px; width: 183px;} div.specialty.right p {float: left; padding-left: 10px; width: 180px;} div.specialty img {-moz-box-shadow: 0px 0px 5px #666; -webkit-box-shadow: 0px 0px 5px #666; box-shadow: 0px 0px 5px #666;} div.specialty.left figure {float: left; padding: 15px 20px 0 0; margin-left: 10px;} div.specialty.right figure {float: right; padding: 15px 0 0 20px; margin-right:15px;} div.specialty figure figcaption {display: none;} #capabilities {float: right; width: 220px; margin: 47px 0 0 0px; /* position:absolute; top: 208px;*/} /*#capabilities.fixed {position: fixed; top: 0;}*/ #capabilities h3 {font-size: 15px; margin: 6px 0 10px 0; letter-spacing: 0;} #capabilities h4 {text-transform: uppercase; margin: 0 0 3px; font-size: 14px; text-shadow: 1px 1px 1px #fff;} #capabilities ul {} #capabilities ul li {font-size: 11px; line-height: 1.4; margin: 0 0 0 -25px; padding: 5px 0 5px 10px; /*background: url('../assets/checkmark.png') no-repeat 5px;*/} #capabilities ul li.odd {background-color: #dedede; border-bottom: 1px solid #cbcbcb;} /****************************************/ /* Portfolio Section */ /****************************************/ a.back-to-top {float: left; color: #9e9e9d; font: 14px/1.6 "museo-slab-1","museo-slab-2", Georgia, serif;} a.back-to-top:hover {color: #2b2b2a; border: none;} nav.nav-portfolio {float: right; margin: -40px -5px 0 0; padding: 40px 0 20px 0;} .nav-portfolio li {display: block; float: left; margin: 0 5px 0; width: 115px; border-top: 3px solid #93b03b;} .nav-portfolio li a {display: inline; opacity: 0.4; -moz-opacity: 0.4; -khtml-opacity: 0.4; text-transform: uppercase; width: 150px; padding: 4px 55px 4px 5px; font-size: 17px; font-weight: 300; color:#2b2b2a; text-shadow: 1px 1px 1px #fff; font-family: "museo-slab-1","museo-slab-2", Georgia, serif;} .nav-portfolio li a:hover {border: none; opacity: 1.0; -moz-opacity: 1.0; -khtml-opacity: 1.0;} .nav-portfolio li a.current {opacity: 1.0; -moz-opacity:1.0; -khtml-opacity: 1.0;} #portfolio-pieces h3 {clear: both; margin-bottom: 20px;} #portfolio-pieces .portfolio-piece {padding: 0px 0 40px; margin: 15px 0; border-bottom: 1px solid #9e9e9c;} #portfolio-pieces .portfolio-piece.last {border: none; margin-bottom: 100px;} .slider {position:relative; float: left; width:702px; height:485px; background:#fff;} .print .slider, .other .slider {height: 472px;} .slider img {position:absolute; top:52px; left:0px; display: none;} .portfolio-piece {float: left; width: 940px;} .portfolio-piece.browser {padding-top: 52px; background:url('../assets/website-header.png') no-repeat top left;} .portfolio-piece img {float: left;} .portfolio-piece.browser .slider {margin-top: 52px;} .slider.nivoSlider, .portfolio-piece iframe {box-shadow: 0px 2px 8px rgba(0,0,0,.4); -webkit-box-shadow: 0px 2px 8px rgba(0,0,0,.4); -moz-box-shadow: 0px 2px 8px rgba(0,0,0,.4);} .portfolio-piece .nivo-controlNav {display: block; position:absolute; left:47%; bottom:-20px;} .portfolio-piece .nivo-controlNav a {display:block; width:10px; height:10px; background:url('../assets/home-slider-bullets.png') no-repeat; text-indent:-9999px; border:0; margin-right:8px; float:left;} .portfolio-piece .nivo-controlNav a.active {background-position: 0 -10px;} .portfolio-piece .nivo-directionNav a {position: absolute; display:block; width:34px; height:34px; text-indent:-9999px; border:0; opacity: 0.5; -moz-opacity: 0.5; -khtml-opacity: 0.5;} .portfolio-piece .nivo-directionNav a:hover {opacity: 1.0; -moz-opacity: 1.0; -khtml-opacity: 1.0;} .portfolio-piece a.nivo-nextNav {background:url('../assets/home-slider-button-right.png') no-repeat; top: 240px; right: 25px;} .portfolio-piece.print a.nivo-nextNav, .portfolio-piece.other a.nivo-nextNav {top: 220px;} .portfolio-piece a.nivo-prevNav {background:url('../assets/home-slider-button-left.png') no-repeat; top: 240px; left: 25px;} .portfolio-piece.print a.nivo-prevNav, .portfolio-piece.other a.nivo-prevNav {top: 220px;} .project-description {float: right; margin-top: 0px; width: 220px;} .project-description h4 {font-size: 15px; margin-bottom: 5px; text-transform: uppercase; line-height: 1.2;} .project-description p {font-size: 12px; line-height: 1.6;} .project-description h5 {font-size: 14px; text-transform: uppercase; font-weight: normal;} .project-description ul {margin-bottom: 40px;} .project-description ul li {font-size: 11px; line-height: 1.4; margin: 0 0 0 -25px; padding: 5px 0 5px 10px;} .project-description ul li.odd {background-color: #dedede; border-bottom: 1px solid #cbcbcb;} a.go-to-link {background-color: #93b03b; padding: 6px 10px; color: #fff;} a.go-to-link:hover {color: #2b2b2a; background-color: #839d34; border: none;} a.go-to-link:active {position: relative; top: 1px;} /*odd pieces*/ .portfolio-piece.odd {float: right; width: 940px;} .portfolio-piece.browser.odd {padding-top: 52px; background:url('../assets/website-header.png') no-repeat top right;} .portfolio-piece.odd .slider, .portfolio-piece.odd iframe {float: right;} .portfolio-piece.odd img, .portfolio-piece.odd iframe {float: right;} .odd .project-description {float: left;} /****************************************/ /* Download Section */ /****************************************/ div.download.portfolio-piece {position: relative; margin-top: 15px;} a.download-image {border: 7px solid #ccc; display: block; height: 485px; width: 702px; float: left;} a.download-hover-image, a.download-image:hover {border: 7px solid #93b03b;} .downloads a:hover {border-bottom: none;} a.download-button {z-index: 4; text-transform: uppercase; color: #fff; background: #000; padding: 20px 30px; position: absolute; top: 200px; left: 270px; opacity: 0.2; -moz-opacity:0.2; -khtml-opacity: 0.2;} a.download-hover, a.download-button:hover {border: none; opacity: 0.8; -moz-opacity:0.8; -khtml-opacity: 0.8;} .portfolio-piece.download.odd a.download-image {float: right;} .portfolio-piece.download.odd a.download-button {top: 200px; left: 510px;} .download-sizes p {margin-bottom: 5px;} .download-sizes ul li {font-size: 12px;} .portfolio-piece.download .project-description {width: 215px;} /****************************************/ /* Footer */ /****************************************/ footer {opacity: 0.5; -moz-opacity:0.5; -khtml-opacity: 0.5; margin: 50px 0 10px;} footer:hover {opacity: 0.9; -moz-opacity:0.9; -khtml-opacity: 0.9; -webkit-transition: opacity .5s linear;} footer .wrapper {padding: 15px 0 0; border-top: 3px solid #979797;} footer a {opacity: 0.8; -moz-opacity:0.8; -khtml-opacity: 0.8; color: #2b2b2a; text-decoration: none;} footer a:hover {opacity: 1.0; -moz-opacity:1.0; -khtml-opacity: 1.0;} footer #copyright {float: left; width: 420px; } footer #navigation {float: left; width: 200px; } footer #contact-footer {float: right; width: 200px; } footer a#vcard-footer {float: right; width: 60px; display:block; background: url('../assets/footer-vcard.png') 0px 2px no-repeat; padding: 0 0 0 25px;} footer a#email-footer {float: right; display:block; background: url('../assets/footer-email.png') 0px 2px no-repeat; padding: 0 0 0 25px;} footer a#vcard-footer:hover, footer a#email-footer:hover {border: none;} /*404 Error Page*/ .error h2 {font-size: 46px; font-weight: 500; text-transform: uppercase; text-align: center; font-family: "museo-slab-1","museo-slab-2", Georgia, serif;} .error img {padding: 0px 0 15px;} .error p {text-align: center; font-size: 16px; padding: 20px 0;} /*No JavaScript*/ #noscript-warning {background: #7F2A1E; color: #fff; margin: 0; padding: 5px 0; text-align: center; font-weight: bold; font: 16px/1.6 "Helvetica-Neue", Helvetica, Arial, sans-serif;} /****************************************/ /* Mobile Styling */ /****************************************/ @media screen and (max-width: 650px) { html {width: 100%; font-size: 0.8em;} .wrapper {width: 100%; margin: 0 auto;} #content, aside {width: 100%; float: none; clear: both; width: auto;} #background, header {width: 100%;} /* Contact Page */ #contact-form {display: none;} #contact-info {width: 90%; margin: 5px; padding: 10px 5px 20px 10px; display: block;} #contact-info ul li a {width: 80px;} /* Header/Nav */ header .wrapper {height: auto;} header h1 a {display: block; margin: -7px 0 0 5px; width: 61px; height: 80px; background: url('../assets/logo-small.png') no-repeat;} nav {width: auto; float: left; clear: both;} nav ul#nav-primary {font-size: 0.8em; width: auto;} nav ul#nav-primary li#nav-contact a {padding: 10px 25px 10px 10px; background: url('../assets/contact-arrow.png') no-repeat 85%;} nav ul#nav-primary li#nav-contact a.arrow-down {background: url('../assets/contact-arrow-down.png') no-repeat 85%;} nav ul#nav-primary li a {padding: 10px 10px;} nav ul#nav-primary li a:active {padding-top: 11px;} /* Content */ #content {margin: 0 5px;} /* Home Page */ #slider {display: none;} #mobile {display: block; margin: 10px auto;} #mobile img {max-width: 100%; margin: 0;} #mobile a:hover {border: none;} #bottom-section {width: 100%; margin: 20px 0 30px 15px;} #bottom-section section {clear: both; width: 220px; display: block; margin: 0 0 20px;} /* About Page */ #about-content {width: 100%;} #about-section {float: none; width: 100%; margin: 5px; padding: 0px;} #about-section img#portrait {float: none; margin: 0;} div.specialty {clear: both; height: auto; padding: 15px 0 10px; border-bottom: 1px solid #9e9e9c;} div.specialty img {max-width: 95%;} div.specialty h4 {padding: 10px 0px 5px;} div.specialty.left p, div.specialty.right p, div.specialty.left figure, div.specialty.right figure {float: none; padding: 0px; margin: 0px; width: 95%;} #capabilities {float: none; margin: 20px 5px 5px; width: 95%;} /* Portfolio Sectiom */ a.back-to-top {margin: 5px 0 10px;} nav.nav-portfolio, nav.nav-portfolio ul {float: none; margin: 5px 0; padding: 0; width: 100%;} .nav-portfolio li {float: left; margin: 0 3px 0; width: 23%;} .nav-portfolio li a {width: auto; padding-right: 5px; font-size: 0.9em;} #portfolio-pieces .portfolio-piece {width: 100%;} .portfolio-piece {float: none; width: 100%;} .portfolio-piece img {float: none;} .project-description {float: none; width: 100%;} .portfolio-piece.odd {float: none; width: 100%;} .portfolio-piece.odd .slider, .portfolio-piece.odd iframe, .portfolio-piece.odd img, .portfolio-piece.odd iframe, .odd .project-description {float: none;} .portfolio-piece.odd {float: none; width: 100%;} #portfolio-pieces .portfolio-piece.last {margin-bottom: 25px;} .slider {display: none;} .portfolio-piece.identity img, .portfolio-piece iframe {width: 100%; height: auto;} .mobile {display: block; margin: 10px auto;} .mobile img {width: 100%; height: auto; margin: 0; padding: 0;} .mobile-browser + img {margin-top: -11px;} .mobile-browser {width: 100%; height: auto; margin: 0; padding: 0;} .portfolio-piece.browser.odd, .portfolio-piece.browser {background: none;} /* Download Section */ #portfolio-pieces {width: 100%;} div.download.portfolio-piece {position: relative; margin-top: 15px;} a.download-image {height: 95%; width: 100%; border: none; float: none; padding: 0;} a.download-image:hover {border: none;} a.download-image img {width: 95%; padding: 0; margin: 0; border: 7px solid #ccc;} a.download-image img:hover {border: 7px solid #93b03b;} .portfolio-piece.download.odd a.download-button, a.download-button {display: none; padding: 0;} .project-description {clear: both; float: none; width: 100%;} .portfolio-piece.download.odd a.download-image {float: none;} .download-sizes {width: 95%;} /* Footer */ footer #copyright {float: none; width: 100%; padding-left: 10px; } footer #navigation {clear: both; float: none; width: 200px; padding-left: 10px;} footer #contact-footer {clear: both; float: none; width: 200px; padding-left: 10px;} footer a#vcard-footer, footer a#email-footer {float: left; padding-right: 15px;} }