Difference between revisions of "Template:Cologne-Duesseldorf/css"

Line 1: Line 1:
−
<html>
+
{{Template:Cologne-Duesseldorf/css}}
−
<style>
+
  
−
/******Wiki Styles*************************************/
+
<html >
 +
<head>
 +
  <meta charset="UTF-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <title>Create a Sidebar Menu</title>
 +
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
</head>
  
−
html {
+
<body>
−
font-size: 16px;
+
  <html>
−
}
+
<head>
−
body {
+
<title>SideBar Menu</title>
−
background-color: #fff;
+
<link rel="stylesheet" type="text/css" href="style.css">
−
font: medium sans-serif;
+
</head>
−
color: black;
+
<body>
−
margin: 0;
+
−
/*margin-top: 20px;*/
+
−
margin-top: 18px;
+
−
padding: 0;
+
−
}
+
−
#globalWrapper {
+
−
position: relative;
+
−
font-size: 100%;
+
−
width: 100%;
+
−
margin: 0;
+
−
padding: 0;
+
−
}
+
−
#top_menu_under {
+
−
display: none;
+
−
position: relative;
+
−
width: 100%;
+
−
height: 0;
+
−
}
+
−
/*the igem menu bar*/
+
  
−
#top_menu_14 {
+
<div id="sidebar">
−
position: fixed;
+
<ul>
−
width: 100%;
+
<!-- Home -->
−
top: 0px;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf">Home</a></li>
−
left: 0px;
+
−
height: 16px;
+
<!-- Team -->
−
background-color: #383838;
+
<li class="sub"><a href="#">Team</a></li>
−
border-bottom: 2px solid black;
+
<ul>
−
z-index: 9999;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Team">Team</a></li>
−
}
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Collaborations">Collaborations</a></li>
−
#content {
+
</ul>
−
width: 100%;
+
−
padding: 0;
+
−
margin: 0;
+
<!-- Project -->
−
border: none;
+
<li class="sub"><a href="#">Project</a></li>
−
color: inherit;
+
<ul>
−
background-color: inherit;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Description">Description</a></li>
−
position: relative;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Design">Design</a></li>
−
}
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Experiments">Experiments</a></li>
−
#top_title {
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Notebook">Notebook</a></li>
−
display: none;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/InterLab">InterLab</a></li>
−
}
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Contribution">Contribution</a></li>
−
#sideMenu {
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Model">Model</a></li>
−
display: none;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Results">Results</a></li>
−
width: 170px;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Demonstrate">Demonstrate</a></li>
−
position: absolute;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Improve">Improve</a></li>
−
top: 20px;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Attributions">Attributions</a></li>
−
left: 1020px;
+
</ul>
−
z-index: 10;
+
<li class="sub"><a href="#">Parts</a></li>
−
padding-top: 0px;
+
<ul>
−
padding-bottom: 15px;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Parts">Parts</a></li>
−
padding-left: 15px;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Basic_Part">Basic Parts</a></li>
−
padding-right: 15px;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Composite_Part">Composite Parts</a></li>
−
background-color: white;
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Part_Collection">Part Collection</a></li>
−
text-align: left;
+
</ul>
−
}
+
−
}
+
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Safety">Safety</a></li>
−
.pop_why_cover {
+
−
display: none;
+
−
z-index: 100;
+
−
margin-top: -65px;
+
−
margin-left: -40px;
+
−
width: 980px;
+
−
height: 2100px;
+
−
float: left;
+
−
position: absolute;
+
−
opacity: 0.5;
+
−
background-color: #b2b2b2;
+
−
}
+
−
.pop_why_box {
+
−
display: none;
+
−
left: 250px;
+
−
top: 0px;
+
−
background-color: white;
+
−
padding: 15px;
+
−
width: 500px;
+
−
position: absolute;
+
−
border: 3px solid #4e606e;
+
−
border-radius: 3px;
+
−
z-index: 100;
+
−
}
+
  
−
#footer {
+
<!-- Human Practices -->
−
font-size:100%;
+
<li class="sub"><a href="#">Human Practices</a></li>
−
}
+
<ul>
 +
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/HP/Silver">Silver</a></li>
 +
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/HP/Gold_Integrated">Integrated Practices</a></li>
 +
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Engagement">Public Engagement</a></li>
 +
</ul>
 +
 +
<!-- Awards -->
 +
<li class="sub"><a href="#">Awards</a></li>
 +
<ul>
 +
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Applied_Design">Applied Design</a></li>
 +
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Entrepreneurship">Entrepreneurship</a></li>
 +
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Hardware">Hardware</a></li>
 +
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Measurement">Measurement</a></li>
 +
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Model">Model</a></li>
 +
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Plant">Plant</a></li>
 +
<li><a href="https://2017.igem.org/Team:Cologne-Duesseldorf/Software">Software</a></li>
 +
</ul>
 +
<!-- Judging Form -->
 +
<li><a href="https://igem.org/2017_Judging_Form?team=Cologne-Duesseldorf">Judging Form</a></li>
  
 +
</ul>
 +
</div>
 +
 +
 +
 +
<div id="sidebar-btn">
 +
<i class="fa fa-bars"></i>
 +
</div>
 +
<div id="overlay"></div>
 +
<div id="container">
 +
<div id="paper">
 +
<section id="header">
 +
<img src="https://static.igem.org/mediawiki/2017/0/0d/T--Cologne-Duesseldorf--artico-logo-cities.svg">
 +
</section>
 +
<section id="article">
 +
<h3>Designing a Customizable Synthetic Cell Compartment Toolbox</h3>
 +
<hr>
 +
<p>
 +
Synthetic organisms provide a wide range of applications with the potential to tackle
 +
the biggest challenges humanity faces. Their creation is therefore one of the major
 +
goals in synthetic biology. Many breakthroughs have been achieved in the last
 +
decade, however, the creation of a fully synthetic cell is yet a milestone to reach for.
 +
<br>
 +
A common approach tries to build up artificial cells from scratch, whereas we want to
 +
start by engineering artificial compartments through orthogonalization. For designing
 +
these new compartments we plan to establish an open source toolbox accessible to
 +
the community at large. This will make it possible to boot up a compartment perfectly
 +
tailored for a specific application, which will enable cheaper and more efficient
 +
production of biofuels, pharmaceuticals, or high value chemicals.
 +
<br>
 +
By integrating enzymes or biosynthetic pathways into semi-permeable organelles we
 +
gain higher concentrations of enzymes and metabolites and provide a basis for the
 +
ideal operation of specialized enzymes. Furthermore, toxic or unstable intermediates
 +
can be sustained and naturally incompatible reactions can take place
 +
simultaneously.
 +
<br>
 +
We have chosen yeast peroxisomes as our chassis for designing this synthetic organelle, which are very resistant, have a useful import mechanism and are expendable under optimal conditions.
 +
</p>
 +
</section>
 +
<section id="sec">
 +
<h3>Designing a Customizable Synthetic Cell Compartment Toolbox</h3>
 +
<hr>
 +
<p>
 +
Synthetic organisms provide a wide range of applications with the potential to tackle
 +
the biggest challenges humanity faces. Their creation is therefore one of the major
 +
goals in synthetic biology. Many breakthroughs have been achieved in the last
 +
decade, however, the creation of a fully synthetic cell is yet a milestone to reach for.
 +
<br>
 +
A common approach tries to build up artificial cells from scratch, whereas we want to
 +
start by engineering artificial compartments through orthogonalization. For designing
 +
these new compartments we plan to establish an open source toolbox accessible to
 +
the community at large. This will make it possible to boot up a compartment perfectly
 +
tailored for a specific application, which will enable cheaper and more efficient
 +
production of biofuels, pharmaceuticals, or high value chemicals.
 +
<br>
 +
By integrating enzymes or biosynthetic pathways into semi-permeable organelles we
 +
gain higher concentrations of enzymes and metabolites and provide a basis for the
 +
ideal operation of specialized enzymes. Furthermore, toxic or unstable intermediates
 +
can be sustained and naturally incompatible reactions can take place
 +
simultaneously.
 +
<br>
 +
We have chosen yeast peroxisomes as our chassis for designing this synthetic organelle, which are very resistant, have a useful import mechanism and are expendable under optimal conditions.
 +
</p>
 +
</section>
 +
</div>
 +
</div>
 +
<section id="footer">
 +
<a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
 +
<a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
 +
<a href="#"><i class="fa fa-youtube-play" aria-hidden="true"></i></a>
 +
<a href="#"><i class="fa fa-envelope" aria-hidden="true"></i></a>
 +
<a href="#"><i class="fa fa-university" aria-hidden="true"></i><a>
 +
</section>
 +
 +
  
−
/*************WIKI FONTS**************/
+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
−
 
+
<script>
−
#HQ_page h1,
+
−
h2,
+
−
h3,
+
−
h4,
+
−
h5,
+
−
h6 {
+
−
color: #149375;
+
−
border: none;
+
−
font-weight: normal;
+
−
font-style: normal;
+
−
text-rendering: optimizeLegibility;
+
−
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+
−
}
+
−
#content h1,
+
−
h2,
+
−
h3,
+
−
h4,
+
−
h5,
+
−
h6 {
+
−
font-weight: normal;
+
−
}
+
−
#bodyContent h1,
+
−
h2,
+
−
h3,
+
−
h4,
+
−
h5,
+
−
h6 {
+
−
margin: 0 0 0.5rem 0;
+
−
}
+
−
#bodyContent h1,
+
−
#bodyContent h2 {
+
−
margin: 0 0 0.5rem 0;
+
−
}
+
−
#bodyContent h3,
+
−
#bodyContent h4,
+
−
#bodyContent h5 {
+
−
margin: 0 0 0.5rem 0;
+
−
}
+
−
 
+
−
#HQ_page p {
+
−
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
+
−
font-size: 16px;
+
−
text-align: justify;
+
−
}
+
−
 
+
−
#HQ_page table {
+
−
    border: none;
+
−
    border-collapse: collapse;
+
−
    width: 100%;
+
−
margin: 0;
+
−
 
+
−
}
+
−
table {
+
−
background: white;
+
−
font-size: 100%;
+
−
color: black;
+
−
}
+
−
 
+
−
#HQ_page th {
+
−
    background-color: white;
+
−
    padding: 0;
+
−
    color: black;
+
−
    border: none;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
}
+
−
 
+
−
#HQ_page td {
+
−
    padding: 0;
+
−
    border: none;
+
−
    border-collapse: collapse;
+
−
    vertical-align: text-top;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
 
+
−
 
+
−
/****************** SITE STYLES ******
+
−
*************************************/
+
−
 
+
−
 
+
−
 
+
−
 
+
−
body{
+
−
margin:0px;
+
−
padding:0px;
+
−
font-family:Roboto;
+
−
background: #149375;
+
−
overflow-x: hidden;
+
−
}
+
−
 
+
−
body.inactive{
+
−
background-color: rgba(0,0,0,0.5);
+
−
}
+
−
 
+
−
#container h1,
+
−
h2,
+
−
h3,
+
−
h4,
+
−
h5,
+
−
h6 {
+
−
padding: 0;
+
−
overflow: hidden;
+
−
background: none;
+
−
line-height: 1.4;
+
−
}
+
−
#container h1 {
+
−
    font-size: 2rem;
+
−
    margin-top: 0;
+
−
    margin-bottom: .5rem
+
−
}
+
−
#container h2 {
+
−
    font-size: 1.83rem;
+
−
    margin-top: 0;
+
−
    margin-bottom: .5rem
+
−
}
+
−
#container h3 {
+
−
    font-size: 1.66rem;
+
−
    margin-top: 0;
+
−
    margin-bottom: .5rem
+
−
}
+
−
#container h4 {
+
−
    font-size: 1.5rem;
+
−
    margin-top: 0;
+
−
    margin-bottom: .5rem
+
−
}
+
−
#container h5 {
+
−
    font-size: 1.33rem;
+
−
    margin-top: 0;
+
−
    margin-bottom: .5rem
+
−
}
+
−
#container h6 {
+
−
    font-size: 1.16rem;
+
−
    margin-top: 0;
+
−
    margin-bottom: .5rem
+
−
}
+
−
 
+
−
#container p {
+
−
margin: 0;
+
−
  line-height: 1.7;
+
−
}
+
−
#container a {
+
−
text-decoration: none;
+
−
font-weight: normal;
+
−
color: #149375;
+
−
background: none;
+
−
}
+
−
#container a:link {
+
−
color: #149375;
+
−
}
+
−
#container a:visited {
+
−
color: #149375;
+
−
}
+
−
#container a:hover,
+
−
#container a:focus {
+
−
color: #149375;
+
−
text-decoration: none;
+
−
}
+
−
#container a:active {
+
−
color: #149375;
+
−
}
+
−
 
+
−
#sidebar{
+
−
z-index: 3;
+
−
background:#151718;
+
−
width:250px;
+
−
height:100%;
+
−
display:block;
+
−
position:fixed;
+
−
top: 18px;
+
−
transition:0.5s linear;
+
−
visibility: hidden;
+
−
opacity: 0;
+
−
transition: all 0.5s ease;
+
−
overflow-y: auto;
+
−
}
+
−
 
+
−
#sidebar.visible{
+
−
visibility: visible;
+
−
opacity: 1;
+
−
}
+
−
 
+
−
#sidebar ul{
+
−
margin:0px;
+
−
padding:0px;
+
−
}
+
−
 
+
−
#sidebar ul li{
+
−
list-style:none;
+
−
}
+
−
 
+
−
#sidebar ul li a{
+
−
background:#1C1E1F;
+
−
color:#ccc;
+
−
border-bottom:1px solid #111;
+
−
display:block;
+
−
width:230px;
+
−
padding:10px;
+
−
text-decoration: none;
+
−
}
+
−
 
+
−
#sidebar ul li a:hover{
+
−
background-color: rgba(255,255,255,0.3)
+
−
}
+
−
 
+
−
#sidebar ul ul{
+
−
display:none;
+
−
}
+
−
 
+
−
#sidebar ul ul.active{
+
−
display: block;
+
−
}
+
−
 
+
−
#overlay{
+
−
    position: fixed;
+
−
    width: 100%;
+
−
    height: 100%;
+
−
    top: 0;
+
−
    left: 250px;
+
−
    right: 0;
+
−
    bottom: 0;
+
−
    background-color: rgba(0,0,0,0.5);
+
−
    z-index: 1;
+
−
    cursor: pointer;
+
−
visibility: hidden;
+
−
opacity: 0;
+
−
transition: all 0.5s ease;
+
−
}
+
−
 
+
−
#overlay.active{
+
−
visibility: visible;
+
−
opacity: 1;
+
−
}
+
−
 
+
−
#container{
+
−
transition:0.5s linear;
+
−
display: flex;
+
−
flex-direction: column;
+
−
align-items: center;
+
−
padding: 5%;
+
−
}
+
−
 
+
−
#paper {
+
−
    display: flex;
+
−
flex-direction: column;
+
−
    max-width: 1024px;
+
−
    background: white;
+
−
    box-shadow: 0 0 12px 0px rgba(0,0,0,0.4);
+
−
padding: 5%;
+
−
}
+
−
 
+
−
#sidebar-btn{
+
−
    font-size: 24pt;
+
−
    z-index: 2;
+
−
    position: fixed;
+
−
    right: 2%;
+
−
    top: 4%;
+
−
    display: flex;
+
−
    flex-direction: row;
+
−
    justify-content: center;
+
−
    align-items: center;
+
−
    width: 20px;
+
−
    height: 20px;
+
−
    cursor: pointer;
+
−
    background: rgba(0,0,0,0.1);
+
−
    padding: 20px;
+
−
    color: white;
+
−
    border: 3px solid white;
+
−
    border-radius: 100%;
+
−
    box-shadow: 0px 4px 12px 2px rgba(0,0,0,0.3);
+
−
transition: all 0.5s ease;
+
−
}
+
−
 
+
−
section{
+
−
margin: 8px;
+
−
}
+
−
 
+
−
section#header{
+
−
justify-content: center;
+
−
margin-bottom: 24px;
+
−
}
+
−
 
+
−
section#footer{
+
−
    display: flex;
+
−
    flex-direction: row;
+
−
    justify-content: center;
+
−
    align-items: center;
+
−
    height: 15vw;
+
−
max-height: 250px;
+
−
    margin: 0;
+
−
    background: #1C1E1F;
+
−
    position: absolute;
+
−
    left: 0;
+
−
    right: 0;
+
−
}
+
−
 
+
−
section#footer i{
+
−
color:white;
+
−
padding: 20px;
+
−
font-size: 5vw;
+
−
}
+
−
 
+
−
section#footer a:hover{
+
−
background: rgba(255,255,255,0.3)
+
−
}
+
−
 
+
−
 
+
−
/****************** MEDIA QUERIES **
+
−
**********************************/
+
−
 
+
−
@media (max-width: 768px){
+
−
body{
+
−
background: white;
+
−
}
+
−
+
−
#sidebar-btn {
+
−
position: fixed;
+
−
    left: 0;
+
−
    top: 18px;
+
−
    width: 100%;
+
−
    height: 50px;
+
−
    cursor: pointer;
+
−
    background: #1C1E1F;
+
−
    padding: 0;
+
−
    color: white;
+
−
    border: none;
+
−
    border-radius: 0;
+
−
    box-shadow: 0px 4px 12px 2px rgba(0,0,0,0.3);
+
−
}
+
−
#container {
+
−
margin-top: 68px;
+
−
padding: 0;
+
−
}
+
−
#container.inactive{
+
−
transform: translate(250px,0)
+
−
}
+
−
#sidebar-btn.inactive{
+
−
background: rgba(0,0,0,0.5);
+
−
#left: 250px;
+
−
}
+
−
}
+
  
−
@media (min-width: 1024px){
+
$(document).ready(function(){
−
section#footer i {
+
$('#sidebar-btn').click(function(){
−
font-size: 3vw;
+
$('#sidebar').toggleClass('visible');
−
}
+
$('#overlay').toggleClass('active');
−
}
+
$('#container').toggleClass('inactive');
 +
$('#sidebar-btn').toggleClass('inactive');
 +
});
 +
$('#overlay').click(function(){
 +
$('#sidebar').toggleClass('visible');
 +
$('#overlay').toggleClass('active');
 +
$('#container').toggleClass('inactive');
 +
$('#sidebar-btn').toggleClass('inactive');
 +
});
 +
 +
$('#sidebar li.sub').click(function(){
 +
$('#sidebar ul ul').toggleClass('active');
 +
});
 +
 +
});
  
 +
</script>
  
−
</style>
+
</body>
 +
</html>
 +
 
 +
 
 +
</body>
 
</html>
 
</html>

Revision as of 12:36, 4 May 2017

Create a Sidebar Menu SideBar Menu

Designing a Customizable Synthetic Cell Compartment Toolbox

Synthetic organisms provide a wide range of applications with the potential to tackle the biggest challenges humanity faces. Their creation is therefore one of the major goals in synthetic biology. Many breakthroughs have been achieved in the last decade, however, the creation of a fully synthetic cell is yet a milestone to reach for.
A common approach tries to build up artificial cells from scratch, whereas we want to start by engineering artificial compartments through orthogonalization. For designing these new compartments we plan to establish an open source toolbox accessible to the community at large. This will make it possible to boot up a compartment perfectly tailored for a specific application, which will enable cheaper and more efficient production of biofuels, pharmaceuticals, or high value chemicals.
By integrating enzymes or biosynthetic pathways into semi-permeable organelles we gain higher concentrations of enzymes and metabolites and provide a basis for the ideal operation of specialized enzymes. Furthermore, toxic or unstable intermediates can be sustained and naturally incompatible reactions can take place simultaneously.
We have chosen yeast peroxisomes as our chassis for designing this synthetic organelle, which are very resistant, have a useful import mechanism and are expendable under optimal conditions.

Designing a Customizable Synthetic Cell Compartment Toolbox

Synthetic organisms provide a wide range of applications with the potential to tackle the biggest challenges humanity faces. Their creation is therefore one of the major goals in synthetic biology. Many breakthroughs have been achieved in the last decade, however, the creation of a fully synthetic cell is yet a milestone to reach for.
A common approach tries to build up artificial cells from scratch, whereas we want to start by engineering artificial compartments through orthogonalization. For designing these new compartments we plan to establish an open source toolbox accessible to the community at large. This will make it possible to boot up a compartment perfectly tailored for a specific application, which will enable cheaper and more efficient production of biofuels, pharmaceuticals, or high value chemicals.
By integrating enzymes or biosynthetic pathways into semi-permeable organelles we gain higher concentrations of enzymes and metabolites and provide a basis for the ideal operation of specialized enzymes. Furthermore, toxic or unstable intermediates can be sustained and naturally incompatible reactions can take place simultaneously.
We have chosen yeast peroxisomes as our chassis for designing this synthetic organelle, which are very resistant, have a useful import mechanism and are expendable under optimal conditions.


</body> </html>