Team:Shenzhen BGIC 0101/style

From 2013.igem.org

Revision as of 08:02, 20 October 2013 by Czh (Talk | contribs)

@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%}
  1. wrap { 
  //background: url(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: #993399;
   border: 0;
   box-shadow: 0 1px 6px rgba(0, 0, 0, .2);

} header h1 { 

   margin: 0;

}

  1. logo { 
   width: 84px;
   height: 59px;
   display: block;
   background: url(Genovo-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;

}

  1. logo1{ 
   width: 80px;
   height: 60px;
   display: block;
   background: url(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;

}

  1. blog { 
   z-index: 6;

}

  1. blog article { 
   margin: 10px auto 60px;
   max-width: 700px;
   position: relative;

}


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

}

  1. home-content .column, #fresh { 
   border-top: 1px solid #d0d0d0;

}

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

}

  1. tweet { 
   margin: 40px auto;
   padding-top: 40px;
   border-top: 1px solid #d0d0d0;

}

  1. tweet .text { 
   padding: 0 90px;
   background: url(art/bird.svg) no-repeat 35px 0;
   font-size: 26px;
   font-weight: 300;

}

  1. tweet .text p { 
   margin: 0 0 10px;
   text-align: center;
   line-height: 36px;

}

  1. tweet .text p.author { 
   font-size: 20px;

}

  1. page-header { 
   width: auto;
 //  height: 220px;
   //background: url(Test-head.jpg) top center;
   margin: 0 0 35px;
   box-shadow: 2px 1px 12px #272727;

} .wf-loading #page-header h1 { 

   visibility: hidden;

}

.blog #page-header { 

  // background: url(Test-head.jpg) top center;

}

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

}

  1. blog { 
   z-index: 6;

}

  1. blog article { 
   margin: 10px auto 60px;
   max-width: 1200px;
   position: relative;

}

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

}

  1. blog article .post .text { 
   padding: 20px 20px 10px;

} .post-content a { color: #2683a5; } .post-content a:hover { color: #4ea9a2; }

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

}

  1. blog article .post h3 { 
   font-size: 14px;
   line-height: 18px;
   text-transform: uppercase;
   font-weight: 700;

}

  1. blog article .post .meta { 
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;

}

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

}

  1. blog article.quote { 
   max-width: 940px;

}

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

}

  1. blog article.quote .quote-content p { 
   font-size: 26px;
   line-height: 32px;
   color: #eee;
   font-weight: 300;

}

  1. blog article.quote p.ref { 
   color: #fff;
   padding: 0;
   margin: 0;

}

  1. blog article.quote .quote-content a { 
   color: #fff;
   text-decoration: underline;

}

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

}

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

}

  1. disqus_thread h3 { 
   font-size: 14px;
   text-transform: uppercase;
   text-shadow: 0 1px 0 #fff;
   font-weight: 600;

}

  1. contact { 
   position: relative;
   height: 940px;

}

  1. location-map { 
   width: 100%;
   height: 940px;
   display: block;
   position: absolute;
   top: 0;

}

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

}

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

}

  1. phone-address, #work-planner { 
   padding: 30px 40px;

}

  1. phone-address { 
   border-bottom: 1px solid #565656;

}

  1. phone-address p, #work-planner h2, #message h2 { 
   text-transform: uppercase;
   color: #fff;
   font-weight: 600;
   font-size: 14px;

}

  1. phone-address p { 
   padding-left: 35px;

}

  1. phone-address p#phone { 
   background: url(art/phone.png) no-repeat 2px 2px;

}

  1. phone-address p#address { 
   background: url(art/map.png) no-repeat 2px 2px;
   margin: 0;

}

  1. work-planner h2, #message h2 { 
   margin: 0 0 10px;
   line-height: normal;

}

  1. work-planner p { 
   color: #9c9c9c;
   font-size: 13px;
   font-weight: 600;

}

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

}

  1. work-planner a:hover { 
   background-color: #4ea9a2;

}

  1. contact #message .wrapper { 
   padding: 30px 40px;

}

  1. contact #message .field { 
   display: block;
   position: relative;
   margin: 0 0 15px;

}

  1. contact #message label { 
   position: absolute;
   top: 9px;
   left: 11px;
   color: #aaa;
   font-size: 13px;
   font-weight: 500;

}

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

}

  1. contact #message textarea { 
   height: 80px;

}

  1. contact #message input:focus, #contact #message textarea:focus { 
   background: #111;
   outline: 0;

}

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

}

  1. contact #message button:hover { 
   background-color: #666;

} .contact footer { 

   margin: 0;

} footer { 

   padding: 35px 0 20px;
   background: #003399;
   height: 190px;

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;

}

  1. footer-contact p { 
   margin-right: 40px;
   float: left;

}

  1. footer-project p { 
   max-width: 180px;

}

  1. footer-newsletter { 
   position: relative;

}

  1. footer-newsletter p { 
   position: absolute;
   font-size: 11px;
   top: 0;
   right: 0;
   color: #7c7c7c;

}

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

}

  1. footer-newsletter input:focus { 
   outline: 0;
   background: #333;

}

  1. footer-newsletter label { 
   position: absolute;
   top: 49px;
   left: 10px;
   color: #a5a5a5;
   font-size: 12px;

}

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

}

  1. footer-newsletter button:hover { 
   background-color: #333;

}

  1. footer-final { 
   margin: 15px auto;
   padding-top: 35px;
   border-top: 1px solid #313131;
   position: relative;

}

  1. footer-final a, #footer-final a:visited { 
   color: #aaa;

}

  1. footer-final a:hover { 
   color: #fff;

}

  1. footer-final p { 
   font-weight: 600;
   font-size: 12px;
   display: block;
   margin: 0;

}

  1. footer-nav { 
   text-align: center;

}

  1. footer-nav a { 
   margin: 0 8px;

}

  1. footer-final p#footer-social { 
   text-align: right;
   margin-left: 40px;

}

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

}

  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;

}

  1. feature h1 { 
   font-size: 55px;

}

  1. page-header.case h1 { 
   font-size: 40px;
   line-height: 34px;

}

  1. page-header.case h2 { 
   max-width: 40%;
   line-height: 24px;

}

  1. blog-top #categories { 
   width: 220px;

}

  1. blog-top form { 
   width: 340px;

}

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

}

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

}

  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;

} nav a { 

   padding-left: 6px;
   padding-right: 6px;
   font-size: 12px;

}

  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 p { 
   float: right;
   margin: 0;

}

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

}

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

}

  1. blog-top #categories { 
   margin-bottom: 15px;

}

  1. blog-top form { 
   width: 200px;

}

  1. blog-top input { 
   width: 170px;

}

  1. blog-top #rss { 
   width: 80px;
   float: right;

}

  1. blog article img { 
   width: 100%;
   height: auto;

}

  1. blog article { 
   margin-bottom: 30px;

}

  1. blog article iframe { 
   height: 270px;

}

  1. blog article .post h2 { 
   font-size: 20px;
   line-height: 22px;

}

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

}

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

} .push { 

   display: none;

}

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

}

  1. footer-newsletter input { 
   width: 360px;

}

  1. blog-top form { 
   width: 300px;

}

  1. blog-top input { 
   width: 270px;

}

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

}

  1. feature h1 { 
   top: 120px;
   font-size: 22px;
   line-height: 30px;

}

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

}

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

}

  1. page-header { 
   height: 200px;

}

  1. page-header h1 { 
   font-size: 34px;

} .labs #page-header h1 { 

   font-size: 25px;

}

  1. page-header.case h2 { 
   font-size: 16px;
   font-weight: 500;
   line-height: 20px;

}

  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;

}

  1. fresh ul { 
   display: none;

}

  1. blog article iframe { 
   height: 200px;

}

  1. process { 
   display: none;

} }.container:after { 

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

}

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