Difference between revisions of "Team:UCSC"

Line 1: Line 1:
−
<!--{{UCSC-Header}}-->
+
{{UCSC-Styles}}
−
{{Header_Test}}
+
  
 
<html>
 
<html>
−
  <head>
 
−
      <meta name="UCSC IGEM" content="The legendary, UCSC igem Science Superheros">
 
−
        <title>Santa Cruz IGEM</title>
 
−
  </head>
 
  
−
<div id="page">
+
   <!-- External scripts -->
−
<body>
+
−
<center>
+
−
   <div class="headerbox" style="margin-right: 0px; margin-left: 0px; margin-top:30px; background: honeydew;">
+
−
<!-- <img src="https://static.igem.org/mediawiki/2017/5/50/Frontpage1.png" style="user-drag: none; -->
+
−
<img src="https://static.igem.org/mediawiki/2017/9/96/FrontpageIII.png" style="user-drag: none;
+
−
user-select: none;
+
−
-moz-user-select: none;
+
−
-webkit-user-drag: none;
+
−
-webkit-user-select: none;
+
−
-ms-user-select: none;
+
−
        width: 80%;
+
−
+
−
</div>
+
−
</body>
+
−
</center>
+
−
</div>
+
  
 +
  <!-- Fonts Used On Page -->
 +
  <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
 +
  <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'>
 +
 +
 +
  <!-- For mobile friendly version of website. -->
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 +
  <!-- Necessary for nav bar header-->
 +
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 +
  <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> -->
 +
 +
  <!-- TypeKit Fonts (BW) --> 
 +
  <script src="https://use.typekit.net/hii0ztv.js"></script>
 +
  <script>try{Typekit.load({ async: true });}catch(e){}</script>
 +
 +
  <!-- Functionallity and behaviour JS -->
 +
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 +
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 +
 +
 +
 +
<style type="text/css">
 +
  * {
 +
      margin:0;
 +
      padding:0;
 +
      text-decoration:none
 +
  }
 +
 +
  body {
 +
      background:#555;
 +
  }
 +
 +
  header {
 +
      position:relative;
 +
      width:100%;
 +
      background:#333;
 +
  }
 +
 +
  .logo-header-custom {
 +
      position:relative;
 +
      z-index:123;
 +
      padding-left: 12px;
 +
      padding-right: 10px;
 +
      padding-top: 2px;
 +
      padding-bottom: 2px;
 +
      font:18px verdana;
 +
      color:#6DDB07;
 +
      float:left;
 +
      width:15%
 +
  }
 +
 +
  .logo-header-custom a {
 +
      color:#6DDB07;
 +
  }
 +
 +
  nav {
 +
      position:relative;
 +
      width:100%;
 +
      margin:0 auto;
 +
  }
 +
 +
  #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile {
 +
      border:0;
 +
      list-style:none;
 +
/*      line-height:1;*/
 +
      margin-bottom: -1px;
 +
      display:block;
 +
      position:relative;
 +
      -webkit-box-sizing:border-box;
 +
      -moz-box-sizing:border-box;
 +
      box-sizing:border-box
 +
  }
 +
 +
  #cssmenu:after,#cssmenu > ul:after {
 +
      content:".";
 +
      display:block;
 +
      clear:both;
 +
      visibility:hidden;
 +
      line-height:0;
 +
      height:0
 +
  }
 +
 +
  #cssmenu #head-mobile {
 +
      display:none
 +
  }
 +
 +
  #cssmenu {
 +
      font-family:'Quicksand';
 +
      background: #fff;
 +
      top: 16px;
 +
  }
 +
 +
  #cssmenu > ul > li {
 +
      float:right
 +
  }
 +
 +
  #cssmenu > ul > li > a {
 +
      padding:17px;
 +
      font-size:15px;
 +
      letter-spacing:1px;
 +
      text-decoration:none;
 +
      color:#ddd;
 +
      font-weight:700;
 +
  }
 +
 +
  #cssmenu > ul > li:hover > a,#cssmenu ul li.active a {
 +
      color:#fff
 +
  }
 +
 +
  #cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover {
 +
      background-color:#448D00!important;
 +
      -webkit-transition:background .3s ease;
 +
      -ms-transition:background .3s ease;
 +
      transition:background .3s ease;
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub > a {
 +
      padding-right:30px
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub > a:after {
 +
      position:absolute;
 +
      top:28px;
 +
      right:11px;
 +
      width:8px;
 +
      height:2px;
 +
      display:block;
 +
      background:#363636;
 +
      content:''
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub > a:before {
 +
      position:absolute;
 +
      top:25px;
 +
      right:14px;
 +
      display:block;
 +
      width:2px;
 +
      height:8px;
 +
      background:#363636;
 +
      content:'';
 +
      -webkit-transition:all .25s ease;
 +
      -ms-transition:all .25s ease;
 +
      transition:all .25s ease
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub:hover > a:before {
 +
      top:29px;
 +
      height:0
 +
  }
 +
 +
  #cssmenu ul ul {
 +
      position:fixed;
 +
      left:-9999px;
 +
      top: 75px;
 +
  }
 +
 +
  #cssmenu ul ul li {
 +
      height:0;
 +
      line-height: 1;
 +
/*      top: -6px;
 +
      left: -29px;*/
 +
      -webkit-transition:all .25s ease;
 +
      -ms-transition:all .25s ease;
 +
      background: #fff;
 +
      transition: all .25s ease;
 +
      border-bottom: 1px solid #999;
 +
      border-left: 1px solid #999;
 +
      border-right: 1px solid #999;
 +
  }
 +
 +
  #cssmenu ul ul li:hover {
 +
      background-color: #DCDCDC;
 +
  }
 +
 +
  #cssmenu ul ul li.has-sub:hover {
 +
      background-color: #DCDCDC !important;
 +
  }
 +
 +
  #cssmenu li:hover > ul {
 +
      left:auto
 +
  }
 +
 +
  #cssmenu li:hover > ul > li {
 +
      height:35px
 +
  }
 +
 +
/*  #cssmenu ul > li > ul > li > ul:before {
 +
      position: absolute;
 +
      top: 170px;
 +
      right: -413px;
 +
      display: none;
 +
  }*/
 +
 +
/*  #cssmenu ul > li > ul > li > ul {
 +
      border-top: 1px solid #999;
 +
      position: absolute;
 +
      top: 170px;
 +
      right: -413px;
 +
      display: block;
 +
  }*/
 +
 +
/*  #cssmenu ul ul ul:before {
 +
      display: none;
 +
  }*/
 +
 +
/*  #cssmenu ul ul ul:after {
 +
      display: block;
 +
      position: absolute;
 +
      right: 300px;
 +
      top: 70px;
 +
  }*/
 +
 +
/*  #cssmenu ul ul {
 +
      display: block;
 +
      position: fixed;
 +
      right: 377px;
 +
      top: 110px;
 +
  }*/
 +
 +
/*  #cssmenu ul ul ul li {
 +
      display: block;
 +
  }*/
 +
 +
  #cssmenu ul ul li a {
 +
      border-bottom:1px solid rgba(150,150,150,0.15);
 +
      padding:11px 15px;
 +
      width:170px;
 +
      font-size:12px;
 +
      text-decoration:none;
 +
      color:#ddd;
 +
      font-weight:400;
 +
  }
 +
 +
  #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {
 +
      border-bottom:0
 +
  }
 +
 +
  #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover {
 +
      color:#fff
 +
  }
 +
 +
  #cssmenu ul ul li.has-sub > a:after {
 +
      position:absolute;
 +
      top:16px;
 +
      right:11px;
 +
      display:block;
 +
      width:8px;
 +
      height:2px;
 +
      background:#363636;
 +
      content:''
 +
  }
 +
 +
  #cssmenu ul ul li.has-sub > a:before {
 +
      position:absolute;
 +
      top:13px;
 +
      right:14px;
 +
      display:block;
 +
      width:2px;
 +
      height:8px;
 +
      background:#363636;
 +
      content:'';
 +
      -webkit-transition:all .25s ease;
 +
      -ms-transition:all .25s ease;
 +
      transition:all .25s ease
 +
  }
 +
 +
  #cssmenu ul ul > li.has-sub:hover > a:before {
 +
      top:17px;
 +
      height:0
 +
  }
 +
 +
  #cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
 +
      background:#363636;
 +
  }
 +
 +
  #cssmenu ul ul ul li.active a {
 +
      border-left:1px solid #333
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a {
 +
      border-top:1px solid #333
 +
  }
 +
 +
@media screen and (min-width: 1168px) {
 +
  /*#cssmenu > ul > li > ul > li > ul {
 +
      position: absolute;
 +
  }*/
 +
 +
  /*#cssmenu ul > li > ul > li.has-sub > ul {
 +
      position: fixed;
 +
      top: 150px;
 +
  }*/
 +
 +
  /*#cssmenu ul > li > ul > li.has-sub:hover > ul {
 +
      position: fixed;
 +
      display: block;
 +
      top: 80px;
 +
 +
  }*/
 +
 +
  #cssmenu ul ul ul a:before{
 +
      display: none;
 +
      position: absolute;
 +
      left: -9999px;
 +
      top: 20px;
 +
  }
 +
 +
  #cssmenu ul ul ul a:after {
 +
      display: block;
 +
      position: absolute;
 +
      left: -9999px;
 +
      top: 20px;
 +
  }
 +
}
 +
 +
@media screen and (max-width:1168px){
 +
 +
/*  .logo-header-custom {
 +
      position:absolute;
 +
      top:0;
 +
      left: 0;
 +
      width:100%;
 +
      height:46px;
 +
      text-align:center;
 +
      padding:10px 0 0 0 ;
 +
      float:none
 +
  }*/
 +
 +
  .logo-header-custom2 {
 +
      display:none
 +
  }
 +
 
 +
  nav {
 +
      width:100%;
 +
  }
 +
 +
  #cssmenu {
 +
      width:100%;
 +
  }
 +
 +
  #cssmenu ul {
 +
      width:100%;
 +
      display:none;
 +
      margin-left: 0px;
 +
      margin-top: 20px;
 +
      /*overflow-y: scroll;*/
 +
  }
 +
 +
  #cssmenu ul li {
 +
      width:100%;
 +
      border-top:1px solid #444;
 +
      border-bottom: 1px solid #444;
 +
  }
 +
 +
  #cssmenu ul li,#cssmenu ul li a {
 +
      line-height: 1;
 +
  }
 +
 +
  #cssmenu ul li:hover {
 +
      background:#6D6D6D;
 +
  }
 +
 +
  #cssmenu ul ul li,#cssmenu li:hover > ul > li {
 +
      height:auto
 +
  }
 +
 +
  #cssmenu ul li a,#cssmenu ul ul li a {
 +
      width:100%;
 +
      border-bottom:0
 +
  }
 +
 +
  #cssmenu > ul > li {
 +
      float:none
 +
  }
 +
 +
  #cssmenu ul ul li a {
 +
      padding-left:25px
 +
  }
 +
 +
  #cssmenu ul ul li {
 +
      background:#DCDCDC!important;
 +
  }
 +
 +
  #cssmenu ul ul li:hover {
 +
      background:#6D6D6D!important
 +
  }
 +
 +
  #cssmenu ul ul ul li a {
 +
      padding-left:35px
 +
  }
 +
 +
  #cssmenu ul ul li a {
 +
      color:#ddd;
 +
      background:none
 +
  }
 +
 +
  #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a {
 +
      color:#ddd
 +
  }
 +
 +
  #cssmenu ul ul,#cssmenu ul ul ul {
 +
      position:initial;
 +
      left:0;
 +
      width:100%;
 +
      margin:0;
 +
      text-align:left
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before {
 +
      display:none
 +
  }
 +
 +
  #cssmenu #head-mobile {
 +
      display:block;
 +
      padding:23px;
 +
      color:#ddd;
 +
      font-size:12px;
 +
      font-weight:700
 +
  }
 +
 +
  .button-custom {
 +
      width:55px;
 +
      height:46px;
 +
      position:absolute;
 +
      right:0;
 +
      top:8px;
 +
      cursor:pointer;
 +
      z-index: 12399994;
 +
  }
 +
 +
  .button-custom:after {
 +
      position:absolute;
 +
      top:22px;
 +
      right:20px;
 +
      display:block;
 +
      height:8px;
 +
      width:20px;
 +
      border-top:2px solid #363636;
 +
      border-bottom:2px solid #363636;
 +
      content:''
 +
  }
 +
 +
  .button-custom:before {
 +
      -webkit-transition:all .3s ease;-ms-transition:all .3s ease;
 +
      transition:all .3s ease;position:absolute;
 +
      top:16px;
 +
      right:20px;
 +
      display:block;
 +
      height:2px;
 +
      width:20px;
 +
      background:#363636;
 +
      content:''
 +
  }
 +
 +
  .button-custom.menu-opened:after {
 +
      -webkit-transition:all .3s ease;-ms-transition:all .3s ease;transition:all .3s ease;top:23px;
 +
      border:0;height:2px;
 +
      width:19px;
 +
      background:#363636;
 +
      -webkit-transform:rotate(45deg);
 +
      -moz-transform:rotate(45deg);
 +
      -ms-transform:rotate(45deg);
 +
      -o-transform:rotate(45deg);
 +
      transform:rotate(45deg)
 +
  }
 +
 +
  .button-custom.menu-opened:before {
 +
      top:23px;
 +
      background:#363636;
 +
      width:19px;
 +
      -webkit-transform:rotate(-45deg);
 +
      -moz-transform:rotate(-45deg);
 +
      -ms-transform:rotate(-45deg);
 +
      -o-transform:rotate(-45deg);
 +
      transform:rotate(-45deg)
 +
  }
 +
 +
  #cssmenu .submenu-button-custom {
 +
      position:absolute;
 +
      z-index:99;
 +
      right:0;
 +
      top:0;
 +
      display:block;
 +
      border-left:1px solid #444;
 +
      height:46px;
 +
      width:46px;
 +
      cursor:pointer
 +
  }
 +
 +
  #cssmenu .submenu-button-custom.submenu-opened {
 +
/*      background:#262626*/
 +
  }
 +
 +
  #cssmenu ul ul .submenu-button-custom {
 +
      height:34px;
 +
      width:34px
 +
  }
 +
 +
  #cssmenu .submenu-button-custom:after {
 +
      position:absolute;
 +
      top:22px;
 +
      right:19px;
 +
      width:8px;
 +
      height:2px;
 +
      display:block;
 +
      background:#363636;
 +
      content:''
 +
  }
 +
 +
  #cssmenu ul ul .submenu-button-custom:after {
 +
      top:15px;
 +
      right:13px
 +
  }
 +
 +
  #cssmenu .submenu-button-custom.submenu-opened:after {
 +
      background:#fff
 +
  }
 +
 +
  #cssmenu .submenu-button-custom:before {
 +
      position:absolute;
 +
      top:19px;
 +
      right:22px;
 +
      display:block;
 +
      width:2px;
 +
      height:8px;
 +
      background:#363636;
 +
      content:''
 +
  }
 +
 +
  #cssmenu ul ul .submenu-button-custom:before {
 +
      top:12px;
 +
      right:16px
 +
  }
 +
 +
  #cssmenu .submenu-button-custom.submenu-opened:before {
 +
      display:none
 +
  }
 +
 +
  #cssmenu ul ul ul li.active a {
 +
      border-left:none
 +
  }
 +
 +
  #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a {
 +
      border-top:none
 +
  }
 +
 +
}
 +
</style>
 +
 +
<script type="text/javascript">
 +
  (function($) {
 +
$.fn.menumaker = function(options) { 
 +
var cssmenu = $(this), settings = $.extend({
 +
  format: "dropdown",
 +
  sticky: false
 +
}, options);
 +
return this.each(function() {
 +
  $(this).find(".button-custom").on('click', function(){
 +
    $(this).toggleClass('menu-opened');
 +
    var mainmenu = $(this).next('ul');
 +
    if (mainmenu.hasClass('open')) {
 +
      mainmenu.slideToggle().removeClass('open');
 +
    }
 +
    else {
 +
      mainmenu.slideToggle().addClass('open');
 +
      if (settings.format === "dropdown") {
 +
        mainmenu.find('ul').show();
 +
      }
 +
    }
 +
  });
 +
  cssmenu.find('li ul').parent().addClass('has-sub');
 +
multiTg = function() {
 +
    cssmenu.find(".has-sub").prepend('<span class="submenu-button-custom"></span>');
 +
    cssmenu.find('.submenu-button-custom').on('click', function() {
 +
      $(this).toggleClass('submenu-opened');
 +
      if ($(this).siblings('ul').hasClass('open')) {
 +
        $(this).siblings('ul').removeClass('open').slideToggle();
 +
      }
 +
      else {
 +
        $(this).siblings('ul').addClass('open').slideToggle();
 +
      }
 +
    });
 +
  };
 +
  if (settings.format === 'multitoggle') multiTg();
 +
  else cssmenu.addClass('dropdown');
 +
  if (settings.sticky === true) cssmenu.css('position', 'fixed');
 +
resizeFix = function() {
 +
  var mediasize = 1000;
 +
    if ($( window ).width() > mediasize) {
 +
      cssmenu.find('ul').show();
 +
    }
 +
    if ($(window).width() <= mediasize) {
 +
      cssmenu.find('ul').hide().removeClass('open');
 +
    }
 +
  };
 +
  resizeFix();
 +
  return $(window).on('resize', resizeFix);
 +
});
 +
  };
 +
})(jQuery);
 +
 +
(function($){
 +
$(document).ready(function(){
 +
$("#cssmenu").menumaker({
 +
  format: "multitoggle"
 +
});
 +
});
 +
})(jQuery);
 +
 +
</script>
 +
 +
 +
<header>
 +
<nav id='cssmenu' style="position: fixed;">
 +
<div class="logo-header-custom"><a href="https://2017.igem.org/Team:UCSC"><img class="logo" src="https://static.igem.org/mediawiki/2017/f/fa/Logo_click2.png" height="60" width="auto">
 +
                </a></div>
 +
<div id="head-mobile"></div>
 +
<div class="button-custom"></div>
 +
<ul>
 +
  <li><a href="https://2017.igem.org/Team:UCSC/Judging">JUDGING</a></li>
 +
  <li><a href='https://2017.igem.org/Team:UCSC/Notebook'>NOTEBOOK</a></li>
 +
  <li><a href='https://2017.igem.org/Team:UCSC/Moving-Forward'>MOVING FORWARD</a>
 +
      <ul>
 +
        <li><a href='https://2017.igem.org/Team:UCSC/Model-Organism'>MODEL ORGANISM</a></li>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/Impact">IMPACT</a></li>
 +
      </ul>
 +
  </li>
 +
  <li><a href="https://2017.igem.org/Team:UCSC/Integrated-Human-Practices">HUMAN PRACTICES</a>
 +
      <ul>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/Integrated-Human-Practices">INTEGRATED HUMAN PRACTICES</a></li>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/Safety">SAFETY</a></li>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/Collaborations">COLLABORATIONS</a></li>
 +
        <!-- <li><a href="https://2017.igem.org/Team:UCSC/Outreach">OUTREACH</a></li> -->
 +
        <li><a href="https://2017.igem.org/Team:UCSC/HP/Silver">SILVER</a></li>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/HP/Gold_Integrated">GOLD INTEGRATED</a></li>
 +
      </ul>
 +
  </li>
 +
  <li><a href="https://2017.igem.org/Team:UCSC/Project">PROJECT</a>
 +
      <ul>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/Project">THE PROJECT</a></li>
 +
        <li><a href="#">METABOLIC ENGINEERING</a>
 +
            <ul>
 +
              <li><a href="https://2017.igem.org/Team:UCSC/Acetaminophen">ACETAMINOPHEN</a></li>
 +
              <li><a href="https://2017.igem.org/Team:UCSC/B-12">VITAMIN B12</a></li>
 +
            </ul>
 +
        </li>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/Model">MODELING</a></li>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/Implementation">IMPLEMENTATION</a></li>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/Results">RESULTS</a></li>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/InterLab">INTERLAB STUDY</a></li>
 +
      </ul>
 +
  </li>
 +
  <li><a href="https://2017.igem.org/Team:UCSC/Team1">TEAM</a>
 +
      <ul>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/Team1">MEET THE TEAM</a></li>
 +
        <li><a href="https://2017.igem.org/Team:UCSC/Attributions">ATTRIBUTIONS</a></li>
 +
      </ul>
 +
  </li>
 +
  <li><a href='https://2017.igem.org/Team:UCSC'>HOME</a></li>
 +
</ul>
 +
</nav>
 +
</header>
 
</html>
 
</html>
  
−
{{UCSC-Footer}}
+
{{Scroll}}

Revision as of 17:34, 21 September 2017