Team:Tsinghua-A/Wetlab

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{:Team:Tsinghua-A/template/killbanner}}
+
/*
-
{{:Team:Tsinghua-A/template/top}}
+
-
<html lang="en">
+
-
<head>
+
-
<meta charset="utf-8">
+
-
<title>Tsinghua-A Wetlab</title>
+
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
-
<meta name="description" content="">
+
-
<meta name="author" content="">
+
-
<!-- css -->
+
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Tsinghua-A/css/buttonhome.css?action=raw&ctype=text/css"/>
+
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Tsinghua-A/css/color.css?action=raw&ctype=text/css"/>
+
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Tsinghua-A/css/style.css?action=raw&ctype=text/css"/>
+
-
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:Tsinghua-A/css/bs.css?action=raw&ctype=text/css"/>
+
-
   
+
-
<style type="text/css">
+
-
  .paging {
+
-
  text-align: center;
+
-
  }
+
-
  .paging span {
+
-
  text-decoration: none;
+
-
  color: silver;
+
-
  cursor: pointer;
+
-
  }
+
-
  .paging span.active {
+
-
  font-size: 2em;
+
-
  color: black;
+
-
  }
+
-
  .paging2 span {
+
Maxim one page bootstrap template
-
  font-size: 2em;
+
@2013 by iWebStudio
-
  }
+
-
</style>
+
-
+
-
</head>
+
-
<body>
+
/*
-
<!-- head -->
+
===========================
-
<section class="section green1">
+
CONTENTS:
-
<div class="container">
+
-
<div class="row">
+
-
<ul class="ch-grid">
+
01 General
-
    <li>
+
02 Typography
-
        <div class="ch-item ch-img-1">
+
03 Non-semantic
-
            <div class="ch-info">
+
04 Navbar
-
                <h3><a href="#about">Overview</a></h3>
+
05 Page sections
-
               
+
06 Footer
-
            </div>
+
07 Icons
-
        </div>
+
08 Buttons
-
    </li>
+
09 Media queries
-
    <li>
+
===========================
-
        <div class="ch-item ch-img-2">
+
*/
-
            <div class="ch-info">
+
/* Import css */
-
                <h3><a href="#life">Construction</a></h3>
+
/* Google font */
-
               
+
@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');
-
            </div>
+
/* bootstrap */
-
        </div>
+
@import url('bootstrap.css');
-
    </li>
+
/* bootstrap responsive */
-
    <li>
+
@import url('bootstrap-responsive.css');
-
        <div class="ch-item ch-img-3">
+
/* prettyPhoto */
-
            <div class="ch-info">
+
@import url('prettyPhoto.css');
-
                <h3><a href="#projects">Supplementary text</a></h3>
+
/* flexslider */
-
               
+
@import url('flexslider.css');
-
            </div>
+
-
        </div>
+
-
    </li>
+
-
<li>
+
/* font awesome */
-
        <div class="ch-item ch-img-3">
+
@import url('font-awesome.css');
-
            <div class="ch-info">
+
/* overwrite */
-
                <h3><a href="#publications">Experimental Characterization</a></h3>
+
@import url('overwrite.css');
-
               
+
/* animation */
-
            </div>
+
@import url('animate.css');
-
        </div>
+
-
    </li>
+
-
<li>
 
-
        <div class="ch-item ch-img-3">
 
-
            <div class="ch-info">
 
-
                <h3><a href="#contact">Discussion</a></h3>
 
-
               
 
-
            </div>
 
-
        </div>
 
-
    </li>
 
-
</ul>
 
-
</div>
+
/* =========================================================
-
</section>
+
01. General
-
<!-- overview -->
+
============================================================ */
-
<section id="overview" class="section green2">
+
div, article, section, header, footer, nav, li {
 +
position:relative;
 +
}
 +
.group:after {
 +
display:block;
 +
height:0;
 +
clear:both;
 +
content:".";
 +
visibility:hidden; /* For clearing */
 +
}
 +
body {
 +
background:#fff;
 +
color: #444;
 +
font-size: 16px;
 +
font-weight:300;
 +
font-family:'Open Sans', Arial, sans-serif;
 +
}
-
<div class="container">
+
body {
-
<h4>Overview</h4>
+
    padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
-
<div class="row">
+
}
-
<div class="span6 offset1">
+
-
<div>
+
-
<p style="text-align:justify">
+
-
Based on modeling work, we find that negative feedback can contribute to the network’s adaptation to DNA copy number variation. So we analysed the following three-node networks, A and B. The difference between A and B is the output nodes of network A has negative feedback.
+
-
                    </br>
+
-
We transfected this two circuits into mammalian cells (Hela cell). By testing the mean value of EYFP (Enhance Yellow Fluorescent Protein, the output of our circuits), and the relationship between the EYFP and the DNA copy number, we can prove the hypothesis.
+
-
</p>
+
-
</div>
+
-
</div>
+
-
<div class="span4">
+
-
<div class="aligncenter">
+
-
<img src="https://static.igem.org/mediawiki/2013/6/65/Extu1.png" alt="" />
+
-
<img src="https://static.igem.org/mediawiki/2013/3/31/Extu2.png" alt="" />
+
-
</div>
+
-
</div>
+
-
</div>
+
-
+
-
</div>
+
-
<!-- /.container -->
+
-
</section>
+
-
<!-- end section: team -->
+
-
<!-- section: life -->
+
::-moz-selection {
-
<section id="construction" class="section green3">
+
color:#333;
-
<div class="container">
+
}
-
<h4>Construction </h4>
+
::selection {
-
<div class="row">
+
color:#333;
-
<div class="span6 offset1">
+
}
-
<div>
+
 
-
<p style="text-align:justify">
+
/* scroll to top */
-
We constructed the following circuit A ,B and C .The circuit A corresponds to the network A ,while the circuit B is the implementation of network B. Circuit C is used as a control design to testify the function of A and B.
+
.scrollup{
-
</br>
+
    position:fixed;
-
In circuit A, as we can see, the input is miR-21, which can repress the plasmid pz371 and K1116002(The plasmid’s information can be found in parts). K1116002 induced by rtTA and Dox, serves as an auxiliary node, producing the LacI gene to inhibit the expression of EYFP. EYFP(Enhance Yellow Fluorescent Protein )is used as output. Besides, the miR-FF3 restrains the expression of LacI. The reason that we get the most of post-transcriptional control can be seen in Supplementary text.
+
width:32px;
-
</br>
+
height:32px;
-
                In circuit B, however, the plasmid K1116003 does not have FF3 target, leading to the contrast between circuit A and B. We can see miR-21 can’t target at pZ349 and pZ331 in circuit C , that is, there is no input in circuit C. The miR-21, used to distinguish cancer cell from normal cells ,is endogenous in Hela cell.
+
    bottom:20px;
-
                </br>
+
    right:20px;
-
</br>
+
}
-
<b>Supplementary text</b>
+
 
-
</br>
+
a.scrollup {
-
<p style="font-size:80%"/>
+
outline:0;
-
miRNAs function as posttranscriptional regulators which have distinguished features compared to transcriptional regulators, intervening late in gene expression process, with the capability to counteract variation from the upstream processes (Margaret et al., 2012). Research shows that while conducting experiment on an incoherent feedforward motif in mammalian cells, posttranscriptional regulation results in superior adaptation behavior, higher absolute expression levels and lower intrinsic fluctuations (Bleris et al., 2011). miRNAs can serve as buffers against variation during gene expression; transient increases in transcription factor activity would propagate to increases in target miRNA transcription while would be counteracted by increased miRNA and vice versa. Therefore, under the miRNA posttranscriptional regulation, protein output can be uncoupled from fluctuations in transcription factor concentration or activity (Margaret et al., 2012). miRNAs also possess good stability which, consistent with theoretical constraints, meets the need for enough molecules of a regulator to achieve a small reduction in the noise of a target gene (Lestas et al., 2010).  
+
text-decoration:none;
-
</p>
+
}
-
</p>
+
 
-
</div>
+
a.scrollup:hover,a.scrollup:active,a.scrollup:focus {
-
</div>
+
opacity:1;
-
<div class="span4">
+
text-decoration:none;
-
<div class="aligncenter">
+
-webkit-transition: all 400ms ease-out 0s;
-
<img src="https://static.igem.org/mediawiki/2013/4/41/Extu3.png" alt="" style="width:304px"/>
+
  -moz-transition: all 400ms ease-out 0s;
-
<img src="https://static.igem.org/mediawiki/2013/e/eb/Extu4.png" alt="" style="width:304px"/>
+
-o-transition: all 400ms ease-out 0s;
-
<img src="https://static.igem.org/mediawiki/2013/b/bd/Extu5.png" alt="" style="width:304px"/>
+
    transition: all 400ms ease-out 0s;
-
</div>
+
}
-
</div>
+
a.scrollup i:hover {
-
</div>
+
text-decoration:none;
 +
}
 +
 
 +
.blankdivider10 {
 +
height: 10px;
 +
display: block;
 +
}
 +
 
 +
.blankdivider20 {
 +
height: 20px;
 +
display: block;
 +
}
 +
.blankdivider30 {
 +
height: 30px;
 +
display: block;
 +
}
 +
 
 +
.row {
 +
margin-bottom:30px;
 +
}
 +
 
 +
.row .row{
 +
margin-bottom:30px;
 +
}
 +
 
 +
.row.nomargin {
 +
margin-bottom:0;
 +
}
 +
 
 +
 
 +
/*---------- forms ----------*/
 +
 
 +
input[type=text], input[type=submit], textarea {
 +
width: 100%;
 +
padding: 0.5em;
 +
font-size: 1em;
 +
margin-bottom: 1.5em;
 +
box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
}
 +
input, button, select, textarea {
 +
font-family:'Open Sans', Arial, sans-serif;
 +
}
 +
/* =========================================================
 +
02. Typography
 +
============================================================ */
 +
 
 +
p {
 +
line-height: 1.6em;
 +
margin: 0 0 10px 0;
 +
}
 +
 
 +
blockquote {
 +
font-size:18px;
 +
border:none;
 +
padding:0;
 +
}
 +
 
 +
blockquote.large {
 +
font-size:36px;
 +
font-weight:700;
 +
line-height:1.1em;
 +
}
 +
blockquote.large:before {
 +
font-size:64px;
 +
font-family: FontAwesome;
 +
content: "\f10d";
 +
margin-right:20px;
 +
}
 +
 
 +
blockquote cite { display:block; font-size:12px;}
 +
blockquote cite:before { content:"\2014 \0020"; }
 +
blockquote cite a,
 +
blockquote cite a:visited,
 +
blockquote cite a:visited { color:#555; }
 +
 
 +
ul, ol {
 +
font-size: 1em; /* 16px */
 +
line-height: 1.5; /* 24px */
 +
margin: 0 0 1.5em 0;
 +
}
 +
body, input, textarea {
 +
}
 +
 
 +
a {
 +
  color: #454545;
 +
  text-decoration: none;
 +
}
 +
 
 +
a:hover, a:active {
 +
text-decoration: underline;
 +
}
 +
h1, h2, h3, h4, h5, h6 {
 +
font-weight: 400;
 +
color: #312f2b;
 +
line-height:1.1em;
 +
font-family:'Open Sans', Arial, sans-serif;
 +
}
 +
h1 {
 +
font-size: 36px;
 +
margin-bottom:20px;
 +
}
 +
h2 {
 +
font-size: 30px;
 +
margin-bottom:20px;
 +
}
 +
h3 {
 +
font-size: 26px;
 +
margin-bottom:20px;
 +
}
 +
h4 {
 +
font-size: 22px;
 +
margin-bottom:20px;
 +
}
 +
h5 {
 +
font-size: 18px;
 +
margin-bottom:15px;
 +
}
 +
h6 {
 +
font-size: 16px;
 +
margin-bottom:10px;
 +
}
 +
strong {
 +
font-weight:700;
 +
font-family: 'Open Sans', sans-serif;
 +
}
 +
small {
 +
font-size: 0.75em; /* 12px */
 +
line-height: 2; /* 24px */
 +
margin-top: 2em;
 +
margin-bottom: 0em;
 +
}
 +
em {
 +
font-style: normal;
 +
font-family: 'Open Sans';
 +
}
 +
.muted {
 +
color: #A5A5A2;
 +
}
 +
.impressed {
 +
text-shadow:
 +
-1px -1px 0 rgba(0, 0, 0, 0.5), /* shadow */  1px 1px 0 rgba(255, 255, 255, 0.9); /* highlight */
 +
}
 +
 
 +
h2.pagetitle {
 +
color:#fff;
 +
font-size:46px;
 +
}
 +
 
 +
/* =========================================================
 +
03. Misc
 +
============================================================ */
 +
 
 +
.hide-text {
 +
text-indent: 100%;
 +
white-space: nowrap;
 +
overflow: hidden;
 +
font-size: 1em;
 +
}
 +
.alignright {
 +
text-align: right;
 +
}
 +
.alignleft {
 +
text-align: left;
 +
}
 +
.aligncenter {
 +
text-align: center;
 +
vertical-align: middle;
 +
}
 +
.medium {
 +
font-weight: normal;
 +
}
 +
 
 +
/* =========================================================
 +
04. Navigation
 +
============================================================ */
 +
 
 +
.navbar-fixed-top .container {
 +
/* Uncomment to make nav expand full width */
 +
/* width: auto; */
 +
}
 +
.navbar .brand {
 +
margin-left:0;
 +
padding: 0;
 +
margin-top: 1.05em;
 +
}
 +
.navbar .brand a {
 +
padding: 0;
 +
color: #fff;
 +
font-size: 1.75em;
 +
margin-left: 0;
 +
font-weight: 400;
 +
text-transform:uppercase;
 +
}
 +
.navbar .brand a:hover {
 +
text-decoration: none;
 +
transition: color .15s linear;
 +
-webkit-transition: color .15s linear;
 +
-moz-transition: color .15s linear;
 +
}
 +
.navbar .brand a:focus {
 +
outline: none;
 +
}
 +
.navbar-inner {
 +
min-height: 4.75em;
 +
}
 +
.navbar-inverse .navbar-inner {
 +
background-repeat: repeat;
 +
background-color: #0b333f;
 +
}
 +
.navbar-wrapper {
 +
overflow:hidden;
 +
}
 +
#menu-main {
 +
margin-top: 1.125em;
 +
}
 +
ul#menu-main > li > a {
 +
font-weight: 600;
 +
color: #fff;
 +
font-size:14px;
 +
text-transform:uppercase;
 +
}
 +
ul#menu-main > li > a:hover {
 +
padding: 9px 15px;
 +
border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
-moz-border-radius: 3px;
 +
}
 +
ul#menu-main > li > a:focus {
 +
outline:0;
 +
}
 +
 
 +
.navbar-inverse .brand, .navbar-inverse .nav > li > a {
 +
text-shadow: none;
 +
}
 +
 
 +
 
 +
/* =========================================================
 +
05. Page sections
 +
============================================================ */
 +
 
 +
/* === section header === */
 +
 
 +
#header-wrapper {
 +
width: 100%;
 +
min-height: 600px;
 +
margin-top: -60px;
 +
padding-top:160px;
 +
text-align:center;
 +
}
 +
 
 +
 
 +
#header-wrapper h1 {
 +
color: #FFFFFF;
 +
font-size: 4em;
 +
font-weight: 400;
 +
margin: 1em 0;
 +
}
 +
#header-wrapper h2 {
 +
color: #fff;
 +
font-family: 'Open Sans', sans serif;
 +
font-size: 2em;
 +
font-weight: normal;
 +
margin: 0.5em 0;
 +
text-shadow: 1px 1px 1px #333333;
 +
}
 +
 
 +
header .logo {
 +
text-align:center;
 +
margin-bottom:30px;
 +
}
 +
 
 +
/* --- Header slider --- */
 +
#header-wrapper.header-slider {
 +
background: #444 url(../img/bg/bg-1.jpg) no-repeat center center fixed;
 +
-webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover;
 +
}
 +
 
 +
#main-flexslider ul.slides li p {
 +
font-size: 72px;
 +
text-transform: uppercase;
 +
position: relative;
 +
margin-bottom: 0px;
 +
text-align: center;
 +
line-height: 1;
 +
color:#fff;
 +
}
 +
#main-flexslider.flexslider {
 +
margin:0;
 +
background:none;
 +
border:none;
 +
-webkit-border-radius: 0;
 +
-moz-border-radius: 0;
 +
-o-border-radius: 0;
 +
border-radius: 0;
 +
box-shadow: none;
 +
-webkit-box-shadow: none;
 +
-moz-box-shadow: none;
 +
-o-box-shadow: none;
 +
}
 +
 
 +
 
 +
 
 +
/* --- Header subscribe form --- */
 +
 
 +
#header-wrapper input[type=text] {
 +
background: rgba(227, 231, 228, 1);
 +
font-family: 'Open Sans', sans serif;
 +
font-size: 1.3125em;
 +
border: 0;
 +
text-align: center;
 +
vertical-align: middle;
 +
margin-bottom:0 !important;
 +
}
 +
#header-wrapper input[type=text]:focus {
 +
background: #43413e;
 +
color: #eff1ef;
 +
transition: background 0.25 ease-in;
 +
-moz-transition: background 0.25 ease-in;
 +
-webkit-transition: background 0.25 ease-in;
 +
}
 +
#header-wrapper input[type=text] {
 +
height: 2.9em;
 +
width:50%;
 +
}
 +
#header-wrapper input[type=submit] {
 +
color: #fff;
 +
width: 185px;
 +
height: 2.9em;
 +
font-size: 1.3125em; /* 21px */
 +
padding:0.5em;
 +
letter-spacing: 0.05em;
 +
margin: 0;
 +
border: 0;
 +
text-transform: none;
 +
border-radius: 3px;
 +
-moz-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
}
 +
#header-wrapper input[type=submit]:hover, #header-wrapper input[type=submit]:active {
 +
background: #43413e !important;
 +
}
 +
 
 +
 
 +
section.section {
 +
padding: 100px 0 0px;
 +
}
 +
section.section h4 {
 +
text-align: center;
 +
margin-bottom: 40px;
 +
font-size: 46px;
 +
font-weight: 700;
 +
letter-spacing: -1px;
 +
}
 +
section.inner {
 +
padding: 50px 0 50px;
 +
}
 +
 
 +
 
 +
 
 +
.section.orange h4 ,.section.green1 h4,.section.green2 h4,.section.green3 h4,.section.green4 h4,.section.green5 h4,.section.green6 h4{
 +
color: #fcfcfc;
 +
}
 +
.section.orange p,.section.green1 p,.section.green2 p,.section.green3 p,.section.green4 p,.section.green5 p,.section.green6 p {
 +
color: #f7f7f7;
 +
}
 +
 
 +
 
 +
/* === section spacer === */
 +
 
 +
section.spacer {
 +
padding:90px 0 70px;
 +
color:#fcfcfc;
 +
}
 +
 
 +
.spacer.green1,.section.green1 {
 +
background:#1bac91;
 +
}
 +
.spacer.green1,.section.green1 h4 {
 +
color:#fff;
 +
}
 +
 
 +
.spacer.green2,.section.green2 {
 +
background:#38BE38;
 +
}
 +
.spacer.green2,.section.green2 h4 {
 +
color:#fff;
 +
}
 +
.spacer.green3,.section.green3 {
 +
background:#298B29;
 +
}
 +
.spacer.green3,.section.green3 h4 {
 +
color:#fff;
 +
}
 +
 
 +
.spacer.green4,.section.green4 {
 +
background:#007B00;
 +
}
 +
.spacer.green4,.section.green4 h4 {
 +
color:#fff;
 +
}
 +
.spacer.green5,.section.green5 {
 +
background:#007200;
 +
}
 +
.spacer.green5,.section.green5 h4 {
 +
color:#fff;
 +
}
 +
 
 +
.spacer.green6,.section.green6 {
 +
background:#005900;
 +
}
 +
.spacer.green6,.section.green6 h4 {
 +
color:#fff;
 +
}
 +
 
 +
.spacer.yellow,.section.yellow  {
 +
background:#ffe873;
 +
}
 +
.spacer.orange,.section.orange {
 +
background:#f36f36;
 +
}
 +
.spacer.wood,.section.wood  {
 +
background:#edb887;
 +
}
 +
.spacer.blue,.section.blue  {
 +
background:#CAE1FF;
 +
}
 +
 
 +
section.spacer.bg2 {
 +
background: url(../img/bg/bg-2.jpg) 50% 0 no-repeat fixed;
 +
width:100%;
 +
height:auto;
 +
margin:0;
 +
}
 +
 
 +
section.spacer.bg3 {
 +
background: url(../img/bg/bg-3.jpg) 50% 0 no-repeat fixed;
 +
width:100%;
 +
height:auto;
 +
margin:0;
 +
}
 +
 
 +
section.spacer blockquote.large:before {
 +
color:#eee;
 +
opacity:0.6;
 +
}
 +
 
 +
section.spacer blockquote cite {
 +
color:#555;
 +
}
 +
 
 +
 
 +
 
 +
/* === section works === */
 +
 
 +
#works h4 {
 +
margin-bottom:20px;
 +
}
 +
 
 +
#portfolio {
 +
padding-bottom: 0;
 +
}
 +
/* === portfolio filter === */
 +
 
 +
#filters {
 +
margin-bottom: 0px;
 +
text-align: center;
 +
display: block;
 +
float: none;
 +
z-index: 2;
 +
position: relative;
 +
}
 +
#filters ul {
 +
margin: 0 0 20px;
 +
list-style: none;
 +
padding: 0;
 +
}
 +
#filters ul li {
 +
display: inline-block;
 +
}
 +
#filters ul li a {
 +
display: block;
 +
float: left;
 +
padding: 2px 5px;
 +
color: inherit;
 +
margin-right: 5px;
 +
margin-bottom: 5px;
 +
font-weight: 600;
 +
}
 +
#filters ul li a:hover,#filters ul li a:focus {
 +
text-decoration:none;
 +
outline:0;
 +
}
 +
#filters ul li a h5 {
 +
font-size: 14px;
 +
padding: 5px 10px 5px;
 +
border: 2px solid #f2f2f2;
 +
}
 +
 
 +
#filters ul li a:hover h5, #filters ul li a.active h5 {
 +
color:#fcfcfc;
 +
}
 +
 
 +
/* === portfolio filter2 === */
 +
 
 +
#filters2 {
 +
margin-bottom: 0px;
 +
text-align: center;
 +
display: block;
 +
float: none;
 +
z-index: 2;
 +
position: relative;
 +
}
 +
#filters2 ul {
 +
margin: 0 0 20px;
 +
list-style: none;
 +
padding: 0;
 +
}
 +
#filters2 ul li {
 +
display: inline-block;
 +
}
 +
#filters2 ul li a {
 +
display: block;
 +
float: left;
 +
padding: 2px 5px;
 +
color: inherit;
 +
margin-right: 5px;
 +
margin-bottom: 5px;
 +
font-weight: 600;
 +
}
 +
#filters2 ul li a:hover,#filters2 ul li a:focus {
 +
text-decoration:none;
 +
outline:0;
 +
}
 +
#filters2 ul li a h5 {
 +
font-size: 14px;
 +
padding: 5px 10px 5px;
 +
border: 2px solid #f2f2f2;
 +
}
 +
 
 +
#filters2 ul li a:hover h5, #filters2 ul li a.active h5 {
 +
color:#fcfcfc;
 +
background:#ee6363;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/* === portfolio wrap - grid === */
 +
#portfolio-wrap {
 +
position: relative;
 +
padding: 0;
 +
width: 100.1%;
 +
margin: 0 auto;
 +
display: block;
 +
}
 +
#portfolio-wrap .grid {
 +
margin: 0;
 +
overflow: hidden;
 +
line-height: 0;
 +
width: 20%;
 +
border:0;
 +
padding: 0;
 +
}
 +
.portfolio-item.current {
 +
z-index: 101;
 +
}
 +
.portfolio-item {
 +
padding: 0;
 +
position: relative;
 +
overflow: hidden;
 +
}
 +
.portfolio-item .portfolio-image {
 +
overflow: hidden;
 +
display: block;
 +
position: relative;
 +
}
 +
.portfolio-item .portfolio-image img {
 +
width: 100%;
 +
height: auto;
 +
}
 +
.portfolio .portfolio-overlay {
 +
width: 100%;
 +
height: 100%;
 +
top: 0;
 +
left: 0;
 +
position: absolute;
 +
display: block;
 +
z-index: 4;
 +
opacity: 0;
 +
-moz-opacity: 0;
 +
filter: alpha(opacity=0);
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
-ms-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
}
 +
.portfolio > a, .portfolio > a:hover {
 +
color: #ffffff;
 +
}
 +
.portfolio-item .portfolio > a:hover > .portfolio-overlay {
 +
opacity: 0.5;
 +
-moz-opacity: 0.5;
 +
filter: alpha(opacity=50);
 +
}
 +
.portfolio > a img {
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
-ms-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
}
 +
.portfolio > a:hover img {
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
-ms-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
}
 +
.portfolio .thumb-info {
 +
position: absolute;
 +
width: 100%;
 +
height: 100%;
 +
opacity: 0;
 +
-moz-opacity: 0;
 +
filter: alpha(opacity=0);
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
-ms-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
}
 +
.portfolio a:hover .portfolio-overlay .thumb-info {
 +
opacity: 1;
 +
-moz-opacity: 1;
 +
filter: alpha(opacity=100);
 +
}
 +
.portfolio-overlay .thumb-info i {
 +
top: 50%;
 +
}
 +
.portfolio-overlay .thumb-info h5 {
 +
top: 20%;
 +
font-size: 18px;
 +
}
 +
.portfolio-overlay .thumb-info p {
 +
top: 50%;
 +
font-size: 13px;
 +
}
 +
.portfolio-overlay .thumb-info h5 {
 +
color: #ffffff;
 +
width: 100%;
 +
position: absolute;
 +
text-align: center;
 +
}
 +
.portfolio-overlay .thumb-info p {
 +
color: #ffffff;
 +
width: 100%;
 +
position: absolute;
 +
text-align: center;
 +
font-weight: bold;
 +
}
 +
.portfolio-overlay .thumb-info i {
 +
color: #ffffff;
 +
width: 100%;
 +
position: absolute;
 +
text-align: center;
 +
display: block;
 +
}
 +
/* === Isotope CSS3 transitions === */
 +
 
 +
.isotope, .isotope .isotope-item {
 +
-webkit-transition-duration: 0.8s;
 +
-moz-transition-duration: 0.8s;
 +
-ms-transition-duration: 0.8s;
 +
-o-transition-duration: 0.8s;
 +
transition-duration: 0.8s;
 +
}
 +
.isotope {
 +
-webkit-transition-property: height, width;
 +
-moz-transition-property: height, width;
 +
-ms-transition-property: height, width;
 +
-o-transition-property: height, width;
 +
transition-property: height, width;
 +
}
 +
.isotope .isotope-item {
 +
-webkit-transition-property: -webkit-transform, opacity;
 +
-moz-transition-property: -moz-transform, opacity;
 +
-ms-transition-property: -ms-transform, opacity;
 +
-o-transition-property: -o-transform, opacity;
 +
transition-property: transform, opacity;
 +
}
 +
/**** disabling Isotope CSS3 transitions ****/
 +
 
 +
.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition {
 +
-webkit-transition-duration: 0s;
 +
-moz-transition-duration: 0s;
 +
-ms-transition-duration: 0s;
 +
-o-transition-duration: 0s;
 +
transition-duration: 0s;
 +
}
 +
 
 +
 
 +
/* === section services === */
 +
 
 +
section#services h2 {
 +
font-size: 22px;
 +
margin-bottom: 15px;
 +
margin-top: 10px;
 +
text-align:center;
 +
}
 +
section#services p {
 +
margin:10px;
 +
}
 +
 
 +
 
 +
section#services .service-box {
 +
text-align: center;
 +
padding: 20px;
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
-ms-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
}
 +
section#services .span3:hover {
 +
background:#e3e3e3;
 +
}
 +
 
 +
section#services .service-box h2 {
 +
color: #f7f7f7;
 +
font-weight: 700;
 +
}
 +
 
 +
section#services.section.orange .service-box:hover {
 +
background:#f36518;
 +
}
 +
 
 +
 
 +
/* === section blog === */
 +
 
 +
section#blog {
 +
background: #f2f2f2;
 +
}
 +
 
 +
.home-post {
 +
background:#fff;
-
</div>
+
}
-
</section>
+
-
<!-- end section: projects -->
+
.home-post:hover {
-
<section id="character" class="section green4">
+
box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
-
<div class="container">
+
-moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
-
<h4>Experimental Characterization</h4>
+
-webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3);
-
<div class="row">
+
-webkit-transition: all 0.4s ease-in-out;
-
+
-moz-transition: all 0.4s ease-in-out;
-
<div>
+
-o-transition: all 0.4s ease-in-out;
-
+
-ms-transition: all 0.4s ease-in-out;
-
<p >
+
transition: all 0.4s ease-in-out;
-
  We took advantage of another fluorescent protein(mkate ) as reference gene, which has no influence in our design. Published literature generally supports the view that in transient transfections, fluorescence depends linearly on the copy number of transfected plasmids (Tseng et al, 1997; Pollard et al, 1998;Cohenet al,2009; Schwakeet al, 2010). While strictly speaking, this reporter level also depends on many other potentially fluctuating parameters such as global synthesis and degradation rates(Leonidas Bleris et al,2011),it is more legitimately use the normalized quotient to instead of the value of EYFP.
+
}
-
                  </br></br>
+
 
-
  <img src="https://static.igem.org/mediawiki/2013/8/87/Extu6.jpg" alt="" style="margin:auto;display:block;text-align:center"/>
+
 
-
  </br>
+
.home-post .entry-content {
-
  Apparently, the output of circuit C is lower than circuit B .Having the negative feedback compared with circuit B, the expression of EYFP in circuit A is strongest.  
+
padding:20px;
-
  </br>
+
}
-
  </br>
+
.home-post .entry-content h5 a {
-
                  Then we analysed the output of constructed designs varies with the DNA copy number. Facing with the difficulty of counting the copy number directly, we employed the reference gene to reflect .We think the copy number is high when the expression intensity of mkate is strong. One hundred thousand positive Hela cells was collected to obtain the relationship between EYFP and make.
+
font-size:22px;
-
  </br></br>
+
}
-
      <img src="https://static.igem.org/mediawiki/2013/e/e1/Extu7.jpg" alt="" style="margin:auto;display:block;text-align:center"/>
+
.home-post .entry-content h5 a:hover {
-
  </br>
+
color:#312f2b;
-
  From the figure 2, we learned with the increase of the expression intensity of makte, the specific valve of EYFP and mkate decreases. In another word, the circuit A’s output reaches saturation fast with the increase of copy number. We came to a conclusion circuit A’s adaptation to DNA copy number is higher than circuit B’s. So, the negative feedback works.
+
text-decoration:none;
-
+
}
-
</p>
+
.home-post .entry-content a.more {
-
</div>
+
font-size:13px;
-
</div>
+
}
-
+
.home-post .post-meta {
-
</div>
+
padding:20px;
 +
overflow:hidden;
 +
color:#fcfcfc;
 +
}
 +
.home-post .post-meta i {
 +
float:left;
 +
margin-right:20px;
 +
}
 +
.home-post .post-meta span {
 +
margin-top:10px;
 +
}
 +
.home-post .post-meta span.date {
 +
font-weight:700;
 +
font-size:13px;
 +
float:left;
 +
}
 +
.home-post .post-meta span.tags {
 +
font-weight:700;
 +
font-size:13px;
 +
float:right;
 +
color:#ddd;
 +
}
 +
.home-post .post-meta span.tags a {
 +
color:#fcfcfc;
 +
}
 +
 
 +
 
 +
 
 +
/* === section about === */
 +
 
 +
section#about {
 +
background:#f2f2f2;
 +
}
 +
 
 +
.people {
 +
text-align:center;
 +
}
 +
 
 +
.people h3 {
 +
margin-bottom:10px;
 +
font-weight:500;
 +
letter-spacing:-1px;
 +
}
 +
 
 +
.team-thumb {
 +
margin-top: 26px;
 +
text-align:center;
 +
}
 +
 
 +
/* (spacer) latest tweet */
 +
#tweet{
 +
text-align:center;
 +
margin:20px 0 0;
 +
font-size:20px;
 +
color:#fff;
 +
}
 +
 
 +
#tweet ul{
 +
float:left;
 +
width:100%;
 +
text-align:center;
 +
list-style:none;
 +
margin:0;
 +
padding:0;
 +
}
 +
 
 +
#tweet ul li{
 +
display: inline-block;
 +
list-style:none;
 +
margin:0 0 20px;
 +
padding:0 0 0 34px;
 +
font-size:20px;
 +
line-height:1.5em;
 +
}
 +
 
 +
#tweet ul li:before {
 +
font-family: 'FontAwesome';
 +
speak: none;
 +
font-style: normal;
 +
font-weight: normal;
 +
font-variant: normal;
 +
text-transform: none;
 +
line-height: 1;
 +
-webkit-font-smoothing: antialiased;
 +
content: "\f099";
 +
margin-right:20px;
 +
}
 +
 
 +
/* === Contact section === */
 +
 
 +
 
 +
/* Contact Form */
 +
 
 +
.validation {
 +
display:none;
 +
margin: -10px 0 20px;
 +
color:#fff;
 +
font-weight:700;
 +
font-size:13px;
 +
}
 +
 
 +
#sendmessage {
 +
border:1px solid #fff;
 +
display:none;
 +
text-align:center;
 +
padding:15px 12px 15px;
 +
margin:10px 0;
 +
font-weight:600;
 +
margin-bottom:30px;
 +
}
 +
 
 +
#sendmessage.show,.show  {
 +
display:block;
 +
}
 +
 
 +
#contact-form {
 +
position: relative;
 +
z-index: 999;
 +
}
 +
 
 +
#contact-form input[type=text], .contactForm textarea {
 +
background: rgba(227, 231, 228, 1);
 +
font-family: 'Open Sans', sans serif;
 +
border: 0;
 +
font-size:16px;
 +
text-align: left;
 +
vertical-align: middle;
 +
}
 +
#contact-form input[type=text]:focus, .contactForm textarea:focus {
 +
background: rgba(101, 106, 100, 1);
 +
color: #eff1ef;
 +
box-shadow: none;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
transition: background 0.25 ease-in;
 +
-moz-transition: background 0.25 ease-in;
 +
-webkit-transition: background 0.25 ease-in;
 +
}
 +
#contact-form input[type=text] {
 +
height: 60px;
 +
margin-bottom:30px;
 +
}
 +
#contact-form input[type=submit] {
 +
color: #fff;
 +
width: 185px;
 +
height: 60px;
 +
text-shadow: none;
 +
font-size: 16px;
 +
padding:0.5em;
 +
letter-spacing: 0.05em;
 +
margin: 0 0 20px 0;
 +
display: block;
 +
border: 0;
 +
text-transform: none;
 +
border-radius: 3px;
 +
-moz-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
box-shadow: none;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
}
 +
#contact-form input[type=submit]:hover, #contact-form input[type=submit]:active {
 +
background: #43413e !important;
 +
}
 +
#contact-form textarea {
 +
padding-top: 1em;
 +
}
 +
div.cform-response-output {
 +
max-width: 60%;
 +
text-align: center;
 +
margin-left: 40% !important;
 +
margin-top: 0.5em !important;
 +
padding: 0.5em !important;
 +
border-radius: 4px;
 +
-moz-border-radius: 4px;
 +
-webkit-border-radius: 4px;
 +
}
 +
.cform-not-valid-tip {
 +
color: #888;
 +
border: 1px dotted #ad3729 !important;
 +
width: 100% !important;
 +
left: 0 !important;
 +
padding: 0.5em !important;
 +
font-family: 'Open Sans', sans-serif;
 +
box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
-webkit-box-sizing: border-box;
 +
border-radius: 4px;
 +
-moz-border-radius: 4px;
 +
-webkit-border-radius: 4px;
 +
}
 +
 
 +
 
 +
 
 +
/* =========================================================
 +
06. Footer
 +
============================================================ */
 +
 
 +
footer {
 +
background: #2b2b2b;
 +
text-align: center;
 +
color: #5e5e5e;
 +
padding:50px 0 50px;
 +
}
 +
 
 +
footer ul.social-networks {
 +
list-style:none;
 +
}
 +
 
 +
footer ul.social-networks li {
 +
display:inline;
 +
}
 +
 
 +
footer ul.social-networks li i {
 +
display:inline-block;
 +
}
 +
 
 +
footer ul.social-networks li a {
 +
color: #5e5e5e;
 +
margin: 0 5px;
 +
}
 +
 
 +
footer ul.social-networks li a:hover {
 +
text-decoration:none;
 +
-webkit-transition: all 0.4s ease-in-out;
 +
-moz-transition: all 0.4s ease-in-out;
 +
-o-transition: all 0.4s ease-in-out;
 +
-ms-transition: all 0.4s ease-in-out;
 +
transition: all 0.4s ease-in-out;
 +
}
 +
 
 +
footer ul.social-networks li i.icon-bgdark {
 +
background:#414141;
 +
color: #656565;
 +
}
 +
 
 +
 
 +
footer ul.social-networks li a i.icon-group:hover {
 +
background: #ba7b3d;
 +
color: #fff;
 +
}
 +
 
 +
footer ul.social-networks li a i.icon-dashboard:hover {
 +
background: #5ad2eb;
 +
color: #fff;
 +
}
 +
footer ul.social-networks li a i.icon-dribbble:hover {
 +
background: #f57b71;
 +
color: #fff;
 +
}
 +
footer ul.social-networks li a i.icon-pinterest:hover {
 +
background: #d84848;
 +
color: #fff;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/* =========================================================
 +
07. Icons
 +
============================================================ */
 +
 
 +
/* bg */
 +
i.icon-bglight {
 +
color: #444;
 +
background: #f7f7f7;
 +
}
 +
i.icon-bglight.active {
 +
color: #fff;
 +
}
 +
 
 +
i.icon-bglight.active:hover{
 +
color: #444;
 +
background: #f7f7f7;
 +
}
 +
 
 +
i.icon-bgdark {
 +
color: #f7f7f7;
 +
background: #333;
 +
}
 +
i.icon-bgdark:hover {
 +
color: #fff;
 +
}
 +
i.icon-bgdark.active:hover {
 +
color: #f7f7f7;
 +
background: #333;
 +
}
 +
 
 +
/* square */
 +
i.icon-square {
 +
display: inline-block;
 +
text-align: center;
 +
width: 24px !important;
 +
height: 24px !important;
 +
line-height: 24px !important;
 +
}
 +
i.icon-square.icon-2x{
 +
width: 48px !important;
 +
height: 48px !important;
 +
line-height: 48px !important;
 +
}
 +
i.icon-square.icon-3x{
 +
width: 72px !important;
 +
height: 72px !important;
 +
line-height: 72px !important;
 +
}
 +
i.icon-square.icon-4x{
 +
width: 96px !important;
 +
height: 96px !important;
 +
line-height: 96px !important;
 +
}
 +
i.icon-square.icon-5x{
 +
width: 120px !important;
 +
height: 120px !important;
 +
line-height: 120px !important;
 +
}
 +
 
 +
/* rounded */
 +
i.icon-rounded {
 +
display: inline-block;
 +
border-radius: 6px !important;
 +
-moz-border-radius: 6px !important;
 +
-webkit-border-radius: 6px !important;
 +
-o-border-radius: 6px !important;
 +
-ms-border-radius: 6px !important;
 +
text-align: center;
 +
width: 24px !important;
 +
height: 24px !important;
 +
line-height: 24px !important;
 +
}
 +
 
 +
.icon-rounded.icon-2x{
 +
width: 48px !important;
 +
height: 48px !important;
 +
line-height: 48px !important;
 +
}
 +
.icon-rounded.icon-3x{
 +
width: 72px !important;
 +
height: 72px !important;
 +
line-height: 72px !important;
 +
border-radius: 8px !important;
 +
-moz-border-radius: 8px !important;
 +
-webkit-border-radius: 8px !important;
 +
-o-border-radius: 8px !important;
 +
-ms-border-radius: 8px !important;
 +
}
 +
.icon-rounded.icon-4x{
 +
width: 96px !important;
 +
height: 96px !important;
 +
line-height: 96px !important;
 +
border-radius: 10px !important;
 +
-moz-border-radius: 10px !important;
 +
-webkit-border-radius: 10px !important;
 +
-o-border-radius: 10px !important;
 +
-ms-border-radius: 10px !important;
 +
}
 +
.icon-rounded.icon-5x{
 +
width: 120px !important;
 +
height: 120px !important;
 +
line-height: 120px !important;
 +
border-radius: 12px !important;
 +
-moz-border-radius: 12px !important;
 +
-webkit-border-radius: 12px !important;
 +
-o-border-radius: 12px !important;
 +
-ms-border-radius: 12px !important;
 +
}
 +
 
 +
 
 +
/* circled */
 +
i.icon-circled {
 +
display: inline-block;
 +
border-radius: 1000px !important;
 +
-moz-border-radius: 1000px !important;
 +
-webkit-border-radius: 1000px !important;
 +
-o-border-radius: 1000px !important;
 +
-ms-border-radius: 1000px !important;
 +
text-align: center;
 +
width: 24px !important;
 +
height: 24px !important;
 +
line-height: 24px !important;
 +
}
 +
 
 +
.icon-circled.icon-2x{
 +
width: 48px !important;
 +
height: 48px !important;
 +
line-height: 48px !important;
 +
}
 +
.icon-circled.icon-3x{
 +
width: 72px !important;
 +
height: 72px !important;
 +
line-height: 72px !important;
 +
}
 +
.icon-circled.icon-4x{
 +
width: 96px !important;
 +
height: 96px !important;
 +
line-height: 96px !important;
 +
}
 +
.icon-circled.icon-5x{
 +
width: 120px !important;
 +
height: 120px !important;
 +
line-height: 120px !important;
 +
}
 +
 
 +
i.icon-white {
 +
color:#fff;
 +
}
 +
 
 +
 
 +
/* more icon sizes for font-awesome icons */
 +
 
 +
.icon-6x {
 +
  font-size: 6em;
 +
}
 +
.icon-6x.icon-border {
 +
  border-width: 6px;
 +
  -webkit-border-radius: 8px;
 +
  -moz-border-radius: 8px;
 +
  border-radius: 8px;
 +
}
 +
 
 +
.icon-7x {
 +
  font-size: 7em;
 +
}
 +
.icon-6x.icon-border {
 +
  border-width: 6px;
 +
  -webkit-border-radius: 8px;
 +
  -moz-border-radius: 8px;
 +
  border-radius: 8px;
 +
}
 +
 
 +
.icon-8x {
 +
  font-size: 8em;
 +
}
 +
.icon-6x.icon-border {
 +
  border-width: 6px;
 +
  -webkit-border-radius: 8px;
 +
  -moz-border-radius: 8px;
 +
  border-radius: 8px;
 +
}
 +
 
 +
.icon-9x {
 +
  font-size: 9em;
 +
}
 +
.icon-6x.icon-border {
 +
  border-width: 6px;
 +
  -webkit-border-radius: 8px;
 +
  -moz-border-radius: 8px;
 +
  border-radius: 8px;
 +
}
 +
.icon-10x {
 +
  font-size: 10em;
 +
}
 +
.icon-6x.icon-border {
 +
  border-width: 6px;
 +
  -webkit-border-radius: 8px;
 +
  -moz-border-radius: 8px;
 +
  border-radius: 8px;
 +
}
 +
 
 +
 
 +
 
 +
/* =========================================================
 +
08. Buttons
 +
============================================================ */
 +
 +
.btn {
 +
color: #fff;
 +
text-shadow: none;
 +
font-size: 16px;
 +
padding: 11px 19px;
 +
letter-spacing: 0.05em;
 +
border: 0;
 +
text-transform: none;
 +
border-radius: 3px;
 +
-moz-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
box-shadow: none;
 +
-moz-box-shadow: none;
 +
-webkit-box-shadow: none;
 +
  background-color: #545454;
 +
  border-color: none;
 +
  *background-color: #545454;
 +
  background-image: none;
 +
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
 +
  filter: none;
 +
  border: none;
 +
  *border: 0;
 +
  border-bottom-color: none;
 +
}
 +
.btn:link, .btn:visited {
 +
color: #fff;
 +
}
 +
.btn:hover {
 +
background: #333 !important;
 +
}
 +
.btn:hover,
 +
.btn:focus,
 +
.btn:active,
 +
.btn.active,
 +
.btn.disabled,
 +
.btn[disabled] {
 +
  color: #fff;
 +
  background-color: #333;
 +
  *background-color: #333;
 +
}
 +
 
 +
 
 +
.btn.btn-theme:hover {
 +
background: #333 !important;
 +
}
 +
 
 +
/* size */
 +
.btn-large {
 +
  padding: 18px 25px;
 +
  font-size: 24px;
 +
  -webkit-border-radius: 0;
 +
  -moz-border-radius: 0;
 +
  border-radius: 0;
 +
}
 +
 
 +
.btn-large [class^="icon-"],
 +
.btn-large [class*=" icon-"] {
 +
  margin-top: 4px;
 +
}
 +
 
 +
.btn-small {
 +
  padding: 6px 13px;
 +
  font-size: 11.9px;
 +
  -webkit-border-radius: 0;
 +
  -moz-border-radius: 0;
 +
  border-radius: 0;
 +
}
 +
 
 +
.btn-small [class^="icon-"],
 +
.btn-small [class*=" icon-"] {
 +
  margin-top: 0;
 +
}
 +
 
 +
.btn-mini [class^="icon-"],
 +
.btn-mini [class*=" icon-"] {
 +
  margin-top: -1px;
 +
}
 +
 
 +
.btn-mini {
 +
  padding: 0 6px;
 +
  font-size: 10.5px;
 +
  -webkit-border-radius: 0;
 +
  -moz-border-radius: 0;
 +
  border-radius: 0;
 +
}
 +
 
 +
/* end size */
 +
 
 +
.btn-primary {
 +
  color: #ffffff;
 +
  text-shadow: none;
 +
  background-color: #09828c;
 +
  *background-color: #09828c;
 +
  background-image: none;
 +
  border-color: none;
 +
  filter:none;
 +
}
 +
 
 +
.btn-primary:hover,
 +
.btn-primary:focus,
 +
.btn-primary:active,
 +
.btn-primary.active,
 +
.btn-primary.disabled,
 +
.btn-primary[disabled] {
 +
  color: #ffffff;
 +
  background: #065158;
 +
  *background-color: #065158;
 +
}
 +
 
 +
.btn-primary:active,
 +
.btn-primary.active {
 +
  background-color: #065158 \9;
 +
}
 +
 
 +
.btn-warning {
 +
  color: #ffffff;
 +
  text-shadow: none;
 +
  background-color: #ffe873;
 +
  *background-color: #ffe873;
 +
  background-image: none;
 +
  border-color: none;
 +
  filter:none;
 +
}
 +
 
 +
.btn-warning:hover,
 +
.btn-warning:focus,
 +
.btn-warning:active,
 +
.btn-warning.active,
 +
.btn-warning.disabled,
 +
.btn-warning[disabled] {
 +
  color: #ffffff;
 +
  background: #b88f22;
 +
  *background: #b88f22;
 +
}
 +
 
 +
.btn-warning:active,
 +
.btn-warning.active {
 +
  background: #b88f22 \9;
 +
}
 +
 
 +
 
 +
.btn-danger {
 +
  color: #ffffff;
 +
  text-shadow: none;
 +
  background-color: #f36f36;
 +
  *background-color: #f36f36;
 +
  background-image: none;
 +
  border-color: none;
 +
  filter:none;
 +
}
 +
 
 +
.btn-danger:hover,
 +
.btn-danger:focus,
 +
.btn-danger:active,
 +
.btn-danger.active,
 +
.btn-danger.disabled,
 +
.btn-danger[disabled] {
 +
  color: #ffffff;
 +
  background: #db5f58;
 +
  *background: #db5f58;
 +
}
 +
 
 +
.btn-danger:active,
 +
.btn-danger.active {
 +
  background: #db5f58 \9;
 +
}
 +
 
 +
.btn-success {
 +
  color: #ffffff;
 +
  text-shadow: none;
 +
  background-color: #1bac91;
 +
  *background-color: #1bac91;
 +
  background-image: none;
 +
  border-color: none;
 +
  filter:none;
 +
}
 +
 
 +
.btn-success:hover,
 +
.btn-success:focus,
 +
.btn-success:active,
 +
.btn-success.active,
 +
.btn-success.disabled,
 +
.btn-success[disabled] {
 +
  color: #ffffff;
 +
  background: #55ba93;
 +
  *background: #55ba93;
 +
}
 +
 
 +
.btn-success:active,
 +
.btn-success.active {
 +
  background: #55ba93 \9;
 +
}
 +
 
 +
.btn-info {
 +
  color: #ffffff;
 +
  text-shadow: none;
 +
  background-color: #4dbdc6;
 +
  *background-color: #4dbdc6;
 +
  background-image: none;
 +
  border-color: none;
 +
  filter:none;
 +
}
 +
 
 +
.btn-info:hover,
 +
.btn-info:focus,
 +
.btn-info:active,
 +
.btn-info.active,
 +
.btn-info.disabled,
 +
.btn-info[disabled] {
 +
  color: #ffffff;
 +
  background: #6a9ad0;
 +
  *background: #6a9ad0;
 +
}
 +
 
 +
.btn-info:active,
 +
.btn-info.active {
 +
  background: #6a9ad0 \9;
 +
}
 +
 
 +
.btn-inverse {
 +
  color: #ffffff;
 +
  text-shadow: none;
 +
  background-color: #3c3c3c;
 +
  *background-color: #3c3c3c;
 +
  background-image: none;
 +
  border-color: none;
 +
  filter:none;
 +
}
 +
 
 +
.btn-inverse:hover,
 +
.btn-inverse:focus,
 +
.btn-inverse:active,
 +
.btn-inverse.active,
 +
.btn-inverse.disabled,
 +
.btn-inverse[disabled] {
 +
  color: #ffffff;
 +
  background: #2b2a2a;
 +
  *background: #2b2a2a;
 +
}
 +
 
 +
.btn-inverse:active,
 +
.btn-inverse.active {
 +
  background: #2b2a2a \9;
 +
}
 +
 
 +
 
 +
/* button flat */
 +
.btn-flat {
 +
  -webkit-border-radius: 0;
 +
  -moz-border-radius: 0;
 +
  border-radius: 0;
 +
}
 +
 
 +
/* button rounded */
 +
.btn-rounded {
 +
  -webkit-border-radius: 20px;
 +
  -moz-border-radius: 20px;
 +
  border-radius: 20px;
 +
}
 +
.btn-large.btn-rounded {
 +
  -webkit-border-radius: 28px;
 +
  -moz-border-radius: 28px;
 +
  border-radius: 28px;
 +
}
 +
 
 +
 
 +
.navbar-inverse .btn-navbar {
 +
width: auto;
 +
height: auto;
 +
}
 +
 
 +
/* =========================================================
 +
09. Media queries
 +
============================================================ */
 +
 
 +
 
 +
@media (min-width: 768px) and (max-width: 979px) {
 +
body {
 +
padding-left:0 ;
 +
padding-right:0;
 +
padding:0;
 +
}
-
</div>
+
.navbar-inner {
-
</section>
+
padding-right: 20px;
-
<!-- section: publications -->
+
padding-left: 20px;
-
<section id="parts" class="section green5">
+
}
-
<div class="container">
+
-
<h4>Parts</h4>
+
.navbar-inner h1.brand {
-
<div class="row">
+
margin-left:20px;
-
+
}
-
</div>
+
-
</div>
+
.navbar-inner .btn-navbar {
-
</section>
+
margin:20px 20px 0;
-
<!-- end section: publications -->
+
}
 +
 +
.container {
 +
padding-right: 20px;
 +
padding-left: 20px;
 +
}
 +
.navbar-inverse .navbar-inner {
 +
padding:0 0 30px;
 +
}
 +
 +
.nav-collapse {
 +
text-align:center;
 +
width:100%;
 +
}
-
<!-- section: contact -->
+
}
-
<section id="discussion" class="section green6">
+
-
<div class="container">
+
-
<h4>Discussion</h4>
+
-
<p>
+
-
Due to some restrictions in wetlab, we only finished the above-mentioned experiment. We found that the number of Hela cells who possesses high copy number is  comparatively low. We also noticed the circuit C’s output is higher than expected in Figure 1.This may cause wrong judge when use the design to detect miR-21. Some measures will be taken to solve this question.
+
-
        Besides, we are going to endeavor to construct the other networks mentioned in modeling work.
+
@media (max-width: 767px) {
-
<br>
+
body {
-
</p>
+
padding-left:0 ;
 +
padding-right:0;
 +
padding:0;
 +
}
 +
.navbar-inner {
 +
padding-right: 20px;
 +
padding-left: 20px;
 +
}
-
</div>
+
.navbar-inner h1.brand {
-
</section>
+
margin-left:20px;
-
<footer>
+
}
-
<div class="container">
+
-
<div class="row">
+
.navbar-inner .btn-navbar {
-
<div class="span6 offset3">
+
margin:20px 20px 0;
-
<ul class="social-networks">
+
}
-
+
-
</ul>
+
.container {
-
<p class="copyright">
+
padding-right: 20px;
-
&copy;  All rights reserved.
+
padding-left: 20px;
-
</p>
+
}
-
</div>
+
.navbar-inverse .navbar-inner {
-
</div>
+
padding:0 20px 30px;
-
</div>
+
}
-
<!-- ./container -->
+
-
</footer>
+
.nav-collapse {
-
<a href="#" class="scrollup"><i class="icon-angle-up icon-square icon-bgdark icon-2x"></i></a>
+
text-align:center;
-
<!-- jQuery -->
+
width:100%;
-
<script src="http://tagsys.org/js/jquery.js"></script>
+
}
-
<!-- nav -->
+
#portfolio-wrap .grid {
-
<script src="http://tagsys.org/js/jquery.scrollTo.js"></script>
+
width: 25%;
-
<script src="http://tagsys.org/js/jquery.nav.js"></script>
+
}
-
<!-- localScroll -->
+
}
-
<script src="http://tagsys.org/js/jquery.localscroll-1.2.7-min.js"></script>
+
   
-
<!-- bootstrap -->
+
    /* Smaller screens ----------- */
-
<script src="http://tagsys.org/js/bootstrap.js"></script>
+
@media (max-width : 480px) {
-
<!-- prettyPhoto -->
+
#header-wrapper {
-
<script src="http://tagsys.org/js/jquery.prettyPhoto.js"></script>
+
padding-top:80px;
-
<!-- Works scripts -->
+
}
-
<script src="http://tagsys.org/js/isotope.js"></script>
+
-
<!-- flexslider -->
+
-
<script src="http://tagsys.org/js/jquery.flexslider.js"></script>
+
-
<!-- inview -->
+
-
<script src="http://tagsys.org/js/inview.js"></script>
+
-
<!-- animation -->
+
-
<script src="http://tagsys.org/js/animate.js"></script>
+
-
<!-- twitter -->
+
-
<script src="http://tagsys.org/js/jquery.tweet.js"></script>
+
-
<!-- contact form -->
+
-
<script src="http://tagsys.org/js/validate.js"></script>
+
-
<!-- custom functions -->
+
-
<script src="http://tagsys.org/js/custom.js"></script>
+
-
<link type="text/css" rel="stylesheet" href="http://tagsys.org/js/theatre.css"/>
+
#team .team-thumb {
-
<script type="text/javascript" src="http://tagsys.org/js/jquery.theatre.min.js"></script>
+
margin-right: auto;
-
<link rel="stylesheet" href="http://tagsys.org/js/demo.css"/>
+
margin-left: auto;
-
<script type="text/javascript">
+
width: 150px;
-
  $(window).load(function() { // Run when everything is loaded (especially images)
+
display: block;
-
  $('#myExample').theatre({ //Initialize theatre
+
text-align:center;
-
  // For comlete list of possible settings visit http://www.webdevelopers.eu/shop/5/doc/index#wdx_Settings
+
}
-
  'effect': '3d', // css3:stack effect and fall over to 3d effect for older browsers
+
 
-
  'selector': 'img, embed, video', // for galleries we want to animage only images without the surrounding links
+
#portfolio-wrap .grid {
-
  'paging': '.paging' // generate paging using element with class 'paging' as the template
+
width: 50%;
-
  });
+
}
-
  });
+
 
-
</script>
+
}
-
</body>
+
   
-
</html>
+
    /* Smartphones (portrait and landscape) ----------- */
 +
@media only screen  and (min-device-width : 320px) and (max-device-width : 480px) {
 +
 
 +
section.section {
 +
padding: 1em 0;
 +
}
 +
 
 +
#works .container {
 +
top: 0 !important;
 +
}
 +
 
 +
.max-img {
 +
width: 100%;
 +
}
 +
.max-img {
 +
margin-right: auto;
 +
margin-left: auto;
 +
display: block;
 +
}
 +
 
 +
section#services h2 {
 +
margin-bottom: 0.25em;
 +
}
 +
section#services h2, section#services ul {
 +
text-align: center;
 +
}
 +
 +
 
 +
/* team */
 +
 +
#team .team-thumb {
 +
margin-right: auto;
 +
margin-left: auto;
 +
width: 150px;
 +
display: block;
 +
text-align:center
 +
}
 +
.job-position: {
 +
margin-bottom: 1.5em;
 +
}
 +
.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
 +
margin-left: auto;
 +
margin-right: auto;
 +
}
 +
 +
/* Contact Form */
 +
#contact-form {
 +
overflow: hidden;
 +
}
 +
#contact-form input[type=submit] {
 +
width: 100%;
 +
}
 +
}

Revision as of 04:47, 27 September 2013

/*

Maxim one page bootstrap template @2013 by iWebStudio

/*

===============

CONTENTS:

01 General 02 Typography 03 Non-semantic 04 Navbar 05 Page sections 06 Footer 07 Icons 08 Buttons 09 Media queries

===============
  • /

/* Import css */ /* Google font */ @import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700'); /* bootstrap */ @import url('bootstrap.css'); /* bootstrap responsive */ @import url('bootstrap-responsive.css'); /* prettyPhoto */ @import url('prettyPhoto.css'); /* flexslider */ @import url('flexslider.css');

/* font awesome */ @import url('font-awesome.css'); /* overwrite */ @import url('overwrite.css'); /* animation */ @import url('animate.css');


/* ========================================================= 01. General ============================================================ */

div, article, section, header, footer, nav, li { position:relative; } .group:after { display:block; height:0; clear:both; content:"."; visibility:hidden; /* For clearing */ } body { background:#fff; color: #444; font-size: 16px; font-weight:300; font-family:'Open Sans', Arial, sans-serif; }

body { 

   padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */

}

-moz-selection {

color:#333; }

selection {

color:#333; }

/* scroll to top */ .scrollup{ 

   position:fixed;

width:32px; height:32px; 

   bottom:20px;
   right:20px;

}

a.scrollup { outline:0; text-decoration:none; }

a.scrollup:hover,a.scrollup:active,a.scrollup:focus { opacity:1; text-decoration:none; -webkit-transition: all 400ms ease-out 0s; -moz-transition: all 400ms ease-out 0s; -o-transition: all 400ms ease-out 0s; transition: all 400ms ease-out 0s; } a.scrollup i:hover { text-decoration:none; }

.blankdivider10 { height: 10px; display: block; }

.blankdivider20 { height: 20px; display: block; } .blankdivider30 { height: 30px; display: block; }

.row { margin-bottom:30px; }

.row .row{ margin-bottom:30px; }

.row.nomargin { margin-bottom:0; }


/*---------- forms ----------*/

input[type=text], input[type=submit], textarea { width: 100%; padding: 0.5em; font-size: 1em; margin-bottom: 1.5em; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } input, button, select, textarea { font-family:'Open Sans', Arial, sans-serif; } /* ========================================================= 02. Typography ============================================================ */

p { line-height: 1.6em; margin: 0 0 10px 0; }

blockquote { font-size:18px; border:none; padding:0; }

blockquote.large { font-size:36px; font-weight:700; line-height:1.1em; } blockquote.large:before { font-size:64px; font-family: FontAwesome; content: "\f10d"; margin-right:20px; }

blockquote cite { display:block; font-size:12px;} blockquote cite:before { content:"\2014 \0020"; } blockquote cite a, blockquote cite a:visited, blockquote cite a:visited { color:#555; }

ul, ol { font-size: 1em; /* 16px */ line-height: 1.5; /* 24px */ margin: 0 0 1.5em 0; } body, input, textarea { }

a { 

 color: #454545;
 text-decoration: none;

}

a:hover, a:active { text-decoration: underline; } h1, h2, h3, h4, h5, h6 { font-weight: 400; color: #312f2b; line-height:1.1em; font-family:'Open Sans', Arial, sans-serif; } h1 { font-size: 36px; margin-bottom:20px; } h2 { font-size: 30px; margin-bottom:20px; } h3 { font-size: 26px; margin-bottom:20px; } h4 { font-size: 22px; margin-bottom:20px; } h5 { font-size: 18px; margin-bottom:15px; } h6 { font-size: 16px; margin-bottom:10px; } strong { font-weight:700; font-family: 'Open Sans', sans-serif; } small { font-size: 0.75em; /* 12px */ line-height: 2; /* 24px */ margin-top: 2em; margin-bottom: 0em; } em { font-style: normal; font-family: 'Open Sans'; } .muted { color: #A5A5A2; } .impressed { text-shadow: 

-1px -1px 0 rgba(0, 0, 0, 0.5), /* shadow */  1px 1px 0 rgba(255, 255, 255, 0.9); /* highlight */

}

h2.pagetitle { color:#fff; font-size:46px; }

/* ========================================================= 03. Misc ============================================================ */

.hide-text { text-indent: 100%; white-space: nowrap; overflow: hidden; font-size: 1em; } .alignright { text-align: right; } .alignleft { text-align: left; } .aligncenter { text-align: center; vertical-align: middle; } .medium { font-weight: normal; }

/* ========================================================= 04. Navigation ============================================================ */

.navbar-fixed-top .container { /* Uncomment to make nav expand full width */ 

/*	width: auto; */

} .navbar .brand { margin-left:0; padding: 0; margin-top: 1.05em; } .navbar .brand a { padding: 0; color: #fff; font-size: 1.75em; margin-left: 0; font-weight: 400; text-transform:uppercase; } .navbar .brand a:hover { text-decoration: none; 

transition: color .15s linear;
-webkit-transition: color .15s linear;
-moz-transition: color .15s linear;

} .navbar .brand a:focus { outline: none; } .navbar-inner { min-height: 4.75em; } .navbar-inverse .navbar-inner { background-repeat: repeat; background-color: #0b333f; } .navbar-wrapper { overflow:hidden; }

  1. menu-main {

margin-top: 1.125em; } ul#menu-main > li > a { font-weight: 600; color: #fff; font-size:14px; text-transform:uppercase; } ul#menu-main > li > a:hover { padding: 9px 15px; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } ul#menu-main > li > a:focus { outline:0; }

.navbar-inverse .brand, .navbar-inverse .nav > li > a { text-shadow: none; }


/* ========================================================= 05. Page sections ============================================================ */

/* === section header === */

  1. header-wrapper {

width: 100%; min-height: 600px; margin-top: -60px; padding-top:160px; text-align:center; }


  1. header-wrapper h1 {

color: #FFFFFF; font-size: 4em; font-weight: 400; margin: 1em 0; }

  1. header-wrapper h2 {

color: #fff; font-family: 'Open Sans', sans serif; font-size: 2em; font-weight: normal; margin: 0.5em 0; text-shadow: 1px 1px 1px #333333; }

header .logo { text-align:center; margin-bottom:30px; }

/* --- Header slider --- */

  1. header-wrapper.header-slider {

background: #444 url(../img/bg/bg-1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }

  1. main-flexslider ul.slides li p {

font-size: 72px; text-transform: uppercase; position: relative; margin-bottom: 0px; text-align: center; line-height: 1; color:#fff; }

  1. main-flexslider.flexslider {

margin:0; background:none; border:none; -webkit-border-radius: 0; -moz-border-radius: 0; -o-border-radius: 0; border-radius: 0; box-shadow: none; -webkit-box-shadow: none; -moz-box-shadow: none; -o-box-shadow: none; }


/* --- Header subscribe form --- */

  1. header-wrapper input[type=text] {

background: rgba(227, 231, 228, 1); font-family: 'Open Sans', sans serif; font-size: 1.3125em; border: 0; text-align: center; vertical-align: middle; margin-bottom:0 !important; }

  1. header-wrapper input[type=text]:focus {

background: #43413e; color: #eff1ef; transition: background 0.25 ease-in; -moz-transition: background 0.25 ease-in; -webkit-transition: background 0.25 ease-in; }

  1. header-wrapper input[type=text] {

height: 2.9em; width:50%; }

  1. header-wrapper input[type=submit] {

color: #fff; width: 185px; height: 2.9em; font-size: 1.3125em; /* 21px */ padding:0.5em; letter-spacing: 0.05em; margin: 0; border: 0; text-transform: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; }

  1. header-wrapper input[type=submit]:hover, #header-wrapper input[type=submit]:active {

background: #43413e !important; }


section.section { padding: 100px 0 0px; } section.section h4 { text-align: center; margin-bottom: 40px; font-size: 46px; font-weight: 700; letter-spacing: -1px; } section.inner { padding: 50px 0 50px; }


.section.orange h4 ,.section.green1 h4,.section.green2 h4,.section.green3 h4,.section.green4 h4,.section.green5 h4,.section.green6 h4{ color: #fcfcfc; } .section.orange p,.section.green1 p,.section.green2 p,.section.green3 p,.section.green4 p,.section.green5 p,.section.green6 p { color: #f7f7f7; }


/* === section spacer === */

section.spacer { padding:90px 0 70px; color:#fcfcfc; }

.spacer.green1,.section.green1 { background:#1bac91; } .spacer.green1,.section.green1 h4 { color:#fff; }

.spacer.green2,.section.green2 { background:#38BE38; } .spacer.green2,.section.green2 h4 { color:#fff; } .spacer.green3,.section.green3 { background:#298B29; } .spacer.green3,.section.green3 h4 { color:#fff; }

.spacer.green4,.section.green4 { background:#007B00; } .spacer.green4,.section.green4 h4 { color:#fff; } .spacer.green5,.section.green5 { background:#007200; } .spacer.green5,.section.green5 h4 { color:#fff; }

.spacer.green6,.section.green6 { background:#005900; } .spacer.green6,.section.green6 h4 { color:#fff; }

.spacer.yellow,.section.yellow { background:#ffe873; } .spacer.orange,.section.orange { background:#f36f36; } .spacer.wood,.section.wood { background:#edb887; } .spacer.blue,.section.blue { background:#CAE1FF; }

section.spacer.bg2 { background: url(../img/bg/bg-2.jpg) 50% 0 no-repeat fixed; width:100%; height:auto; margin:0; }

section.spacer.bg3 { background: url(../img/bg/bg-3.jpg) 50% 0 no-repeat fixed; width:100%; height:auto; margin:0; }

section.spacer blockquote.large:before { color:#eee; opacity:0.6; }

section.spacer blockquote cite { color:#555; }


/* === section works === */

  1. works h4 {

margin-bottom:20px; }

  1. portfolio {

padding-bottom: 0; } /* === portfolio filter === */

  1. filters {

margin-bottom: 0px; text-align: center; display: block; float: none; z-index: 2; position: relative; }

  1. filters ul {

margin: 0 0 20px; list-style: none; padding: 0; }

  1. filters ul li {

display: inline-block; }

  1. filters ul li a {

display: block; float: left; padding: 2px 5px; color: inherit; margin-right: 5px; margin-bottom: 5px; font-weight: 600; }

  1. filters ul li a:hover,#filters ul li a:focus {

text-decoration:none; outline:0; }

  1. filters ul li a h5 {

font-size: 14px; padding: 5px 10px 5px; border: 2px solid #f2f2f2; }

  1. filters ul li a:hover h5, #filters ul li a.active h5 {

color:#fcfcfc; }

/* === portfolio filter2 === */

  1. filters2 {

margin-bottom: 0px; text-align: center; display: block; float: none; z-index: 2; position: relative; }

  1. filters2 ul {

margin: 0 0 20px; list-style: none; padding: 0; }

  1. filters2 ul li {

display: inline-block; }

  1. filters2 ul li a {

display: block; float: left; padding: 2px 5px; color: inherit; margin-right: 5px; margin-bottom: 5px; font-weight: 600; }

  1. filters2 ul li a:hover,#filters2 ul li a:focus {

text-decoration:none; outline:0; }

  1. filters2 ul li a h5 {

font-size: 14px; padding: 5px 10px 5px; border: 2px solid #f2f2f2; }

  1. filters2 ul li a:hover h5, #filters2 ul li a.active h5 {

color:#fcfcfc; background:#ee6363; }



/* === portfolio wrap - grid === */

  1. portfolio-wrap {

position: relative; padding: 0; width: 100.1%; margin: 0 auto; display: block; }

  1. portfolio-wrap .grid {

margin: 0; overflow: hidden; line-height: 0; width: 20%; border:0; padding: 0; } .portfolio-item.current { z-index: 101; } .portfolio-item { padding: 0; position: relative; overflow: hidden; } .portfolio-item .portfolio-image { overflow: hidden; display: block; position: relative; } .portfolio-item .portfolio-image img { width: 100%; height: auto; } .portfolio .portfolio-overlay { width: 100%; height: 100%; top: 0; left: 0; position: absolute; display: block; z-index: 4; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio > a, .portfolio > a:hover { color: #ffffff; } .portfolio-item .portfolio > a:hover > .portfolio-overlay { opacity: 0.5; -moz-opacity: 0.5; filter: alpha(opacity=50); } .portfolio > a img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio > a:hover img { -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio .thumb-info { position: absolute; width: 100%; height: 100%; opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .portfolio a:hover .portfolio-overlay .thumb-info { opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); } .portfolio-overlay .thumb-info i { top: 50%; } .portfolio-overlay .thumb-info h5 { top: 20%; font-size: 18px; } .portfolio-overlay .thumb-info p { top: 50%; font-size: 13px; } .portfolio-overlay .thumb-info h5 { color: #ffffff; width: 100%; position: absolute; text-align: center; } .portfolio-overlay .thumb-info p { color: #ffffff; width: 100%; position: absolute; text-align: center; font-weight: bold; } .portfolio-overlay .thumb-info i { color: #ffffff; width: 100%; position: absolute; text-align: center; display: block; } /* === Isotope CSS3 transitions === */

.isotope, .isotope .isotope-item { -webkit-transition-duration: 0.8s; -moz-transition-duration: 0.8s; -ms-transition-duration: 0.8s; -o-transition-duration: 0.8s; transition-duration: 0.8s; } .isotope { -webkit-transition-property: height, width; -moz-transition-property: height, width; -ms-transition-property: height, width; -o-transition-property: height, width; transition-property: height, width; } .isotope .isotope-item { -webkit-transition-property: -webkit-transform, opacity; -moz-transition-property: -moz-transform, opacity; -ms-transition-property: -ms-transform, opacity; -o-transition-property: -o-transform, opacity; transition-property: transform, opacity; } /**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition, .isotope.no-transition .isotope-item, .isotope .isotope-item.no-transition { -webkit-transition-duration: 0s; -moz-transition-duration: 0s; -ms-transition-duration: 0s; -o-transition-duration: 0s; transition-duration: 0s; }


/* === section services === */

section#services h2 { font-size: 22px; margin-bottom: 15px; margin-top: 10px; text-align:center; } section#services p { margin:10px; }


section#services .service-box { text-align: center; padding: 20px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } section#services .span3:hover { background:#e3e3e3; }

section#services .service-box h2 { color: #f7f7f7; font-weight: 700; }

section#services.section.orange .service-box:hover { background:#f36518; }


/* === section blog === */

section#blog { background: #f2f2f2; }

.home-post { background:#fff;

}

.home-post:hover { box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 0 16px rgba(0, 0, 0, 0.3); -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }


.home-post .entry-content { padding:20px; } .home-post .entry-content h5 a { font-size:22px; } .home-post .entry-content h5 a:hover { color:#312f2b; text-decoration:none; } .home-post .entry-content a.more { font-size:13px; } .home-post .post-meta { padding:20px; overflow:hidden; color:#fcfcfc; } .home-post .post-meta i { float:left; margin-right:20px; } .home-post .post-meta span { margin-top:10px; } .home-post .post-meta span.date { font-weight:700; font-size:13px; float:left; } .home-post .post-meta span.tags { font-weight:700; font-size:13px; float:right; color:#ddd; } .home-post .post-meta span.tags a { color:#fcfcfc; }


/* === section about === */

section#about { background:#f2f2f2; }

.people { text-align:center; }

.people h3 { margin-bottom:10px; font-weight:500; letter-spacing:-1px; }

.team-thumb { margin-top: 26px; text-align:center; }

/* (spacer) latest tweet */

  1. tweet{

text-align:center; margin:20px 0 0; font-size:20px; color:#fff; }

  1. tweet ul{

float:left; width:100%; text-align:center; list-style:none; margin:0; padding:0; }

  1. tweet ul li{

display: inline-block; list-style:none; margin:0 0 20px; padding:0 0 0 34px; font-size:20px; line-height:1.5em; }

  1. tweet ul li:before {

font-family: 'FontAwesome'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; -webkit-font-smoothing: antialiased; content: "\f099"; margin-right:20px; }

/* === Contact section === */


/* Contact Form */

.validation { display:none; margin: -10px 0 20px; color:#fff; font-weight:700; font-size:13px; }

  1. sendmessage {

border:1px solid #fff; display:none; text-align:center; padding:15px 12px 15px; margin:10px 0; font-weight:600; margin-bottom:30px; }

  1. sendmessage.show,.show {

display:block; }

  1. contact-form {

position: relative; z-index: 999; }

  1. contact-form input[type=text], .contactForm textarea {

background: rgba(227, 231, 228, 1); font-family: 'Open Sans', sans serif; border: 0; font-size:16px; text-align: left; vertical-align: middle; }

  1. contact-form input[type=text]:focus, .contactForm textarea:focus {

background: rgba(101, 106, 100, 1); color: #eff1ef; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; transition: background 0.25 ease-in; -moz-transition: background 0.25 ease-in; -webkit-transition: background 0.25 ease-in; }

  1. contact-form input[type=text] {

height: 60px; margin-bottom:30px; }

  1. contact-form input[type=submit] {

color: #fff; width: 185px; height: 60px; text-shadow: none; font-size: 16px; padding:0.5em; letter-spacing: 0.05em; margin: 0 0 20px 0; display: block; border: 0; text-transform: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }

  1. contact-form input[type=submit]:hover, #contact-form input[type=submit]:active {

background: #43413e !important; }

  1. contact-form textarea {

padding-top: 1em; } div.cform-response-output { max-width: 60%; text-align: center; margin-left: 40% !important; margin-top: 0.5em !important; padding: 0.5em !important; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; } .cform-not-valid-tip { color: #888; border: 1px dotted #ad3729 !important; width: 100% !important; left: 0 !important; padding: 0.5em !important; font-family: 'Open Sans', sans-serif; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; }


/* ========================================================= 06. Footer ============================================================ */

footer { background: #2b2b2b; text-align: center; color: #5e5e5e; padding:50px 0 50px; }

footer ul.social-networks { list-style:none; }

footer ul.social-networks li { display:inline; }

footer ul.social-networks li i { display:inline-block; }

footer ul.social-networks li a { color: #5e5e5e; margin: 0 5px; }

footer ul.social-networks li a:hover { text-decoration:none; -webkit-transition: all 0.4s ease-in-out; -moz-transition: all 0.4s ease-in-out; -o-transition: all 0.4s ease-in-out; -ms-transition: all 0.4s ease-in-out; transition: all 0.4s ease-in-out; }

footer ul.social-networks li i.icon-bgdark { background:#414141; color: #656565; }


footer ul.social-networks li a i.icon-group:hover { background: #ba7b3d; color: #fff; }

footer ul.social-networks li a i.icon-dashboard:hover { background: #5ad2eb; color: #fff; } footer ul.social-networks li a i.icon-dribbble:hover { background: #f57b71; color: #fff; } footer ul.social-networks li a i.icon-pinterest:hover { background: #d84848; color: #fff; }



/* ========================================================= 07. Icons ============================================================ */

/* bg */ i.icon-bglight { color: #444; background: #f7f7f7; } i.icon-bglight.active { color: #fff; }

i.icon-bglight.active:hover{ color: #444; background: #f7f7f7; }

i.icon-bgdark { color: #f7f7f7; background: #333; } i.icon-bgdark:hover { color: #fff; } i.icon-bgdark.active:hover { color: #f7f7f7; background: #333; }

/* square */ i.icon-square { display: inline-block; text-align: center; width: 24px !important; height: 24px !important; line-height: 24px !important; } i.icon-square.icon-2x{ width: 48px !important; height: 48px !important; line-height: 48px !important; } i.icon-square.icon-3x{ width: 72px !important; height: 72px !important; line-height: 72px !important; } i.icon-square.icon-4x{ width: 96px !important; height: 96px !important; line-height: 96px !important; } i.icon-square.icon-5x{ width: 120px !important; height: 120px !important; line-height: 120px !important; }

/* rounded */ i.icon-rounded { display: inline-block; border-radius: 6px !important; -moz-border-radius: 6px !important; -webkit-border-radius: 6px !important; -o-border-radius: 6px !important; -ms-border-radius: 6px !important; text-align: center; width: 24px !important; height: 24px !important; line-height: 24px !important; }

.icon-rounded.icon-2x{ width: 48px !important; height: 48px !important; line-height: 48px !important; } .icon-rounded.icon-3x{ width: 72px !important; height: 72px !important; line-height: 72px !important; border-radius: 8px !important; -moz-border-radius: 8px !important; -webkit-border-radius: 8px !important; -o-border-radius: 8px !important; -ms-border-radius: 8px !important; } .icon-rounded.icon-4x{ width: 96px !important; height: 96px !important; line-height: 96px !important; border-radius: 10px !important; -moz-border-radius: 10px !important; -webkit-border-radius: 10px !important; -o-border-radius: 10px !important; -ms-border-radius: 10px !important; } .icon-rounded.icon-5x{ width: 120px !important; height: 120px !important; line-height: 120px !important; border-radius: 12px !important; -moz-border-radius: 12px !important; -webkit-border-radius: 12px !important; -o-border-radius: 12px !important; -ms-border-radius: 12px !important; }


/* circled */ i.icon-circled { display: inline-block; border-radius: 1000px !important; -moz-border-radius: 1000px !important; -webkit-border-radius: 1000px !important; -o-border-radius: 1000px !important; -ms-border-radius: 1000px !important; text-align: center; width: 24px !important; height: 24px !important; line-height: 24px !important; }

.icon-circled.icon-2x{ width: 48px !important; height: 48px !important; line-height: 48px !important; } .icon-circled.icon-3x{ width: 72px !important; height: 72px !important; line-height: 72px !important; } .icon-circled.icon-4x{ width: 96px !important; height: 96px !important; line-height: 96px !important; } .icon-circled.icon-5x{ width: 120px !important; height: 120px !important; line-height: 120px !important; }

i.icon-white { color:#fff; }


/* more icon sizes for font-awesome icons */

.icon-6x { 

 font-size: 6em;

} .icon-6x.icon-border { 

 border-width: 6px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;

}

.icon-7x { 

 font-size: 7em;

} .icon-6x.icon-border { 

 border-width: 6px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;

}

.icon-8x { 

 font-size: 8em;

} .icon-6x.icon-border { 

 border-width: 6px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;

}

.icon-9x { 

 font-size: 9em;

} .icon-6x.icon-border { 

 border-width: 6px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;

} .icon-10x { 

 font-size: 10em;

} .icon-6x.icon-border { 

 border-width: 6px;
 -webkit-border-radius: 8px;
 -moz-border-radius: 8px;
 border-radius: 8px;

}


/* ========================================================= 08. Buttons ============================================================ */

.btn { color: #fff; text-shadow: none; font-size: 16px; padding: 11px 19px; letter-spacing: 0.05em; border: 0; text-transform: none; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; 

 background-color: #545454;
 border-color: none;
 *background-color: #545454;
 background-image: none;
 /* Darken IE7 buttons by default so they stand out more given they won't have borders */
 filter: none;
 border: none;
 *border: 0;
 border-bottom-color: none;

} .btn:link, .btn:visited { color: #fff; } .btn:hover { background: #333 !important; } .btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] { 

 color: #fff;
 background-color: #333;
 *background-color: #333;

}


.btn.btn-theme:hover { background: #333 !important; }

/* size */ .btn-large { 

 padding: 18px 25px;
 font-size: 24px;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;

}

.btn-large [class^="icon-"], .btn-large [class*=" icon-"] { 

 margin-top: 4px;

}

.btn-small { 

 padding: 6px 13px;
 font-size: 11.9px;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;

}

.btn-small [class^="icon-"], .btn-small [class*=" icon-"] { 

 margin-top: 0;

}

.btn-mini [class^="icon-"], .btn-mini [class*=" icon-"] { 

 margin-top: -1px;

}

.btn-mini { 

 padding: 0 6px;
 font-size: 10.5px;
 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;

}

/* end size */

.btn-primary { 

 color: #ffffff;
 text-shadow: none;
 background-color: #09828c;
 *background-color: #09828c;
 background-image: none;
 border-color: none;
 filter:none;

}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] { 

 color: #ffffff;
 background: #065158;
 *background-color: #065158;

}

.btn-primary:active, .btn-primary.active { 

 background-color: #065158 \9;

}

.btn-warning { 

 color: #ffffff;
 text-shadow: none;
 background-color: #ffe873;
 *background-color: #ffe873;
 background-image: none;
 border-color: none;
 filter:none;

}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] { 

 color: #ffffff;
 background: #b88f22;
 *background: #b88f22;

}

.btn-warning:active, .btn-warning.active { 

 background: #b88f22 \9;

}


.btn-danger { 

 color: #ffffff;
 text-shadow: none;
 background-color: #f36f36;
 *background-color: #f36f36;
 background-image: none;
 border-color: none;
 filter:none;

}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] { 

 color: #ffffff;
 background: #db5f58;
 *background: #db5f58;

}

.btn-danger:active, .btn-danger.active { 

 background: #db5f58 \9;

}

.btn-success { 

 color: #ffffff;
 text-shadow: none;
 background-color: #1bac91;
 *background-color: #1bac91;
 background-image: none;
 border-color: none;
 filter:none;

}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] { 

 color: #ffffff;
 background: #55ba93;
 *background: #55ba93;

}

.btn-success:active, .btn-success.active { 

 background: #55ba93 \9;

}

.btn-info { 

 color: #ffffff;
 text-shadow: none;
 background-color: #4dbdc6;
 *background-color: #4dbdc6;
 background-image: none;
 border-color: none;
 filter:none;

}

.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled] { 

 color: #ffffff;
 background: #6a9ad0;
 *background: #6a9ad0;

}

.btn-info:active, .btn-info.active { 

 background: #6a9ad0 \9;

}

.btn-inverse { 

 color: #ffffff;
 text-shadow: none;
 background-color: #3c3c3c;
 *background-color: #3c3c3c;
 background-image: none;
 border-color: none;
 filter:none;

}

.btn-inverse:hover, .btn-inverse:focus, .btn-inverse:active, .btn-inverse.active, .btn-inverse.disabled, .btn-inverse[disabled] { 

 color: #ffffff;
 background: #2b2a2a;
 *background: #2b2a2a;

}

.btn-inverse:active, .btn-inverse.active { 

 background: #2b2a2a \9;

}


/* button flat */ .btn-flat { 

 -webkit-border-radius: 0;
 -moz-border-radius: 0;
 border-radius: 0;

}

/* button rounded */ .btn-rounded { 

 -webkit-border-radius: 20px;
 -moz-border-radius: 20px;
 border-radius: 20px;

} .btn-large.btn-rounded { 

 -webkit-border-radius: 28px;
 -moz-border-radius: 28px;
 border-radius: 28px;

}


.navbar-inverse .btn-navbar { width: auto; height: auto; }

/* ========================================================= 09. Media queries ============================================================ */ 


@media (min-width: 768px) and (max-width: 979px) {

body { padding-left:0 ; padding-right:0; padding:0; }

.navbar-inner { padding-right: 20px; padding-left: 20px; }

.navbar-inner h1.brand { margin-left:20px; }

.navbar-inner .btn-navbar { margin:20px 20px 0; }

.container { padding-right: 20px; padding-left: 20px; } .navbar-inverse .navbar-inner { padding:0 0 30px; }

.nav-collapse { text-align:center; width:100%; }

}

@media (max-width: 767px) { body { padding-left:0 ; padding-right:0; padding:0; } .navbar-inner { padding-right: 20px; padding-left: 20px; }

.navbar-inner h1.brand { margin-left:20px; }

.navbar-inner .btn-navbar { margin:20px 20px 0; }

.container { padding-right: 20px; padding-left: 20px; } .navbar-inverse .navbar-inner { padding:0 20px 30px; }

.nav-collapse { text-align:center; width:100%; } #portfolio-wrap .grid { width: 25%; } } 

   /* Smaller screens ----------- */

@media (max-width : 480px) { #header-wrapper { padding-top:80px; }

#team .team-thumb { margin-right: auto; margin-left: auto; width: 150px; display: block; text-align:center; }

#portfolio-wrap .grid { width: 50%; }

} 

   /* Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 

section.section {
padding: 1em 0;

} 

#works .container {
top: 0 !important;

}

.max-img { 

width: 100%;

} 

.max-img {
margin-right: auto;
margin-left: auto;
display: block;

} 

section#services h2 {
margin-bottom: 0.25em;

} 

section#services h2, section#services ul {
text-align: center;

}


/* team */

  1. team .team-thumb { 
margin-right: auto;
margin-left: auto;
width: 150px;
display: block;
text-align:center

} 

.job-position: {
margin-bottom: 1.5em;

} 

.navbar-fixed-top, .navbar-fixed-bottom, .navbar-static-top {
margin-left: auto;
margin-right: auto;

}

/* Contact Form */ #contact-form { overflow: hidden; } #contact-form input[type=submit] { width: 100%; } }

Retrieved from "http://2013.igem.org/Team:Tsinghua-A/Wetlab"