Team:Shenzhen BGIC 0101/style

From 2013.igem.org

Revision as of 23:49, 25 October 2013 by Table (Talk | contribs)


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

}

  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 {

   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;

}

  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;

}


footer {

   height: auto;

}

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

} .push {

   display: none;

}

  1. processes {
   margin: 0 20px;

} .process .text {

   padding: 0 10px;

}

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

}


  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;

}

  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;

}