Difference between revisions of "Team:NAIT Edmonton/Logbook"

Line 1: Line 1:
 
{{NAIT_Edmonton/CSS2}}
 
{{NAIT_Edmonton/CSS2}}
 +
  
 
<html>
 
<html>
  
 
<head>
 
<head>
 +
 +
 +
<title>Team NAIT 2015</title>
 +
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
 +
<link href="#" rel="stylesheet" type="text/css">
 +
<link href="https://2015.igem.org/Team:NAIT_Edmonton/reset" rel="stylesheet" type="text/css">
  
−
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
+
<script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/modernizr?action=raw&amp;ctype=text/javascript"></script>
−
<script src="https://2015.igem.org/Team:NAIT_Edmonton/jquery.easing.1.3.js?action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
+
−
<script src="https://2015.igem.org/Team:NAIT_Edmonton/jquery.booklet.1.1.0.min.js?action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
+
  
−
<link href="https://2015.igem.org/Team:NAIT_Edmonton/jquery.booklet.1.1.0?action=raw&amp;ctype=text/css" type="text/css" rel="stylesheet" media="screen" />
+
<script type="text/javascript" charset="utf-8">
 +
 
 +
  $(window).on('scroll', function(){
 +
$timeline_block.each(function(){
 +
if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
 +
$(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
 +
}
 +
});
 +
});
 +
</script>
  
−
<script src="https://2015.igem.org/Team:NAIT_Edmonton/cufon-yui.js?action=raw&amp;ctype=text/javascript" type="text/javascript"></script>
 
−
<script type="text/javascript">
 
−
Cufon.replace('h1,p,.b-counter');
 
−
Cufon.replace('.book_wrapper a', {hover:true});
 
−
Cufon.replace('.title', {textShadow: '1px 1px #C59471', fontFamily:'Source Sans Pro'});
 
−
Cufon.replace('.reference a', {textShadow: '1px 1px #C59471', fontFamily:'Source Sans Pro'});
 
−
Cufon.replace('.loading', {textShadow: '1px 1px #000', fontFamily:'Source Sans Pro'});
 
−
</script>
 
  
 
</head>
 
</head>
Line 26: Line 32:
  
 
<style type="text/css">
 
<style type="text/css">
−
.footer{position:absolute; bottom:-10px; right:-5px; }
+
.footer{position:absolute;bottom:-20px; right:-8px;}
 
</style>
 
</style>
  
Line 33: Line 39:
 
<div class="header">
 
<div class="header">
  
−
     <div class="logo"><a href="https://2015.igem.org/Team:NAIT_Edmonton">
+
     <div class="logo">
−
              <img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px"></a>
+
 
−
    </div>
+
<a href="https://2015.igem.org/Team:NAIT_Edmonton">
 +
<img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px">
 +
</a>
 +
</div>
 +
 
 +
 
 
     <div class="header_left">
 
     <div class="header_left">
 
         <ul>
 
         <ul>
Line 77: Line 88:
 
</div>
 
</div>
 
</div>
 
</div>
−
 
+
 
 
<div id="wrap">
 
<div id="wrap">
  
−
<style type="text/css">
+
 
  
−
.top_slogan {text-align:center; font-family: 'Source Sans Pro', sans-serif; color:#0D4D8C; font-size:30px; padding: 40px 0px 40px 0px; font-style:strong; line-height:40px;}
 
  
−
</style>
 
  
−
<center><div class="top_slogan">Our Summer Log Book</div></center>
 
  
−
<div class="main_content">
 
−
<center>
 
  
−
<style type="text/css">
 
  
−
*{
 
−
margin:0;
 
−
padding:0;
 
−
}
 
  
−
span.reference{
+
<section id="cd-timeline" class="cd-container">
−
font-family:Source Sans Pro;
+
<div class="cd-timeline-block">
−
display:block;
+
<div class="cd-timeline-img cd-picture">
−
font-size:12px;
+
<img src="https://static.igem.org/mediawiki/2015/f/fd/Cd-icon-picture.png" alt="Picture">
−
text-align:center;
+
</div> <!-- cd-timeline-img -->
−
margin-bottom:10px;
+
−
}
+
−
span.reference a{
+
−
color:#000;
+
−
text-transform:uppercase;
+
−
text-decoration:none;
+
−
margin:0px 20px;
+
−
}
+
−
span.reference a:hover{
+
−
color:#8BC5EB;
+
−
}
+
  
 +
<div class="cd-timeline-content" style="margin-left:-50px">
 +
<h2>First Day in Lab!</h2>
 +
<p>Our team got the overview of our work space for the summer. We were geared and ready to start the iGEM adventure!</p>
 +
<label class="btn" for="modal-001"><a class="cd-read-more">Read more</a></label>
 +
<span class="cd-date">May 4</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-movie">
 +
<img src="https://static.igem.org/mediawiki/2015/d/dc/Cd-icon-movie.png" alt="Movie">
 +
</div> <!-- cd-timeline-img -->
  
−
/* Booklet jQuery Plugin Style*/
+
<div class="cd-timeline-content">
−
.booklet{
+
<h2>Research into Silver Staining</h2>
−
-moz-box-shadow:0px 0px 1px #fff;
+
<p>Before beginning a project, it is of great importance to fully understand what it is you are planning to research. Our team focused on understanding the basics and chemistry of silver staining completely. </p>
−
-webkit-box-shadow:0px 0px 1px #fff;
+
<label class="btn" for="modal-002"><a class="cd-read-more">Read more</a></label>
−
box-shadow:0px 0px 1px #fff;
+
<span class="cd-date">May 4 to 8</span>
−
-moz-border-radius:10px;
+
</div> <!-- cd-timeline-content -->
−
-webkit-border-radius:10px;
+
</div> <!-- cd-timeline-block -->
−
border-radius:10px;
+
−
}
+
−
.booklet .b-wrap-left  {
+
−
background:#fff;
+
−
-webkit-border-top-left-radius: 10px;
+
−
-webkit-border-bottom-left-radius: 10px;
+
−
-moz-border-radius-topleft:10px;
+
−
-moz-border-radius-bottomleft: 10px;
+
−
border-top-left-radius: 10px;
+
−
border-bottom-left-radius: 10px;
+
−
}
+
−
.booklet .b-wrap-right {
+
−
background:#fff;
+
−
-webkit-border-top-right-radius: 10px;
+
−
-webkit-border-bottom-right-radius: 10px;
+
−
-moz-border-radius-topright: 10px;
+
−
-moz-border-radius-bottomright: 10px;
+
−
border-top-right-radius: 10px;
+
−
border-bottom-right-radius: 10px;
+
−
}
+
−
.booklet .b-counter {
+
−
bottom:10px;
+
−
position:absolute;
+
−
display:block;
+
−
width:90%;
+
−
height:20px;
+
−
border-top:1px solid #ddd;
+
−
color:#222;
+
−
text-align:center;
+
−
font-size:12px;
+
−
padding:5px 0 0;
+
−
background:transparent;
+
−
-moz-box-shadow:0px -1px 1px #fff;
+
−
-webkit-box-shadow:0px -1px 1px #fff;
+
−
box-shadow:0px -1px 1px #fff;
+
−
opacity:0.8;
+
−
}
+
−
.book_wrapper{
+
−
margin:0 auto;
+
−
padding-top:50px;
+
−
width:905px;
+
−
height:540px;
+
−
position:relative;
+
−
background:#FFFFFF;
+
−
        z-index:0;
+
−
}
+
−
.book_wrapper h1{
+
−
color:#13386a;
+
−
margin:5px 5px 5px 15px;
+
−
font-size:26px;
+
−
background:none;
+
−
padding-bottom:7px;
+
−
}
+
−
.book_wrapper p{
+
−
font-size:16px;
+
−
margin:5px 5px 5px 15px;
+
−
}
+
−
.book_wrapper a.article,
+
−
.book_wrapper a.demo{
+
−
background:#fff;
+
−
display:block;
+
−
width:95px;
+
−
height:41px;
+
−
text-decoration:none;
+
−
outline:none;
+
−
font-size:16px;
+
−
color:#555;
+
−
float:left;
+
−
line-height:41px;
+
−
padding-left:47px;
+
−
}
+
−
.book_wrapper a.demo{
+
−
margin-left:50px;
+
−
}
+
−
.book_wrapper a.article:hover,
+
−
.book_wrapper a.demo:hover{
+
−
background-position:50% -41px;
+
−
color:#FF0000;
+
−
}
+
−
.book_wrapper img{
+
−
margin:10px 0px 5px 35px;
+
−
width:300px;
+
−
padding:4px;
+
−
border:1px solid #ddd;
+
−
-moz-box-shadow:none;
+
−
-webkit-box-shadow:none
+
−
box-shadow:none;
+
−
}
+
−
.booklet .b-wrap-right img{
+
−
border:1px solid #E6E3C2;
+
−
}
+
−
a#next_page_button,
+
−
a#prev_page_button{
+
−
display:none;
+
−
position:absolute;
+
−
width:41px;
+
−
height:40px;
+
−
cursor:pointer;
+
−
margin-top:-20px;
+
−
top:50%;
+
−
background:#8BC5EB url(https://static.igem.org/mediawiki/2015/7/73/NAIT_Prev.png) no-repeat 0px -40px;
+
−
        z-index:2;
+
  
−
}
+
<div class="cd-timeline-block">
−
a#prev_page_button{
+
<div class="cd-timeline-img cd-picture">
−
left:-30px;
+
<img src="https://static.igem.org/mediawiki/2015/f/fd/Cd-icon-picture.png" alt="Picture">
−
background:#8BC5EB url(https://static.igem.org/mediawiki/2015/7/73/NAIT_Prev.png)
+
</div> <!-- cd-timeline-img -->
−
}
+
−
a#next_page_button{
+
−
right:-30px;
+
−
background:#8BC5EB url(https://static.igem.org/mediawiki/2015/a/a0/NAIT_Next.png)
+
−
}
+
−
a#next_page_button:hover{
+
−
background:#8BC5EB url(https://static.igem.org/mediawiki/2015/a/a0/NAIT_Next.png)
+
−
}
+
−
a#prev_page_button:hover{
+
−
background:#8BC5EB url(https://static.igem.org/mediawiki/2015/7/73/NAIT_Prev.png)
+
−
}
+
−
.loading{
+
−
width:160px;
+
−
height:56px;
+
−
position: absolute;
+
−
top:50%;
+
−
margin-top:-28px;
+
−
right:135px;
+
−
line-height:56px;
+
−
color:#fff;
+
−
padding-left:60px;
+
−
font-size:15px;
+
−
background: url(ajaxloader.jpg) no-repeat 10px 50%;
+
−
opacity: 0.7;
+
−
z-index:9999;
+
−
-moz-border-radius:20px;
+
−
-webkit-border-radius:20px;
+
−
border-radius:20px;
+
−
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
+
−
}
+
  
−
</style>
+
<div class="cd-timeline-content" style="margin-left:-50px">
 +
<h2>Formation of Color in Silver Staining</h2>
 +
<p>What was the scientific basis of color formation post silver staining?</p>
 +
<label class="btn" for="modal-003"><a class="cd-read-more">Read more</a></label>
 +
<span class="cd-date">May 11 to 15</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-location">
 +
<img src="https://static.igem.org/mediawiki/2015/d/d9/Cd-icon-location.png" alt="Location">
 +
</div> <!-- cd-timeline-img -->
  
 +
<div class="cd-timeline-content">
 +
<h2>Spruce Grove High School Lab</h2>
 +
<center><img src="https://static.igem.org/mediawiki/2015/6/63/NAIT_SGHSPrep.jpg" width="300px">           
 +
                                </center<<br>
 +
                                <p>Students taking Biology 30 at SGHS came to NAIT today and we were lucky enough to be able to T.A for them.</p>
 +
<label class="btn" for="modal-004"><a class="cd-read-more">Read more</a></label>
 +
<span class="cd-date">May 21</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
−
<div class="book_wrapper">
+
<div class="cd-timeline-block">
−
<a id="next_page_button"></a>
+
<div class="cd-timeline-img cd-location">
−
<a id="prev_page_button"></a>
+
<img src="https://static.igem.org/mediawiki/2015/d/d9/Cd-icon-location.png" alt="Location">
−
<div id="loading" class="loading">Loading pages...</div>
+
</div> <!-- cd-timeline-img -->
−
<div id="mybook" style="display:none;">
+
−
<div class="b-load">
+
−
<div>
+
−
<img src="https://static.igem.org/mediawiki/2015/7/70/NAIT_Group2.jpg" title="NAIT with Spruce Grove High School"/>
+
−
<h1>Month 1 - May</h1>
+
−
<p><font color="#8BC5EB"><label class="btn" for="modal-051">Week 1</label></font> | Literature search for the basics of our project.</p>
+
−
                                                <p><font color="#88C5EB"><label class="btn" for="modal-052">Week 2</label></font> | Review of the basis of color formation in silver-protein complexes.</p>
+
−
                                                <p><font color="#88C5EB"><label class="btn" for="modal-053">Week 3</label></font> | geekStarter and change of course in our project.</p>
+
−
                                                <p><font color="#88C5EB"><label class="btn" for ="modal-054">Week 4</label></font> | Offers for sponsorship, getting ourselves established in social media and around NAIT.</p>
+
  
−
</div>
+
<div class="cd-timeline-content" style="margin-left:-50px">
−
<div>
+
<h2>Alberta Innovates and geekStarter</h2>
−
<img src="https://static.igem.org/mediawiki/2015/c/c3/NAIT_Gel_June_9_PS.jpg" alt="" />
+
<p>Team NAIT went on a road trip to the University of Calgary!</p>
−
<h1>Month 2 - June</h1>
+
<label class="btn" for="modal-005"><a class="cd-read-more">Read more</a></label>
−
<p><font color="#8BC5EB"><label class="btn" for="modal-061">Week 1</label></font> | Secured several sponsorship opportunities this week.</p>
+
<span class="cd-date">May 24</span>
−
                        <p><font color="#8BC5EB"><label class="btn" for="modal-062">Week 2</label></font> | Buckling down and assigning tasks to each team member.</p>
+
</div> <!-- cd-timeline-content -->
−
                      <p><font color="#8BC5EB"><label class="btn" for="modal-063">Week 3</label></font> | Description</p>
+
</div> <!-- cd-timeline-block -->
−
                        <p><font color="#8BC5EB"><label class="btn" for="modal-064">Week 4</label></font> | Description</p>
+
  
−
</div>
+
<div class="cd-timeline-block">
−
<div>
+
<div class="cd-timeline-img cd-location">
−
<img src="https://pbs.twimg.com/media/CGNchlDUIAEGC-0.jpg" width="150px" height="250px" alt="" />
+
<img src="https://static.igem.org/mediawiki/2015/d/d9/Cd-icon-location.png" alt="Location">
−
<h1>Month 3 - July</h1>
+
</div> <!-- cd-timeline-img -->
−
                        <p><font color="#8BC5EB"><label class="btn" for="modal-062">Week 1</label></font> | Description</p>
+
−
                      <p><font color="#8BC5EB"><label class="btn" for="modal-063">Week 2</label></font> | Description</p>
+
−
                        <p><font color="#8BC5EB"><label class="btn" for="modal-064">Week 3</label></font> | Description</p>
+
−
                        <p><font color="#8BC5EB"><label class="btn" for="modal-064">Week 4</label></font> | Description</p>
+
−
</div>
+
−
<div>
+
−
<img src="https://pbs.twimg.com/media/CF9W2OBUgAAcXUT.jpg" height="200px" width="150px" alt="" />
+
−
<h1>Month 4 - August</h1>
+
−
                        <p><font color="#8BC5EB"><label class="btn" for="modal-062">Week 1</label></font> | Description</p>
+
−
                      <p><font color="#8BC5EB"><label class="btn" for="modal-063">Week 2</label></font> | Description</p>
+
−
                        <p><font color="#8BC5EB"><label class="btn" for="modal-064">Week 3</label></font> | Description</p>
+
−
                        <p><font color="#8BC5EB"><label class="btn" for="modal-064">Week 4</label></font> | Description</p>
+
−
</div>
+
−
<div>
+
−
<img src="https://pbs.twimg.com/media/CF5VFR1VIAExVhF.jpg" alt="" />
+
−
<h1>Crunch Time - September</h1>
+
−
                        <p><font color="#8BC5EB"><label class="btn" for="modal-062">Week 1</label></font> | Description</p>
+
−
                      <p><font color="#8BC5EB"><label class="btn" for="modal-063">Week 2</label></font> | Description</p>
+
−
                        <p><font color="#8BC5EB"><label class="btn" for="modal-064">Week 3</label></font> | Description</p>
+
−
                        <p><font color="#8BC5EB"><label class="btn" for="modal-064">Week 4</label></font> | Description</p>
+
  
−
</div>
+
<div class="cd-timeline-content">
−
</div>
+
<h2>Research Continued...</h2>
−
</div>
+
                                <p>Getting our wiki set up and looking for sponsorships.</p>
−
</div>
+
<label class="btn" for="modal-006"><a class="cd-read-more">Read more</a></label>
 +
<span class="cd-date">May 25 to 29</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-location">
 +
<img src="https://static.igem.org/mediawiki/2015/d/d9/Cd-icon-location.png" alt="Location">
 +
</div> <!-- cd-timeline-img -->
  
−
       
+
<div class="cd-timeline-content" style="margin-left:-50px">
−
        <!-- The JavaScript -->
+
<h2>Getting Our Timeline Set Up</h2>
 +
<p>Time is ticking! We are already into the second month of the summer!</p>
 +
<label class="btn" for="modal-007"><a class="cd-read-more">Read more</a></label>
 +
<span class="cd-date">June 1 to 5</span>
 +
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
 +
<div class="cd-timeline-block">
 +
<div class="cd-timeline-img cd-location">
 +
<img src="https://static.igem.org/mediawiki/2015/d/d9/Cd-icon-location.png" alt="Location">
 +
</div> <!-- cd-timeline-img -->
  
−
        <script type="text/javascript">
+
<div class="cd-timeline-content">
−
$(function() {
+
<h2>techLife and NAIT Photoshoot</h2>
−
var $mybook = $('#mybook');
+
<center><img src="https://static.igem.org/mediawiki/2015/7/75/NAIT_June11Photoshoot.JPG" width="400px">           
−
var $bttn_next = $('#next_page_button');
+
                                </center><br>
−
var $bttn_prev = $('#prev_page_button');
+
                                <p>We had a photoshoot with NAIT's techLife magazine. Thank you to Ms. Linda Hoang and Blaze for your patience!</p>
−
var $loading = $('#loading');
+
<span class="cd-date">June 11</span>
−
var $mybook_images = $mybook.find('img');
+
</div> <!-- cd-timeline-content -->
−
var cnt_images = $mybook_images.length;
+
</div> <!-- cd-timeline-block -->
−
var loaded = 0;
+
−
//preload all the images in the book,
+
−
//and then call the booklet plugin
+
  
−
$mybook_images.each(function(){
+
<div class="cd-timeline-block">
−
var $img = $(this);
+
<div class="cd-timeline-img cd-location">
−
var source = $img.attr('src');
+
<img src="https://static.igem.org/mediawiki/2015/d/d9/Cd-icon-location.png" alt="Location">
−
$('<img/>').load(function(){
+
</div> <!-- cd-timeline-img -->
−
++loaded;
+
−
if(loaded == cnt_images){
+
−
$loading.hide();
+
−
$bttn_next.show();
+
−
$bttn_prev.show();
+
−
$mybook.show().booklet({
+
−
name:               null,                            // name of the booklet to display in the document title bar
+
−
width:              800,                            // container width
+
−
height:            500,                            // container height
+
−
speed:              600,                            // speed of the transition between pages
+
−
direction:          'LTR',                          // direction of the overall content organization, default LTR, left to right, can be RTL for languages which read right to left
+
−
startingPage:      0,                              // index of the first page to be displayed
+
−
easing:            'easeInOutQuad',                // easing method for complete transition
+
−
easeIn:            'easeInQuad',                    // easing method for first half of transition
+
−
easeOut:            'easeOutQuad',                  // easing method for second half of transition
+
  
−
closed:            true,                          // start with the book "closed", will add empty pages to beginning and end of book
+
<div class="cd-timeline-content" style="margin-left:-50px">
−
closedFrontTitle:   null,                            // used with "closed", "menu" and "pageSelector", determines title of blank starting page
+
<h2>Ongoing Research and Practice</h2>
−
closedFrontChapter: null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank starting page
+
<p>Perfecting our silver stain techniques!</p>
−
closedBackTitle:    null,                            // used with "closed", "menu" and "pageSelector", determines chapter name of blank ending page
+
<label class="btn" for="modal-009"><a class="cd-read-more">Read more</a></label>
−
closedBackChapter:  null,                            // used with "closed", "menu" and "chapterSelector", determines chapter name of blank ending page
+
<span class="cd-date">June 12</span>
−
covers:            false,                          // used with  "closed", makes first and last pages into covers, without page numbers (if enabled)
+
</div> <!-- cd-timeline-content -->
 +
</div> <!-- cd-timeline-block -->
  
−
pagePadding:       10,                              // padding for each page wrapper
+
<div class="cd-timeline-block">
−
pageNumbers:        true,                            // display page numbers on each page
+
<div class="cd-timeline-img cd-location">
 +
<img src="https://static.igem.org/mediawiki/2015/d/d9/Cd-icon-location.png" alt="Location">
 +
</div> <!-- cd-timeline-img -->
  
−
hovers:            false,                            // enables preview pageturn hover animation, shows a small preview of previous or next page on hover
+
<div class="cd-timeline-content">
−
overlays:          false,                            // enables navigation using a page sized overlay, when enabled links inside the content will not be clickable
+
<h2>Sequences Ordered!</h2>
−
tabs:              false,                          // adds tabs along the top of the pages
+
                                <p>First four sequences of our own design ordered from IDT!</p>
−
tabWidth:          60,                              // set the width of the tabs
+
<span class="cd-date">June 16</span>
−
tabHeight:          20,                              // set the height of the tabs
+
</div> <!-- cd-timeline-content -->
−
arrows:            false,                          // adds arrows overlayed over the book edges
+
</div> <!-- cd-timeline-block -->
−
cursor:            'pointer',                      // cursor css setting for side bar areas
+
  
−
hash:              false,                          // enables navigation using a hash string, ex: #/page/1 for page 1, will affect all booklets with 'hash' enabled
 
−
keyboard:          true,                            // enables navigation with arrow keys (left: previous, right: next)
 
−
next:              $bttn_next,          // selector for element to use as click trigger for next page
 
−
prev:              $bttn_prev,          // selector for element to use as click trigger for previous page
 
  
−
menu:               null,                            // selector for element to use as the menu area, required for 'pageSelector'
+
</section> <!-- cd-timeline -->
−
pageSelector:       false,                          // enables navigation with a dropdown menu of pages, requires 'menu'
+
<script src="https://2015.igem.org/Template:NAIT_Edmonton/jquery.min.js?action=raw&amp;ctype=text/javascript"></script></script>
−
chapterSelector:   false,                          // enables navigation with a dropdown menu of chapters, determined by the "rel" attribute, requires 'menu'
+
<script src="https://2015.igem.org/Team:NAIT_Edmonton/main.js?action=raw&amp;ctype=text/javascript"></script> <!-- Resource jQuery -->
  
−
shadows:            true,                            // display shadows on page animations
 
−
shadowTopFwdWidth:  166,                            // shadow width for top forward anim
 
−
shadowTopBackWidth: 166,                            // shadow width for top back anim
 
−
shadowBtmWidth:    50,                              // shadow width for bottom shadow
 
  
−
before:            function(){},                    // callback invoked before each page turn animation
+
<!-- MODAL CONTENT --!>
−
after:              function(){}                    // callback invoked after each page turn animation
+
−
});
+
−
Cufon.refresh();
+
−
}
+
−
}).attr('src',source);
+
−
});
+
−
+
−
});
+
−
        </script>
+
  
−
<style type="text/css">
+
<input class="modal-state" id="modal-001" type="checkbox" />
 +
<div class="modal">
 +
  <label class="modal__bg" for="modal-001"></label>
 +
  <div class="modal__inner">
  
−
.modal {opacity: 0;visibility: hidden;position: fixed;top: 0;right: 0;bottom: 0;left: 0;text-align: left;background: rgba(0,0,0, .9);transition: opacity .25s ease;z-index:999;}
+
    <center><h1>Lab Selfie!</h1></center>
−
.modal__bg {position: absolute;top: 0;right: 0;bottom: 0;left: 0;cursor: pointer;}
+
    <center><img src="https://pbs.twimg.com/media/CEQ_lNuW8AECJOj.jpg:large" width="400px"></center>
−
.modal-state { display: none;}
+
−
.modal-state:checked + .modal {opacity: 1;visibility: visible;}
+
−
.modal-state:checked + .modal .modal__inner {top: 0;}
+
−
.modal__inner {transition: top .25s ease;position: absolute;top: -20%; right: 0;bottom: 0;left: 0;width: 750px;margin: auto;overflow: auto;background:#FFFFFF;border-radius: 0px;padding: 1em 2em;height: 458px;}
+
−
.modal__close {position: absolute;right: 1em;top: 1em;width: 1.1em;height: 1.1em;cursor: pointer;}
+
−
.modal__close:after,
+
−
.modal__close:before {content: '';position: absolute;width: 2px;height: 1.5em;background: #ccc;display: block;transform: rotate(45deg);left: 50%;margin: -3px 0 0 -1px;top: 0;}
+
−
.modal__close:hover:after,
+
−
.modal__close:hover:before {background: #aaa;}
+
−
.modal__close:before {transform: rotate(-45deg);}
+
  
−
@media screen and (max-width: 750px) {
+
   </div>
−
+
</div>
−
   .modal__inner {width: 90%;height: 90%;box-sizing: border-box;}
+
−
}
+
  
  
−
/* Modal Mobile */
+
<input class="modal-state" id="modal-002" type="checkbox" />
 +
<div class="modal">
 +
  <label class="modal__bg" for="modal-002"></label>
 +
  <div class="modal__inner">
  
−
.btn {cursor: pointer;background: none;display: inline-block;padding: none;color:none; border-radius: none;}
+
    <center><h1>Week 1 - May 4 to 8</h1></center>
−
.btn:hover,
+
    <p>On week one, we focused on finding literature about the specific chemistry of silver staining. In general, we did not find any literature about the specific, molecular interactions of the silver stain dye with proteins. Many of the articles even stated that the exact mechanism of silver staining remains unknown.</p>
−
.btn:focus {background: none;}
+
−
.btn:active {background: none;}
+
−
p img {max-width: 200px;height: auto;float: left;margin: 0 1em 1em 0;}
+
  
−
</style>
+
  </div>
 +
</div>
  
  
−
<input class="modal-state" id="modal-051" type="checkbox" />
+
<input class="modal-state" id="modal-003" type="checkbox" />
 
<div class="modal">
 
<div class="modal">
−
   <label class="modal__bg" for="modal-051"></label>
+
   <label class="modal__bg" for="modal-003"></label>
 
   <div class="modal__inner">
 
   <div class="modal__inner">
  
−
     <h1>Week 1 - May 4 to 8</h1>
+
     <center><h1>Week 2 - May 11 to 15</h1></center>
−
     <p>On week one, we focused on finding literature about the specific chemistry of silver staining. In general, we did not find any literature about the specific, molecular interactions of the silver stain dye with proteins. Many of the articles even stated that the exact mechanism of silver staining remains unknown.</p>
+
     <p>This week, we researched on the scientific basis of color. More specifically, we looked into how the interaction between silver, protein and the polyacrylamide gel produces a certain color. We found that the size of silver nano-particles and the refraction of light is how we perceive different colors.
 +
 
 +
We also tried to look into the electron cloud and how electron excitation produces certain wavelengths of light</p>
  
 
   </div>
 
   </div>
 
</div>
 
</div>
  
−
<input class="modal-state" id="modal-052" type="checkbox" />
+
 
 +
<input class="modal-state" id="modal-004" type="checkbox" />
 
<div class="modal">
 
<div class="modal">
−
   <label class="modal__bg" for="modal-052"></label>
+
   <label class="modal__bg" for="modal-004"></label>
 
   <div class="modal__inner">
 
   <div class="modal__inner">
  
−
     <h1>Week 2 - May 11 to 15 </h1>
+
     <center><h1>Lab with SGHS</h1></center>
−
     <p>This week, we researched on the scientific basis of color. More specifically, we looked into how the interaction between silver, protein and the polyacrylamide gel produces a certain color. We found that the size of silver nano-particles and the refraction of light is how we perceive different colors. </p>
+
     <center><img src="https://static.igem.org/mediawiki/2015/7/70/NAIT_Group2.jpg" width="400px"></center>
−
     <br>
+
     <br><br> <p> This week, we also helped out Spruce Grove High School with a fun biology lab! We experimented with electrophoresis in agarose gel and visualized DNA strands from a mock crime scene. Additionally, we streaked plates with <i>Serratia marcescens.</i> Overall, the high school trip was a success and we got along really well with the students!</p>
−
    <p> We also tried to look into the electron cloud and how electron excitation produces certain wavelengths of light</p>
+
  
 
   </div>
 
   </div>
 
</div>
 
</div>
  
−
<input class="modal-state" id="modal-053" type="checkbox" />
+
 
 +
<input class="modal-state" id="modal-005" type="checkbox" />
 
<div class="modal">
 
<div class="modal">
−
   <label class="modal__bg" for="modal-053"></label>
+
   <label class="modal__bg" for="modal-005"></label>
 
   <div class="modal__inner">
 
   <div class="modal__inner">
  
−
     <h1>Week 3 - May 18 to 24 </h1>
+
     <center><h1>geekStarter Workshop</h1></center>
−
     <p><img src="https://static.igem.org/mediawiki/2015/d/d9/NAIT_geekStarter.jpg" height="200px" width="300px"> Our research continued for the source of color in silver staining.</p>   
+
     <center><img src="https://static.igem.org/mediawiki/2015/d/d9/NAIT_geekStarter.jpg" width="450px"></center>
−
    <br>
+
     <p>We attended the geekStarter workshop hosted by Alberta Innovates at the University of Calgary on Sunday, May 24. We presented questions about iGEM to a panel of experts. We also got one on one "speed-mentoring" with the experts as well as an exclusive group meeting with each of the four experts. Meeting the University of Lethbridge team was also quite cool! <br><br>
−
    <p>This week, we also helped out Spruce Grove High School with a fun biology lab! We experimented with electrophoresis in agarose gel and visualized DNA strands from a mock crime scene. Additionally, we streaked plates with <i>Serratia marcescens</i>. Overall, the high school trip was a success and we got along really well with the students! </p>
+
 
−
    <br>
+
After meeting with the experts, we decided to put the literature review on the back burner so that we could proceed with actual, physical experiments.</p>
−
     <p>We attended the geekStarter workshop hosted by Alberta Innovates at the University of Calgary on Sunday, May 24. We presented questions about iGEM to a panel of experts. We also got one on one "speed-mentoring" with the experts as well as an exclusive group meeting with each of the four experts. Meeting the University of Lethbridge team was also quite cool!</p>  
+
−
    <br>
+
−
    <p> After meeting with the experts, we decided to put the literature review on the back burner so that we could proceed with actual, physical experiments.</p>
+
  
 
   </div>
 
   </div>
 
</div>
 
</div>
  
−
<input class="modal-state" id="modal-054" type="checkbox" />
+
<input class="modal-state" id="modal-006" type="checkbox" />
 
<div class="modal">
 
<div class="modal">
−
   <label class="modal__bg" for="modal-054"></label>
+
   <label class="modal__bg" for="modal-006"></label>
 
   <div class="modal__inner">
 
   <div class="modal__inner">
  
−
     <h1>Week 4 - May 25 to 29 </h1>
+
     <center><h1>Week 4 - May 25 to 29 </h1></center>
 
     <p>This week, we focused on perfecting our silver staining techniques. We are currently troubleshooting our gels because the stain comes out quite dark and with a lot of background staining.</p>
 
     <p>This week, we focused on perfecting our silver staining techniques. We are currently troubleshooting our gels because the stain comes out quite dark and with a lot of background staining.</p>
 
     <br>
 
     <br>
Line 490: Line 323:
 
</div>
 
</div>
  
−
<input class="modal-state" id="modal-061" type="checkbox" />
+
<input class="modal-state" id="modal-007" type="checkbox" />
 
<div class="modal">
 
<div class="modal">
−
   <label class="modal__bg" for="modal-061"></label>
+
   <label class="modal__bg" for="modal-007"></label>
 
   <div class="modal__inner">
 
   <div class="modal__inner">
  
−
     <h1>Week 1 - June 1 to 5</h1>
+
     <center><h1>Week 1 - June 1 to 5</h1></center>
 
     <p>This week, we worked on and finalized the DNA sequences to be sent to IDT.</p>
 
     <p>This week, we worked on and finalized the DNA sequences to be sent to IDT.</p>
 
     <br>
 
     <br>
Line 503: Line 336:
 
</div>
 
</div>
  
−
<input class="modal-state" id="modal-062" type="checkbox" />
+
<input class="modal-state" id="modal-009" type="checkbox" />
 
<div class="modal">
 
<div class="modal">
−
   <label class="modal__bg" for="modal-062"></label>
+
   <label class="modal__bg" for="modal-009"></label>
 
   <div class="modal__inner">
 
   <div class="modal__inner">
  
Line 519: Line 352:
 
</div>
 
</div>
  
−
<input class="modal-state" id="modal-063" type="checkbox" />
 
−
<div class="modal">
 
−
  <label class="modal__bg" for="modal-063"></label>
 
−
  <div class="modal__inner">
 
  
−
    <h1>Week 3 - June 15 to 19 </h1>
 
−
    <p></p>
 
  
−
  </div>
 
−
</div>
 
  
−
<input class="modal-state" id="modal-064" type="checkbox" />
 
−
<div class="modal">
 
−
  <label class="modal__bg" for="modal-064"></label>
 
−
  <div class="modal__inner">
 
  
−
    <h1>Week 4 - June 22 to 26 </h1>
 
−
    <p></p>
 
  
  
−
  </div>
 
−
</div>
 
  
  
−
</center>
+
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
  
 
   </div>
 
   </div>
Line 579: Line 408:
  
 
#footer {z-index:15;}
 
#footer {z-index:15;}
−
.footer {padding:20px 0 40px 0; margin:0px 0 0 0; clear:both; width:100%; background-color:#0D4D8C;margin-bottom:0;height:2px;}
+
.footer {padding:20px 0 60px 0; margin:0px 0 0 0; clear:both; width:100%; background-color:#0D4D8C;margin-bottom:0;height:2px;}
 
.footer_content {margin:auto;width:1000px;}
 
.footer_content {margin:auto;width:1000px;}
 
.footer_left { float:left; padding:0 0 0 0px;}
 
.footer_left { float:left; padding:0 0 0 0px;}
Line 600: Line 429:
  
  
 +
</body>
 
</html>
 
</html>

Revision as of 20:29, 16 June 2015


Team NAIT 2015