Team:Toronto/Notebook

From 2012.igem.org

(Difference between revisions)
(Prototype team page)
Line 1: Line 1:
-
<!-- *** What falls between these lines is the Alert Box!  You can remove it from your pages once you have read and understood the alert *** -->
 
-
 
<html>
<html>
-
<div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
+
<body>
-
<div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
+
 
-
This is a template page. READ THESE INSTRUCTIONS.
+
<!-- =============================================================
 +
 
 +
The following was written by Moustafa Abdalla for iGEM UToronto.
 +
 
 +
 
 +
Permission is granted, free of charge, to any person reading the code,
 +
to use, copy, modify, merge, publish, distribute, sublicense, and/or
 +
sell copies of the code, subject ONLY to the following condition:
 +
 
 +
******* This permission notice shall be included in all copies or
 +
substantial portions of the code. *********
 +
 
 +
Please enjoy :) .
 +
===================================================================-->
 +
 
 +
 
 +
 
 +
<!--==========================General Document Styling
 +
And CSS for Contact Buttons================-->
 +
<style>
 +
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
 +
    display:none;}
 +
#top-section {
 +
    background-color:#ccff99;
 +
background-repeat: no-repeat;
 +
    background-position: center top;
 +
height:1000px ! important;
 +
}
 +
body {
 +
    background: white url('http://igemtoronto.files.wordpress.com/2012/07/white-writing-29491444-516-350.jpg') no-repeat center top;
 +
    background-attachment: fixed;
 +
    height:0px;
 +
}
 +
#content{height:0px}
 +
#fisheye_menu {
 +
 
 +
list-style: none;
 +
padding: 0;
 +
margin: 10px;
 +
height: 81px;
 +
}
 +
#fisheye_menu {
 +
list-style: none;
 +
padding: 0;
 +
margin: 10px;
 +
height: 140px;
 +
}
 +
#fisheye_menu li {
 +
position: relative;
 +
display: block;
 +
float: left;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
#fisheye_menu span {
 +
position: absolute;
 +
top: 100%;
 +
left: 0;
 +
text-align: center;
 +
width: 95px;
 +
 
 +
padding: 1px;
 +
 
 +
margin: 0;
 +
border: solid 1px #bbb;
 +
color: #333;
 +
background: #eee;
 +
}
 +
#fisheye_menu a {
 +
text-decoration: none;
 +
margin: 0;
 +
padding: 0;
 +
}
 +
#fisheye_menu img {
 +
border: 0;
 +
vertical-align: top;
 +
}
 +
 
 +
div.abc{
 +
  background-color :#f5f5f5;
 +
  width: 400px;
 +
  margin: 0 auto;
 +
  padding: 0;
 +
  height: 390px;
 +
    overflow-y:scroll;
 +
}
 +
div.lines {
 +
  border-left: 2px solid #ffaa9f;
 +
  border-right: 2px solid #ffaa9f;
 +
  width: 2px;
 +
  float: left;
 +
  height: 3000px;
 +
  margin-left: 40px;
 +
}
 +
 
 +
h4 {
 +
  color: #147025;
 +
  font-size: 28px;
 +
  letter-spacing: 0px;
 +
  text-align: left;
 +
  font-family: helevtica;
 +
}
 +
.list {
 +
  color: #303030;
 +
  font-size: 15px;
 +
  padding: 5 !important;
 +
  width: 350px;
 +
  font-family: helevtica neue;
 +
  border: 1px solid #dedede;
 +
}
 +
.list li {
 +
  list-style: none;
 +
  border-bottom: 1px dotted #ccc;
 +
  text-indent: 25px;
 +
  height: auto;
 +
  padding: 10px;
 +
}
 +
.list li:hover {
 +
  background-color: #ccff99;
 +
  -webkit-transition: all 0.2s;
 +
  -moz-transition:    all 0.2s;
 +
  -ms-transition:    all 0.2s;
 +
  -o-transition:      all 0.2s;
 +
}
 +
 
 +
 +
</style>
 +
 
 +
 
 +
<!--==========================Javascript for Top Menu================-->
 +
<script type="text/javascript">
 +
var fisheyemenu = {
 +
startSize : 55,
 +
endSize : 90,
 +
imgType : ".png",
 +
init : function () {
 +
var animElements = document.getElementById("fisheye_menu").getElementsByTagName("img");
 +
var titleElements = document.getElementById("fisheye_menu").getElementsByTagName("span");
 +
for(var j=0; j<titleElements.length; j++) {
 +
titleElements[j].style.display = 'none';
 +
}
 +
for(var i=0; i<animElements.length; i++) {
 +
var y = animElements[i];
 +
y.style.width = fisheyemenu.startSize+'px';
 +
y.style.height = fisheyemenu.startSize+'px';
 +
fisheyemenu.imgSmall(y);
 +
animElements[i].onmouseover = changeSize;
 +
 
 +
animElements[i].onmouseout = restoreSize;
 +
}
 +
function changeSize() {
 +
fisheyemenu.imgLarge(this);
 +
var x = this.parentNode.getElementsByTagName("span");
 +
x[0].style.display = 'block';
 +
if (!this.currentWidth) this.currentWidth = fisheyemenu.startSize;
 +
fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.endSize,15,10,0.333);
 +
}
 +
function restoreSize() {
 +
var x = this.parentNode.getElementsByTagName("span");
 +
x[0].style.display = 'none';
 +
if (!this.currentWidth) return;
 +
fisheyemenu.resizeAnimation(this,this.currentWidth,fisheyemenu.startSize,15,10,0.5);
 +
fisheyemenu.imgSmall(this);
 +
 
 +
}
 +
 
 +
},
 +
resizeAnimation : function (elem,startWidth,endWidth,steps,intervals,powr) {
 +
if (elem.widthChangeMemInt) window.clearInterval(elem.widthChangeMemInt);
 +
var actStep = 0;
 +
elem.widthChangeMemInt = window.setInterval(
 +
function() {
 +
elem.currentWidth = fisheyemenu.easeInOut(startWidth,endWidth,steps,actStep,powr);
 +
elem.style.width = elem.currentWidth+"px";
 +
elem.style.height = elem.currentWidth+"px";
 +
actStep++;
 +
if (actStep > steps) window.clearInterval(elem.widthChangeMemInt);
 +
}
 +
,intervals)
 +
},
 +
easeInOut : function (minValue,maxValue,totalSteps,actualStep,powr) {
 +
//Generic Animation Step Value Generator By www.hesido.com
 +
var delta = maxValue - minValue;
 +
var stepp = minValue+(Math.pow(((1 / totalSteps)*actualStep),powr)*delta);
 +
return Math.ceil(stepp)
 +
 
 +
},
 +
imgSmall : function (obj) {
 +
imgSrc = obj.getAttribute("src");
 +
var typePos = imgSrc.indexOf(fisheyemenu.imgType, 0);
 +
var imgName = imgSrc.substr(0, typePos);
 +
obj.setAttribute("src", imgName+"_small"+fisheyemenu.imgType);
 +
},
 +
imgLarge : function (obj) {
 +
imgSrc = obj.getAttribute("src");
 +
var typePos = imgSrc.indexOf("_small", 0);
 +
var imgName = imgSrc.substr(0, typePos);
 +
obj.setAttribute("src", imgName+fisheyemenu.imgType);
 +
}
 +
}
 +
 
 +
// Add event with wide browser support
 +
if ( typeof window.addEventListener != "undefined" )
 +
    window.addEventListener( "load", fisheyemenu.init, false );
 +
else if ( typeof window.attachEvent != "undefined" )
 +
    window.attachEvent( "onload", fisheyemenu.init );
 +
else {
 +
    if ( window.onload != null ) {
 +
        var oldOnload = window.onload;
 +
        window.onload = function ( e ) {
 +
            oldOnload( e );
 +
            fisheyemenu.init();
 +
        };
 +
    }
 +
    else
 +
        window.onload = fisheyemenu.init;
 +
}
 +
</script>
 +
 
 +
 
 +
 
 +
 
 +
 
 +
<!--==========================Actual Wiki Stuff================-->
 +
 
 +
 
 +
<div align=left style="margin-top:-1020px; margin-left:-5px">
 +
<img src="http://igemtoronto.files.wordpress.com/2012/08/contactus.jpg" alt="Banner" width="977" height="205.3"/>
</div>
</div>
-
<div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
+
 
-
You are provided with this team page template with which to start the iGEM season. You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki. You can find some examples <a href="http://2008.igem.org/Help:Template/Examples">HERE</a>.
+
 
 +
 +
<!--==========================Menu================-->
 +
 
 +
<div class="container" style=" background: #147025; margin-top:-190px;">
 +
<ul id="fisheye_menu">
 +
<li><a href="http://2012.igem.org/Team:Toronto" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_home.png" alt="" /><span> <font size=3><b>Home </span></a> </li>
 +
<li><a href="http://2012.igem.org/Team:Toronto/Contact" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_email.png" alt="" /><span>Contact</span></a></li>
 +
<li><a href="http://2012.igem.org/Team:Toronto/Team" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_teamicon.png" alt="" /><span>Team</span></a></li>
 +
<li><a href="http://2012.igem.org/Team:Toronto/Project" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_projecticon.png" alt="" /><span>Project</span></a> </li>
 +
<li><a href="http://2012.igem.org/Team:Toronto/Notebook" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_notebook.png" alt="" /><span>Notebook</span></a></li>
 +
<li><a href="http://2012.igem.org/Team:Toronto/Attributions" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_history.png" alt="" /><span>Attributions </span></a></li>
 +
<li><a href="http://2012.igem.org/Team:Toronto/HumanPractice" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_outreach.png" alt="" /><span>Human Practices (Safety & Outreach)</span></a></li>
 +
<li><a href="http://2012.igem.org/Main_Page" class="fisheye"><img src="http://igemtoronto.files.wordpress.com/2012/07/toronto_igemlogo.png" alt="" /><span>iGEM 2012 Home</span></a></li>
 +
</ul> </font></b>
</div>
</div>
-
<div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
+
 
-
You <strong>MUST</strong> have all of the pages listed in the menu below with the names specified. PLEASE keep all of your pages within your teams namespace. 
+
 
 +
 
 +
 
 +
<!--==========================Styling Sheet for Accordion and Calendar ================-->
 +
 
 +
<style rel='stylesheet' >
 +
 
 +
article.accordion
 +
{
 +
display: block;
 +
width: 43em;
 +
margin: 0 auto;
 +
background-color: #666;
 +
overflow: auto;
 +
border-radius: 5px;
 +
box-shadow: 0 3px 3px rgba(0,0,0,0.3);
 +
}
 +
article.accordion section
 +
{
 +
position: relative;
 +
display: block;
 +
float: left;
 +
width: 2em;
 +
height: 30em;
 +
margin: 0.5em 0 0.5em 0.5em;
 +
color: #333;
 +
 
 +
background-color: #333;
 +
overflow: hidden;
 +
border-radius: 3px;
 +
}
 +
article.accordion section h2
 +
{
 +
position: absolute;
 +
font-size: 1em;
 +
font-weight: bold;
 +
width: 12em;
 +
height: 2em;
 +
top: 12em;
 +
left: 0;
 +
text-indent: 1em;
 +
padding: 0;
 +
margin: 0;
 +
color: #ddd;
 +
-webkit-transform-origin: 0 0;
 +
-moz-transform-origin: 0 0;
 +
-ms-transform-origin: 0 0;
 +
-o-transform-origin: 0 0;
 +
transform-origin: 0 0;
 +
 
 +
-webkit-transform: rotate(-90deg);
 +
-moz-transform: rotate(-90deg);
 +
-ms-transform: rotate(-90deg);
 +
-o-transform: rotate(-90deg);
 +
transform: rotate(-90deg);
 +
}
 +
article.accordion section h2 a
 +
{
 +
display: block;
 +
width: 100%;
 +
line-height: 2em;
 +
text-decoration: none;
 +
color: inherit;
 +
outline: 0 none;
 +
}
 +
article.accordion section:target
 +
{
 +
width: 30em;
 +
padding: 0 1em;
 +
color: #333;
 +
background-color: #fff;
 +
}
 +
article.accordion section:target h2
 +
{
 +
position: static;
 +
font-size: 1.3em;
 +
text-indent: 0;
 +
color: #333;
 +
-webkit-transform: rotate(0deg);
 +
 
 +
-moz-transform: rotate(0deg);
 +
-ms-transform: rotate(0deg);
 +
-o-transform: rotate(0deg);
 +
transform: rotate(0deg);
 +
}
 +
article.accordion section,
 +
article.accordion section h2
 +
{
 +
-webkit-transition: all 1s ease;
 +
-moz-transition: all 1s ease;
 +
-ms-transition: all 1s ease;
 +
-o-transition: all 1s ease;
 +
transition: all 1s ease;
 +
}
 +
 
 +
div#calendar {
 +
  margin : 0 auto;
 +
  padding : 10px;
 +
  text-align : center;
 +
  width : 21em;
 +
  border : 1px solid #ccc;
 +
}
 +
 
 +
h2.calendar {
 +
  color : #669900;
 +
  font-weight : normal;
 +
}
 +
 
 +
ul#days, ul.weeks {
 +
  font-family : 'courier new', monospace;
 +
  list-style-type : none;
 +
  margin : 20px 0 20px 0;
 +
  list-style:none;
 +
}
 +
 
 +
ul#days li span {
 +
  background-color : #669900;
 +
  border : 1px solid #000;
 +
  cursor : help;
 +
  font-weight : bold;
 +
  color : #fff;
 +
  padding : 5px;
 +
}
 +
 
 +
ul.weeks li a.al, ul.weeks li a.na  {
 +
  color : #666;
 +
  text-decoration : none;
 +
  background-color : #ffffcc;
 +
  border : 1px solid #999;
 +
  padding : 5px;
 +
}
 +
 
 +
ul.weeks li a.na, ul.weeks li a.na:hover, ul.weeks li a.na:focus, ul.weeks li a.na:active  {
 +
 
 +
 
 +
  background : transparent;
 +
  color : #666;
 +
  cursor : default;
 +
}
 +
 
 +
ul.weeks li a.al:hover, ul.weeks li a.al:focus, ul.weeks li a.al:active {
 +
  color : #000;
 +
  background-color : #eecc11;
 +
  border : 1px solid #000;
 +
  text-decoration : none;
 +
  cursor : pointer;
 +
}
 +
 
 +
ul.weeks li a.nu {
 +
  color : #eee;
 +
  padding : 5px;
 +
  border : 1px solid #ccc;
 +
  background-color : #eee;
 +
  cursor : default;
 +
}
 +
 
 +
 
 +
span.sep {
 +
  display : none;
 +
}
 +
</style>
 +
 
 +
 
 +
 
 +
 
 +
<body>
 +
 
 +
<!--==========================Calendar Accordian================-->
 +
 
 +
<article class="accordion" style="margin-top:90px; margin-left:5px; position:absolute">
 +
<section id="acc1">
 +
<h2><a href="#acc1">May 2012</a></h2>
 +
<p>Click on a highlighted day to view the notebook items for that day.</p>
 +
<div id="calendar" style="margin-left:50px;">
 +
  <ul id="days">
 +
    <li>
 +
    <span title="Sunday">SU</span> <span class="sep">|</span>
 +
    <span title="Monday">MO</span> <span class="sep">|</span>
 +
    <span title="Tuesday">TU</span> <span class="sep">|</span>
 +
    <span title="Wednesday">WE</span> <span class="sep">|</span>
 +
    <span title="Thursday">TH</span> <span class="sep">|</span>
 +
    <span title="Friday">FR</span> <span class="sep">|</span>
 +
    <span title="Saturday">SA</span>
 +
    </li>
 +
  </ul>
 +
<!-- On links Below: NU = Not Used; NA = Not Active; AL = Active Link -->
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">01</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">02</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">03</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">04</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">05</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">06</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">07</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">08</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">09</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">10</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">11</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">12</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">13</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">14</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">15</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">16</a> <span class="sep">|</span>
 +
    <a class="al" href="#may17" title="Active Date Link">17</a> <span class="sep">|</span>
 +
    <a class="al" href="#may18" title="Active Date Link">18</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">19</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">20</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">21</a> <span class="sep">|</span>
 +
    <a class="al" href="#may22" title="Active Date Link">22</a> <span class="sep">|</span>
 +
    <a class="al" href="#may23" title="Active Date Link">23</a> <span class="sep">|</span>
 +
    <a class="al" href="#may24" title="Active Date Link">24</a> <span class="sep">|</span>
 +
    <a class="al" href="#may25" title="Active Date Link">25</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="Active Date Link">26</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">27</a> <span class="sep">|</span>
 +
    <a class="al" href="#may28" title="Active Date Link">28</a> <span class="sep">|</span>
 +
    <a class="al" href="#may29" title="Active Date Link">29</a> <span class="sep">|</span>
 +
    <a class="al" href="#may30" title="Active Date Link">30</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a>
 +
    </li>
 +
  </ul>
</div>
</div>
 +
</section>
 +
<section id="acc2">
 +
<h2><a href="#acc2">June 2012</a></h2>
 +
<p>Click on a highlighted day to view the notebook items for that day.</p>
 +
<div id="calendar" style="margin-left:50px;">
 +
  <ul id="days">
 +
    <li>
 +
    <span title="Sunday">SU</span> <span class="sep">|</span>
 +
    <span title="Monday">MO</span> <span class="sep">|</span>
 +
    <span title="Tuesday">TU</span> <span class="sep">|</span>
 +
    <span title="Wednesday">WE</span> <span class="sep">|</span>
 +
    <span title="Thursday">TH</span> <span class="sep">|</span>
 +
    <span title="Friday">FR</span> <span class="sep">|</span>
 +
    <span title="Saturday">SA</span>
 +
    </li>
 +
  </ul>
 +
<!-- On links Below: NU = Not Used; NA = Not Active; AL = Active Link -->
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">--</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">01</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">02</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">03</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">04</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">05</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">06</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">07</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">08</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">09</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">10</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">11</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">12</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">13</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">14</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">15</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">16</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">17</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">18</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">19</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">20</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">21</a> <span class="sep">|</span>
 +
    <a class="al" href="#" title="Active Date Link">22</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">23</a>
 +
    </li>
 +
  </ul>
 +
  <ul class="weeks">
 +
    <li>
 +
    <a class="na" href="#" title="">24</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">25</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">26</a> <span class="sep">|</span>
 +
    <a class="na" href="#" title="">27</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">28</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">29</a> <span class="sep">|</span>
 +
    <a class="nu" href="#" title="">30</a>
 +
    </li>
 +
  </ul>
</div>
</div>
-
</html>
+
</section>
 +
<section id="acc3">
 +
<h2><a href="#acc3">July 2012</a></h2>
 +
<p>Click on a highlighted day to view the notebook items for that day.</p>
 +
</section>
 +
<section id="acc4">
 +
<h2><a href="#acc4">August 2012</a></h2>
 +
<p>Click on a highlighted day to view the notebook items for that day.</p>
 +
</section>
 +
<section id="acc5">
 +
<h2><a href="#acc5">September 2012</a></h2>
 +
<p>Click on a highlighted day to view the notebook items for that day.</p>
 +
</section>
 +
</article>
-
<!-- *** End of the alert box *** -->
 
-
{| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
 
-
!align="center"|[[Team:Toronto|Home]]
 
-
!align="center"|[[Team:Toronto/Team|Team]]
 
-
!align="center"|[http://igem.org/Team.cgi?year=2012&team_name=Toronto Official Team Profile]
 
-
!align="center"|[[Team:Toronto/Project|Project]]
 
-
!align="center"|[[Team:Toronto/Parts|Parts Submitted to the Registry]]
 
-
!align="center"|[[Team:Toronto/Modeling|Modeling]]
 
-
!align="center"|[[Team:Toronto/Notebook|Notebook]]
 
-
!align="center"|[[Team:Toronto/Safety|Safety]]
 
-
!align="center"|[[Team:Toronto/Attributions|Attributions]]
 
-
|}
 
 +
<div class="abc" style="margin-top:90px; margin-left:560px; position:absolute">
 +
<div class="lines"></div>
 +
<br>
 +
<br>
 +
    <div id="may17"> <h4> &nbsp; May 17</h4> </div>
 +
<ul class="list">
 +
  <li>16 plates each of LB agar, ampicillin, tetracycline, and chloramphenicol were made.</li>
 +
  <li>To test the effectiveness of our antibiotic stock, five vials were created, and were kept in the shaker.</li>
 +
  <li>Vial one contained LB control; vial two contained LB and DH5α; vial three contained LB, DH5α, and ampicillin; vial four contained LB, DH5α, and chloramphenicol; vial five contained LB, DH5α, and tetracycline.</li>
 +
</ul>
 +
<br>
 +
<br>
 +
    <div id="may18"><h4> &nbsp;May 18</h4></div>
 +
<ul class="list">
 +
  <li>Placed all the agar plates in the fridge, as no contamination was visible. Vial two was cloudy, as expected, indicating DH5α growth. The large block of ice formed over ten years' neglect in the 4°C fridge below our lab bench was cleaned with a chisel and mallet.</li>
 +
  <li>Four plates were prepared with DH5α: LB agar; LB ampicillin plate; LB tetracycline plate; LB chloramphenicol plate.</li>
 +
  <li>Vial Two was disposed of after bleaching. Stocks of 70% and 100% EtOH were obtained free from the Bendeck lab upstairs, replenishing our meagre stock.</li>
 +
</ul>
 +
<br>
 +
<br>
 +
    <div id="may22"> <h4> &nbsp; May 22</h4> </div>
 +
<ul class="list">
 +
    <li>Made 1L of LB, as well as autoclaved some glassware. Only plate one from May 18 showed any bacterial growth after incubation at 4°C overnight, indicating good sterile technique during the training exercises yesterday. </li> <li>SNC Lavalin, Monsanto, and New England BioLabs were contacted for funding enquiries. Approached Rob Reedijk about consolidation of financial accounts. Obtained A. thaliana seed from the McCourt lab at EEB, along with their recommended growth protocol.</li>
 +
</ul>
 +
<br>
 +
<br>
 +
    <div id="may23"> <h4> &nbsp; May 23</h4> </div>
 +
<ul class="list">
 +
    <li>For demonstration purposes, we transformed cyan fluorescent protein from the BioBrick distribution plates with ampicillin resistance into DH5αC (competent DH5α).</li>
 +
    </ul>
-
You should make use of the calendar feature on the wiki and start a lab notebook. This may be looked at by the judges to see how your work progressed throughout the summer. It is a very useful organizational tool as well.
+
<br>
 +
<br>
 +
    <div id="may24"> <h4> &nbsp; May 24</h4> </div>
 +
<ul class="list">
 +
    <li>Checked the cyan fluorescent transformation, which failed. To check whether the BioBrick plasmids were compromised, or whether our technique was to blame, we will retry the transformation with another BioBrick. Ordered supplies from MedStore.</li>
 +
    </ul>
 +
 
 +
<br>
 +
<br>
 +
    <div id="may25"> <h4> &nbsp; May 25</h4> </div>
 +
<ul class="list">
 +
    <li>Made kanamycin plates, and checked on the May 24 transformations, which proved to be successful. Aimed to finalise the phytase construct.</li>
 +
    </ul>
 +
 
 +
<br>
 +
<br>
 +
    <div id="may28"> <h4> &nbsp; May 28</h4> </div>
 +
<ul class="list">
 +
    <li>Various sponsorship opportunities were pursued for the lab for much of the day. </li>
 +
    <li>  2 test transformations were performed as another tutorial. Kanamycin's efficiency was tested with the following three treatments: LB; LB and DH5αC; LB, DH5αC, and K.</li>
 +
    </ul>
 +
 
 +
<br>
 +
<br>
 +
    <div id="may29"> <h4> &nbsp; May 29</h4> </div>
 +
<ul class="list">
 +
    <li>Tested a 2µL/mL kanamycin overnight culture versus an LB blank on the spectrophotometer. Placed two different projects into the shaker:
 +
Project One (10mL LB; 10µL C; 20µL DH5α): LB control; LB, DH5α, and C; LB, DH5α, C, and BioBrick K414007.
 +
Project Two (10mL LB; 20µL DH5α): LB control; LB and DH5α; LB, DH5α, and 20µL K; LB, DH5α, and 25µL K; LB, DH5α, and 30µL K.</li>
 +
    </ul>
 +
 
 +
<br>
 +
<br>
 +
    <div id="may30"> <h4> &nbsp; May 30</h4> </div>
 +
<ul class="list">
 +
    <li>The LB controls failed from yesterday, so the 500mL container of LB from which we took yesterday's samples was thrown out. The K414007 promoter was miniprepped using a Qiagen Plasmid Extraction Kit. Using the nanodrop, we found our extraction sample to have a density of 20ng/µL – good miniprep. Performed a transformation using K414007, so as to keep plates in the fridge with this part handy.</li>
 +
    </ul>
 +
 
 +
</div>
 +
</div>
 +
 +
 
 +
<!--==========================Footer================-->
 +
 
 +
<div align=left style="margin-top:640px; margin-left:390px;  position: absolute; z-index:99">
 +
<img src="http://2012.igem.org/wiki/images/6/6a/Utoronto.png" alt="UofT Logo" width="150" height="148"/>
 +
</div>
 +
 
 +
<div align=left style="margin-top:740px; margin-left:-6px; position:absolute; z-index:98">
 +
<img src="http://2012.igem.org/wiki/images/5/5d/Toronto_green.jpg" alt="Banner" width="977" height="100px"/>
 +
</div>

Revision as of 00:03, 6 September 2012

Banner

May 2012

Click on a highlighted day to view the notebook items for that day.

  • SU | MO | TU | WE | TH | FR | SA

June 2012

Click on a highlighted day to view the notebook items for that day.

  • SU | MO | TU | WE | TH | FR | SA

July 2012

Click on a highlighted day to view the notebook items for that day.

August 2012

Click on a highlighted day to view the notebook items for that day.

September 2012

Click on a highlighted day to view the notebook items for that day.



  May 17

  • 16 plates each of LB agar, ampicillin, tetracycline, and chloramphenicol were made.
  • To test the effectiveness of our antibiotic stock, five vials were created, and were kept in the shaker.
  • Vial one contained LB control; vial two contained LB and DH5α; vial three contained LB, DH5α, and ampicillin; vial four contained LB, DH5α, and chloramphenicol; vial five contained LB, DH5α, and tetracycline.


 May 18

  • Placed all the agar plates in the fridge, as no contamination was visible. Vial two was cloudy, as expected, indicating DH5α growth. The large block of ice formed over ten years' neglect in the 4°C fridge below our lab bench was cleaned with a chisel and mallet.
  • Four plates were prepared with DH5α: LB agar; LB ampicillin plate; LB tetracycline plate; LB chloramphenicol plate.
  • Vial Two was disposed of after bleaching. Stocks of 70% and 100% EtOH were obtained free from the Bendeck lab upstairs, replenishing our meagre stock.


  May 22

  • Made 1L of LB, as well as autoclaved some glassware. Only plate one from May 18 showed any bacterial growth after incubation at 4°C overnight, indicating good sterile technique during the training exercises yesterday.
  • SNC Lavalin, Monsanto, and New England BioLabs were contacted for funding enquiries. Approached Rob Reedijk about consolidation of financial accounts. Obtained A. thaliana seed from the McCourt lab at EEB, along with their recommended growth protocol.


  May 23

  • For demonstration purposes, we transformed cyan fluorescent protein from the BioBrick distribution plates with ampicillin resistance into DH5αC (competent DH5α).


  May 24

  • Checked the cyan fluorescent transformation, which failed. To check whether the BioBrick plasmids were compromised, or whether our technique was to blame, we will retry the transformation with another BioBrick. Ordered supplies from MedStore.


  May 25

  • Made kanamycin plates, and checked on the May 24 transformations, which proved to be successful. Aimed to finalise the phytase construct.


  May 28

  • Various sponsorship opportunities were pursued for the lab for much of the day.
  • 2 test transformations were performed as another tutorial. Kanamycin's efficiency was tested with the following three treatments: LB; LB and DH5αC; LB, DH5αC, and K.


  May 29

  • Tested a 2µL/mL kanamycin overnight culture versus an LB blank on the spectrophotometer. Placed two different projects into the shaker: Project One (10mL LB; 10µL C; 20µL DH5α): LB control; LB, DH5α, and C; LB, DH5α, C, and BioBrick K414007. Project Two (10mL LB; 20µL DH5α): LB control; LB and DH5α; LB, DH5α, and 20µL K; LB, DH5α, and 25µL K; LB, DH5α, and 30µL K.


  May 30

  • The LB controls failed from yesterday, so the 500mL container of LB from which we took yesterday's samples was thrown out. The K414007 promoter was miniprepped using a Qiagen Plasmid Extraction Kit. Using the nanodrop, we found our extraction sample to have a density of 20ng/µL – good miniprep. Performed a transformation using K414007, so as to keep plates in the fridge with this part handy.
UofT Logo
Banner