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

(The page now adapts to the users screen.)
 
(68 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 */
+
−
 
+
−
/* Change Background color*/
+
−
body {
+
−
background-color: #fff;
+
−
}
+
−
 
+
−
/* Forces page to cover entire width*/
+
−
#content{
+
−
width:100%;
+
−
}
+
−
 
+
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
+
−
#mainContainer { 
+
−
width: 100%;
+
−
overflow:hidden;
+
−
flota:left;
+
−
margin-left:auto;
+
−
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  {
+
−
float:left;
+
−
width: 134px;
+
−
padding: 20px 0px;
+
−
border-top: 14px solid #565656;
+
−
background-color: #E8E8E9;
+
−
}
+
−
 
+
−
/* Creates the container for the content */
+
−
#contentContainer {
+
−
padding-top:20px;
+
−
padding-right:10px;
+
−
margin-bottom: 20px;
+
−
width: 814px;
+
−
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*/
+
−
#bannerContainer {
+
−
height:200px;
+
−
margin:auto;
+
−
text-align:center;
+
−
color: #24B694;
+
−
}
+
−
 
+
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
+
−
 
+
−
/*Change the styling of text for everything inside main container*/
+
−
#mainContainer p {
+
−
font-size: 13px;
+
−
color: #000000;
+
−
}
+
−
+
−
/*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 */
+
  <style type="text/css">
−
#contentContainer a {
+
−
font-weight: bold;
+
−
color: #23b593;
+
−
}
+
  
−
  /* Styling links on hover- links are different inside the menu */
+
    /* logo font */
−
#contentContainer a:hover {  
+
    @font-face{  
−
color: #59bf92;
+
      font-family: Sherlocked;
−
}
+
      src: url('https://static.igem.org/mediawiki/2015/8/8a/Chalmers_sherlocked-font.ttf');
 +
    }
  
−
/*Change the styling of tables */
+
    /* body heading fonts */
−
        #contentContainer table {
+
    h2, h3 { font-family: Oswald, sans-serif; }
−
    border: 1px solid #565656;
+
    h4 { font-family: 'Slabo 27px', serif; }
−
    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*/
+
    /*
−
    #contentContainer  td {
+
    * default stylesheet overwrites
−
    padding: 10px;
+
    */
−
    border: 1px solid #565656;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
    }
+
  
−
/*Change the styling of table headers */
+
    body {
−
    #contentContainer th {
+
      background-color: #ffffff;
−
    background-color: #E8E8E9;
+
      /*font-family: "Open Sans", sans-serif;*/
−
    padding: 10px;
+
      font-family: 'Slabo 27px', serif;
−
    border: 1px solid #565656;
+
      font-size: 13pt;
−
    border-collapse: collapse;
+
      color: #444444;
−
    vertical-align: text-top;
+
    }
−
    }
+
  
 +
    /*  reset margins & paddings */
 +
    html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, dl,
 +
    dt, dd, blockquote, address {
 +
      margin: 0;
 +
      padding: 0;
 +
      border: 0;
 +
    }
  
 +
    /* center the wiki top menu  */
 +
    #top_menu_inside {
 +
      margin: auto;
 +
    }
  
−
/*MENU STYLING */
+
    /* enable use of full browser width */
 +
    #globalWrapper, #content {
 +
      width: 100%;
 +
      height: 100%;
 +
      margin: 0px;
 +
      padding: 0px;
 +
    }
  
−
/*Styling for the links in the menu */
+
    /*
−
#menuContainer a {
+
    * Custom styles
−
color: #565656;
+
    */
−
text-decoration:none;
+
−
font-weight: bold;
+
−
}
+
  
−
/* Sets the style for lists inside menuContainer  */
+
    #main {
−
#menuContainer ul {  
+
      width: 100%;
−
list-style: none;
+
      height: 50px;
−
margin-left:0px;
+
    }
−
}
+
  
−
/*Styles the list items to become menu buttons */
+
    /* Header */
−
#menuContainer ul li {
+
−
text-align: center;
+
−
display: block;
+
−
width: 100%;
+
−
height:30px;
+
−
padding-top:10px;
+
−
}
+
  
−
/*For the menu buttons, changes the color when hovering*/
+
    #header {
−
#menuContainer li:hover {
+
      width: 100%;
−
color: #FFF;
+
      min-width: 960px;
−
background-color: #24B694;
+
      height: 420px;
−
}
+
      /*background-color: #FF3300;*/
 +
      background-color: #e8e8e8;
 +
      background-image: url(http://www.transparenttextures.com/patterns/crissxcross.png);
 +
      background-repeat: repeat, no-repeat;
 +
    }
  
−
/*Submenus are not displayed as default*/
+
    #header-content {
−
#menuContainer li ul {
+
      position: relative;
−
display: none;
+
      width: 960px;
−
padding-top:15px;
+
      height: 400px;
−
margin-left: -19px;
+
      margin: 0px auto;
−
}
+
      color: #ffffff;
 +
    }
  
−
/*Submenus are displayed when hovering the menu button */
+
    #header-content h1.main-title {
−
#menuContainer li:hover ul {
+
      font-family: Sherlocked, sans-serif;
−
/*display: inline-block; */
+
      font-size: 26pt;
−
display: block;  
+
      color: #444444;
−
position: absolute;  
+
      position: absolute;
−
float:right;
+
      right: 0px;
−
margin-left: 134px;
+
      top: 108px;
−
margin-top:-42px;
+
    }
−
}
+
  
−
/*Style the submenu buttons*/
+
    #header-content p.summary {
−
#menuContainer li ul li{
+
      position: absolute;
−
background-color: #59BF92;  
+
      width: 570px;
−
padding-left:20px;
+
      top: 158px;
−
padding-right:20px;
+
      right: 0px;
−
height:30px;
+
      font-size: 17pt;
−
padding-top:10px;
+
      text-align: right;
−
margin-top:-2px;
+
      color: #444444;
−
color: #565656;
+
    }
−
width: 150px;
+
−
}
+
  
−
/*CLASSES */
+
    #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;
 +
    }
  
−
/*Clear class for all the pages, adds spacing too*/
+
    #header-content ul#main-menu li {
−
.clear{
+
      display: inline;
−
clear:both;
+
    }
−
height: 10px;
+
−
}
+
  
 +
    #header-content ul#main-menu li a {
 +
      color: #333333;
 +
      font-weight: bold;
 +
      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;
 +
    }
  
−
/* highlight box for special messages */
+
    #header-content img#logo {
−
    .highlightBox {
+
      position: absolute;
−
        width:500px;
+
      top: 30px;
−
        margin:auto;
+
    }
−
        background-color: #E8E8E9;
+
−
margin-bottom: 15px;
+
−
margin-top: 15px;
+
−
padding: 15px;
+
−
padding-top: 5px;
+
−
    }
+
  
 +
    #header-content img#footprints {
 +
      position: absolute;
 +
      left: 0px;
 +
      top: 0px;
 +
      opacity: 0.4;
 +
    }
  
−
</style>
+
    /* woo css */
−
<!-- End of CSS -->
+
  
 +
    #my_content {
 +
      width: 960px;
 +
      margin: 0px auto;
 +
      position: relative;
 +
    }
  
−
<!-- Start of the template html elements. -->
+
    /* Section 1 */
−
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
+
  
 +
    #section1 {
 +
      width: 960px;
 +
      margin: 0px auto;
 +
      position: relative;
 +
    }
  
−
<div id="bannerContainer">
+
    #section1-content {
−
<br><br>
+
      width: 610px;
−
<h2> Add a banner to your wiki! </h2>
+
      position: absolute;
−
+
      left: 0px;
−
<p>You can make the image 980px  by  200px</p>
+
      color: #333333;
−
<p> Remember to call the file: "<i>Team_Chalmers-Gothenburg_banner.jpg</i>" </p>
+
    }
−
</div>
+
  
−
<!-- Start of menu -->
+
    #section1-content p {
−
<div id="menuContainer">
+
      margin-bottom: 30px;
 +
      line-height: 150%;
 +
      text-align: justify;
 +
      text-justify: inter-word;
 +
    }
  
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
+
    #section1-content h2 {
−
<ul>
+
      //font-weight: bold;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg"><li>HOME</li></a>
+
      //border-bottom: 2px dashed #dddddd;
 +
      padding-bottom: 5px;
 +
      color: #333333;
 +
      margin-top: 55px;
 +
      text-align: left;
 +
    }
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Team"><li>TEAM</li></a>
+
    /* Sidebar */
  
−
<a href="#"><li>PROJECT
+
    /* #sidebar {
−
            <ul>
+
      background-image: url(https://static.igem.org/mediawiki/2015/2/2e/Gothenburg_concrete.png);
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Description"><li>Description</li></a>
+
      position: absolute;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Experiments"><li>Experiments &amp; Protocols</li></a> 
+
      width: 240px;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Results"><li>Results</li></a> 
+
      right: 0px;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Design"><li>Design</li></a>
+
      top: 0px;
−
</ul>
+
      padding: 15px;
−
</li></a>
+
      padding-top: 45px;
 +
      text-align: center;
 +
      color: #999;
 +
      border: 1px solid #dddddd;
 +
      border-top: none;
 +
    } */
  
−
<a href="#"><li>PARTS
+
    #sidebar {
−
            <ul>
+
      position: absolute;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Parts"><li>Team Parts</li></a>
+
      width: 270px;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Basic_Part"><li>Basic Parts</li></a> 
+
      right: 0px;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Composite_Part"><li>Composite Parts</li></a>
+
      top: 60px;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Part_Collection"><li>Part Collection</li></a> 
+
      padding-top: 20px;
−
</ul>
+
      padding-left: 5px;
−
</li></a>
+
      text-align: right;
 +
      color: #999;
 +
      /* border-left: 3px dashed #dddddd; */
 +
      font-size: 13pt;
 +
    }
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Notebook"><li>NOTEBOOK</li></a>
+
    #sidebar p {
−
     
+
      margin: 10px;
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Attributions"><li>ATTRIBUTIONS</li></a>
+
    }
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Collaborations"><li>COLLABORATIONS</li></a>
+
    #sidebar img {
 +
      max-width: 170px;
 +
      margin: 5px;
 +
    }
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Practices"><li>HUMAN PRACTICES</li></a>
+
    #sidebar hr {
 +
      margin-top: 20px;
 +
      margin-bottom: 20px;
 +
    }
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Safety"><li>SAFETY</li></a>
+
    /*
 +
    * General
 +
    */
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Modeling"><li>MODELING</li></a>
+
    .scarlet {
 +
      color: #FF2400 !important;
 +
    }
 +
  </style>
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Measurement"><li>MEASUREMENT</li></a>
+
  <div id="main">
  
−
<a href="https://2015.igem.org/Team:Chalmers-Gothenburg/Software"><li>SOFTWARE</li></a>
+
    <div id="header">
 +
      <div id="header-content">
 +
        <img src="https://static.igem.org/mediawiki/2015/6/6e/Chalmers_logo-temp.png" id="logo" alt="iGEM-Chalmers logo">
 +
        <h1 class="main-title">A STUDY IN <span class="scarlet">SCARLET</span></h1>
 +
        <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>
 +
        <ul id="main-menu">
 +
          <li><a href="#" class="scarlet">Home</a></li>
 +
          <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="https://2015.igem.org/Team:Chalmers-Gothenburg/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
    <div id="my_content">
  
−
</ul>
+
      <div id="sidebar">
−
</div>
+
        <p>A big thank you to our sponsors!</p>
−
<!-- End of menu  -->
+
        <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>
  
−
<!-- Start of content -->
+
      <div id="section1">
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
+
        <div id="section1-content">
 +
          <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>
 +
          <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>
 +
          <p>If you wish to support this project you can make a contribution here and receive awesome perks and iGEM Gothenburg memorabilia!</p>
 +
        </div>
 +
      </div>
 +
    </div>
 +
  </div>
 
</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!