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

 
(43 intermediate revisions by the same user not shown)
Line 9: Line 9:
 
<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'>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
−
<script type="text/javascript" src="https://2015.igem.org/index.php?title=
+
<script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/jquery.flexslider-min?action=raw&amp;ctype=text/javascript"></script>
−
Template:NAIT_Edmonton/js/jquery.flexslider"></script>
+
 
 +
<!-----------https://static.igem.org/mediawiki/2015/d/d8/El_Capitan_.ttf------------------->
  
 
<script type="text/javascript" charset="utf-8">
 
<script type="text/javascript" charset="utf-8">
Line 17: Line 18:
 
   $(window).load(function() {
 
   $(window).load(function() {
 
     $('.flexslider').flexslider({
 
     $('.flexslider').flexslider({
−
           animation: "slide"
+
           animation: "fade"
 
     });
 
     });
 
   });
 
   });
−
</script>
 
−
 
−
<script type="text/javascript">
 
−
 
−
jQuery(document).ready(function() {
 
−
function close_accordion_section() {
 
−
jQuery('.accordion .accordion-section-title').removeClass('active');
 
−
jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
 
−
}
 
−
 
−
jQuery('.accordion-section-title').click(function(e) {
 
−
// Grab current anchor value
 
−
var currentAttrValue = jQuery(this).attr('href');
 
−
 
−
if(jQuery(e.target).is('.active')) {
 
−
close_accordion_section();
 
−
}else {
 
−
close_accordion_section();
 
−
 
−
// Add active class to section title
 
−
jQuery(this).addClass('active');
 
−
// Open up the hidden content panel
 
−
jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open');
 
−
}
 
−
 
−
e.preventDefault();
 
−
});
 
−
});
 
−
 
 
</script>
 
</script>
  
Line 60: Line 32:
 
<div class="header">
 
<div class="header">
  
−
<style type="text/css">
+
  <!--  <div class="logo">
  
−
.header_mobile {
+
<a href="https://2015.igem.org/Team:NAIT_Edmonton">
−
    display:none;
+
<img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px">
−
    position: absolute;
+
</a>
−
    background-color:transparent;
+
</div> --->
−
    width:65px;
+
−
    top: 90px;
+
−
    left:50px;
+
−
    height:65px;
+
−
    z-index:999;
+
−
    position:fixed;}
+
  
−
.header_mobile ul {list-style:none; position:absolute;float:right;margin:0;padding-right:125px}
 
−
.header_mobile ul * {margin:0; padding:0;}
 
−
.header_mobile a {display:block;color:#159CD8;text-decoration:none;padding:15px 50px}
 
−
.header_mobile li {position:relative;float:left; padding:5px 5px 5px 5px}
 
−
.header_mobile li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:20px;}
 
−
.header_mobile li.current-menu-item {background:#5AB3E3}
 
−
.header_mobile ul ul{display:none; position:absolute; top:77%; left:30%; background:#0D4D8C; padding:0 0px 0 0}
 
−
.header_mobile ul ul li:hover{background:#159CD8}
 
−
.header_mobile ul ul li{float:none; width:120px}
 
−
.header_mobile ul ul a {line-height:100%; padding:0 20px 0 0; font-size:15px }
 
−
.header_mobile ul ul ul {top:0; left:200%}
 
−
.header_mobile ul li.selected a{color:#8BC5EB}
 
−
.header_mobile ul li:hover > ul{display:block;}
 
  
−
 
−
@media screen and (max-width:1000px){
 
−
 
−
.header_left{display:none;}
 
−
.header_right{display:none;}
 
−
.header_mobile{display:block;}
 
−
 
−
}
 
−
 
−
</style>
 
−
 
−
    <div class="logo"><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 141: Line 80:
 
</div>
 
</div>
 
</div>
 
</div>
−
 
 
−
 
−
  <div id="wrap">
 
  
 
<style type="text/css">
 
<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;}
+
.header_mobile {
 +
    display:none;
 +
    position: absolute;
 +
    background-color:transparent;
 +
    width:65px;
 +
    top: 90px;
 +
    left:50px;
 +
    height:65px;
 +
    z-index:999;
 +
    position:fixed;}
  
−
/*----- Accordion -----*/
+
.header_mobile ul {list-style:none; position:absolute;float:right;margin:0;padding-right:125px}
−
.accordion, .accordion * {
+
.header_mobile ul * {margin:0; padding:0;}
−
-webkit-box-sizing:border-box;  
+
.header_mobile a {display:block;color:#159CD8;text-decoration:none;padding:15px 50px}
−
-moz-box-sizing:border-box;  
+
.header_mobile li {position:relative;float:left; padding:5px 5px 5px 5px}
−
box-sizing:border-box;
+
.header_mobile li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:20px;}
−
}
+
.header_mobile li.current-menu-item {background:#5AB3E3}
 +
.header_mobile ul ul{display:none; position:absolute; top:77%; left:30%; background:#0D4D8C; padding:0 0px 0 0}
 +
.header_mobile ul ul li:hover{background:#159CD8}
 +
.header_mobile ul ul li{float:none; width:120px}
 +
.header_mobile ul ul a {line-height:100%; padding:0 20px 0 0; font-size:15px }
 +
.header_mobile ul ul ul {top:0; left:200%}
 +
.header_mobile ul li.selected a{color:#8BC5EB}
 +
.header_mobile ul li:hover > ul{display:block;}
  
−
.accordion {
 
−
overflow:hidden;
 
−
box-shadow:0px 1px 3px rgba(0,0,0,0.25);
 
−
border-radius:3px;
 
−
background:#f7f7f7;
 
−
}
 
  
−
/*----- Section Titles -----*/
+
@media screen and (max-width:1000px){
−
.accordion-section-title {
+
−
width:100%;
+
−
padding:15px;
+
−
display:inline-block;
+
−
border-bottom:1px solid #1a1a1a;
+
−
background:#333;
+
−
transition:all linear 0.15s;
+
  
−
/* Type */
+
.header_left{display:none;}
−
font-size:1.200em;
+
.header_right{display:none;}
−
text-shadow:0px 1px 0px #1a1a1a;
+
.header_mobile{display:block;}
−
color:#fff;
+
−
        text-align:center;
+
−
}
+
  
−
.accordion-section-title.active, .accordion-section-title:hover {
 
−
background:#4c4c4c;
 
−
/* Type */
 
−
text-decoration:none;
 
 
}
 
}
  
−
.accordion-section:last-child .accordion-section-title {
+
</style>
−
border-bottom:none;
+
 
−
}
+
<div id="wrap2">
  
−
/*----- Section Content -----*/
+
  <div class="slider">
−
.accordion-section-content {
+
−
padding:15px;
+
−
display:none;
+
−
}
+
  
 +
<style type="text/css">
 +
.slider{width:100%; margin:0; clear:both; position:relative; top:-48px;}
 +
.flex-container a:active,
 +
.flexslider a:active {outline: none;}
 +
.slides,
 +
.flex-control-nav,
 +
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
 +
.flexslider {width: 100%; margin: 0; padding: 0 0 0 0;}
 +
.flexslider .slides > li {display: none;}
 +
.flexslider .slides img {width:100%; height:auto; display: block;}
 +
.flex-pauseplay span {text-transform: capitalize;}
 +
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
 +
html[xmlns] .slides {display: block;}
 +
* html .slides {height: 1%;}
 +
.no-js .slides > li:first-child {display: block;}
 +
.flexslider {position: relative; zoom: 1; overflow:hidden;} <!---height:500px--->
 +
.flexslider .slides {zoom: 1;}
 +
.flexslider .slides > li {position: relative;}
 +
.flex-container {zoom: 1; position: relative;}
 +
.flex-direction-nav li a {width:65px; height:37px; margin:0; display: block; position: absolute; top:0px; cursor: pointer; text-indent: -9999px;}
 +
.flex-direction-nav li a.next {background:url(https://static.igem.org/mediawiki/2015/a/a0/NAIT_Next.png) no-repeat center; right:0px;}
 +
.flex-direction-nav li a.prev {background:url(https://static.igem.org/mediawiki/2015/7/73/NAIT_Prev.png) no-repeat center;right:65px;}
 +
.flex-direction-nav li a.next:hover {background:url(https://static.igem.org/mediawiki/2015/b/ba/NAIT_Next_a.png) no-repeat center;}
 +
.flex-direction-nav li a.prev:hover {background:url(https://static.igem.org/mediawiki/2015/c/c4/NAIT_Prev_a.png) no-repeat center;}
 +
.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
 +
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
 +
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
 +
.flex-control-nav li:first-child {margin: 0;}
 +
.flex-control-nav li a {width: 13px; height: 13px; display: block; cursor: pointer; text-indent: -9999px;}
 +
.flex-control-nav li a:hover {background-position: 0 -13px;}
 +
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
 +
.flex-caption{position: absolute;left:auto;right:auto; top:150px; width:100%;font-family: 'Source Sans Pro', sans-serif;text-align:center; font-size:14px; color:#FFFFFF; text-shadow:2px 2px 2px #000000}
 +
.flex-caption h0{font-size:30px; color:#FFFFFF}
 +
.flex-caption h2{ font-size:30px; color:#FFFFFF;text-shadow:2px 4px 2px #000000}
 +
.flex-caption p{ text-align:center; padding:0 200px;}
 +
a.slider_button{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background-color:#8BC5EB; color:#fff; font-size:14px; padding:8px 12px; margin:20px 0 0 0; display:inline-block;}
 
</style>
 
</style>
  
−
<center><div class="top_slogan">The Project</div></center>
+
<div class="flexslider">
 +
    <ul class="slides">
 +
    <li><a href=""><img src="https://static.igem.org/mediawiki/2015/6/62/NAIT_Slide_Pedway.jpg" alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p><strong><a href=""></a></strong></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Desc"><img src="https://static.igem.org/mediawiki/2015/5/56/NAIT_Slide_1_Project.jpg"alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Practices"><img src="https://static.igem.org/mediawiki/2015/d/db/NAIT_Slide_2_Whiteboard.jpg" alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                   
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Modeling"><img src="https://static.igem.org/mediawiki/2015/5/57/NAIT_Slide_3_3D.jpg"alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
    </ul>
 +
  </div>
 +
  </div>
  
 +
<div id="wrap5">
  
−
<h2>Sodium Dodecyl Sulphide Polyacrylamide Gel Electrophoresis (SDS PAGE) is one of the most prominent techniques used in protein research. However, one of its limitations, more specifically the loss of an accurate point of reference post staining, is attributed to inefficiency and the wasting of time during the research process. From past observations, some proteins inherently produce certain colours post-silver staining. We hypothesized that certain configurations of amino acids produces specific colours when reacting with the reagents of silver staining. In the hopes of creating a new molecular weight ladder, our team designed sequences to code for novel proteins that produce colour. Coloured proteins can also pave the way for new types of colorimetric assays and a less expensive and more accessible counterpart to antibody tags in the future.</h2> <br>
+
  <div class="section_one_three">
 +
        <h2 class="centered_title">Achievements</h2>
 +
        <div class="roundimg"><a href="https://2015.igem.org/Team:NAIT_Edmonton/Achievements" title=""><img src="https://static.igem.org/mediawiki/2015/5/50/NAIT_Medal_Icon.png" width="125px" alt="" title="" /></a></div>
 +
        <p class="centered_text">
 +
Despite the time constraints, our team achieved a lot this summer and we are proud of what we have accomplished.
 +
        </p>
 +
        <a href="https://2015.igem.org/Team:NAIT_Edmonton/Achievements" class="more">read more</a>
 +
        </div>
 +
       
 +
  <div class="section_one_three">
 +
        <h2 class="centered_title">iGEM 2015</h2>
 +
        <div class="roundimg"><a href="https://2015.igem.org" title=""><img src="https://static.igem.org/mediawiki/2015/0/05/NAIT_Icon_services.png" alt="" title="" /></a></div>
 +
        <p class="centered_text">
 +
Learn about the exciting opportunities the iGEM foundation has to offer! The experience was incredible!
 +
        </p>
 +
        <a href="https://2015.igem.org" class="more">read more</a>
 +
        </div>
  
−
<div class="accordion">
+
  <div class="section_one_three">
−
<div class="accordion-section">
+
        <h2 class="centered_title">Contact Us!</h2>
−
<a class="accordion-section-title" href="#accordion-1">Background</a>
+
        <div class="roundimg"><a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs" title=""><img src="https://static.igem.org/mediawiki/2015/2/29/NAIT_Icon_contact.png" alt="" title="" /></a></div>
−
<div id="accordion-1" class="accordion-section-content">
+
        <p class="centered_text">
−
The structural and functional study of the proteins expressed by a genome is
+
Please contact our team if you want more information about our project or have any other questions or concerns.
 +
        </p>
 +
        <a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs" class="more">read more</a>
 +
        </div>
 +
 
 +
</div>
  
−
called proteomics. This relatively novel science uses different methodologies in order to
 
  
−
separate and identify specific proteins of interest. Among these techniques, SDS-PAGE
+
  <div class="clear"></div>
 +
 
 +
 
 +
</div>
  
−
plays an essential role due to its high sensitivity, low sample volume requirement, and
 
  
−
high popularity. Negatively charged proteins migrate towards the positive electrode
 
−
 
−
according to their size and charge. Smaller proteins migrate further in a given amount of
 
−
 
−
time. As proteins are separated in this manner, users load molecular weight standards
 
−
 
−
to estimate the size (in kDa) of the proteins present in their sample. Once the proteins of
 
−
 
−
a single sample have been isolated and are embedded in the polyacrylamide (PA) gel
 
−
 
−
matrix, staining procedures are used to visualize them.</p>
 
−
 
−
<br>
 
−
 
−
<center><img src="http://upload.wikimedia.org/wikipedia/commons/4/46/SDS-PAGE_Electrophoresis.png" width="750px"></center>
 
−
 
−
<br>
 
−
 
−
<p style="font-size:15;">Organic dyes, such as Coomassie blue, can be used for this purpose;
 
−
 
−
nevertheless, their low sensitivity and a detection range that goes from 1 to 50 ng can
 
−
 
−
be a challenge for detecting low abundance proteins (Jin, Huang, Yoo, & Choi, 2006). A
 
−
 
−
higher sensitivity can be achieved by fluorescent staining techniques (from 0.1 to 10
 
−
 
−
ng.); however, UV instruments are necessary in order to read the data (Jin et al., 2006).
 
−
 
−
The most sensitive method up to date is radiolabeling, but the requirement of hazardous
 
−
 
−
isotopes and their complex management makes it a complicated procedure (Jin et al.,
 
−
 
−
2006). Silver staining is a method that offers great sensitivity and an easy to handle
 
−
 
−
protocol, thus making it one of the most commonly used staining methods. </p>
 
−
 
−
<br>
 
−
 
−
<center><img src="http://www.bio-rad.com/webroot/web/images/lsr/products/electrophoresis/product_overlay_content/global/lsr_biosafe_coomasie_gel.jpg"></center>
 
−
 
−
</div><!--end .accordion-section-content-->
 
−
</div><!--end .accordion-section-->
 
−
 
−
<div class="accordion-section">
 
−
<a class="accordion-section-title" href="#accordion-2">Accordion Section #2</a>
 
−
<div id="accordion-2" class="accordion-section-content">
 
−
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
 
−
</div><!--end .accordion-section-content-->
 
−
</div><!--end .accordion-section-->
 
−
 
−
<div class="accordion-section">
 
−
<a class="accordion-section-title" href="#accordion-3">Accordion Section #3</a>
 
−
<div id="accordion-3" class="accordion-section-content">
 
−
<p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
 
−
</div><!--end .accordion-section-content-->
 
−
</div><!--end .accordion-section-->
 
−
</div><!--end .accordion-->
 
−
 
−
 
−
<h1>Background</h1></a>
 
−
 
−
<p style="font-size:15px">
 
−
<br><br>
 
−
 
−
<h1>The Problem </h1></a>
 
−
 
−
<p style="font-size:15px">Difficulties with silver staining arise when the molecular weight markers are re-
 
−
 
−
colored golden-brown in the staining process. Markers offer evenly distributed proteins
 
−
 
−
that show bands of equal intensity and known size. Researchers can compare these
 
−
 
−
bands with their sample and identify the protein they are looking for based on its size. A
 
−
 
−
subset of these markers has color-coded standard proteins to facilitate the identification
 
−
 
−
of each band. Post-silver staining, the users lose the ability to use the color code as a
 
−
 
−
reference.</p>
 
−
 
−
<br>
 
−
 
−
<center><img src="http://labs.mmg.pitt.edu/gjoerup/silver_stain.jpg" width="750px"></center>
 
−
     
 
−
  </div>
 
−
 
−
  <div class="clear"></div>
 
  
 +
</div>
  
 
<div class="header_mobile">
 
<div class="header_mobile">
Line 316: Line 246:
 
   </ul>
 
   </ul>
 
</div>
 
</div>
 +
 +
  <div class="clear"></div>
 +
 
 
    
 
    
−
 
 
−
</div>
 
−
 
−
 
  
−
        <div class="footer">
+
<div class="footer">
 
         <div class="footer_content">
 
         <div class="footer_content">
 
             <div class="footer_left">
 
             <div class="footer_left">
Line 338: Line 267:
 
                 <li><a href="http://www.facebook.com/pages/IGEM-2015-NAIT-Edmonton/884025281659292"><img src="https://static.igem.org/mediawiki/2015/a/a3/NAIT_Icon_facebook.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.facebook.com/pages/IGEM-2015-NAIT-Edmonton/884025281659292"><img src="https://static.igem.org/mediawiki/2015/a/a3/NAIT_Icon_facebook.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.twitter.com/TeamNAIT2015"><img src="https://static.igem.org/mediawiki/2015/6/64/NAIT_Icon_twitter.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.twitter.com/TeamNAIT2015"><img src="https://static.igem.org/mediawiki/2015/6/64/NAIT_Icon_twitter.png" alt="" title="" /></a></li>
 +
                <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs"><img src="https://static.igem.org/mediawiki/2015/2/29/NAIT_Icon_contact.png" width="20px" alt="" title="" /></a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
Line 343: Line 273:
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
</div>
 
  
 
<style type="text/css">
 
<style type="text/css">
  
 
#footer {z-index:15;}
 
#footer {z-index:15;}
−
.footer {position: relative; padding:20px 0 40px 0; margin: -25px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;}
+
.footer {padding:20px 0 40px 0; margin: 0px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;}
 
.footer_content {margin:auto;width:100%;}
 
.footer_content {margin:auto;width:100%;}
 
.footer_left { float:left; padding:0 0 0 10%;}
 
.footer_left { float:left; padding:0 0 0 10%;}
Line 367: Line 296:
  
 
</body>
 
</body>
−
 
−
<!----------
 
−
 
−
                          _ __  _
 
−
                        ;'  '',)
 
−
                        /;6 , ;/
 
−
                        (Y)_:., |
 
−
                        `-', :; \
 
−
                          |;  ,.:\
 
−
                          /:.;  ;;)
 
−
                        |:;,.'|  :/
 
−
                        / |:  / ; /
 
−
                      /:;\ `| "//
 
−
                      /_,: | |./,|
 
−
                    _/: \.'|,|/| |
 
−
                  /:.,:.|,|"| |:|
 
−
                  /:;:|:,/;|:| |'|
 
−
        eduardo  |',:| \_ \ |_|;\_
 
−
                /;\_ /\_)) \_))\_))
 
−
                (;(________
 
−
                '''''`'''~`
 
−
 
−
------------------>
 
−
 
  
 
</html>
 
</html>

Latest revision as of 20:44, 6 August 2015

Team NAIT 2015