"
Team:XMU-China/style
From 2013.igem.org
/* HTML5 Reset :: style.css ---------------------------------------------------------- We have learned much from/been inspired by/taken code where offered from:
Eric Meyer :: http://ericmeyer.com HTML5 Doctor :: http://html5doctor.com and the HTML5 Boilerplate :: http://html5boilerplate.com
*/
/* #Basic ================================================== */
html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
article, aside, figure, footer, header, hgroup, nav, section { display: block; }
/* Responsive images and other embedded objects
Note: keeping IMG here will cause problems if you're using foreground images as sprites. If this default setting for images is causing issues, you might want to replace it with a .responsive class instead. */
img, object, embed { max-width: 100%; }
/* force a vertical scrollbar to prevent a jumpy page */ html { overflow-y: scroll; }
/* #Typography
================================================== */
h1, h2, h3 {
text-transform: uppercase;
letter-spacing: 0.14em;
}
h1 a, h2 a, h3 a { font-weight: inherit; }
h1 { color: #212121; font-size: 23px; font-family: 'brandon-grotesque'; font-weight: 500; } h2 { color: #999999; font-size: 12px; font-family: "brandon-grotesque",sans-serif; font-weight: 400; line-height: 24px; margin-bottom: 24px; } h3 { color: #212121; font-size: 13px; font-family: 'brandon-grotesque',sans-serif; font-style: normal; font-weight: 500; line-height: 20px; margin-bottom: 6px; } .subheader { color: #777; } .center { text-align: center; } .vert-space { clear: both; display: inline-block; height: auto; padding: 36px 0; } .logo-space { padding: 108px 0; text-align: center; } .logo-first { padding-top: 108px; padding-bottom: 72px; }
h2.tisa, h3.tisa { color: #212121; font-family: "ff-tisa-web-pro",serif; font-size: 24px; font-weight: 300; letter-spacing: 0.03em; line-height: 1.5em; margin-bottom: 6px; text-transform: none; }
p { margin: 0 0 20px 0; line-height: 26px; }
p img { margin: 0; }
p.lead { color: #666666; font-size: 21px; font-weight: 300; line-height: 34px; letter-spacing: 0.015em; margin: 0px auto; width: 75%; text-align:center; }
p.lead.bottom { padding-bottom:40px;}
/* Paragraph Columns */
.three_col { -moz-column-count: 3; -moz-column-gap: 30px; -moz-column-rule-style: none; -webkit-column-count: 3; -webkit-column-gap: 30px; -webkit-column-rule-style: none; column-count: 3; column-gap: 30px; column-rule-style: none; }
.two_col { -moz-column-count: 2; -moz-column-gap: 30px; -moz-column-rule-style: none; -webkit-column-count: 2; -webkit-column-gap: 30px; -webkit-column-rule-style: none; column-count: 2; column-gap: 30px; column-rule-style: none; }
em { font-style: italic; } strong { font-weight: bold; color: #333; } small { font-size: 80%; }
/* Blockquotes */ blockquote, blockquote p { font-size: 22px; line-height: 32px; letter-spacing: 0; color: #333; font-style: italic; margin-left: auto; margin-right: auto; text-align: center; width: 80%; } blockquote { margin: 0 0 20px; } blockquote p { padding: 0px 48px; } blockquote cite { display: block; font-size: 12px; color: #999; font-family: 'brandon-grotesque'; font-weight: 400; letter-spacing: 0.15em; line-height: 1; text-transform: uppercase; font-style: normal; } blockquote cite:before { content: "\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color: #555; } blockquote.right { border-right: 1px solid #ECECEC; padding-right: 36px; } blockquote.left { border-left: 1px solid #ECECEC; padding-left: 36px; }
hr { border: solid #ececec; border-width: 1px 0 0; clear: both; margin: 0px 0px 24px 0; height: 0; }
ul { list-style: none; line-height: 2.0em; }
a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help; }
/* Links
================================================== */
a, a:visited { color: #666666; text-decoration: none; outline: 0; transition: color 0.2s linear; -moz-transition: color 0.2s linear; -webkit-transition: color 0.2s linear; -o-transition: color 0.2s linear;}
a:hover, a:focus { color: #333; }
p a, p a:visited { line-height: inherit; }
small { font-size: 75%; color: #666666; font-family: 'brandon-grotesque'; font-weight: 300; letter-spacing: 0.1em; text-transform: uppercase; }
strong, th { font-weight: bold; }
td, td img { vertical-align: top; }
/* standardize any monospaced elements */ pre, code, kbd, samp { font-family: monospace, sans-serif; }
/* hand cursor on clickable elements */ .clickable, label, input[type=button], input[type=submit], button {cursor: pointer;}
/* Webkit browsers add a 2px margin outside the chrome of form elements */ button, input, select, textarea {margin: 0;}
/* make buttons play nice in IE */ button {width: auto; overflow: visible;}
/* scale images in IE7 more attractively */ .ie7 img {-ms-interpolation-mode: bicubic;}
/* prevent BG image flicker upon hover */ .ie6 html {filter: expression(document.execCommand("BackgroundImageCache", false, true));}
/* let's clear some floats */ .clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; } .clearfix:after { clear: both; } .clearfix { zoom: 1; }
/* Site Styles ================================================== */
/* Loading */
#loading { display: block; font-size: 50px; left: 50%; margin-left: -28px; position: absolute; top: 50%; } .no-js #loading { display: none; }
@-webkit-keyframes opacity { 0% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes opacity { 0% { opacity: 1; } 100% { opacity: 0; } }
#loading span {
-webkit-animation-name: opacity;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-moz-animation-name: opacity; -moz-animation-duration: 1s; -moz-animation-iteration-count: infinite; }
#loading span:nth-child(2) { -webkit-animation-delay: 100ms; -moz-animation-delay: 100ms; }
#loading span:nth-child(3) { -webkit-animation-delay: 300ms; -moz-animation-delay: 300ms; }
body { font: 15px/27px "ff-tisa-web-pro",serif; font-style: normal; font-weight: 300; letter-spacing: 0.03em; }
body, select, input, textarea { color: #666666; }
/* Highlight colors */ ::-moz-selection{background: #333; color: #fff; text-shadow: none;} ::selection {background: #333; color: #fff; text-shadow: none;} ins {background-color: #333; color: #000; text-decoration: none;} mark {background-color: #333; color: #000; font-style: italic; font-weight: bold;}
/* Header */
.wrapper { margin: 0; padding: 0px 72px; border-bottom: 1px solid #ececec; }
#home header { margin: 0 auto; max-width: 1200px; } header { height: 150px; }
#logo-holder { float: left; } #logo { display: block; height: 46px; margin: 52px 0; width: 110px; }
#nav-wrapper { float: right; }
#nav { padding: 50px 0; display: inline-block; } #nav li { float: left; padding: 10px 22px; } #nav a { font-family: "brandon-grotesque",sans-serif; font-style: normal; font-weight: 400; font-size: 13px; line-height: 13px; letter-spacing: 0.14em; padding: 2px; text-transform: uppercase; }
.page-wrapper { }
/* Project Nav Bottom */ #project-nav-bottom { border-top: 1px solid #ECECEC; padding: 30px 0; height: 40px; margin-top: 64px; }
#project-nav-bottom .prev, #project-nav-bottom .next, #project-nav-bottom .grid { padding-bottom: 0px; } .prev a, .next a, .grid a { background: url("../images/sprite_icons.png") no-repeat; display: block; opacity: 0.3; transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; -o-transition: opacity 0.2s linear; } .prev a:hover, .next a:hover, .grid a:hover { opacity: 1; } .grid a { background-position: 0 0; height: 39px; margin: 0px auto; width: 39px; } .prev a { background-position: -50px 0; height: 20px; width: 12px; margin: 10px 0; } .next a { background-position: -63px 0; float: right; height: 20px; width: 12px; margin: 10px 0; }
/* Footer */
#home #footer-container { margin-top: 72px; } #footer-container #footer { padding: 48px 0; border-top: 1px solid #ECECEC; }
#footer h3 { color: #333333; letter-spacing: 0.14em; font-weight: 500; margin-bottom: 12px; }
#footer p { color: #777777; margin-bottom: 0px; letter-spacing: 0.03em; }
#footer-container #bottom { background: #eeeeee; height: 36px; padding: 24px 0; } #bottom .copyright { color: #999999; font: 10px/36px 'brandon-grotesque'; font-weight: 400; letter-spacing: 0.12em; margin--bottom: 0px; text-transform: uppercase; text-align: right; float: right; } #bottom .social { float: left; } #footer .container .one-third { padding-bottom: 0px; }
#bottom a { color: #999999; padding-right: 36px; font: 12px/36px 'brandon-grotesque'; text-transform: uppercase; letter-spacing: 0.12em; } #bottom a:hover { color: #333333; } #bottom span.ss-icon { padding-right: 6px; }
/* Fade-In Animations */
@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } } @keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
.fade { opacity:0; /* make things invisible upon start */ -webkit-animation:fadeIn ease-in 1; /* call our keyframe named fadeIn, use animattion ease-in and repeat it only 1 time */ -moz-animation:fadeIn ease-in 1; animation:fadeIn ease-in 1;
-webkit-animation-fill-mode:forwards; /* this makes sure that after animation is done we remain at the last keyframe value (opacity: 1)*/ -moz-animation-fill-mode:forwards; animation-fill-mode:forwards;
-webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; }
.fade:first-child { -webkit-animation-delay: 1s; -moz-animation-delay: 1s; animation-delay: 1s; }
.fade:nth-child(2n) { -webkit-animation-delay: 1.6s; -moz-animation-delay:1.6s; animation-delay: 1.6s; }
/* Page Styles
================================================== */
/********** Home/Work Page **********/
.project-grid { padding-top: 72px; } .work-heading { text-align: center; } .work-heading p { color: #666666; font-family: "ff-tisa-web-pro",serif; font-size: 21px; font-weight: 300; letter-spacing: 0.02em; line-height: 34px; margin: 0px auto; padding: 0 0px 72px; text-transform: none; width: 71%; }
/* Hovers */
#hover { transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; -o-transition: all 0.2s linear; opacity: 0; }
#hover { background-color: #fff; position: absolute; text-align: center; }
.four.columns .portrait #hover { height: 90.4%; left: 6.38%; top: 4.8%; width: 87.24%; } .eight.columns .landscape #hover { height: 40%; left: 3.09%; top: 60%; width: 70%; }
.six.columns .landscape #hover { height: 87.24%; left: 4.17%; top: 6.38%; width: 91.7%; } .six.columns .portrait #hover { height: 93.8%; left: 4.17%; top: 3.1%; width: 91.7%; }
.four.columns .landscape #hover { height: 79.83%; left: 6.38%; top: 10.08%; width: 87.24%; }
#hover:hover { opacity: 0.95; }
.link-text { position: absolute; text-align: center; top: 41%; width: 100%; }
.link-text h2 { color: #212121; font-size: 15px; font-weight: 500; margin-bottom: 2px; } h3.desc { color: #666666; font-family: "ff-tisa-web-pro",serif; font-size: 14px; letter-spacing: 0.03em; margin-bottom: 24px; text-transform: none; font-weight: 300; } h3.desc.work { font-size: 15px; color: #999999; }
/********** Work Gird **********/
.work-grid { background: #dbdbdb; height: 238px; } .work-grid a { display: block; padding: 109px 0;} .work-grid h3 { color: #fff; font-size: 26px; margin-bottom: 0; letter-spacing: 0.08em; }
/********** Portfolio Pages **********/
/* Portfolio Header */
.project-nav { height: 90px; } .project-nav h1 { line-height: 88px; margin-bottom: 0px; padding-left: 48px; }
/* Project full-images */
#circle-21 { background: url("../images/circle-21-candles.jpg") no-repeat center center; background-size: cover; } #tascosa { background: url("../images/tascosa-cartridge-company.jpg") no-repeat center center; background-size: cover; } #charleston-soap-chef { background: #eeeded; } #csc { padding-top: 25px; } #charleston-candle-works { background: url("../images/charleston-candle-works.jpg") no-repeat center center; background-size: cover; } #bake { background: url("../images/bake-charleston-photo.jpg") no-repeat center center; background-size: cover; } #bake-logo { padding-top: 220px; } #sydney-jazz { background: #f7f7f7; overflow: hidden; } #preston-law { background: #f7f7f7; overflow: hidden; } #asbahi { background: url("../images/asbahi-law-group.jpg") no-repeat center center; background-size: cover; } #nudge { background: url("../images/nudge-business-cards.jpg") no-repeat center center; background-size: cover; } #stars { background: url("../images/stars-neon-sign.jpg") no-repeat center center; background-size: cover; } #browns { background: url("../images/browns-court-full.jpg") no-repeat center center; background-size: cover; } #molly { background: url("../images/molly-full.jpg") no-repeat center center; background-size: cover; } #seppys { background: url("../images/seppys-hotdogs-full.jpg") no-repeat center center; background-size: cover; } #pindrop { background: url("../images/pindrop-full.jpg") no-repeat center center; background-size: cover; } #clarke { background: #f7f7f7; overflow: hidden; }
.monitor { text-align: center; padding-top: 65px; margin: 0 auto; }
.image-holder {
height: 650px;
margin: 24px 24px 0px;
padding: 0;
position: relative;
z-index: 0;
}
.full-image { background-size: cover; height: 100%; position: absolute; top: 0; width: 100%; }
.description { border-bottom: 1px solid #ECECEC; padding: 84px 0; margin-bottom: 24px; text-align: center; } .work-heading h1:after { color: #212121; content: "• • •"; display: block; text-align: center; font-size: 17px; font-weight: 500; letter-spacing: 0.22em; padding: 8px 0 5px; margin-bottom: 0px; } .description a { font-size: 20px; } .description h1 { margin-bottom: 4px; }
.logo { background: #ececec; } #web-info { border-top: 1px solid #ECECEC; text-align: center; padding-top: 60px; padding-bottom: 0px; } #web-info h2 { margin-bottom: 0px; } #web-info p { font-size: 20px; } a.linkout { font-size: 21px; text-align: center; letter-spacing: 0.03em; line-height: 1.25em; }
/********** What We Do **********/
#row { height: 180px; padding: 24px 0 48px; overflow: hidden; }
#row .icon { cursor: pointer; text-align: center; opacity: 0.4; padding-bottom: 0px; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s;
} .icon h2 { color: #212121; margin-bottom: 0; margin-top: 12px; } .icon img { }
#row .icon:hover { margin-top: -5px; } #row .icon.current { opacity: 1; margin-top: -5px; }
#panes { border-top: 1px solid #ECECEC; padding: 48px 0 24px; min-height: 200px; } #panes p { color: #333333; font-size: 18px; font-weight: 300; line-height: 30px; margin: 0; padding-right: 6px; } #panes h3 { margin-bottom: 18px; padding-left: 36px;} #panes .four.columns { border-left: 1px solid #ececec; }
ul.services { font-family: 'brandon-grotesque'; font-size: 12px; font-weight: 400; letter-spacing: 1px; margin: 0 auto; padding-left: 36px; text-transform: uppercase; }
/********** Studio **********/
#studio { overflow: hidden; height: 500px; padding-bottom: 0px; }
#profiles { padding-top: 48px; padding-bottom: 24px; clear: both; overflow: hidden; border-bottom: 1px solid #ececec; }
#contact-section { padding-top: 48px; }
.bio { clear: both; float: left; } .bio img { float: left; margin-right: 36px; } .bio p { padding-right: 36px; }
#contact-section h2 { margin-bottom: 18px; }
.bio { border-right: 1px solid #ececec; } .bio h3 { color: #999999; font-size: 11px; font-weight: 400; }
.small-info { padding-left: 12px; } .small-info ul, .small-info p { font-size: 14px; margin-bottom: 30px; }
/* Slider */ a.browse { background-attachment: scroll; background-clip: border-box; background-color: transparent; background-image: url("../images/sprite_slider.png"); background-origin: padding-box; background-position: 0 0; background-repeat: no-repeat; background-size: auto auto; cursor: pointer; display: block; float: left; font-size: 1px; height: 20px; opacity: 0.8; position: absolute; top: 240px; width: 12px; z-index: 10000; } a.browse:hover { opacity: 1; } a.right { background-position: -13px 0; float: right; clear: right; right: 36px; }
a.left { background-position: 0 0; float: left; margin-left: 0; left: 36px; } .items { clear: both; position: absolute; width: 20000em; } .items div { float: left; } .scrollable { position:relative; overflow:hidden; width: 1200px; height:500px; } .scrollable .items { width: 20000em; position: absolute; }
/* Google Map */ #map_canvas { height: 400px; } #map_canvas img { max-width: none; } #map_canvas h1 { font-size: 14px; font-weight: 500; line-height: 1em; letter-spacing: 1px; margin: 10px 0 0; } #map_canvas p { margin-bottom: 0; margin-top: 0; } #map_canvas .gmnoprint { line-height: 2; }
/********** Websites Page **********/
.web-wrapper { border-bottom: 1px solid #ececec; padding: 60px 0; text-align: center; } .web-wrapper h2 { color: #212121; font-size: 14px; font-weight: 500; letter-spacing: 0.12em; margin-bottom: 6px; text-transform: uppercase; } .border { border: 1px solid #ececec; }
.s-wrapper { clear: both; display: block; text-align: center; } .s-wrapper img { margin-bottom: 48px; max-width: 100%; }
/* Media queries!
*/
/* 960 Screens */ @media only screen and (min-width: 960px) and (max-width: 1250px) { .description { padding: 72px; } .image-holder { height: 500px; } #bake-logo { padding-top: 164px; } .ccw-testimonial { height: 297px; } blockquote, blockquote p { font-size: 18px; line-height: 28px; } blockquote p { padding: 0 24px; } .monitor { width:660px; padding-top:46px;} .link-text h2 { font-size: 14px; margin-bottom: 0; } .logo-space { padding-bottom: 48px; padding-top: 84px; } .work-heading p { padding: 0 0px 72px; } p.lead { width:100%; }
#studio { height: 400px; } a.browse { top: 189px; } .items img { width: 936px; } .bio img { float: left; margin-right: 24px; } #panes p { padding-right: 12px;}
.work-grid a { padding: 83px 0;} }
/* Tablet */ @media only screen and (min-width: 768px) and (max-width: 959px) { .description { padding: 72px 24px; } .image-holder { height: 500px; } h1 { font-size: 21px; } p.lead { font-size: 20px; line-height: 34px; width: 100%; } blockquote p { padding: 0px; } blockquote, blockquote p { font-size: 16px; line-height: 26px; } #csc { padding-top: 70px; } .monitor { width:590px; }
#hover { display:none;}
.work-heading p { font-size: 20px; line-height: 32px; padding-bottom: 54px; width: 100%; } .project-grid { padding-top: 54px; } #home #footer-container { margin-top: 36px; } #project-nav-bottom { margin-top: 54px; } #project-nav-bottom { padding-top: 30px; padding-bottom: 30px; } #footer h3 { font-size: 13px; }
/* Studio */ #profiles { padding-bottom: 36px; } #profiles .four.columns { padding-bottom: 0; padding-top: 36px; width: 768px; border-top: 1px solid #ececec; } #profiles .eight.columns { width: 768px; padding-bottom: 0; } #studio { height: 318px; } .small-info { padding-left: 0px; width: 768px; } .small-info ul { margin-bottom: 0;} #clients, #credits { width: 33.3333%; float: left; } .bio { padding-bottom: 36px; border-right: none; } #contact-section {padding-top: 36px;}
a.browse { top: 149px; } .items img { width: 744px; }
#panes h3, #panes ul { padding-left: 30px; }
.work-grid h3 { font-size: 22px; } .work-grid a { padding: 61px 0;} }
/* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) { h1 { font-size: 18px; line-height: 28px; } .work-heading h1:after { padding: 2px 0px 4px; } .logo-space { padding-top: 36px; padding-bottom: 36px; } p { line-height: 22px; } #hover { display:none; } .fade { opcaity: 1; } #web-info { padding: 36px 0 30px; } a.linkout { font-size: 19px;} #home #footer-container, #project-nav-bottom { margin-top: 24px; } #footer .container .one-third { margin-bottom: 14px; } #footer p, #footer h3 { text-align: left; } #footer h3 { margin-bottom: 6px; font-size: 12px; } #footer p { margin-bottom: 18px; } #footer-container #footer { padding: 36px 0 24px; } #footer-container #bottom { height: auto; padding-bottom: 0px; } #bottom .copyright { float: none; margin: 0 auto; padding-bottom: 24px; text-align: center; } blockquote.right, blockquote.left { border: none; margin-bottom: 0;padding-right: 0;text-align: center; width: 100%; } blockquote, blockquote p { color: #333333; font-size: 16px; font-style: italic; line-height: 26px; padding: 0; text-align: center; width: 100%; } .vert-space { padding: 12px 0; } #web-info p { font-size: 19px; } p.lead.bottom { padding-bottom:20px; font-size:16px; line-height:25px;}
/* Homepage */ .work-heading p { font-size: 18px; line-height: 28px; padding: 0 0 48px 0; width: 100%; } .project-grid { padding-top: 48px; }
/* What We Do */ .icon img { display: none; } .icon h2 { margin-bottom: 18px; margin-top: 0; } #row { height: auto; padding: 0 0 36px; } #row .icon:hover, #row .icon.current { margin-top: 0; opacity: 1; } #row .icon { width: 33.3333%; } #panes { padding-top: 36px; } #panes p { padding-right: 0px; } #panes .four.columns { border-left: none; } #panes h3, #panes ul { padding-left: 0px; }
/* Studio */ .bio { text-align: center; border-right: none; } .bio img { float: none; margin: 0 0 12px; } .bio p { padding-right: 0px; } .bio h3 { font-size: 10px; } .small-info { border-left: none; padding-left: 0px; } #profiles { padding-bottom: 0px; padding-top: 36px; } #map_canvas { height: 200px; } #profiles .four.columns { padding-bottom: 0px; } #contact-section { padding-top:24px; } #studio { display: none; } a.browse { display: none; }
}
/* Mobile Landscape */ @media only screen and (min-width: 480px) and (max-width: 767px) {
header { height: 206px; } #logo { margin-bottom: 30px; } #nav { padding-top: 0px; } #nav li { padding: 10px 28px 10px 0; } #nav-wrapper { float: left; clear: both; }
p.lead { font-size: 19px; line-height: 30px; width: 100%; } .description { padding: 60px 0; } .description h2 { font-size: 11px; } p.lead, .description a { font-size: 18px; line-height: 28px; } .wrapper { padding: 0px 48px; } .image-holder { height: 300px; } #csc { padding-top: 48px; } #bake-logo { padding-top: 68px; width: 45%; } #sjc-logo { padding-top: 84px; width: 45%; } .monitor { padding-top: 30px; width:390px; }
#project-nav-bottom .grid { width: 20%; } #project-nav-bottom .next, #project-nav-bottom .prev { width: 40%; } blockquote.right, blockquote.left { border: none; } #bottom .social { float: none; text-align: center; } #bottom a { padding: 0 13px; font-size: 11px; }
}
/* Mobile Portrait */ @media only screen and (max-width: 479px) { p.lead { font-size: 19px; line-height: 30px; width: 100%; } .description { padding: 48px 0; } p.lead, .description a { font-size: 18px; line-height: 28px; } header { height: 330px; } .wrapper { padding: 0px 36px; } #nav-wrapper { float: left; clear: both; } #nav { padding: 0px; } #nav li { padding: 6px 28px 6px 0; clear: both;} #logo { margin-bottom: 36px; } .image-holder { height: 180px; } #csc { padding-top: 24px; padding-bottom: 24px; width: 266px; } #csc img { max-width: 266px; } #bake-logo { padding-top:34px; width: 55%; } .monitor { padding-top: 18px; width:240px; }
#project-nav-bottom { padding: 0px; height: auto; } #project-nav-bottom .grid { display: none; } #project-nav-bottom .next, #project-nav-bottom .prev { padding: 20px 0; width: 49%; } #project-nav-bottom .prev { border-right: 1px solid #ECECEC; }
.work-grid a { padding: 85px 0;}
#bottom .social { float: none; font-size: 11px; text-align: center; } #bottom a { padding: 0 13px 0 0; line-height: 26px; }
/* What We Do */ #row { padding: 0 0 18px; }
}
@media all and (orientation: landscape) {
}
