Difference between revisions of "Template:Chalmers-Gothenburg-Dev"

(Created page with "{{Template_All_Teams}} <!-- Declare that you are going to use html code instead of wiki code --> <html> <!-- Start of CSS--> <style type="text/css"> →‎PAGE LAYOUT: ...")
 
 
(69 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
{{Template_All_Teams}}
 
{{Template_All_Teams}}
  
−
<!-- Declare that you are going to use html code instead of wiki code -->
 
 
<html>
 
<html>
  
−
<!-- Start of CSS-->
+
  <!-- custom body font -->
−
<style type="text/css">
+
  <link href='http://fonts.googleapis.com/css?family=Slabo+27px|Oswald' rel='stylesheet' type='text/css'>
  
−
/* PAGE LAYOUT */
+
  <style type="text/css">
  
−
/* Change Background color*/
+
    /* logo font */
−
body {  
+
    @font-face{  
−
background-color: #fff;
+
      font-family: Sherlocked;
−
}
+
      src: url('https://static.igem.org/mediawiki/2015/8/8a/Chalmers_sherlocked-font.ttf');
 +
    }
  
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
    /* body heading fonts */
−
#mainContainer {
+
    h2, h3 { font-family: Oswald, sans-serif; }
−
width: 978px;
+
    h4 { font-family: 'Slabo 27px', serif; }
−
overflow:hidden;
+
−
float:left;
+
−
margin-left:20px;
+
−
margin-bottom: 10px;
+
−
background-color: #fff;
+
−
border-bottom: 14px solid #565656;
+
−
border-right: 2px solid #565656;
+
−
border-left: 2px solid #565656;
+
−
border-top: 2px solid #565656;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
}
+
  
−
/* Creates the container for the menu */
+
    /*
−
#menuContainer  {
+
    * default stylesheet overwrites
−
float:left;
+
    */
−
width: 134px;
+
−
padding: 20px 0px;
+
−
border-top: 14px solid #565656;
+
−
background-color: #E8E8E9;
+
−
}
+
  
−
/* Creates the container for the content */
+
    body {
−
#contentContainer {
+
      background-color: #ffffff;
−
padding-top:20px;
+
      /*font-family: "Open Sans", sans-serif;*/
−
padding-right:10px;
+
      font-family: 'Slabo 27px', serif;
−
margin-bottom: 20px;
+
      font-size: 13pt;
−
width: 814px;
+
      color: #444444;
−
padding-left: 20px;
+
    }
−
float: left;
+
−
background-color: #fff;
+
−
border-top: 14px solid #565656;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
}
+
  
−
/*Set up height place holder for the banner*/
+
    /* reset margins & paddings */
−
#bannerContainer {
+
    html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl,
−
height:200px;
+
    dt, dd, blockquote, address {
−
margin:auto;
+
      margin: 0;
−
text-align:center;
+
      padding: 0;
−
color: #24B694;
+
      border: 0;
−
}
+
    }
  
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
    /* center the wiki top menu  */
 +
    #top_menu_inside {
 +
      margin: auto;
 +
    }
  
−
/*Change the styling of text for everything inside main container*/
+
    /* enable use of full browser width */
−
#mainContainer p {
+
    #globalWrapper, #content {  
−
font-size: 13px;
+
      width: 100%;  
−
color: #000000;
+
      height: 100%;
−
}
+
      margin: 0px;
−
+
      padding: 0px;
−
/*This changes the color and font family */
+
    }
−
#contentContainer h1, h2, h3, h4, h5, h6 {  
+
−
color: #565656;
+
−
border-bottom: none;
+
−
font-weight: bold;
+
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
+
−
margin-top:10px;
+
−
}
+
  
−
/*Style of the links - links are different inside the menu */
+
    /*
−
#contentContainer a {
+
    * Custom styles
−
font-weight: bold;
+
    */
−
color: #23b593;
+
−
}
+
  
−
  /* Styling links on hover- links are different inside the menu */
+
    #main {
−
#contentContainer a:hover {  
+
      width: 100%;
−
color: #59bf92;
+
      height: 50px;
−
}
+
    }
  
−
/*Change the styling of tables */
+
    /* Header */
−
        #contentContainer table {
+
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    width: 90%
+
−
    margin: auto;
+
−
    margin-bottom: 15px;
+
−
    margin-top: 15px;
+
−
    margin-right: 10px;
+
−
    margin-left: 10px;
+
−
    }
+
  
−
/*Change the styling of table cells*/
+
    #header {
−
    #contentContainer  td {
+
      width: 100%;
−
    padding: 10px;
+
      min-width: 960px;
−
    border: 1px solid #565656;
+
      height: 420px;
−
    border-collapse: collapse;
+
      /*background-color: #FF3300;*/
−
    vertical-align: text-top;
+
      background-color: #e8e8e8;
−
    }
+
      background-image: url(http://www.transparenttextures.com/patterns/crissxcross.png);
 +
      background-repeat: repeat, no-repeat;
 +
    }
  
−
/*Change the styling of table headers */
+
    #header-content {
−
    #contentContainer th {
+
      position: relative;
−
    background-color: #E8E8E9;
+
      width: 960px;
−
    padding: 10px;
+
      height: 400px;
−
    border: 1px solid #565656;
+
      margin: 0px auto;
−
    border-collapse: collapse;
+
      color: #ffffff;
−
    vertical-align: text-top;
+
    }
−
    }
+
  
 +
    #header-content h1.main-title {
 +
      font-family: Sherlocked, sans-serif;
 +
      font-size: 26pt;
 +
      color: #444444;
 +
      position: absolute;
 +
      right: 0px;
 +
      top: 108px;
 +
    }
  
 +
    #header-content p.summary {
 +
      position: absolute;
 +
      width: 570px;
 +
      top: 158px;
 +
      right: 0px;
 +
      font-size: 17pt;
 +
      text-align: right;
 +
      color: #444444;
 +
    }
  
−
/*MENU STYLING */
+
    #header-content ul#main-menu {
 +
      position: absolute;
 +
      bottom: 13px;
 +
      right: 0px;
 +
      list-style-type: none;
 +
      list-style-image: none;
 +
      margin: 0;
 +
      padding: 0;
 +
      text-align: right;
 +
    }
  
−
/*Styling for the links in the menu */
+
    #header-content ul#main-menu li {
−
#menuContainer a {
+
      display: inline;
−
color: #565656;
+
    }
−
text-decoration:none;
+
−
font-weight: bold;
+
−
}
+
  
−
/* Sets the style for lists inside menuContainer  */
+
    #header-content ul#main-menu li a {
−
#menuContainer ul {  
+
      color: #333333;
−
list-style: none;
+
      font-weight: bold;
−
margin-left:0px;
+
      text-decoration: none;
−
}
+
      margin: 20px;
 +
      margin-right: 0px;
 +
    }
 +
    #header-content ul#main-menu li a:active {
 +
      color: #FF2200;
 +
    }
 +
    #header-content ul#main-menu li a:hover {
 +
      color: #FF2200;
 +
    }
  
−
/*Styles the list items to become menu buttons */
+
    #header-content img#logo {
−
#menuContainer ul li {  
+
      position: absolute;
−
text-align: center;
+
      top: 30px;
−
display: block;
+
    }
−
width: 100%;
+
−
height:30px;
+
−
padding-top:10px;
+
−
}
+
  
−
/*For the menu buttons, changes the color when hovering*/
+
    #header-content img#footprints {
−
#menuContainer li:hover {
+
      position: absolute;
−
color: #FFF;
+
      left: 0px;
−
background-color: #24B694;
+
      top: 0px;
−
}
+
      opacity: 0.4;
 +
    }
  
−
/*Submenus are not displayed as default*/
+
    /* woo css */
−
#menuContainer li ul {
+
−
display: none;
+
−
padding-top:15px;
+
−
margin-left: -19px;
+
−
}
+
  
−
/*Submenus are displayed when hovering the menu button */
+
    #my_content {
−
#menuContainer li:hover ul {
+
      width: 960px;
−
/*display: inline-block; */
+
      margin: 0px auto;
−
display: block;  
+
      position: relative;
−
position: absolute;
+
    }
−
float:right;
+
−
margin-left: 134px;
+
−
margin-top:-42px;
+
−
}
+
  
−
/*Style the submenu buttons*/
+
    /* Section 1 */
−
#menuContainer li ul li{
+
−
background-color: #59BF92;
+
−
padding-left:20px;
+
−
padding-right:20px;
+
−
height:30px;
+
−
padding-top:10px;
+
−
margin-top:-2px;
+
−
color: #565656;
+
−
width: 150px;
+
−
}
+
  
−
/*CLASSES */
+
    #section1 {
 +
      width: 960px;
 +
      margin: 0px auto;
 +
      position: relative;
 +
    }
  
−
/*Clear class for all the pages, adds spacing too*/
+
    #section1-content {
−
.clear{
+
      width: 610px;
−
clear:both;
+
      position: absolute;
−
height: 10px;
+
      left: 0px;
−
}
+
      color: #333333;
 +
    }
  
 +
    #section1-content p {
 +
      margin-bottom: 30px;
 +
      line-height: 150%;
 +
      text-align: justify;
 +
      text-justify: inter-word;
 +
    }
  
−
/* highlight box for special messages */
+
    #section1-content h2 {
−
    .highlightBox {
+
      //font-weight: bold;
−
        width:500px;  
+
      //border-bottom: 2px dashed #dddddd;
−
        margin:auto;
+
      padding-bottom: 5px;
−
        background-color: #E8E8E9;  
+
      color: #333333;
−
margin-bottom: 15px;
+
      margin-top: 55px;
−
margin-top: 15px;
+
      text-align: left;
−
padding: 15px;
+
    }
−
padding-top: 5px;
+
−
    }
+
  
 +
    /* Sidebar */
  
−
</style>
+
    /* #sidebar {
−
<!-- End of CSS -->
+
      background-image: url(https://static.igem.org/mediawiki/2015/2/2e/Gothenburg_concrete.png);
 +
      position: absolute;
 +
      width: 240px;
 +
      right: 0px;
 +
      top: 0px;
 +
      padding: 15px;
 +
      padding-top: 45px;
 +
      text-align: center;
 +
      color: #999;
 +
      border: 1px solid #dddddd;
 +
      border-top: none;
 +
    } */
  
 +
    #sidebar {
 +
      position: absolute;
 +
      width: 270px;
 +
      right: 0px;
 +
      top: 60px;
 +
      padding-top: 20px;
 +
      padding-left: 5px;
 +
      text-align: right;
 +
      color: #999;
 +
      /* border-left: 3px dashed #dddddd; */
 +
      font-size: 13pt;
 +
    }
  
−
<!-- Start of the template html elements. -->
+
    #sidebar p {
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
      margin: 10px;
 +
    }
  
 +
    #sidebar img {
 +
      max-width: 170px;
 +
      margin: 5px;
 +
    }
  
−
<div id="bannerContainer">
+
    #sidebar hr {
−
<br><br>
+
      margin-top: 20px;
−
<h2> Add a banner to your wiki! </h2>
+
      margin-bottom: 20px;
−
+
    }
−
<p>You can make the image 980px  by  200px</p>
+
−
<p> Remember to call the file: "<i>Team_Chalmers-Gothenburg_banner.jpg</i>" </p>
+
−
</div>
+
  
−
<!-- Start of menu -->
+
    /*
−
<div id="menuContainer">
+
    * General
 +
    */
  
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
    .scarlet {
−
<ul>
+
      color: #FF2400 !important;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg"><li>HOME</li></a>
+
    }
 +
  </style>
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Team"><li>TEAM</li></a>
+
  <div id="main">
  
−
<a href="#"><li>PROJECT
+
    <div id="header">
−
            <ul>
+
      <div id="header-content">
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Description"><li>Description</li></a>
+
        <img src="https://static.igem.org/mediawiki/2015/6/6e/Chalmers_logo-temp.png" id="logo" alt="iGEM-Chalmers logo">
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Experiments"><li>Experiments &amp; Protocols</li></a>
+
        <h1 class="main-title">A STUDY IN <span class="scarlet">SCARLET</span></h1>
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Results"><li>Results</li></a>
+
        <p class="summary">Spot for a short introductory text eg. We, <b>Team Chalmers Gothenburg</b>, have developed a novel strategy to detect and combat contaminations in continuous bioreactors, using Saccharomyces cerevisiae as the producing organism.</p>
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Design"><li>Design</li></a>
+
        <ul id="main-menu">
−
</ul>
+
          <li><a href="#" class="scarlet">Home</a></li>
−
</li></a>
+
          <li><a href="#">Parts</a></li>
 +
          <li><a href="#">Project</a></li>
 +
          <li><a href="#">Notebook</a></li>
 +
          <li><a href="#">Attributions</a></li>
 +
          <li><a href="#">Another Link</a></li>
 +
          <li><a href="#">Etc</a></li>
 +
        </ul>
 +
      </div>
 +
    </div>
  
−
<a href="#"><li>PARTS
+
    <div id="my_content">
−
            <ul>
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Parts"><li>Team Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Basic_Part"><li>Basic Parts</li></a> 
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Composite_Part"><li>Composite Parts</li></a>
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Part_Collection"><li>Part Collection</li></a> 
+
−
</ul>
+
−
</li></a>
+
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Notebook"><li>NOTEBOOK</li></a>
+
      <div id="sidebar">
−
     
+
        <p>A big thank you to our sponsors!</p>
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Attributions"><li>ATTRIBUTIONS</li></a>
+
        <br>
 +
        <!-- <hr> -->
 +
        <img src="https://static.igem.org/mediawiki/2015/a/a0/Qiagen_logo.png" alt="Quiagen Logo">
 +
        <img src="https://static.igem.org/mediawiki/2015/b/b6/Geneious_logo.png" alt="Geneious Logo">
 +
        <img src="https://static.igem.org/mediawiki/2015/f/f5/Promega-Logo_black.png" alt="Promega Logo">
 +
        <img src="https://static.igem.org/mediawiki/2015/b/b6/Mastercard_logo.png" alt="Chalmers Mastercard Logo">
 +
        <img src="https://static.igem.org/mediawiki/2015/5/5d/AvancezChalmers_black_right.png" alt="Avancez Logo">
 +
        <br><br>
 +
        <p>If you wish to support this project you can make a contribution <u>here</u> and receive awesome perks and iGEM Gothenburg memorabilia!</p>
 +
      </div>
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Collaborations"><li>COLLABORATIONS</li></a>
+
      <div id="section1">
−
 
+
        <div id="section1-content">
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Practices"><li>HUMAN PRACTICES</li></a>
+
          <h2>This is the headline for the homepage!</h2>
−
 
+
          <p>The manufacturing process of biological products is complex and requires the use of living cells. Great progress has been made with industrial production techniques but contaminations are still a considerable problem the industry faces. Insufficient control of contaminations in bioreactors could compromise entire batches, resulting in high expenses. A contamination could lead to facilities or equipment having to be shut down for lengthy periods of time in order to conduct investigations and sterilize reactors. Ensuring that the bioreactors only contain the desired producing organism is critical to facility productivity, bioreactor throughput and product quality.</p>
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Safety"><li>SAFETY</li></a>
+
          <p>The method for detection utilizes the pheromone pathway in S. cerevisiae where the GPC-receptor (Ste2) has been replaced with a fusion receptor, allowing the cells to detect ligands from contaminants. When a ligand binds to the fusion receptor it will activate a phosphorylation cascade within the cell, inducing an expression of red fluorescent proteins that can be observed externally. The method for combating the detected contaminant is based on the use of UV-radiation, which effectively harms all living organisms. In order to prevent the producing cells from becoming inviable from the irradiation treatment, a DNA-repair system from the bacterium Deinococcus radiodurans is implemented into the cells. D. radiodurans is renowned for its extreme resistance to radiation, and our theory is that implementing these enzymes may increase S. cerevisiae's resistance to radiation, allowing it to survive while the contaminant dies.</p>
−
 
+
          <h2>And this is another headline!</h2>
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Modeling"><li>MODELING</li></a>
+
          <p>If you wish to support this project you can make a contribution here and receive awesome perks and iGEM Gothenburg memorabilia!</p>
−
 
+
        </div>
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Measurement"><li>MEASUREMENT</li></a>
+
      </div>
−
 
+
    </div>
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Software"><li>SOFTWARE</li></a>
+
  </div>
−
 
+
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
−
 
+
−
</ul>
+
−
</div>
+
−
<!-- End of menu  -->
+
−
 
+
−
<!-- Start of content -->
+
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
 
</html>
 
</html>

Latest revision as of 13:36, 20 July 2015

This is the headline for the homepage!

The manufacturing process of biological products is complex and requires the use of living cells. Great progress has been made with industrial production techniques but contaminations are still a considerable problem the industry faces. Insufficient control of contaminations in bioreactors could compromise entire batches, resulting in high expenses. A contamination could lead to facilities or equipment having to be shut down for lengthy periods of time in order to conduct investigations and sterilize reactors. Ensuring that the bioreactors only contain the desired producing organism is critical to facility productivity, bioreactor throughput and product quality.

The method for detection utilizes the pheromone pathway in S. cerevisiae where the GPC-receptor (Ste2) has been replaced with a fusion receptor, allowing the cells to detect ligands from contaminants. When a ligand binds to the fusion receptor it will activate a phosphorylation cascade within the cell, inducing an expression of red fluorescent proteins that can be observed externally. The method for combating the detected contaminant is based on the use of UV-radiation, which effectively harms all living organisms. In order to prevent the producing cells from becoming inviable from the irradiation treatment, a DNA-repair system from the bacterium Deinococcus radiodurans is implemented into the cells. D. radiodurans is renowned for its extreme resistance to radiation, and our theory is that implementing these enzymes may increase S. cerevisiae's resistance to radiation, allowing it to survive while the contaminant dies.

And this is another headline!

If you wish to support this project you can make a contribution here and receive awesome perks and iGEM Gothenburg memorabilia!