Difference between revisions of "Template:Manchester/CSS1"

 
(140 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
  
−
<head>
+
<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>
 
<script>
 
document.getElementById('div').style.height = window.innerHeight;
 
document.getElementById('div').style.height = window.innerHeight;
 
document.getElementById('div').style.width = window.innerWidth;
 
document.getElementById('div').style.width = window.innerWidth;
 
</script>
 
</script>
 +
 +
<head>
  
 
<style>
 
<style>
 +
.team a{
 +
    text-weight:bold;
 +
}
 +
  
−
@keyframes bounce{
+
.somebox{
−
     0%{background-size: 150px; background-position: 600px 250px;}
+
     width:80%;
−
    25%{background-size: 150px 140px; background-position: 600px 260px;}
+
     height: 10px;
−
     50%{background-size: 150px; background-position: 600px 250px;}
+
     display:none;
−
     75%{background-size: 150px 160px; background-position: 600px 240px;}
+
−
    100%{background-size: 150px; background-position: 600px 250px;}
+
 
}
 
}
  
  
 +
* {
 +
    box-sizing: border-box;
 +
}
 +
 +
[class*="col-"] {
 +
float:left
 +
}
 +
 +
.row::after {
 +
    content: "";
 +
    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;  }
 
.no-js #loader { display: none;  }
−
.js #loader { display: block
+
.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 ********************************/
 +
nav {
 +
text-align: center;
 +
        margin-bottom: 50px;
 +
}
 +
 
 +
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;
 +
    position: fixed;
 +
    display:block;
 +
    font-size:20px;
 +
    list-style: none;
 +
    box-shadow: 0px 0px 9px black;
 +
    border-radius: 10px;
 +
    width: 100%;
 +
    left: 20px;
 +
    top: 15px;
 +
}
 +
 
 +
nav ul li {
 +
    float: left;
 +
    position: relative;
 +
 
 +
}
 +
 
 +
nav ul > li > a:link{
 +
    font-family: "Segoe UI";
 +
    color: white;
 +
    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;
 +
    display: block;
 +
    text-align: center;
 +
    text-decoration: none;
 +
    padding: 10px 18px;
 +
    background-color: orange;
 +
}
 +
 
 +
nav ul li:hover > a{
 +
    color: black;
 +
    text-decoration: none;
 +
    background-color: gold;
 +
}
 +
 
 +
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;
 +
}
 +
 
 +
.active {
 +
    float: left;
 +
    display: block;
 +
}
 +
 
 +
.active a:link{
 +
    display: block;
 +
    text-align: center;
 +
    text-decoration:none;
 +
    padding: 10px 30px;
 +
    background-color:gold;
 +
}
 +
 
 +
.active a:visited{
 +
    display: block;
 +
    text-align: center;
 +
    text-decoration:none;
 +
    padding: 10px 30px;
 +
    background-color:gold;
 +
}
 +
 
 +
 
 +
.active a:hover {
 +
  color:#4CAF50;
 +
}
 +
   
 +
.dropbtn {
 +
    display: none;
 +
    position: absolute;
 +
}
 +
 
 +
.dropbtn li a {
 +
    color: white;
 +
    background-color: orange;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
}   
 +
 
 +
.dropbtn li a:hover {
 +
    color: black;
 +
    width: 80%;
 +
}
 +
 
 +
.dropdown_content:hover .dropbtn{
 +
    display: block;
 +
}
 +
 
 +
.dropdown_content:hover{
 +
    background: light-orange;
 +
}
 +
 
 +
@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 ********************************/
 +
 
 +
 
 +
/* Wrapper for the content */
 +
.content_wrapper {
 +
width: 100%;
 +
margin: 0px;
 +
padding:0px 0px;
 +
float:left;
 +
background-color:red;
 +
}
 +
 
 +
/*LAYOUT */
 +
.column  {
 +
padding: 10px 0px;
 +
float:left;
 +
background-color:white;
 +
}
 +
 
 +
.full_size {
 +
width:100%;
 +
}
 +
 
 +
.full_size img {
 +
padding: 10px 15px;
 +
width:96.5%;
 +
}
 +
 
 +
.half_size {
 +
width: 50%;
 +
}
 +
.half_size img {
 +
padding: 10px 15px;
 +
width: 93%;
 +
}
 +
        .quarter_size {
 +
width: 25%;
 +
}
 +
.quarter_size img {
 +
padding: 10px 15px;
 +
width: 89.5%;
 +
}
 +
.animate {
 +
    color: purple;
 +
    animation: myfirst 1s linear infinite ;
 +
}
 +
@keyframes myfirst {
 +
    0%  {color:purple; }
 +
    25%  {color:yellow;}
 +
    50%  {color:blue; }
 +
    75%  {color:green;}
 +
    100% {color:purple;}
 +
}
 +
 
 +
    h3.unique {
 +
    width: 250px;
 +
    color:#3b5998;
 +
    background-color:white;
 +
    font-family:"Arial Black";
 +
    text-decoration: none;
 +
    padding: 20px;
 +
    text-align: center;
 +
    }
 +
 
 +
    h3.unique:hover {
 +
    width: 250px;
 +
    background-color: #3b5998;   
 +
    color: white;
 +
    text-decoration: none;
 +
    }
 +
 
 +
    h3.unique a:link{
 +
    color:#3b5998;
 +
    background-color:white;
 +
    font-family:"Arial Black";
 +
    text-decoration: none;
 +
    }
 +
 
 +
    h3.unique a:visited{
 +
    color:#3b5998;
 +
    background-color:white;
 +
    font-family:"Arial Black";
 +
    text-decoration: none;
 +
    }
 +
 
 +
 
 +
    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;   
 +
    color: white;
 +
    text-decoration: none;
 +
    transition: all 0.4s ease
 +
    }
 +
 
 +
  .unique1 {
 +
    width: 220px;
 +
    color:#4099FF;
 +
    background-color:white;
 +
    font-family:"Arial Black";
 +
    text-decoration: none;
 +
    padding: 20px;
 +
    text-align: center;
 +
    }
 +
 
 +
    .unique1:hover {
 +
    width: 220px;
 +
    background-color: #4099FF;   
 +
    color: white;
 +
    text-decoration: none;
 +
    }
 +
 
 +
    .unique1 a{
 +
    color:#4099FF;
 +
    background-color:white;
 +
    font-family:"Arial Black";
 +
    text-decoration: none;
 +
    }
 +
 
 +
 
 +
    .unique1:hover a{
 +
    background-color: #4099FF;   
 +
    color: white;
 +
    text-decoration: none;
 +
    transition: all 0.4s ease
 +
    }
 +
 
 +
@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>
 +
 
 +
</head>
 +
 
 +
<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) -->
 +
<script type="text/x-mathjax-config">
 +
    MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
 +
</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();
 +
});
 +
});
 +
 
 +
 
 +
</script>
 +
 
 +
<script>
 +
var startY = $('nav > ul').height();
 +
 
 +
function checkScroll(){
 +
 
 +
    if($(window).scrollTop() > window.innerHeight + startY){
 +
        $('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