Team:Shenzhen BGIC 0101/style

From 2013.igem.org

(Difference between revisions)
 
(12 intermediate revisions not shown)
Line 1: Line 1:
-
@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(https://static.igem.org/mediawiki/2013/f/f4/Gene.jpg) no-repeat fixed;
 
-
background-size:cover;
 
-
    margin-bottom: -245px;
 
-
    min-height: 100%;
 
-
    height: auto!important;
 
-
    height: 100%}
 
-
.push {
 
-
    height: 245px;
 
-
}
 
-
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: #262626;
 
-
    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(https://static.igem.org/mediawiki/igem.org/b/bd/0101_logo.png) 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(https://static.igem.org/mediawiki/2013/d/dd/Igem_logo12.png) 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 {
.mini-post {
     float: left;
     float: left;
Line 232: Line 36:
     font-weight: 600;
     font-weight: 600;
}
}
-
#tweet {
+
<!--#tweet {
     margin: 40px auto;
     margin: 40px auto;
     padding-top: 40px;
     padding-top: 40px;
Line 283: Line 87:
}
}
#blog article .post {
#blog article .post {
-
     background: #fff;
+
     background: #cf9;
  //  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4);
  //  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .4);
     box-shadow: 2px 1px 6px #272727;
     box-shadow: 2px 1px 6px #272727;
Line 327: Line 131:
font-family: Trebuchet MS;
font-family: Trebuchet MS;
font-weight: 600;
font-weight: 600;
 +
color: #000;
}
}
.short-url, .share, .categories {
.short-url, .share, .categories {
Line 449: Line 254:
     font-weight: 600;
     font-weight: 600;
}
}
-
#contact {
+
 
-
    position: relative;
+
-
    height: 940px;
+
-
}
+
#location-map {
#location-map {
     width: 100%;
     width: 100%;
Line 577: Line 379:
footer {
footer {
     padding: 35px 0 20px;
     padding: 35px 0 20px;
-
     background: #101010;
+
     background: #003399;
-
     height: 190px;
+
     height: 130px;
box-shadow: 4px 3px 25px #000;
box-shadow: 4px 3px 25px #000;
}
}
Line 698: Line 500:
     font-size: 12px;
     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 {
.success {
     color: #a5a5a5;
     color: #a5a5a5;
Line 737: Line 524:
     margin: 5px auto 5px auto;
     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 {
.wp-caption {
     background: #fff;
     background: #fff;
Line 802: Line 574:
     float: right;
     float: right;
     width: 30%}
     width: 30%}
 +
-->
.container {
.container {
     position: relative;
     position: relative;
Line 1,152: Line 925:
     padding: 0 15px;
     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 {
.container .seven.columns {
     width: 400px;
     width: 400px;
Line 1,221: Line 976:
     padding: 0 15px;
     padding: 0 15px;
}
}
-
.process p {
+
.process {
     font-size: 13px;
     font-size: 13px;
     line-height: 18px;
     line-height: 18px;
Line 1,280: Line 1,035:
     background-position: center top;
     background-position: center top;
}
}
-
nav a {
+
 
-
    padding-left: 6px;
+
-
    padding-right: 6px;
+
-
    font-size: 12px;
+
-
}
+
#work article {
#work article {
Line 1,313: Line 1,064:
     font-size: 46px;
     font-size: 46px;
}
}
-
#meta p {
+
#meta {
     float: right;
     float: right;
     margin: 0;
     margin: 0;
Line 1,324: Line 1,075:
     font-size: 18px;
     font-size: 18px;
}
}
-
#blog-top #categories {
+
<!--#blog-top #categories {
     margin-bottom: 15px;
     margin-bottom: 15px;
}
}
Line 1,360: Line 1,111:
     float: left;
     float: left;
}
}
-
.content h2 {
+
 
-
    font-size: 30px;
+
-
    line-height: 38px;
+
-
}
+
-
.content p {
+
-
    font-size: 14px;
+
-
    line-height: 22px;
+
-
    font-weight: 500;
+
-
}
+
footer {
footer {
Line 1,386: Line 1,129:
     padding: 0 10px;
     padding: 0 10px;
}
}
-
.process p {
+
 
-
    font-size: 12px;
+
-
    line-height: 16px;
+
-
}
+
}@media only screen and (min-width:480px) and (max-width:767px) {
}@media only screen and (min-width:480px) and (max-width:767px) {
     .container, .container.short {
     .container, .container.short {
Line 1,412: Line 1,152:
     width: 100px;
     width: 100px;
     float: right;
     float: right;
-
}
+
}-->
.categories {
.categories {
     float: right;
     float: right;
Line 1,438: Line 1,178:
     margin-top: 64px;
     margin-top: 64px;
}
}
-
nav a {
+
 
-
    padding-left: 5px;
+
 
-
    padding-right: 5px;
+
-
}
+
-
#feature h1 {
+
-
    top: 120px;
+
-
    font-size: 22px;
+
-
    line-height: 30px;
+
-
}
+
#tweet .text p {
#tweet .text p {
     font-size: 20px;
     font-size: 20px;
Line 1,458: Line 1,191:
     height: 200px;
     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 {
#work-with-us {
     font-size: 15px;
     font-size: 15px;
Line 1,480: Line 1,203:
     max-width: 200px;
     max-width: 200px;
}
}
-
#fresh ul {
+
<!--#fresh ul {
     display: none;
     display: none;
}
}
Line 1,488: Line 1,211:
#process {
#process {
     display: none;
     display: none;
-
}
+
}-->
}.container:after {
}.container:after {
     content: "\0020";
     content: "\0020";

Latest revision as of 00:25, 26 October 2013

.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;

} .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;

}

  1. 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;

}

  1. footer-contact { 
   width: 220px;

}

  1. footer-newsletter { 
   float: right;
   width: 280px;

} .mini-post { 

   width: 236px;

} .mini-post img { 

   width: 100%;
   height: auto;

}

  1. case-details .images { 
   width: auto;
   margin-left: 0;

}

  1. case-details .images img { 
   width: 100%}
  1. case-details .images.two img { 
   width: 350px;

}

  1. case-details, #meta .container, .single #page-header .container { 
   padding: 0 10px;
   width: 748px;

} .about .column-text { 

   padding: 0 15px;

}


.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;

}

  1. wrap { 
   margin-bottom: 0;
   min-height: 0;

} .push { 

   display: none;

}

  1. copyright, #footer-social { 
   width: 150px;
   margin: 0!important;

}

  1. location-map { 
   display: none;

}

  1. contact { 
   height: auto;

}

  1. contact .container { 
   padding-top: 10px;

}

  1. contact #contact-details { 
   float: left;
   width: 340px;

}

  1. contact #message { 
   float: right;
   width: 400px;

}

  1. footer-nav { 
   width: 448px;

}

  1. processes { 
   margin: 0 30px;

} .process .text { 

   padding: 0 15px;

} .process { 

   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;

}

  1. feature { 
   height: 250px;

}

  1. feature article, #feature ul { 
   display: none!important;

}

  1. feature h1 { 
   top: 100px;
   font-size: 36px;
   line-height: 42px;

}

  1. home-content, #home-content .column, .mini-post { 
   width: auto;
   float: none!important;
   display: block;

}

  1. home-content .column { 
   margin: 0 0 40px;

} .mini-post { 

   margin: 0 auto 20px;
   width: 290px;

}

  1. tweet { 
   padding: 40px 0 0 0;
   margin: 40px 0;
   width: auto;

}

  1. tweet .text { 
   padding: 40px 20px 0;
   background-position: center top;

}


  1. work article { 
   width: 30%;
   margin: 10px;

}

  1. work article .image, #work article a img, .labs#work article .image { 
   width: 100%;
   height: auto;

}

  1. case-details .images { 
   width: auto;
   margin-left: 0;

}

  1. case-details .images img, #case-details .images.two img { 
   width: 100%;
   margin: 0 0 20px!important;

}

  1. page-header.case h1 { 
   font-size: 30px;
   line-height: 28px;
   max-width: 55%}
  1. page-header.case h2 { 
   max-width: 50%;
   line-height: 24px;

} .labs #page-header h1 { 

   font-size: 46px;

}

  1. meta { 
   float: right;
   margin: 0;

}

  1. meta p:first-child { 
   width: 50%;
   float: left;

}

  1. work-with-us { 
   font-size: 18px;

} .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;

}


  1. tweet .text p { 
   font-size: 20px;
   line-height: 24px;

}

  1. work article { 
   width: 45%;
   margin: 6px;

}

  1. page-header { 
   height: 200px;

}

  1. work-with-us { 
   font-size: 15px;
   text-align: center;

}

  1. work-with-us span { 
   background-image: none;

}

  1. contact #message input, #contact #message textarea { 
   width: 200px;
   max-width: 200px;

} }.container:after { 

   content: "\0020";
   display: block;
   height: 0;
   clear: both;
   visibility: hidden;

}

Retrieved from "http://2013.igem.org/Team:Shenzhen_BGIC_0101/style"