Difference between revisions of "Template:Toronto/CSS"

 
(599 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
 +
<head>
 +
<!--link rel="stylesheet" href="https://2018.igem.org/Template:Toronto/css/styleNavBarTympanus?action=raw&ctype=text/css" type="text/css"/-->
 +
 +
 +
<script type="text/javascript" src="https://2018.igem.org/Template:Toronto/js/jqueryeasing1_3?action=raw&ctype=text/javascript"></script>
 +
 +
<script type="text/javascript" async
 +
  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML" async>
 +
</script>
 +
</head>
 +
 
<style>
 
<style>
−
.testClass {  
+
ul.sdt_menu{
−
    background-color: grey;
+
margin:0;
 +
padding:0;
 +
padding-bottom: 86px;
 +
list-style: none;
 +
font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
 +
font-size:14px;
 +
width:99%;
 +
}
 +
ul.sdt_menu a{
 +
text-decoration:none;
 +
outline:none;
 +
}
 +
ul.sdt_menu li{
 +
float:right;
 +
width:170px;
 +
height:85px;
 +
position:relative;
 +
cursor:pointer;
 +
}
 +
ul.sdt_menu li > a{
 +
position:absolute;
 +
top:0px;
 +
left:0px;
 +
width:170px;
 +
height:86px;
 +
z-index:12;
 +
background:transparent url(../images/overlay.png) no-repeat bottom right;
 +
-moz-box-shadow:0px 0px 2px #000 inset;
 +
-webkit-box-shadow:0px 0px 2px #000 inset;
 +
box-shadow:0px 0px 2px #000 inset;
 +
}
 +
ul.sdt_menu li a img{
 +
border:none;
 +
position:absolute;
 +
width:0px;
 +
height:0px;
 +
bottom:0px;
 +
left:85px;
 +
z-index:100;
 +
-moz-box-shadow:0px 0px 4px #000;
 +
-webkit-box-shadow:0px 0px 4px #000;
 +
box-shadow:0px 0px 4px #000;
 +
}
 +
ul.sdt_menu li span.sdt_wrap{
 +
position:absolute;
 +
top:25px;
 +
left:0px;
 +
width:170px;
 +
height:60px;
 +
z-index:15;
 +
}
 +
ul.sdt_menu li span.sdt_active{
 +
position:absolute;
 +
background:#111;
 +
top:85px;
 +
width:170px;
 +
height:0px;
 +
left:0px;
 +
z-index:14;
 +
-moz-box-shadow:0px 0px 4px #000 inset;
 +
-webkit-box-shadow:0px 0px 4px #000 inset;
 +
box-shadow:0px 0px 4px #000 inset;
 +
}
 +
ul.sdt_menu li span span.sdt_link,
 +
ul.sdt_menu li span span.sdt_descr,
 +
ul.sdt_menu li div.sdt_box a{
 +
margin-left:15px;
 +
text-transform:uppercase;
 +
text-shadow:1px 1px 1px #000;
 +
}
 +
ul.sdt_menu li span span.sdt_link{
 +
color:#fff;
 +
font-size:24px;
 +
float:left;
 +
clear:both;
 +
}
 +
ul.sdt_menu li span span.sdt_descr{
 +
color:#0B75AF;
 +
float:left;
 +
clear:both;
 +
width:155px; /*For dumbass IE7*/
 +
font-size:10px;
 +
letter-spacing:1px;
 +
}
 +
ul.sdt_menu li div.sdt_box{
 +
display:block;
 +
position:absolute;
 +
width:170px;
 +
overflow:hidden;
 +
height:170px;
 +
top:86px;
 +
left:0px;
 +
display:none;
 +
background:#000;
 +
}
 +
ul.sdt_menu li div.sdt_box a{
 +
float:left;
 +
clear:both;
 +
line-height:30px;
 +
color:#0B75AF;
 +
}
 +
ul.sdt_menu li div.sdt_box a:first-child{
 +
margin-top:10px;
 +
}
 +
ul.sdt_menu li div.sdt_box a:hover{
 +
color:#fff;
 
}
 
}
−
#top_title {
 
−
display: none;}
 
  
−
#content {
 
−
padding: 0px;}
 
  
−
.logo_2018 {  
+
 
−
     background-color: grey;
+
 
−
    display:none;
+
<!--xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx-->
 +
 
 +
 
 +
 
 +
 
 +
 
 +
.tempClassWrapper {
 +
     background-color: white;
 
}
 
}
  
−
.mw-body {  
+
.bodyWhiteClass {
−
     background-color: grey !important;
+
     background-color: #ffffff;
−
     border: none !important;
+
     padding-right: 100px;
−
     padding: 0px;
+
     padding-left: 100px;
 
}
 
}
  
−
.top_title {  
+
.bodyClearClass {
−
     background-color: red !important;
+
     background-color: none;
−
     display:none;
+
     padding-right: 100px;
 +
    padding-left: 100px;
 +
    width: 100%;
 
}
 
}
  
−
.lavalamp {
+
.oneLineSpacerClass{
−
position:relative;
+
    padding-bottom: 20px;
 +
width: 100%;
 
}
 
}
−
.lavalamp-item {
+
 
−
z-index:5;
+
.paddingClassSimple{
−
position:relative;
+
  padding: 10px;
 
}
 
}
−
.lavalamp-object {
+
 
−
position:absolute;
+
.translucentClass {
−
top:0;
+
    background-color: #ffffff;
−
left:0;
+
    opacity: 0.6;
 +
    color: black;
 +
}
 +
.center {
 +
    float: center;
 +
    padding: 20px;
 +
    margin: auto;
 +
}
 +
.halfClass {
 +
    width: 50%;
 +
    padding: 20px;
 +
    float: left;
 +
}
 +
.twoThirdClass{
 +
    width: 66%;
 +
    padding: 20px;
 +
    float: left;
 +
}
 +
.oneThirdClass{
 +
    width: 32%;
 +
    float: left;
 +
}
 +
.oneQuarterClass{
 +
    width: 25%;
 +
    float: left;
 
}
 
}
  
−
/* Custom easing transitions */
+
.tertiaryPagesClass {
 +
    width: 70%;
 +
    padding: 20px;
 +
    float: left;
 +
    box-shadow: inset 0 0 300px black;
 +
}
  
 +
.headerspacer {
 +
    padding-top: 100px;
 +
    padding-bottom: 200px;
 +
    width: 100%;
 +
}
  
−
.lavalamp .lavalamp-object {
+
.navBarSpacer {
−
-webkit-transition-property:-webkit-transform, width, height;
+
    background: #ffffff url("https://static.igem.org/mediawiki/2018/e/e1/T--Toronto--Day_HP-banner-mk2.gif");
−
-moz-transition-property:-moz-transform, width, height;
+
    background-size: 100%;
−
-o-transition-property:-o-transform, width, height;
+
background-position-y: top: 55%;
−
transition-property:transform, width, height;
+
background-repeat: no-repeat;
 +
    z-index: 99;
 +
top: 0px;
 
}
 
}
−
.lavalamp .lavalamp-object.ease {
+
 
−
-webkit-transition-timing-function: ease;
+
.testClass {
−
-moz-transition-timing-function: ease;
+
    background-color: none;
−
-o-transition-timing-function: ease;
+
    padding: 10px;
−
transition-timing-function: ease;
+
 
}
 
}
−
.lavalamp .lavalamp-object.ease-in {
+
 
−
-webkit-transition-timing-function: ease-in;
+
.logo_2018 {
−
-moz-transition-timing-function: ease-in;
+
    background-color: grey;
−
-o-transition-timing-function: ease-in;
+
    display:none;
−
transition-timing-function: ease-in;
+
 
}
 
}
−
.lavalamp .lavalamp-object.ease-out {
+
 
−
-webkit-transition-timing-function: ease-out;
+
.mw-body {
−
-moz-transition-timing-function: ease-out;
+
    background-color: white;
−
-o-transition-timing-function: ease-out;
+
    border: none !important;
−
transition-timing-function: ease-out;
+
    padding: 0px;
 
}
 
}
−
.lavalamp .lavalamp-object.ease-in-out {
+
 
−
-webkit-transition-timing-function: ease-in-out;
+
.video-background {
−
-moz-transition-timing-function: ease-in-out;
+
  background: #000;
−
-o-transition-timing-function: ease-in-out;
+
  position: fixed;
−
transition-timing-function: ease-in-out;
+
  top: 0; right: 0; bottom: 0; left: 0;
 +
  z-index: -99;
 
}
 
}
−
.lavalamp .lavalamp-object.linear {
+
.video-foreground,
−
-webkit-transition-timing-function: linear;
+
.video-background iframe {
−
-moz-transition-timing-function: linear;
+
  position: absolute;
−
-o-transition-timing-function: linear;
+
  top: 0;
−
transition-timing-function: linear;
+
  left: 0;
 +
  width: 100%;
 +
  height: 100%;
 +
  pointer-events: none;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInQuad {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+
.crop {
−
-moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+
    width: 170px;
−
-o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+
    height: 170px;
−
transition-timing-function: cubic-bezier(0.550, 0.085, 0.680, 0.530);
+
    overflow: hidden;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInCubic {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
#top_title {
−
-moz-transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
display: none;}
−
-o-transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
 
−
transition-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
+
#top_menu_inside {
 +
width: 965px;}
 +
 
 +
#content {
 +
padding: 0px;
 +
position: relative;
 +
width: 100%;
 +
top: -10px;
 +
background: white;
 +
margin-left: 0px;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInQuart {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+
.bubbles{
−
-moz-transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+
  position:absolute;
−
-o-transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+
  top:100%;
−
transition-timing-function: cubic-bezier(0.895, 0.030, 0.685, 0.220);
+
  left:0;
 +
  width:100%;
 +
  height:100%;
 +
  z-index: 9;
 +
  transform: translateZ(0);
 
}
 
}
−
.lavalamp .lavalamp-object.easeInQuint {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
.bubbles li{
−
-moz-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
  position: absolute;
−
-o-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
  list-style: none;
−
transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
+
  display: block;
 +
  background-color: rgba(0,0,255,1);
 +
  bottom: -100px;
 +
  animation: square 20s infinite;
 +
  transition-timing-function: linear;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInSine {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+
.bubbles li:nth-child(1){
−
-moz-transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+
  width: 40px;
−
-o-transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+
  height: 40px;
−
transition-timing-function: cubic-bezier(0.470, 0.000, 0.745, 0.715);
+
  left: 20%;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInExpo {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+
.bubbles li:nth-child(2){
−
-moz-transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+
  width: 60px;
−
-o-transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+
  height: 60px;
−
transition-timing-function: cubic-bezier(0.950, 0.050, 0.795, 0.035);
+
  left: 40%;
 +
  animation-delay: 2s;
 +
  animation-duration: 17s;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInCirc {
+
.bubbles li:nth-child(3){
−
-webkit-transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+
  width: 10px;
−
-moz-transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+
  height: 10px;
−
-o-transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+
  left: 60%;
−
transition-timing-function: cubic-bezier(0.600, 0.040, 0.980, 0.335);
+
  animation-delay: 4s;
 +
  animation-duration: 13s;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInBack {
+
.bubbles li:nth-child(4){
−
-webkit-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
  width: 80px;
−
-moz-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
  height: 80px;
−
-o-transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
  left: 80%;
−
transition-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
+
  animation-delay: 1s;
 +
  animation-duration: 22s;
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutQuad {
+
.bubbles li:nth-child(5){
−
-webkit-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+
  width: 50px;
−
-moz-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+
  height: 50px;
−
-o-transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+
  left: 50%;
−
transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940);
+
  animation-delay: 7s;
 +
  animation-duration: 12s;
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutCubic {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
@keyframes square{
−
-moz-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
  0%{
−
-o-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
    transform:translateY(0);
−
transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
+
  }
 +
  100%{
 +
    transform:translateY(-1080px) rotate(630deg);
 +
  }
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutQuart {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+
body {
−
-moz-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+
background-color: white;
−
-o-transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+
background: #808080;
−
transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutQuint {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+
.grid-container {
−
-moz-transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+
  display: grid;
−
-o-transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+
  grid-template-columns: 300px 300px 300px;
−
transition-timing-function: cubic-bezier(0.230, 1.000, 0.320, 1.000);
+
  grid-gap: 50px;
 +
  background-color: rgba(0,0,0,1.0);
 +
  border-radius: 0px;
 +
  padding-bottom: 30px;
 +
  padding-top: 30px;
 +
  align-items: stretch;
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutSine {
+
.grid-container > div {
−
-webkit-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+
  background-color: rgba(15,65,92,1.0);
−
-moz-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+
  border: 3px solid white;  
−
-o-transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+
border-radius: 0%;
−
transition-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000);
+
  text-align: center;
 +
  padding: 50px 20px;
 +
  font-size: 30px;
 +
  line-height: 30px;
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutExpo {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+
.center {
−
-moz-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+
    position: relative;
−
-o-transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+
−
transition-timing-function: cubic-bezier(0.190, 1.000, 0.220, 1.000);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutCirc {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+
.centerPacker{
−
-moz-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+
  margin: 0;
−
-o-transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+
  position: absolute;
−
transition-timing-function: cubic-bezier(0.075, 0.820, 0.165, 1.000);
+
  top: 50%;
 +
  left: 50%;
 +
  -ms-transform: translate(-50%, -50%);
 +
  transform: translate(-50%, -50%);
 
}
 
}
−
.lavalamp .lavalamp-object.easeOutBack {
+
 
−
-webkit-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
 
−
-moz-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
.page-section {
−
-o-transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
/*height: 480px;*/
−
transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+
width: 60%;
 +
margin-left: 25%;
 +
margin-top: 0px;
 +
padding: 3em;
 +
background: linear-gradient(45deg, #ffffff 10%, #ffffff 90%);
 +
color: black;
 +
box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.5);
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutQuad {
+
.navigation {
−
-webkit-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+
transition: all 0.1s ease;
−
-moz-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+
position: fixed;
−
-o-transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+
width: 20%;
−
transition-timing-function: cubic-bezier(0.455, 0.030, 0.515, 0.955);
+
margin-left: 2%;
 +
background-color: #999;
 +
color: #ffffff;
 +
border-radius: 20px;
 +
text-align: center;
 +
font-family: "Arial", Helvetica, sans-serif;
 +
font-size: 14px;
 +
line-height: 14px;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutCubic {
+
.navigation__link {
−
-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
display: block;
−
-moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
color: #ddd;
−
-o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
text-decoration: none;
−
transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
padding: 10px;
 +
font-weight: 400;
 +
border-radius: 20px;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutQuart {
+
.navigation__link:hover {
−
-webkit-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
background-color: #aaa;
−
-moz-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
border-radius: 20px;
−
-o-transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
−
transition-timing-function: cubic-bezier(0.645, 0.045, 0.355, 1.000);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutQuint {
+
.navigation__link.active {
−
-webkit-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+
color: white;
−
-moz-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+
background-color: rgba(0, 0, 0, 0.1);
−
-o-transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+
−
transition-timing-function: cubic-bezier(0.860, 0.000, 0.070, 1.000);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutSine {
+
.backgroundTertiaryHandler{
−
-webkit-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
background-color: black;
−
-moz-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
background: linear-gradient(0deg, #ffffff 10%, rgba(15,65,92,1.0) 90%);
−
-o-transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
padding-top: 25px;
−
transition-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950);
+
margin-top: 0px;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutExpo {
+
.backgroundTertiaryHandler h3{
−
-webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+
font-size: 64px;
−
-moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+
line-height: 65px;
−
-o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+
text-align: center;
−
transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000);
+
color: black;
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutCirc {
+
.backgroundTertiaryHandler h1{
−
-webkit-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+
font-size: 24px;
−
-moz-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+
line-height: 25px;
−
-o-transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+
color: black;
−
transition-timing-function: cubic-bezier(0.785, 0.135, 0.150, 0.860);
+
 
}
 
}
−
.lavalamp .lavalamp-object.easeInOutBack {
+
.backgroundTertiaryHandler p{
−
-webkit-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
font-size: 14px;
−
-moz-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
line-height: 14px;
−
-o-transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
color: black;
−
transition-timing-function: cubic-bezier(0.680, -0.550, 0.265, 1.550);
+
 
}
 
}
  
−
body {
 
−
background-color: grey !important;
 
−
background: #ffffff url("http://files.all-free-download.com//downloadfiles/wallpapers/1920_1080/colors_explosion_wallpaper_abstract_3d_45.jpg");
 
−
}
 
 
</style>
 
</style>
  
−
<div class="BackgroundLayout">
+
 
−
     <div class="topWikiNavBackground"></div>
+
<script>
−
    <div id="sticky-anchor"></div>
+
$(function() {
−
     <div class="top bannerShadow">
+
$('#navBarBackground > ul').bind('mouseenter',function(){
−
         <div class="NavbarContainer">
+
var $elem = $(this);
−
            <div class="TopLogoAlt2">
+
    <!--BEGIN Animate NavBar Test-->
−
                    <!--<a href="https://2014.igem.org/Team:SDU-Denmark">*/
+
    $elem.stop(true)
−
                    /*    <img src="https://static.igem.org/mediawiki/2014/1/11/2014SDU_Logo_BlackWhite_Small.png" height="75px">*/
+
    $elem.animate({
−
                    /*</a>*/-->
+
'padding-bottom':'170px'
−
            </div>
+
    },100,'easeOutBack')
 +
$elem.find('li > a').animate({'height':'170px'},100,'easeOutBack')
 +
    <!--END Animate NavBar Test-->
 +
}).bind('mouseleave',function(){
 +
var $elem = $(this);
 +
    <!--BEGIN Animate NavBar Test ENDER-->
 +
$elem.find('li > a').animate({'height':'86px'},0,'easeOutBack')
 +
    $elem.animate({
 +
'padding-bottom':'86px'
 +
    },100)
 +
    <!--END Animate NavBar Test ENDER-->
 +
});
 +
 
 +
 
 +
$('#sdt_menu > li').bind('mouseenter',function(){
 +
var $elem = $(this);
 +
<!--BEGIN Animate NavBar Test-->
 +
$elem.stop(true)
 +
<!--END Animate NavBar Test-->
 +
$elem.find('img')
 +
.stop(true)
 +
.animate({
 +
'width':'170px',
 +
'height':'170px',
 +
'left':'0px'
 +
},200,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
.stop(true)
 +
.animate({'top':'240px'},200,'easeOutBack')
 +
.andSelf()
 +
.find('.sdt_active')
 +
.stop(true)
 +
.animate({'height':'170px', 'top':'170px'},100,function(){
 +
var $sub_menu = $elem.find('.sdt_box');
 +
if($sub_menu.length){
 +
var left = '-170px';
 +
if($elem.parent().children().length == $elem.index()+1)
 +
left = '170px';
 +
$sub_menu.show().animate({'left':left, 'top':'170px'},100);
 +
}
 +
});
 +
}).bind('mouseleave',function(){
 +
var $elem = $(this);
 +
<!--BEGIN Animate NavBar Test ENDER-->
 +
 
 +
<!--END Animate NavBar Test ENDER-->
 +
var $sub_menu = $elem.find('.sdt_box');
 +
if($sub_menu.length)
 +
$sub_menu.hide().css('left','0px');
 +
 
 +
$elem.find('.sdt_active')
 +
.stop(true)
 +
.animate({'height':'0px'},0)
 +
.andSelf().find('img')
 +
.stop(true)
 +
.animate({
 +
'width':'0px',
 +
'height':'0px',
 +
'left':'86px'},100)
 +
.andSelf()
 +
.find('.sdt_wrap')
 +
.stop(true)
 +
.animate({'top':'25px'},200);
 +
});
 +
});
 +
</script>
 +
 
 +
<script>
 +
$(document).ready(function() {
 +
$('a[href*=#]').bind('click', function(e) {
 +
e.preventDefault(); // prevent hard jump, the default behavior
 +
 +
var target = $(this).attr("href"); // Set the target as variable
 +
 +
// perform animated scrolling by getting top-position of target-element and set it as scroll target
 +
$('html, body').stop().animate({
 +
scrollTop: $(target).offset().top
 +
}, 600, function() {
 +
location.hash = target; //attach the hash (#jumptarget) to the pageurl
 +
});
 +
 +
return false;
 +
});
 +
});
 +
 
 +
$(window).scroll(function() {
 +
var scrollDistance = $(window).scrollTop();
 +
 +
// Show/hide menu on scroll
 +
//if (scrollDistance >= 850) {
 +
// $('nav').fadeIn("fast");
 +
//} else {
 +
// $('nav').fadeOut("fast");
 +
//}
 +
 +
// Assign active class to nav links while scolling
 +
$('.page-section').each(function(i) {
 +
if ($(this).position().top <= scrollDistance) {
 +
$('.navigation a.active').removeClass('active');
 +
$('.navigation a').eq(i).addClass('active');
 +
}
 +
});
 +
}).scroll();
 +
</script>
 +
 
 +
 
 +
<script>
 +
$(function() {
 +
    var $anchor = $("#scroller-anchor");
 +
    var $scroller = $('#mainNav');
 +
 
 +
    var move = function() {
 +
        var st = $(window).scrollTop();
 +
        var ot = $anchor.offset().top - 50;
 +
        if(st > ot) {
 +
          $scroller.css({
 +
              position: "fixed",
 +
              top: "50px",
 +
              float: "left"
 +
          });
 +
        } else {
 +
          $scroller.css({
 +
              position: "relative",
 +
              top: "",
 +
              float: "left"
 +
          });
 +
        }
 +
     };
 +
    $(window).scroll(move);
 +
    move();
 +
});
 +
</script>
 +
 
 +
<body>
 +
<div id="navBarBackground" class="navBarSpacer" style="background-color=black;">
 +
<ul id="sdt_menu" class="sdt_menu" <!--style="padding-top:90px;--> style="position:fixed; background-color=black; padding-bottom: 86px;">
 +
 +
<li>
 +
<a href="https://2018.igem.org/Team:Toronto/WetLab">
 +
<img src="https://static.igem.org/mediawiki/2018/1/19/T--Toronto--wetlabnavbaricon.jpg" alt=""/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">WetLab</span>
 +
<span class="sdt_descr">Laboratory Experiments</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box" style="z-index: 99; opacity: 1.0; height:170px;">
 +
                        <a href="https://2018.igem.org/Team:Toronto/WetLab/ExperimentProtocols">Protocols</a>
 +
                        <a href="https://2018.igem.org/Team:Toronto/WetLab/Notebook">Notebook</a>
 +
                        <a href="https://2018.igem.org/Team:Toronto/WetLab/Results">Results</a>
 +
                        <a href="https://2018.igem.org/Team:Toronto/WetLab/Parts">Parts</a>
 +
<a href="https://2018.igem.org/Team:Toronto/InterLab">InterLab</a>
 +
</div>
 +
</li>
 +
  <li>
 +
     <a href="https://2018.igem.org/Team:Toronto/DryLab">
 +
      <img src="https://static.igem.org/mediawiki/2018/3/33/T--Toronto--2018_drylabnavbaricon.jpg" alt=""/>
 +
      <span class="sdt_active"></span>
 +
      <span class="sdt_wrap">
 +
         <span class="sdt_link">DryLab</span>
 +
        <span class="sdt_descr">Computational Projects</span>
 +
      </span>
 +
    </a>
 +
    <div class="sdt_box" style="z-index: 99; opacity: 1.0;">
 +
      <a href="https://2018.igem.org/Team:Toronto/Model">Model</a>
 +
    </div>
 +
  </li>
 +
  <li>
 +
    <a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices">
 +
    <div class="crop">
 +
      <img src="https://static.igem.org/mediawiki/2018/5/53/T--Toronto--pnpnavbaricon.jpg" alt=""/>
 +
    </div>
 +
      <span class="sdt_active"></span>
 +
      <span class="sdt_wrap">
 +
        <span class="sdt_link">P & P</span>
 +
        <span class="sdt_descr">Policy and Practices</span>
 +
      </span>
 +
    </a>
 +
    <div class="sdt_box" style="z-index: 99; opacity: 1.0;">
 +
      <a href="https://2018.igem.org/Team:Toronto/Human_Practices">Human Practices</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/Public_Engagement">Engagement</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/PolicyAndPractices/Outreach">Outreach</a>
 +
    </div>
 +
  </li>
 +
 
 +
  <li>
 +
    <a href="https://2018.igem.org/Team:Toronto/Project">
 +
      <img src="https://static.igem.org/mediawiki/2018/1/18/T--Toronto--projectnavbaricon.jpg" alt=""/>
 +
      <span class="sdt_active"></span>
 +
      <span class="sdt_wrap">
 +
        <span class="sdt_link">Project</span>
 +
        <span class="sdt_descr">Team Behind the Project</span>
 +
      </span>
 +
    </a>
 +
    <div class="sdt_box" style="z-index: 99; opacity: 1.0;">
 +
      <a href="https://2018.igem.org/Team:Toronto/Project/Description">Description</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/Demonstrate">Demonstrate</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/Project/Team">Team</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/Collaborations">Collaborations</a>
 +
      <a href="https://2018.igem.org/Team:Toronto/Attributions">Attributions</a>
 +
    </div>
 +
  </li>
 +
<li>
 +
<a href="https://2018.igem.org/Team:Toronto">
 +
<img src="https://static.igem.org/mediawiki/2018/8/8b/HQ_page_logo.jpg" alt="iGEM Logo was here"/>
 +
<span class="sdt_active"></span>
 +
<span class="sdt_wrap">
 +
<span class="sdt_link">iGEM</span>
 +
<span class="sdt_descr">iGEM Home Page</span>
 +
</span>
 +
</a>
 +
<div class="sdt_box" style="z-index: 99; opacity: 1.0;">
 +
<a href="https://2018.igem.org/Main_Page">iGEM Home</a>
 +
<a href="https://2018.igem.org/Team:Toronto">iGEM Toronto</a>
 +
</div>
 +
</li>
 +
</ul>
 +
</div>
 +
</body>
  
 
</html>
 
</html>

Latest revision as of 00:23, 17 October 2018