Difference between revisions of "Template:Manchester/CSS1"

 
(77 intermediate revisions by the same user not shown)
Line 12: Line 12:
 
$(".se-pre-con").fadeOut("slow");
 
$(".se-pre-con").fadeOut("slow");
 
});
 
});
 +
 +
</script>
 +
 +
<script>
 +
 +
    if($(window).width() > 700){
 +
        setTimeout(function(){
 +
$(".se-pre-con").fadeOut("slow");
 +
        },10000)
 +
    }
 +
  
 
</script>
 
</script>
Line 23: Line 34:
  
 
<style>
 
<style>
 +
.team a{
 +
    text-weight:bold;
 +
}
 +
 +
 +
.somebox{
 +
    width:80%;
 +
    height: 10px;
 +
    display:none;
 +
}
 +
 +
 +
* {
 +
    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{
 
.scrolled{
−
     opacity: 0.3;
+
     opacity: 0.5;
 
}
 
}
  
Line 80: Line 187:
 
     height: 100vh;
 
     height: 100vh;
 
     width: 90%;
 
     width: 90%;
−
     margin-left: 50px;
+
     margin-left: auto;
 
     margin-right: auto;
 
     margin-right: auto;
 
     margin-top: -10px;
 
     margin-top: -10px;
Line 92: Line 199:
 
     100% {border-color:purple 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%;
 +
}
 +
  
  
Line 114: Line 246:
 
nav ul ul{
 
nav ul ul{
 
     display: none;
 
     display: none;
−
     z-index: 100;
+
     z-index: 1000;
 
}
 
}
  
Line 130: Line 262:
 
     border-radius: 10px;
 
     border-radius: 10px;
 
     width: 100%;
 
     width: 100%;
−
     height: 40px;
+
     height: 50px;
−
     z-index: 100;
+
     z-index: 1000;
 
     margin: auto;
 
     margin: auto;
−
     left: 10px;
+
     left: 0px;
 
}
 
}
  
Line 156: Line 288:
 
}
 
}
  
−
nav ul > li a:link{
+
nav ul > li > a:link{
 +
    font-family: "Segoe UI";
 
     color: white;
 
     color: white;
 
     display: block;
 
     display: block;
 
     text-align: center;
 
     text-align: center;
 
     text-decoration: none;
 
     text-decoration: none;
−
     padding: 5px 15px;
+
     padding: 10px 18px;
 
     background-color: orange;
 
     background-color: orange;
 +
    height: 50px;
 
}
 
}
  
  
−
nav ul > li a:visited{
+
nav ul > li > a:visited{
 +
    font-family: "Segoe UI";
 
     color: white;
 
     color: white;
 
     display: block;
 
     display: block;
 
     text-align: center;
 
     text-align: center;
 
     text-decoration: none;
 
     text-decoration: none;
−
     padding: 5px 15px;
+
     padding: 10px 18px;
 
     background-color: orange;
 
     background-color: orange;
 
}
 
}
Line 190: Line 325:
 
nav ul ul{
 
nav ul ul{
 
     position: absolute;
 
     position: absolute;
−
     top: 80%;
+
     top: 85%;
 
     border-radius: 0px;  
 
     border-radius: 0px;  
 
     padding: 0;
 
     padding: 0;
 
     width: 180px;
 
     width: 180px;
−
     z-index: 100;
+
     z-index: 1000;
 
     list-style: none;
 
     list-style: none;
 
     border-radius: 10px;
 
     border-radius: 10px;
Line 207: Line 342:
  
 
nav ul ul li a:link {
 
nav ul ul li a:link {
−
padding: 5px 15px;
+
    padding: 5px 15px;
−
color: black;
+
    color: black;
−
                        font-family: "Times New Roman"
+
    font-family: "Segoe UI";
−
}
+
    background-color: orange;
 +
    display: block;
 +
    text-align: center;
 +
    text-decoration: none;
 +
}
  
 
nav ul ul li a:visited {
 
nav ul ul li a:visited {
−
padding: 5px 15px;
+
    padding: 5px 15px;
−
color: black;
+
    color: black;
−
                        font-family: "Times New Roman"
+
    font-family: "Segoe UI";
−
}
+
    background-color: orange;
−
nav ul ul > li:hover > a{
+
    display: block;
 +
    text-align: center;
 +
    text-decoration: none;
 +
}
 +
nav ul ul > li:hover a{
 
color: black;
 
color: black;
 
                                 font-weight: bold;
 
                                 font-weight: bold;
Line 224: Line 367:
 
}
 
}
  
−
nav ul > ul > li:active > a{
+
nav ul > ul > li:active a{
 
                                 background-color: gold;
 
                                 background-color: gold;
 
                         }
 
                         }
 +
 +
.homeimg{
 +
    width:50px;
 +
    height:50px;
 +
}
  
 
.active {
 
.active {
Line 285: Line 433:
 
}
 
}
  
−
@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 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%}
 
−
}
 
  
 
a.special:link {
 
a.special:link {
−
     padding:0;
+
     padding:2px 10px;
 
     background: gold;
 
     background: gold;
 
     border-radius: 10px 0 0 10px;
 
     border-radius: 10px 0 0 10px;
Line 309: Line 442:
  
 
a.special:visited {
 
a.special:visited {
−
     padding:0;
+
     padding:2px 10px;
 
     background: gold;
 
     background: gold;
 
     border-radius: 10px 0 0 10px;
 
     border-radius: 10px 0 0 10px;
Line 369: Line 502:
  
 
     h3.unique {
 
     h3.unique {
−
     width: 178px;
+
     width: 250px;
 
     color:#3b5998;
 
     color:#3b5998;
 
     background-color:white;
 
     background-color:white;
Line 375: Line 508:
 
     text-decoration: none;
 
     text-decoration: none;
 
     padding: 20px;
 
     padding: 20px;
 +
    text-align: center;
 
     }
 
     }
  
 
     h3.unique:hover {
 
     h3.unique:hover {
−
     width: 178px;
+
     width: 250px;
 
     background-color: #3b5998;     
 
     background-color: #3b5998;     
 
     color: white;
 
     color: white;
Line 414: Line 548:
  
 
   .unique1 {
 
   .unique1 {
−
     width: 155px;
+
     width: 220px;
 
     color:#4099FF;
 
     color:#4099FF;
 
     background-color:white;
 
     background-color:white;
Line 420: Line 554:
 
     text-decoration: none;
 
     text-decoration: none;
 
     padding: 20px;
 
     padding: 20px;
 +
    text-align: center;
 
     }
 
     }
  
 
     .unique1:hover {
 
     .unique1:hover {
−
     width: 155px;
+
     width: 220px;
 
     background-color: #4099FF;     
 
     background-color: #4099FF;     
 
     color: white;
 
     color: white;
Line 444: 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>
Line 476: Line 663:
  
 
<nav>
 
<nav>
 +
 
<ul id="nav_bar">
 
<ul id="nav_bar">
 
<li>
 
<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" style="width:40px; height:40px"></img></a>
+
<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>
−
   <li ><a href="https://2016.igem.org/Team:Manchester/Team"><strong>Team</strong></a>
+
   <li><a href="https://2016.igem.org/Team:Manchester/Team"><strong>Team</strong></a>
  
 
       <ul>
 
       <ul>
−
         <li><a href="https://2016.igem.org/Team:Manchester/Team">Team</a></li>
+
         <li><strong><a href="https://2016.igem.org/Team:Manchester/Team">Team</a></strong></li>
−
         <li><a href="https://2016.igem.org/Team:Manchester/Collaborations">Collaborations</a></li>
+
         <li class="dropdown_content"><strong><a href="https://2016.igem.org/Team:Manchester/Attributions">Attributions</a></strong></li>
 
       </ul>
 
       </ul>
  
 
   </li>  
 
   </li>  
  
−
   <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Description"><strong>Project</strong></a>
+
   <li><a href="https://2016.igem.org/Team:Manchester/Description"><strong>Project</strong></a>
  
 
       <ul>
 
       <ul>
−
         <li><a href="https://2016.igem.org/Team:Manchester/Description">Description</a></li>
+
         <li><strong><a href="https://2016.igem.org/Team:Manchester/Description">Overview</a></strong></li>
−
         <li><a href="https://2016.igem.org/Team:Manchester/Results">Result</a></li>
+
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Description/mechanism1">Cell-free Mechanism</a></strong></li>
−
         <li><a href="https://2016.igem.org/Team:Manchester/Notebook">Notebook</a></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>
 
       </ul>
  
 
   </li>
 
   </li>
  
−
   <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Parts"><strong>Parts</strong></a>
+
   <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Achievement"><strong>Achievement</strong></a>
  
 
       <ul>
 
       <ul>
−
         <li><a href="https://2016.igem.org/Team:Manchester/Parts">Parts</a></li>
+
         <li><strong><a href="https://2016.igem.org/Team:Manchester/Achievement">Overview</a></strong></li>
−
         <li><a href="https://2016.igem.org/Team:Manchester/Basic_Part">Basic Part</a></li>
+
         <li><strong><a href="https://2016.igem.org/Team:Manchester/Judging">Judging Criteria</a></strong></li>
−
         <li><a href="https://2016.igem.org/Team:Manchester/Composite_Part">Composite part</a></li>
+
         <li><strong><a href="https://2016.igem.org/Team:Manchester/Collaborations">Collaborations</a></strong></li>
−
         <li><a href="https://2016.igem.org/Team:Manchester/Part_Collection">Parts collection</a></li>      
+
         <li><strong><a href="https://2016.igem.org/Team:Manchester/Parts">Parts</a></strong></li>    
 
       </ul>
 
       </ul>
  
 
   </li>
 
   </li>
  
−
  <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>
 
 
   <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Human_Practices"><strong>Human Practices</strong></a>
 
   <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Human_Practices"><strong>Human Practices</strong></a>
  
 
       <ul>
 
       <ul>
−
         <li><a href="https://2016.igem.org/Team:Manchester/Human_Practices">Human Practices</a></li>
+
         <li><strong><a href="https://2016.igem.org/Team:Manchester/Human_Practices">Overview</a></strong></li>
−
         <li><a href="https://2016.igem.org/Team:Manchester/HP/Gold">Gold</a></li>
+
        <li><strong><a href="https://2016.igem.org/Team:Manchester/Human_Practices/Charities">Charities</a></strong></li>
−
         <li><a href="https://2016.igem.org/Team:Manchester/HP/Silver">Sliver</a></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>
 
       </ul>
  
  
 
   </li>
 
   </li>
−
   <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Model"><strong>Awards</strong></a>
+
   <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Model"><strong>Modelling</strong></a>
 
      
 
      
 
     <ul>
 
     <ul>
−
         <li><a href="https://2016.igem.org/Team:Manchester/Model">Modelling</a></li>
+
         <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>
 +
  <li class="dropdown_content"><a href="https://2016.igem.org/Team:Manchester/Safety"><strong>Safety</strong></a></li>
 
</ul>
 
</ul>
−
</nav>
 
−
 
−
 
−
 
−
 
  
 +
</nav>
  
  
Line 556: Line 753:
  
  
 +
</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>
 
</script>
  
 
</html>
 
</html>

Latest revision as of 19:39, 26 November 2016