Difference between revisions of "Team:Aalto-Helsinki/Safety"

Line 1: Line 1:
 +
{{Aalto-Helsinki}}
 +
 
<html>
 
<html>
−
<script>
 
−
( function( $ ) {
 
−
$( document ).ready(function() {
 
−
$('#dropdown').prepend('');
 
−
    var activeElement = $('#dropdown>ul>li:first');
 
  
−
    $('#dropdown>ul>li').each(function() {
+
<!-- Content of the page is here -->
−
        if ($(this).hasClass('active')) {
+
−
            activeElement = $(this);
+
−
        }
+
−
    });
+
  
−
  var posLeft = activeElement.position().left;
+
    <div id="color-block-hp1"><span>
−
  var elementWidth = activeElement.width();
+
      <div class="text1">PROJECT</div>
−
  posLeft = posLeft + elementWidth/2 -6;
+
      <div class="text2">
−
  if (activeElement.hasClass('has-sub')) {
+
         <a href="https://2017.igem.org/Team:Aalto-Helsinki/Story">Story</a><br>
−
    posLeft -= 6;
+
         <a href="https://2017.igem.org/Team:Aalto-Helsinki/Dialog">Dialog</a><br>
−
  }
+
         <a style="text-decoration: underline" href="https://2017.igem.org/Team:Aalto-Helsinki/Safety">Safety</a><br>
−
 
+
         <a href="https://2017.igem.org/Team:Aalto-Helsinki/Ethics">Ethics</a><br>
−
  $("#dropdown>ul>li").hover(function() {
+
         <a href="https://2017.igem.org/Team:Aalto-Helsinki/Concept">The Concept</a>
−
         element = $(this);
+
       </div>
−
         var w = element.width();
+
    </span>
−
         if ($(this).hasClass('has-sub'))
+
    </div>
−
         {
+
    <br>
−
          leftPos = element.position().left + w/2 - 12;
+
−
         }
+
−
        else {
+
−
          leftPos = element.position().left + w/2 - 6;
+
−
        };
+
−
       });
+
  
−
  $('#dropdown>ul').prepend('<li id="menu-button"><a>Menu</a></li>');
+
<div class="container">
−
  $( "#menu-button" ).click(function(){
+
<div class="introtext">
−
        if ($(this).parent().hasClass('open')) {
+
−
          $(this).parent().removeClass('open');
+
−
        }
+
−
        else {
+
−
          $(this).parent().addClass('open');
+
−
        }
+
−
      });
+
  
−
// ROTATING PORIFI
+
<h3 style="color: #CC6633">Safety</h3>
 +
<p id="paragraph">
 +
We and our universities take safety seriously. “Horror stories” are important: even though low safety level biology laboratories may seem free of dangers, it is not the case. Although the risks differ from the perhaps more evident risks in a chemistry laboratory, for example, it is even more likely that things go wrong when one does not spare the time and effort to consider safety. You can find our filled <b>Safety Form</b> from <a href="https://2017.igem.org/Safety/Final_Safety_Form?team_id=2342">here</a>. On this page, we will explain in more detail what safety measures we have taken into account, what kind of safety questions we have considered and why we find those areas important.</p>
 +
</p>
  
−
  var target = $("img[alt^='Porifi']").attr('src');
+
</div>
−
  var labTarg = target.replace('4/4f/T--Aalto-Helsinki--Porifi.png', 'd/dc/T--Aalto-Helsinki--Porifi-lab.png');
+
</div>
−
  var modTarg = target.replace('4/4f/T--Aalto-Helsinki--Porifi.png', '9/90/T--Aalto-Helsinki--Porifi-mod.png');
+
<img src="https://static.igem.org/mediawiki/2017/f/f4/T--Aalto-Helsinki--horizontal.png">
−
  var hpTarg = target.replace('4/4f/T--Aalto-Helsinki--Porifi.png', '8/85/T--Aalto-Helsinki--Porifi-hp.png');
+
−
  var comTarg = target.replace('4/4f/T--Aalto-Helsinki--Porifi.png', '8/87/T--Aalto-Helsinki--Porifi-community.png');
+
−
  var peoTarg = target.replace('4/4f/T--Aalto-Helsinki--Porifi.png', '7/7b/T--Aalto-Helsinki--Porifi-people.png');
+
−
 
+
−
  $('#dropdown>ul>li>a.lab').hover(function() {
+
−
    $("img[alt^='Porifi']").attr("src", labTarg);
+
−
}, function() {
+
−
    $("img[alt^='Porifi']").attr("src", labTarg);
+
−
});
+
  
−
  $('#dropdown ul ul li a.lab').hover(function() {
+
<div class="container">
−
    $("img[alt^='Porifi']").attr("src", labTarg);
+
<div class="introtext">
−
}, function() {
+
<h4>Safety in Laboratory Work</h4>
−
    $("img[alt^='Porifi']").attr("src", labTarg);
+
<p id="paragraph">
−
});
+
Safety training for the whole team was provided by <b>Aalto University</b> before starting laboratory work, as we worked in their laboratories. Even though most members of our team had taken several laboratory safety courses before, this training introduced Aalto University practices and waste management to us. We collected safety-related materials to our team Drive folder, so that the members who had no laboratory experience could study the basics, in case that they would need to help out in the lab. <i>Safe lab work - liquid nitrogen? What are some of the more dangerous chemicals that were actually used during the summer? Less harmful chemicals used in Aalto University laboratories. The university hears what its employees say and quickly changes practices and substances that pose a safety threat. We appreciate this practice. Safe Shipment. Any problems? How did you solve them?
 +
</i>
 +
</p>
 +
<br>
 +
<br>
 +
<img src="https://static.igem.org/mediawiki/2017/0/07/T--aalto-helsinki--safetypictureoona.jpeg">
 +
<p id="paragraph">
 +
Our cloning organism was the <a href="http://www.thermofisher.com/order/catalog/product/C404010?ICID=cvc-top10-competent-cells-c1t1">TOP10</a> strain of <i>Escherichia coli</i>, whereas for production and antimicrobial activity testing, the <b>T7</b> (<a href="http://www.neb.com/-/media/c95dce068e17414ea633c01d43fdc3e9.pdf">Safety data sheet</a>) express competent <i>E. coli</i> was used. Both of these organisms belong to <b>Risk Group 1</b>. This ensured safe handling in our <b>Safety Level 1</b> laboratory, as we did not have access to laboratories with higher safety levels. We were originally considering antimicrobial testing of our produced peptide with <i>Staphylococcus Aureus</i>, <i>Propionibacterium acnes</i> and possibly other organisms. However, we did not proceed to those tests, as we could not find a proper safety level laboratory, and we could also verify the activity of our peptide by other means. We successfully demonstrated that the peptide we produced is antimicrobially active against the production strain of <i>E. coli</i>. Additionally, there is already data available of the activity of our peptide against <i>P. acnes</i>, <i>S. Aureus</i> and several other organisms. Furthermore, our construct with the peptide (DCD-1L) linked to the cellulose binding domain (CBM) was not active against <i>E. coli</i>, it is most likely not active against pathogens, either. Had we had the chance to continue our experiments, we would have tested the activity with liposomes - simulating the lipid bilayer constitution of the pathogens. This was suggested to us by the Estonian team instructors. We are grateful for the brilliant suggestion, though!
 +
</p>
 +
</div>
 +
</div>
  
−
    $('#dropdown>ul>li>a.mod').hover(function() {
+
<img src="https://static.igem.org/mediawiki/2017/f/f4/T--Aalto-Helsinki--horizontal.png">
−
    $("img[alt^='Porifi']").attr("src", modTarg);
+
−
}, function() {
+
−
    $("img[alt^='Porifi']").attr("src", modTarg);
+
−
});
+
  
−
  $('#dropdown ul ul li a.mod').hover(function() {
+
<div class="container">
−
    $("img[alt^='Porifi']").attr("src", modTarg);
+
<div class="introtext">
−
}, function() {
+
   
−
    $("img[alt^='Porifi']").attr("src", modTarg);
+
<h4>Safety in the Concept Design</h4>
−
});
+
  
−
    $('#dropdown>ul>li>a.hp').hover(function() {
+
<p id="paragraph">
−
    $("img[alt^='Porifi']").attr("src", hpTarg);
+
We developed a concept of an acne treatment hydrogel with our dermcidin peptide (DCD-1L). Considering our concept and product design, the end product needs to be safe to use on the human skin, on an everyday basis. We are lucky in this regard, as the peptide we worked with is already present on the human skin. The only thing that needs to be considered is whether abnormally high concentrations of the peptide risk the development of resistance against it. In that case, the body would lose its natural mechanism of defense against acne. One article hypothesizes, however, that it may be much less likely that resistance develops against this peptide, as the peptide is evolutionarily very recent and resistance would require big changes in the constitution of the bacterial cell wall or membrane.
−
}, function() {
+
</p>
−
    $("img[alt^='Porifi']").attr("src", hpTarg);
+
<p id="paragraph">
−
});
+
As dermcidin’s mode of action is currently not known for certain, the defense mechanisms that bacteria may develop are also pure guesses. Some caution should therefore be exercised. However, considering other current methods of treating acne, our peptide seems like the least risky option. Compared to antibiotics, which are used to combat far more dangerous diseases, resistance against our peptide does not pose a huge public health risk. From the patient’s perspective, our peptide is a great solution in the sense that it does not likely induce any side effects, as it only acts on our skin. Although being very effective in diminishing acne, isotretinoin sometimes induces symptoms of depression and is especially difficult to take as a woman: one must not be pregnant, breastfeeding and the likelihood that one gets pregnant must be very low. This is because isotretinoin is teratogenic - it can disturb the development of an embryo or a fetus. In medicine, a perfect solution may not always be available. Thus “good treatment” could be seen as the least risky option.
 +
</p>
 +
<p id="paragraph">
 +
During the summer, we had two major application areas in mind: acne and wound treatment. In wound treatment, many more safety questions would be relevant. One would need to consider whether dermcidin causes any problems if it enters the bloodstream. We discovered that wound care is a very complex application area, where no perfect product or method exists. We discussed with <b>Kirsi Isoherranen</b>, MD and found out that clinical studies are hardly ever conducted in a reliable manner, because every person and every wound is very different. Our conclusion was that our peptide may not be efficient enough in this application area, as it is really important that no harmful bacteria remain once the wound area is cleaned. DCD-1L could not most likely compete with silver products that are on the market, even if the silver products do not always work as well as expected [SOURCE].
 +
</p>
 +
<p id="paragraph">
 +
A good side of the DCD-1L peptide is that it is likely that introducing it to the skin, even in much higher concentrations than it naturally is, would not cause significant changes in the skin microbiota. This is of course something that cannot be known for certain, and it would be wise to test it.
 +
</p>
  
−
  $('#dropdown ul ul li a.hp').hover(function() {
+
</div>
−
    $("img[alt^='Porifi']").attr("src", hpTarg);
+
</div>
−
}, function() {
+
−
    $("img[alt^='Porifi']").attr("src", hpTarg);
+
−
});
+
  
−
    $('#dropdown>ul>li>a.com').hover(function() {
+
<img src="https://static.igem.org/mediawiki/2017/f/f4/T--Aalto-Helsinki--horizontal.png">
−
    $("img[alt^='Porifi']").attr("src", comTarg);
+
−
}, function() {
+
−
    $("img[alt^='Porifi']").attr("src", comTarg);
+
−
});
+
  
−
  $('#dropdown ul ul li a.com').hover(function() {
+
<div class="container">
−
    $("img[alt^='Porifi']").attr("src", comTarg);
+
−
}, function() {
+
−
    $("img[alt^='Porifi']").attr("src", comTarg);
+
−
});
+
  
−
  $('#dropdown>ul>li>a.peo').hover(function() {
+
<h3>References</h3>
−
    $("img[alt^='Porifi']").attr("src", peoTarg);
+
<p id="paragraph">
−
}, function() {
+
<a name="refl1" href="#ref1">[1]</a> Writers, YEAR. <i>Name of article / book.</i> Publication. Accessible at: [url here].<br>
−
    $("img[alt^='Porifi']").attr("src", peoTarg);
+
<a name="refl2" href="#ref2">[2]</a> Writers, YEAR. <i>Name of article / book.</i> Publication. Accessible at: [url here].<br>
−
});
+
[3] Writers, YEAR. <i>Name of article / book.</i> Publication. Accessible at: [url here].<br>
 +
[4] Writers, YEAR. <i>Name of article / book.</i> Publication. Accessible at: [url here].<br>
 +
[5] Writers, YEAR. <i>Name of article / book.</i> Publication. Accessible at: [url here].<br>
 +
</p>
 +
</div>
  
−
  $('#dropdown ul ul li a.peo').hover(function() {
+
<!--Space for footer-->
−
    $("img[alt^='Porifi']").attr("src", peoTarg);
+
<br>
−
}, function() {
+
<br>
−
    $("img[alt^='Porifi']").attr("src", peoTarg);
+
<br>
−
});
+
<br>
−
});
+
−
 
+
−
} )( jQuery );
+
−
 
+
−
</script>
+
−
 
+
−
<style>
+
−
 
+
−
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
+
−
 
+
−
  /* Clear the default wiki settings */
+
−
 
+
−
  #home_logo, #sideMenu { display:none; }
+
−
  #sideMenu, #top_title, .patrollink  {display:none;}
+
−
  #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
−
  body {background-color:white; }
+
−
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
−
 
+
−
/* OUR OWN CSS BEGINS */
+
−
 
+
−
html {
+
−
    position: relative;
+
−
    height: 100%;
+
−
    min-width: 950px;
+
−
    text-align: center;
+
−
    background-color: white;
+
−
    background-size: cover;
+
−
  -webkit-font-smoothing: antialiased; /* font smoothing */
+
−
  -moz-osx-font-smoothing: grayscale;
+
−
  font-family: 'Quicksand', Work Sans !important;
+
−
  font-size:16px !important;
+
−
}
+
−
 
+
−
header, body {
+
−
    height: 100%;
+
−
    min-height: 765px; /* So that the bottom bar does not go over the picture on a small screen */
+
−
    margin: 0 0 0px;
+
−
    padding: 0;
+
−
}
+
−
 
+
−
p {
+
−
  text-align: justify;
+
−
  font-family: Work Sans !important;
+
−
  font-size: 16px !important;
+
−
  /*margin: 20px 15px 35px 10px !important;*/
+
−
}
+
−
#paragraph {
+
−
  margin: 20px 15px 35px 10px !important;
+
−
}
+
−
#figuretext-c {
+
−
  text-align: center !important;
+
−
}
+
−
 
+
−
a {
+
−
  text-decoration: none;
+
−
  color: #000000;
+
−
  font-weight: bold;
+
−
}
+
−
 
+
−
a:hover {
+
−
  color: #363638;
+
−
  font-weight: bolder;
+
−
}
+
−
 
+
−
img {
+
−
    padding: 0;
+
−
    display: block;
+
−
    margin: auto;
+
−
    max-height: 100%;
+
−
    max-width: 100%;
+
−
}
+
−
 
+
−
/* Force height 100% on iGEM settings */
+
−
#content {
+
−
  height: 100% !important;
+
−
}
+
−
#HQ_page {
+
−
  height: 100% !important;
+
−
}
+
−
.mw-body {
+
−
  height: 100% !important;
+
−
}
+
−
#globalWrapper {
+
−
  height: 100% !important;
+
−
}
+
−
/* Force link padding for https keep small */
+
−
#bodyContent a[href^="https://"], .link-https{
+
−
padding-right: 1px !important;
+
−
}
+
−
#space {
+
−
  height: 30px;
+
−
}
+
−
#mainlogo {
+
−
  /*background-image: url("https://static.igem.org/mediawiki/2017/6/68/T--Aalto-Helsinki--mainlogo.png");*/
+
−
  background-image: url("https://static.igem.org/mediawiki/2017/a/ad/T--Aalto-Helsinki--mainlogo-2.png");
+
−
  background-size: cover;
+
−
  background-repeat: no-repeat;
+
−
  background-position: center center;
+
−
  max-height: 160px;
+
−
}
+
−
.link-spanner {
+
−
  position: absolute;
+
−
  width: 100%;
+
−
  height: 21%;
+
−
  top: 0;
+
−
  left: 0;
+
−
  z-index: 1;
+
−
} 
+
−
 
+
−
/* Front page */
+
−
.front-page {
+
−
  width: 100%;
+
−
  min-height: 65%;
+
−
  padding: 0px 0px;
+
−
  /*display: -webkit-box;*/      /* OLD - iOS 6-, Safari 3.1-6 */
+
−
  /*display: -moz-box;*/        /* OLD - Firefox 19- (buggy but mostly works) */
+
−
  /*display: -ms-flexbox;*/      /* TWEENER - IE 10 */
+
−
  /*display: -webkit-flex;*/    /* NEW - Chrome */
+
−
  /*display: flex;*/
+
−
  /*flex-direction: column;*/
+
−
}
+
−
.front-page > div {
+
−
  flex: 1 1 auto;
+
−
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+
−
  display: -moz-box;        /* OLD - Firefox 19- (buggy but mostly works) */
+
−
  display: -ms-flexbox;      /* TWEENER - IE 10 */
+
−
  display: -webkit-flex;    /* NEW - Chrome */
+
−
  display: flex;
+
−
  flex-direction: column;
+
−
  padding: 10% 10% 13% 10%;
+
−
}
+
−
/* Not needed anymore
+
−
.front-page > div > div {
+
−
  flex: 1 1 auto;
+
−
}*/
+
−
.front-page > div:nth-child(1) {
+
−
  background-image: url("https://static.igem.org/mediawiki/2017/8/8f/T--Aalto-Helsinki--coverpicture2.jpg");
+
−
  background-size: cover;
+
−
  /*overflow: hidden;*/
+
−
  background-color: #c63;
+
−
  border: 2px solid white;
+
−
}
+
−
.porify {
+
−
  /*flex: 1 1 auto; breaks Firefox */
+
−
  text-align: center;
+
−
  width: 35%;
+
−
  margin: auto;
+
−
}
+
−
 
+
−
/* Sponsors */
+
−
article.sponsor {
+
−
  float: left;
+
−
  display: table-cell;
+
−
  vertical-align: middle;
+
−
  text-align: center;
+
−
  width: 203px;
+
−
  height: 150px;
+
−
  margin-right: 15px;
+
−
  margin-bottom: 15px;
+
−
  /*border: 1px solid #4d4d4d;*/
+
−
  -webkit-border-radius: 3px;
+
−
    -moz-border-radius: 3px;
+
−
          border-radius: 3px;
+
−
  -webkit-filter:  grayscale(80%); /*brightness(60%) contrast(10000000%);*/
+
−
  filter: grayscale(80%);
+
−
  opacity: .8;
+
−
}
+
−
article.sponsor * {
+
−
  vertical-align: middle;
+
−
}
+
−
 
+
−
article.sponsor span {
+
−
  display: inline-block;
+
−
  height: 100%;
+
−
  width: 1px;
+
−
}
+
−
article.sponsor.last {
+
−
  margin-right: 0px;
+
−
}
+
−
article.sponsor:hover {
+
−
    -webkit-filter:  grayscale(0%);
+
−
    filter: grayscale(0%);
+
−
    opacity: 1.0;
+
−
}
+
−
 
+
−
/* Site Map styles */
+
−
.sitemap {
+
−
  background-color: #339999;
+
−
  color: #ffffff;
+
−
}
+
−
 
+
−
#map-column-styles {
+
−
  clear:left;
+
−
  float:left;
+
−
  text-align: left;
+
−
  width:100%;
+
−
  overflow:hidden;
+
−
  background:#339999;
+
−
  font-size: 14px !important;
+
−
}
+
−
#map-column-1 {
+
−
  float:left;
+
−
  min-width:16%;
+
−
  position:relative;
+
−
  left:14%;
+
−
  overflow:hidden;
+
−
}
+
−
#map-column-1 a {
+
−
  list-style: none;
+
−
  color: #ffffff;
+
−
}
+
−
#map-column-1 a:hover {
+
−
  color: #066;
+
−
}
+
−
#map-column-2 {
+
−
  float:left;
+
−
  min-width:16%;
+
−
  position:relative;
+
−
  left:14%;
+
−
  overflow:hidden;
+
−
}
+
−
#map-column-2 a {
+
−
  list-style: none;
+
−
  color: #ffffff;
+
−
}
+
−
#map-column-2 a:hover {
+
−
  color: #066;
+
−
}
+
−
#map-column-3 {
+
−
  float:left;
+
−
  min-width:16%;
+
−
  position:relative;
+
−
  left:14%;
+
−
  overflow:hidden;
+
−
}
+
−
#map-column-3 a {
+
−
  list-style: none;
+
−
  color: #ffffff;
+
−
}
+
−
#map-column-3 a:hover {
+
−
  color: #066;
+
−
}
+
−
#map-column-4 {
+
−
  float:left;
+
−
  min-width:16%;
+
−
  position:relative;
+
−
  left:14%;
+
−
  overflow:hidden;
+
−
}
+
−
#map-column-4 a {
+
−
  list-style: none;
+
−
  color: #ffffff;
+
−
}
+
−
#map-column-4 a:hover {
+
−
  color: #066;
+
−
}
+
−
#map-column-5 {
+
−
  float:left;
+
−
  min-width:16%;
+
−
  position:relative;
+
−
  left:14%;
+
−
  overflow:hidden;
+
−
}
+
−
#map-column-5 a {
+
−
  list-style: none;
+
−
  color: #ffffff;
+
−
}
+
−
#map-column-5 a:hover {
+
−
  color: #066;
+
−
}
+
−
 
+
−
/* Normal page styles */
+
−
.container {
+
−
  padding-top: 1%;
+
−
  padding-left: 13%;
+
−
  padding-right: 13%;
+
−
  font-family: Work Sans;
+
−
}
+
−
 
+
−
.basictext {
+
−
  font-weight: 300 !important;
+
−
  line-height: 32px;
+
−
  font-family: Work Sans;
+
−
}
+
−
 
+
−
.introtext {
+
−
  font-weight: 300 !important;
+
−
  line-height: 32px;
+
−
}
+
−
 
+
−
/* Team page styles */
+
−
 
+
−
.person-wrap {
+
−
  width: 100%;
+
−
  padding-top: 1%;
+
−
  padding-bottom: 5%;
+
−
  padding-left: 2%;
+
−
  padding-right: 0.5%;
+
−
  font-family: Work Sans;
+
−
}
+
−
.person-photo {
+
−
  padding: 2% 0 2% 0;
+
−
  float: left;
+
−
  width: 25%;
+
−
}
+
−
.person-texts {
+
−
  float: right;
+
−
  width: 68%;
+
−
  font-weight: lighter;
+
−
  line-height: 28px;
+
−
  font-family: Work Sans;
+
−
  text-align: justify;
+
−
  margin-right: 2%;
+
−
  font-size: 14px !important;
+
−
}
+
−
 
+
−
/* Some icon styles */
+
−
.some {
+
−
  display: inline-block;
+
−
  width: 30px;
+
−
  vertical-align: middle;
+
−
}
+
−
 
+
−
.some:hover {
+
−
  content: url('https://static.igem.org/mediawiki/2017/d/d1/T--Aalto-Helsinki--home_icon_hover.png');
+
−
}
+
−
 
+
−
/* Quote styles */
+
−
#quote-block {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #339999;
+
−
  overflow: hidden;
+
−
  font-family: Work Sans;
+
−
}
+
−
#quote-block-mod {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #CC9933;
+
−
  overflow: hidden;
+
−
  font-family: Work Sans;
+
−
}
+
−
#quote-block-hp {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #c63;
+
−
  overflow: hidden;
+
−
  font-family: Work Sans;
+
−
}
+
−
#quote-block-com {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #006699;
+
−
  overflow: hidden;
+
−
  font-family: Work Sans;
+
−
}
+
−
#quote-block-peo {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #bbddbb;
+
−
  overflow: hidden;
+
−
  font-family: Work Sans;
+
−
}
+
−
 
+
−
q {
+
−
  quotes: "“" "”" "‘" "’";
+
−
  font-family: Work Sans;
+
−
  font-style: normal;
+
−
}
+
−
 
+
−
q:before {
+
−
  content: open-quote;
+
−
  font-size: 150px !important;
+
−
}
+
−
 
+
−
q:after {
+
−
  content: no-close-quote;
+
−
}
+
−
 
+
−
.quote-mark {
+
−
  width: 0%;
+
−
  float: left;
+
−
  text-align: left;
+
−
  font-weight: bolder;
+
−
  font-size: 0px !important;
+
−
  font-family: Work Sans !important;
+
−
  padding: 0 8%;
+
−
  color: #000000;
+
−
  margin-bottom:-100px;
+
−
  margin-top: 25px;
+
−
}
+
−
.quote-mark-white {
+
−
  width: 0%;
+
−
  float: left;
+
−
  text-align: left;
+
−
  font-weight: bolder;
+
−
  font-size: 0px !important;
+
−
  font-family: Work Sans !important;
+
−
  padding: 0 8%;
+
−
  color: #ffffff;
+
−
  margin-bottom:-100px;
+
−
  margin-top: 25px;
+
−
}
+
−
 
+
−
.quote-text {
+
−
  /*width: 70%; iGEM website broke this, so let's not have this*/
+
−
  text-align: left;
+
−
  font-weight: bolder;
+
−
  font-size: 30px !important;
+
−
  padding: 0 18%;
+
−
  color: #000000;
+
−
  line-height: 130%;
+
−
}
+
−
.quote-text-white {
+
−
  /*width: 70%; iGEM website broke this, so let's not have this*/
+
−
  text-align: left;
+
−
  font-weight: bolder;
+
−
  font-size: 30px !important;
+
−
  padding: 0 18%;
+
−
  color: #ffffff;
+
−
  line-height: 130%;
+
−
}
+
−
 
+
−
.quote-person {
+
−
  /*width: 69%; iGEM website broke this, so let's not have this*/
+
−
  text-align: right;
+
−
  font-weight: lighter;
+
−
  font-size: 25px !important;
+
−
  padding: 0 18%;
+
−
  color: #000000;
+
−
}
+
−
.quote-person-white {
+
−
  /*width: 69%; iGEM website broke this, so let's not have this*/
+
−
  text-align: right;
+
−
  font-weight: lighter;
+
−
  font-size: 25px !important;
+
−
  padding: 0 18%;
+
−
  color: #ffffff;
+
−
}
+
−
 
+
−
/* Color block styles */
+
−
 
+
−
#color-block {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-image: url("https://static.igem.org/mediawiki/2017/d/d1/T--Aalto-Helsinki--Laboratory-block.jpg");
+
−
  background-size: cover;
+
−
  /*background-position: center center; maybe???*/
+
−
  background-color: #339999;
+
−
  overflow: hidden;
+
−
}
+
−
 
+
−
#color-block-mod {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-image: url("https://static.igem.org/mediawiki/2017/e/e5/T--Aalto-Helsinki--Model-block.jpg");
+
−
  background-size: cover;
+
−
  background-color: #CC9933;
+
−
  overflow: hidden;
+
−
}
+
−
 
+
−
#color-block-com {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-image: url("https://static.igem.org/mediawiki/2017/b/b4/T--Aalto-Helsinki--Community-block.jpg");
+
−
  background-size: cover;
+
−
  background-color: #006699;
+
−
  overflow: hidden;
+
−
}
+
−
#color-block-peo {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-size: cover;
+
−
  background-color: #bbddbb; /* green */
+
−
  overflow: hidden;
+
−
}
+
−
#color-block-hp1 {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-image: url("https://static.igem.org/mediawiki/2017/2/2e/T--Aalto-Helsinki--Project-block.jpg"); 
+
−
  background-size: cover;
+
−
  /*background-position: center center; maybe???*/
+
−
  background-color: #339999;
+
−
  overflow: hidden;
+
−
}
+
−
#color-block-hp2 {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-image: url("https://static.igem.org/mediawiki/2017/4/46/T--Aalto-Helsinki--Outreach-block.jpg");
+
−
  background-size: cover;
+
−
  /*background-position: center center; maybe???*/
+
−
  background-color: #339999;
+
−
  overflow: hidden;
+
−
}
+
−
#color-block-hp3 {
+
−
  width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-image: url("https://static.igem.org/mediawiki/2017/0/0b/T--Aalto-Helsinki--Judging-block.jpg");
+
−
  background-size: cover;
+
−
  /*background-position: center center; maybe???*/
+
−
  background-color: #339999;
+
−
  overflow: hidden;
+
−
}
+
−
 
+
−
#parts-text {
+
−
  padding: 1% 0% 1% 14%;
+
−
  color: #336633;
+
−
  width: 66%;
+
−
  float: left;
+
−
  text-align: justify;
+
−
  font-weight: bold;
+
−
  overflow: hidden;
+
−
  font-family: Work Sans !important;
+
−
}
+
−
#parts-photo {
+
−
  padding: 1% 13% 1% 5%;
+
−
  float: right;
+
−
  width: 30%;
+
−
  max-width: 660px;
+
−
}
+
−
 
+
−
.color-block-container {
+
−
  min-height: 68%; /*fills the remaining space of the page*/
+
−
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+
−
  display: -moz-box;        /* OLD - Firefox 19- (buggy but mostly works) */
+
−
  display: -ms-flexbox;      /* TWEENER - IE 10 */
+
−
  display: -webkit-flex;    /* NEW - Chrome */
+
−
  display: flex;
+
−
  flex-direction: column;
+
−
  /*position: relative;
+
−
  width: 100%;*/
+
−
  background-color: #ffffff;
+
−
}
+
−
.color-block-container > div {
+
−
  flex: 1 1 auto;
+
−
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+
−
  display: -moz-box;        /* OLD - Firefox 19- (buggy but mostly works) */
+
−
  display: -ms-flexbox;      /* TWEENER - IE 10 */
+
−
  display: -webkit-flex;    /* NEW - Chrome */
+
−
  display: flex;
+
−
}
+
−
.color-block-container > div > div {
+
−
  flex: 1 1 auto;
+
−
  padding-top: 10px; /* test if looks better in Firefox */
+
−
}
+
−
.color-block-hp > div {
+
−
  padding: 1rem;
+
−
}
+
−
.color-block-hp > div:nth-child(1) {
+
−
  background-image: url("https://static.igem.org/mediawiki/2017/2/2e/T--Aalto-Helsinki--Project-block.jpg");
+
−
  background-size: cover;
+
−
  background-color: #c63;
+
−
  border: 2px solid white;
+
−
}
+
−
.color-block-hp > div:nth-child(2) {
+
−
  background-image: url("https://static.igem.org/mediawiki/2017/4/46/T--Aalto-Helsinki--Outreach-block.jpg");
+
−
  background-size: cover;
+
−
  background-color: #c63;
+
−
  border: 2px solid white;
+
−
}
+
−
.color-block-hp > div:nth-child(3) {
+
−
  background-image: url("https://static.igem.org/mediawiki/2017/0/0b/T--Aalto-Helsinki--Judging-block.jpg");
+
−
  background-size: cover;
+
−
  background-color: #c63;
+
−
  border: 2px solid white;
+
−
}
+
−
.color-block-hp > div:hover {
+
−
  padding: 1rem;
+
−
}
+
−
.color-block-hp > div:hover:nth-child(1) {
+
−
  background-color: #b85c2e;
+
−
  /*on hover darker shade of same color*/
+
−
}
+
−
.color-block-hp > div:hover:nth-child(2) {
+
−
  background-color: #b85c2e;
+
−
  /*on hover darker shade of same color*/
+
−
}
+
−
.color-block-hp > div:hover:nth-child(3) {
+
−
  background-color: #b85c2e;
+
−
  /*on hover darker shade of same color*/
+
−
}
+
−
#color-block-hp {
+
−
  /*height: 200px;*/
+
−
  /*min-height: 100px;*/
+
−
  /*width: 100%;
+
−
  top: 0%;
+
−
  height: 80%;
+
−
  padding: 3% 0px;*/
+
−
  text-align: left;
+
−
  background-color: #c63;
+
−
  /*overflow: hidden;*/
+
−
}
+
−
#color-block-team {
+
−
  /*scroll effect: background: url("./img/1group crop+.jpg") no-repeat center center fixed;*/
+
−
  background: url("https://static.igem.org/mediawiki/2017/c/c2/T--Aalto-Helsinki--group_grass.jpg") no-repeat center center; /* attention, no dash */
+
−
  /*background-size: 100%;*/
+
−
  background-size: cover;
+
−
  height: 55%;
+
−
  /*width: 100%;
+
−
  top: 2%;
+
−
  padding: 30px 0px;
+
−
  text-align: left;
+
−
  background-color: #c63;
+
−
  overflow: hidden;*/
+
−
}
+
−
 
+
−
/* text opacity change filter */
+
−
 
+
−
div#color-block span,
+
−
div#color-block-mod span,
+
−
div#color-block-com span,
+
−
div#color-block-hp1 span,
+
−
div#color-block-hp2 span,
+
−
div#color-block-hp3 span,
+
−
div#color-block-hp span {
+
−
    display: block;
+
−
    height: 100%;
+
−
    width: 100%;
+
−
    opacity: 0.65;
+
−
    background: #000000;
+
−
    -moz-transition: all 1s;
+
−
    -webkit-transition: all 1s;
+
−
    transition: all 1s;
+
−
    z-index: ;
+
−
}
+
−
 
+
−
div#color-block:hover span,
+
−
div#color-block-mod:hover span,
+
−
div#color-block-com:hover span,
+
−
div#color-block-hp1:hover span,
+
−
div#color-block-hp2:hover span,
+
−
div#color-block-hp3:hover span,
+
−
div#color-block-hp:hover span {
+
−
    opacity: 1;
+
−
}
+
−
 
+
−
#color-block:hover {
+
−
  /*background-color: #066;*/
+
−
  -webkit-filter:  grayscale(10%) brightness(85%);
+
−
  filter: grayscale(10%) brightness(85%);
+
−
}
+
−
#color-block-mod:hover {
+
−
  /*background-color: #b88a2e;*/
+
−
  -webkit-filter:  grayscale(10%) brightness(85%);
+
−
  filter: grayscale(10%) brightness(85%);
+
−
}
+
−
.color-block-hp > div:hover {
+
−
  /*background-color: #b85c2e;*/
+
−
  -webkit-filter:  grayscale(10%) brightness(85%);
+
−
  filter: grayscale(10%) brightness(85%);
+
−
}
+
−
#color-block-hp1:hover {
+
−
  /*background-color: #b85c2e;*/
+
−
  -webkit-filter:  grayscale(10%) brightness(85%);
+
−
  filter: grayscale(10%) brightness(85%);
+
−
}
+
−
#color-block-hp2:hover {
+
−
  /*background-color: #b85c2e;*/
+
−
  -webkit-filter:  grayscale(10%) brightness(85%);
+
−
  filter: grayscale(10%) brightness(85%);
+
−
}
+
−
#color-block-hp3:hover {
+
−
  /*background-color: #b85c2e;*/
+
−
  -webkit-filter:  grayscale(10%) brightness(85%);
+
−
  filter: grayscale(10%) brightness(85%);
+
−
}
+
−
#color-block-com:hover {
+
−
  /*background-color: #036;*/
+
−
  -webkit-filter:  grayscale(10%) brightness(85%);
+
−
  filter: grayscale(10%) brightness(85%);
+
−
}
+
−
.text1 {
+
−
  width: 60%;
+
−
  /*text closer to center*/
+
−
  float: left;
+
−
  padding: 2% 0;
+
−
  text-align: center;
+
−
  font-weight: bolder;
+
−
  font-family: 'Quicksand';
+
−
  font-size: 30px !important;
+
−
  color: #fff;
+
−
}
+
−
.text2 {
+
−
  left: 50%;
+
−
  width: 40%;
+
−
  /*so the text doesn't start immediately from 50% of page*/
+
−
  float: right;
+
−
  font-family: 'Quicksand';
+
−
  font-size: 16px !important;
+
−
  line-height: normal;
+
−
  color: #fff;
+
−
  text-decoration: none;
+
−
}
+
−
.text2-hp {
+
−
  min-height: 150px; /* added because iGEM + Firefox breaks the function*/
+
−
  /*left: 50%;*/
+
−
  font-family: 'Quicksand';
+
−
  line-height: normal;
+
−
  padding: 2% 0;
+
−
  width: 40%;
+
−
  text-align: left;
+
−
  /*so the text doesn't start immediately from 50% of page*/
+
−
  /*float: right;
+
−
  font-size: 16px;
+
−
  color: #ffffff;*/
+
−
  text-decoration: none;
+
−
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
+
−
  display: -moz-box;        /* OLD - Firefox 19- (buggy but mostly works) */
+
−
  display: -ms-flexbox;      /* TWEENER - IE 10 */
+
−
  display: -webkit-flex;    /* NEW - Chrome */
+
−
  display: flex;
+
−
  /*The links will flex in the vertical direction*/
+
−
  flex-direction: column;
+
−
  justify-content: center;
+
−
}
+
−
 
+
−
.text2 a {
+
−
  font-weight: bold;
+
−
  color: #ffffff;
+
−
  text-decoration: none;
+
−
  display: block;
+
−
}
+
−
 
+
−
.text2-hp a {
+
−
  flex: 1 1 auto;
+
−
  font-weight: bold;
+
−
  color: #ffffff;
+
−
  line-height: 6px;
+
−
  text-decoration: none;
+
−
  display: block;
+
−
}
+
−
 
+
−
.text2 a:hover {
+
−
  /*color: #eeeeee;*/
+
−
  -webkit-filter: brightness(10%);
+
−
  filter: brightness(10%);
+
−
  text-decoration: none;
+
−
}
+
−
 
+
−
.text2-hp a:hover {
+
−
  -webkit-filter: brightness(10%);
+
−
  filter: brightness(10%);
+
−
  text-decoration: none;
+
−
}
+
−
 
+
−
/* Headings etc. */
+
−
@font-face {
+
−
  font-family: Quicksand;
+
−
  src: url(Adam.otf);
+
−
 
+
−
}
+
−
 
+
−
#o-h1 {
+
−
  color: #000000;
+
−
  padding: 10px;
+
−
  font-size: 200% !important;
+
−
  text-align: center;
+
−
  font-weight: normal;
+
−
  font-family: Quicksand;
+
−
}
+
−
 
+
−
h1 {
+
−
  color: #000000;
+
−
  padding: 10px;
+
−
  font-size: 250% !important;
+
−
  text-align: center;
+
−
  font-weight: normal;
+
−
}
+
−
 
+
−
h2 {
+
−
  color: #000000;
+
−
  padding: 10px;
+
−
  font-size: 80px !important;
+
−
}
+
−
 
+
−
h3 {
+
−
  color: #000000;
+
−
  font-size: 200% !important;
+
−
  text-align: left;
+
−
}
+
−
 
+
−
h4 {
+
−
  color: #000000;
+
−
  font-size: 150% !important;
+
−
  line-height: 33px !important;
+
−
  text-align: left;
+
−
}
+
−
 
+
−
h5 {
+
−
  color: #ffffff;
+
−
  font-size: 115% !important;
+
−
  line-height: 30px !important;
+
−
  font-style: normal !important;
+
−
  text-align: left;
+
−
}
+
−
 
+
−
/* Dropdown menu styles */
+
−
#dropdown {
+
−
  position: relative;
+
−
  height: 24px;
+
−
  background: #ffffff;
+
−
  width: auto;
+
−
}
+
−
#dropdown ul {
+
−
  list-style: none;
+
−
  padding: 0;
+
−
  margin: auto; /*this was 0*/
+
−
  /*text-align: center; this was added*/
+
−
  line-height: 1;
+
−
}
+
−
#dropdown > ul {
+
−
  position: relative;
+
−
  display: block;
+
−
  text-align: center; /*test, this was added*/
+
−
  background: #ffffff; /*This is the heading1 background*/
+
−
  width: 100%;
+
−
  z-index: 500;
+
−
}
+
−
#dropdown:after,
+
−
#dropdown > ul:after {
+
−
  content: ".";
+
−
  display: block;
+
−
  clear: both;
+
−
  visibility: hidden;
+
−
  line-height: 0;
+
−
  height: 0;
+
−
}
+
−
#dropdown.align-right > ul > li {
+
−
  float: right;
+
−
}
+
−
#dropdown.align-center ul {
+
−
  text-align: center;
+
−
}
+
−
#dropdown.align-center ul ul {
+
−
  text-align: center; /*this was left*/
+
−
}
+
−
#dropdown > ul > li {
+
−
  display: inline-block;
+
−
  position: relative;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
}
+
−
#dropdown > ul > #menu-button {
+
−
  display: none;
+
−
}
+
−
#dropdown ul li a {
+
−
  display: block;
+
−
  font-family: 'Quicksand', Work Sans;
+
−
  src: url(Adam.otf);
+
−
  font-weight: bold;
+
−
  text-decoration: none;
+
−
}
+
−
#dropdown > ul > li > a {
+
−
  font-size: 18px;
+
−
  font-weight: bold;
+
−
  text-align: center; /* this was added */
+
−
  padding: 5px 45px; /* heading sizes */
+
−
  color: #363638; /*previous color #7a8189;*/
+
−
  -moz-transition: color 0.25s ease-out;
+
−
  -webkit-transition: color 0.25s ease-out;
+
−
  -ms-transition: color 0.25s ease-out;
+
−
  -o-transition: color 0.25s ease-out;
+
−
  transition: color 0.25s ease-out;
+
−
}
+
−
#dropdown > ul > li.has-sub > a {
+
−
  padding-right: 40px;
+
−
}
+
−
/*Dropdown parent links give different colours when hovered*/
+
−
#dropdown > ul > li:hover > a.lab {
+
−
  color: #339999;
+
−
  border-bottom: 3px solid currentColor;
+
−
}
+
−
#dropdown > ul > li:hover > a.mod {
+
−
  color: #CC9933;
+
−
  border-bottom: 3px solid currentColor;
+
−
}
+
−
#dropdown > ul > li:hover > a.hp {
+
−
  color: #CC6633;
+
−
  border-bottom: 3px solid currentColor;
+
−
}
+
−
#dropdown > ul > li:hover > a.com {
+
−
  color: #336699;
+
−
  border-bottom: 3px solid currentColor;
+
−
}
+
−
#dropdown > ul > li:hover > a.peo {
+
−
  color: #336633;
+
−
  border-bottom: 3px solid currentColor;
+
−
}
+
−
#dropdown li.has-sub::after {
+
−
  display: block;
+
−
  content: "";
+
−
  position: absolute;
+
−
  width: 0;
+
−
  height: 0;
+
−
}
+
−
 
+
−
#dropdown ul ul {
+
−
  position: absolute;
+
−
  left: -9999px;
+
−
  top: 70px;
+
−
  opacity: 0;
+
−
  -moz-transition: opacity .3s ease, top .25s ease;
+
−
  -webkit-transition: opacity .3s ease, top .25s ease;
+
−
  -ms-transition: opacity .3s ease, top .25s ease;
+
−
  -o-transition: opacity .3s ease, top .25s ease;
+
−
  transition: opacity .3s ease, top .25s ease;
+
−
  z-index: 1000;
+
−
}
+
−
#dropdown ul ul ul {
+
−
  top: 37px;
+
−
  padding-left: 5px;
+
−
}
+
−
#dropdown ul ul li {
+
−
  position: relative;
+
−
  margin-bottom: .001em; /*Added because iGEM website breaks the dropdown otherwise*/
+
−
}
+
−
/* This defines how much space between heading and drop down menu */
+
−
#dropdown > ul > li:hover > ul {
+
−
  width: 100%; /* this makes the dropdown menus widths 100% */
+
−
  left: auto;
+
−
  right: auto;
+
−
  top: 31px; /*this was 44px -> too far away, 31px is right under */
+
−
  opacity: 1;
+
−
}
+
−
#dropdown.align-right > ul > li:hover > ul {
+
−
  left: auto;
+
−
  right: 0;
+
−
  opacity: 1;
+
−
}
+
−
/*Specifies how the link opened by hovering dropdown looks*/
+
−
#dropdown ul ul li:hover > ul {
+
−
  left: 175px; /* how far from the dropdown menu the submenu opens */
+
−
  top: 0;
+
−
  opacity: 1;
+
−
}
+
−
#dropdown.align-right ul ul li:hover > ul {
+
−
  left: auto;
+
−
  /*right: 170px;*/
+
−
  width: 100%; /*added*/
+
−
  top: 0;
+
−
  opacity: 1;
+
−
  padding-right: 5px;
+
−
}
+
−
#dropdown ul ul li a {
+
−
  /*width: 170px;*/
+
−
  width: 100%; /*the width of the subelement of subheadings */
+
−
  border-bottom: 1px solid #eeeeee; /* horiz. line colour */
+
−
  padding: 4px 2.6%;
+
−
  font-size: 13px;
+
−
  font-weight: bold;
+
−
  color: #363638; /* colour of the drop down menu subheadings */
+
−
  background: #ffffff;
+
−
  -webkit-transition: all .5s ease;
+
−
  -moz-transition: all .5s ease;
+
−
  -ms-transition: all .5s ease;
+
−
  -o-transition: all .5s ease;
+
−
  transition: all .5s ease;
+
−
}
+
−
#dropdown.align-right ul ul li a {
+
−
  text-align: center; /* this was right prev. */
+
−
}
+
−
 
+
−
#dropdown ul ul li:hover > a {
+
−
  background: #f2f2f2; /* colour of dropdown menu links when hovered - light grey */
+
−
  color: #363638;
+
−
}
+
−
 
+
−
#dropdown ul ul li:last-child > a,
+
−
#dropdown ul ul li.last > a {
+
−
  border-bottom: 0;
+
−
}
+
−
 
+
−
/* Social media icons */
+
−
@font-face {
+
−
  font-family: 'pe-icon-social';
+
−
  src:url('https://static.igem.org/mediawiki/2017/d/de/T--Aalto-Helsinki--pe-icon-social.eot');
+
−
  src:url('https://static.igem.org/mediawiki/2017/2/2a/T--Aalto-Helsinki--pe-icon-social.svg') format('embedded-opentype'),
+
−
    url('https://static.igem.org/mediawiki/2017/2/28/T--Aalto-Helsinki--pe-icon-social%2B%2B.woff') format('woff'),
+
−
    url('https://static.igem.org/mediawiki/2017/c/ce/T--Aalto-Helsinki--pe-icon-social%2B.ttf') format('truetype'),
+
−
    url('https://static.igem.org/mediawiki/2017/2/2a/T--Aalto-Helsinki--pe-icon-social.svg') format('svg');
+
−
  font-weight: normal;
+
−
  font-style: normal;
+
−
}
+
−
 
+
−
[class^="pe-so-"], [class*=" pe-so-"] {
+
−
  display: inline-block;
+
−
  font-family: 'pe-icon-social';
+
−
  speak: none;
+
−
  font-style: normal;
+
−
  font-weight: normal;
+
−
  font-variant: normal;
+
−
  text-transform: none;
+
−
  line-height: 1;
+
−
 
+
−
  /* Better Font Rendering =========== */
+
−
  -webkit-font-smoothing: antialiased;
+
−
  -moz-osx-font-smoothing: grayscale;
+
−
}
+
−
.pe-2x {
+
−
  font-size: 2em;
+
−
}
+
−
.pe-so-instagram:before {
+
−
  content: "\e626";
+
−
}
+
−
.pe-so-linkedin:before {
+
−
  content: "\e62c";
+
−
}
+
−
.pe-so-twitter:before {
+
−
    content: "\e651";
+
−
}
+
−
.pe-so-facebook:before {
+
−
    content: "\e617";
+
−
}
+
−
 
+
−
/* Footer styles */
+
−
footer .footer-social {
+
−
  position: static;
+
−
  width: 100%;
+
−
  text-align: center;
+
−
  padding: 15px 0px 5px 0px;
+
−
  bottom: 0;
+
−
  background-color: #339999;
+
−
  overflow: hidden;
+
−
  font-family: "Quicksand";
+
−
}
+
−
footer .footer-social ul {
+
−
  list-style: none;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
}
+
−
footer .footer-social ul li {
+
−
  display: inline-block;
+
−
}
+
−
footer .footer-social ul li a {
+
−
  display: block;
+
−
  font-size: 16px;
+
−
  color: #ffffff;
+
−
  -webkit-transition: background-color 0.3s;
+
−
          transition: background-color 0.3s;
+
−
}
+
−
footer .footer-social ul li a:hover {
+
−
  color: #363638 !important;
+
−
  font-weight: bold;
+
−
}
+
−
 
+
−
footer .footer-social a:hover {
+
−
  color: #363638 !important;
+
−
  font-weight: bold;
+
−
}
+
−
 
+
−
/*Footer for main page*/
+
−
 
+
−
footer .footer-mainpage {
+
−
  position: absolute;
+
−
  width: 100%;
+
−
  text-align: center;
+
−
  padding: 15px 0px 5px 0px;
+
−
  bottom: 0;
+
−
  background-color: #339999;
+
−
  overflow: hidden;
+
−
  font-family: "Quicksand";
+
−
}
+
−
 
+
−
footer .footer-mainpage ul {
+
−
  list-style: none;
+
−
  margin: 0;
+
−
  padding: 0;
+
−
}
+
−
footer .footer-mainpage ul li {
+
−
  display: inline-block;
+
−
}
+
−
footer .footer-mainpage ul li a {
+
−
  display: block;
+
−
  font-size: 16px !important;
+
−
  color: #ffffff;
+
−
  -webkit-transition: background-color 0.3s;
+
−
          transition: background-color 0.3s;
+
−
}
+
−
footer .footer-mainpage ul li a:hover {
+
−
  color: #363638 !important;
+
−
  font-weight: bold;
+
−
}
+
−
 
+
−
footer .footer-mainpage a:hover {
+
−
  color: #363638 !important;
+
−
  font-weight: bold;
+
−
}
+
−
 
+
−
footer .texts ul a {
+
−
  font-weight: bold;
+
−
  text-decoration: none;
+
−
  color: #ffffff;
+
−
  padding: 15px 30px;
+
−
  font-size: 14px !important;
+
−
}
+
−
 
+
−
 
+
−
@media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
+
−
 
+
−
  html {
+
−
    position: relative;
+
−
    height: 100%;
+
−
    min-width: 360px;
+
−
    text-align: center;
+
−
    background-color: white;
+
−
    background-size: cover;
+
−
    font-size:16px !important;
+
−
  }
+
−
 
+
−
  header, body {
+
−
    height: 100%;
+
−
    min-height: 600px; /* So that the bottom bar does not go over the picture on a small screen */
+
−
    margin: 0 0 0px;
+
−
    padding: 0;
+
−
  }
+
−
 
+
−
  #dropdown {
+
−
    width: auto;
+
−
  }
+
−
  #dropdown.align-center ul {
+
−
    text-align: left;
+
−
  }
+
−
  #dropdown.align-right > ul > li {
+
−
    float: none;
+
−
  }
+
−
  #dropdown ul {
+
−
    width: auto;
+
−
  }
+
−
  #dropdown .submenuArrow,
+
−
  #dropdown #indicatorContainer {
+
−
    display: none;
+
−
  }
+
−
  #dropdown > ul {
+
−
    height: auto;
+
−
    display: block;
+
−
  }
+
−
  #dropdown > ul > li {
+
−
    float: none;
+
−
  }
+
−
  #dropdown li,
+
−
  #dropdown > ul > li {
+
−
    display: none;
+
−
  }
+
−
  #dropdown ul ul,
+
−
  #dropdown ul ul ul,
+
−
  #dropdown ul > li:hover > ul,
+
−
  #dropdown ul ul > li:hover > ul,
+
−
  #dropdown.align-right ul ul,
+
−
  #dropdown.align-right ul ul ul,
+
−
  #dropdown.align-right ul > li:hover > ul,
+
−
  #dropdown.align-right ul ul > li:hover > ul {
+
−
    position: relative;
+
−
    left: auto;
+
−
    top: auto;
+
−
    opacity: 1;
+
−
    padding-left: 0;
+
−
    padding-right: 0;
+
−
    right: auto;
+
−
  }
+
−
  #dropdown ul .has-sub::after {
+
−
    display: none;
+
−
  }
+
−
  #dropdown ul li a {
+
−
    padding: 12px 20px;
+
−
  }
+
−
  #dropdown ul ul li a {
+
−
    border: 0;
+
−
    background: none;
+
−
    width: auto;
+
−
    padding: 28px 35px;
+
−
  }
+
−
  #dropdown.align-right ul ul li a {
+
−
    text-align: left;
+
−
  }
+
−
  #dropdown ul ul li:hover > a.lab > a.mod {
+
−
    background: none;
+
−
    color: #363638;
+
−
  }
+
−
  #dropdown ul ul ul a {
+
−
    padding: 8px 50px;
+
−
  }
+
−
  #dropdown ul ul ul ul a {
+
−
    padding: 8px 65px;
+
−
  }
+
−
  #dropdown ul ul ul ul ul a {
+
−
    padding: 8px 80px;
+
−
  }
+
−
  #dropdown ul ul ul ul ul ul a {
+
−
    padding: 8px 95px;
+
−
  }
+
−
  #dropdown > ul > #menu-button {
+
−
    display: block;
+
−
    cursor: pointer;
+
−
  }
+
−
  #dropdown #menu-button > a {
+
−
    padding: 14px 20px;
+
−
  }
+
−
  #dropdown ul.open li,
+
−
  #dropdown > ul.open > li {
+
−
    display: block;
+
−
  }
+
−
  #dropdown > ul.open > li#menu-button > a {
+
−
    color: #fff;
+
−
    border-bottom: 1px solid rgba(150, 150, 150, 0.1);
+
−
  }
+
−
  #dropdown ul ul::after {
+
−
    display: none;
+
−
  }
+
−
  #dropdown #menu-button::after {
+
−
    display: block;
+
−
    content: '';
+
−
    position: absolute;
+
−
    height: 3px;
+
−
    width: 22px;
+
−
    border-top: 2px solid #7a8189;
+
−
    border-bottom: 2px solid #7a8189;
+
−
    right: 20px;
+
−
    top: 15px;
+
−
  }
+
−
 
+
−
  #dropdown #menu-button::before {
+
−
    display: block;
+
−
    content: '';
+
−
    position: absolute;
+
−
    height: 3px;
+
−
    width: 22px;
+
−
    border-top: 2px solid #7a8189;
+
−
    right: 20px;
+
−
    top: 25px;
+
−
  }
+
−
  #dropdown ul.open #menu-button::after,
+
−
  #dropdown ul.open #menu-button::before {
+
−
    border-color: #fff;
+
−
  }
+
−
 
+
−
 
+
−
 
+
−
/* Other than dropdown menu */
+
−
 
+
−
  footer .footer-social ul li a {
+
−
    font-size: 12px !important;
+
−
  }
+
−
  footer .texts ul a {
+
−
    font-size: 12px !important;
+
−
  }
+
−
  .pe-2x {
+
−
    font-size: 1.5em;
+
−
  }
+
−
  .container {
+
−
    width: auto !important;
+
−
  }
+
−
  #mainlogo {
+
−
    background-image: url("https://static.igem.org/mediawiki/2017/9/92/T--Aalto-Helsinki--mainlogo-mobile.png");
+
−
    background-size: auto 100%;
+
−
    background-repeat: no-repeat;
+
−
    max-height: 152px;
+
−
  }
+
−
  .porify {
+
−
  text-align: center;
+
−
  width: 95%;
+
−
  margin: auto;
+
−
}
+
−
 
+
−
 
+
−
}
+
−
 
+
−
 
+
−
 
+
−
</style>
+
−
 
+
−
<!-- THIS IS WHERE THE HTML BEGINS -->
+
−
 
+
−
<head>
+
−
 
+
−
  <meta charset='utf-8'>
+
−
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
 
+
−
<!-- This tells the browser that your page is responsive -->
+
−
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
+
−
 
+
−
  <link rel="stylesheet" href="https://2017.igem.org/Template:Aalto-Helsinki">
+
−
  <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
+
−
  <script src="script.js"></script>
+
−
  <!--MathJax hosted by iGEM-->
+
−
  <script src="https://2017.igem.org/common/MathJax-2.5-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
+
−
  <!--Vector social media icons provided by Pixeden-->
+
−
  <link rel="stylesheet" href="./pe-icon-social/css/pe-icon-social.css">
+
−
  <link rel="stylesheet" href="./pe-icon-social/css/helper.css">
+
−
 
+
−
    <!-- Quicksand font -->
+
−
    <link href='//fonts.googleapis.com/css?family=Quicksand' rel='stylesheet'>
+
−
    <!-- Work Sans font -->
+
−
    <link href='https://fonts.googleapis.com/css?family=Work+Sans' rel='stylesheet'>
+
−
 
+
−
  <title>Aalto-Helsinki</title>
+
−
 
+
−
</head>
+
−
 
+
−
<body>
+
−
<!--HTML5 syntax doesn't work so hack-->
+
−
<div id="space"><br></div>
+
−
  <div id="mainlogo">
+
−
    <a href="https://2017.igem.org/Team:Aalto-Helsinki"><span class="link-spanner"></span>
+
−
    </a><br><br><br><br><br><br><br><br>
+
−
  </div>
+
 
<br>
 
<br>
−
<!-- DROPDOWN MENU -->
 
−
<div id='dropdown'>
 
−
<ul>
 
−
  <li class='active has-sub'><a class='lab' href='https://2017.igem.org/Team:Aalto-Helsinki/Description'>Laboratory</a>
 
−
      <ul>
 
−
        <li class='has-sub'>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Description">Overview</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Laboratory_Theory">Theoretical Background</a></li>
 
−
            <li class='has-sub'><a href="https://2017.igem.org/Team:Aalto-Helsinki/Experiments">Materials and Methods</a>
 
−
                <ul>
 
−
                    <li class='last'><a href="https://2017.igem.org/Team:Aalto-Helsinki/Protocols">Protocols</a></li>
 
−
                </ul>
 
−
            </li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Results">Results and Discussion</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Laboratory_Future">Future Perspectives</a></li>
 
−
        </li>
 
−
      </ul>
 
−
  </li>
 
−
  <li class='active has-sub'><a class='mod' href='https://2017.igem.org/Team:Aalto-Helsinki/Model'>Modeling</a>
 
−
      <ul>
 
−
        <li class='has-sub'>
 
−
        <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Model">Overview</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Model_Theory">Theoretical Background</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Model_Setup">Simulation Setup</a></li>
 
−
        <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Model_Results">Results and Discussion</a></li>
 
−
        </li>
 
−
      </ul>
 
−
  </li>
 
−
 
−
  <li class='active has-sub'><a class='hp' href='https://2017.igem.org/Team:Aalto-Helsinki/Human_Practices'>Human Practices</a>
 
−
      <ul>
 
−
        <li class='has-sub'>
 
−
            <li><a href='https://2017.igem.org/Team:Aalto-Helsinki/Human_Practices'>Overview</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Story">Project</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Education">Public Outreach</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/HP/Silver">Judging</a></li>
 
−
        </li>
 
−
      </ul>
 
−
  </li>
 
−
 
−
  <li class='active has-sub'><a class='com' href='https://2017.igem.org/Team:Aalto-Helsinki/Community'>Community</a>
 
−
      <ul>
 
−
        <li class='has-sub'>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Community">Overview</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Parts">Parts</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Composite_Part">Composite Part</a></li>
 
−
<li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Improve">Improved Part</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/InterLab">InterLab</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Collaborations">Collaborations</a></li>
 
−
        </li>
 
−
      </ul>
 
−
  </li>
 
−
 
−
  <li class='active has-sub'><a class='peo' href='https://2017.igem.org/Team:Aalto-Helsinki/Team'>People</a>
 
−
      <ul>
 
−
        <li class='has-sub'>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Team">Team Members</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Advisors">Advisors</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Attributions">Attributions</a></li>
 
−
            <li><a href="https://2017.igem.org/Team:Aalto-Helsinki/Sponsors">Sponsors</a></li>
 
−
        </li>
 
−
      </ul>
 
−
  </li>
 
−
</ul>
 
−
</div>
 
  
 +
<!-- FOOTER -->
 +
        <footer>
 +
            <div class="footer-social">
 +
                      <div class="texts">
 +
                        <ul class="pe-social">
 +
                        <a href="https://2017.igem.org/Team:Aalto-Helsinki">HOME</a>
 +
                        <a href="http://www.aalto.fi/en/">AALTO UNIVERSITY</a>
 +
                        <a href="http://www.aaltohelsinki.com/2017/index.html"><img class="some" src="https://static.igem.org/mediawiki/2017/f/f1/T--Aalto-Helsinki--home_icon.png"></a>
 +
                        <li><a href="https://www.facebook.com/AaltoHelsinki/"><i class="pe-so-facebook pe-hover pe-2x"></i></a></li>
 +
                        <li><a href="https://www.instagram.com/aaltohelsinki_igem/"><i class="pe-so-instagram pe-hover pe-2x"></i></a></li>
 +
                        <li><a href="https://twitter.com/aaltohelsinki?lang=en"><i class="pe-so-twitter pe-hover pe-2x"></i></a></li>
 +
                        <li><a href="https://www.linkedin.com/company-beta/16253263/"><i class="pe-so-linkedin pe-hover pe-2x"></i></a></li>
 +
                        <a href="https://www.helsinki.fi/en">UNIVERSITY OF HELSINKI</a>
 +
                        <a href="https://2017.igem.org/Team:Aalto-Helsinki/Map">SITE MAP</a>
 +
                        </ul>
 +
                    </div>
 +
                </div>
 +
        </footer>
 +
</body>
 
</html>
 
</html>

Revision as of 08:54, 29 October 2017

Aalto-Helsinki




Safety

We and our universities take safety seriously. “Horror stories” are important: even though low safety level biology laboratories may seem free of dangers, it is not the case. Although the risks differ from the perhaps more evident risks in a chemistry laboratory, for example, it is even more likely that things go wrong when one does not spare the time and effort to consider safety. You can find our filled Safety Form from here. On this page, we will explain in more detail what safety measures we have taken into account, what kind of safety questions we have considered and why we find those areas important.

Safety in Laboratory Work

Safety training for the whole team was provided by Aalto University before starting laboratory work, as we worked in their laboratories. Even though most members of our team had taken several laboratory safety courses before, this training introduced Aalto University practices and waste management to us. We collected safety-related materials to our team Drive folder, so that the members who had no laboratory experience could study the basics, in case that they would need to help out in the lab. Safe lab work - liquid nitrogen? What are some of the more dangerous chemicals that were actually used during the summer? Less harmful chemicals used in Aalto University laboratories. The university hears what its employees say and quickly changes practices and substances that pose a safety threat. We appreciate this practice. Safe Shipment. Any problems? How did you solve them?



Our cloning organism was the TOP10 strain of Escherichia coli, whereas for production and antimicrobial activity testing, the T7 (Safety data sheet) express competent E. coli was used. Both of these organisms belong to Risk Group 1. This ensured safe handling in our Safety Level 1 laboratory, as we did not have access to laboratories with higher safety levels. We were originally considering antimicrobial testing of our produced peptide with Staphylococcus Aureus, Propionibacterium acnes and possibly other organisms. However, we did not proceed to those tests, as we could not find a proper safety level laboratory, and we could also verify the activity of our peptide by other means. We successfully demonstrated that the peptide we produced is antimicrobially active against the production strain of E. coli. Additionally, there is already data available of the activity of our peptide against P. acnes, S. Aureus and several other organisms. Furthermore, our construct with the peptide (DCD-1L) linked to the cellulose binding domain (CBM) was not active against E. coli, it is most likely not active against pathogens, either. Had we had the chance to continue our experiments, we would have tested the activity with liposomes - simulating the lipid bilayer constitution of the pathogens. This was suggested to us by the Estonian team instructors. We are grateful for the brilliant suggestion, though!

Safety in the Concept Design

We developed a concept of an acne treatment hydrogel with our dermcidin peptide (DCD-1L). Considering our concept and product design, the end product needs to be safe to use on the human skin, on an everyday basis. We are lucky in this regard, as the peptide we worked with is already present on the human skin. The only thing that needs to be considered is whether abnormally high concentrations of the peptide risk the development of resistance against it. In that case, the body would lose its natural mechanism of defense against acne. One article hypothesizes, however, that it may be much less likely that resistance develops against this peptide, as the peptide is evolutionarily very recent and resistance would require big changes in the constitution of the bacterial cell wall or membrane.

As dermcidin’s mode of action is currently not known for certain, the defense mechanisms that bacteria may develop are also pure guesses. Some caution should therefore be exercised. However, considering other current methods of treating acne, our peptide seems like the least risky option. Compared to antibiotics, which are used to combat far more dangerous diseases, resistance against our peptide does not pose a huge public health risk. From the patient’s perspective, our peptide is a great solution in the sense that it does not likely induce any side effects, as it only acts on our skin. Although being very effective in diminishing acne, isotretinoin sometimes induces symptoms of depression and is especially difficult to take as a woman: one must not be pregnant, breastfeeding and the likelihood that one gets pregnant must be very low. This is because isotretinoin is teratogenic - it can disturb the development of an embryo or a fetus. In medicine, a perfect solution may not always be available. Thus “good treatment” could be seen as the least risky option.

During the summer, we had two major application areas in mind: acne and wound treatment. In wound treatment, many more safety questions would be relevant. One would need to consider whether dermcidin causes any problems if it enters the bloodstream. We discovered that wound care is a very complex application area, where no perfect product or method exists. We discussed with Kirsi Isoherranen, MD and found out that clinical studies are hardly ever conducted in a reliable manner, because every person and every wound is very different. Our conclusion was that our peptide may not be efficient enough in this application area, as it is really important that no harmful bacteria remain once the wound area is cleaned. DCD-1L could not most likely compete with silver products that are on the market, even if the silver products do not always work as well as expected [SOURCE].

A good side of the DCD-1L peptide is that it is likely that introducing it to the skin, even in much higher concentrations than it naturally is, would not cause significant changes in the skin microbiota. This is of course something that cannot be known for certain, and it would be wise to test it.

References

[1] Writers, YEAR. Name of article / book. Publication. Accessible at: [url here].
[2] Writers, YEAR. Name of article / book. Publication. Accessible at: [url here].
[3] Writers, YEAR. Name of article / book. Publication. Accessible at: [url here].
[4] Writers, YEAR. Name of article / book. Publication. Accessible at: [url here].
[5] Writers, YEAR. Name of article / book. Publication. Accessible at: [url here].