Difference between revisions of "Team:UCSC/Judging"

Line 1: Line 1:
{{UCSC-Header}}
+
{{UCSC-Styles}}
  
 
<html>
 
<html>
  
<script src="https://use.typekit.net/hii0ztv.js"></script>
+
  <!-- External scripts -->
<script>try{Typekit.load({ async: true });}catch(e){}</script>
+
  
<style>
+
  <!-- 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'>
  
.pageflow {
 
  margin-right: 0px;
 
  margin-left: 0px;
 
  margin-top:30px;
 
  background: honeydew;
 
}
 
  
h1 {
+
   <!-- For mobile friendly version of website. -->
   font-family: 'objektiv-mk1'!important;
+
   <head>
   font-size: 300%; /*!important*/
+
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
   font-weight: 300 !important;
+
  </head>
    width: 80%;
+
}
+
  
h2 {
+
   <!-- Functionallity and behaviour JS -->
   font-family: 'objektiv-mk1' !important;
+
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
   font-weight: 300 !important;
+
   <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
   font-size: 275%;
+
  text-align: center;
+
}
+
  
#page {
+
  <!-- Necessary for nav bar header-->
   background: honeydew;
+
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
   padding: 50px 0px;
+
   <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> -->
}
+
  
.proj-button {
+
  <!-- TypeKit Fonts (BW) --> 
    position: relative;
+
  <script src="https://use.typekit.net/hii0ztv.js"></script>
    width: 10%;
+
  <script>try{Typekit.load({ async: true });}catch(e){}</script>
}
+
  
.proj-button-image {
+
<style type="text/css">
  opacity: 1;
+
  * {
  display: inline-block;
+
      margin:0;
  width: 16%;
+
      padding:0;
  height: auto;
+
      text-decoration:none
  transition: .5s ease;
+
  }
  backface-visibility: hidden;
+
}
+
  
.proj-button-desc {
+
  body {
  transition: .5s ease;
+
      background:#555;
  opacity: 0;
+
  }
  position: absolute;
+
  top: 95px;
+
  left: 49%;
+
  background: transparent;
+
  transform: translate(-50%, -50%);
+
  -ms-transform: translate(-50%, -50%)
+
}
+
  
.proj-button:hover .proj-button-image {
+
  header {
  opacity: 0.3;
+
      z-index: 9999;
}
+
      position:relative;
 +
      width:100%;
 +
      background:#333;
 +
  }
  
.proj-button:hover .proj-button-desc {
+
  .logo-header-custom {
  opacity: 0.6;
+
      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%
 +
  }
  
.text {
+
  .logo-header-custom a {
  background-color: transparent;
+
      color:#6DDB07;
  color: black;
+
  }
  font-size: 20px;
+
  font-weight: bold;
+
  padding: 16px 32px;
+
}
+
  
.pagagraph {
+
  nav {
  font-family: 'objektiv-mk1' !important;
+
      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;
 +
      margin-bottom: -1px;
 +
      display:block;
 +
      position:relative;
 +
      -webkit-box-sizing:border-box;
 +
      -moz-box-sizing:border-box;
 +
      box-sizing:border-box
 +
  }
  
p {
+
  #cssmenu:after,#cssmenu > ul:after {
  font-family: 'objektiv-mk1' !important;
+
      content:".";
  /*margin-left: 200px !important;
+
      display:block;
  margin-right: 200px !important;*/
+
      clear:both;
  /*width: 70%;*/
+
      visibility:hidden;
  font-size: large !important;
+
      line-height:0;
}
+
      height:0
 +
  }
  
.firstword {
+
  #cssmenu #head-mobile {
  font-family: 'objektiv-mk1' !important;
+
      display:none
  font-size: 100px;
+
  }
}
+
  
.titleimg {
+
  #cssmenu {
  vertical-align: middle;
+
      font-family:"Objektiv-mk1";
  width: 40%;
+
      background: #fff;
}
+
      top: 16px;
 +
  }
  
.titlebox {
+
  #cssmenu > ul > li {
  margin-left: 200px !important;
+
      float:right;
}
+
  }
  
.color-change-box {
+
  #cssmenu > ul > li > a {
height: 100px;
+
      padding:17px;
width: 100%;
+
      font-size:14px;
margin-bottom: -22.3px;
+
      letter-spacing:1px;
margin-top: 50px;
+
      text-decoration:none;
}
+
      color:#333;
 +
      font-weight:300;
 +
  }
  
/*ul {
+
  #cssmenu > ul > li:hover > a,#cssmenu ul li.active a {
  list-style: none;
+
      color:#fff !important;
}
+
  }
  
ul li:before {
+
  #cssmenu ul li:hover {
    content: url('https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png');
+
      color: white !important;
}*/
+
  }
  
.requirement-title {
+
  #cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover {
font-family: 'objektiv-mk1';
+
      background-color:#50A500!important;
font-weight: 600;
+
      -webkit-transition:background .3s ease;
font-size: 200%;
+
      -ms-transition:background .3s ease;
}
+
      transition:background .3s ease;
 +
  }
  
.requirements-subtitle {
+
  #cssmenu > ul > li.has-sub > a {
font-family: 'objektiv-mk1';
+
      padding-right:30px
font-weight: 600;
+
  }
font-size: 150%;
+
}
+
  
.requirements-description {
+
  #cssmenu > ul > li.has-sub > a:after {
font-family: 'objektiv-mk1';
+
      position:absolute;
font-size: 90%;
+
      top:28px;
}
+
      right:11px;
 +
      width:8px;
 +
      height:2px;
 +
      display:block;
 +
      background:#363636;
 +
      content:''
 +
  }
  
.col-sm-10 {
+
  #cssmenu > ul > li.has-sub > a:before {
margin-top: 12px !important;
+
      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
 +
  }
  
.col-sm-9 {
+
  #cssmenu > ul > li.has-sub:hover > a:before {
margin-top: 10px !important;
+
      top:29px;
}
+
      height:0
 +
  }
  
.checkmark-box {
+
  #cssmenu ul ul {
width: 120%;
+
      position:fixed;
}
+
      left:-9999px;
 +
      top: 75px;
 +
  }
  
#bronze {
+
  #cssmenu ul ul li {
width: 100%;
+
      height:0;
height: 0px;
+
      line-height: 1;
background-color: honeydew;
+
      -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;
 +
  }
  
#silver {
+
  #cssmenu ul ul li:hover {
width: 100%;
+
      background-color: #DCDCDC;
height: 0px;
+
  }
background-color: #f08b38;
+
}
+
  
#gold {
+
  #cssmenu ul ul li.has-sub:hover {
width: 100%;
+
      background-color: #DCDCDC !important;
height: 0px;
+
  }
background-color: #c2c2c2;
+
}
+
  
.medal {
+
  #cssmenu li:hover > ul {
width: 26%;
+
      left:auto
position: relative;
+
  }
text-decoration: none !important;
+
}
+
  
.proj-button-desc:hover .medal {
+
  #cssmenu li:hover > ul > li {
opacity: 0.7;
+
      height:35px
}
+
  }
  
.medal_image_button {
+
  #cssmenu ul ul li a {
display: inline-block;
+
      border-bottom:1px solid rgba(150,150,150,0.15);
width: 26%;
+
      padding:11px 15px;
}
+
      width:200px;
 +
      font-size:11px;
 +
      text-decoration:none;
 +
      color:#333;
 +
      font-weight:300;
 +
  }
  
.medal_image_button:hover {
+
  #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {
opacity: 0.7;
+
      border-bottom:0
}
+
  }
  
.medal_button_desc {
+
  #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover {
  transition: .5s ease;
+
      color:#fff
  opacity: 0;
+
  }
  position: absolute;
+
  top: 100px;
+
  left: 50%;
+
  background: transparent;
+
  transform: translate(-50%, -50%);
+
  -ms-transform: translate(-50%, -50%);
+
}
+
  
/*.medal_button_desc:hover {
+
  #cssmenu ul ul li.has-sub > a:after {
  opacity: 1;
+
      position:absolute;
}*/
+
      top:16px;
 +
      right:11px;
 +
      display:block;
 +
      width:8px;
 +
      height:2px;
 +
      background:#363636;
 +
      content:''
 +
  }
  
/*.medal_image_button:hover .medal_button_desc .overlap_medal_button_text {
+
  #cssmenu ul ul li.has-sub > a:before {
opacity: 0.8;
+
      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
 +
  }
  
.medal:hover .proj-button-desc {
+
  #cssmenu ul ul > li.has-sub:hover > a:before {
opacity: 0.7;
+
      top:17px;
}
+
      height:0
 +
  }
  
.overlap_medal_button_text {
+
  #cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
  background-color: transparent;
+
      background:#363636;
  color: black;
+
  }
  font-size: 20px;
+
  font-family: "Objektiv-mk1" !important;
+
  font-weight: 600 !important;
+
  padding: 16px 32px;
+
}
+
  
.overlap-button-text {
+
  #cssmenu ul ul ul li.active a {
  background-color: transparent;
+
      border-left:1px solid #333
  color: black;
+
  }
  font-size: 20px;
+
  font-family: "Objektiv-mk1" !important;
+
  font-weight: 600 !important;
+
  padding: 16px 32px;
+
}
+
  
.title_image_box {
+
  #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a {
width: 100%;
+
      border-top:1px solid #333
height: 100%;
+
  }
margin: 0px;
+
}
+
  
@media (min-width: 1144px) {
+
@media screen and (min-width: 1208px) {
  .container {
+
    width: 70% !important;
+
  }
+
  
  .sub-container {
+
  #cssmenu ul ul li {
  width: 100%;
+
      left: -28px;
  margin-left: 50px;
+
  }
  }
+
  
  .text-container {
+
  #cssmenu ul ul li a:hover {
    width: 60%;
+
      color: white !important;
    padding-left: 15px;
+
      background-color: #1B4900 !important;
    padding-right: 15px;
+
  }
  }
+
  .titlebox {
+
    width: 80%;
+
  }
+
  figcaption {
+
    font-size: 16px;
+
  }
+
  
  .row {
+
  #cssmenu ul ul ul li {
  margin-top: 20px;
+
      position: relative;
  }
+
      left: 171px !important;
}
+
      top: 34px;
 +
  }
  
@media (max-width: 1144px) {
 
  
.container {
+
  #cssmenu ul ul ul a:before{
width: 80% !important;
+
      display: none;
}
+
      position: absolute;
 +
      left: -9999px;
 +
      top: 20px;
 +
  }
  
.sub-container {
+
  #cssmenu ul ul ul a:after {
  width: 100%;
+
       display: block;
  margin-left: 50px;
+
  }
+
 
+
    .titlebox {
+
      margin-left: auto !important;
+
    }
+
 
+
  .text-container {
+
    width: 80%;
+
    padding-left: 15px;
+
    padding-right: 15px;
+
  }
+
 
+
  p {
+
    font-family: 'objektiv-mk1' !important;
+
    margin-left: 20px !important;
+
    margin-right: 20px !important;
+
    font-size: medium !important;
+
  }
+
 
+
  .col-sm-9 {
+
margin-top: 7px !important;
+
}
+
 
+
}
+
 
+
@media (max-width: 768px) {
+
 
+
 
+
.container {
+
width: 90% !important;
+
}
+
 
+
.sub-container {
+
  width: 80%;
+
  }
+
 
+
  .proj-button-image {
+
      opacity: 1;
+
       display: inline-block;
+
      width: 40%;
+
      height: auto;
+
      transition: .5s ease;
+
      backface-visibility: hidden;
+
    }
+
 
+
    .proj-button-desc {
+
      transition: .5s ease;
+
      opacity: 1;
+
 
       position: absolute;
 
       position: absolute;
      top: 88px;
+
       left: -9999px;
       left: 49%;
+
       top: 20px;
      transform: translate(-50%, -50%);
+
  }
       -ms-transform: translate(-50%, -50%)
+
  }
+
 
+
  .overlap-button-text {
+
  background-color: transparent;
+
  color: black;
+
  font-size: 15px;
+
  font-family: "Objektiv-mk1" !important;
+
  font-weight: 600 !important;
+
  padding: 16px 32px;
+
  }
+
 
+
  .checkmark-box {
+
width: 10%;
+
 
}
 
}
  
  h1 {
+
@media screen and (min-width: 200px) and (max-width:1208px){
      font-family: 'objektiv-mk1'; /*!important*/
+
      font-size: 250%; /*!important*/
+
  }
+
  
  h2 {
+
  .logo-header-custom2 {
      font-family: 'objektiv-mk1'; /*!important*/
+
       display:none
       font-size: 35px; /*!important*/
+
  }
  }
+
  
  .text-container {
+
  header {
    width: 80%;
+
      display: block;
  }
+
      z-index: 999999;
 +
  }
 +
 
 +
  nav {
 +
      width:100%;
 +
      z-index: 999999;
 +
  }
  
  .col-sm-9 {
+
  #cssmenu {
margin-top: -25px !important;
+
      display: block;
margin-left: 40px;
+
      width:100%;
 +
      z-index: 999999;
 +
  }
  
}
+
  #cssmenu ul {
 +
      z-index: 9999;
 +
      width:100%;
 +
      display:none;
 +
      margin-left: 0px;
 +
      margin-top: 20px;
 +
  }
  
.col-sm-10 {
+
  #cssmenu ul li {
margin-top: -30px !important;
+
      width:100%;
margin-left: 60px;
+
      border-top:1px solid #444;
 +
      border-bottom: 1px solid #444;
 +
  }
  
}
+
  #cssmenu ul li,#cssmenu ul li a {
 +
      line-height: 1;
 +
  }
  
.medal_image_button {
+
  #cssmenu ul li:hover {
width: 32%;
+
      color: #fff !important;
}
+
      background:#1B4900;
 +
  }
  
.title_image_box {
+
  #cssmenu ul ul li,#cssmenu li:hover > ul > li {
width: 100%;
+
      height:auto
height: 100%;
+
  }
margin-top: -40px;
+
}
+
  
/*.medal {
+
  #cssmenu ul li a,#cssmenu ul ul li a {
width: 32%;
+
      width:100%;
}*/
+
      border-bottom:0
}
+
  }
  
/*  p {
+
  #cssmenu > ul > li {
    margin-left: 10px !important;
+
      float:none;
    margin-right: 10px !important;
+
  }
  }
+
}*/
+
  
@media (max-width: 576px) {
+
  #cssmenu ul ul li a {
 +
      padding-left:25px
 +
  }
  
.checkmark-box {
+
  #cssmenu ul ul li {
width: 12%;
+
      background:#DCDCDC!important;
}
+
  }
  
.col-sm-9 {
+
  #cssmenu li a:hover {
margin-top: -22px !important;
+
      color: #fff !important;
margin-left: 40px;
+
  }
}
+
  
.col-sm-10 {
+
  #cssmenu ul ul li:hover {
margin-top: -35px !important;
+
      color: #fff !important;
margin-left: 50px;
+
      background:#1B4900!important;
}
+
  }
  
.requirement-title {
+
  #cssmenu ul ul ul li a {
font-family: 'objektiv-mk1';
+
      padding-left:35px
font-weight: 600;
+
  }
font-size: 130%;
+
}
+
  
.requirements-subtitle {
+
  #cssmenu ul ul li a {
font-family: 'objektiv-mk1';
+
      color:#ddd;
font-weight: 600;
+
      background:none
font-size: 120%;
+
  }
}
+
  
.requirements-description {
+
  #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a {
font-family: 'objektiv-mk1';
+
      color:#ddd
font-size: 90%;
+
  }
}
+
  
  .proj-button-image {
+
  #cssmenu ul ul,#cssmenu ul ul ul {
       opacity: 1;
+
       position:initial;
       display: inline-block;
+
       left:0;
       width: 60%;
+
       width:100%;
       height: auto;
+
       margin:0;
       transition: .5s ease;
+
       text-align:left
      backface-visibility: hidden;
+
  }
    }
+
  
    .proj-button-desc {
+
  #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 {
      transition: .5s ease;
+
       display:none
      opacity: 1;
+
  }
      position: absolute;
+
      top: 62px;
+
      left: 49%;
+
      transform: translate(-50%, -50%);
+
       -ms-transform: translate(-50%, -50%)
+
  }
+
  
  .overlap-button-text {
+
  #cssmenu #head-mobile {
  background-color: transparent;
+
      /*float: left;*/
  color: black;
+
      display:block;
  font-size: 10px;
+
      padding:23px;
  font-family: "Objektiv-mk1" !important;
+
      color:#ddd;
  font-weight: 600 !important;
+
      font-size:12px;
  padding: 16px 32px;
+
      font-weight:700
  }
+
  }
  
  .sub-container {
+
  .button-custom {
  margin-left: 20px;
+
      width:55px;
  width: 90%;
+
      height:46px;
  }
+
      position:absolute;
 +
      right:0;
 +
      top:8px;
 +
      cursor:pointer;
 +
      z-index: 12399994;
 +
  }
  
  .firstword {
+
  .button-custom:after {
    font-family: 'objektiv-mk1' !important;
+
      position:absolute;
    font-size: 70px;
+
      top:22px;
  }
+
      right:20px;
 +
      display:block;
 +
      height:8px;
 +
      width:20px;
 +
      border-top:2px solid #363636;
 +
      border-bottom:2px solid #363636;
 +
      content:''
 +
  }
  
  .titleimg {
+
  .button-custom:before {
    vertical-align: middle;
+
      -webkit-transition:all .3s ease;
    width: 90%;
+
      -ms-transition:all .3s ease;
  }
+
      transition:all .3s ease;
 +
      position:absolute;
 +
      top:16px;
 +
      right:20px;
 +
      display:block;
 +
      height:2px;
 +
      width:20px;
 +
      background:#363636;
 +
      content:''
 +
  }
  
  .text-container {
+
  .button-custom.menu-opened:after {
    width: 100%;
+
      -webkit-transition:all .3s ease;
    margin-left: -15px;
+
      -ms-transition:all .3s ease;
    margin-right: -15px;
+
      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)
 +
  }
  
  p {
+
  .button-custom.menu-opened:before {
    font-family: 'objektiv-mk1' !important;
+
      top:23px;
    margin-left: 10px !important;
+
      background:#363636;
    margin-right: 10px !important;
+
      width:19px;
    font-size: small !important;
+
      -webkit-transform:rotate(-45deg);
  }
+
      -moz-transform:rotate(-45deg);
 +
      -ms-transform:rotate(-45deg);
 +
      -o-transform:rotate(-45deg);
 +
      transform:rotate(-45deg)
 +
  }
  
  .row {
+
  #cssmenu .submenu-button-custom {
  margin-bottom: 20px;
+
      position:absolute;
  margin-top: 20px;
+
      z-index:99;
  }
+
      right:0;
 +
      top:0;
 +
      display:block;
 +
      border-left:1px solid #444;
 +
      height:46px;
 +
      width:46px;
 +
      cursor:pointer
 +
  }
  
  .title_image_box {
+
  #cssmenu .submenu-button-custom.submenu-opened {
width: 100%;
+
height: 100%;
+
margin-top: -60px;
+
}
+
}
+
  
 +
  }
  
@media (max-width: 480px) {
+
  #cssmenu ul ul .submenu-button-custom {
 +
      height:34px;
 +
      width:34px
 +
  }
  
.proj-button-desc {
+
  #cssmenu .submenu-button-custom:after {
       transition: .5s ease;
+
       position:absolute;
       opacity: 1;
+
       top:22px;
       position: absolute;
+
       right:19px;
       top: 55px;
+
       width:8px;
       left: 49%;
+
       height:2px;
       transform: translate(-50%, -50%);
+
       display:block;
       -ms-transform: translate(-50%, -50%)
+
       background:#363636;
  }
+
      content:''
 +
  }
  
  .overlap-button-text {
+
  #cssmenu ul ul .submenu-button-custom:after {
  background-color: transparent;
+
      top:15px;
  color: black;
+
      right:13px
  font-size: 10px;
+
  }
  font-family: "Objektiv-mk1" !important;
+
  font-weight: 600 !important;
+
  padding: 16px 32px;
+
  }
+
  
  .title_image_box {
+
  #cssmenu .submenu-button-custom.submenu-opened:after {
width: 100%;
+
      background:#fff
height: 100%;
+
  }
margin-top: -70px;
+
}
+
  
}
+
  #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
 +
  }
  
@media (max-width: 380px) {
+
  #cssmenu .submenu-button-custom.submenu-opened:before {
 +
      display:none
 +
  }
  
.proj-button-desc {
+
  #cssmenu ul ul ul li.active a {
       transition: .5s ease;
+
       border-left:none
      opacity: 1;
+
  }
      position: absolute;
+
      top: 238%;
+
      left: 49%;
+
      transform: translate(-50%, -50%);
+
      -ms-transform: translate(-50%, -50%)
+
  }
+
  
  .overlap-button-text {
+
  #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a {
  background-color: transparent;
+
      border-top:none
  color: black;
+
  }
  font-size: 9px;
+
  font-family: "Objektiv-mk1" !important;
+
  font-weight: 600 !important;
+
  padding: 16px 32px;
+
  }
+
}
+
  
@media (max-width: 350px) {
 
 
.checkmark-box {
 
width: 12%;
 
}
 
 
.col-sm-9 {
 
margin-top: -25px !important;
 
margin-left: 40px;
 
}
 
 
.col-sm-10 {
 
margin-top: -35px !important;
 
margin-left: 50px;
 
}
 
 
.requirement-title {
 
font-family: 'objektiv-mk1';
 
font-weight: 600;
 
font-size: 115%;
 
}
 
 
.requirements-subtitle {
 
font-family: 'objektiv-mk1';
 
font-weight: 600;
 
font-size: 112%;
 
}
 
 
.requirements-description {
 
font-family: 'objektiv-mk1';
 
font-size: 90%;
 
}
 
 
.container {
 
width: 100% !important;
 
}
 
 
.sub-container {
 
  margin-left: 5px;
 
  width: 100%;
 
  }
 
 
  .proj-button-desc {
 
      transition: .5s ease;
 
      opacity: 1;
 
      position: absolute;
 
      top: 238%;
 
      left: 48%;
 
      transform: translate(-50%, -50%);
 
      -ms-transform: translate(-50%, -50%)
 
  }
 
 
  .overlap-button-text {
 
  background-color: transparent;
 
  color: black;
 
  font-size: 8px;
 
  font-family: "Objektiv-mk1" !important;
 
  font-weight: 600 !important;
 
  padding: 16px 32px;
 
  }
 
 
}
 
}
 
@media (max-width: 330px) {
 
 
.proj-button-desc {
 
      transition: .5s ease;
 
      opacity: 1;
 
      position: absolute;
 
      top: 230%;
 
      left: 48%;
 
      transform: translate(-50%, -50%);
 
      -ms-transform: translate(-50%, -50%)
 
  }
 
 
}
 
}
 
 
 
 
</style>
 
</style>
  
 
<script type="text/javascript">
 
<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 = 1208;
 +
    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);
  
// $("button").click(function() {
+
(function($){
//    $('html,body').animate({
+
$(document).ready(function(){
//        scrollTop: $("#bronze").offset().top},'slow');
+
$("#cssmenu").menumaker({
// });
+
  format: "multitoggle"
 
+
});
$('a.medal_image_button').click(function () {
+
});
        $('html, body').animate({scrollTo: 700}, 11700);
+
})(jQuery);
          return false;
+
    });
+
  
 
</script>
 
</script>
  
<body style="background-color: honeydew;">
 
<div id="page">
 
<center>
 
  
<!-- <img class="titleimg" src="https://static.igem.org/mediawiki/2017/b/b7/Medal.png"> -->
+
<header>
 
+
<nav id='cssmenu' style="position: fixed;">
<div class="container">
+
<div class="logo-header-custom">
<div class="row">
+
  <a href="https://2017.igem.org/Team:UCSC">
<div class="title_image_box">
+
      <img class="logo" src="https://static.igem.org/mediawiki/2017/2/23/UCSC-logo.png" height="60" width="auto">
<!-- <button type="button1" style="background: url(https://static.igem.org/mediawiki/2017/7/7f/Bronze_medal.png); width: 20%;"></button> -->
+
      <!--<img class="logo" src="https://static.igem.org/mediawiki/2017/4/42/Logo_click6.png" height ="60" width="auto">-->
<!-- <button type="button">bronze button</button> -->
+
  </a>
<!-- <a href="#" class="medal_image_button"> -->
+
<a href="#bronze" class="medal">
+
<img src="https://static.igem.org/mediawiki/2017/7/7f/Bronze_medal.png" class="medal_image_button">
+
<div class="proj-button-desc">
+
<div class="overlap-button-text">BRONZE</div>
+
</div>
+
</a>
+
 
+
<a href="#silver" class="medal">
+
<img src="https://static.igem.org/mediawiki/2017/9/94/Silver_medal.png" class="medal_image_button">
+
<div class="proj-button-desc">
+
<div class="overlap-button-text">SILVER</div>
+
</div>
+
</a>
+
 
+
<a href="#gold" class="medal">
+
<img src="https://static.igem.org/mediawiki/2017/7/76/Gold_medal.png" class="medal_image_button">
+
<div class="proj-button-desc">
+
<div class="overlap-button-text">GOLD</div>
+
</div>
+
</a>
+
</div>
+
</div>
+
 
</div>
 
</div>
 
+
<div id="head-mobile"></div>
<br>
+
<div class="button-custom"></div>
<br>
+
<ul>
 
+
  <li><a href="https://2017.igem.org/Team:UCSC/Judging">JUDGING</a></li>
<h1>JUDGING</h1><br>
+
  <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>
<div id="bronze"></div>
+
      <ul>
 
+
        <li><a href="https://2017.igem.org/Team:UCSC/Implementation">IMPLEMENTATION</a></li>
</div>
+
        <li><a href='https://2017.igem.org/Team:UCSC/Model-Organism'>TARGET ORGANISM</a></li>
<div class="color-change-box" style="background: -webkit-linear-gradient(top, rgba(240,255,240,1) 0%, rgba(240,255,240,1) 0%, rgba(240,139,56,1) 100%); margin-top: 0px; height: 200px; padding-bottom: 50px;">
+
      </ul>
</div>
+
  </li>
<div class="page" style="background: #f08b38;">
+
  <li><a href="https://2017.igem.org/Team:UCSC/Integrated-Human-Practices">HUMAN PRACTICES</a>
<h2>BRONZE REQUIREMENTS</h2>
+
      <ul>
<br>
+
        <li><a href="https://2017.igem.org/Team:UCSC/Integrated-Human-Practices">PROJECT INTEGRATION</a></li>
 
+
        <li><a href="https://2017.igem.org/Team:UCSC/Safety">SAFETY</a></li>
<div class="container">
+
        <li><a href="https://2017.igem.org/Team:UCSC/Engagement">EDUCATION</a></li>
<div class="row no-gutters">
+
        <li><a href="https://2017.igem.org/Team:UCSC/Collaborations">COLLABORATIONS</a></li>
<div class="col-sm-1">
+
        <li><a href="https://2017.igem.org/Team:UCSC/HP/Silver">SILVER</a></li>
<div class="checkmark-box">
+
        <li><a href="https://2017.igem.org/Team:UCSC/HP/Gold_Integrated">GOLD INTEGRATED</a></li>
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png">
+
      </ul>
</div>
+
  </li>
</div>
+
  <li><a href="https://2017.igem.org/Team:UCSC/Project">PROJECT</a>
<div class="col-sm-10">
+
      <ul>
<span class="requirement-title">Register for iGEM</span>
+
        <li><a href="https://2017.igem.org/Team:UCSC/Project">THE PROJECT</a></li>
</div>
+
        <li><a href="#">METABOLIC ENGINEERING</a>
</div>
+
            <ul>
<ul>
+
              <li><a href="https://2017.igem.org/Team:UCSC/Acetaminophen">ACETAMINOPHEN</a></li>
<li><span class="requirements-description">We have registered for the iGEM Giant Jamboree and we look forward to presenting our project in Boston! We have had an amazing summer working together, collaborating with others, and reaching out to our community.</span></li>
+
              <li><a href="https://2017.igem.org/Team:UCSC/B-12">VITAMIN B12</a></li>
</ul>
+
            </ul>
+
        </li>
</div>
+
        <li><a href="https://2017.igem.org/Team:UCSC/Model">MODELING</a></li>
<br>
+
        <li><a href="https://2017.igem.org/Team:UCSC/Results">RESULTS</a></li>
<div class="container">
+
        <li><a href="https://2017.igem.org/Team:UCSC/Parts">PARTS</a></li>
<div class="row no-gutters">
+
        <li><a href="https://2017.igem.org/Team:UCSC/InterLab">INTERLAB STUDY</a></li>
<div class="col-sm-1">
+
      </ul>
<div class="checkmark-box">
+
  </li>
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png">
+
  <li><a href="https://2017.igem.org/Team:UCSC/Team1">TEAM</a>
</div>
+
      <ul>
</div>
+
        <li><a href="https://2017.igem.org/Team:UCSC/Team1">MEET THE TEAM</a></li>
<div class="col-sm-10">
+
        <li><a href="https://2017.igem.org/Team:UCSC/Attributions">ATTRIBUTIONS</a></li>
<span class="requirement-title">Meet all Competition Deliverables</span>
+
      </ul>
</div>
+
  </li>
</div>
+
  <li><a href='https://2017.igem.org/Team:UCSC'>HOME</a></li>
<br>
+
</ul>
<div class="sub-container">
+
</nav>
<div class="row no-gutters">
+
</header>
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png" style="width: 85%;">
+
</div>
+
</div>
+
<div class="col-sm-9">
+
<span class="requirements-subtitle">Complete the Team Wiki</span>
+
</div>
+
</div>
+
<br>
+
 
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png" style="width: 85%;"">
+
</div>
+
</div>
+
<div class="col-sm-9">
+
<span class="requirements-subtitle">Project Attributions</span>
+
</div>
+
</div>
+
<div class="sub-container">
+
<ul>
+
<li><span class="requirements-description">Check out our attributions page <a href="https://2017.igem.org/Team:UCSC/Attributions">here</a> to learn more about the help we received along the way!</span></li>
+
</ul>
+
</div>
+
<br>
+
 
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png" style="width: 85%;"">
+
</div>
+
</div>
+
<div class="col-sm-9">
+
<span class="requirements-subtitle">Team Poster</span>
+
</div>
+
</div>
+
<div class="sub-container">
+
<ul>
+
<li><span class="requirements-description">We have created our project poster and will be presenting it at the Giant Jamboree.</span></li>
+
</ul>
+
</div>
+
 
+
<br>
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png" style="width: 85%;"">
+
</div>
+
</div>
+
<div class="col-sm-9">
+
<span class="requirements-subtitle">Team Presentation</span>
+
</div>
+
</div>
+
<div class="sub-container">
+
<ul>
+
<li><span class="requirements-description">We look forward to presenting our project at the Giant Jamboree and showing how our team takes manufacturing where it has never been before.</span></li>
+
</ul>
+
</div>
+
 
+
<br>
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png" style="width: 85%;"">
+
</div>
+
</div>
+
<div class="col-sm-9">
+
<span class="requirements-subtitle">Safety Form</span>
+
</div>
+
</div>
+
<div class="sub-container">
+
<ul>
+
<li><span class="requirements-description">With the submission of our safety form, we complete this competition deliverable. You can find our safety page <a href="https://2017.igem.org/Team:UCSC/Safety">here!</a></span></li>
+
</ul>
+
</div>
+
 
+
<br>
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png" style="width: 85%;"">
+
</div>
+
</div>
+
<div class="col-sm-9">
+
<span class="requirements-subtitle">Judging Form</span>
+
</div>
+
</div>
+
<div class="sub-container">
+
<ul>
+
<li><span class="requirements-description">Our judging form has been submitted, and the breakdown of how we meet the medal requirements and project deliverables can be seen throughout this page.</span></li>
+
</ul>
+
</div>
+
 
+
<br>
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png" style="width: 85%;"">
+
</div>
+
</div>
+
<div class="col-sm-9">
+
<span class="requirements-subtitle">Registry Part Page</span>
+
</div>
+
</div>
+
<div class="sub-container">
+
<ul>
+
<li><span class="requirements-description">Our various registry parts have been fully documented and can be seen on our parts page <a href="https://2017.igem.org/Team:UCSC/Parts">here!</a></span></li>
+
</ul>
+
</div>
+
 
+
<br>
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png" style="width: 85%;"">
+
</div>
+
</div>
+
<div class="col-sm-9">
+
<span class="requirements-subtitle">Sample Submission</span>
+
</div>
+
</div>
+
<div class="sub-container">
+
<ul>
+
<li><span class="requirements-description">DNA samples our our <a href="https://2017.igem.org/Team:UCSC/Parts">parts</a> have been submitted to the Registry to help make the Registry even more comprehensive for next year.</span></li>
+
</ul>
+
</div>
+
</div>
+
</div>
+
 
+
<div class="container">
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png">
+
</div>
+
</div>
+
<div class="col-sm-10">
+
<span class="requirement-title">Attribution</span>
+
</div>
+
</div>
+
<ul>
+
<li><span class="requirements-description">We couldn’t have developed our project without the help of others. The work accomplished by ourselves and the work and support we received from others has been fully documented, and can be found on our attributions page <a href="https://2017.igem.org/Team:UCSC/Attributions">here!</a></span></li>
+
</ul>
+
+
</div>
+
 
+
<br>
+
<div class="container">
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png">
+
</div>
+
</div>
+
<div class="col-sm-10">
+
<span class="requirement-title">Contribution</span>
+
</div>
+
</div>
+
<ul>
+
<li><span class="requirements-description">This year, the UCSC iGEM team has contributed by participating in the InterLab study! You can see our results on our InterLab page <a href="https://2017.igem.org/Team:UCSC/InterLab">here!</a></span></li>
+
</ul>
+
 
+
<div id="silver"></div>
+
 
+
</div>
+
 
+
<div class="color-change-box" style="background:  -webkit-linear-gradient(top, rgba(240,139,56,1) 0%, rgba(240,139,56,1) 0%, rgba(194,194,194,1) 100%); height: 200px;">
+
</div>
+
 
+
<div class="page" style="background: #c2c2c2">
+
<h2>SILVER REQUIREMENTS</h2>
+
<br>
+
 
+
<div class="container">
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png">
+
</div>
+
</div>
+
<div class="col-sm-10">
+
<span class="requirement-title">Validated Part</span>
+
</div>
+
</div>
+
<ul>
+
<li><span class="requirements-description">The validation of our own part is not only a facinating component of our project, but is also crucial for the synthesis of the essential medicine, acetaminophen. Take a look at how we <a href="https://2017.igem.org/Team:UCSC/Acetaminophen">validated our part in <i>E. coli.</i></a></span></li>
+
</ul>
+
+
</div>
+
 
+
 
+
<br>
+
<div class="container">
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png">
+
</div>
+
</div>
+
<div class="col-sm-10">
+
<span class="requirement-title">Collaboration</span>
+
</div>
+
</div>
+
<ul>
+
<li><span class="requirements-description">Collaboration between laboratories across the world will always be an essential component for the advancement of the scientific community. Check out our <a href="https://2017.igem.org/Team:UCSC/Collaborations">collaborations</a> page to learn more about how we worked with other iGEM teams.</span></li>
+
</ul>
+
+
</div>
+
 
+
 
+
<br>
+
<div class="container">
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png">
+
</div>
+
</div>
+
<div class="col-sm-10">
+
<span class="requirement-title">Human Practices</span>
+
</div>
+
</div>
+
<ul>
+
<li><span class="requirements-description">Engaging in our community and outreaching to regions around the world dramatically helped shape our project. Here at UC Santa Cruz, we care strongly about real world problems and what we can do to help. Take a look at the <a href="https://2017.igem.org/Team:UCSC/Integrated-Human-Practices">outreach we conducted.</a></span></li>
+
</ul>
+
 
+
<div id="gold"></div>
+
 
+
</div>
+
 
+
<div class="color-change-box" style="background:  -webkit-linear-gradient(top, rgba(194,194,194,1) 0%, rgba(255,194,41,1) 100%); height: 200px;">
+
</div>
+
 
+
<div class="page" style="background: #ffc229">
+
<h2>GOLD REQUIREMENTS</h2>
+
<br>
+
 
+
<div class="container">
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png">
+
</div>
+
</div>
+
<div class="col-sm-10">
+
<span class="requirement-title">Integrated Human Practices</span>
+
</div>
+
</div>
+
<ul>
+
<li><span class="requirements-description">We place an enormous emphasis identifying real world problems before we delve into potential solutions using synthetic biology. Before we began our project, we conducted meaningful outreach to some of our target locations around the world. With this, through synthetic biology and metabolic engineering, our project became focused on alleviating real problems that had been expressed by real health care practitioners. To learn more about how human practices has been integrated into our project, click <a href="https://2017.igem.org/Team:UCSC/Integrated-Human-Practices">here!</a></span></li>
+
</ul>
+
+
</div>
+
 
+
 
+
<br>
+
<div class="container">
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png">
+
</div>
+
</div>
+
<div class="col-sm-10">
+
<span class="requirement-title">Improve a Previous Part</span>
+
</div>
+
</div>
+
<ul>
+
<li><span class="requirements-description">The tremendous registry of parts allowed us to find and choose a part that, with some improvements, could serve a meaningful purpose to our project. The improved part has been documented and submitted to the parts registry page. Take a look at how we <a href="https://2017.igem.org/Team:UCSC/Parts">improved a previous part</a> and used it as a means of detection.</span></li>
+
</ul>
+
+
</div>
+
 
+
 
+
<br>
+
<div class="container">
+
<div class="row no-gutters">
+
<div class="col-sm-1">
+
<div class="checkmark-box">
+
<img src="https://static.igem.org/mediawiki/2017/5/5a/Checkmark.png">
+
</div>
+
</div>
+
<div class="col-sm-10">
+
<span class="requirement-title">Modelling</span>
+
</div>
+
</div>
+
<ul>
+
<li><span class="requirements-description">Modelling product yield is an integral component of our project. Without it, the applicability of our project becomes undermined. Modelling not only allows one to predict the yield of a desired product, but also to optimize growth conditions to maximize product in a given amount of time. Take a look at our <a href="https://2017.igem.org/Team:UCSC/Model">modelling for acetaminophen and vitamin B12</a> product yield.</span></li>
+
</ul>
+
+
</div>
+
</div>
+
 
+
<div class="color-change-box" style="background: #ffc229; height: 100px; margin-top: 0px; margin-bottom: -50px;">
+
</div>
+
 
+
<div class="color-change-box" style="background: -webkit-linear-gradient(top, rgba(255,194,41,1) 0%, rgba(240,255,240,1) 100%); height: 250px;">
+
</div>
+
 
+
 
+
</center>
+
 
+
</body>
+
 
</html>
 
</html>
  
{{UCSC-Footer}}
+
{{Scroll}}

Revision as of 23:21, 19 October 2017