Difference between revisions of "Team:Alverno CA"

(Undo revision 264270 by Sclamons (talk))
Line 1: Line 1:
−
{{:Team:Alverno_CA/headertest}}
+
/* Yleiset */
  
−
<html>
+
a:link, a:visited, a:active, .right-menu li a {
 +
  color: #0AA699;
 +
  text-decoration: none !important;
 +
}
  
−
<body>
+
a:hover {
−
<div id=""page-content-wrapper""><script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
+
  color: #90F0E8;
 +
}
  
−
<div class="splash" id="mainsplash">
+
body {
−
<div class="row splashyla">
+
  color: black;
−
        <div class="col-md-12">
+
  background-color: white;
−
            <a href="https://2016.igem.org/"><img src="https://static.igem.org/mediawiki/2014/0/09/Aalto_Helsinki_Logov_iGEM.png" class="img-responsive igem-logo"></a>
+
  margin: 0;
−
        </div>
+
  padding: 0;
−
    </div>
+
  word-wrap: break-word;
 +
}
  
−
<div class= "row splashesittely">
+
ul {
−
<div class="col-md-3">
+
  list-style-image: none;
−
</div>
+
}
−
<div class="col-md-6">
+
−
<h1>Clamp Down on Crosstalk<br>
+
−
<small>Alverno_CA</small></h1>
+
−
<img src="https://static.igem.org/mediawiki/2014/d/dc/Aalto_Helsinki_Logov_Oma.png" class="img-responsive omalogo center-block">
+
−
<p class="bigsplashtext">
+
−
<center>Reducing Noise in Multi-Gene Synthetic Biology Circuits</center>
+
−
</p>
+
−
</div>
+
−
<div class="col-md-3">
+
−
</div>
+
−
</div>
+
  
−
<div class= "row splashala">
+
#references > li {
−
        <div class ="col-md-12 transp scroller">
+
  margin-bottom: 1em;
−
            <a href="#Abstract">
+
}
−
                Scroll
+
−
                <img src="https://static.igem.org/mediawiki/2014/3/3e/Aalto_Helsinki_Nuoli.png" class="img-responsive center-block transp nuoli">
+
−
            </a>
+
−
        </div>
+
−
    </div>
+
  
−
<div class = "splashcopyright">
+
.cpright {
−
        <p class="transp">
+
  text-align: right;
−
            <a href="http://i-see-faces.deviantart.com/">Photo © Tanja Maria</a>
+
  padding-right: 1em;
−
        </p>
+
}
−
    </div>
+
−
</div>
+
−
<script src="https://2014.igem.org/Team:Aalto-Helsinki/jquery-1.11.0.min.js?action=raw&ctype=text/js"></script>
+
  
−
<div class="link" id="Abstract"></div>
+
.smallerimg {
−
<h2>Clamping Down on Crosstalk:<br>
+
  width: 50%;
−
<small>How can we keep genes from interfering with each other in synthetic DNA circuits?</small></h2>
+
}
  
−
<center><h3>About this Project</h3></center>
+
.modellatex, .modelimg {
−
<p><center>
+
  padding-top: 2em;
−
Building complex biological systems with many genes requires isolating genes. Active genes can cause nearby DNA to become supercoiled, <br>leading to unpredictable behavior of synthetic biology systems. We will test if DNA clamps (made from DNA-binding proteins) placed between <br>genes can stop this interference. If this project succeeds, it will allow bioengineers to build more predictable genetic circuits.</center>
+
  padding-bottom: 1.5em;
−
</p>
+
}
−
    <div class="row">
+
−
        <div class="img-center">
+
−
            <a href="https://youtu.be/sFfD-AivQw4"><img src="https://static.igem.org/mediawiki/2016/5/55/Videothumb.png" class="img-responsive smallerimg"></img></a>
+
−
            <p class="kuvateksti">
+
−
                <center>Watch our introduction video here.</center>
+
−
            </p>
+
−
        </div>
+
−
    </div>
+
−
<img src="https://static.igem.org/mediawiki/2014/7/7e/Aalto_Helsinki_Logot_Oma.png" class="img-responsive center-block omalogot">
+
  
 +
@media only screen and (min-width : 992px) {
 +
  article {
 +
    padding-top: 5px;
 +
    padding-bottom: 5%;
 +
    padding-left: 15%;
 +
    padding-right: 15%;
 +
    font-size: 16px;
 +
  }
  
−
<center><h3>What is the context of this research?</h3></center>
+
  .modelimg {
−
<p><center>
+
    display: none;
−
Programming cells often requires building "circuits" of several genes<br> together on the same piece of DNA. Bioengineers have observed that <br>when two genes are placed next to each other, they often unexpectedly interfere with each other's<br> expression in an unexpectedly orientation-dependent manner.
+
  }
−
Nobody knows with certainty what causes this genetic crosstalk, but one promising<br> theory involves DNA supercoiling. The transcription of DNA into RNA, the transcription process introduces supercoils, similar to kinks in a tightly-wound phone <br> cord. Supercoils directly affect the expression of genes, turning them on or off depending on the direction of the supercoil.</center>
+
}
−
</p>
+
  
−
<center><h3>What is the significance of this project?</h3></center>
+
@media only screen and (max-width : 992px) {
−
<p><center>
+
  .modellatex {
−
If successful, a DNA-binding, gene- isolating clamp could be used in any multi-gene circuit assembly, making multi-gene assemblies more predictable and their assembly much more efficient.<br>
+
    display: none;
−
This is particularly relevant when engineering metabolic pathways to produce chemicals<br> like methanol, insulin, or antibiotics, where circuits of many genes are routinely constructed. The physical layout of these circuits can unpredictably affect production of<br> the desired output by several orders of magnitude, so large engineered metabolic pathways must typically be hand-tuned or have many configurations screened for activity. By<br> making gene expression more predictable, our results could greatly improve the predictability (and, therefore, designability)<br> of large gene circuits for metabolic engineering.</center>
+
  }
−
</p>
+
}
  
−
<center><h3>What are the goals of the project?</h3></center>
+
.link {
−
<p><center>
+
  padding-top: 50px;
−
We will first build several plasmids (circular pieces of DNA) that <br>demonstrate cross-talk between genes. These plasmids <br>will consist of genes for two different fluorescent proteins (green fluorescent protein and red fluorescent protein) next to each other, in different orientations. <br>We expect to see differences in the relative expression of the two genes depending on how they are arranged and oriented, and we will quantify this effect.<br>
+
}
−
Next, we will try several strategies for removing these differences, including adding extra base pairs of spacing between the two genes and adding DNA "clamps" <br> made from DNA-binding repressor proteins between the two genes. We will again quantify the effects of cross-talk between genes, <br> which will hopefully be ameliorated by our additions.</center>
+
−
</p>
+
  
−
</article>
+
.paddingtop {
 +
  padding-top: 100px;
 +
}
  
−
</div>
+
h3, h4, h5, h6 {
−
</body>
+
  font-family: "Helvetica Neue", Helvetica, sans-serif;
−
<script>
+
  border-bottom: none;
−
$(document).ready(function() {
+
  padding-top: 3em;
 +
  padding-bottom: 1em;
 +
}
  
−
if(location.pathname != "/Team:Aalto-Helsinki") {
+
h1 {
−
$('#navigation a[href^="https://2014.igem.org' + location.pathname + '"]').addClass('active');
+
  font-family: "Helvetica Neue", Helvetica, sans-serif;
−
} else $('#navigation a.home').addClass('active');
+
  border-bottom: none;
−
});
+
  font-size: 6em;
−
</script>
+
}
−
<script type="text/javascript">
+
−
    // Picture reference script
+
−
    /*
+
−
    USAGE:
+
−
    tag img with a ref that is connected to the image, such as:
+
−
    <img src="aaltohelsinki.com/testikuva.png" ref="varioskan" />
+
−
    When you insert a reference in text, put a tag with a ref attribute:
+
−
    <a ref="varioskan"></a>
+
−
    Do not put href attribute, it will be replaced with a link to the image.
+
−
    Moreover, inner html of the anchor tag will be "figure x" where x is the
+
−
    correct figure number. If span or anchor has "." as the inner html, the
+
−
    caption will be capitalized.
+
−
    */
+
−
    var images = $('img[ref]');
+
−
    $.each(images, function(index, e){
+
−
            var referenceName = e.getAttribute("ref");
+
−
            if (!e.id){
+
−
                e.setAttribute("id","figure"+(index+1));
+
−
            }
+
−
            $.each($('a[ref="'+referenceName+'"]'), function(j, e2){
+
−
                e2.setAttribute("href","#"+e.id);
+
−
                if (e2.innerHTML == "."){
+
−
                    e2.innerHTML = "Figure " + (index+1);
+
−
                } else {
+
−
                    e2.innerHTML = "figure " + (index+1);
+
−
                }
+
−
            });
+
−
            $.each($('span[ref="'+referenceName+'"]'), function(j, e2){
+
−
                e2.setAttribute("href","#"+e.id);
+
−
                if (e2.innerHTML == "."){
+
−
                    e2.innerHTML = "Figure " + (index+1);
+
−
                } else {
+
−
                    e2.innerHTML = "figure " + (index+1);
+
−
                }
+
−
            });
+
−
        }
+
−
    );
+
  
−
    // Table reference script
+
h2 {
−
    /*
+
  font-family: "Helvetica Neue", Helvetica, sans-serif;
−
     USAGE:
+
  border-bottom: none;
−
     tag table with a tab that is connected to the table, such as:
+
  font-size: 2.5em;
−
    <table ref="intensities" />
+
  padding-top: 1em;
−
    When you insert a reference in text, put a tag with a ref attribute:
+
  padding-bottom: 0.3em;
−
    <a tab="intensities"></a>
+
  text-align: center;
−
    Do not put href attribute, it will be replaced with a link to the image.
+
}
−
    Moreover, inner html of the anchor tag will be "table x" where x is the
+
 
−
    correct table number. If span or anchor has "." as the inner html, the
+
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
−
     caption will be capitalized.
+
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small,
−
     */
+
.h6 small, h1 .small, h2 .small, h3 .small, h4 .small,
−
     var tables = $('table[tab], img[tab]');
+
h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small,
−
     $.each(tables, function(index, e){
+
.h4 .small, .h5 .small, .h6 .small {
−
            var tableName = e.getAttribute("tab");
+
  line-height: inherit;
−
            if (!e.id){
+
  color: rgba(100, 153, 148, 1);
−
                e.setAttribute("id","table"+(index+1));
+
}
−
            }
+
 
−
            $.each($('a[tab="'+tableName+'"]'), function(j, e2){
+
#bodyContent h1, #bodyContent h2 {
−
                e2.setAttribute("href","#"+e.id);
+
  margin-bottom: 0;
−
                if (e2.innerHTML == "."){
+
}
−
                    e2.innerHTML = "Table " + (index+1);
+
 
−
                } else {
+
blockquote {
−
                    e2.innerHTML = "table " + (index+1);
+
  font-style: italic;
−
                }
+
  position: relative;
−
            });
+
  border-left: none;
−
            $.each($('span[tab="'+tableName+'"]'), function(j, e2){
+
  line-height: 1.8;
−
                e2.setAttribute("href","#"+e.id);
+
  font-size: 1.3em;
−
                if (e2.innerHTML == "."){
+
  padding: 0 0 0 120px;
−
                    e2.innerHTML = "Table " + (index+1);
+
  margin: 2em 0 2em 0;
−
                } else {
+
}
−
                    e2.innerHTML = "table " + (index+1);
+
 
−
                }
+
blockquote:before {
−
            });
+
  display: block;
−
        }
+
  content: "\201C";
−
     );
+
  font-size: 200px;
−
</script>
+
  position: absolute;
−
</html>
+
  left: 0;
−
{{:Team:Alverno_CA/footertest}}
+
  top: -115px;
 +
  font-family: cursive;
 +
}
 +
 
 +
blockquote cite {
 +
  color: rgba(51, 97, 93, 1);
 +
  font-size: 0.6em;
 +
  display: block;
 +
  margin-top: 0.5em;
 +
}
 +
 
 +
blockquote cite:before {
 +
  content: "\2014 \2009";
 +
}
 +
 
 +
/* Yleiset päättyy */
 +
 
 +
 
 +
/* Header- ja pikkuvalikkojutut */
 +
 
 +
.navbar{
 +
  margin-top: 0;
 +
}
 +
 
 +
header {
 +
  color: white;
 +
  font-size: large;
 +
}
 +
 
 +
@media only screen and (min-width : 992px) {
 +
  header a {
 +
     padding-right: 1vw;
 +
     padding-left: 1vw;
 +
  }
 +
}
 +
 
 +
header a.active, .extrabar a.active {
 +
  color:black;
 +
}
 +
 
 +
header .navbar, .extrabar {
 +
  background-color:rgba(255,255,255,0.8);
 +
  border:0px;
 +
  border-radius: 0;
 +
}
 +
 
 +
header .navbar {
 +
  padding-top: 12px;
 +
  padding-bottom: 12px;
 +
  min-height: 30px;
 +
  border-radius: 0px;
 +
}
 +
 
 +
.extrabar {
 +
  width:100%;
 +
  text-align: center;
 +
  padding-top: 0px;
 +
  padding-bottom: 5px;
 +
  min-height: 20px;
 +
  border-radius: 0px;
 +
  z-index:1;
 +
}
 +
 
 +
.extrabar a {
 +
  padding-left: 0.5em;
 +
  padding-right: 0.5em;
 +
}
 +
 
 +
.affix {
 +
  top: 45px;
 +
  width: 100%;
 +
}
 +
 
 +
.affix-top {
 +
  float:left;
 +
  visibility: hidden;
 +
}
 +
 
 +
/* Header päättyy */
 +
 
 +
 
 +
/* Pakolliset pikku valikot ja parts*/
 +
 
 +
#top-section {
 +
  height: 0;
 +
  width: 100%;
 +
  left: 0;
 +
  border: none;
 +
  margin: 0 auto;
 +
  padding: 0 0 0 0;
 +
  background-color: transparent;
 +
  position: absolute;
 +
}
 +
 
 +
#menubar {
 +
  width: 300px;
 +
  top: 0px;
 +
  font-size: x-small;
 +
}
 +
 
 +
#menubar, #menubar a {
 +
  color: #0AA699;
 +
}
 +
 
 +
#menubar, #menubar a:hover {
 +
  color: #90F0E8;
 +
}
 +
 
 +
#menubar:hover, #menubar li a {
 +
  background-color: transparent;
 +
}
 +
 
 +
#groupparts {
 +
  min-height: 0;
 +
  min-width: 0;
 +
}
 +
 
 +
/* Pakolliset pikku valikot ja parts päättyy */
 +
 
 +
 
 +
/* Kuvien ja rivien asettelua */
 +
 
 +
.row {
 +
  overflow: hidden;
 +
  position: relative;
 +
  width: 100%;
 +
  margin: 1em 0;
 +
  padding: 0;
 +
}
 +
 
 +
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
 +
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
 +
  padding: 0;
 +
}
 +
 
 +
.col-md-2 h3, .col-md-4 h3, .col-md-6 h3, .col-md-8 h3,
 +
.col-md-2 h4, .col-md-4 h4, .col-md-6 h4, .col-md-8 h4,
 +
.col-md-2 h5, .col-md-4 h5, .col-md-6 h5, .col-md-8 h5 {
 +
  margin-top: 0em;
 +
}
 +
 
 +
.memberrow {
 +
  margin-top: 2em;
 +
  margin-bottom: 2em;
 +
}
 +
 
 +
#laurakuva, #lassikuva, #minttukuva, #oskarikuva, #pietukuva, #mikkokuva,
 +
#niklaskuva, #ottokuva, #martinakuva, #advisorskuvat {
 +
  width: auto;
 +
}
 +
 
 +
.university-title {
 +
  padding-top: 0;
 +
}
 +
 
 +
.margintop {
 +
  margin-top: 2em;
 +
}
 +
 
 +
.nopaddingtop {
 +
  padding-top: 0;
 +
}
 +
 
 +
.nopaddingbottom {
 +
  padding-bottom: 0;
 +
}
 +
 
 +
.ykspaddingbottom {
 +
  padding-bottom: 1em;
 +
}
 +
 
 +
.kakspaddingbottom {
 +
  padding-bottom: 2em;
 +
}
 +
 
 +
.kakspaddingtop {
 +
  padding-top: 2em;
 +
}
 +
 
 +
.text-col-right {
 +
  padding-left: 2em;
 +
}
 +
 
 +
.text-col-left {
 +
  padding-right: 2em;
 +
}
 +
 
 +
.img-100 .img-responsive {
 +
  width: 100%;
 +
}
 +
 
 +
.kuvateksti {
 +
  font-size: small;
 +
  margin-top: 1em;
 +
  margin-bottom: 3em;
 +
}
 +
 
 +
.img-center {
 +
  text-align: center;
 +
  margin-top: 2em;
 +
}
 +
 
 +
.img-center .img-responsive {
 +
  display: inline;
 +
}
 +
 
 +
.bg {
 +
  background-size: cover;
 +
  overflow: hidden;
 +
}
 +
 
 +
/* Featured */
 +
.feat {
 +
  opacity: 0.95;
 +
}
 +
 
 +
.feat:hover {
 +
  opacity: 1.0;
 +
}
 +
 
 +
.feattext-container-tall {
 +
  display: table;
 +
  height: 400px;
 +
  width: 100%;
 +
}
 +
 
 +
.feattext-container-wide {
 +
  display: table;
 +
  height: 300px;
 +
  width: 100%;
 +
}
 +
 
 +
.feattext-cell {
 +
  display: table-cell;
 +
  vertical-align: bottom;
 +
  width: 100%;
 +
}
 +
 
 +
.feattext-p {
 +
  background-color: rgba(95, 95, 95, 0.42);
 +
  margin-bottom: -0.5em;
 +
  padding: 0.5em;
 +
  padding-bottom: 0.75em;
 +
  color: white;
 +
  width: 100%;
 +
}
 +
 
 +
@media only screen and (min-width : 992px) {
 +
  .row-eq-height {
 +
     display: -webkit-box;
 +
    display: -webkit-flex;
 +
    display: -ms-flexbox;
 +
    display: flex;
 +
  }
 +
 
 +
  .feat-left{
 +
     margin-right: 0.5em;
 +
  }
 +
 
 +
  .feat-center {
 +
    margin-right: 0.5em;
 +
    margin-left: 0.5em;
 +
  }
 +
 
 +
  .feat-right {
 +
    margin-left: 0.5em;
 +
  }
 +
 
 +
}
 +
 
 +
/* Kuvien ja rivien asettelu loppu */
 +
 
 +
 
 +
/* Splashit */
 +
 
 +
.splash{
 +
  width: 100%;
 +
  color: white;
 +
  margin-top: -14px;
 +
  text-align: center;
 +
  background-size: cover;
 +
  text-shadow: 2px 2px 8px #4D4D4D;
 +
}
 +
 
 +
.bigsplashtext {
 +
  font-size: 1.4em;
 +
  margin: 0 10px;
 +
}
 +
 
 +
.splashalavalikko {
 +
  text-align: left;
 +
  padding: 80px 40px;
 +
  font-size: 1.5em;
 +
  line-height: 1.5;
 +
}
 +
 
 +
.splashalavalikko a {
 +
  color: white;
 +
  opacity: 0.7;
 +
}
 +
 
 +
.splashalavalikko a:hover {
 +
  opacity: 1;
 +
}
 +
 
 +
.scroller {
 +
  padding-bottom: 40px;
 +
  padding-top: 10px;
 +
}
 +
 
 +
.transp {
 +
  opacity: 0.7;
 +
}
 +
 
 +
.transp:hover {
 +
  opacity: 1;
 +
}
 +
 
 +
.scrolldown {
 +
  text-align: center;
 +
}
 +
 
 +
.transp a {
 +
  color: white;
 +
  opacity: 0.7;
 +
}
 +
 
 +
.transp a:hover {
 +
  opacity: 1;
 +
}
 +
 
 +
.nuoli {
 +
  max-height: 50px;
 +
}
 +
 
 +
.igem-logo {
 +
  width: 100px;
 +
  margin-top: 60px;
 +
  right: 100px;
 +
  margin-right: 40px;
 +
  float: right;
 +
  opacity: 0.7;
 +
}
 +
 
 +
.igem-logo:hover {
 +
  opacity: 1;
 +
}
 +
 
 +
.omalogo {
 +
  width: 100%;
 +
  padding-bottom: 1em;
 +
}
 +
 
 +
.omalogot {
 +
  width: 60%;
 +
  padding-top: 1em;
 +
}
 +
 
 +
#ci-circle {
 +
  width: 20%;
 +
}
 +
 
 +
#virginiabadge{
 +
  background: url("https://static.igem.org/mediawiki/2014/6/6a/Virginia_Badge2.png");
 +
  background-size:250px;
 +
  width: 250px;
 +
  height: 185px;
 +
  background-repeat:no-repeat;
 +
}
 +
 +
#virginiabadge:hover{
 +
  background: url("https://static.igem.org/mediawiki/2014/2/2b/File-Virginia-Images-Badge1.png");
 +
  background-repeat:no-repeat;
 +
  width: 250px;
 +
  height: 185px;
 +
  background-size:250px;
 +
}
 +
 
 +
@media only screen and (max-width : 992px) {
 +
 
 +
  .splash {
 +
     min-height: 700px;
 +
    width: 100%;
 +
    color: white;
 +
    text-align: center;
 +
  }
 +
 
 +
  .igem-logo {
 +
    margin-top: 80px;
 +
  }
 +
 
 +
  .splashcopyright {
 +
    text-align: right;
 +
    padding: 60px 40px;
 +
  }
 +
 
 +
  h1 {
 +
    font-size: 3.5em;
 +
  }
 +
 
 +
  .row-eq-height .img-responsive {
 +
    width: 100%;
 +
  }
 +
 
 +
  #mainsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/5/5a/Aalto_Helsinki_Splashs_Main.jpg');
 +
  }
 +
 
 +
  #teamsplash {
 +
     background-image: url('https://static.igem.org/mediawiki/2014/7/75/Aalto_Helsinki_Splashs_Team.jpg');
 +
  }
 +
 
 +
  #businesssplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/3/3f/Aalto_Helsinki_Splashs_Business.jpg');
 +
  }
 +
 
 +
  #researchsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/4/4a/Aalto_Helsinki_Splashs_Research.jpg');
 +
  }
 +
 
 +
  #modelingsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/7/7d/Aalto_Helsinki_Splashs_Modeling.jpg');
 +
  }
 +
 
 +
  #cooperationsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/9/9e/Aalto_Helsinki_Splashs_Cooperation.jpg');
 +
  }
 +
 
 +
  #outreachsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/4/45/Aalto_Helsinki_Splashs_Outreach.jpg');
 +
  }
 +
 
 +
  #journalsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/2/2d/Aalto_Helsinki_Splashs_Journal.jpg');
 +
  }
 +
 
 +
}
 +
 
 +
@media only screen and (min-width : 992px) {
 +
 
 +
  .splash {
 +
    position: relative;
 +
    min-height: 820px;
 +
  }
 +
 
 +
  .splashesittely {
 +
    min-height: 400px;
 +
  }
 +
 
 +
  .splashalavalikko {
 +
    position: absolute;
 +
    bottom: 0;
 +
    left: 0;
 +
  }
 +
 
 +
  .splashcopyright {
 +
    font-size: small;
 +
    padding: 60px 40px;
 +
    position: absolute;
 +
    bottom: 0;
 +
    right: 0;
 +
  }
 +
 
 +
  #mainsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/6/60/Aalto_Helsinki_Splash_Main.jpg');
 +
  }
 +
 
 +
  #teamsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/f/f1/Aalto_Helsinki_Splash_Team.jpg');
 +
  }
 +
 
 +
  #businesssplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/8/80/Aalto_Helsinki_Splash_Business.jpg');
 +
  }
 +
 
 +
  #researchsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/c/cb/Aalto_Helsinki_Splash_Research.jpg');
 +
  }
 +
 
 +
  #modelingsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/7/73/Aalto_Helsinki_Splash_Modeling.jpg');
 +
  }
 +
 
 +
  #cooperationsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/f/f5/Aalto_Helsinki_Splash_Cooperation.jpg');
 +
  }
 +
 
 +
  #outreachsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/e/e3/Aalto_Helsinki_Splash_Outreach.jpg');
 +
  }
 +
 
 +
  #journalsplash {
 +
    background-image: url('https://static.igem.org/mediawiki/2014/8/82/Aalto_Helsinki_Splash_Journal.jpg');
 +
  }
 +
 
 +
}
 +
 
 +
@media only screen and (min-width : 1472px) {
 +
  .splash {
 +
    min-height: 1030px;
 +
  }
 +
}
 +
 
 +
 
 +
 
 +
/* Splash-tyylittelyt loppu */
 +
 
 +
 
 +
/* SIVUJEN OMIA tyylejä */
 +
 
 +
.sponsorrow {
 +
  align-items: center;
 +
  margin: 4em 0;
 +
}
 +
 
 +
.sponsorrow .col-md-4 {
 +
  padding: 10px;
 +
  text-align: -webkit-center;
 +
  text-align: -moz-center
 +
}
 +
 
 +
.sponsorrow > .text-col-right > h3 {
 +
  padding-top: 0;
 +
}
 +
 
 +
#sponsorlogo {
 +
  max-height: 150px;
 +
  width: auto;
 +
}
 +
 
 +
/* SIVUJEN OMAT tyylit loppu */
 +
 
 +
 
 +
/* Articlejen backgroundit */
 +
 
 +
.turqu {
 +
  background-color: #0AA699;
 +
}
 +
 
 +
.turqu a, .green a {
 +
  color: white;
 +
}
 +
 
 +
/* Articlejen backgroundit loppu */
 +
 
 +
 
 +
/* BG (Kuvataustat) */
 +
 
 +
.bg-test {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/e/ec/Aalto_Helsinki_Placeholderpicture.jpg');
 +
}
 +
 
 +
.bg-bbseeker {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/c/c1/Aalto_Helsinki_Feat_BBSeeker.png');
 +
}
 +
 
 +
.bg-brian {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/8/8d/Aalto_Helsinki_Feat_Brian.png');
 +
}
 +
 
 +
.bg-magiclab {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/2/26/Aalto_Helsinki_Pinkitbakut6.jpg');
 +
}
 +
 
 +
.bg-chimeras {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Aalto_Helsinki_Kimeerakollaasi.png');
 +
}
 +
 
 +
 
 +
.bg-team {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/a/a3/Aalto_Helsinki_Feat_Team.jpg');
 +
}
 +
 
 +
.bg-business {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/e/e6/Aalto_Helsinki_Feat_Business.jpg');
 +
}
 +
 
 +
.bg-research {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/7/7c/Aalto_Helsinki_Feat_Research.jpg');
 +
}
 +
 
 +
.bg-modeling {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/1/17/Aalto_Helsinki_Feat_Modeling.jpg');
 +
}
 +
 
 +
.bg-cooperation {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/f/f7/Aalto_Helsinki_Feat_Cooperation.jpg');
 +
}
 +
 
 +
.bg-outreach {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/5/5e/Aalto_Helsinki_Feat_Outreach.jpg');
 +
}
 +
 
 +
.bg-journal {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/c/c5/Aalto_Helsinki_Feat_Journal.jpg');
 +
}
 +
 
 +
/* BG (Kuvataustat) loppu */
 +
 
 +
 
 +
/* Footerin tyylit */
 +
 
 +
footer {
 +
  text-align: center;
 +
  background: white;
 +
}
 +
 
 +
#logorow {
 +
  padding: 2em;
 +
}
 +
 
 +
.footerimg {
 +
  max-height: 100px;
 +
  max-width: 250px;
 +
}
 +
 
 +
.footerlogo {
 +
  display: inline-block;
 +
  vertical-align: middle;
 +
  padding: 1.5em;
 +
}
 +
 
 +
.footerlogo:hover .on, .footerlogo .off {
 +
  display:none;
 +
}
 +
 
 +
.footerlogo:hover .off {
 +
  display:block;
 +
}
 +
 
 +
#yhteystiedot {
 +
  text-align: center;
 +
  font-size: small;
 +
  padding: 0.5em;
 +
}
 +
 
 +
/* Footerin tyylit loppu */
 +
 
 +
 
 +
/* Padit ja puhelimet */
 +
 
 +
@media only screen and (max-width : 992px) {
 +
 
 +
 
 +
  /* Yleiset */
 +
 
 +
  .bodyContent {
 +
    padding-top: 5em;
 +
  }
 +
 
 +
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
 +
  .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
 +
    margin-top: 1em;
 +
    padding: 0;
 +
  }
 +
 
 +
  article {
 +
    padding: 5em 1em;
 +
    min-height: 50px;
 +
    font-size: 16px;
 +
  }
 +
 
 +
  .row {
 +
    margin: 0;
 +
  }
 +
 
 +
 
 +
  /* Headerit sun muut */
 +
  #navigation {
 +
    padding: 0;
 +
  }
 +
 
 +
  #menubar {
 +
    font-family: inherit;
 +
    white-space: normal;
 +
    width: 300px;
 +
    z-index: 1;
 +
  }
 +
 
 +
  .left-menu {
 +
    margin-top: 60px;
 +
    left: 0;
 +
    text-align: left;
 +
  }
 +
 
 +
  .left-menu ul {
 +
    margin-right: 0.2em;
 +
  }
 +
 
 +
  .left-menu li a {
 +
     padding: 0px 2px 0px 2px
 +
  }
 +
 
 +
  .right-menu {
 +
    margin-top: 60px;
 +
    right: 0;
 +
    text-align: right;
 +
  }
 +
 
 +
 
 +
  .right-menu ul {
 +
    margin-right: 0.2em;
 +
  }
 +
 
 +
  .right-menu li a {
 +
    padding: 0 2px 0 2px;
 +
  }
 +
 
 +
  li#pt-userpage, li#pt-anonuserpage, li#pt-login {
 +
    padding-left: 0;
 +
  }
 +
 
 +
  header .navbar {
 +
    font-size: 16px;
 +
    border-radius: 0px;
 +
    padding: 0.5em 0;
 +
  }
 +
 
 +
  header a {
 +
    padding-right: 0.2em;
 +
    padding-left: 0.2em;
 +
  }
 +
 
 +
  .affix-top, .affix, .extrabar a, .extrabar {
 +
    display: none;
 +
  }
 +
 
 +
  #logorow {
 +
    padding: none;
 +
  }
 +
 
 +
  .footerlogo {
 +
    padding: 1.5em 0em
 +
  }
 +
 
 +
 
 +
  /* Muut */
 +
  .mobile-hide {
 +
    display: none;
 +
  }
 +
 
 +
}
 +
 
 +
/* Padit ja puhelimet loppu */
 +
 
 +
/* Taustat */
 +
 
 +
.abg-pcb {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/b/ba/Aalto_Helsinki_PCB.png');
 +
  background-repeat: no-repeat;
 +
  background-position: right center;
 +
}
 +
 
 +
.abg-dnaseq {
 +
  background-image: url('https://static.igem.org/mediawiki/2014/f/fc/Aalto_Helsinki_dnaseq.png');
 +
  background-repeat: no-repeat;
 +
  background-position: left center;
 +
}

Revision as of 22:04, 15 October 2016

/* Yleiset */

a:link, a:visited, a:active, .right-menu li a { 

 color: #0AA699;
 text-decoration: none !important;

}

a:hover { 

 color: #90F0E8;

}

body { 

 color: black;
 background-color: white;
 margin: 0;
 padding: 0;
 word-wrap: break-word;

}

ul { 

 list-style-image: none;

}

  1. references > li {
 margin-bottom: 1em;

}

.cpright { 

 text-align: right;
 padding-right: 1em;

}

.smallerimg { 

 width: 50%;

}

.modellatex, .modelimg { 

 padding-top: 2em;
 padding-bottom: 1.5em;

}

@media only screen and (min-width : 992px) { 

 article {
   padding-top: 5px;
   padding-bottom: 5%;
   padding-left: 15%;
   padding-right: 15%;
   font-size: 16px;
 }

 .modelimg {
   display: none;
 }

}

@media only screen and (max-width : 992px) { 

 .modellatex {
   display: none;
 }

}

.link { 

 padding-top: 50px;

}

.paddingtop { 

 padding-top: 100px;

}

h3, h4, h5, h6 { 

 font-family: "Helvetica Neue", Helvetica, sans-serif;
 border-bottom: none;
 padding-top: 3em;
 padding-bottom: 1em;

}

h1 { 

 font-family: "Helvetica Neue", Helvetica, sans-serif;
 border-bottom: none;
 font-size: 6em;

}

h2 { 

 font-family: "Helvetica Neue", Helvetica, sans-serif;
 border-bottom: none;
 font-size: 2.5em;
 padding-top: 1em;
 padding-bottom: 0.3em;
 text-align: center;

}

h1 small, h2 small, h3 small, h4 small, h5 small, h6 small, .h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small, h1 .small, h2 .small, h3 .small, h4 .small, h5 .small, h6 .small, .h1 .small, .h2 .small, .h3 .small, .h4 .small, .h5 .small, .h6 .small { 

 line-height: inherit;
 color: rgba(100, 153, 148, 1);

}

  1. bodyContent h1, #bodyContent h2 {
 margin-bottom: 0;

}

blockquote { 

 font-style: italic;
 position: relative;
 border-left: none;
 line-height: 1.8;
 font-size: 1.3em;
 padding: 0 0 0 120px;
 margin: 2em 0 2em 0;

}

blockquote:before { 

 display: block;
 content: "\201C";
 font-size: 200px;
 position: absolute;
 left: 0;
 top: -115px;
 font-family: cursive;

}

blockquote cite { 

 color: rgba(51, 97, 93, 1);
 font-size: 0.6em;
 display: block;
 margin-top: 0.5em;

}

blockquote cite:before { 

 content: "\2014 \2009";

}

/* Yleiset päättyy */


/* Header- ja pikkuvalikkojutut */

.navbar{ 

 margin-top: 0;

}

header { 

 color: white;
 font-size: large;

}

@media only screen and (min-width : 992px) { 

 header a {
   padding-right: 1vw;
   padding-left: 1vw;
 }

}

header a.active, .extrabar a.active { 

 color:black;

}

header .navbar, .extrabar { 

 background-color:rgba(255,255,255,0.8);
 border:0px;
 border-radius: 0;

}

header .navbar { 

 padding-top: 12px;
 padding-bottom: 12px;
 min-height: 30px;
 border-radius: 0px;

}

.extrabar { 

 width:100%;
 text-align: center;
 padding-top: 0px;
 padding-bottom: 5px;
 min-height: 20px;
 border-radius: 0px;
 z-index:1;

}

.extrabar a { 

 padding-left: 0.5em;
 padding-right: 0.5em;

}

.affix { 

 top: 45px;
 width: 100%;

}

.affix-top { 

 float:left;
 visibility: hidden;

}

/* Header päättyy */


/* Pakolliset pikku valikot ja parts*/

  1. top-section {
 height: 0;
 width: 100%;
 left: 0;
 border: none;
 margin: 0 auto;
 padding: 0 0 0 0;
 background-color: transparent;
 position: absolute;

}

  1. menubar {
 width: 300px;
 top: 0px;
 font-size: x-small;

}

  1. menubar, #menubar a {
 color: #0AA699;

}

  1. menubar, #menubar a:hover {
 color: #90F0E8;

}

  1. menubar:hover, #menubar li a {
 background-color: transparent;

}

  1. groupparts {
 min-height: 0;
 min-width: 0;

}

/* Pakolliset pikku valikot ja parts päättyy */


/* Kuvien ja rivien asettelua */

.row { 

 overflow: hidden;
 position: relative;
 width: 100%;
 margin: 1em 0;
 padding: 0;

}

.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { 

 padding: 0;

}

.col-md-2 h3, .col-md-4 h3, .col-md-6 h3, .col-md-8 h3, .col-md-2 h4, .col-md-4 h4, .col-md-6 h4, .col-md-8 h4, .col-md-2 h5, .col-md-4 h5, .col-md-6 h5, .col-md-8 h5 { 

 margin-top: 0em;

}

.memberrow { 

 margin-top: 2em;
 margin-bottom: 2em;

}

  1. laurakuva, #lassikuva, #minttukuva, #oskarikuva, #pietukuva, #mikkokuva,
  2. niklaskuva, #ottokuva, #martinakuva, #advisorskuvat {
 width: auto;

}

.university-title { 

 padding-top: 0;

}

.margintop { 

 margin-top: 2em;

}

.nopaddingtop { 

 padding-top: 0;

}

.nopaddingbottom { 

 padding-bottom: 0;

}

.ykspaddingbottom { 

 padding-bottom: 1em;

}

.kakspaddingbottom { 

 padding-bottom: 2em;

}

.kakspaddingtop { 

 padding-top: 2em;

}

.text-col-right { 

 padding-left: 2em;

}

.text-col-left { 

 padding-right: 2em;

}

.img-100 .img-responsive { 

 width: 100%;

}

.kuvateksti { 

 font-size: small;
 margin-top: 1em;
 margin-bottom: 3em;

}

.img-center { 

 text-align: center;
 margin-top: 2em;

}

.img-center .img-responsive { 

 display: inline;

}

.bg { 

 background-size: cover;
 overflow: hidden;

}

/* Featured */ .feat { 

 opacity: 0.95;

}

.feat:hover { 

 opacity: 1.0;

}

.feattext-container-tall { 

 display: table;
 height: 400px;
 width: 100%;

}

.feattext-container-wide { 

 display: table;
 height: 300px;
 width: 100%;

}

.feattext-cell { 

 display: table-cell;
 vertical-align: bottom;
 width: 100%;

}

.feattext-p { 

 background-color: rgba(95, 95, 95, 0.42);
 margin-bottom: -0.5em;
 padding: 0.5em;
 padding-bottom: 0.75em;
 color: white;
 width: 100%;

}

@media only screen and (min-width : 992px) { 

 .row-eq-height {
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
 }

 .feat-left{
   margin-right: 0.5em;
 }

 .feat-center {
   margin-right: 0.5em;
   margin-left: 0.5em;
 }

 .feat-right {
   margin-left: 0.5em;
 }

}

/* Kuvien ja rivien asettelu loppu */


/* Splashit */

.splash{ 

 width: 100%;
 color: white;
 margin-top: -14px;
 text-align: center;
 background-size: cover;
 text-shadow: 2px 2px 8px #4D4D4D;

}

.bigsplashtext { 

 font-size: 1.4em;
 margin: 0 10px;

}

.splashalavalikko { 

 text-align: left;
 padding: 80px 40px;
 font-size: 1.5em;
 line-height: 1.5;

}

.splashalavalikko a { 

 color: white;
 opacity: 0.7;

}

.splashalavalikko a:hover { 

 opacity: 1;

}

.scroller { 

 padding-bottom: 40px;
 padding-top: 10px;

}

.transp { 

 opacity: 0.7;

}

.transp:hover { 

 opacity: 1;

}

.scrolldown { 

 text-align: center;

}

.transp a { 

 color: white;
 opacity: 0.7;

}

.transp a:hover { 

 opacity: 1;

}

.nuoli { 

 max-height: 50px;

}

.igem-logo { 

 width: 100px;
 margin-top: 60px;
 right: 100px;
 margin-right: 40px;
 float: right;
 opacity: 0.7;

}

.igem-logo:hover { 

 opacity: 1;

}

.omalogo { 

 width: 100%;
 padding-bottom: 1em;

}

.omalogot { 

 width: 60%;
 padding-top: 1em;

}

  1. ci-circle {
 width: 20%;

}

  1. virginiabadge{
 background: url("Virginia_Badge2.png");
 background-size:250px;
 width: 250px;
 height: 185px;
 background-repeat:no-repeat;

}

  1. virginiabadge:hover{
 background: url("File-Virginia-Images-Badge1.png");
 background-repeat:no-repeat;
 width: 250px;
 height: 185px;
 background-size:250px;

}

@media only screen and (max-width : 992px) { 

 .splash {
   min-height: 700px;
   width: 100%;
   color: white;
   text-align: center;
 }

 .igem-logo {
   margin-top: 80px;
 }

 .splashcopyright {
   text-align: right;
   padding: 60px 40px;
 }

 h1 {
   font-size: 3.5em;
 }

 .row-eq-height .img-responsive {
   width: 100%;
 }

 #mainsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/5/5a/Aalto_Helsinki_Splashs_Main.jpg');
 }

 #teamsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/7/75/Aalto_Helsinki_Splashs_Team.jpg');
 }

 #businesssplash {
   background-image: url('https://static.igem.org/mediawiki/2014/3/3f/Aalto_Helsinki_Splashs_Business.jpg');
 }

 #researchsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/4/4a/Aalto_Helsinki_Splashs_Research.jpg');
 }

 #modelingsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/7/7d/Aalto_Helsinki_Splashs_Modeling.jpg');
 }

 #cooperationsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/9/9e/Aalto_Helsinki_Splashs_Cooperation.jpg');
 }

 #outreachsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/4/45/Aalto_Helsinki_Splashs_Outreach.jpg');
 }

 #journalsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/2/2d/Aalto_Helsinki_Splashs_Journal.jpg');
 }

}

@media only screen and (min-width : 992px) { 

 .splash {
   position: relative;
   min-height: 820px;
 }

 .splashesittely {
   min-height: 400px;
 }

 .splashalavalikko {
   position: absolute;
   bottom: 0;
   left: 0;
 }

 .splashcopyright {
   font-size: small;
   padding: 60px 40px;
   position: absolute;
   bottom: 0;
   right: 0;
 }

 #mainsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/6/60/Aalto_Helsinki_Splash_Main.jpg');
 }

 #teamsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/f/f1/Aalto_Helsinki_Splash_Team.jpg');
 }

 #businesssplash {
   background-image: url('https://static.igem.org/mediawiki/2014/8/80/Aalto_Helsinki_Splash_Business.jpg');
 }

 #researchsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/c/cb/Aalto_Helsinki_Splash_Research.jpg');
 }

 #modelingsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/7/73/Aalto_Helsinki_Splash_Modeling.jpg');
 }

 #cooperationsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/f/f5/Aalto_Helsinki_Splash_Cooperation.jpg');
 }

 #outreachsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/e/e3/Aalto_Helsinki_Splash_Outreach.jpg');
 }

 #journalsplash {
   background-image: url('https://static.igem.org/mediawiki/2014/8/82/Aalto_Helsinki_Splash_Journal.jpg');
 }

}

@media only screen and (min-width : 1472px) { 

 .splash {
   min-height: 1030px;
 }

}


/* Splash-tyylittelyt loppu */


/* SIVUJEN OMIA tyylejä */

.sponsorrow { 

 align-items: center;
 margin: 4em 0;

}

.sponsorrow .col-md-4 { 

 padding: 10px;
 text-align: -webkit-center;
 text-align: -moz-center

}

.sponsorrow > .text-col-right > h3 { 

 padding-top: 0;

}

  1. sponsorlogo {
 max-height: 150px;
 width: auto;

}

/* SIVUJEN OMAT tyylit loppu */


/* Articlejen backgroundit */

.turqu { 

 background-color: #0AA699;

}

.turqu a, .green a { 

 color: white;

}

/* Articlejen backgroundit loppu */


/* BG (Kuvataustat) */

.bg-test { 

 background-image: url('https://static.igem.org/mediawiki/2014/e/ec/Aalto_Helsinki_Placeholderpicture.jpg');

}

.bg-bbseeker { 

 background-image: url('https://static.igem.org/mediawiki/2014/c/c1/Aalto_Helsinki_Feat_BBSeeker.png');

}

.bg-brian { 

 background-image: url('https://static.igem.org/mediawiki/2014/8/8d/Aalto_Helsinki_Feat_Brian.png');

}

.bg-magiclab { 

 background-image: url('https://static.igem.org/mediawiki/2014/2/26/Aalto_Helsinki_Pinkitbakut6.jpg');

}

.bg-chimeras { 

 background-image: url('https://static.igem.org/mediawiki/2014/b/b3/Aalto_Helsinki_Kimeerakollaasi.png');

}


.bg-team { 

 background-image: url('https://static.igem.org/mediawiki/2014/a/a3/Aalto_Helsinki_Feat_Team.jpg');

}

.bg-business { 

 background-image: url('https://static.igem.org/mediawiki/2014/e/e6/Aalto_Helsinki_Feat_Business.jpg');

}

.bg-research { 

 background-image: url('https://static.igem.org/mediawiki/2014/7/7c/Aalto_Helsinki_Feat_Research.jpg');

}

.bg-modeling { 

 background-image: url('https://static.igem.org/mediawiki/2014/1/17/Aalto_Helsinki_Feat_Modeling.jpg');

}

.bg-cooperation { 

 background-image: url('https://static.igem.org/mediawiki/2014/f/f7/Aalto_Helsinki_Feat_Cooperation.jpg');

}

.bg-outreach { 

 background-image: url('https://static.igem.org/mediawiki/2014/5/5e/Aalto_Helsinki_Feat_Outreach.jpg');

}

.bg-journal { 

 background-image: url('https://static.igem.org/mediawiki/2014/c/c5/Aalto_Helsinki_Feat_Journal.jpg');

}

/* BG (Kuvataustat) loppu */


/* Footerin tyylit */

footer { 

 text-align: center;
 background: white;

}

  1. logorow {
 padding: 2em;

}

.footerimg { 

 max-height: 100px;
 max-width: 250px;

}

.footerlogo { 

 display: inline-block;
 vertical-align: middle;
 padding: 1.5em;

}

.footerlogo:hover .on, .footerlogo .off { 

 display:none;

}

.footerlogo:hover .off { 

 display:block;

}

  1. yhteystiedot {
 text-align: center;
 font-size: small;
 padding: 0.5em;

}

/* Footerin tyylit loppu */


/* Padit ja puhelimet */

@media only screen and (max-width : 992px) { 


 /* Yleiset */

 .bodyContent {
   padding-top: 5em;
 }

 .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
 .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
   margin-top: 1em;
   padding: 0;
 }

 article {
   padding: 5em 1em;
   min-height: 50px;
   font-size: 16px;
 }

 .row {
   margin: 0;
 }



 /* Headerit sun muut */
 #navigation {
   padding: 0;
 }

 #menubar {
   font-family: inherit;
   white-space: normal;
   width: 300px;
   z-index: 1;
 }

 .left-menu {
   margin-top: 60px;
   left: 0;
   text-align: left;
 }

 .left-menu ul {
   margin-right: 0.2em;
 }

 .left-menu li a {
   padding: 0px 2px 0px 2px
 }

 .right-menu {
   margin-top: 60px;
   right: 0;
   text-align: right;
 }



 .right-menu ul {
   margin-right: 0.2em;
 }

 .right-menu li a {
   padding: 0 2px 0 2px;
 }

 li#pt-userpage, li#pt-anonuserpage, li#pt-login {
   padding-left: 0;
 }

 header .navbar {
   font-size: 16px;
   border-radius: 0px;
   padding: 0.5em 0;
 }

 header a {
   padding-right: 0.2em;
   padding-left: 0.2em;
 }

 .affix-top, .affix, .extrabar a, .extrabar {
   display: none;
 }

 #logorow {
   padding: none;
 }

 .footerlogo {
   padding: 1.5em 0em
 }



 /* Muut */
 .mobile-hide {
   display: none;
 }

}

/* Padit ja puhelimet loppu */

/* Taustat */

.abg-pcb { 

 background-image: url('https://static.igem.org/mediawiki/2014/b/ba/Aalto_Helsinki_PCB.png');
 background-repeat: no-repeat;
 background-position: right center;

}

.abg-dnaseq { 

 background-image: url('https://static.igem.org/mediawiki/2014/f/fc/Aalto_Helsinki_dnaseq.png');
 background-repeat: no-repeat;
 background-position: left center;

}