Difference between revisions of "Team:UCSC"

(Undo revision 130730 by Evan pepper (talk))
Line 1: Line 1:
{{UCSC-Styles}}
+
<!--{{UCSC-Header}}-->
 +
{{Header_Test}}
  
 
<html>
 
<html>
 +
  <head>
 +
      <meta name="UCSC IGEM" content="The legendary, UCSC igem Science Superheros">
 +
        <title>Santa Cruz IGEM</title>
 +
  </head>
  
   <!-- External scripts -->
+
<div id="page">
 +
<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>
  
{{Scroll}}
+
{{UCSC-Footer}}

Revision as of 17:36, 21 September 2017

Santa Cruz IGEM