Team:HIT-Harbin

From 2012.igem.org

(Difference between revisions)
Line 1: Line 1:
 +
{{tempalte:HIT-Harbin}}
<html>
<html>
-
 
-
 
<body>
<body>
-
<style>
 
-
<style type="text/css">
 
-
#content{ 
 
-
                  width:100%;
 
-
                  padding:0;
 
-
                  border:0;
 
-
                margin:0;
 
-
            background-color: transparent;
 
-
            }
 
-
 
-
#top-section {
 
-
              height:0px ! important ;
 
-
              margin: 0 auto;
 
-
              padding:0;
 
-
              border:0;
 
-
              background-color: transparent;
 
-
            <!-- *** display:none;*** -->
 
-
              }
 
-
 
-
#p-logo { 
 
-
              display: none;
 
-
}
 
-
 
-
#search-controls{
 
-
              display: none;
 
-
}
 
-
 
-
#catlinks{
 
-
              display: none;
 
-
}
 
-
 
-
.firstHeading {
 
-
            display:none;
 
-
}
 
-
 
 
-
#footer-box{
 
-
          background-color: transparent;
 
-
          border: 0px;
 
-
          margin: 0px atuo;
 
-
}
 
-
 
-
}
 
-
 
-
* {padding:0; margin:0;}
 
-
body {background:url(https://static.igem.org/mediawiki/2012/a/af/Body-bg.gif) repeat-x #575757;  font-size:9px; color:#4e4e4e;}
 
-
a {outline:none; color:#5f5f5f; font-weight:bold; text-decoration:none;}
 
-
a:hover {color:#ea0101; }
 
-
a img {border:none;}
 
-
 
-
.alignright {float:right;}
 
-
.alignleft {float:left;}
 
-
.alignnone {clear:both;}
 
-
.aligncenter {margin-left: auto; margin-right: auto;}
 
-
 
-
#wrap {width:938px; background:url(https://static.igem.org/mediawiki/2012/4/42/WRAP-BG2.png) repeat-x top left #edebeb; margin:0 auto; overflow:hidden; clear:both; border-top:0px solid #c9c9c9; border-left:1px solid #c9c9c9; border-right:1px solid #c9c9c9; padding-bottom:30px;}
 
-
#wrap-inner {width:820px; margin:34px 0 0 30px; padding:0 30px 0 30px; overflow:hidden; background:url(https://static.igem.org/mediawiki/2012/d/de/TITLE-AREA-BG.jpg) no-repeat top left;}
 
-
#wrap-inner-withslide {width:820px; margin:34px 0 0 30px; padding:0 30px 0 30px; background: url(https://static.igem.org/mediawiki/2012/4/44/SLIDER-BG.png) no-repeat top left; overflow:hidden; }
 
-
 
-
/*header*/
 
-
#header {height:125px; width:940px; border-top:15px solid #fff; text-align:left; margin:0 auto; }
 
-
 
-
#nav {float:right;}
 
-
#nav ul li.page_item {float:left; list-style:none; padding:3px 8px 6px 8px; line-height:18px; height:18px;background: url(https://static.igem.org/mediawiki/2012/8/8d/Ul-bg.png
 
-
) repeat-x bottom left; margin-right:2px;}
 
-
#nav ul li.current_page_item {background:#000000; }
 
-
#nav ul li.current_page_item a {color:#fff;}
 
-
#nav ul li.page_last{float:left; list-style:none; padding-right:0; padding:3px 8px 6px 8px; line-height:18px; height:18px; background: url(https://static.igem.org/mediawiki/2012/8/8d/Ul-bg.png
 
-
) repeat-x bottom left;}
 
-
#nav ul li a {font-weight:bold; text-decoration:none; color:#fff; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; text-shadow:0 1px 0 #000;}
 
-
#nav ul li a:hover {color:#999999;}
 
-
.logo-area {padding-top:5px; clear:both; overflow:visible; height:220px;}
 
-
a.logo {padding:5px 0 0 0; display:block; width:940px; height:220px; overflow:visible; float:left;}
 
-
a#HIT-logo {text-indent:0px; background:url(https://static.igem.org/mediawiki/2012/0/04/HBackground.png) no-repeat;}\
 
-
 
-
a.portfolio-image {display:block; width:400px; height:26px; position:relative; top:16px; left:-8px; z-index:2;}
 
-
img.large-thumbs {position:relative; z-index:1; padding-bottom:10px;}
 
-
.large-image{background:url(https://static.igem.org/mediawiki/2012/3/3c/LARGE-IMG.png) no-repeat bottom left; width:400px; height:500px; float:left; margin-bottom:10px; padding-bottom:18px; }
 
-
.large-image.odd {margin-right:20px;}
 
-
.large-image .post-title-small{clear:both; padding:0 20px 0 20px; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; text-align:center;}
 
-
.large-image .post-title-small a{font-size:13px; font-weight:bold; letter-spacing:0;line-height:16px; color:#333333; text-shadow:0 1px 0 #fff; }
 
-
.large-image .post-title-small a:hover {color:#5f5f5f; }
 
-
 
-
#nav2 li ul {position: absolute; width: 15em; left: -999em; padding-top:1px;}
 
-
#nav2 li:hover ul, #nav2 li.sfhover ul {left: auto; z-index:1000;}
 
-
#nav2 li ul li {border-bottom:1px solid #dedbd1; border-left:1px solid #dedbd1; border-right:1px solid #dedbd1; line-height:30px; width:15em;}
 
-
#nav2 li:hover, #nav2 li.hover {position: static;}
 
-
#nav2 li ul ul {margin: -22px 0 0 15em;}
 
-
#nav2 li:hover ul ul, #nav2 li.sfhover ul ul {left: -999em;}
 
-
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul {left: auto;}
 
-
#nav2 li:hover ul ul, #nav2 li:hover ul ul ul, #nav2 li.sfhover ul ul, #nav2 li.sfhover ul ul ul {left: -999em;}
 
-
#nav2 li:hover ul, #nav2 li li:hover ul, #nav2 li li li:hover ul, #nav2 li.sfhover ul, #nav2 li li.sfhover ul, #nav2 li li li.sfhover ul {left: auto;}
 
-
 
-
.large-imagea{background:url(https://static.igem.org/mediawiki/2012/3/3c/LARGE-IMG.png) no-repeat bottom left; width:400px; height:316px; float:left; margin-bottom:10px; padding-bottom:18px; }
 
-
.large-imagea.odd {margin-right:20px;}
 
-
.large-imagea .post-title-small{clear:both; padding:0 20px 0 20px; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; text-align:center;}
 
-
.large-imagea.post-title-small a{font-size:13px; font-weight:bold; letter-spacing:0;line-height:16px; color:#333333; text-shadow:0 1px 0 #fff; }
 
-
.large-imagea.post-title-small a:hover {color:#5f5f5f; }
 
-
 
-
/*index*/
 
-
.title-area {clear:both; height:100px; overflow:hidden; text-align:left; letter-spacing:-1px; text-transform:capitalize; margin-bottom:38px; font-size:40px; font-weight:bold; text-transform:capitalize; line-height:100px;text-shadow:0 2px 0 #000; color:#e1e1e1;}
 
-
#main-container {text-align:left; width:800px; overflow:hidden; line-height:22px; float:left; min-height:500px;}
 
-
.post-title {font-size:20px; line-height:29px; letter-spacing:-1px; text-transform:none; text-shadow:0 1px 0 #fff; padding-bottom:7px; margin-bottom:9px; background:url(https://static.igem.org/mediawiki/2012/e/ec/Horiz.gif) repeat-x bottom left; color:#000000;}
 
-
.post-titlee {font-size:22px; line-height:29px; letter-spacing:-1px; text-transform:none; text-shadow:0 1px 0 #fff; padding-bottom:7px; margin-bottom:9px; background:url(https://static.igem.org/mediawiki/2012/e/ec/Horiz.gif) repeat-x bottom left;}
 
-
.post-title a {font-weight:bolder;}
 
-
.post-meta {font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; font-size:11.5px; padding:2px 0 10px 0; margin-bottom:20px;}
 
-
span.author {font-weight:bold; text-transform:capitalize; background:url(user.png) no-repeat top left; padding-left:19px; }
 
-
span.the-date{background:url(calendar.png) no-repeat top left; padding-left:19px; font-weight:bold; color:#a2a2a2; margin-left:8px;}
 
-
span.the-comments {background:url(https://static.igem.org/mediawiki/2012/4/48/Balloon.png) no-repeat top left; padding-left:19px; margin-left:8px; color:#891111; font-family:'Lucida Grande','Lucida Sans Unicode','Trebuchet MS', verdana, georgia; font-size:11.5px; }
 
-
.post-excerpt {padding-bottom:30px; min-height:50px; overflow:hidden; clear:both;}
 
-
.post-excerpte {font-size:18px; padding-bottom:30px; min-height:50px; overflow:hidden; clear:both;line-height:29px;}
 
-
.post-excerpt a {color:#4E4E4E; background:#FFF5C0; text-shadow:0 1px 0 #fff;}
 
-
.post-excerpt a:hover {color:#828282;}
 
-
.post-excerpt img.alignright {display:inline; margin:8px 0 5px 20px;}
 
-
.post-excerpt img.alignleft {display:inline; margin:8px 20px 5px 0;}
 
-
.post-excerpt img.aligncenter {clear:both; margin:10px auto; display:block; }
 
-
.post-excerpt img.alignnone {clear:both; margin:10px auto; display:block; }
 
-
.post-excerpt a img.alignright {display:inline; margin:8px 0 5px 20px;}
 
-
.post-excerpt a img.alignleft {display:inline; margin:8px 20px 5px 0;}
 
-
.post-excerpt a img.aligncenter {clear:both; margin:10px auto; display:block; }
 
-
.post-excerpt a img.alignnone {clear:both; margin:10px auto; display:block;}
 
-
.post-excerpt h1, .post-excerpt h2, .post-excerpt h3, .post-excerpt h4, .post-excerpt h5, .post-excerpt h6 {font-size:20px; line-height:18px; margin-bottom:10px; color:#000000; letter-spacing:-1px;}
 
-
.post-excerpt ol {padding:10px 10px 10px 15px; margin-left:10px;}
 
-
.post-excerpt ol li ol {padding-left:20px;}
 
-
.post-excerpt ol li ul {padding-left:20px;}
 
-
.post-excerpt ul {padding:10px 10px 10px 15px; margin-left:10px;}
 
-
.post-excerpt ul li ol {padding-left:20px;}
 
-
.post-excerpt ul li ul {padding-left:20px;}
 
-
a.more-link {color:#fff; font-family:verdana, georgia; text-align:right; text-shadow:0 1px 0 #000;  font-size:10px; font-family:Verdana; background:#ab0303; padding:3px; position:relative; top:-25px;  clear:both;}
 
-
a:hover.more-link{color:#000; text-shadow: none;}
 
-
#post-navigation {clear:both; margin:45px 0 10px 0; padding:3px; background:#999999; text-align:center;}
 
-
#post-navigation a {color:#fff; text-shadow:0 1px 0 #000;}
 
-
#post-navigation a:hover {color:#000; text-shadow:0 1px 0 #fff;}
 
-
/*home page with slider*/
 
-
/* Easy Slider */
 
-
#slider{position:relative; text-align:left; }
 
-
#slider ul, #slider li {margin:0; padding:0; list-style:none;}
 
-
#slider li {width:820px; height:376px; overflow:hidden; background: url(https://static.igem.org/mediawiki/2012/b/bb/Slider-li-bg.png) no-repeat; color:#FFFFFF; position:relative; }
 
-
#slider .left-container {float:left; width:380px; height:210px; overflow:hidden; line-height:36px; margin-top:53px;}
 
-
#slider .post-title-large {margin-bottom:22px;}
 
-
#slider .post-title-large a {display:inline; font-size:40px; font-weight:bold; text-transform:capitalize; line-height:40px;text-shadow:0 2px 0 #000; color:#e1e1e1;}
 
-
#slider .post-title a:hover {color:#ffffff; text-shadow:none;}
 
-
#slider .post-excerpt {font-size:20px; font-weight:bold; color:#FFFFFF;}
 
-
ol#controls{margin:1em 0; padding:0; height:28px; position:relative; top:-90px;}
 
-
ol#controls li{margin:0 10px 0 0; padding:0; float:left; list-style:none; height:23px; line-height:23px;}
 
-
ol#controls li a{float:left; height:23px; line-height:23px; background: url(https://static.igem.org/mediawiki/2012/9/97/Contols-white.png) repeat-x bottom left; color:#000;  text-shadow:0 1px 0 #fff; padding:0 8px; text-decoration:none; -moz-border-radius-bottomleft:4px; -moz-border-radius-bottomright:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; }
 
-
ol#controls li.current a{background:#ab0303; color:#fff; text-shadow:none;}
 
-
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
 
-
 
-
 
-
.slider-image-container{position:relative; width:400px; height:300px; float:right; margin-top:54px; }
 
-
.post-390 {width:390px; float:left; margin-bottom:20px; text-align:left;}
 
-
.post-390.odd {margin-right:40px;}
 
-
.post-390 .post-excerpt {line-height:24px;}
 
-
.post-390 a.more-link {position:relative; top:-15px;}
 
-
.post-391 {width:800px; float:left; margin-bottom:20px; text-align:left;}
 
-
.post-391.odd {margin-right:40px;}
 
-
.post-391 .post-excerpt {line-height:24px;}
 
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
 
-
<script type="text/javascript">
 
-
 
-
(function($) {
 
-
    $.fn.easySlider = function(options) {
 
-
        var defaults = {
 
-
            prevId: 'prevBtn',
 
-
            prevText: 'Previous',
 
-
            nextId: 'nextBtn',
 
-
            nextText: 'Next',
 
-
            controlsShow: true,
 
-
            controlsBefore: '',
 
-
            controlsAfter: '',
 
-
            controlsFade: true,
 
-
            firstId: 'firstBtn',
 
-
            firstText: 'First',
 
-
            firstShow: false,
 
-
            lastId: 'lastBtn',
 
-
            lastText: 'Last',
 
-
            lastShow: false,
 
-
            vertical: false,
 
-
            speed: 400,
 
-
            auto: false,
 
-
            pause: 2000,
 
-
            continuous: false,
 
-
            numeric: false,
 
-
            numericId: 'controls'
 
-
        };
 
-
        var options = $.extend(defaults, options);
 
-
        this.each(function() {
 
-
            var obj = $(this);
 
-
            var s = $("li", obj).length;
 
-
            var w = $("li", obj).width();
 
-
            var h = $("li", obj).height();
 
-
            var clickable = true;
 
-
            obj.width(w);
 
-
            obj.height(h);
 
-
            obj.css("overflow", "hidden");
 
-
            var ts = s - 1;
 
-
            var t = 0;
 
-
            $("ul", obj).css('width', s * w);
 
-
            if (options.continuous) {
 
-
                $("ul", obj).prepend($("ul li:last-child", obj).clone().css("margin-left", "-" + w + "px"));
 
-
                $("ul", obj).append($("ul li:nth-child(2)", obj).clone());
 
-
                $("ul", obj).css('width', (s + 1) * w);
 
-
            };
 
-
            if (!options.vertical) $("li", obj).css('float', 'left');
 
-
            if (options.controlsShow) {
 
-
                var html = options.controlsBefore;
 
-
                if (options.numeric) {
 
-
                    html += '<ol id="' + options.numericId + '"></ol>';
 
-
                } else {
 
-
                    if (options.firstShow) html += '<span id="' + options.firstId + '"><a href=\"javascript:void(0);\">' + options.firstText + '</a></span>';
 
-
                    html += ' <span id="' + options.prevId + '"><a href=\"javascript:void(0);\">' + options.prevText + '</a></span>';
 
-
                    html += ' <span id="' + options.nextId + '"><a href=\"javascript:void(0);\">' + options.nextText + '</a></span>';
 
-
                    if (options.lastShow) html += ' <span id="' + options.lastId + '"><a href=\"javascript:void(0);\">' + options.lastText + '</a></span>';
 
-
                };
 
-
                html += options.controlsAfter;
 
-
                $(obj).after(html);
 
-
            };
 
-
            if (options.numeric) {
 
-
                for (var i = 0; i < s; i++) {
 
-
                    $(document.createElement("li")).attr('id', options.numericId + (i + 1)).html('<a rel=' + i + ' href=\"javascript:void(0);\">' + (i + 1) + '</a>').appendTo($("#" + options.numericId)).click(function() {
 
-
                        animate($("a", $(this)).attr('rel'), true);
 
-
                    });
 
-
                };
 
-
            } else {
 
-
                $("a", "#" + options.nextId).click(function() {
 
-
                    animate("next", true);
 
-
                });
 
-
                $("a", "#" + options.prevId).click(function() {
 
-
                    animate("prev", true);
 
-
                });
 
-
                $("a", "#" + options.firstId).click(function() {
 
-
                    animate("first", true);
 
-
                });
 
-
                $("a", "#" + options.lastId).click(function() {
 
-
                    animate("last", true);
 
-
                });
 
-
            };
 
-
            function setCurrent(i) {
 
-
                i = parseInt(i) + 1;
 
-
                $("li", "#" + options.numericId).removeClass("current");
 
-
                $("li#" + options.numericId + i).addClass("current");
 
-
            };
 
-
            function adjust() {
 
-
                if (t > ts) t = 0;
 
-
                if (t < 0) t = ts;
 
-
                if (!options.vertical) {
 
-
                    $("ul", obj).css("margin-left", (t * w * -1));
 
-
                } else {
 
-
                    $("ul", obj).css("margin-left", (t * h * -1));
 
-
                }
 
-
                clickable = true;
 
-
                if (options.numeric) setCurrent(t);
 
-
            };
 
-
            function animate(dir, clicked) {
 
-
                if (clickable) {
 
-
                    clickable = false;
 
-
                    var ot = t;
 
-
                    switch (dir) {
 
-
                    case "next":
 
-
                        t = (ot >= ts) ? (options.continuous ? t + 1 : ts) : t + 1;
 
-
                        break;
 
-
                    case "prev":
 
-
                        t = (t <= 0) ? (options.continuous ? t - 1 : 0) : t - 1;
 
-
                        break;
 
-
                    case "first":
 
-
                        t = 0;
 
-
                        break;
 
-
                    case "last":
 
-
                        t = ts;
 
-
                        break;
 
-
                    default:
 
-
                        t = dir;
 
-
                        break;
 
-
                    };
 
-
                    var diff = Math.abs(ot - t);
 
-
                    var speed = diff * options.speed;
 
-
                    if (!options.vertical) {
 
-
                        p = (t * w * -1);
 
-
                        $("ul", obj).animate({
 
-
                            marginLeft: p
 
-
                        },
 
-
                        {
 
-
                            queue: false,
 
-
                            duration: speed,
 
-
                            complete: adjust
 
-
                        });
 
-
                    } else {
 
-
                        p = (t * h * -1);
 
-
                        $("ul", obj).animate({
 
-
                            marginTop: p
 
-
                        },
 
-
                        {
 
-
                            queue: false,
 
-
                            duration: speed,
 
-
                            complete: adjust
 
-
                        });
 
-
                    };
 
-
                    if (!options.continuous && options.controlsFade) {
 
-
                        if (t == ts) {
 
-
                            $("a", "#" + options.nextId).hide();
 
-
                            $("a", "#" + options.lastId).hide();
 
-
                        } else {
 
-
                            $("a", "#" + options.nextId).show();
 
-
                            $("a", "#" + options.lastId).show();
 
-
                        };
 
-
                        if (t == 0) {
 
-
                            $("a", "#" + options.prevId).hide();
 
-
                            $("a", "#" + options.firstId).hide();
 
-
                        } else {
 
-
                            $("a", "#" + options.prevId).show();
 
-
                            $("a", "#" + options.firstId).show();
 
-
                        };
 
-
                    };
 
-
                    if (clicked) clearTimeout(timeout);
 
-
                    if (options.auto && dir == "next" && !clicked) {;
 
-
                        timeout = setTimeout(function() {
 
-
                            animate("next", false);
 
-
                        },
 
-
                        diff * options.speed + options.pause);
 
-
                    };
 
-
                };
 
-
            };
 
-
            var timeout;
 
-
            if (options.auto) {;
 
-
                timeout = setTimeout(function() {
 
-
                    animate("next", false);
 
-
                },
 
-
                options.pause);
 
-
            };
 
-
            if (options.numeric) setCurrent(0);
 
-
            if (!options.continuous && options.controlsFade) {
 
-
                $("a", "#" + options.prevId).hide();
 
-
                $("a", "#" + options.firstId).hide();
 
-
            };
 
-
        });
 
-
    };
 
-
})(jQuery);
 
-
 
-
$(document).ready(function(){
 
-
$("#slider").easySlider({
 
-
auto: false, continuous: true,
 
-
numeric: true
 
-
});
 
-
});
 
-
</script>
 
-
<script type="text/javascript">
 
-
sfHover = function() {
 
-
var sfEls = document.getElementById("nav2").getElementsByTagName("LI");
 
-
for (var i=0; i<sfEls.length; i++) {
 
-
sfEls[i].onmouseover=function() {
 
-
this.className+=" sfhover";
 
-
}
 
-
sfEls[i].onmouseout=function() {
 
-
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
 
-
}
 
-
}
 
-
}
 
-
if (window.attachEvent) window.attachEvent("onload", sfHover);
 
-
</script>
 
-
</style>
 
<div id="header">
<div id="header">
<div id="nav">
<div id="nav">

Revision as of 05:07, 24 September 2012

HIT-Harbin

Detecting Device

We use engineered E. coli.to detect the existence of S.aureus in the environment through sensing the AIPs secreted only from S.aureus, and the report will be shown by the expression of GFP.

Killing Device

The second type is designed to eradicate S.aureus through the production of lysostaphin, which would be released till a certain concentration.

Biofilm Formation Device

In order to increase bactericidal effect, we enhance biofilm formation by over-expression of yddV, a di-guanylate cyclase, which catalyzes GTP into c-di-GMP.

Application

The system we have designed can be applied to the pools which contain flowing water with existence of S.aureus. For further application, this device can developed for medical use.

About us

The HIT-Harbin team is composed of 15 motivated students across a wide range of academic backgrounds this year: from freshman to senior, from biology to electromechanics. The identical dream makes us together to share a passion for science, stay-up late in the lab and learn. We're currently taking great efforts to make it and enjoying the happiness and sadness it bring to us.

Sponsors