|
|
| (531 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <html>
| + | {{:Team:Groningen/Template/MODULE/basepage|home|category1|btnone|d/df/Overlay.home.png}} |
| - | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript">
| + | |
| - | // This will load an important jquery library.
| + | |
| - | </script>
| + | |
| - | | + | |
| - | <script type="text/javascript">
| + | |
| - | // The script below will remove all wikistylesheets, so you now have unlimited freedom for inline CSS.
| + | |
| - | for ( i=0; i<document.styleSheets.length; i++) {
| + | |
| - | void(document.styleSheets.item(i).disabled=true);
| + | |
| - | }
| + | |
| - | </script>
| + | |
| - | | + | |
| - | <script type="text/javascript">
| + | |
| - | // This script will make sure the navigation stuff always stays on top of the page, after you scrolled past the logo and banner.
| + | |
| - | $(function(){
| + | |
| - | var navigationmenuboxheight = window.innerHeight-40;
| + | |
| - | var navigationmenubox = document.getElementById("navigationmenubox");
| + | |
| - | navigationmenubox.style.height = navigationmenuboxheight+"px";
| + | |
| - | $(window).scroll(function(){
| + | |
| - | if( $(window).scrollTop() > 217) {
| + | |
| - | $('#noscroll').css({position: 'fixed', top: '0px'});
| + | |
| - | $('#titlebaroverlay').css({position: 'fixed', top: '0px'});
| + | |
| - | $('#external_links').css({position: 'fixed', top: '53px'});
| + | |
| - | } else {
| + | |
| - | $('#noscroll').css({position: 'absolute', top: '217px'});
| + | |
| - | $('#titlebaroverlay').css({position: 'absolute', top: '217px'});
| + | |
| - | $('#external_links').css({position: 'absolute', top: '270px'});
| + | |
| - | }
| + | |
| - | });
| + | |
| - | });
| + | |
| - | </script>
| + | |
| - | | + | |
| - | <script type="text/javascript">
| + | |
| - | //This code is to switch visibility of the pages and titles. Later on, this code might be adjusted to also allow for different languages, and then the titlemenu and the carousel also need to be taken into account. | + | |
| - | function changevisibility(x) {
| + | |
| - | elements = document.getElementsByClassName('visibilitytoggle');
| + | |
| - | for (var i = 0; i < elements.length; i++) {
| + | |
| - | elements[i].style.visibility="hidden";
| + | |
| - | }
| + | |
| - | elements = document.getElementsByClassName(x);
| + | |
| - | for (var i = 0; i < elements.length; i++) {
| + | |
| - | elements[i].style.visibility="visible";
| + | |
| - | if( $(window).scrollTop() > 217){
| + | |
| - | window.scrollTo(0,217);
| + | |
| - | }
| + | |
| - | }
| + | |
| - | }
| + | |
| - | </script>
| + | |
| - | | + | |
| - | <script>
| + | |
| - | //This script is about the carousel in the banner. It scripts the alternation between the carousel elements, AND the buttons to navigate the carousel. Later on it will probably also code the page switching IF we want the user to be able to use the carousel as a navigation element.
| + | |
| - | // direction = boolean value: true or false. If true, go to NEXT slide; otherwise go to PREV slide
| + | |
| - | | + | |
| - | function toggleSlide(direction) {
| + | |
| - | var elements = document.getElementsByClassName("hideable"); // gets all the "slides" in our slideshow
| + | |
| - | // Find the LI that's currently displayed
| + | |
| - | var visibleID = getVisible(elements);
| + | |
| - | elements[visibleID].style.display = "none"; // hide the currently visible LI
| + | |
| - | if(direction) {
| + | |
| - | var makeVisible = next(visibleID, elements.length); // get the previous slide
| + | |
| - | } else {
| + | |
| - | var makeVisible = prev(visibleID, elements.length); // get the next slide
| + | |
| - | }
| + | |
| - | elements[makeVisible].style.display = "block"; // show the previous or next slide
| + | |
| - | | + | |
| - | }
| + | |
| - | | + | |
| - | function getVisible(elements) {
| + | |
| - | var visibleID = -1;
| + | |
| - | for(var i = 0; i < elements.length; i++) {
| + | |
| - | if(elements[i].style.display == "block") {
| + | |
| - | visibleID = i;
| + | |
| - | }
| + | |
| - | }
| + | |
| - | return visibleID;
| + | |
| - | }
| + | |
| - | function prev(num, arrayLength) {
| + | |
| - | if(num == 0) return arrayLength-1;
| + | |
| - | else return num-1;
| + | |
| - | }
| + | |
| - | function next(num, arrayLength) {
| + | |
| - | if(num == arrayLength-1) return 0;
| + | |
| - | else return num+1;
| + | |
| - | }
| + | |
| - | | + | |
| - | var interval = 3500; // You can change this value to your desired speed. The value is in milliseconds, so if you want to advance a slide every 5 seconds, set this to 5000.
| + | |
| - | var switching = setInterval("toggleSlide(true)", interval);
| + | |
| - | | + | |
| - | window.paused = false;
| + | |
| - | function toggleInterval() {
| + | |
| - | if(!window.paused) {
| + | |
| - | clearInterval(switching);
| + | |
| - | } else {
| + | |
| - | switching = setInterval("toggleSlide(true)", interval);
| + | |
| - | }
| + | |
| - | window.paused = !(window.paused);
| + | |
| - | }
| + | |
| - | | + | |
| - | function goToEdge(where) {
| + | |
| - | var elements = document.getElementsByClassName("hideable");
| + | |
| - | var visibleID = getVisible(elements);
| + | |
| - | var firstButton = document.getElementById("firstButton");
| + | |
| - | var lastButton = document.getElementById("lastButton");
| + | |
| - | elements[visibleID].style.display = "none"; //hides the currently visible item
| + | |
| - | if(where==="firstimage") {
| + | |
| - | elements[0].style.display = "block"; //shows the first item
| + | |
| - | } else if (where==="secondimage"){
| + | |
| - | elements[1].style.display = "block"; //shows the second item
| + | |
| - | } else {
| + | |
| - | elements[2].style.display = "block"; //shows the second item
| + | |
| - | }
| + | |
| - | }
| + | |
| - | </script>
| + | |
| - | | + | |
| - | <script type="text/javascript">
| + | |
| - | //This script is about the navigation menu, it allows things to collapse and stuff. We took it from the Tshingua team 2013, and improved it a bit. (mostly in the layout.)
| + | |
| - | //Set initial values so the menu starts at the home button.
| + | |
| - | | + | |
| - | function setupMenu(imenuItem, isubmenuItem){
| + | |
| - | //Collapse all submenus
| + | |
| - | $(".sub-menu").data("collapsed", true).hide();
| + | |
| - | //Show the selected menu item
| + | |
| - | var menuItem = $($(".menu-item").get(imenuItem));
| + | |
| - | //Select the menu item
| + | |
| - | menuItem.addClass("menu-selected");
| + | |
| - | //Select submenu item
| + | |
| - | var submenu = menuItem.children(".sub-menu");
| + | |
| - | | + | |
| - | //Set events
| + | |
| - | $(".menu-item span").click(function(){
| + | |
| - | var submenu = $(this).next();
| + | |
| - | var hasSubmenu = (submenu.length > 0);
| + | |
| - | var collapsed = true;
| + | |
| - | if(hasSubmenu){
| + | |
| - | collapsed = submenu.data("collapsed");
| + | |
| - | }
| + | |
| - | //Select and expand this menu item
| + | |
| - | var parentDiv = $(this).parent();
| + | |
| - | //Deselect and collapse all other menu items
| + | |
| - | $("div.menu-item").not(parentDiv)
| + | |
| - | .removeClass("menu-selected")
| + | |
| - | .children(".sub-menu")
| + | |
| - | .data("collapsed", true)
| + | |
| - | .slideUp();
| + | |
| - | parentDiv.addClass("menu-selected");
| + | |
| - | if(hasSubmenu){
| + | |
| - | if(collapsed){
| + | |
| - | submenu.data("collapsed", false).slideDown();
| + | |
| - | }else{
| + | |
| - | submenu.data("collapsed", true).slideUp();
| + | |
| - | }
| + | |
| - | }
| + | |
| - | });
| + | |
| - | $("div.sub-menu-item").click(function(){
| + | |
| - | //Deselect other submenu items
| + | |
| - | $("div.sub-menu-item").removeClass("sub-menu-selected");
| + | |
| - | //Select this submenu item
| + | |
| - | $(this).addClass("sub-menu-selected");
| + | |
| - | });
| + | |
| - | }
| + | |
| - | </script>
| + | |
| - | | + | |
| - | <script type="text/javascript">
| + | |
| - | //This function will open or collapse menus when things are switched with the titlebuttons. (hopefully)
| + | |
| - | function clickmenu(whichpage){
| + | |
| - | whichpage.trigger("click");
| + | |
| - | }
| + | |
| - | </script>
| + | |
| - | | + | |
| - | <style type="text/css">
| + | |
| - | /*The text below will make some of the annoying standard elements invisible, like the mega iGEM logo, the search box and the footer about wikimedia. Because our custom divs #scrollablebontent and #noscroll (in which we code our entire site) are embedded inside #globalwrapper (that we just made invisible) we have to make the custom div visible again. The same counts for the #menubar, that is one of the elements that MUST stay on the page.*/
| + | |
| - | | + | |
| - | /*Below is our unlimited freedom CSS embedded style. :D */
| + | |
| - | | + | |
| - | /*First, we'll have to work a bit on the standard stuff iGEM gives us.*/
| + | |
| - | body{
| + | |
| - | font-family: sans-serif;
| + | |
| - | background:#82c2ea;
| + | |
| - | width:100%;
| + | |
| - | height 100%;
| + | |
| - | padding:0px;
| + | |
| - | margin:0px;
| + | |
| - | }
| + | |
| - | | + | |
| - | #p-logo, #search-controls, #footer, .firstHeading, #siteSub, .printfooter
| + | |
| - | {
| + | |
| - | visibility:hidden;
| + | |
| - | }
| + | |
| - | | + | |
| - | #globalWrapper, #content, #bodyContent{
| + | |
| - | position:absolute;
| + | |
| - | top:0px;
| + | |
| - | left:0px;
| + | |
| - | padding:0px;
| + | |
| - | margin:0px;
| + | |
| - | width:100%;
| + | |
| - | height:100%;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*Everything related to the menubar. The menubar is one of the things that's in the coding we can't change, and we HAVE to keep it (so we can't just make it invisible and ignore it). Note that there are two elements with the id menubar, and that they are divided into two classes, namely left-menu and right-menu. We made and extra box called topmenubarbackground so that we can have a background for the menu that is 100% the wide of the screen. But we will set the style for that element later in the site, because it's inside the element where we programmed our own stuff.*/
| + | |
| - | #menubar ul{
| + | |
| - | z-index:2;
| + | |
| - | width:365px;
| + | |
| - | height:12px;
| + | |
| - | position:absolute;
| + | |
| - | top:-15px;
| + | |
| - | left:50%;
| + | |
| - | padding: 0px;
| + | |
| - | list-style-type: none;
| + | |
| - | }
| + | |
| - | .left-menu ul{
| + | |
| - | margin-left:-510px;
| + | |
| - | }
| + | |
| - | .left-menu li{
| + | |
| - | float:left;
| + | |
| - | margin-right:10px;
| + | |
| - | display:inline;
| + | |
| - | color:#ffffff;
| + | |
| - | font:10px arial,sans-serif;
| + | |
| - | }
| + | |
| - | .right-menu li{
| + | |
| - | float:right;
| + | |
| - | margin-left:10px;
| + | |
| - | display: inline;
| + | |
| - | color:#ffffff;
| + | |
| - | font:10px arial,sans-serif;
| + | |
| - | }
| + | |
| - | #menubar a{
| + | |
| - | color:#ffffff;
| + | |
| - | font:10px arial,sans-serif;
| + | |
| - | text-decoration: none;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*Here, the elements that we made ourselves start.*/
| + | |
| - | #ourentirewebsite{
| + | |
| - | visibility:visible;
| + | |
| - | position:absolute;
| + | |
| - | top:0px;
| + | |
| - | left:0px;
| + | |
| - | width:100%;
| + | |
| - | height:100%;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*Topmenubarbackground and titlebaroverlay are elements that are 100% screen width wide, so we'll have to define them outside the scrollable and the not scrollable content boxes, which is a bit weird. We also have a backgroundimagebox, with, as the name suggests, a background image. This background is transparent and the body background should shine through it. We also made a shadowbox because we weren't satisfied with how the shadow looked when we applied the shadow to the individual elements.*/
| + | |
| - | #topmenubarbackground{
| + | |
| - | width:100%;
| + | |
| - | top:0px;
| + | |
| - | left:0px;
| + | |
| - | height:17px;
| + | |
| - | background:#000000;
| + | |
| - | }
| + | |
| - | #titlebaroverlay{
| + | |
| - | z-index:-1;
| + | |
| - | width:800px;
| + | |
| - | position:absolute;
| + | |
| - | top:217px;
| + | |
| - | left:180px;
| + | |
| - | height:32px;
| + | |
| - | border-top:4px solid #003f87;
| + | |
| - | border-bottom:4px solid #003f87;
| + | |
| - | }
| + | |
| - | #backgroundimagebox{
| + | |
| - | z-index:-1;
| + | |
| - | position:fixed;
| + | |
| - | top:0px;
| + | |
| - | left:0px;
| + | |
| - | width:100%;
| + | |
| - | height:100%;
| + | |
| - | background-attachment:fixed;
| + | |
| - | }
| + | |
| - | #shadowbox{
| + | |
| - | position:fixed;
| + | |
| - | top:0px;
| + | |
| - | left:50%;
| + | |
| - | z-index:-1;
| + | |
| - | margin-left:-510px;
| + | |
| - | width:1020px;
| + | |
| - | height:100%;
| + | |
| - | background:white; filter:alpha(opacity=60); opacity:.6;
| + | |
| - | box-shadow: 0px 0px 180px #000;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*Everything related to the container where we put the entire scrollable part of the site in.*/
| + | |
| - | #scrollablecontent{
| + | |
| - | position:absolute;
| + | |
| - | width:730px;
| + | |
| - | height:300px;
| + | |
| - | left:50%;
| + | |
| - | top:17px;
| + | |
| - | margin-left:-510px;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*Everything related to the logobox*/
| + | |
| - | #logobox{
| + | |
| - | padding:10px;
| + | |
| - | width:200px;
| + | |
| - | height:180px;
| + | |
| - | position:absolute;
| + | |
| - | left:0px;
| + | |
| - | top:0px;
| + | |
| - | background-color:#ffffff;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*External links (igem, facebook and twitter button.)*/
| + | |
| - | #external_links{
| + | |
| - | position:absolute;
| + | |
| - | left:50%;
| + | |
| - | top:270px;
| + | |
| - | margin-left:-680px;
| + | |
| - | width:160px;
| + | |
| - | height:300px;
| + | |
| - | }
| + | |
| - | | + | |
| - | #igembutton{
| + | |
| - | position:absolute;
| + | |
| - | top:0px;
| + | |
| - | right:19px;
| + | |
| - | width: 100px;
| + | |
| - | height: 80px;
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -5px -164px;
| + | |
| - | } | + | |
| - | #igembutton:hover{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -5px -72px;
| + | |
| - | } | + | |
| - | #facebookbutton{
| + | |
| - | position:absolute;
| + | |
| - | top:73px;
| + | |
| - | right:0px;
| + | |
| - | width: 90px;
| + | |
| - | height: 90px;
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -110px -164px;
| + | |
| - | }
| + | |
| - | #facebookbutton:hover{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -110px -72px;
| + | |
| - | }
| + | |
| - | #twitterbutton{
| + | |
| - | position:absolute;
| + | |
| - | top:132px;
| + | |
| - | right:55px;
| + | |
| - | width:90px;
| + | |
| - | height:90px;
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -205px -164px;
| + | |
| - | }
| + | |
| - | #twitterbutton:hover{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -205px -72px;
| + | |
| - | }
| + | |
| - | | + | |
| - | #sponsored_links{
| + | |
| - | position:absolute;
| + | |
| - | left:50%;
| + | |
| - | top:270px;
| + | |
| - | margin-left:520px;
| + | |
| - | width:160px;
| + | |
| - | height:2000px;
| + | |
| - | }
| + | |
| - | | + | |
| - | #link_chinese{cursor:pointer;
| + | |
| - | cursor:hand;
| + | |
| - | }
| + | |
| - | #link_dutch{cursor:pointer;
| + | |
| - | cursor:hand;
| + | |
| - | }
| + | |
| - | #link_finnish{cursor:pointer;
| + | |
| - | cursor:hand;
| + | |
| - | }
| + | |
| - | #link_french{cursor:pointer;
| + | |
| - | cursor:hand;
| + | |
| - | }
| + | |
| - | #link_norwegian{cursor:pointer;
| + | |
| - | cursor:hand;
| + | |
| - | }
| + | |
| - | #link_portuguese{cursor:pointer;
| + | |
| - | cursor:hand;
| + | |
| - | }
| + | |
| - | | + | |
| - | | + | |
| - | /*Everything related to the banner, and the carousel inside it.*/
| + | |
| - | #bannerbox{
| + | |
| - | width:800px;
| + | |
| - | height:200px;
| + | |
| - | position:absolute;
| + | |
| - | left:220px;
| + | |
| - | top:0px;
| + | |
| - | }
| + | |
| - | .hideable{
| + | |
| - | display:none
| + | |
| - | }
| + | |
| - | #carouselbox{
| + | |
| - | position:absolute;
| + | |
| - | top:0px;
| + | |
| - | left:0px;
| + | |
| - | background-color:#ffffff;
| + | |
| - | height:100%;
| + | |
| - | width:100%;
| + | |
| - | }
| + | |
| - | #carouselbox ul{
| + | |
| - | background-color:#ffffff;
| + | |
| - | }
| + | |
| - | #carouselbox li{
| + | |
| - | position:absolute;
| + | |
| - | top:0px;
| + | |
| - | left:0px;
| + | |
| - | height:100%;
| + | |
| - | width:100%;
| + | |
| - | }
| + | |
| - | #carouselbox #carousel1{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/6/66/CarouselIwide.png') 0px 0%;
| + | |
| - | }
| + | |
| - | #carouselbox #carousel2{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/6/66/CarouselIwide.png') 0px 100%;
| + | |
| - | }
| + | |
| - | #carouselbox #carousel3{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/6/66/CarouselIwide.png') 0px 200%;
| + | |
| - | }
| + | |
| - | #carouselbox #carousel4{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/6/66/CarouselIwide.png') 0px 300%;
| + | |
| - | }
| + | |
| - | #carouselnextbutton{
| + | |
| - | position:absolute;
| + | |
| - | top:100px;
| + | |
| - | left:98%;
| + | |
| - | z-index:999;
| + | |
| - | width: 19px;
| + | |
| - | height: 30px;
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -62px 0px;
| + | |
| - | }
| + | |
| - | #carouselnextbutton:hover{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -62px -32px;
| + | |
| - | }
| + | |
| - | #carouselprevbutton{
| + | |
| - | position:absolute;
| + | |
| - | top:100px;
| + | |
| - | left:5px;
| + | |
| - | z-index:999;
| + | |
| - | width: 19px;
| + | |
| - | height: 30px;
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -82px 0px;
| + | |
| - | }
| + | |
| - | #carouselprevbutton:hover{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -82px -32px;
| + | |
| - | }
| + | |
| - | #carousel_quick_jump_buttons{
| + | |
| - | position:absolute;
| + | |
| - | bottom:0px;
| + | |
| - | left:47%;
| + | |
| - | }
| + | |
| - | .carouselquickjumpbutton{
| + | |
| - | position:relative;
| + | |
| - | z-index:999;
| + | |
| - | width:21px;
| + | |
| - | height:21px;
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -32px -5px;
| + | |
| - | }
| + | |
| - | .carouselquickjumpbutton:hover{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -32px -37px;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*Everything related to the contents.*/
| + | |
| - | #contentbox{
| + | |
| - | width:800px;
| + | |
| - | height:0px;
| + | |
| - | position:absolute;
| + | |
| - | left:220px;
| + | |
| - | top:240px;
| + | |
| - | }
| + | |
| - | #contentbox .visibilitytoggle{
| + | |
| - | padding: 10px 20px 10px 10px;
| + | |
| - | position:absolute;
| + | |
| - | top:0px;
| + | |
| - | left:0px;
| + | |
| - | width:770px;
| + | |
| - | }
| + | |
| - | .italic{
| + | |
| - | font-style:italic;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*Everything related to the container where we put the entire not scrollable part of the site in. Inside this container are the language menu, the navigation menu and the title of the content. The idea is that this part only scrolls a little bit, and after that, it stays on top of the page.*/
| + | |
| - | #noscroll{
| + | |
| - | position:absolute;
| + | |
| - | width:730px;
| + | |
| - | left:50%;
| + | |
| - | top:217px;
| + | |
| - | margin-left:-510px;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*Everything related to the languagemenu*/
| + | |
| - | #languagemenubox{
| + | |
| - | width:200px;
| + | |
| - | height:32px;
| + | |
| - | position:absolute;
| + | |
| - | left:0px;
| + | |
| - | top:0px;
| + | |
| - | border-top:4px solid #003f87;
| + | |
| - | border-bottom:4px solid #003f87;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*Everything related to the content title box*/
| + | |
| - | #titlebox{
| + | |
| - | width:800px;
| + | |
| - | height:32px;
| + | |
| - | position:absolute;
| + | |
| - | left:220px;
| + | |
| - | top:0px;
| + | |
| - | border-top:4px solid #003f87;
| + | |
| - | border-bottom:4px solid #003f87;
| + | |
| - | }
| + | |
| - | #titlebox h1{
| + | |
| - | position:absolute;
| + | |
| - | top:-22px;
| + | |
| - | color:#003f87;
| + | |
| - | font-family: Impact, Charcoal;
| + | |
| - | font-size:30px;
| + | |
| - | }
| + | |
| - | #titlebox .nextpagebutton{
| + | |
| - | position:absolute;
| + | |
| - | top:0px;
| + | |
| - | right:60px;
| + | |
| - | height:32px;
| + | |
| - | width:20px;
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -62px 0px;
| + | |
| - | }
| + | |
| - | #titlebox .nextpagebutton:hover{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -62px -32px;
| + | |
| - | }
| + | |
| - | #titlebox .nextchapterbutton{
| + | |
| - | position:absolute;
| + | |
| - | top:0px;
| + | |
| - | right:5px;
| + | |
| - | height:32px;
| + | |
| - | width:30px;
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -102px 0px;
| + | |
| - | }
| + | |
| - | #titlebox .nextchapterbutton:hover{
| + | |
| - | background: url('https://static.igem.org/mediawiki/2014/a/a0/Carouselbuttonssprites.png') -102px -32px;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*Everything related to the navigation menu*/
| + | |
| - | #navigationmenubox{
| + | |
| - | width:220px;
| + | |
| - | position:absolute;
| + | |
| - | left:0px;
| + | |
| - | top:40px;
| + | |
| - | visibility:visible;
| + | |
| - | }
| + | |
| - | #navigationmenu{
| + | |
| - | text-align:left;
| + | |
| - | position:absolute;
| + | |
| - | top:10px;
| + | |
| - | left:10px;
| + | |
| - | width:200px;
| + | |
| - | }
| + | |
| - | .menu-item{
| + | |
| - | color:#000000;
| + | |
| - | position:relative;
| + | |
| - | border-bottom: 2px solid #003f87;
| + | |
| - | line-height: 25px;
| + | |
| - | font-size: 100%;
| + | |
| - | cursor:pointer;
| + | |
| - | }
| + | |
| - | .menu-item span{
| + | |
| - | display:block;
| + | |
| - | text-indent:30px;
| + | |
| - | }
| + | |
| - | .sub-menu{
| + | |
| - | margin: 0px 0px 0px 0px;
| + | |
| - | color:#000000;
| + | |
| - | font-style: italic;
| + | |
| - | }
| + | |
| - | .sub-menu-item{
| + | |
| - | font-size: 12px;
| + | |
| - | position:relative;
| + | |
| - | border-bottom: 0px solid #ffffff;
| + | |
| - | line-height: 25px;
| + | |
| - | }
| + | |
| - | .menu-item a {
| + | |
| - | text-decoration:none;
| + | |
| - | color:#000000;
| + | |
| - | }
| + | |
| - | .menu-selected{
| + | |
| - | background:#82c2ea;
| + | |
| - | color:#ffffff;
| + | |
| - | border-bottom:2px solid #003f87;
| + | |
| - | }
| + | |
| - | .sub-menu-selected{
| + | |
| - | color:#ffffff;
| + | |
| - | }
| + | |
| - | #menu_home{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px 0px no-repeat;
| + | |
| - | }
| + | |
| - | #menu_project{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -50px no-repeat;
| + | |
| - | }
| + | |
| - | #menu_modelling{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -100px no-repeat;
| + | |
| - | }
| + | |
| - | #menu_policyandpractice{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -150px no-repeat;
| + | |
| - | }
| + | |
| - | #menu_education{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -450px no-repeat;
| + | |
| - | }
| + | |
| - | #menu_team{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -400px no-repeat;
| + | |
| - | }
| + | |
| - | #menu_parts{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -200px no-repeat;
| + | |
| - | }
| + | |
| - | #menu_notebook{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -250px no-repeat;
| + | |
| - | }
| + | |
| - | #menu_safety{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -500px no-repeat;
| + | |
| - | }
| + | |
| - | #menu_awards{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -300px no-repeat;
| + | |
| - | }
| + | |
| - | #menu_attribution{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -350px no-repeat;
| + | |
| - | }
| + | |
| - | #menu_artanddesign{
| + | |
| - | background:url('https://static.igem.org/mediawiki/2014/a/a2/Groningen_2014_Newmenusprites.png') 0px -600px no-repeat;
| + | |
| - | }
| + | |
| - | | + | |
| - | /*On start, a lot of things must be set invisible, and only the home page info needs to be visible. This piece of style might be redefined later, if we add more languages. In that case, .home will become something like .home_english.*/
| + | |
| - | .visibilitytoggle{
| + | |
| - | visibility:hidden;
| + | |
| - | }
| + | |
| - | | + | |
| - | .content_home{
| + | |
| - | visibility:visible;
| + | |
| - | }
| + | |
| - | </style>
| + | |
| - | | + | |
| - | <body>
| + | |
| - | | + | |
| - | <div id="ourentirewebsite">
| + | |
| - | | + | |
| - | <div id="topmenubarbackground"></div>
| + | |
| - | <div id="backgroundimagebox"></div>
| + | |
| - | <div id="shadowbox"></div>
| + | |
| - | <div id="titlebaroverlay"></div>
| + | |
| - | | + | |
| - | <div id="external_links">
| + | |
| - | <a href="https://2014.igem.org/Main_Page" target="_blank"><img id="igembutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" width="30px" height="30px" /></a>
| + | |
| - | <a href="https://www.facebook.com/IGEMRUG2014" target="_blank"><img id="facebookbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" width="30px" height="30px" /></a>
| + | |
| - | <a href="https://twitter.com/iGEMRUG2014" target="_blank"><img id="twitterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" width="30px" height="30px" /></a>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="sponsored_links">
| + | |
| - | <a href="http://www.rug.nl/research/gbb/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/0/02/GBBlolo.jpg" width="150px"></img></a><br>
| + | |
| - | <a href="http://www.bebasic.org" target="_blank">Be Basic</a></br>
| + | |
| - | <a href="http://www.synenergene.eu//" target="_blank">Synenergene</a></br>
| + | |
| - | <a href="http://www.rug.nl/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/a/af/Rug400-logo-rood-rgb.png" width="150px"></img></a></br>
| + | |
| - | <a href="http://www.rug.nl/sciencelinx" target="_blank"><img src="https://static.igem.org/mediawiki/2014/2/23/Sciencelinxlogo.png" width="100px"</img></a>
| + | |
| - | <a href="http://www.dsm.com/corporate/home.html" target="_blank"><img src="https://static.igem.org/mediawiki/2014/d/d6/Banner-cworld-logonobg.png" width="150px"></img></a></br>
| + | |
| - | <a href="http://www.rug.nl/about-us/support-the-university/groninger-university-fund/?lang=en" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/96/GUFlogo.png" width="150px"></img></a></br>
| + | |
| - | <a href="https://www.erasynbio.eu/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/5/58/Logo_ERASynBio.png" width="150px"></img></a></br>
| + | |
| - | <a href="http://www.rug.nl/research/zernike/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/9/90/ZIAMlogo.png" width="150px"></img></a></br>
| + | |
| - | <a href="http://www.genscript.com/index.html/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/f/f4/Genscriptlogo.png" width="150px"></img></a></br>
| + | |
| - | <a href="www.megazyme.com/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/6/66/Copy_of_RGB_megazyme_full_logo_high_res_%281%29.png" width="100px"></img></a></br>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | | + | |
| - | <div id="scrollablecontent">
| + | |
| - | | + | |
| - | <div id="logobox"><img src="https://static.igem.org/mediawiki/2014/3/30/Groningen_2014_logo.png" Height=180px></img></div>
| + | |
| - | | + | |
| - | <div id="bannerbox">
| + | |
| - | <div id="carouselbox" onmouseover="toggleInterval()" onmouseout="toggleInterval()">
| + | |
| - | <ul style="list-style-type: none; margin-left: -2em;">
| + | |
| - | <li id="carousel1" class="hideable" style="display: block;"></li>
| + | |
| - | <li id="carousel2" class="hideable"></li>
| + | |
| - | <li id="carousel3" class="hideable"></li>
| + | |
| - | <li id="carousel4" class="hideable"></li>
| + | |
| - | </ul>
| + | |
| - | <div id="carouselmenu">
| + | |
| - | <div id="carousel_prev_next_buttons">
| + | |
| - | <img id="carouselnextbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" width="30px" height="30px" onclick="toggleSlide(true);" />
| + | |
| - | <img id="carouselprevbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" width="30px" height="30px" onclick="toggleSlide(false);" />
| + | |
| - | </div>
| + | |
| - | <div id="carousel_quick_jump_buttons">
| + | |
| - | <img class="carouselquickjumpbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" width="30px" height="30px" onclick="goToEdge('firstimage')" />
| + | |
| - | <img class="carouselquickjumpbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" width="30px" height="30px" onclick="goToEdge('secondimage')" />
| + | |
| - | <img class="carouselquickjumpbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" width="30px" height="30px" onclick="goToEdge('thirdimage')" />
| + | |
| - | <img class="carouselquickjumpbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" width="30px" height="30px" onclick="goToEdge('fourthimage')" />
| + | |
| - | </div>
| + | |
| - | <form>
| + | |
| - | <input type="button" value="Back" onclick="toggleSlide(false);" />
| + | |
| - | <input id="jumptofirstimagebutton" type="button" value="one" onclick="goToEdge('firstimage')" />
| + | |
| - | <input id="jumptosecondimagebutton" type="button" value="two" onclick="goToEdge('secondimage')" />
| + | |
| - | <input id="jumptothirdimagebutton" type="button" value="three" onclick="goToEdge('thirdimage')" />
| + | |
| - | <input id="jumptofourthimagebutton" type="button" value="four" onclick="goToEdge('fourthimage')" />
| + | |
| - | <input type="button" value="Forward" onclick="toggleSlide(true);" />
| + | |
| - | </form>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="contentbox">
| + | |
| - | <span id="content_home" class="visibilitytoggle content_home">
| + | |
| - | <font align="justify">
| + | |
| - | <p>
| + | |
| - | <b>We're still looking for sponsors!</b><br>
| + | |
| - | If you want to sponsor us, please contact our head of acquisition Anna via <i>annalauxen</i><i>@igemgroningen.com</i>.
| + | |
| - | </p>
| + | |
| - | <iframe width="725" height="453" src="https://tinkercad.com/embed/69bAjH6R54F" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
| + | |
| - | <p>
| + | |
| - | <b>LactoAid – A smart bandage for burn wounds</b><span id="link_chinese" onclick="changevisibility('content_chinese')"><img src="https://static.igem.org/mediawiki/2014/3/37/Chinese.png" title="Chinese, by courtesy of @ Sun's"></img></span>
| + | |
| - | <span id="link_dutch" onclick="changevisibility('content_dutch')"><img src="https://static.igem.org/mediawiki/2014/4/47/Dutch.png" title="Dutch"></img></span>
| + | |
| - | <span id="link_finnish" onclick="changevisibility('content_home_finnish')"><img src="https://static.igem.org/mediawiki/2014/3/33/Finnish.png" title=Finnish by courtesy of the university of Helsinki"></img></span>
| + | |
| - | <span id="link_french" onclick="changevisibility('content_home_french')"><img src="https://static.igem.org/mediawiki/2014/c/cf/French.png" title=French by courtesy of the university of Paris Saclay</span>
| + | |
| - | <span id="link_norwegian" onclick="changevisibility('content_home_norwegian')"><img src="https://static.igem.org/mediawiki/2014/3/32/Norwegian.png" title=Norwegian by courtesy of the university of Oslo"></img></span>
| + | |
| - | <span id="link_portuguese" onclick="changevisibility('content_home_portuguese')"><img src="https://static.igem.org/mediawiki/2014/3/3a/Portuguese.png" title=Portuguese by courtesy of the university of São Paulo"></img></span></p>
| + | |
| - | <p>
| + | |
| - | Infections caused by Staphylococcus aureus and Pseudomonas aeruginosa often pose problems for burn wound treatments. We developed a new kind of bandage that prevents these infections and reduces the use of antibiotics, thereby lowering the risk of developing antibiotic resistance. The bandage consists of a hydrogel that contains genetically engineered Lactococcus <i>lactis</i> with nutrients. The engineered strain of <i>L. lactis</i> detects the quorum sensing molecules of the two pathogens in the wound and subsequently produces the antimicrobial nisin as well as some other Infection-Preventing-Molecules (IPMs). These IPMs are the anti-biofilm protein Dispersin B and the quorum quenching protein AHLase. The gel is placed between two layers, a top layer to allow diffusion of gases and a bottom layer to contain the bacteria within the bandage. Hydrating the gel by breaking adjacent water pockets initiates the growth of the bacteria, thereby activating the bandage.
| + | |
| - | </p>
| + | |
| - | | + | |
| - | <span id="content_home" class="visibilitytoggle content_chinese">
| + | |
| - | <p>
| + | |
| - | <b>We're still looking for sponsors!</b><br>
| + | |
| - | If you want to sponsor us, please contact our head of acquisition Anna via <i>annalauxen</i><i>@igemgroningen.com</i>.
| + | |
| - | </p>
| + | |
| - | <iframe width="725" height="453" src="https://tinkercad.com/embed/69bAjH6R54F" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
| + | |
| - | <p>
| + | |
| - | <b>LactoAid-给灼伤一个聪明的敷料</b> <span id="link_english" onclick="changevisibility('content_home')"><img src="https://static.igem.org/mediawiki/2014/0/0a/English.png" title="Back to English"></img></span></p>
| + | |
| - | <p>
| + | |
| - | | + | |
| - | 金黄色葡萄球菌和绿脓杆菌经常导致灼伤伤口感染,影响治疗。本研究研制了一种敷料,既
| + | |
| - | | + | |
| - | 可以预防此类感染,又能减少抗生素的使用,因此降低抗生素抗药性的发生。此敷料带有一
| + | |
| - | | + | |
| - | 种水凝胶,里面含有转基因乳酸乳球菌和它所需要的营养成分。转基因的乳酸乳球菌能够探
| + | |
| - | | + | |
| - | 测到灼伤伤口里两种病原体的群体感应分子,并发出乳酸链球菌肽以及另外两种抗感染分子
| + | |
| - | | + | |
| - | (Infection Preventing Molecules, IPMs)。这两种抗感染分子分别是分散蛋白(Dispersin B)和群
| + | |
| - | | + | |
| - | 体感应淬灭酶酰基高丝氨酸内酯酶。水凝胶夹在两层中间,上层使敷料透气,下层控制敷料
| + | |
| - | | + | |
| - | 里的细菌。通过把邻近的水包穿破,使水凝胶产生水合反应,因而使细菌开始生长,这样就
| + | |
| - | | + | |
| - | 可以激活此敷料了。
| + | |
| - | </p>
| + | |
| - | </span>
| + | |
| - | | + | |
| - | <span id="content_home" class="visibilitytoggle content_dutch">
| + | |
| - | <p>
| + | |
| - | <b>We zoeken nog steeds sponsors!</b><br>
| + | |
| - | Als U ons wilt steunen, neem dan contact op met ons hoofd acquisitie Anna via <i>annalauxen</i><i>@igemgroningen.com</i>.
| + | |
| - | </p>
| + | |
| - | <iframe width="725" height="453" src="https://tinkercad.com/embed/69bAjH6R54F" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
| + | |
| - | <p>
| + | |
| - | <b>LactoAid - Een slim verband voor brandwonden</b><span id="link_english" onclick="changevisibility('content_home')"><img src="https://static.igem.org/mediawiki/2014/0/0a/English.png" title="Back to English"></img></span></p>
| + | |
| - | Infecties door Staphylococcus aureus en Pseudomonas aeruginosa zorgen vaak voor complicaties bij de behandeling van brandwonden. We hebben een nieuw soort verband ontwikkeld dat deze infecties tegengaat en het gebruik van antibiotica terugdringt waardoor het risico op de opntwikkeling van antibiotica resistentie verminderd wordt. Het verband bestaat uit een hydrogel die genetisch gemodificeerde Lactococcus lactis bevat met nutriënten. Deze gemodificeerde stam van L. lactis detecteert 'quorum sensing' moleculen van de twee pathogenen in de wond en produceert vervolgens zowel het antimicrobiële nisine als enkele andere Infection-Preventing-Molecules (IPMs). Deze IPMs zijn het anti-biofilm eiwit Dispersin B en het quorum quenching eiwit AHLase. The gel zit tussen twee lagen, een bovenlaag die de diffusie van gassen accomodeert en een onderlaag om de bacteriën in het verband vast te houden. De groei van bacteriën begint als de gel bevochtigd wordt door naastliggende waterzakjes te breken, zodat het verband geactiveerd wordt.
| + | |
| - | </p>
| + | |
| - | </span>
| + | |
| - | | + | |
| - | <span id="content_home" class="visibilitytoggle content_home_finnish">
| + | |
| - | <p>
| + | |
| - | <b>We're still looking for sponsors!</b><br>
| + | |
| - | If you want to sponsor us, please contact our head of acquisition Anna via <i>annalauxen</i><i>@igemgroningen.com</i>.
| + | |
| - | </p>
| + | |
| - | <iframe width="725" height="453" src="https://tinkercad.com/embed/69bAjH6R54F" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
| + | |
| - | <p>
| + | |
| - | <b>LactoAid/LaktoApu Älyside palovammoille <span id="link_english" onclick="changevisibility('content_home')"><img src="https://static.igem.org/mediawiki/2014/0/0a/English.png" title="Back to English"></img></span></b>
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | Staphylococcus aureus ja Pseudomonas aeruginosa bakteerien infektiot aiheuttavat usein ongelmia
| + | |
| - | palovammojen hoidossa. Me kehitimme uudenlaisen siteen, joka ehkäisee näitä infektioita ja vähentää
| + | |
| - | antibioottien käyttöä, ja siten vähentää antibioottiresistenssin kehittymisen riskiä. Siteessä on ravinteita
| + | |
| - | sisältävää hydrogeeliä, jossa on geneettisesti paranneltua Lactococcus lactis bakteeria. Tämä paranneltu
| + | |
| - | kanta tunnistaa näiden kahden patogeenin erittämiä viestimolekyylejä haavassa, minkä seurauksena se
| + | |
| - | tuottaa antimikrobista nisiiniä sekä infektiota estäviä molekyylejä, biofilminestäjäproteiini Dispersiini B:tä
| + | |
| - | sekä patogeenien viestintää tukahduttavaa AHLaasia. Geeli sijaitsee kahden kerroksen välissä;
| + | |
| - | päällimmäinen kerros hengittää ja alempi kerros estää bakteerien pääsyn geeliltä iholle. Kun siteessä olevat
| + | |
| - | vesitaskut puhkaisee, geeli kostuu ja käynnistää bakteerien kasvun, jolloin älyside aktivoituu.
| + | |
| - | </p>
| + | |
| - | </span>
| + | |
| - | | + | |
| - | <span id="content_home" class="visibilitytoggle content_home_french">
| + | |
| - | <p>
| + | |
| - | <b>We're still looking for sponsors!</b><br>
| + | |
| - | If you want to sponsor us, please contact our head of acquisition Anna via <i>annalauxen</i><i>@igemgroningen.com</i>.
| + | |
| - | </p>
| + | |
| - | <iframe width="725" height="453" src="https://tinkercad.com/embed/69bAjH6R54F" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
| + | |
| - | <p>
| + | |
| - | <b>LactoAid - Un pansement intelligent pour des brûlures.</b><span id="link_english" onclick="changevisibility('content_home')"><img src="https://static.igem.org/mediawiki/2014/0/0a/English.png" title="Back to English"></img></span>
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | Les infections causées par Staphylococcus aureus et Pseudomonas aeruginosa posent souvent
| + | |
| - | problème dans le traitement des brûlures. Nous avons développé un nouveau type de bandage qui
| + | |
| - | prévient ces infections et permet de réduire l’utilisation d’antibiotiques et donc le développement
| + | |
| - | de résistance à ces antibiotiques. Le pansement consiste en un hydrogel qui contient des
| + | |
| - | Lactococcus lactis génétiquement modifiées ainsi qu’une source de nutriments. L.lactis a été
| + | |
| - | génétiquement modifiée pour détecter les molécules de quorum sensing des deux pathogènes
| + | |
| - | dans la plaie et ensuite sécréter la nisin, un antimicrobien et deux autres molécules préventives
| + | |
| - | d'infection, la Disperine B -une protéine anti-biofilm- et l'AHLase impliquée dans le quorum
| + | |
| - | quenching (dégradation du biofilm).Le gel est placé entre deux couches, une couche supérieure
| + | |
| - | pour permettre la diffusion des gaz et une couche inférieure pour contenir les bactéries à l'intérieur
| + | |
| - | du bandage. L’hydratation du gel - en cassant les poches d'eau adjacentes - initie la croissance des
| + | |
| - | bactéries, ce qui active le bandage.
| + | |
| - | </p>
| + | |
| - | </span>
| + | |
| - | | + | |
| - | <span id="content_home" class="visibilitytoggle content_home_norwegian">
| + | |
| - | <p>
| + | |
| - | <b>We're still looking for sponsors!</b><br>
| + | |
| - | If you want to sponsor us, please contact our head of acquisition Anna via <i>annalauxen</i><i>@igemgroningen.com</i>.
| + | |
| - | </p>
| + | |
| - | <iframe width="725" height="453" src="https://tinkercad.com/embed/69bAjH6R54F" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
| + | |
| - | <p><b>LactoAid – En lur bandage for brannsår</b><span id="link_english" onclick="changevisibility('content_home')"><img src="https://static.igem.org/mediawiki/2014/0/0a/English.png" title="Back to English"></img></span>
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | Innfeksjoner forårsaket av Staphylococcus aureus og Pseudomonas aeruginosa medfører ofte
| + | |
| - | problemer ved behandling av brannskader. Vi har utviklet en ny type bandasje som hindrer
| + | |
| - | disse innfeksjonene og reduserer bruken av antibiotika og dermed også risikoen for å utvikle
| + | |
| - | antibiotikaresistens. Bandasjen er en hydrogel med genetisk modifiserte Lactococcus lactis og
| + | |
| - | næringsstoffer. L. Lactis responderer på quorom sensing molekyler fra de to patogenene med å
| + | |
| - | produsere antimikrobielt nisin sammen med andre infeksjonshemmende molekyler(IPM). Blant
| + | |
| - | disse er anti-biofilm proteinet Dispersin B og quorum quenching proteinet AHLase. Gelen er
| + | |
| - | plassert mellom to lag, et lag på toppen som tillater diffusjon av gasser og et lag på bånn som
| + | |
| - | inneholder bandasjens bakterier.
| + | |
| - | </p>
| + | |
| - | </span>
| + | |
| - | | + | |
| - | <span id="content_home" class="visibilitytoggle content_home_portuguese">
| + | |
| - | <p>
| + | |
| - | <b>We're still looking for sponsors!</b><br>
| + | |
| - | If you want to sponsor us, please contact our head of acquisition Anna via <i>annalauxen</i><i>@igemgroningen.com</i>.
| + | |
| - | </p>
| + | |
| - | <iframe width="725" height="453" src="https://tinkercad.com/embed/69bAjH6R54F" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
| + | |
| - | <p>
| + | |
| - | <b>LactoAid – Um curativo inteligente para queimaduras</b><span id="link_english" onclick="changevisibility('content_home')"><img src="https://static.igem.org/mediawiki/2014/0/0a/English.png" title="Back to English"></img></span></p>
| + | |
| - | <p>
| + | |
| - | Infecções causadas por Staphylococcus aureus e Pseudomonas aerugionosa são problemas
| + | |
| - | recorrentes no tratamento de queimaduras. Nós desenvolvemos um novo tipo de curativo que
| + | |
| - | previne essas infecções e reduz o uso de antibióticos, diminuindo o risco de desenvolvimento de
| + | |
| - | resistência a estes medicamentos. O curativo consiste em um hidrogel que contém Lactococcus
| + | |
| - | lactis geneticamente modificadas com nutrientes. A cepa modificada de L. Lactis detecta as
| + | |
| - | moléculas quorum sensing dos dois patógenos na ferida e subsequentemente produz o antimicrobial
| + | |
| - | nisina, como também outras moléculas preventivas de infecção (IPMs). Estas IPMs são as proteínas
| + | |
| - | anti-biofilme Dispersina B e a proteína de quorum quenching AHLase. O gel é posicionado entre
| + | |
| - | duas camadas, uma camada superior para permitir a difusão de gases e uma camada inferior para
| + | |
| - | conter as bactérias no curativo. A hidratação do gel através da quebra de bolsos de água adjacentes
| + | |
| - | inicia o crescimento da bactéria, ativando assim o curativo.
| + | |
| - | </p>
| + | |
| - | </span>
| + | |
| - | </span>
| + | |
| - | | + | |
| - | <span id="content_project_overview" class="visibilitytoggle content_project_overview">
| + | |
| - | <p>
| + | |
| - | <div Style="text-align:center;"><img src="https://static.igem.org/mediawiki/2014/1/10/Thelactoaid.png" width=400px></img><br>
| + | |
| - | <i>Figure 1: The lactoAid is a bandage containing Lactococcus lactis</i></div>
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>
| + | |
| - | The iGEM Groningen team 2014 is creating a bandage containing <span class="italic">Lactococcus lactis</span> that produces nisin to destroy gram-positive bacteria. The bandage consists of a top layer that permits air to flow through and keeps the bandage clean, a middle layer of hydrogel that holds the <span class="italic">L. lactis</span>, and a bottom layer of higher density hydrogel that allows proteins to pass through but contains the <span class="italic">L. lactis</span> to the middle layer. Additionally we wll introduce the excretion of AHL lactonase and Dispersin B, compounds that disrupt quorum sensing and biofilm formation respectively of <span class="italic">Staphylococcus aureus</span> and <span class="italic">Pseudomonas aeruginosa</span>. To take it even further, the bandage will detect quorum sensing molecules produced by <span class="italic">S. aureus</span> and <span class="italic">P. aeruginosa.</span> Thus the bandage will excrete nisin and Dispersin B when <span class="italic">S. aureus</span> is present and AHL lactonase when <span class="italic">P. aeruginosa</span> is present.
| + | |
| - | </b>
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | Infections in burn wounds are currently only treatable with antibiotics. An increase in antibiotic resistance makes it harder every day to fight these bacteria. In our system <span class="italic">L. lactis</span> produces a so-called lantibiotic, nisin. Nisin is effective against a group of gram-positive bacteria such as <span class="italic">Staphylococcus aureus</span> and resistance against nisin is hardly ever found and if found, the resistance does not last.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | Beside nisin the <span class="italic">L. lactis</span> will be able to produce the infection preventing molecules (IPMs) AiiA and DspB. AiiA will disrupt the communication mechanism of the harmful bacteria, this way the bacteria will not cause any trouble because it 'thinks' it is alone. DspB is a molecule that prevents the harmful bacteria to form a layer (biofilm) on the wound. Additionally we want to try to make the bandage 'active' (producing nisin, DspB and AiiA) only when harmful bacteria are present in the wound. The bandage targets <span class="italic">Staphyolococcus aureus</span> and <span class="italic">Pseudomonas aeruginosa</span> specifically, two bactefria that are a problem in burn wound centres.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/5/54/ThelactoaidII.png" width=400></img><br>
| + | |
| - | <i>Figure 2: Quorum sensing molecules pass from the wound to the lactococcus lactis, in turn IPMs pass from the bandage into the wound.</i>
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | The design of the bandage is important as well. <span class="italic">L. lactis</span> should not be able to get out of the bandage, but the IPMs should be able to reach the wound (See figure 2). Besides containing <span class="italic">L. lactis</span> the bandage should allow sufficient oxygen to reach the wound.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | Finally, the whole package needs to be able to be stored for quite a while and still work. Therefore <span class="italic">L. lactis</span> will be stored as a powder and can be activated with water when the bandage is needed.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | We are also investigating the possibilities of having <span class="italic">L. lactis</span> produce growth factors to aid in wound healing and to link the detection to the production of a chromoprotein to show when the bandage detects harmful bacteria.</p>
| + | |
| - | </font>
| + | |
| - | </span>
| + | |
| - | <span id="content_project_detection" class="visibilitytoggle content_project_detection"><p>Sorry, nothing here yet!</p></span>
| + | |
| - | <span id="content_project_secretion" class="visibilitytoggle content_project_secretion"><p>Sorry, nothing here yet!</p></span>
| + | |
| - | <span id="content_project_The Bandage" class="visibilitytoggle content_project_bandage"><p>Because it is important for GMOs to be contained to where it is used we had to start by thinking how we could keep our bacteria contained inside the bandage, while still making sure it can perform its functions. We had many discussions about all the parts to make sure they meet our needs</p>
| + | |
| - | <p>Since we were already sure we were working with <i>Lactococcus lactis</i> our needs were clear from the start. </p>
| + | |
| - | | + | |
| - | <p>Very soon we thought of a gel like material to put our bacteria in with a top and bottom membrane to keep everything inside. The top membrane needed to allow for the diffusion of gases to maintain oxygen levels in the wound, while the bottom needed to allow all the peptides and proteins to diffuse outside to kill or hamper our target bacteria while immobilising our bacterium. </p>
| + | |
| - | | + | |
| - | <p>Design requirements: </p>
| + | |
| - | <b>Materials: </b>
| + | |
| - | <p>The materials should not be toxic to humans or bacteria. </p>
| + | |
| - | <p>The materials should be permeable to gasses</p>
| + | |
| - | <p>It should be durable and preferably inexpensive</p>
| + | |
| - | <p>Since it is a bandage it should not break too easily and it should be flexible. </p>
| + | |
| - | <b>Appearance </b>
| + | |
| - | <p>We prefer our bandage to be transparent so that you can look through it and judge whether it should be changed or it can stay on for another day. </p>
| + | |
| - | <b> Safety </b>
| + | |
| - | <p> since we use our bandage on a wound we really had to make sure our bacteria stays inside the gel. If the bacteria does not stay in the gel this can make another infection happen. </p>
| + | |
| - | <p>We will give the bottom layer a pore size where Lactococcus lactis stays finside while the other peptides and proteins diffuse inside and outside the gel. </p>
| + | |
| - | </span>
| + | |
| - | | + | |
| - | <span id="content_modeling_model1" class="visibilitytoggle content_modelling_model1"><p>Sorry, nothing here yet!</p></span>
| + | |
| - | <span id="content_modeling_model2" class="visibilitytoggle content_modelling_model2"><p>Sorry, nothing here yet!</p></span>
| + | |
| - | | + | |
| - | <span id="content_policyandpractice_scenario" class="visibilitytoggle content_policyandpractice_scenario">
| + | |
| - | <p><b>Synenergene project</b><br/>
| + | |
| - | Synenergene asked us to make an implementation scenario for our project. Below you can read the desired future 'history' of the LactoAid.</p>
| + | |
| - | <p><b>Application scenario</b><br/>
| + | |
| - | We are now in the year 2028, the world population has increased to over 8 billion people, putting an ever increasing pressure on healthcare to maintain a good health for all. After facing major problems regarding antibiotic resistance in the early ten’s, a different kind of product was developed and marketed that could regulate the use of antibiotics and prevented the development of any resistant strains. Due to a well-defined implementation strategy of this technology in society, and by creating specific safeguards in the product, the rise of resistant strains has been brought to a halt. This story outlines the history of LactoAid, explaining how this product came to be and why it is such a success in modern healthcare.
| + | |
| - | </p>
| + | |
| - | <p>It all started with the development of the concept by a group of students: to have a bandage that only produces antimicrobial compounds when needed, contrary to applying loads of antimicrobial compounds in advance (thus increasing the risk of developing resistant strains). A bandage that gradually releases antibiotics was one of the first ideas. Although this might prolong the use of a single bandage, thereby reducing the risk of infection, it still applied antibiotics in a preventive way. Also, electronic systems could be a carrier for this concept, but these were quickly discarded due to their limited applicability on the relatively small burn wounds, and given the high manufacturing costs involved. After this, it was argued that a perfect host to hold such a system would be a single-celled organism; a bacterium. Bacteria are small, easy to produce, and can be engineered to fulfil specific functions. However, the field of synthetic biology was just starting to emerge. Not much was known about the implications of messing around with the DNA of living organisms, resulting in societal hesitance to accept this new technology. To reduce the scope of the project, it was decided to take burn wounds as a case-study for such a concept. At a later stage in the product development, the bandage was also developed to fit other types of wounds.</p>
| + | |
| - | <p>The initial arguments against the implementation of GMO bacteria in a healthcare environment were mainly related to ethical and societal issues. Questions like; do the bacteria go into the wound? What is the risk of the bacteria getting out of the bandage into the environment? Is there a safeguard in case the bacteria leak out of the bandage? What are the chances of the bacteria mutating into a harmful pathogen? And many more. After these issues were addressed in the design of the bandage, as well as in the genetic design of the organism itself, the further development of the product was initiated. First of all, investors and strategic partners needed to be found to allow the full-scale deployment of this bandage. These were particularly important with regard to the scale of this project and to acquire funding (see timeline). These partners and investors were found by contacting research institutes and global health organizations (WHO, Red Cross).</p>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/1/1a/Groningen2014_Synenergene_scheme1.png"></img>
| + | |
| - | <p>The full programme – from the concept generation to the product launch – was organized as a joint venture. Many parties from different industries were involved, and these were led by the group of students that started the project. It must be noted the large pharmaceutical companies (Bayer, GlaxoSmithKline, Astrazeneca) were hesitant in the initial stage of product development, but contributed at a later stage when the demand for novel antibiotic moderators became crystal clear. A list of all parties involved in the final stage of the product development:</p>
| + | |
| - | <ul>
| + | |
| - | <li>Healthcare related organizations</li>
| + | |
| - | <ul>
| + | |
| - | <li>Hospitals</li>
| + | |
| - | <li>Burn wound centers</li>
| + | |
| - | <li>WHO</li>
| + | |
| - | <li>International Red Cross and Red Half Moon movement</li>
| + | |
| - | <li>Health insurance companies</li>
| + | |
| - | <li>Big pharma (at a later stage)</li>
| + | |
| - | </ul>
| + | |
| - | <li>Consumer organizations</li>
| + | |
| - | <ul>
| + | |
| - | <li>First aid kits including infection detection systems</li>
| + | |
| - | <li>Bandages to be sold in pharmacies</li>
| + | |
| - | </ul>
| + | |
| - | </ul>
| + | |
| - | <p>The final product development, as described in the timeline, started in 2015 by generating different designs and testing their techno-economic feasibility. By 2018 the primary research and development was finalized, and the functionality of the best 5 designs could be tested in the lab (e.g. animal experiments) in the preclinical stage. The clinical trials were held between 2020-2026, after which all documentation was submitted to the EMA and FDA for approval regarding safety, risk and quality of the bandage. In 2027, both the FDA and EMA granted their approval for the LactoAid. </p>
| + | |
| - | <p>It was a difficult road to market, especially regarding regulatory and safety issues, but finally the worldwide demand of this type of bandage was sufficient to drive the final development and make it through trials. Nowadays, the bandage is used in hospitals all over the world to treat open wounds. A consortium of companies and research institutes has been tasked to oversee the production and regulate the use of this bandage. This consortium is led by the WHO. There is no problem anymore with multi-resistant strains, and wounds can easily be kept clean throughout a patient’s stay. There is even talk of a LactoAid 2.0 (now in trials) that is genetically tweaked to produce growth factors. These are substances that stimulate cell growth. The result will be a super bandage that has the ability to heal certain wounds even faster.</p>
| + | |
| - | <p>The application of LactoAid is best explained through an exemplary patient that enters a regular hospital:</p>
| + | |
| - | <ol>
| + | |
| - | <li>A patient enters the hospital, is heavily burned all over his/her body with 2nd and 3rd degree burn wounds.</li>
| + | |
| - | <li>The wounds are cleaned and then left to rest for three days to assess the severity of the wounds.</li>
| + | |
| - | <li>During these three days, the wound is protected by LactoAid.</li>
| + | |
| - | <li>After three days the wounds are found to be severe, and a skin transplant is needed.</li>
| + | |
| - | <li>The wound is rinsed again, and the skin transplant takes place. This needs to be done in multiple sessions due to the heavy impact the operation has on the body. This leads to a lot of time in which the wounds need to be kept clean. Therefore, LactoAid is again applied to the wound in the time between the operations.</li>
| + | |
| - | <li>As a result; A) patients suffer less because there is no free air flow over the wounds, B) the wound is protected by the bandage from environmental pathogens, C) pathogens already in the wound are killed by the bandage, reducing the number of times the bandage needs to be replaced, D) wounds are healed quicker, cutting costs.</li>
| + | |
| - | <li>After every use (3-4 days), the bandage is deactivated and all modified bacteria are killed. Two systems are used to ensure no modified bacteria survive: A) after 3-4 days all nutrients are gone, B) a kill switch is activated by releasing an inducing compound within the bandage.</li>
| + | |
| - | <br>
| + | |
| - | Flick through the timeline to see the development of the LactoAid, from concept to product launch.
| + | |
| - | <br>
| + | |
| - | </ol>
| + | |
| - | <iframe src='http://cdn.knightlab.com/libs/timeline/latest/embed/index.html?source=0AhltIeCJdvPudDFfZmtjS3ZRdUZZS25DMVBKNzJ1Rmc&font=Bevan-PotanoSans&maptype=toner&lang=en&height=650' width='100%' Height='800px' frameborder='0'></iframe>
| + | |
| - | </span>
| + | |
| - | | + | |
| - | <span id="content_policyandpractice_rivm" class="visibilitytoggle content_policyandpractice_rivm"><p>Sorry, nothing here yet!</p></span>
| + | |
| - | <span id="content_policyandpractice_ted" class="visibilitytoggle content_policyandpractice_ted"><p>Sorry, nothing here yet, but check out our discovery festival piece!</p></span>
| + | |
| - | <span id="content_policyandpractice_fallingwalls" class="visibilitytoggle content_policyandpractice_fallingwalls"><p>Sorry, nothing here yet, but check out our discovery festival piece!</p></span>
| + | |
| - | <span id="content_policyandpractice_cardgame" class="visibilitytoggle content_policyandpractice_cardgame"><p>Sorry, nothing here yet, but check out our discovery festival piece!</p></span>
| + | |
| - | <span id="content_policyandpractice_discoveryfestival" class="visibilitytoggle content_policyandpractice_discoveryfestival"> <p>September the 26th the iGEM team 2014 will present at <a href="https://www.facebook.com/events/295227773991153/?ref_dashboard_filter=upcoming">Discovery festival Amsterdam 2014</a>.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <a href="http://www.discoveryfestival.nl">Discovery festival</a> is, as the name says, a festival celebrating science and music. It was started in Amsterdam in 2006 because the founders of Discovery festival observed a lack of events combining these two cornerstones of civilisation.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <a href="http://www.beyondbiennale.nl/discovery%20festival/tickets/tickets/">Join us</a> at Discovery festival and stay tuned to this spot to see pictures and reports of how it will have been.
| + | |
| - | </p>
| + | |
| - | </span>
| + | |
| - | <span id="content_education_syntheticbiology" class="visibilitytoggle content_education_syntheticbiology">
| + | |
| - | <p><b>What is Synthetic biology?</b></p>
| + | |
| - | <p>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/c/ce/Synbio.png" width=300></img><br>
| + | |
| - | <i>Figure 1: A plasmid (A) with a antibiotics resistance gene (in green) can be cut by restriction enzymes (dark red) (B). A new piece of DNA (bright red) can be insterted into the gap (C). The insertion is 'glued' into place by ligases (D). We then have our product to insert into bacteria (E).</i></p>
| + | |
| - | <p>
| + | |
| - | Synthetic biology is the science of constructing biological systems and devices through application of biological knowledge and synthetic chemistry. In the case of the iGEM competition, the basic idea is to make relatively simple genetic constructs and apply those constructs to a task through bacteria. We go through a simplified example here. The reality has a lot more steps but the broad strokes remain the same.</p>
| + | |
| - | <p>
| + | |
| - | Bacteria have their own tools with which they can read genetic code, and translate that code into proteins; the molecules that perform nearly all functions within a living cell. We can use these tools when we insert custom-made DNA sequences into the bacteria in the form of plasmids. Plasmids are 'rings' of DNA, which bacteria can pick up and use. In nature, bacteria share plasmids to gain new functions.</p>
| + | |
| - | <p>
| + | |
| - | Before we have our plasmid with the desired DNA sequence, we will have to design it. Usually, one starts with a 'backbone' plasmid, and the desired piece of DNA. Such plasmids are often isolated from bacteria found in nature and contain a DNA sequence with an ability that makes the bacteria able to survive conditions that other bacteria cannot. The most common are antibiotic resistance genes.</p>
| + | |
| - | <p>
| + | |
| - | If we have a backbone, we can insert a sequence of DNA into the plasmid by cutting it with restriction enzymes, and pasting in the DNA sequence with DNA ligases. Restriction enzymes are molecules that can recognize very specific parts of DNA, called restriction sites, and cut them (see figure 1: A, B). DNA ligases are molecules that can 'glue' together two large molecules, such as two ends of DNA.</p>
| + | |
| - | <p>
| + | |
| - | Restriction enzymes can be used to cut a desired piece of DNA from another bacteria, to transplant into our backbone. Then the backbone is cut, the desired seqeunce is inserted and our plasmid is ready to be inserted into a bacteria (see figure 1: C, D, E).</p>
| + | |
| - | <p>
| + | |
| - | When we insert our plasmid, the bacteria will read the DNA, and produce the product. We can abuse the bacteria's own system to make bacteria produce molecules like DspB, a molecule which is already used in nature by bacteria that make biofilms, a kind of 'reef' of bacteria. They use this molecule to cut themselves loose. When we flood the area with DspB, the bacteria will not be able to make the biofilm, because they will be cut loose as soon as they try to attach themselves.</p>
| + | |
| - | </span>
| + | |
| - | | + | |
| - | <span id="content_education_lactococcuslactis" class="visibilitytoggle content_education_lactococcuslactis">
| + | |
| - | <p><b>What is <i>L. lactis</i> (and other bacteria)?</b><br>
| + | |
| - | <br>
| + | |
| - | <i>Lactococcus lactis</i> is a gram-positive bacteria. Gram negative bacteria have a cell wall sandwiched in between two cell membranes. Gram positive bacteria have a thick cell wall around their membrane (Figure).
| + | |
| - | <i>Lactococcus lactis</i> is usually shortened to <i>L. lactis</i>. This a bacterium is found in many food products such as cheese and beer and does not make us sick. Contrary to popular belief, most bacteria do not make us sick. In fact, many bacteria benefit us and some are necessary for us to live. Your gut is filled with bacteria that break down your food into molecules that your intestines can take up. Without these bacteria, you would not be able to eat anything! In return, our bodies are a safe home for these bacteria. Such an arrangement is called symbiosis, literally translated this means 'living together'.</p>
| + | |
| - | <p>
| + | |
| - | We do not 'live together' with <i>L. lactis</i> in nature, but we can make <i>L. lactis</i> work for us in the bandage.
| + | |
| - | Like <i>L. lactis</i>, <i>Staphylococcus aureus</i> (<i>S. aureus</i> for short) is gram positive. <i>S. aureus</i> produces toxins that are damaging to humans.</p>
| + | |
| - | <p>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/3/3d/Whatislactis1.png" width=300></img><br>
| + | |
| - | <i>Figure 2: Bacteria are made of DNA and proteins encapsulated in a membrane. They use the proteins to multiply the DNA and make new bacteria. Gram negative bacteria have a thin cell wall and a second membrane. Gram positive bacteria have a very thick cell wall.</i></p>
| + | |
| - | </span>
| + | |
| - | <span id="content_education_burnwounds" class="visibilitytoggle content_education_burnwounds">
| + | |
| - | <b><font face="verdana">What are burn wounds?</font></b><br>
| + | |
| - | <br>
| + | |
| - | <p>
| + | |
| - | | + | |
| - | Burn wounds happen when the skin becomes too hot or too cold. This means that if you touch
| + | |
| - | something in a freezer that is -80°C, you can burn your hand just as if you would touch boiling water. Because temperatures so low that you would burn yourself are very rare in nature, they were not recognized as burns until relatively recently and we associate burns with high temperatures.<br>
| + | |
| - | There are several degrees that you can get burnt.</p>
| + | |
| - | <p><b>First degree burns</b> barely damage your skin, but functions of your skin start getting affected and the skin can dry out. In response the skin gets swollen and can start to itch or even become painful.</p>
| + | |
| - | <p><b>Superficial second degree burns</b> damage the top layer of the skin, the epidermis (See figure 1). In this part of the skin, there are no blood vessels or nerves. Blood still flows through the skin, and you still feel pain in the burnt skin. Superficial second-degree burns do not damage the basal lamina. The skin regenerates from the basal lamina upward.</p>
| + | |
| - | <p><b>Deep second degree burns</b> go down to the middle layer of the skin, the dermis (See figure 1). The dermis contains nerves and blood vessels. Deep second degree burns partially damage the basal lamina. Thus nerves, blood vessels and the regenerating part of the skin are damaged. The sense of touch is lost in the burn, the skin loses fluid through blood loss and regeneration is slowed.</p>
| + | |
| - | <p><b>Third degree burns</b> go all the way to the subcutan tissue (See figure 1). The basal lamina is lost, and regeneration is not possible except for the edges of the wound where there still is some basal lamina.</p>
| + | |
| - | <p><b>Fourth degree burns</b> go furter down into muscles and organs.</p>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/2/27/Skin.png" width=500px></img>
| + | |
| - | <p><i>Figure 3: The skin has four layers. The subcutan tissue lies between the skin and muscles in your body. The basal lamina forms the basis of the skin. The dermis contains many live cells and many nerve endings, hair follicles and glands suchas sweat glands. The epidermis is made of mostly dead cells and forms a protective layer all around your body.</i></p>
| + | |
| - | </p>
| + | |
| - | </span>
| + | |
| - | <span id="content_education_antibioticresistance" class="visibilitytoggle content_education_antibioticresistance"><p>Sorry, nothing here yet, but check out our burn wound education!</p></span>
| + | |
| - | <span id="content_team_teammembers" class="visibilitytoggle content_team_teammembers">
| + | |
| - | </* @ Andries: Ik heb nog niet helemaal door hoe ik die sprite moet maken met mouse-over tekst dus tot ik dat door heb staat hier alleen het .png plaatje.>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/c/c9/Teamspritein400x325squares.png" width=500px></img>
| + | |
| - | </span>
| + | |
| - | <span id="content_team_instructors_and_supervisors" class="visibilitytoggle content_team_instructors_and_supervisors">
| + | |
| - | <p>Sorry, nothing here yet!</p>
| + | |
| - | </span>
| + | |
| - | <span id="content_artanddesign_art" class="visibilitytoggle content_artanddesign_art"><p>
| + | |
| - | Some SW-inspired art:<br>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/c/c8/Darthaureus.png" width=500px></img><br>
| + | |
| - | <br>Some art of a possible mascot:<br>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/4/47/Nursepunch.png" width=500px></img><br>
| + | |
| - | <br> An early sketch for a logo:<br>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/0/0b/Quick_sketch.jpg" width=500px></img><br>
| + | |
| - | <br> The first logo/name combo idea:<br>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/e/e4/Logo_v4_transparent.png" width=500px></img><br>
| + | |
| - | <br> The first appearance of our distinctive phoenix:<br>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/c/c1/Phoenix.png" width=500px></img><br>
| + | |
| - | </p></span>
| + | |
| - | <span id="content_parts_partslist" class="visibilitytoggle content_parts_partslist"><p>Sorry, nothing here yet!</p></span>
| + | |
| - | <span id="content_notebook_detection" class="visibilitytoggle content_notebook_detection"><p>Sorry, nothing here yet, but look at the bandage and biobrick notebooks!</p></span>
| + | |
| - | <span id="content_notebook_secretion" class="visibilitytoggle content_notebook_secretion"><p><b>Week 1 (21-25 july)</b><br>
| + | |
| - | In silico preparation of primers for the Gibson assembly between signal sequence USP45 and modified version of <i>Aiia</i>.
| + | |
| - | In silico production of synthetic gene <i>ssUSP45DspB</i>.
| + | |
| - | General preparation of lab necessities.<br>
| + | |
| - | <br>
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>week 2 (28 july-3 august)</b><br>
| + | |
| - | designing primers for the synthetic gene.<br>
| + | |
| - | <br>
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>Week 3 (6 – 8 august):</b><br>
| + | |
| - | | + | |
| - | <b>goal:</b> obtain all the biobricks necessary for the secreting systems of P. aeruginosa and S. aureus. <br>
| + | |
| - | <br>
| + | |
| - | <i>E. coli</i> was chemically transformed with 3 biobricks in order to obtain them: <br>
| + | |
| - | <br>
| + | |
| - | BBa_I746104: <i>P2</i>.<br>
| + | |
| - | BBa_K081009: <i>LasI</i> (for the Detection part)<br>
| + | |
| - | BBa_C0060: <i>Aiia</i><br>
| + | |
| - | After which 1, 10, 20, 50% was inoculated on Chloramphenicol LB-agar plates. <br>
| + | |
| - | <br>
| + | |
| - | The RBS, Double Terminators, and the promotor LAS biobricks were already transformed and isolated.<br>
| + | |
| - | <br>
| + | |
| - | The clones were inoculated in liquid media were they would be prepared for miniprep. <br>
| + | |
| - | <br>
| + | |
| - | The O/N culture was miniprepped and checked on gel, giving a positive result.<br>
| + | |
| - | <br>
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>week 4 ( 11 – 17 august): </b><br>
| + | |
| - | <b>goal:</b> assemble the promotors with <i>RBS</i> and <i>gfp</i> (BBa_E0040) with double terminator.<br>
| + | |
| - | <br>
| + | |
| - | Biobricks <i>pLAS</i>, <i>P2</i>, <i>gfp</i>, RBS and Double terminator were assembled accordingly to their place in the construct with 3A assembly, ligated, chemically transformed and inoculated on kanamycine agar plates.<br>
| + | |
| - | <br>
| + | |
| - | The O/N grown colorless clones were picked and grown on their own individual plate. Afterwards, colony PCR on all the colonies showed a positive result for assembled: <i>P2+RBS</i>, <i>pLAS+RBS</i>, <i>GFP+Dterm</i>.<br>
| + | |
| - | <br>
| + | |
| - | After the colony PCR, another one was done with phusion DNA polymerase, so that the product could be used for a second assembly with <i>(P2+RBS)+(GFP+Dterm)</i> and <i>(pLAS+RBS)+(GFP+Dterm)</i>
| + | |
| - | corresponding in only a few clones which gave negative results after colony PCR.<br>
| + | |
| - | Therefore, another assembly with the constructs should be done.
| + | |
| - | <br>
| + | |
| - | <br>
| + | |
| - | Primers came in and were prepared accordingly.<br>
| + | |
| - | <br>
| + | |
| - | The synthetic gene <i>ssUSP45DspB</i>, which arrived from IDT, was prepared according to the protocol made by IDT.
| + | |
| - | 1µ of pSB1C3 was cut with <i>EcoRI</i> & <i>PstI</i>. The digestion mix ran on a agarose gel, afterwhich gel purification of the linearized backbone occurred.
| + | |
| - | 70ng of vector was used to ligate <i>ssUSP45DspB</i>. <br>
| + | |
| - | <br>
| + | |
| - | The yield of transformants was very low after transforming the ligation mixture and growing the bacteria.
| + | |
| - | Only one colony contained the ssUSP45DspB according to gel.<br>
| + | |
| - | </p>
| + | |
| - | >
| + | |
| - | </span>
| + | |
| - | <span id="content_notebook_bandage" class="visibilitytoggle content_notebook_bandage">
| + | |
| - | <p><b>Week 1 (2-4 July)</b><br>
| + | |
| - | Two strains of <i>L. lactis</i> (NZ9800 & NZ9700) were freeze dried and kept in -80 to see if they could be revived the next week.
| + | |
| - | <p>
| + | |
| - | </p>
| + | |
| - | <b>Week 2 (7-11 July)</b><br>
| + | |
| - | Growth of the two <i>L. lactis</i> strains was tested by resuspending them in medium and letting them grow overnight. They grew very fast. The experiment was repeated with a lower starting concentration, and they still grew very fast.
| + | |
| - | <p>
| + | |
| - | </p>
| + | |
| - | <b>Week 3 (14-18 July)</b><br>
| + | |
| - | (Nothing)
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>Week 4 (21-25 July)</b><br>
| + | |
| - | A culture of <i>L. lactis</i> was made to put in polyacrylamide gels.<br>
| + | |
| - | Polyacrylamide gels were made at 15, 20, 25 and 30% polyacrylamide with <i>L. lactis</i> in it to see if the bacteria grow in the gel. They grew best in 20% polyacrylamide, thus a new gel with bacteria in it was made. A quarter was freeze dried immediately, another quarter was incubated for 45 minutes at 37 degrees, ther other two quarters were incubated overnight.<br>
| + | |
| - | Cells were found in all quarters.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/b/b6/Beforefreezedry.jpg" width=500px></img><br>
| + | |
| - | <i>Image 1: One quarter of PAA gel before freezedrying</i>
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <img src="https://static.igem.org/mediawiki/2014/a/a9/Afterfreezedry.jpg" width=500px></img>
| + | |
| - | <i>Image 2: One quarter of PAA gel after freeze drying</i>
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>Week 5 (28 July-1 August)</b><br>
| + | |
| - | A stock solution was made of pNZ8048G, a strain containing GFP. It was tested by activating the GFP with ZnSO4.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>Week 6 (4-8 August)</b><br>
| + | |
| - | To increase survival of <i>L. lactis</i>, a new gel was made on ice. The gel did not solidify. Another gel was made with the GFP strain inside, but the GFP did not show when activated with ZnSO4.</p>
| + | |
| - | </span>
| + | |
| - | <span id="content_notebook_biobricks" class="visibilitytoggle content_notebook_biobricks">
| + | |
| - | <p><b>Week 1 (2-4 July)</b><br>
| + | |
| - | An overview of necessities was made.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>Week 2 (7-11 July)</b><br>
| + | |
| - | Primers were designed for the Nisin operon and superfolded GFP.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>Week 3 (14-18 July)</b><br>
| + | |
| - | The plasmid pSB1C3 containing the CP promotor was isolated.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>Week 4 (21-25 July)</b><br>
| + | |
| - | Gibson assembly primers were designed for the removal of illegal sites from biobricked genes.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>Week 5 (28 July-1 August)</b><br>
| + | |
| - | The insertsize of the pSB1C3 plasmid was verified.<br>
| + | |
| - | The genes PNisA, NisA and sfGFP(Bs) were successfully amplified according to their product size.<br>
| + | |
| - | PNisI, NisA and sfGFP(Bs) were purified. PNisI, NisA, sfGFP(Bs) and pSB1C3 were then restricted to create overhangs.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>Week 6 (4-8 August)</b><br>
| + | |
| - | A PCR was performed with a longer elongation time and turned into a ‘touch up’ PCR, in which the first 20 steps let the annealing temperature rise from 40 to 60 °C and the PCR ends with 20 cycles with an annealing temperature of 65 °C. Also two further series of PCRs was performed, one with GC buffer and one with GC buffer and 1.5% DMSO. Now all the genes got amplified.
| + | |
| - | </p>
| + | |
| - | <p>
| + | |
| - | <b>Week 7 (11-15 August)</b><br>
| + | |
| - | The PCR of NisRK was repeated twice, the first failed because of an overload of template DNA. The diluted version did work.
| + | |
| - | </p></span>
| + | |
| - | <span id="content_notebook_protocols" class="visibilitytoggle content_notebook_protocols"><p>Sorry, nothing here yet, but look at the bandage and biobrick notebooks!</p></span>
| + | |
| - |
| + | |
| - | <span id="content_safety_safety" class="visibilitytoggle content_safety_safety"><p>Sorry, nothing here yet!</p></span>
| + | |
| - | <span id="content_awards_awards" class="visibilitytoggle content_awards_awards"><p>Sorry, nothing here yet!</p></span>
| + | |
| - | <span id="content_awards_checklist" class="visibilitytoggle content_awards_checklist"><p>Sorry, nothing here yet!</p></span>
| + | |
| - | <span id="content_attribution_attribution" class="visibilitytoggle content_attribution_attribution"><p>Sorry, nothing here yet!</p></span>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="noscroll">
| + | |
| - | <div id="languagemenubox"></div>
| + | |
| - | <div id="titlebox">
| + | |
| - | <div id="title_home" class="visibilitytoggle content_home">
| + | |
| - | <h1>Home</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_project')[0].click();jQuery('#menu_project_overview')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_project')[0].click();jQuery('#menu_project_overview')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="title_project_overview" class="visibilitytoggle content_project_overview">
| + | |
| - | <h1>Project/Overview</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_project_detection')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_modelling')[0].click();jQuery('#menu_modelling_model1')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_project_detection" class="visibilitytoggle content_project_detection">
| + | |
| - | <h1>Project/Detection</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_project_secretion')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_modelling')[0].click();jQuery('#menu_modelling_model1')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_project_secretion" class="visibilitytoggle content_project_secretion">
| + | |
| - | <h1>Project/Secretion</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_project_bandage')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_modelling')[0].click();jQuery('#menu_modelling_model1')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_project_bandage" class="visibilitytoggle content_project_bandage">
| + | |
| - | <h1>Project/The Bandage</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_modelling')[0].click();jQuery('#menu_modelling_model1')[0].click();""></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_modelling')[0].click();jQuery('#menu_modelling_model1')[0].click();""></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="title_modelling_model1" class="visibilitytoggle content_modelling_model1">
| + | |
| - | <h1>Modelling/Model 1</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_modelling_model2')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_policyandpractice')[0].click();jQuery('#menu_policyandpractice_scenario')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_modelling_model2" class="visibilitytoggle content_modelling_model2">
| + | |
| - | <h1>Modelling/Model 2</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_policyandpractice')[0].click();jQuery('#menu_policyandpractice_scenario')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_policyandpractice')[0].click();jQuery('#menu_policyandpractice_scenario')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="title_policyandpractice_scenario" class="visibilitytoggle content_policyandpractice_scenario">
| + | |
| - | <h1>Policy and practice/Scenario</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_policyandpractice_rivm')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_education')[0].click();jQuery('#menu_education_syntheticbiology')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_policyandpractice_rivm" class="visibilitytoggle content_policyandpractice_rivm">
| + | |
| - | <h1>Policy and practice/RIVM</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_policyandpractice_ted')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_education')[0].click();jQuery('#menu_education_syntheticbiology')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="title_policyandpractice_ted" class="visibilitytoggle content_policyandpractice_ted">
| + | |
| - | <h1>Policy and practice/TED</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_policyandpractice_fallingwalls')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_education')[0].click();jQuery('#menu_education_syntheticbiology')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_policyandpractice_fallingwalls" class="visibilitytoggle content_policyandpractice_fallingwalls">
| + | |
| - | <h1>Policy and practice/Falling walls</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_policyandpractice_cardgame')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_education')[0].click();jQuery('#menu_education_syntheticbiology')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_policyandpractice_cardgame" class="visibilitytoggle content_policyandpractice_cardgame">
| + | |
| - | <h1>Policy and practice/Card game</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_policyandpractice_discoveryfestival')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_education')[0].click();jQuery('#menu_education_syntheticbiology')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_policyandpractice_discoveryfestival" class="visibilitytoggle content_policyandpractice_discoveryfestival">
| + | |
| - | <h1>Policy and practice/Discovery festival</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_education')[0].click();jQuery('#menu_education_syntheticbiology')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_education')[0].click();jQuery('#menu_education_syntheticbiology')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="title_education_syntheticbiology" class="visibilitytoggle content_education_syntheticbiology">
| + | |
| - | <h1>Education/Synthetic biology</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_education_lactococcuslactis')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_team')[0].click();jQuery('#menu_team_teammembers')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_education_burnwounds" class="visibilitytoggle content_education_lactococcuslactis">
| + | |
| - | <h1>Education/<i>Lactococcus lactis</i></h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_education_burnwounds')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_team')[0].click();jQuery('#menu_team_teammembers')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_education_burnwounds" class="visibilitytoggle content_education_burnwounds">
| + | |
| - | <h1>Education/Burn wounds</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page"
| + | |
| - | onclick="jQuery('#menu_education_antibioticresistance')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_team')[0].click();jQuery('#menu_team_teammembers')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_education_antibioticresistance" class="visibilitytoggle content_education_antibioticresistance">
| + | |
| - | <h1>Education/Antibiotic resistance</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_team')[0].click();jQuery('#menu_team_teammembers')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_team')[0].click();jQuery('#menu_team_teammembers')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="title_team_teammembers" class="visibilitytoggle content_team_teammembers">
| + | |
| - | <h1>Team/Team members</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_team_instructors_and_supervisors')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_artanddesign')[0].click();jQuery('#menu_artanddesign_art')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_team_instructors_and_supervisors" class="visibilitytoggle content_team_instructors_and_supervisors">
| + | |
| - | <h1>Team/Instructors_and_supervisors</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_artanddesign')[0].click();jQuery('#menu_artanddesign_art')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_artanddesign')[0].click();jQuery('#menu_artanddesign_art')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="title_artanddesign_art" class="visibilitytoggle content_artanddesign_art">
| + | |
| - | <h1>Art and design</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_parts')[0].click();jQuery('#menu_parts_partslist')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_parts')[0].click();jQuery('#menu_parts_partslist')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="title_parts_partslist" class="visibilitytoggle content_parts_partslist">
| + | |
| - | <h1>Parts/Partslist</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_notebook')[0].click();jQuery('#menu_notebook_detection')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_notebook')[0].click();jQuery('#menu_notebook_detection')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="title_notebook_detection" class="visibilitytoggle content_notebook_detection">
| + | |
| - | <h1>Notebook/Detection</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_notebook_secretion')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_safety')[0].click();jQuery('#menu_safety_safety')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_notebook_secretion" class="visibilitytoggle content_notebook_secretion">
| + | |
| - | <h1>Notebook/Secretion</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_notebook_bandage')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_safety')[0].click();jQuery('#menu_safety_safety')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_notebook_bandage" class="visibilitytoggle content_notebook_bandage">
| + | |
| - | <h1>Notebook/Bandage</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_notebook_biobricks')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_safety')[0].click();jQuery('#menu_safety_safety')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_notebook_biobricks" class="visibilitytoggle content_notebook_biobricks">
| + | |
| - | <h1>Notebook/biobricks</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_notebook_protocols')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_safety')[0].click();jQuery('#menu_safety_safety')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_notebook_protocols" class="visibilitytoggle content_notebook_protocols">
| + | |
| - | <h1>Notebook/Protocols</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_safety')[0].click();jQuery('#menu_safety_safety')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_safety')[0].click();jQuery('#menu_safety_safety')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="title_safety_safety" class="visibilitytoggle content_safety_safety">
| + | |
| - | <h1>Safety</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_awards')[0].click();jQuery('#menu_awards_awards')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_awards')[0].click();jQuery('#menu_awards_awards')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="title_awards_awards" class="visibilitytoggle content_awards_awards">
| + | |
| - | <h1>Awards/Awards</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_awards_checklist')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_attribution')[0].click();jQuery('#menu_attribution_attribution')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | <div id="title_awards" class="visibilitytoggle content_awards_checklist">
| + | |
| - | <h1>Awards/Checklist</h1>
| + | |
| - | <img class="nextpagebutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="next page" onclick="jQuery('#menu_attribution_attribution')[0].click();"></img>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="fast forward" onclick="jQuery('#menu_attribution')[0].click();jQuery('#menu_attribution_attribution')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | | + | |
| - | <div id="title_attribution_attribution" class="visibilitytoggle content_attribution_attribution">
| + | |
| - | <h1>Attribution</h1>
| + | |
| - | <img class="nextchapterbutton" src="https://static.igem.org/mediawiki/2014/1/17/Emptyimage.png" title="Home" onclick="jQuery('#menu_home')[0].click();"></img>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | </div>
| + | |
| - | | + | |
| - | <div id="navigationmenubox">
| + | |
| - | <font face="verdana">
| + | |
| - | <div id="navigationmenu">
| + | |
| - | <div class="menu-item">
| + | |
| - | <span id="menu_home" onclick="changevisibility('content_home')">Home</span>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="menu-item">
| + | |
| - | <span id="menu_project">Project</span>
| + | |
| - | <div class="sub-menu">
| + | |
| - | <div id="menu_project_overview" class="sub-menu-item" onclick="changevisibility('content_project_overview')">
| + | |
| - | Overview
| + | |
| - | </div>
| + | |
| - | <div id="menu_project_detection" class="sub-menu-item" onclick="changevisibility('content_project_detection')">
| + | |
| - | Detection
| + | |
| - | </div>
| + | |
| - | <div id="menu_project_secretion" class="sub-menu-item" onclick="changevisibility('content_project_secretion')">
| + | |
| - | Secretion
| + | |
| - | </div>
| + | |
| - | <div id="menu_project_bandage" class="sub-menu-item" onclick="changevisibility('content_project_bandage')">
| + | |
| - | Bandage
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="menu-item">
| + | |
| - | <span id="menu_modelling">Modelling</span>
| + | |
| - | <div class="sub-menu">
| + | |
| - | <div id="menu_modelling_model1" class="sub-menu-item" onclick="changevisibility('content_modelling_model1')">
| + | |
| - | Model 1
| + | |
| - | </div>
| + | |
| - | <div id="menu_modelling_model2" class="sub-menu-item" onclick="changevisibility('content_modelling_model2')">
| + | |
| - | Model 2
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="menu-item">
| + | |
| - | <span id="menu_policyandpractice">Policy and practice</span>
| + | |
| - | <div class="sub-menu">
| + | |
| - | <div id="menu_policyandpractice_scenario" class="sub-menu-item" onclick="changevisibility('content_policyandpractice_scenario')">
| + | |
| - | Scenario
| + | |
| - | </div>
| + | |
| - | <div id="menu_policyandpractice_rivm" class="sub-menu-item" onclick="changevisibility('content_policyandpractice_rivm')">
| + | |
| - | RIVM
| + | |
| - | </div>
| + | |
| - | <div id="menu_policyandpractice_ted" class="sub-menu-item" onclick="changevisibility('content_policyandpractice_ted')">
| + | |
| - | TED
| + | |
| - | </div>
| + | |
| - | <div id="menu_policyandpractice_fallingwalls" class="sub-menu-item" onclick="changevisibility('content_policyandpractice_fallingwalls')">
| + | |
| - | Falling walls
| + | |
| - | </div>
| + | |
| - | <div id="menu_policyandpractice_cardgame" class="sub-menu-item" onclick="changevisibility('content_policyandpractice_cardgame')">
| + | |
| - | Card game
| + | |
| - | </div>
| + | |
| - | <div id="menu_policyandpractice_discoveryfestival" class="sub-menu-item" onclick="changevisibility('content_policyandpractice_discoveryfestival')">
| + | |
| - | Discovery Festival
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="menu-item">
| + | |
| - | <span id="menu_education"> Education</span>
| + | |
| - | <div class="sub-menu">
| + | |
| - | <div id="menu_education_syntheticbiology" class="sub-menu-item" onclick="changevisibility('content_education_syntheticbiology')">
| + | |
| - | Synthetic biology
| + | |
| - | </div>
| + | |
| - | <div id="menu_education_lactococcuslactis" class="sub-menu-item" onclick="changevisibility('content_education_lactococcuslactis')">
| + | |
| - | Lactococcus lactis
| + | |
| - | </div>
| + | |
| - | <div id="menu_education_burnwounds" class="sub-menu-item" onclick="changevisibility('content_education_burnwounds')">
| + | |
| - | Burn wounds
| + | |
| - | </div>
| + | |
| - | <div id="menu_education_antibioticresistance" class="sub-menu-item" onclick="changevisibility('content_education_antibioticresistance')">
| + | |
| - | Antibiotic resistance
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="menu-item">
| + | |
| - | <span id="menu_team">Team</span>
| + | |
| - | <div class="sub-menu">
| + | |
| - | <div id="menu_team_teammembers" class="sub-menu-item" onclick="changevisibility('content_team_teammembers')">
| + | |
| - | Team members
| + | |
| - | </div>
| + | |
| - | <div id="menu_team_instructors_and_supervisors" class="sub-menu-item" onclick="changevisibility('content_team_instructors_and_supervisors')">
| + | |
| - | Instructors & supervisors
| + | |
| - | </div>
| + | |
| - | <div class="sub-menu-item">
| + | |
| - | <a href="https://igem.org/Team.cgi?year=2014&team_name=Groningen">iGEM team profile</a>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="menu-item">
| + | |
| - | <span id="menu_artanddesign">Art and design</span>
| + | |
| - | <div class="sub-menu">
| + | |
| - | <div id="menu_artanddesign_art" class="sub-menu-item" onclick="changevisibility('content_artanddesign_art')">
| + | |
| - | Art
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="menu-item">
| + | |
| - | <span id="menu_parts">Parts</span>
| + | |
| - | <div class="sub-menu">
| + | |
| - | <div id="menu_parts_partslist" class="sub-menu-item" onclick="changevisibility('content_parts_partslist')">
| + | |
| - | Parts list
| + | |
| - | </div>
| + | |
| - | <div class="sub-menu-item">
| + | |
| - | iGEM parts page
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="menu-item">
| + | |
| - | <span id="menu_notebook">Notebook</span>
| + | |
| - | <div class="sub-menu">
| + | |
| - | <div id="menu_notebook_detection" class="sub-menu-item" onclick="changevisibility('content_notebook_detection')">
| + | |
| - | Detection
| + | |
| - | </div>
| + | |
| - | <div id="menu_notebook_secretion" class="sub-menu-item" onclick="changevisibility('content_notebook_secretion')">
| + | |
| - | Secretion
| + | |
| - | </div>
| + | |
| - | <div id="menu_notebook_bandage" class="sub-menu-item" onclick="changevisibility('content_notebook_bandage')">
| + | |
| - | Bandage
| + | |
| - | </div>
| + | |
| - | <div id="menu_notebook_biobricks" class="sub-menu-item" onclick="changevisibility('content_notebook_biobricks')">
| + | |
| - | Biobricks
| + | |
| - | </div>
| + | |
| - | <div id="menu_notebook_protocols" class="sub-menu-item" onclick="changevisibility('content_notebook_protocols')">
| + | |
| - | Protocols
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="menu-item"">
| + | |
| - | <span id="menu_safety">Safety</span>
| + | |
| - | <div class="sub-menu">
| + | |
| - | <div id="menu_safety_safety" class="sub-menu-item" onclick="changevisibility('content_safety_safety')">
| + | |
| - | Safety
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="menu-item">
| + | |
| - | <span id="menu_awards">Awards</span>
| + | |
| - | <div class="sub-menu">
| + | |
| - | <div id="menu_awards_awards" class="sub-menu-item" onclick="changevisibility('content_awards_awards')">
| + | |
| - | Awards
| + | |
| - | </div>
| + | |
| - | <div id="menu_awards_checklist" class="sub-menu-item" onclick="changevisibility('content_awards_checklist')">
| + | |
| - | Checklist
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | <div class="menu-item" onclick="changevisibility('content_attribution')">
| + | |
| - | <span id="menu_attribution">Attribution</span>
| + | |
| - | <div class="sub-menu">
| + | |
| - | <div id="menu_attribution_attribution" class="sub-menu-item" onclick="changevisibility('content_attribution_attribution')">
| + | |
| - | Attribution
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </font>
| + | |
| - | | + | |
| - | <script type="text/javascript">
| + | |
| - | window.onload=setupMenu(0,0);
| + | |
| - | </script>
| + | |
| - | | + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | | + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </body>
| + | |
| - | </html>
| + | |
"
