Difference between revisions of "Team:Oxford/Team"

 
(124 intermediate revisions by 6 users not shown)
Line 1: Line 1:
<html>
+
{{Oxford}}
  
<script>
 
  
 +
<html>
 +
<style>
  
     // allow button on the black menu bar to show/hide the side menu
+
#profile_caption {
     function hide_show_menu() {
+
     position: absolute;
 
+
     text-align: center;
      // in case you preview mode is selected, the menu is hidden for better visibility
+
    left: 0px;
      if (window.location.href.indexOf("submit") >= 0) {
+
    right: 0px;
        $(".igem_2017_menu_wrapper").hide();
+
    top: 75%;
      }
+
    font-weight: bold;
 +
    font-size: 20px;
 +
    color: white;
 +
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8)
 +
    /*-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera
 +
    animation: mymove 5s infinite; */
 +
}
  
      // if the black menu bar has been loaded
+
.col-sm-3 {
        if (document.getElementById('bars_item')) {
+
    margin-top: 40px;
 +
}
  
        // when the "bars_item" has been clicked
+
/*  Chrome, Safari, Opera
        $("#bars_item").click(function() {
+
@-webkit-keyframes mymove {
          $("#sideMenu").hide();
+
    50% {color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8)}
 +
}
  
          // show/hide the menu wrapper
+
Standard syntax
          $(".igem_2017_menu_wrapper").fadeToggle("100");
+
@keyframes mymove {
        }); 
+
    50% {color: white; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8)}
        }  
+
}*/
  
      // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
+
/*.profile_caption {
      else {
+
    position: absolute;
            setTimeout(hide_show_menu, 15);
+
    text-align: center;
      }
+
    left: 0px;
     }
+
    right: 0px;
 +
    top: 80%;
 +
    font-weight: bold;
 +
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
 +
    color: white;
 +
     font-size: 15px;
 +
}*/
  
 +
#header-lightbox {
 +
    margin-top: -32px;
 +
    width: 100%;
 +
    padding-bottom: 40%;
 +
    overflow: visible;
 +
}
  
</script>
+
#header-lightbox-img {
 
+
    position: absolute;
<head>
+
     top: 0px;
 
+
     bottom: 0px;
  <!-- This tells the browser that your page is responsive -->
+
     left: -20px;
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
        <!-- This is from CSS templates -->
+
  <!--<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">-->
+
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
+
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+
 
+
  <!-- Latest compiled and minified CSS -->
+
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
 
+
  <!-- Latest compiled JavaScript -->
+
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
 
+
</head>
+
 
+
<style>
+
 
+
/* Add a dark background color with a little bit see-through */
+
.navbar {
+
     padding-top: 5px;
+
     padding-bottom: 5px;
+
     background-color: #002147;
+
    border-color: transparent;
+
 
     right: 0;
 
     right: 0;
     left: 0;
+
     background-image: url(https://static.igem.org/mediawiki/2017/8/85/T--oxford--team-group.jpeg);
    border: 0;
+
     background-size: cover;
     font-size: 14px !important;
+
     background-position: center 20%;
    letter-spacing: 1px;
+
    opacity:0.9;
+
     margin-top: 17px;
+
 
}
 
}
  
.navbar li {
+
#header-lightbox-darken {
     margin: 0 20px;
+
     position: absolute;
 +
    top: 0px;
 +
    bottom: 0px;
 +
    left: 0px;
 +
    right: 0px;
 +
    background: rgba(0,0,0,0.2);
 
}
 
}
  
/* Add a gray color to all navbar links */
+
#header-lightbox-title {
.navbar li a, .navbar .navbar-brand {
+
    position: absolute;
     color: #fff;
+
    top: 70%;
 +
    left: 0px;
 +
    right: 0px;
 +
    font-size: 10vw;
 +
    font-weight: bolder;
 +
    text-shadow: 1px 3px 5px rgba(0,0,0,0.8);
 +
     color: white;
 +
    text-align: center;
 
}
 
}
  
/* the color of the single Link ('safety') on hover */
+
@media (max-width: 768px) {
.navbar-nav li a:hover {
+
     #header-lightbox {
     color: #1abc9c;
+
        margin-top: 37px;
 +
        background-position: center 20%;
 +
        padding-bottom: 70%;
 +
    }
 +
   
 +
    #header-lightbox-title {
 +
        top: 60%;
 +
    }
 
}
 
}
  
/* The active link this seems to be useless at the moment*/
+
.popup_box {
.navbar-nav li.active a {
+
    width: 90%;
     color: #fff;
+
    max-width: 600px;
     background-color:#29292c;
+
    /*border-radius: 5px;
 +
    border: none;
 +
    box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.5);
 +
     background: white;*/
 +
     color: black;
 +
    padding: 15px 20px;
 +
    transform: scale(0.8);
 
}
 
}
  
/* Remove border color from the collapsible button */
+
.popup_box img {
.navbar-default .navbar-toggle {
+
     width: 50%;
     border-color: transparent;
+
    margin: auto;
 
}
 
}
  
.navbar-default {
+
.popup_visible .popup_box {
     border-color:transparent;
+
     transform: scale(1);
 
}
 
}
  
/* the color of the Dropdown on click */
+
.popup_visible #bodyContent {
.open .dropdown-toggle {
+
     filter: blur(8px);
     color: #1abc9c;
+
     transition: filter 0.3s;
     background-color: #fff;
+
 
}
 
}
  
/* the color of the Dropdown links */
+
.close_button{
.dropdown-menu li a {
+
     position: absolute;
     color: #000;
+
    top: 4px;
     letter-spacing: 1px;
+
    right: 0px;
 +
    border: none;
 +
     background: transparent;
 
}
 
}
 
+
.team-member-img {
/* the color of the dropdown links on hover */
+
     cursor: pointer;
.dropdown-menu li a:hover {
+
     background-color: #fff;
+
 
}
 
}
  
.navbar-toggle .icon-bar {
+
.subject-icon {
     background: white;
+
    position: absolute;
 +
    right: 10%;
 +
    top: 6%;
 +
    box-shadow: 1px 1px 3px rgba(0,0,0,0.4);
 +
    border-radius: 50%;
 +
    width: 18%;
 +
     background-position: center;
 +
    background-size: 100%;
 
}
 
}
  
.navbar-header img {
+
.subject-icon:before {
     width: 120px;
+
     content: "";
     height: 120px;
+
     display: block;
     margin-top: 0px;
+
     padding-bottom: 100%;
    margin-bottom: -72px;
+
    border-radius: 100%;
+
 
}
 
}
  
#top_menu_14 {
+
.bioch {
     height: 18px;
+
     background-image: url(https://static.igem.org/mediawiki/2017/3/3a/T--oxford--team--biochemistry--icon.png);
 
}
 
}
  
#top_menu_14 #user_item {
+
.eng {
     margin-top: -3px;
+
     background-image: url(https://static.igem.org/mediawiki/2017/7/71/T--oxford--team--engineering--icon.png);
    padding-top: 0px;
+
 
}
 
}
  
#top_menu_14 #bars_item img {
+
.bio {
     vertical-align: top;
+
     background-image: url(https://static.igem.org/mediawiki/2017/d/d4/T--oxford--team--biology--icon.png);
 
}
 
}
  
 +
.med {
 +
    background-image: url(https://static.igem.org/mediawiki/2017/7/7c/T--oxford--team--medicine--icon.png);
 +
}
  
/***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
+
#supervisor-header {
 
+
    margin-top: 50px;
 
+
    margin-bottom: 50px;
  body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}
+
     text-align: center;
        body, html {
+
     font-size: 28pt;
        height: 100%;
+
     color: white;
        line-height: 1.8;
+
     font-weight: bolder;
        }
+
        Clear the default wiki settings
+
 
+
  #home_logo, #sideMenu { display:none; }
+
  #sideMenu, #top_title, .patrollink  {display:none;}
+
  #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
+
  body {background-color:white; }
+
  #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
 
+
 
+
 
+
/**************************************************************** MENU ***************************************************************/
+
  /* Wrapper for the menu */
+
  .igem_2017_menu_wrapper {
+
    width: 15%;
+
    height:100vh;
+
    position:fixed;
+
    right:0%;
+
    padding:0px;
+
    float:right;
+
    border-left: 1px solid #d3d3d3;
+
    background-color:#dddddd;  
+
     text-align:left;
+
     font-family:Tahoma, Geneva, sans-serif;  
+
     overflow-y: auto;
+
     overflow-x: hidden;
+
  }
+
 
+
  /* this hides the scrollbar to keep view consistency */
+
  .igem_2017_menu_wrappe::-webkit-scrollbar {
+
    display: none;
+
  }
+
 
+
 
      
 
      
  /* styling for links in the menu, removes the line under text */
+
}
  .igem_2017_menu_wrapper a { 
+
    text-decoration: none;
+
  }
+
  
 
+
#supervisor-header>center {
  /* styling for the images in the menu */
+
  .igem_2017_menu_wrapper img {
+
    width: 100%;
+
  }
+
 
+
  /* styling for the menu buttons */
+
  .igem_2017_menu_wrapper .menu_button {
+
    width: 100%;
+
    padding: 10px 0px 10px 15px;
+
    float:left;
+
    border-bottom: 1px solid #d3d3d3;
+
    font-size: 12px;
+
    font-weight: bold;
+
    color: #5e5f5f;
+
    cursor: pointer;
+
  }
+
 
+
 
+
  .igem_2017_menu_wrapper .menu_bottom_padding {
+
    width: 100%;
+
    height: 30px;
+
    float:left;
+
  }
+
 
+
  .menu_button.direct_to_page {
+
    padding-left: 36px;
+
  }
+
 
+
 
+
  .igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
+
    width:10%;
+
    float:left;
+
  }
+
 
+
  .igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
+
    content: "+"; 
+
  }
+
+
 
+
 
+
 
+
  /* styling for the menu buttons on hover */
+
  .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {
+
    background-color: #3399ff; 
+
    text-decoration: none;
+
    color:#ffffff;
+
  }
+
 
+
  /* styling for the menu button when it is the current page */
+
  .current_page {
+
    background-color:#7fc1f7  !important;
+
    color:#5e5f5f !important;
+
  }
+
 
+
 
+
  /* styling for the submenu buttons */
+
  .igem_2017_menu_wrapper .submenu_button {
+
    width: 100%;
+
    padding: 10px 0px 10px 34px;
+
    float:left;
+
    background-color:#f2f2f2;
+
    border-bottom: 1px solid #d3d3d3;
+
    font-size: 12px;
+
    color: #5e5f5f;
+
    cursor: pointer;
+
  }
+
 
+
  /* wrapper for the submenu items, they are hidden by default*/
+
  .igem_2017_menu_wrapper .submenu_wrapper {
+
    display:none;
+
  }
+
 
+
  /* when the page size is bigger than 800px, this show/hide control is hidden by default */
+
  .igem_2017_menu_wrapper #display_menu_control {
+
    display:none;
+
    text-align:center;
+
  }
+
 
+
 
+
/***************************************************** CONTENT OF THE PAGE ****************************************************/
+
 
+
  /* Wrapper for the content */
+
  .igem_2017_content_wrapper {
+
    margin: 2%;
+
 
     display:block;
 
     display:block;
     float:left;  
+
     max-width: 800px;
     background-color:white;  
+
     width: 80%;
     font-family:Tahoma, Geneva, sans-serif;  
+
    line-height: 0.1em;
  }
+
    border-bottom: 3px solid white;
 +
    text-align: center;
 +
     font-size: 28pt;
 +
    color: white;
 +
    font-weight: bolder;
 +
    margin: 0px auto;
 +
}
  
 +
#supervisor-header>center>span {
 +
    background: rgb(95,155,175);
 +
    padding: 0 20px;
 +
}
  
/********************************* HTML STYLING  *********************************/
+
#supervisor-container {
 +
    margin-top: 50px;
 +
    background: rgb(95,155,175);
 +
}
  
  /* styling for the titles h1 h2 */
+
.supervisor-description {
  .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
+
     padding-top: 10px;
     padding:5px 15px;  
+
     color: white;
     border-bottom: 0px;  
+
     line-height: 1.8;
     color: #3399ff;
+
}
  }
+
  
 +
.supervisor {
 +
    margin-bottom: 50px;
 +
}
  
  /* styling for the titles  h3 h4 h5 h6*/
+
.supervisor-img img {
  .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {  
+
     border-radius: 10px;
    padding:5px 15px;
+
}
     border-bottom:0px;
+
    color: #000000;
+
  }
+
  
 +
.supervisor>div {
 +
    margin-top: 30px;
 +
}
 +
</style>
  
  /* font and text */
+
<body>
  .igem_2017_content_wrapper p {
+
    padding: 0px 15px;
+
    font-size: 13px;
+
  }
+
  
  /* Links */
 
  .igem_2017_content_wrapper a {
 
    font-weight: bold;
 
    text-decoration: underline;
 
    text-decoration-color: #3399ff;
 
    color:  #3399ff;
 
    -webkit-transition: all 0.4s ease;
 
    -moz-transition: all 0.4s ease;
 
    -ms-transition: all 0.4s ease;
 
    -o-transition: all 0.4s ease;
 
    transition: all 0.4s ease;
 
  }
 
  
  /* hover for the links */
+
<div>
  .igem_2017_content_wrapper a:hover {
+
<div class="col-sm-12" id="header-lightbox">
    text-decoration:none;
+
<div id="header-lightbox-img"></div>
    color:#000000;
+
<div id="header-lightbox-darken"></div>
  }
+
<span id="header-lightbox-title">MEET THE TEAM</span>
 +
</div>
  
  /* non numbered lists */
+
<div class="container"> 
  .igem_2017_content_wrapper ul {
+
<div class="row">
     padding:0px 20px;
+
    <div class="col-sm-3">
     font-size: 13px;
+
    <img class="img-responsive img-circle team-member-img alissa_open" src="https://static.igem.org/mediawiki/2017/1/13/T--oxford--team--alissa--circle.jpeg">
     font-family:Tahoma, Geneva, sans-serif;
+
     <span id="profile_caption"> Alissa Hummer </span>
  }
+
     <div class="subject-icon bioch"></div>
 +
      
 +
    <!-- Add content to the popup -->
 +
    <div id="alissa" class="popup_box">
  
  /* numbered lists */
+
     <!-- Add an optional button to close the popup -->
  .igem_2017_content_wrapper ol {
+
     padding:0px;
+
    font-size: 13px;
+
    font-family:Tahoma, Geneva, sans-serif;
+
  }
+
  
  /* Table */
+
<button type="button" class="alissa_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
  .igem_2017_content_wrapper table {
+
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/1/13/T--oxford--team--alissa--circle.jpeg">
    width: 97%;
+
<b>Alissa Hummer</b> (Biochemistry)<br/>
    margin:15px 10px;
+
<i>Co-leader<br/>
    border: 1px solid #d3d3d3;
+
She. cruzi</i><br/>
    border-collapse: collapse;
+
  }
+
  
  /* table cells */
+
Alissa spends most of her iGEM days split between the wet lab, working with the engineers on mathematical modelling, and doing organizational things because she loves pretty much everything. Her experience in other labs prior to iGEM is invaluable to the team, because she knows all of the tips and tricks for efficient research. Outside of iGEM she enjoys playing football, being in nature, and reading.
  .igem_2017_content_wrapper  td {
+
     <!-- Add an optional button to close the popup -->
     padding: 10px;
+
     <br/>
    vertical-align: text-top;
+
     border: 1px solid #d3d3d3;
+
    border-collapse: collapse;
+
  }
+
  
  /* table headers */
+
    </div>
  .igem_2017_content_wrapper th {
+
    padding: 10px;
+
    vertical-align: text-top;
+
    border: 1px solid #d3d3d3;
+
    border-collapse: collapse;
+
    background-color:#f2f2f2;
+
  }
+
  
 +
   
 +
    </div>
 +
    <div class="col-sm-3">
 +
    <img class="img-responsive img-circle team-member-img angela_open" src="https://static.igem.org/mediawiki/2017/a/a5/T--oxford--team--angela--circle.jpeg">
 +
    <span id="profile_caption"> Angela Hellyer </span>
 +
    <div class="subject-icon bioch"></div>
 +
        <!-- Add content to the popup -->
 +
    <div id="angela" class="popup_box">
 +
    <button type="button" class="angela_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
 +
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/a/a5/T--oxford--team--angela--circle.jpeg">
 +
<b>Angela Hellyer</b> (Biochemistry)<br/>
 +
<i>Wet Lab Co-ordinator &amp; Safety<br/>
 +
G. weazli</i><br/>
  
/**********************************LAYOUT CLASSES **********************************/
+
Angela doesn’t really know how she ended up being in charge of safety, it kind of just happened when she wasn’t looking. Creator of the cake rota, she likes to keep things light, and provides some moral support for when things inevitably go wrong; only to be fixed promptly of course! Outside of iGEM she enjoys food and all things astro-, along with being Zoe F’s main Hogwarts buddy.
 +
    <!-- Add an optional button to close the popup -->
 +
    <br/>
  
  /* general class for column divs */
+
    </div>
  .igem_2017_content_wrapper .column  {
+
    </div>
     padding: 10px 0px;
+
    <div class="col-sm-3">
     float:left;
+
    <img class="img-responsive img-circle team-member-img arthur_open" src="https://static.igem.org/mediawiki/2017/f/f7/T--oxford--team--arthur--circle.jpeg">
  }
+
     <span id="profile_caption"> Arthur Norman </span>
 +
     <div class="subject-icon bioch"></div>
 +
        <!-- Add content to the popup -->
 +
    <div id="arthur" class="popup_box">
 +
    <button type="button" class="arthur_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
 +
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/f/f7/T--oxford--team--arthur--circle.jpeg">
 +
<b>Arthur Norman</b> (Biochemistry)<br/>
 +
<i>Co-leader<br/>
 +
T. freezi</i><br/>
  
  /* class for a full width column */
+
Arthur has been dubbed ‘freezer boy’, and his super powers include being able to organise freezer boxes without them thawing and the ability to tidy away everyone else’s eppendorfs. Arthur spends his time split between working in the lab and coming up with novel ideas for the project. When outside the lab he plays tennis, runs, and drinks pimms, sometimes all three at the same time.
  .column .full_size {
+
     <!-- Add an optional button to close the popup -->
     width:100%;
+
    <br/>
  }
+
  
  /* styling for images in a full width column*/
+
    </div>
  .column.full_size img {
+
    </div>
     width:97%;
+
    <div class="col-sm-3">
     padding: 10px 15px;
+
    <img class="img-responsive img-circle team-member-img chun_open" src="https://static.igem.org/mediawiki/2017/7/74/T--oxford--team--chun--circle.jpeg">
  }
+
     <span id="profile_caption"> Chun Ngai Au </span>
 +
     <div class="subject-icon eng"></div>
 +
        <!-- Add content to the popup -->
 +
    <div id="chun" class="popup_box">
 +
    <button type="button" class="chun_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
 +
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/7/74/T--oxford--team--chun--circle.jpeg">
 +
<b>Chun Ngai Au</b> (Engineering)<br/>
 +
<i>Dry Lab Co-ordinator<br/>
 +
T. snoozi</i><br/>
  
  /* class for a half width column */
+
Chun likes creating colourful and cool looking graphs on Matlab, although he isn’t totally against putting on a lab coat and pipetting a couple of things every now and again. He put in a lot of work at the beginning of the project to catch up on the biochemistry, but is now as knowledgable as the rest of us. Outside of iGEM, he likes to play Ultimate, sleep, and eat spicy food - even his pizzas tend to have chillies on them.
  .column.half_size {
+
     <!-- Add an optional button to close the popup -->
    width: 50%;
+
     <br/>
  }
+
  /* styling for images in a half width column*/
+
  .column.half_size img {
+
     width: 94.5%;
+
     padding: 10px 15px;
+
  }
+
  
 +
    </div>
 +
    </div>
 +
</div>
  
 +
<div class="row">
 +
    <div class="col-sm-3">
 +
    <img class="img-responsive img-circle team-member-img helen_open" src="https://static.igem.org/mediawiki/2017/7/7c/T--oxford--team--helen--circle.jpeg">
 +
    <span id="profile_caption"> Helen Siyu Ren </span>
 +
    <div class="subject-icon eng"></div>
 +
        <!-- Add content to the popup -->
 +
    <div id="helen" class="popup_box">
 +
    <button type="button" class="helen_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
 +
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/7/7c/T--oxford--team--helen--circle.jpeg">
 +
<b>Helen Siyu Ren</b> (Engineering)<br/>
 +
<i>Dry Lab Co-ordinator<br/>
 +
Si. yuzi</i><br/>
  
 +
As one of the few non-bio students, Helen is learning new things in the wet lab while spending the rest of time staring at her laptop doing wiki pages and trying to implement the complicated model that comes with all of our many parts. She is one of those people who really likes to sit on the floor, where her free time is spent reading, playing bridge, and eating delicious food she made earlier.
 +
    <!-- Add an optional button to close the popup -->
 +
    <br/>
  
/********************************* SUPPORT CLASSES ********************************/
+
    </div>
 +
    </div>
 +
    <div class="col-sm-3">
 +
    <img class="img-responsive img-circle team-member-img jei_open" src="https://static.igem.org/mediawiki/2017/e/e6/T--oxford--team--jei--circle.jpeg">
 +
    <span id="profile_caption"> Jei Diwakar </span>
 +
    <div class="subject-icon bioch"></div>
 +
        <!-- Add content to the popup -->
 +
    <div id="jei" class="popup_box">
 +
    <button type="button" class="jei_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
 +
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/e/e6/T--oxford--team--jei--circle.jpeg">
 +
<b>Jei Diwakar</b> (Biochemistry)<br/>
 +
<i>Wet Lab Co-ordinator &amp; Treasurer<br/>
 +
T. schmoozi</i><br/>
  
  /* class that clears content below*/
+
Jei’s role means that he spends most of his time planning and carrying out wet lab work, unless he is organising flights and hotels - then he is on the phone all day! He likes messing around with Excel, whether it is to keep track of team’s accounts or analyse the lab data. Outside iGEM, Jei plays a lot of cricket for the Oxford University Cricket Club and is also a co-founder of the Oxford University Biotech Society.  
  .igem_2017_content_wrapper .clear {
+
     <!-- Add an optional button to close the popup -->
     clear:both;
+
    <br/>
  }
+
 
+
 
+
  /* adds extra spacing when clearing content */
+
  .igem_2017_content_wrapper  .clear.extra_space {
+
    height: 30px;
+
  }
+
  
 +
    </div>
 +
    </div>
 +
    <div class="col-sm-3">
 +
    <img class="img-responsive img-circle team-member-img john_open" src="https://static.igem.org/mediawiki/2017/6/69/T--oxford--team--john--circle.jpeg">
 +
    <span id="profile_caption"> John Myers </span>
 +
    <div class="subject-icon bioch"></div>
 +
        <!-- Add content to the popup -->
 +
    <div id="john" class="popup_box">
 +
    <button type="button" class="john_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
 +
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/6/69/T--oxford--team--john--circle.jpeg">
 +
<b>John Myers</b> (Biochemistry)<br/>
 +
<i>Secretary<br/>
 +
Oui. cruzi</i><br/>
  
  /* highlight class, makes content slightly smaller */
+
John keeps track of the team’s regular meetings and is enthusiastic about outreach. Often he can be found helping out in the lab, learning all of the protocols in detail. Outside of iGEM, he rows for his college, plays the violin, and cooks - very useful for the team’s weekly cake rota. He also introduced a large chunk of the team to Bridget Jones, for which we are all eternally grateful.
  .igem_2017_content_wrapper .highlight {
+
     <!-- Add an optional button to close the popup -->
     margin: 0px 15px;
+
     <br/>
     padding: 15px 0px;
+
  }
+
  
 +
    </div>
 +
    </div>
 +
    <div class="col-sm-3">
 +
    <img class="img-responsive img-circle team-member-img kushal_open" src="https://static.igem.org/mediawiki/2017/e/ea/T--oxford--team--kushal--circle.jpeg">
 +
    <span id="profile_caption"> Kushal Mansatta </span>
 +
    <div class="subject-icon med"></div>
 +
        <!-- Add content to the popup -->
 +
    <div id="kushal" class="popup_box">
 +
    <button type="button" class="kushal_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
 +
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/e/ea/T--oxford--team--kushal--circle.jpeg">
 +
<b>Kushal Mansatta</b> (Medicine)<br/>
 +
<i>Wiki Co-ordinator &amp; Social Sec<br/>
 +
He. curezi</i><br/>
  
  /* highlight class, adds a gray background */
+
By day Kushal can usually be found browsing the wiki or reminding people to reference EVERYTHING they read; by night he makes sure everyone on the team has fun and eats well. His medical background has been invaluable for our diagnostic track. Outside of iGEM, he enjoys going to the gym and caring for patients at his job on a hospital ward.
  .igem_2017_content_wrapper .highlight.gray {
+
     <!-- Add an optional button to close the popup -->
     background-color: #f2f2f2;
+
    <br/>
  }
+
  
  /* highlight with decoration blue line on top */
+
    </div>
  .igem_2017_content_wrapper .highlight.blue_top {
+
    </div>
      border-top: 4px solid #3399ff;
+
</div>
  }
+
  
  /* highlight with a full blue border decoration */
+
<div class="row">
  .igem_2017_content_wrapper .highlight.blue_border {
+
    <div class="col-sm-3">
      border: 4px solid  #3399ff;
+
    <img class="img-responsive img-circle team-member-img noah_open" src="https://static.igem.org/mediawiki/2017/1/12/T--oxford--team--noah--circle.jpeg">
  }
+
    <span id="profile_caption"> Noah Sprent </span>
 +
    <div class="subject-icon bioch"></div>
 +
        <!-- Add content to the popup -->
 +
    <div id="noah" class="popup_box">
 +
    <button type="button" class="noah_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
 +
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/1/12/T--oxford--team--noah--circle.jpeg">
 +
<b>Noah Sprent</b> (Biochemistry)<br/>
 +
<i>Co-leader<br/>
 +
No. shoezi</i><br/>
  
 +
Noah loves making agendas for meetings and reading about definitely-not-useless features on Benchling when he’s not keeping our lab beautifully clean. Although life outside of iGEM isn’t really life at all, Noah is a co-founder of the Oxford University Biotech Society, tries to do cool things with the Oxford University Gymnastics Club, and has confusing discussions with his philosopher housemates.
 +
    <!-- Add an optional button to close the popup -->
 +
    <br/>
  
  /* button class */
+
    </div>
  .igem_2017_content_wrapper .button{
+
     </div>
     max-width: 35%;
+
      
     margin: 30px auto;
+
     <div class="col-sm-3">
     padding: 12px 10px;
+
     <img class="img-responsive img-circle team-member-img sumaera_open" src="https://static.igem.org/mediawiki/2017/2/2f/T--oxford--team--sumaera--circle.jpeg">
      background-color: #3399ff; 
+
     <span id="profile_caption"> Sumaera Rathore </span>
      text-align: center;
+
    <div class="subject-icon bio"></div>
      color: #ffffff;
+
        <!-- Add content to the popup -->
     -webkit-transition: all 0.4s ease;
+
     <div id="sumaera" class="popup_box">
    -moz-transition: all 0.4s ease;
+
    <button type="button" class="sumaera_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
     -ms-transition: all 0.4s ease;
+
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/2/2f/T--oxford--team--sumaera--circle.jpeg">
     -o-transition: all 0.4s ease; transition: all 0.4s ease; 
+
<b>Sumaera Rathore</b> (Biology)<br/>
  }
+
<i>iGEM Requirements Co-ordinator<br/>
 +
Tea. brewzi</i><br/>
  
  /* styling for button on hover */
+
Sumaera puts the 'bio' into 'biochem' and is responsible for ensuring our project ticks all the boxes in the judging booklet so we can really impress the judges with all our hard work. She also knows a lot more about parasites than the rest of us. Outside of iGEM, Sumaera enjoys anything to do with plants, tea, and chocolate. In fact, she brightened up our iGEM desks with a collection of aloe plants!
  .igem_2017_content_wrapper .button:hover{
+
     <!-- Add an optional button to close the popup -->
     background-color: #3399ff; 
+
    <br/>
      color: #000000;
+
  }
+
  
 +
    </div>
 +
    </div>
 +
   
 +
    <div class="col-sm-3">
 +
    <img class="img-responsive img-circle team-member-img zoec_open" src="https://static.igem.org/mediawiki/2017/8/81/T--oxford--team--zoec--circle.jpeg">
 +
    <span id="profile_caption"> Zoë Catchpole </span>
 +
    <div class="subject-icon bioch"></div>
 +
        <!-- Add content to the popup -->
 +
    <div id="zoec" class="popup_box">
 +
    <button type="button" class="zoec_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
 +
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/8/81/T--oxford--team--zoec--circle.jpeg">
 +
<b>Zoë Catchpole</b> (Biochemistry)<br/>
 +
<i>Outreach &amp; Human Practices<br/>
 +
Cant. choozi</i><br/>
  
 +
Zoe wants to show everyone that synbio is as cool as she thinks it is by designing ‘fun’ activities for outreach, and is key to co-ordinating all of our meetings with experts from across the globe. She is always keen to pitch in with the lab work too. Outside of iGEM she has grade 8 recorder, but unfortunately serenading our E. coli hasn’t yet helped our transformation efficiency!
 +
    <!-- Add an optional button to close the popup -->
 +
    <br/>
  
 
+
    </div>
/***************************************************** RESPONSIVE STYLING ****************************************************/
+
    </div>
 
+
  /* IF THE SCREEN IS LESS THAN 1200PX */
+
  @media only screen and (max-width: 1200px) {
+
 
+
    #content {width:100%; }
+
    .igem_2017_menu_wrapper {width:15%; right:0;}
+
    .highlight {padding:10px 0px;}
+
    .igem_2017_menu_wrapper #display_menu_control { display:none; }
+
    #menu_content { display:block;}
+
    .menu_button.direct_to_page {padding-left: 17px;}
+
 
      
 
      
  }
+
    <div class="col-sm-3">
 +
    <img class="img-responsive img-circle team-member-img zoef_open" src="https://static.igem.org/mediawiki/2017/e/eb/T--oxford--team--zoef--circle.jpeg" alt="" >
 +
    <span id="profile_caption"> Zoe Ford </span>
 +
    <div class="subject-icon bioch"></div>
 +
        <!-- Add content to the popup -->
 +
    <div id="zoef" class="popup_box">
 +
    <button type="button" class="zoef_close close_button"><span class="glyphicon glyphicon-remove"></span></button>
 +
<img class="img-responsive img-circle" src="https://static.igem.org/mediawiki/2017/e/eb/T--oxford--team--zoef--circle.jpeg">
 +
<b>Zoe Ford</b> (Biochemistry)<br/>
 +
<i>Wet Lab Co-ordinator &amp; Social Media Manager<br/>
 +
'Wee'. cruzi</i><br/>
  
  /* IF THE SCREEN IS LESS THAN 800PX */
+
Zoe enjoys spending endless hours in the lab pipetting clear liquids from one tube into another. Along with being our Queen of SnapGene, they love taking pictures of everything and everyone to make the prettiest iGEM Instagram account in history. Outside of iGEM they referee quidditch, sing in choirs, and use a lot of their free time in the evenings cross-stitching everything - including our logo!
  @media only screen and (max-width: 800px) {
+
    <!-- Add an optional button to close the popup -->
 +
    <br/>
  
     .igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
+
     </div>
     .igem_2017_content_wrapper {width:100%; margin-left:0px;}
+
     </div>
    .column.half_size  {width:100%; }
+
</div>
    .column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
+
    .highlight {padding:15px 5px;}
+
    .igem_2017_menu_wrapper #display_menu_control { display:block; }
+
    #menu_content { display:none;}
+
    .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
+
    .menu_bottom_padding {display:none;}
+
    .menu_button.direct_to_page { padding-left: 36px; }
+
  }
+
  
 +
</div>
  
 
+
<div class="container-fluid" id="supervisor-container">
 
+
<div class="container">
  /* special class that the system uses to make sure the team wants a page to be evaluated */
+
  .judges-will-not-evaluate {
+
      width: 96.6%;
+
      margin: 5px 15px;
+
      display: block;
+
    border: 4px solid #3399ff;
+
      font-weight: bold;
+
  }
+
 
+
</style>
+
  
 +
<div class="row">
 +
    <div class="col-sm-12" id="supervisor-header">
 +
        <center><span>Supervisors</span></center>
 +
    </div>
 +
</div>
  
<!--- THIS IS WHERE THE HTML BEGINS --->
+
<div class="row supervisor">
 +
    <div class="col-sm-3 supervisor-img">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/0/01/T--oxford--team--george--circle.jpg">
 +
    </div>
 +
    <div class="col-sm-9 supervisor-description">
 +
    <b>Dr. George Wadhams</b><br />
 +
    <i>Oxford Department of Biochemistry</i><br /><br />
 +
    George's research interests lie in how bacteria sense and integrate environmental information. His group focuses on understanding in a quantitative manner how multiple, homologous pathways operate in individual cells and how the components of these pathways can be used to create synthetic pathways.<br />
 +
    George has been mentoring Oxford iGEM teams since they were founded in 2014.
 +
    </div>
 +
</div>
  
  
 +
<div class="row supervisor">
 +
    <div class="col-sm-3 supervisor-img">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/f/fa/T--oxford--team--nick--circle.jpg">
 +
    </div>
 +
    <div class="col-sm-9 supervisor-description">
 +
    <b>Dr. Nicolas Delalez</b><br />
 +
    <i>Oxford Department of Engineering</i><br /><br />
 +
    Nick's research interests include synthetic biology and its biophysics of molecular machines.
 +
    <br />
 +
    Nick is the main person we go to when we are stuck on something in the lab. He can troubleshoot everything from a unsuccessful PCR to a contaminated plate of cells.
 +
    </div>
 +
</div>
  
 +
<div class="row supervisor">
 +
    <div class="col-sm-3 supervisor-img">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/5/51/T--oxford--team--antonis--circle.jpg">
 +
    </div>
 +
    <div class="col-sm-9 supervisor-description">
 +
    <b>Prof. Antonis Papachristodoulou</b><br />
 +
    <i>Oxford Department of Engineering</i><br /><br />
 +
    Antonis' research interests include systems and synthetic biology, network systems, aerospace systems and flow control, and convex optimisation. Furthermore, he works on modern control theory, robust stability analysis and design, as well as nonlinear dynamical systems and Lyapunov stability.
 +
    </div>
 +
</div>
  
 +
<div class="row supervisor">
 +
    <div class="col-sm-3 supervisor-img">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/2/23/T--oxford--team--harry--circle.jpg" width="500" height="500">
 +
    </div>
 +
    <div class="col-sm-9 supervisor-description">
 +
    <b>Harrison Steel</b><br />
 +
    <i>Oxford Department of Engineering</i><br /><br />
 +
    Harry is a PhD student whose research interests include control engineering and its application to Synthetic Biology, as well as mathematical tools for analysis of biological systems. Furthermore, he works on the design and development of new tools and hardware for use in Biological research.
 +
    </div>
 +
</div>
 +
<div class="row supervisor">
 +
    <div class="col-sm-3 supervisor-img">
 +
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2017/8/8b/T--oxford--team--juditharmitage--circle.jpeg" width="500" height="500">
 +
    </div>
 +
    <div class="col-sm-9 supervisor-description">
 +
    <b>Prof. Judy Armitage</b><br />
 +
    <i>Oxford Department of Biochemistry</i><br /><br />
 +
Judy Armitage is interested in the dynamics of bacterial sensory transduction and the control of bacterial motility. In particular, her research group focuses on the communication between the sensory and adaptation mechanisms of the two pathways as a model for network sensory integration in general.
 +
    </div>
 +
</div>
 +
<!-- Include jQuery Popup Overlay -->
 +
<script src="https://cdn.rawgit.com/vast-engineering/jquery-popup-overlay/1.7.13/jquery.popupoverlay.js"></script>
  
<body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50">
+
<script>
 +
var popup_settings = {color: 'white', transition: 'all 0.3s', opacity: 0.85};
  
<nav class= "navbar-fixed-top navbar">
+
$(document).ready(function() {
  <div class="container-fluid">
+
    <div class="navbar-header">
+
      <!-- This allows the navigation bar to be replaced by a button in the top right corner when screen is to small -->
+
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
+
        <span class="icon-bar"></span>
+
        <span class="icon-bar"></span>
+
        <span class="icon-bar"></span>
+
      </button>
+
  
      <!-- This is the logo -->
+
    // Initialize the plugin
    <a href="https://2017.igem.org/Team:Oxford" class="navbar-left"><img src="https://static.igem.org/mediawiki/2017/0/09/T--oxford--oxigemicon.png"></a>
+
    $('#alissa').popup(popup_settings);
 +
    $('#angela').popup(popup_settings);
 +
    $('#arthur').popup(popup_settings);
 +
    $('#chun').popup(popup_settings);
 +
   
 +
    $('#helen').popup(popup_settings);
 +
    $('#jei').popup(popup_settings);
 +
    $('#john').popup(popup_settings);
 +
    $('#kushal').popup(popup_settings);
 +
   
 +
    $('#noah').popup(popup_settings);
 +
    $('#sumaera').popup(popup_settings);
 +
    $('#zoec').popup(popup_settings);
 +
    $('#zoef').popup(popup_settings);
  
    </div>
+
});
    <div class="collapse navbar-collapse" id="myNavbar">
+
</script>
      <ul class="nav navbar-nav navbar-right">
+
  
        <!-- This is the team dropdown -->
+
</div>
        <li>
+
</div>
          <a href="https://2017.igem.org/Team:Oxford/Team">TEAM</a>
+
</body>
          <!--
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2017.igem.org/Team:Oxford/Team">Meet the Team</a></li>
+
           
+
          </ul>
+
          -->
+
        </li>
+
       
+
        <!-- This is the project dropdown -->
+
        <li class="dropdown">
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">PROJECT
+
            <span class="caret"></span>
+
          </a>
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2017.igem.org/Team:Oxford/Description">Description</a></li>
+
            <li><a href="https://2017.igem.org/Team:Oxford/Design">Design</a></li>
+
            <li style="display: none"><a href="https://2017.igem.org/Team:Oxford/Experiments">Experiments</a></li>
+
            <li style="display: none"><a href="https://2017.igem.org/Team:Oxford/Notebook">Notebook</a></li>
+
            <li style="display: none"><a href="https://2017.igem.org/Team:Oxford/InterLab">Interlab</a></li>
+
            <li style="display: none"><a href="https://2017.igem.org/Team:Oxford/Contribution">Contribution</a></li>
+
            <li style="display: none"><a href="https://2017.igem.org/Team:Oxford/Model">Model</a></li>
+
            <li style="display: none"><a href="https://2017.igem.org/Team:Oxford/Results">Results</a></li>
+
            <li style="display: none"><a href="https://2017.igem.org/Team:Oxford/Demonstrate">Demonstrate</a></li>
+
            <li style="display: none"><a href="https://2017.igem.org/Team:Oxford/Improve">Improve</a></li>
+
            <li style="display: none"><a href="https://2017.igem.org/Team:Oxford/Attributions">Attributions</a></li>
+
          </ul>
+
        </li>
+
  
        <!-- This is the parts dropdown -->
 
        <li class="dropdown" style="display: none">
 
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">PARTS
 
            <span class="caret"></span>
 
          </a>
 
          <ul class="dropdown-menu">
 
            <li><a href="https://2017.igem.org/Team:Oxford/Parts">Parts</a></li>
 
            <li><a href="https://2017.igem.org/Team:Oxford/Basic_Part">Basic Parts</a></li>
 
            <li><a href="https://2017.igem.org/Team:Oxford/Composite_Part">Composite Parts</a></li>
 
            <li><a href="https://2017.igem.org/Team:Oxford/Part_Collection">Part Collection</a></li>
 
          </ul>
 
        </li>
 
  
        <!-- This is the safety button -->
 
        <li><a href="https://2017.igem.org/Team:Oxford/Safety">SAFETY</a></li>
 
  
        <!-- This is the human practices dropdown -->
+
</div>
        <li class="dropdown" style="display: none">
+
</html>
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">HUMAN PRACTICES
+
            <span class="caret"></span>
+
          </a>
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2017.igem.org/Team:Oxford/HP/Silver">Silver HP</a></li>
+
            <li><a href="https://2017.igem.org/Team:Oxford/HP/Gold_Integrated">Integrated and Gold</a></li>
+
            <li><a href="https://2017.igem.org/Team:Oxford/Engagement">Public Engagement</a></li>
+
            <li><a href="https://2017.igem.org/Team:Oxford/Collaborations">Collaborations</a></li>
+
          </ul>
+
        </li>
+
  
        <!-- This is the awards dropdown -->
+
{{Oxford/footer}}
        <li class="dropdown" style="display: none">
+
          <a class="dropdown-toggle" data-toggle="dropdown" href="#">AWARDS
+
            <span class="caret"></span>
+
          </a>
+
          <ul class="dropdown-menu">
+
            <li><a href="https://2017.igem.org/Team:Oxford/Applied_Design">Applied Design</a></li>
+
            <li><a href="https://2017.igem.org/Team:Oxford/Entrepreneurship">Entrepreneurship</a></li>
+
            <li><a href="https://2017.igem.org/Team:Oxford/Hardware">Hardware</a></li>
+
            <li><a href="https://2017.igem.org/Team:Oxford/Measurement">Measurement</a></li>
+
            <li><a href="https://2017.igem.org/Team:Oxford/Model">Model</a></li>
+
            <li><a href="https://2017.igem.org/Team:Oxford/Plant">Plant</a></li>
+
            <li><a href="https://2017.igem.org/Team:Oxford/Software">Software</a></li>
+
          </ul>
+
        </li>
+
 
+
        <!-- This is the judging form button -->
+
        <li style="display: none"><a href="https://igem.org/2017_Judging_Form?team=Oxford">JUDGING FORM</a></li>
+
 
+
        <!-- This is the search button -->
+
      </ul>
+
    </div>
+
  </div>
+
</nav>
+

Latest revision as of 23:14, 15 December 2017


MEET THE TEAM
Alissa Hummer
Angela Hellyer
Arthur Norman
Chun Ngai Au
Helen Siyu Ren
Jei Diwakar
John Myers
Kushal Mansatta
Noah Sprent
Sumaera Rathore
Zoë Catchpole
Zoe Ford
Supervisors
Dr. George Wadhams
Oxford Department of Biochemistry

George's research interests lie in how bacteria sense and integrate environmental information. His group focuses on understanding in a quantitative manner how multiple, homologous pathways operate in individual cells and how the components of these pathways can be used to create synthetic pathways.
George has been mentoring Oxford iGEM teams since they were founded in 2014.
Dr. Nicolas Delalez
Oxford Department of Engineering

Nick's research interests include synthetic biology and its biophysics of molecular machines.
Nick is the main person we go to when we are stuck on something in the lab. He can troubleshoot everything from a unsuccessful PCR to a contaminated plate of cells.
Prof. Antonis Papachristodoulou
Oxford Department of Engineering

Antonis' research interests include systems and synthetic biology, network systems, aerospace systems and flow control, and convex optimisation. Furthermore, he works on modern control theory, robust stability analysis and design, as well as nonlinear dynamical systems and Lyapunov stability.
Harrison Steel
Oxford Department of Engineering

Harry is a PhD student whose research interests include control engineering and its application to Synthetic Biology, as well as mathematical tools for analysis of biological systems. Furthermore, he works on the design and development of new tools and hardware for use in Biological research.
Prof. Judy Armitage
Oxford Department of Biochemistry

Judy Armitage is interested in the dynamics of bacterial sensory transduction and the control of bacterial motility. In particular, her research group focuses on the communication between the sensory and adaptation mechanisms of the two pathways as a model for network sensory integration in general.