Difference between revisions of "Template:Manchester/CSS1"

m
 
(379 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
 +
<div class="se-pre-con"></div>
 +
<script>
 +
    if($(window).width() < 700){
 +
        $('div').removeClass("se-pre-con");
 +
}
 +
</script>
 +
<script>
 +
 +
$(window).load(function() {
 +
$(".se-pre-con").fadeOut("slow");
 +
});
 +
 +
</script>
 +
 +
<script>
 +
 +
    if($(window).width() > 700){
 +
        setTimeout(function(){
 +
$(".se-pre-con").fadeOut("slow");
 +
        },10000)
 +
    }
 +
 +
 +
</script>
 +
 +
<script>
 +
document.getElementById('div').style.height = window.innerHeight;
 +
document.getElementById('div').style.width = window.innerWidth;
 +
</script>
 +
 
<head>
 
<head>
 +
 
<style>
 
<style>
−
body {
+
.team a{
−
     background-color:#111;
+
     text-weight:bold;
−
    margin-left: -15px;
+
−
    width:95%;
+
 
}
 
}
  
  
−
/********************************* Hyperlink formitting********************************/
+
.somebox{
−
a:link {
+
     width:80%;
−
     color: green;
+
     height: 10px;
−
     background-color: transparent;
+
     display:none;
−
     text-decoration: none;
+
 
}
 
}
−
a:visited {
+
 
−
     color: green;
+
 
−
    background-color: transparent;
+
* {
−
    text-decoration: none;
+
     box-sizing: border-box;
 
}
 
}
−
a:hover {
+
 
−
    color: gold;
+
[class*="col-"] {
−
    background-color: transparent;
+
float:left
−
    text-decoration: none;
+
 
}
 
}
−
a:active {
+
 
−
     color: gold;
+
.row::after {
−
     background-color: purple;
+
     content: "";
−
     text-decoration: underline;
+
     clear: both;
 +
     display: block;
 
}
 
}
 +
 +
.alert{
 +
    border-radius: 10px 0 0 10px;
 +
    padding: 33.5px 0 34px 20px;
 +
    background: #f9d5df;
 +
    width: 66.66%;
 +
    float:left;
 +
}
 +
 +
.alert1{
 +
    border-radius: 0 10px 10px 0;
 +
    padding: 20px 20px 20px 0 ;
 +
    background: #f9d5df;
 +
    width: 33.33%;
 +
    float:left;
 +
}
 +
 +
.social::before{
 +
    content:"" ;
 +
}
 +
 +
.logo{
 +
    margin: auto;
 +
    position: absolute;
 +
    display: block;
 +
    width: 13%;
 +
    top: 1.0%;
 +
    right: 10.5%;
 +
}
 +
 +
@keyframes animate{
 +
    0%{height:400px ; margin-top: 50px ; margin-bottom:20px}
 +
    32.5%{height:370px ; margin-top: 80px ; margin-bottom: 20px }
 +
    65%{height:400px ; margin-top: 50px ; margin-bottom: 20px }
 +
    82.5%{height:400px ; margin-top: 20px ; margin-bottom: 50px }
 +
    100%{height:400px ; margin-top: 50px ;margin-bottom: 20px }
 +
}
 +
 +
@-webkit-keyframes animate{
 +
    0%{height:400px ; margin-top: 50px}
 +
    25%{height:370px ; margin-top: 80px}
 +
    50%{height:400px ; margin-top: 50px}
 +
    75%{height430px ; margin-top: 20px}
 +
    100%{height:400px ; margin-top: 50px}
 +
}
 +
 +
 +
.font10{
 +
    display:none;
 +
}
 +
 +
.boxx h1{
 +
    font-size:40px;
 +
    height:80px;
 +
}
 +
 +
.boxx h4{
 +
    font-size:30px;
 +
    height:60px;
 +
}
 +
 +
body{
 +
    width:100%;
 +
    margin:auto;
 +
}
 +
 +
.boxx{
 +
  width:85%;
 +
    margin:auto;
 +
}
 +
 +
 +
.scrolled{
 +
    opacity: 0.5;
 +
}
 +
 +
.no-js #loader { display: none;  }
 +
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
 +
.se-pre-con {
 +
position: fixed;
 +
left: 0px;
 +
top: 0px;
 +
width: 100%;
 +
height: 100%;
 +
z-index: 9999;
 +
background: url(https://static.igem.org/mediawiki/2016/7/7b/Manchester_logo.gif) center no-repeat #fff;
 +
        background-size: 150px;
 +
}
 +
 +
.box-shadow-menu {
 +
  position: relative;
 +
  padding-left: 1.25em;
 +
  display:none;
 +
  right : 0;
 +
  border: 1px solid black;
 +
  background: orange;
 +
  padding: 17px;
 +
  top: 15px;
 +
  width: 100%;
 +
  text-align: center;
 +
  text-decoration : none;
 +
  color: black;
 +
  cursor: pointer;
 +
  height: 20px;
 +
}
 +
 +
 +
 +
.box-shadow-menu:before {
 +
  content: "";
 +
  position: absolute;
 +
  right: 30px;
 +
  top: 0.6em;
 +
  width: 2em;
 +
  height: 0.35em;
 +
  background: black;
 +
  box-shadow:
 +
    0 0.5em 0 0 black,
 +
    0 1em 0 0 black;
 +
}
 +
   
 +
#vid{
 +
    margin-bottom: 0px;
 +
    padding:0;
 +
    position:relative;
 +
    z-index:-999;
 +
    height: 100vh;
 +
    width: 90%;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    margin-top: -10px;
 +
}
 +
 +
@keyframes down {
 +
    0%  {border-color:purple transparent transparent transparent; }
 +
    25%  {border-color:yellow transparent transparent transparent;}
 +
    50%  {border-color:blue transparent transparent transparent ; }
 +
    75%  {border-color:green transparent transparent transparent ;}
 +
    100% {border-color:purple transparent transparent transparent;}
 +
}
 +
 +
 +
 +
 +
h1.reference{
 +
    text-align:left;
 +
    font-size:35px;
 +
    color:orange;
 +
    padding-bottom:20px;
 +
}
 +
 +
.referencediv{
 +
    margin-top: 200px;
 +
    margin-bottom:150px;
 +
    float:none;
 +
    word-wrap: break-word;
 +
    clear:both;
 +
}
 +
 +
ul.romanlist{
 +
    list-style: decimal;
 +
    font-size:17px;
 +
    line-height:200%;
 +
}
 +
 +
  
 
/********************************* menu bar formatting ********************************/
 
/********************************* menu bar formatting ********************************/
−
.dropdown{
+
nav {
−
     margin-left: -10px;
+
text-align: center;
−
     margin-top:-15px;
+
        margin-bottom: 50px;
−
     overflow: hidden;
+
}
 +
 
 +
nav > ul:hover{
 +
    opacity:1;
 +
}
 +
 
 +
nav ul{
 +
-webkit-transition: all 0.6s ease-out;
 +
    -moz-transition: all 0.6s ease-out;
 +
    -o-transition: all 0.6s ease-out;
 +
    -ms-transition: all 0.6s ease-out;
 +
    transition: all 0.6s ease-out;
 +
}
 +
 
 +
nav ul ul{
 +
     display: none;
 +
    z-index: 1000;
 +
}
 +
 
 +
nav ul li:hover > ul {
 +
    display: block;
 +
    animation: fadein 0.5s;
 +
}
 +
 
 +
#nav_bar {
 +
    background-color: orange;
 +
     display:block;
 +
    font-size:20px;
 +
    list-style: none;
 +
     box-shadow: 0px 0px 9px black;
 +
    border-radius: 10px;
 +
    width: 100%;
 +
    height: 50px;
 +
    z-index: 1000;
 +
    margin: auto;
 +
    left: 0px;
 +
}
 +
 
 +
 
 +
.navbar-fixed {
 
     background-color: orange;
 
     background-color: orange;
 
     position: fixed;
 
     position: fixed;
−
     display:inline;
+
     display:block;
−
    width: 82.2%;
+
−
    top: 5px;
+
−
    left: 5px;
+
−
    right: 5px;
+
 
     font-size:20px;
 
     font-size:20px;
−
     list-style-type: none;
+
     list-style: none;
−
     box-shadow: 2px 2px 2px black;
+
     box-shadow: 0px 0px 9px black;
 +
    border-radius: 10px;
 +
    width: 100%;
 +
    left: 20px;
 +
    top: 15px;
 
}
 
}
  
−
.dropdown_content {
+
nav ul li {
 
     float: left;
 
     float: left;
−
     display: block;
+
     position: relative;
 +
 
 
}
 
}
  
−
.dropdown_content a{
+
nav ul > li > a:link{
 +
    font-family: "Segoe UI";
 +
    color: white;
 
     display: block;
 
     display: block;
 +
    text-align: center;
 +
    text-decoration: none;
 +
    padding: 10px 18px;
 +
    background-color: orange;
 +
    height: 50px;
 +
}
 +
 +
 +
nav ul > li > a:visited{
 +
    font-family: "Segoe UI";
 
     color: white;
 
     color: white;
 +
    display: block;
 
     text-align: center;
 
     text-align: center;
−
     text-decoration:none;
+
     text-decoration: none;
−
     padding: 5px 30px;
+
     padding: 10px 18px;
 +
    background-color: orange;
 
}
 
}
  
−
.dropdown_content a:hover:not(.active){
+
nav ul li:hover > a{
 
     color: black;
 
     color: black;
−
    background-color:orange;
 
 
     text-decoration: none;
 
     text-decoration: none;
−
     border-right: 1px solid black;
+
     background-color: gold;
−
     border-left: 1px solid black;
+
}
 +
 
 +
nav ul > li:active > a{
 +
    background-color: gold;
 +
    color: black;
 +
 
 +
}
 +
 
 +
 
 +
nav ul ul{
 +
    position: absolute;
 +
    top: 85%;
 +
     border-radius: 0px;
 +
    padding: 0;
 +
    width: 180px;
 +
    z-index: 1000;
 +
    list-style: none;
 +
    border-radius: 10px;
 +
}
 +
 
 +
nav ul ul li{
 +
    float: none;
 +
    position: relative;
 +
    border-bottom: 1px solid black;
 +
    box-shadow: 0px 0px 9px black;
 +
}
 +
 
 +
nav ul ul li a:link {
 +
    padding: 5px 15px;
 +
    color: black;
 +
    font-family: "Segoe UI";
 +
    background-color: orange;
 +
    display: block;
 +
    text-align: center;
 +
    text-decoration: none;
 +
}
 +
 
 +
nav ul ul li a:visited {
 +
    padding: 5px 15px;
 +
    color: black;
 +
    font-family: "Segoe UI";
 +
    background-color: orange;
 +
    display: block;
 +
    text-align: center;
 +
    text-decoration: none;
 +
}
 +
nav ul ul > li:hover  a{
 +
color: black;
 +
                                font-weight: bold;
 +
                                box-shadow: 0px 0px 9px black;
 +
                                background-color: gold;
 +
}
 +
 
 +
nav ul > ul > li:active  a{
 +
                                background-color: gold;
 +
                        }
 +
 
 +
.homeimg{
 +
    width:50px;
 +
    height:50px;
 
}
 
}
  
Line 74: Line 381:
 
}
 
}
  
−
.active a{
+
.active a:link{
 
     display: block;
 
     display: block;
−
    color: green;
 
 
     text-align: center;
 
     text-align: center;
 
     text-decoration:none;
 
     text-decoration:none;
−
     padding: 5px 30px;
+
     padding: 10px 30px;
 
     background-color:gold;
 
     background-color:gold;
 
}
 
}
 +
 +
.active a:visited{
 +
    display: block;
 +
    text-align: center;
 +
    text-decoration:none;
 +
    padding: 10px 30px;
 +
    background-color:gold;
 +
}
 +
  
 
.active a:hover {
 
.active a:hover {
Line 113: Line 428:
 
}
 
}
  
 +
@keyframes fadein {
 +
    from { opacity: 0; }
 +
    to  { opacity: 1; }
 +
}
 +
 +
 +
 +
a.special:link {
 +
    padding:2px 10px;
 +
    background: gold;
 +
    border-radius: 10px 0 0 10px;
 +
}
 +
 +
a.special:visited {
 +
    padding:2px 10px;
 +
    background: gold;
 +
    border-radius: 10px 0 0 10px;
 +
}
  
 
/********************************* CONTENT OF THE PAGE ********************************/
 
/********************************* CONTENT OF THE PAGE ********************************/
Line 168: Line 501:
 
}
 
}
  
−
  .unique {
+
    h3.unique {
−
     width:95px;
+
     width: 250px;
 
     color:#3b5998;
 
     color:#3b5998;
 
     background-color:white;
 
     background-color:white;
 
     font-family:"Arial Black";
 
     font-family:"Arial Black";
 
     text-decoration: none;
 
     text-decoration: none;
 +
    padding: 20px;
 +
    text-align: center;
 
     }
 
     }
  
−
     .unique:hover {
+
     h3.unique:hover {
−
     width:95px;
+
     width: 250px;
 
     background-color: #3b5998;     
 
     background-color: #3b5998;     
 
     color: white;
 
     color: white;
Line 183: Line 518:
 
     }
 
     }
  
−
     .unique a{
+
     h3.unique a:link{
 +
    color:#3b5998;
 +
    background-color:white;
 +
    font-family:"Arial Black";
 +
    text-decoration: none;
 +
    }
 +
 
 +
    h3.unique a:visited{
 
     color:#3b5998;
 
     color:#3b5998;
 
     background-color:white;
 
     background-color:white;
Line 191: Line 533:
  
  
−
     .unique:hover a{
+
     h3.unique:hover a:link{
 +
    background-color: #3b5998;   
 +
    color: white;
 +
    text-decoration: none;
 +
    transition: all 0.4s ease
 +
    }
 +
 +
    h3.unique:hover a:visited{
 
     background-color: #3b5998;     
 
     background-color: #3b5998;     
 
     color: white;
 
     color: white;
Line 199: Line 548:
  
 
   .unique1 {
 
   .unique1 {
−
     width:75px;
+
     width: 220px;
 
     color:#4099FF;
 
     color:#4099FF;
 
     background-color:white;
 
     background-color:white;
 
     font-family:"Arial Black";
 
     font-family:"Arial Black";
 
     text-decoration: none;
 
     text-decoration: none;
 +
    padding: 20px;
 +
    text-align: center;
 
     }
 
     }
  
 
     .unique1:hover {
 
     .unique1:hover {
−
     width:75px;
+
     width: 220px;
 
     background-color: #4099FF;     
 
     background-color: #4099FF;     
 
     color: white;
 
     color: white;
Line 228: Line 579:
 
     }
 
     }
 
    
 
    
 +
@media screen and (min-width:700px){
 +
    #nav_bar{ display:block}
 +
}
 +
 +
@media screen and (max-width:700px){
 +
    nav ul li{display: block; float:none; border:1px solid grey;}
 +
    nav ul ul {width:100%; left: -20px;position:relative;}
 +
    nav ul > li > a:link{ height:40px;}
 +
    nav ul > li > a:visited{ height:40px;}
 +
    //nav ul ul li a:link{background: #FCDC3B; color: orange}
 +
    //nav ul ul li a:visited{background: #FCDC3B; color: orange}
 +
    #nav_bar{ top: 15px; position:relative; display: none; font-size:15px; width:100%; right:0; left:auto; height:auto}
 +
    #vid{ display: none}
 +
    .empty{ display:none;}
 +
    .box-shadow-menu { display: block;}
 +
    .se-pre-con{display:none}
 +
    .half_size{width:100%}
 +
    .homeimg{width:40px; height:40px;}
 +
    .logo{ position:relative; text-align: center; width: 80px; height:80px; right:0; top:0;}
 +
    .interactive img{width: 100%}
 +
    ul.romanlist{font-size:7px;}
 +
 +
}
 +
}
 +
 +
@media screen and (max-width:700px){
 +
    .somebox{
 +
        display:block;
 +
    }
 +
}
 +
 +
@media screen and (max-width:1300px){
 +
    .alert{
 +
          width: 90%;
 +
          border-radius:10px 10px 0 0;
 +
    }
 +
 +
    .alert1{
 +
          width:90%;
 +
          border-radius: 0 0 10px 10px;
 +
          padding: 10px 150px;
 +
    }
 +
}
 +
 +
@media screen and (max-width:750px){
 +
 +
.boxx h1{font-size:20px;height:60px;}
 +
 +
.boxx h4{font-size:15px;height:30px;}
 +
 +
.font20{ display:none}
 +
 +
.font10{display:block;}
 +
}
 +
 
</style>
 
</style>
  
 
</head>
 
</head>
 +
 
<body>
 
<body>
 +
 +
 +
<center>
 +
<div class="empty">
 +
<a href="#nav_bar" id="link" title="click me!!:D" style="width:100%;height:100vh;position:absolute; left:0px;">
 +
<div style="width:100%;height:100vh;position:absolute; left:0px;"> </a>
 +
</div>
 +
 +
 +
<video id="vid" loop autoplay>
 +
 +
<source src="https://static.igem.org/mediawiki/2016/b/bd/T--Manchester--iGEM_banner.mp4" type="video/mp4" >
 +
 +
</video>
 +
 +
 +
 +
</div>
 +
</center>
 +
 +
<a class="box-shadow-menu">
 +
</a>
 +
 +
<nav>
 +
 +
<ul id="nav_bar">
 +
<li>
 +
<a class="special" href="https://2016.igem.org/Team:Manchester" title="Home"><img src="https://static.igem.org/mediawiki/2016/7/7b/Manchester_logo.gif" class="homeimg"></img></a>
 +
</li>
 +
  <li><a href="https://2016.igem.org/Team:Manchester/Team"><strong>Team</strong></a>
 +
 +
      <ul>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Team">Team</a></strong></li>
 +
        <li class="dropdown_content"><strong><a href="https://2016.igem.org/Team:Manchester/Attributions">Attributions</a></strong></li>
 +
      </ul>
 +
 +
  </li>
 +
 +
  <li><a href="https://2016.igem.org/Team:Manchester/Description"><strong>Project</strong></a>
 +
 +
      <ul>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Description">Overview</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Description/mechanism1">Cell-free Mechanism</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Description/mechanism2">Inducible Gene Switch</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Proof">Proof of Concept</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Notebook">Notebook</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Project/Protocols">Protocol</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Safety">Safety</a></strong></li>
 +
      </ul>
 +
 +
  </li>
 +
 +
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Achievement"><strong>Achievement</strong></a>
 +
 +
      <ul>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Achievement">Overview</a></strong></li> 
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Judging">Judging Criteria</a></strong></li> 
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Collaborations">Collaborations</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Parts">Parts</a></strong></li>     
 +
      </ul>
 +
 +
  </li>
 +
 +
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Human_Practices"><strong>Human Practices</strong></a>
 +
 +
      <ul>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Human_Practices">Overview</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Human_Practices/Charities">Charities</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Human_Practices/Industries">Industries</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Human_Practices/Outreach">Outreach</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Human_Practices/Professional_Bodies">Professional Bodies</a></strong></li> 
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Integrated_Practices">Integrated Practices</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Engagement">Engagement</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/HP/Gold">HP Gold</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/HP/Silver">HP Silver</a></strong></li>     
 +
      </ul>
 +
 +
 +
  </li>
 +
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Model"><strong>Modelling</strong></a>
 +
   
 +
    <ul>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Model">Overview</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Model/hp">Modelling Integration</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Model/result">Result</a></strong></li>
 +
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Model/ModelExplorer">Model Explorer</a></strong></li>
 +
    </ul>
 +
 +
  </li>
 +
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Safety"><strong>Safety</strong></a></li>
 +
</ul>
 +
 +
</nav>
 +
 +
 +
</body>
 +
 
<!-- MathJax (LaTeX for the web) -->
 
<!-- MathJax (LaTeX for the web) -->
 
<script type="text/x-mathjax-config">
 
<script type="text/x-mathjax-config">
Line 238: Line 742:
 
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
 
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
  
 +
<script>
 +
$(document).ready(function(){
 +
        $(".box-shadow-menu").click(function(){
 +
            $("#nav_bar").toggle();
 +
        });
 +
$( window ).resize(function() {
 +
$("#nav_bar").show();
 +
});
 +
});
  
−
<ul class="dropdown">
+
 
−
  <li class="active"><a href="https://2016.igem.org/Team:Manchester"><strong>Home</strong></a></li>
+
</script>
−
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Team"><strong>Team</strong></a></li>
+
 
−
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Description"><strong>Project</strong></a></li>
+
<script>
−
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Parts"><strong>Parts</strong></a></li>
+
var startY = $('nav > ul').height();
−
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Safety"><strong>Safety</strong></a></li>
+
 
−
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Attributions"><strong>Attributions</strong></a></li>
+
function checkScroll(){
−
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Human_Practices"><strong>Human Pratices</strong></a></li>
+
 
−
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Model"><strong>Awards</strong></a></li>
+
    if($(window).scrollTop() > window.innerHeight + startY){
−
</ul>
+
        $('nav > ul').addClass("scrolled");
 +
    }else{
 +
        $('nav > ul').removeClass("scrolled");
 +
    }
 +
}
 +
 
 +
if($('nav > ul').length > 0){
 +
    $(window).on("scroll load resize", function(){
 +
        checkScroll();
 +
    });
 +
}
 +
</script>
 +
 
 +
</html>

Latest revision as of 19:39, 26 November 2016