Team:Shenzhen BGIC 0101/style
From 2013.igem.org
Line 53: | Line 53: | ||
height: 100%} | height: 100%} | ||
.push { | .push { | ||
- | height: | + | height: 45px; |
} | } | ||
p img { | p img { |
Revision as of 08:14, 20 October 2013
@font-face {
font-family: 'Tangerine'; font-style: normal; font-weight: 400; src: local('Tangerine'), url(http://themes.googleusercontent.com/static/fonts/tangerine/v3/HGfsyCL5WASpHOFnouG-RD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
letter-spacing: 0.05em; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
} body {
line-height: 1;
} ol, ul {
list-style: none;
}
p, ul, ol {
margin: 0 0 0px;
} ul, ol {
padding: 1.5em 0 0 2.5em;
}
body {
/* background: #f2f2f2;*/ background: #262626; font-family: "proxima-nova", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; line-height: 21px; color: #262626; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%}
html, body {
height: 100%}
- wrap {
//background: url() no-repeat fixed;
background-size:cover;
margin-bottom: 0px; min-height: 100%; height: auto!important; height: 100%}
.push {
height: 45px;
} p img {
margin: 0;
} em {
font-style: italic;
} strong {
font-weight: bold;
} hr {
border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; height: 0;
} a, a:visited {
color: #666; text-decoration: none; outline: 0;
} a:hover, a:focus {
color: #333;
} p a, p a:visited {
line-height: inherit;
} img.scale-with-grid {
max-width: 100%; height: auto;
}
header {
width: 100%; height: 90px; background: #222; background: rgba(0, 0, 0, .2); border-color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .25); position: fixed; top: 0; z-index: 10; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
} header.sticky {
height: 60px; background: #993399; border: 0; box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
} header h1 {
margin: 0;
}
- logo {
width: 84px; height: 59px; display: block; background: url() no-repeat; text-indent: -99999em; position: absolute; top: 15px; left: 15px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
- logo1{
width: 80px; height: 60px; display: block; background: url() no-repeat; text-indent: -99999em; position: absolute; top: 15px; right: 10px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out; z-index:9999;
} nav {
text-align: center; margin-top: 35px; -webkit-transition: margin .2s ease-in-out; -moz-transition: margin .2s ease-in-out; transition: margin .2s ease-in-out;
} .sticky nav {
margin-top: 20px;
} nav a, #start-project {
font-weight: 600; text-transform: uppercase; color: #555; text-shadow: 0 1px 0 #fff; padding: 16px; font-size: 14px;
} .light nav a {
color: #ddd;/* top-nav color */ text-shadow: 0 1px 0 rgba(0, 0, 0, .5); opacity: .5; -webkit-transition: opacity .1s linear; -moz-transition: opacity .1s linear; transition: opacity .1s linear;
} nav a.current-menu-item, nav a.current_page_parent, nav a:hover, .single-work .light nav a.menu-item-18, .single-lab .light nav a.menu-item-17, .single-post .light nav a.menu-item-16 {
opacity: 1;
} .single-work nav a.current_page_parent, .single-lab nav a.current_page_parent {
opacity: .5;
}
- blog {
z-index: 6;
}
- blog article {
margin: 10px auto 60px; max-width: 700px; position: relative;
}
- home-content h2, #fresh h2, h2.section-title {
color: #358; font-size: 12px; text-shadow: 0 1px 0 #fff; font-weight: 600; width: 150px; background: #aaa; margin: -20px auto 20px; text-align: center;
}
- home-content .column, #fresh {
border-top: 1px solid #d0d0d0;
}
- home-content .one-third {
float: right!important;
} .mini-post {
float: left; background: #fff; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4); border-radius: 2px; overflow: hidden; width: 290px; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; transition: all .2s ease-out; color: #333; min-height: 320px; cursor: pointer;
} .mini-post:hover {
margin-top: -5px; box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .4);
} .mini-post .text {
padding: 20px 20px 10px;
} .mini-post h3 {
font-size: 16px; line-height: 20px; font-weight: 600; margin: 0;
} .mini-post .meta {
font-size: 11px;
} .mini-post p {
font-size: 13px;
} .mini-post .more {
font-weight: 600;
}
- tweet {
margin: 40px auto; padding-top: 40px; border-top: 1px solid #d0d0d0;
}
- tweet .text {
padding: 0 90px; background: url(art/bird.svg) no-repeat 35px 0; font-size: 26px; font-weight: 300;
}
- tweet .text p {
margin: 0 0 10px; text-align: center; line-height: 36px;
}
- tweet .text p.author {
font-size: 20px;
}
- page-header {
width: auto; // height: 220px; //background: url() top center; margin: 0 0 35px; box-shadow: 2px 1px 12px #272727;
} .wf-loading #page-header h1 {
visibility: hidden;
}
.blog #page-header {
// background: url() top center;
}
- page-header h1 {
font-family: "abril-fatface", 'Adobe Garamond', 'Garamond', serif; color: #fff; text-align: center; padding: 130px 0 0 0; text-shadow: 0 2px 0 #000; font-size: 60px;
}
- blog {
z-index: 6;
}
- blog article {
margin: 10px auto 60px; max-width: 1200px; position: relative;
}
- blog article .post {
background: #fff; // box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4); box-shadow: 2px 1px 6px #272727; border-radius: 2px; overflow: hidden; color: #333; margin: 0 0 15px;
}
- blog article .post .text {
padding: 20px 20px 10px;
} .post-content a { color: #2683a5; } .post-content a:hover { color: #4ea9a2; }
- blog article .post h2 {
font-family: 'Tangerine', serif; font-size: 48px;
text-shadow: 4px 4px 4px #aaa; color: #38f; letter-spacing: 0.1em; word-spacing: 0.3em; font-weight: 700;
line-height: 36px; margin: 0;
}
- blog article .post h3 {
font-size: 14px; line-height: 18px; text-transform: uppercase; font-weight: 700;
}
- blog article .post .meta {
font-size: 11px; font-weight: 600; text-transform: uppercase;
}
- blog article .post p {
font-size: 16px;
line-height: 19px; font-family: Trebuchet MS; font-weight: 600; } .short-url, .share, .categories {
background: #eaeaea left center no-repeat; border-radius: 2px; border-bottom: 1px solid #fff; border-top: 1px solid #d0d0d0; float: left; margin: 0 20px 0 0; padding: 4px 15px 4px 35px; font-size: 11px; color: #666; text-transform: uppercase; font-weight: 700; text-shadow: 0 1px 0 #fff; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; transition: all .2s ease-out;
} .addthis_toolbox {
display: none; padding: 0 20px 20px;
} .short-url:hover, .share:hover {
background-color: #ddd; border-top: 1px solid #aaa;
}
- blog article.quote {
max-width: 940px;
}
- blog article.quote .quote-content {
background: #676767; padding: 30px; border-radius: 3px; border-top: #111 1px solid; border-bottom: #fff 1px solid; margin: 0 0 15px;
}
- blog article.quote .quote-content p {
font-size: 26px; line-height: 32px; color: #eee; font-weight: 300;
}
- blog article.quote p.ref {
color: #fff; padding: 0; margin: 0;
}
- blog article.quote .quote-content a {
color: #fff; text-decoration: underline;
}
- blog-pagination {
display: block; text-align: center; margin: 35px 0;
} .wp-paginate {
display: inline-block; padding: 0; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4); border-radius: 3px;
} .wp-paginate li {
padding: 0!important; display: inline-block; background-image: none!important; background-color: #fff; margin: 0; float: left;
} .wp-paginate a, .wp-paginate .page.current {
color: #333; padding: 10px 13px; display: inline-block; margin-bottom: 0!important; min-width: 10px; border-right: 1px solid #eee; font-size: 12px; font-weight: 600; text-transform: uppercase; -webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out; transition: all .1s ease-in-out;
} .wp-paginate span {
margin-bottom: 0!important;
} .wp-paginate a.next {
border-left: 0;
} .wp-paginate .page {
margin: 0;
} .wp-paginate .page.current {
background-color: #fafafa; color: #888;
} .wp-paginate a:hover {
background: #555; color: #fff; border-right: 1px solid #555;
}
- disqus_thread {
margin: 10px auto 35px!important; max-width: 660px; position: relative; background: #eaeaea; border-radius: 2px; border-bottom: 1px solid #fff; border-top: 1px solid #d0d0d0; color: #1a1a1a; padding: 20px; font-size: 12px;
}
- disqus_thread h3 {
font-size: 14px; text-transform: uppercase; text-shadow: 0 1px 0 #fff; font-weight: 600;
}
- contact {
position: relative; height: 940px;
}
- location-map {
width: 100%; height: 940px; display: block; position: absolute; top: 0;
}
- contact .container {
padding-top: 60px;
}
- contact #contact-details, #contact #message {
background: #262626; float: none; display: block; margin: 0 0 35px; box-shadow: 0 0 25px 0 rgba(0, 0, 0, .25);
}
- phone-address, #work-planner {
padding: 30px 40px;
}
- phone-address {
border-bottom: 1px solid #565656;
}
- phone-address p, #work-planner h2, #message h2 {
text-transform: uppercase; color: #fff; font-weight: 600; font-size: 14px;
}
- phone-address p {
padding-left: 35px;
}
- phone-address p#phone {
background: url(art/phone.png) no-repeat 2px 2px;
}
- phone-address p#address {
background: url(art/map.png) no-repeat 2px 2px; margin: 0;
}
- work-planner h2, #message h2 {
margin: 0 0 10px; line-height: normal;
}
- work-planner p {
color: #9c9c9c; font-size: 13px; font-weight: 600;
}
- work-planner a {
padding: 12px 40px 12px 12px; color: #fff; text-transform: uppercase; font-weight: 700; font-size: 12px; background: #ce462b url(art/get-started-arrow.png) no-repeat right center; margin: 0 0 10px; display: block; width: 128px; -webkit-transition: background-color .2s ease-in-out; -moz-transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out;
}
- work-planner a:hover {
background-color: #4ea9a2;
}
- contact #message .wrapper {
padding: 30px 40px;
}
- contact #message .field {
display: block; position: relative; margin: 0 0 15px;
}
- contact #message label {
position: absolute; top: 9px; left: 11px; color: #aaa; font-size: 13px; font-weight: 500;
}
- contact #message input, #contact #message textarea {
width: 300px; max-width: 300px; background: #000; border: 0; border-bottom: 1px solid #373737; width: 100%; color: #ddd; font-size: 13px; font-weight: 500; padding: 8px 10px;
}
- contact #message textarea {
height: 80px;
}
- contact #message input:focus, #contact #message textarea:focus {
background: #111; outline: 0;
}
- contact #message button {
padding: 14px 40px 14px 12px; color: #fff; text-transform: uppercase; font-weight: 700; text-align: left; font-size: 12px; background: #343434 url(art/message-arrow.png) no-repeat right center; display: block; margin: 0; width: 180px; -webkit-transition: background-color .2s ease-in-out; -moz-transition: background-color .2s ease-in-out; transition: background-color .2s ease-in-out; font-family: "proxima-nova", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
- contact #message button:hover {
background-color: #666;
} .contact footer {
margin: 0;
} footer {
padding: 35px 0 20px; background: #003399; height: 130px;
box-shadow: 4px 3px 25px #000; } footer h3 {
font-size: 13px; line-height: 20px; font-weight: 600; color: #fff; text-transform: uppercase; margin: 0 0 20px;
} footer p {
color: #a5a5a5; font-size: 12px; line-height: 20px; font-weight: 600;
} footer p a, footer p a:visited, footer p span {
color: #dedede;
} footer p a:hover {
color: #fff;
}
- footer-contact p {
margin-right: 40px; float: left;
}
- footer-project p {
max-width: 180px;
}
- footer-newsletter {
position: relative;
}
- footer-newsletter p {
position: absolute; font-size: 11px; top: 0; right: 0; color: #7c7c7c;
}
- footer-newsletter input {
width: 220px; height: 19px; background: #202020; border: 0; margin: 0; padding: 10px; color: #fff; font-size: 12px; -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out; float: left; border-radius: 0;
}
- footer-newsletter input:focus {
outline: 0; background: #333;
}
- footer-newsletter label {
position: absolute; top: 49px; left: 10px; color: #a5a5a5; font-size: 12px;
}
- footer-newsletter button {
width: 39px; height: 39px; text-indent: -99999em; background: #202020 url(art/btn-arrow.svg) no-repeat center center; float: right; -webkit-transition: background .3s ease-in-out; -moz-transition: background .3s ease-in-out; transition: background .3s ease-in-out;
}
- footer-newsletter button:hover {
background-color: #333;
}
- footer-final {
margin: 15px auto; padding-top: 35px; border-top: 1px solid #313131; position: relative;
}
- footer-final a, #footer-final a:visited {
color: #aaa;
}
- footer-final a:hover {
color: #fff;
}
- footer-final p {
font-weight: 600; font-size: 12px; display: block; margin: 0;
}
- footer-nav {
text-align: center;
}
- footer-nav a {
margin: 0 8px;
}
- footer-final p#footer-social {
text-align: right; margin-left: 40px;
}
- footer-social a, #footer-social a:visited {
margin: 0 0 0 16px;
} .left {
float: left;
} .right {
float: right;
} span.error {
color: red; font-size: 12px;
} p.success {
background: #009b00; padding: 5px; color: #fff; text-align: center; font-weight: 600; border-radius: 3px;
} p.fail {
background: red; padding: 5px; color: #fff; text-align: center; font-weight: 600; border-radius: 3px;
} .success {
color: #a5a5a5; font-size: 12px;
} .alignnone {
margin: 5px 20px 20px 0;
} .aligncenter, div.aligncenter {
display: block; margin: 5px auto 5px auto;
} .alignright {
float: right; margin: 5px 0 20px 20px;
} .alignleft {
float: left; margin: 5px 20px 20px 0;
} .aligncenter {
display: block; margin: 5px auto 5px auto;
} a img.alignright {
float: right; margin: 5px 0 20px 20px;
} a img.alignnone {
margin: 5px 20px 20px 0;
} a img.alignleft {
float: left; margin: 5px 20px 20px 0;
} a img.aligncenter {
display: block; margin-left: auto; margin-right: auto;
} .wp-caption {
background: #fff; border: 1px solid #f0f0f0; max-width: 96%; padding: 5px 3px 10px; text-align: center;
} .wp-caption.alignnone {
margin: 5px 20px 20px 0;
} .wp-caption.alignleft {
margin: 5px 20px 20px 0;
} .wp-caption.alignright {
margin: 5px 0 20px 20px;
} .wp-caption img {
border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto;
} .wp-caption p.wp-caption-text {
font-size: 11px; line-height: 17px; margin: 0; padding: 0 4px 5px;
} .cols_2_left, .cols_2_right, .cols_3_left, .cols_3_middle, .cols_3_right {
margin: 0 0 1.5em;
} .cols_2_left {
float: left; width: 47%}
.cols_2_right {
float: right; width: 47%}
.cols_3_left {
float: left; width: 30%}
.cols_3_middle {
float: left; width: 30%; margin-left: 5%}
.cols_3_right {
float: right; width: 30%}
.container {
position: relative; width: 1000px; margin: 0 auto; padding: 0;
} .container.short {
width: 940px;
} .container .column, .container .columns {
float: left; display: inline; margin-left: 10px; margin-right: 10px;
} .row {
margin-bottom: 20px;
} .column.alpha, .columns.alpha {
margin-left: 0;
} .column.omega, .columns.omega {
margin-right: 0;
} .container .one.column, .container .one.columns {
width: 40px;
} .container .two.columns {
width: 100px;
} .container .three.columns {
width: 160px;
} .container .four.columns {
width: 220px;
} .container .five.columns {
width: 180px;
} .container .six.columns {
width: 340px;
} .container .seven.columns {
width: 400px;
} .container .eight.columns {
width: 460px;
} .container .nine.columns {
width: 520px;
} .container .ten.columns {
width: 580px;
} .container .eleven.columns {
width: 640px;
} .container .twelve.columns {
width: 700px;
} .container .thirteen.columns {
width: 760px;
} .container .fourteen.columns {
width: 820px;
} .container .fifteen.columns {
width: 880px;
} .container .sixteen.columns {
width: 940px;
} .container .one-third.column {
width: 290px;
} .container .two-thirds.column {
width: 615px;
} .container .offset-by-one {
padding-left: 60px;
} .container .offset-by-two {
padding-left: 120px;
} .container .offset-by-three {
padding-left: 180px;
} .container .offset-by-four {
padding-left: 240px;
} .container .offset-by-five {
padding-left: 300px;
} .container .offset-by-six {
padding-left: 360px;
} .container .offset-by-seven {
padding-left: 420px;
} .container .offset-by-eight {
padding-left: 480px;
} .container .offset-by-nine {
padding-left: 540px;
} .container .offset-by-ten {
padding-left: 600px;
} .container .offset-by-eleven {
padding-left: 660px;
} .container .offset-by-twelve {
padding-left: 720px;
} .container .offset-by-thirteen {
padding-left: 780px;
} .container .offset-by-fourteen {
padding-left: 840px;
} .container .offset-by-fifteen {
padding-left: 900px;
} @media only screen and (max-width:1049px) {
#case-details .images { width: auto; margin-left: 0;
}
- case-details .images.two img {
width: 450px;
} }@media only screen and (min-width:960px) {
#logo { -webkit-transform-style: preserve-3d;
}
#logo1 { -webkit-transform-style: preserve-3d;
} .sticky #logo {
-webkit-transform: scale(.75); -moz-transform: scale(.75); -ms-transform: scale(.75); -o-transform: scale(.75); transform: scale(.75); top: 0; left: -10px;
} .sticky #logo1 {
-webkit-transform: scale(.75); -moz-transform: scale(.75); -ms-transform: scale(.75); -o-transform: scale(.75); transform: scale(.75); top: 0; right: -1px;
}
}@media only screen and (min-device-width :768px) and (max-device-width:1024px) and (orientation:landscape) {
#logo { -webkit-transform-style: flat;
}
#logo1 { -webkit-transform-style: flat;
} .sticky #logo {
-webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; background-position: 0 -80px; top: 8px; left: 10px;
} .sticky #logo1 {
-webkit-transform: none; -moz-transform: none; -ms-transform: none; -o-transform: none; transform: none; background-position: 0 -80px; top: 8px; right: 1px;
} }@media only screen and (min-width:768px) and (max-width:959px) {
.container { width: 768px;
} .container.short {
width: 748px;
} .container .column, .container .columns {
margin-left: 10px; margin-right: 10px;
} .column.alpha, .columns.alpha {
margin-left: 0; margin-right: 10px;
} .column.omega, .columns.omega {
margin-right: 0; margin-left: 10px;
} .alpha.omega {
margin-left: 0; margin-right: 0;
} .container .one.column, .container .one.columns {
width: 28px;
} .container .two.columns {
width: 76px;
} .container .three.columns {
width: 124px;
} .container .four.columns {
width: 172px;
} .container .five.columns {
width: 220px;
} .container .six.columns {
width: 268px;
} .container .seven.columns {
width: 316px;
} .container .eight.columns {
width: 364px;
} .container .nine.columns {
width: 412px;
} .container .ten.columns {
width: 460px;
} .container .eleven.columns {
width: 508px;
} .container .twelve.columns {
width: 556px;
} .container .thirteen.columns {
width: 604px;
} .container .fourteen.columns {
width: 652px;
} .container .fifteen.columns {
width: 700px;
} .container .sixteen.columns {
width: 748px;
} .container .one-third.column {
width: 236px;
} .container .two-thirds.column {
width: 492px;
} .container .offset-by-one {
padding-left: 48px;
} .container .offset-by-two {
padding-left: 96px;
} .container .offset-by-three {
padding-left: 144px;
} .container .offset-by-four {
padding-left: 192px;
} .container .offset-by-five {
padding-left: 240px;
} .container .offset-by-six {
padding-left: 288px;
} .container .offset-by-seven {
padding-left: 336px;
} .container .offset-by-eight {
padding-left: 384px;
} .container .offset-by-nine {
padding-left: 432px;
} .container .offset-by-ten {
padding-left: 480px;
} .container .offset-by-eleven {
padding-left: 528px;
} .container .offset-by-twelve {
padding-left: 576px;
} .container .offset-by-thirteen {
padding-left: 624px;
} .container .offset-by-fourteen {
padding-left: 672px;
} .container .offset-by-fifteen {
padding-left: 720px;
} .sticky #logo {
background-position: 0 -80px; top: 8px; left: 10px;
} .sticky #logo1 {
background-position: 0 -80px; top: 8px; right: 1px;
} nav a {
padding-left: 10px; padding-right: 10px;
}
- footer-contact {
width: 220px;
}
- footer-newsletter {
float: right; width: 280px;
} .mini-post {
width: 236px;
} .mini-post img {
width: 100%; height: auto;
}
- case-details .images {
width: auto; margin-left: 0;
}
- case-details .images img {
width: 100%}
- case-details .images.two img {
width: 350px;
}
- case-details, #meta .container, .single #page-header .container {
padding: 0 10px; width: 748px;
} .about .column-text {
padding: 0 15px;
}
- feature h1 {
font-size: 55px;
}
- page-header.case h1 {
font-size: 40px; line-height: 34px;
}
- page-header.case h2 {
max-width: 40%; line-height: 24px;
}
- blog-top #categories {
width: 220px;
}
- blog-top form {
width: 340px;
}
- blog-top #rss {
width: 100px;
} .container .seven.columns {
width: 400px;
} .single-work #page-header h2, .single-lab #page-header h2 {
font-weight: 500; font-size: 16px; line-height: 22px;
}
footer {
height: auto;
}
- wrap {
margin-bottom: 0; min-height: 0;
} .push {
display: none;
}
- copyright, #footer-social {
width: 150px; margin: 0!important;
}
- location-map {
display: none;
}
- contact {
height: auto;
}
- contact .container {
padding-top: 10px;
}
- contact #contact-details {
float: left; width: 340px;
}
- contact #message {
float: right; width: 400px;
}
- footer-nav {
width: 448px;
}
- processes {
margin: 0 30px;
} .process .text {
padding: 0 15px;
} .process p {
font-size: 13px; line-height: 18px;
} }@media only screen and (max-width:767px) {
.container, .container.short { width: 300px;
} .container .columns, .container .column {
margin: 0;
} .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column {
width: 300px;
} .container .offset-by-one, .container .offset-by-two, .container .offset-by-three, .container .offset-by-four, .container .offset-by-five, .container .offset-by-six, .container .offset-by-seven, .container .offset-by-eight, .container .offset-by-nine, .container .offset-by-ten, .container .offset-by-eleven, .container .offset-by-twelve, .container .offset-by-thirteen, .container .offset-by-fourteen, .container .offset-by-fifteen {
padding-left: 0;
} .sticky #logo {
background-position: 0 -80px; top: 8px; left: 10px;
} .sticky #logo1 {
background-position: 0 -80px; top: 8px; right: 1px;
}
- feature {
height: 250px;
}
- feature article, #feature ul {
display: none!important;
}
- feature h1 {
top: 100px; font-size: 36px; line-height: 42px;
}
- home-content, #home-content .column, .mini-post {
width: auto; float: none!important; display: block;
}
- home-content .column {
margin: 0 0 40px;
} .mini-post {
margin: 0 auto 20px; width: 290px;
}
- tweet {
padding: 40px 0 0 0; margin: 40px 0; width: auto;
}
- tweet .text {
padding: 40px 20px 0; background-position: center top;
} nav a {
padding-left: 6px; padding-right: 6px; font-size: 12px;
}
- work article {
width: 30%; margin: 10px;
}
- work article .image, #work article a img, .labs#work article .image {
width: 100%; height: auto;
}
- case-details .images {
width: auto; margin-left: 0;
}
- case-details .images img, #case-details .images.two img {
width: 100%; margin: 0 0 20px!important;
}
- page-header.case h1 {
font-size: 30px; line-height: 28px; max-width: 55%}
- page-header.case h2 {
max-width: 50%; line-height: 24px;
} .labs #page-header h1 {
font-size: 46px;
}
- meta p {
float: right; margin: 0;
}
- meta p:first-child {
width: 50%; float: left;
}
- work-with-us {
font-size: 18px;
}
- blog-top #categories {
margin-bottom: 15px;
}
- blog-top form {
width: 200px;
}
- blog-top input {
width: 170px;
}
- blog-top #rss {
width: 80px; float: right;
}
- blog article img {
width: 100%; height: auto;
}
- blog article {
margin-bottom: 30px;
}
- blog article iframe {
height: 270px;
}
- blog article .post h2 {
font-size: 20px; line-height: 22px;
}
- blog .share {
display: none;
} .short-url {
margin-bottom: 5px;
} .categories {
float: left;
} .content h2 {
font-size: 30px; line-height: 38px;
} .content p {
font-size: 14px; line-height: 22px; font-weight: 500;
}
footer {
height: auto;
}
- wrap {
margin-bottom: 0; min-height: 0;
} .push {
display: none;
}
- processes {
margin: 0 20px;
} .process .text {
padding: 0 10px;
} .process p {
font-size: 12px; line-height: 16px;
} }@media only screen and (min-width:480px) and (max-width:767px) {
.container, .container.short { width: 420px;
} .container .columns, .container .column {
margin: 0;
} .container .one.column, .container .one.columns, .container .two.columns, .container .three.columns, .container .four.columns, .container .five.columns, .container .six.columns, .container .seven.columns, .container .eight.columns, .container .nine.columns, .container .ten.columns, .container .eleven.columns, .container .twelve.columns, .container .thirteen.columns, .container .fourteen.columns, .container .fifteen.columns, .container .sixteen.columns, .container .one-third.column, .container .two-thirds.column {
width: 420px;
}
- footer-newsletter input {
width: 360px;
}
- blog-top form {
width: 300px;
}
- blog-top input {
width: 270px;
}
- blog-top #rss {
width: 100px; float: right;
} .categories {
float: right;
} .column-text {
-moz-column-count: 1; -webkit-column-count: 1; column-count: 1;
} }@media only screen and (min-width:320px) and (max-width:580px) {
#logo, .sticky #logo { background-position: 0 -80px; top: 10px; left: 10px;
}
#logo1, .sticky #logo1 { background-position: 0 -80px; top: 10px; right: 1px;
} header, header.sticky {
height: 100px;
} .sticky nav, nav {
margin-top: 64px;
} nav a {
padding-left: 5px; padding-right: 5px;
}
- feature h1 {
top: 120px; font-size: 22px; line-height: 30px;
}
- tweet .text p {
font-size: 20px; line-height: 24px;
}
- work article {
width: 45%; margin: 6px;
}
- page-header {
height: 200px;
}
- page-header h1 {
font-size: 34px;
} .labs #page-header h1 {
font-size: 25px;
}
- page-header.case h2 {
font-size: 16px; font-weight: 500; line-height: 20px;
}
- work-with-us {
font-size: 15px; text-align: center;
}
- work-with-us span {
background-image: none;
}
- contact #message input, #contact #message textarea {
width: 200px; max-width: 200px;
}
- fresh ul {
display: none;
}
- blog article iframe {
height: 200px;
}
- process {
display: none;
} }.container:after {
content: "\0020"; display: block; height: 0; clear: both; visibility: hidden;
}