Team:Alberta/MainSafety

From 2013.igem.org

(Difference between revisions)
(remove speech bubble)
(Blanked the page)
 
(7 intermediate revisions not shown)
Line 1: Line 1:
-
<html>
+
 
-
  <head>
+
-
  <style type="text/css">
+
-
    .titlebar {
+
-
      height:130px;
+
-
      width:100%;
+
-
    }
+
-
    .bin {
+
-
      background:url('/wiki/images/e/e4/2013AlbertaBackground.png');
+
-
      background-size:100% auto;
+
-
      padding-top:20px;
+
-
    }
+
-
    @-moz-document url-prefix() {
+
-
      .nav-icon {
+
-
        background-image:url('/wiki/images/6/69/Nav-icon.png');
+
-
        display:inline-block;
+
-
        position:fixed;
+
-
        width:23px;
+
-
        height:37px;
+
-
        margin-top:-17px;
+
-
        margin-left:-95px;
+
-
      }
+
-
    }
+
-
    .nav-icon {
+
-
      background-image:url('/wiki/images/6/69/Nav-icon.png');
+
-
      display:inline-block;
+
-
      position:fixed;
+
-
      width:23px;
+
-
      height:37px;
+
-
      margin-top:-17px;
+
-
    }
+
-
    .block {
+
-
      background-color:white;
+
-
      border:1px grey solid;
+
-
      padding:10px;
+
-
      margin:10px;
+
-
      border-radius:5px;
+
-
      box-shadow: 0px 0px 30px #444444;
+
-
    }
+
-
    .titlebar {
+
-
      position:fixed;
+
-
      top:0px;
+
-
      height:130px;
+
-
      margin-left:-5px;
+
-
      width:975px;
+
-
      z-index:2;
+
-
      background-color:#FFF;
+
-
    }
+
-
    .content-title {
+
-
      text-align:center;
+
-
      font-size:3em;
+
-
    }
+
-
    .titlebar h3, h4 {
+
-
      text-align:center;
+
-
    }
+
-
    .sidebar {
+
-
      position:fixed;
+
-
      top:190px;
+
-
      float:left;
+
-
      z-index:3;
+
-
      padding: 0 0px 0px 40px;
+
-
    }
+
-
    .main {
+
-
      position:relative;
+
-
      float:right;
+
-
      width:720px;
+
-
    }
+
-
    .clear {
+
-
      clear:both;
+
-
    }
+
-
  .ualberta-logo {
+
-
      position:fixed;
+
-
      margin-left:70px;
+
-
      margin-top:-70px;
+
-
      width:180px;
+
-
    }
+
-
    .igem-logo {
+
-
      position:fixed;
+
-
      margin-left:650px;
+
-
      margin-top:-100px;
+
-
      width: 150px;
+
-
    }
+
-
    .igem-bar {
+
-
      position:relative;
+
-
      float:right;
+
-
    }
+
-
    .igem-bar a {
+
-
      padding:0 !important;
+
-
    }
+
-
    .igem-bar img {
+
-
      height:38px;
+
-
    }
+
-
    .tooltip {
+
-
      width:100%;
+
-
    }
+
-
    .tooltip .saying {
+
-
      background: #EEE;
+
-
      color: #444;
+
-
      left: 100px;
+
-
      margin-bottom: 15px;
+
-
      opacity: 0;
+
-
      padding: 20px;
+
-
      position: absolute;
+
-
      visibility: hidden;
+
-
      min-width:200px;
+
-
      max-width:500px;
+
-
      -webkit-transform: translateX(10px);
+
-
        -moz-transform: translateX(10px);
+
-
          -ms-transform: translateX(10px);
+
-
          -o-transform: translateX(10px);
+
-
              transform: translateX(10px);
+
-
      -webkit-transition: all .25s ease-out;
+
-
        -moz-transition: all .25s ease-out;
+
-
          -ms-transition: all .25s ease-out;
+
-
            -o-transition: all .25s ease-out;
+
-
              transition: all .25s ease-out;
+
-
      -webkit-border-radius:6px;
+
-
        -moz-border-radius:6px;
+
-
          -ms-border-radius:6px;
+
-
            -o-border-radius:6px;
+
-
              border-radius:6px;
+
-
      -webkit-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
+
-
        -moz-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
+
-
          -ms-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
+
-
            -o-box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
+
-
              box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.28);
+
-
    }
+
-
    .tooltip .saying {
+
-
      content: " ";
+
-
      top:100px;
+
-
      display:block;
+
-
      left: 200px;
+
-
      max-height:1000px;
+
-
      position: absolute;
+
-
    } 
+
-
    .tooltip .saying:after {
+
-
      border-bottom: solid transparent 10px;
+
-
      border-top: solid transparent 10px;
+
-
      border-right: solid #EEE 10px;
+
-
      left: 10px;
+
-
      top:10px;
+
-
      content: "";
+
-
      margin-left:-16px;
+
-
      position: absolute;
+
-
      width: 0;
+
-
      max-height:1000px;
+
-
      display:block;
+
-
    }
+
-
    .tooltip:hover .saying {
+
-
      opacity: 1;
+
-
      visibility: visible;
+
-
      -webkit-transform: translateX(0px);
+
-
        -moz-transform: translateX(0px);
+
-
          -ms-transform: translateX(0px);
+
-
            -o-transform: translateX(0px);
+
-
              transform: translateX(0px);
+
-
    }
+
-
    .active {
+
-
      color:#04acec !important;
+
-
    }
+
-
    .navbar, .navbar ul {
+
-
      margin:0;
+
-
      padding:0;
+
-
      list-style:none;
+
-
    }
+
-
    .navbar {
+
-
      width:963px;
+
-
      margin:60px auto;
+
-
      position:fixed;
+
-
      top:70px;
+
-
      z-index:4;
+
-
      border: 1px solid #DDD;
+
-
      background-color:#FFF;
+
-
      background-image: -moz-linear-gradient(#FFF, #DDD);
+
-
      background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#DDD));
+
-
      background-image: -webkit-linear-gradient(#FFF, #DDD);
+
-
      background-image: -ms-linear-gradient(#FFF, #DDD);
+
-
      background-image: linear-gradient(#FFF, #DDD);
+
-
      -moz-box-shadow: 0 1px 1px #444, 0 1px 0 #444;
+
-
      -webkit-box-shadow: 0 1px 1px #444, 0 1px 0 #444;
+
-
      box-shadow: 0 1px 1px #444, 0 1px 0 #444;
+
-
      zoom:1;
+
-
    }
+
-
    .navbar:before, .navbar:after {
+
-
      content: "";
+
-
      display: table;
+
-
    }
+
-
    .navbar:after {
+
-
      clear:both;
+
-
    }
+
-
    .navbar li {
+
-
      float:left;
+
-
      border-right:1px solid #CCC;
+
-
      -moz-box-shadow:1px 0 0 #EEE;
+
-
      -webkit-box-shadow: 1px 0 0 #EEE;
+
-
      box-shadow: 1px 0 0 #EEE;
+
-
      position: relative;
+
-
    }
+
-
    .navbar a {
+
-
      float: left;
+
-
      padding: 12px 30px;
+
-
      color: #444;
+
-
      font: bold 12px Arial, Helvetica;
+
-
      text-decoration:none;
+
-
      /*text-shadow: 0 1px 0 #333;*/
+
-
    }
+
-
    .navbar li:hover > a {
+
-
      color:#BBB;
+
-
    }
+
-
    .navbar li a:hover { /* IE6 only */
+
-
      color:#BBB;
+
-
    }
+
-
    .navbar ul {
+
-
      margin:20px 0 0 0;
+
-
      _margin: 0; /* IE6 only */
+
-
      opacity: 0;
+
-
      visibility: hidden;
+
-
      position:absolute;
+
-
      top:38px;
+
-
      left:0;
+
-
      z-index:1;
+
-
      background:#FFF;
+
-
      background: -moz-linear-gradient(#FFF, #CCC);
+
-
      background-image: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#CCC));
+
-
      background: -webkit-linear-gradient(#FFF, #CCC);
+
-
      background: -o-linear-gradient(#FFF, #CCC);
+
-
      background: -ms-linear-gradient(#FFF, #CCC);
+
-
      background: linear-gradient(#FFF, #CCC);
+
-
      -moz-box-shadow: 0 -1px rgba(255,255,255,.3);
+
-
      -webkit-box-shadow: 0 -1px rgba(255,255,255,.3);
+
-
      -box-shadow:0 -1px 0 rgba(255,255,255,.3);
+
-
      -moz-border-radius: 3px;
+
-
      -webkit-border-radius: 3px;
+
-
      border-radius: 3px;
+
-
      -webkit-transition: all .2s ease-in-out;
+
-
      -moz-transition: all .2s ease-in-out;
+
-
      -ms-transition: all .2s ease-in-out;
+
-
      -o-transition: all .2s ease-in-out;
+
-
      transition: all .2s ease-in-out;
+
-
    }
+
-
    .navbar li:hover > ul {
+
-
      opacity: 1;
+
-
      visibility: visible;
+
-
      margin:0;
+
-
    }
+
-
    .navbar ul ul {
+
-
      top:0;
+
-
      left:150px;
+
-
      margin:0 0 0 20px;
+
-
      _margin:0;/*IE6 only*/
+
-
      -moz-box-shadow:-1px 0 0 rgba(255,255,255,.3);
+
-
      -webkit-box-shadow:-1px 0 0 rgba(255,255,255,.3);
+
-
      box-shadow:-1px 0 0 rgba(255,255,255,.3);
+
-
    }
+
-
    .navbar ul li {
+
-
      float:none;
+
-
      display:block;
+
-
      border:0;
+
-
      _line-height:0; /*IE6 only*/
+
-
      -moz-box-shadow: 0 1px 0 #AAA, 0 2px 0 #FFF;
+
-
      -webkit-box-shadow: 0 1px 0 #AAA, 0 2px 0 #FFF;
+
-
      box-shadow: 0 1px 0 #AAA, 0 2px 0 #FFF;
+
-
    }
+
-
    .navbar ul li:last-child {
+
-
      -moz-box-shadow:none;
+
-
      -webkit-box-shadow:none;
+
-
      box-shadow:none;
+
-
    }
+
-
    .navbar ul a {
+
-
      padding:10px;
+
-
      width:130px;
+
-
      _height:10px;/*IE6 only*/
+
-
      display:block;
+
-
      white-space:nowrap;
+
-
      float:none;
+
-
      text-transform:none;
+
-
    }
+
-
    .navbar ul a:hover {
+
-
      background-color:#0186ba;
+
-
      background-image: -moz-linear-gradient(#04acec, #0186ba);
+
-
      background-image: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
+
-
      background-image: -webkit-linear-gradient(#04acec, #0186ba);
+
-
      background-image: -ms-linear-gradient(#04acec, #0186ba);
+
-
      background-image: linear-gradient(#04acec, #0186ba);
+
-
    }
+
-
    .navbar ul li:first-child > a {
+
-
      -moz-border-radius: 3px 3px 0 0;
+
-
      -webkit-border-radius: 3px 3px 0 0;
+
-
      border-radius: 3px 3px 0 0;
+
-
    }
+
-
    .navbar ul li:first-child > a:after {
+
-
      content:'';
+
-
      position:absolute;
+
-
      left:40px;
+
-
      top:-6px;
+
-
      border-left:6px solid transparent;
+
-
      border-right:6px solid transparent;
+
-
      border-bottom:6px solid #FFF;
+
-
    }
+
-
    .navbar ul ul li:first-child a:after {
+
-
      left:-6px;
+
-
      top:50%;
+
-
      margin-top:-6px;
+
-
      border-left:0;
+
-
      border-bottom:6px solid transparent;
+
-
      border-top: 6px solid transparent;
+
-
      border-right:6px solid #3b3b3b;
+
-
    }
+
-
    .navbar ul li:first-child a:hover:after {
+
-
      border-bottom-color: #04acec;
+
-
    }
+
-
    .navbar ul ul li:first-child a:hover:after {
+
-
      border-right-color: #0299d3;
+
-
      border-bottom-color:transparent;
+
-
    }
+
-
    .navbar ul li:last-child > a {
+
-
      -moz-border-radius: 0 0 3px 3px;
+
-
      -webkit-border-radius: 0 0 3px 3px;
+
-
      border-radius: 0 0 3px 3px;
+
-
    }
+
-
    .centered {
+
-
      text-align:center;
+
-
    }
+
-
    .centered-well {
+
-
      text-align:center;
+
-
      width:80%;
+
-
      margin:0 auto;
+
-
      padding:5px;
+
-
      background-color:#CCC;
+
-
      border-radius:6px;
+
-
      -moz-border-radius:6px;
+
-
      -o-border-radius:6px;
+
-
      -webkit-border-radius:6px;
+
-
    }
+
-
    .thumbnails {
+
-
      padding: 35px;
+
-
      width:700px;
+
-
      margin:0 auto;
+
-
    }
+
-
    .thumbnail {
+
-
      position:relative;
+
-
      display:inline-block;
+
-
      left:180px;
+
-
    }
+
-
    .thumbnail img{
+
-
      /* ... */
+
-
      height:100px;
+
-
      position:relative;
+
-
      -webkit-transition: all .25s ease-out;
+
-
        -moz-transition: all .25s ease-out;
+
-
          -ms-transition: all .25s ease-out;
+
-
            -o-transition: all .25s ease-out;
+
-
              transition: all .25s ease-out;
+
-
    }   
+
-
    .thumbnail img:hover {
+
-
      transform:scale(4,4);
+
-
      -webkit-transform:scale(4,4);
+
-
        -moz-transform:scale(4,4);
+
-
        -ms-transform:scale(4,4);
+
-
          -o-transform:scale(4,4);
+
-
      z-index:999;
+
-
      background-color:white;
+
-
      border:solid 2px #CCC;
+
-
      border-radius:1px;
+
-
      -moz-border-radius:1px;
+
-
      -o-border-radius:1px;
+
-
      -webkit-border-radius:1px;
+
-
      -moz-box-shadow: 0px 0px 30px #000;
+
-
      -o-box-shadow: 0px 0px 30px #000;
+
-
      -webkit-box-shadow: 0px 0px 30px #000;
+
-
      box-shadow: 0px 0px 30px #000;
+
-
     
+
-
    }
+
-
  </style>
+
-
  </head>
+
-
  <body>
+
-
    <div class="titlebar">
+
-
<br>
+
-
      <h3><font color="#A80000"><font size="6">The Littlest Mapmaker</font></font></h3>
+
-
      <h4><i><font size="2">"Exploration into the world of <font color="#A80000">DNA Computing</font>"<br/>
+
-
        Team Alberta: University of Alberta</font></i></h4>
+
-
      <a href="http://www.ualberta.ca" class="ualberta-logo"><img src="/wiki/images/b/b3/Ualberta-logo.png" alt="University of Alberta"></img></a>
+
-
      <a href="https://2013.igem.org" class="igem-logo"><img src="/wiki/images/a/ad/IGem-logo.png" alt="iGem Main Page"></img></a>
+
-
    </div>
+
-
    <div class="bin">
+
-
      <ul class="navbar">
+
-
        <li><a  href="/Team:Alberta">Home</a></li>
+
-
        <li><a id="project" href="#">Project</a>
+
-
          <ul>
+
-
            <li><a href="/Team:Alberta/Background">Background</a></li>
+
-
            <li><a href="/Team:Alberta/Overview">Overview</a></li>
+
-
            <li><a href="/Team:Alberta/FutureDevelopment">Future Development</a></li>
+
-
          </ul>
+
-
        </li>
+
-
        <li><a id="notebook" href="#">Notebook</a>
+
-
          <ul>
+
-
            <li><a href="/Team:Alberta/Results">Results</a></li>
+
-
            <li><a href="/Team:Alberta/Protocols">Protocols</a></li>
+
-
            <li><a href="/Team:Alberta/Parts">BioBricks</a></li>
+
-
          </ul>
+
-
        </li>
+
-
        <li><a id="team" href="#">Team</a>
+
-
          <ul>
+
-
            <li><a href="/Team:Alberta/Team">Roster</a></li>
+
-
            <li><a href="https://igem.org/Team.cgi?year=2013&team_name=Alberta">Official Profile</a></li>
+
-
            <li><a href="/Team:Alberta/Attributions">Sponsors</a></li>
+
-
          </ul>
+
-
        </li>
+
-
        <li><a id="humanpractices" href="#">Human Practices</a>
+
-
          <ul>
+
-
            <li><a href="/Team:Alberta/Outreach">Outreach</a></li>
+
-
            <li><a href="/Team:Alberta/Community">Community</a></li>
+
-
          </ul>
+
-
        </li>
+
-
        <li><i class="nav-icon"></i><a id="safety" href="#" class="active">Safety</a>
+
-
          <ul>
+
-
            <li><a href="/Team:Alberta/SafetyForm">Safety Form</a></li>
+
-
            <li><a href="/Team:Alberta/FAQ">FAQ</a></li>
+
-
            <li><a href="/Team:Alberta/Resources">Resources</a></li>
+
-
          </ul>
+
-
        </li>
+
-
      <div class="igem-bar"><a href="https://2013.igem.org"><img src="/wiki/images/a/ad/IGem-logo.png"></img></a></div>
+
-
      </ul>
+
-
      <div class="sidebar">
+
-
        <div href class="tooltip"><img src="/wiki/images/7/7d/SideChar.png"></img>
+
-
        </div>
+
-
      </div>
+
-
      <div class="main">
+
-
      <div class="block">
+
-
        <p class="content-title">Where to start?</p>
+
-
      </div>
+
-
      <div class="block">
+
-
        <h3>Doesn’t <i>E. coli</i> cause food poisoning? If <i>E. coli</i> is so dangerous, why are they being used in labs?</h3>
+
-
        <ul>
+
-
          <li>Normal <i>E. coli</i> colonize the lower intestine of humans, while <b>producing Vitamin K</b> and
+
-
            <b>protecting infection</b> from other harmful bacteria.</li>
+
-
          <li>Only some strains of <i>E. coli</i> cause food poisoning, but our group is using a <b>harmless,
+
-
            nonpathogenic strain</b>. This train is engineered to contain mutations that would not allow the <i>E.
+
-
            coli</i> to survive outside the lab without particular nutrients.</li>
+
-
          <li><i>E. coli</i> provides a well-studied and well-known <b>model system</b> to test and troubleshoot new
+
-
            trials on.</li>
+
-
        </ul>
+
-
        <p>Reference: <a href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC1728375/">
+
-
          http://www.ncbi.nlm.nih.gov/pmc/articles/PMC1728375/</a></p>
+
-
        <h3>What if plasmids containing <b>antibiotic resistance genes</b> were released into the environment despite
+
-
          precautions?</h3>
+
-
        <ul>
+
-
          <li>These genes are used in synthetic biology as selection tools.</li>
+
-
          <li>There are lower chances of gene uptake by wild bacteria compared to lab-strain bacteria which
+
-
            have perforated membranes.</li>
+
-
          <li>In the case that wild bacteria did uptake the antibiotic resistance gene, that gene would
+
-
            eventually be lost in the population without exposure to the antibiotic, because it is then a
+
-
            disadvantage for the bacteria to carry the unused plasmids. (Evidence observed in past with the
+
-
            decline of specific antibiotic resistance after the human population limited that antibiotic).</li>
+
-
        </ul>
+
-
      </div>
+
-
      </div>
+
-
      <div class="clear"></div>
+
-
    </div>
+
-
  </body>
+
-
</html>
+

Latest revision as of 02:27, 29 October 2013

Retrieved from "http://2013.igem.org/Team:Alberta/MainSafety"