Difference between revisions of "Team:TU-Eindhoven/NavMenu"

Revision as of 09:02, 30 August 2018

/* Nav bar */ .navbar {

 margin-bottom: 0;
 margin-top: 15px;
 z-index: 99;

} @media only screen and (min-width: 768px){

 .dropdown:hover .dropdown-menu {
   display:block;
 }

} .logo {

 padding:5px;

} .logo > img {

 height: 100%

} .navbar-fixed-top + div {

 margin-top:65px;

} .white {

 background-color:white;

} .neat {

 margin-top:0;
 margin-bottom: 0;

} .logbook {

 background: white url("") repeat-y;
 padding: 35px 25px 25px 85px;
 margin: 0 auto;
 max-width: 1200px;
 text-align: left;

} h1, h2 { font-weight: bold; } p { font-size: 16px; } .jumbotron {

 text-align: center;
 /* background-color: #FFF444; */

} .jumbotron p { font-size: 20px; } .main-wrapper {

 /*background-image: linear-gradient(to bottom right,
   rgba(57, 44, 172, 0.801), rgba(164, 4, 196, 0.521));
 */
 margin-bottom: 0;

}

main {

 margin-top: 54px;
 margin-bottom: 15px;

} .integrated-content, .ethics-content, .safe-content, .stakeholder-content {

 margin-top: 15px;
 /* margin-top: 54px; */
 margin-bottom: 15px;

} .round {

 border-radius: 6px;

} .navbar-inverse { background: #2E2F31; border: 0; } .navbar-inverse .navbar-nav li a { color: #f7f7f7; font-size: 16px; } .navbar-inverse .navbar-nav li a:hover { background: rgba(126, 0, 151); } .dropdown-menu { background: #2E2F31; border-radius: 0; border: 0; } .dropdown-menu li a { padding: 10px; } .navbar-inverse .navbar-nav .dropdown-menu li a:hover { background: rgb(40, 0, 48); }

/* footer */ .footer {

 /* webkit example */
 /* background-image: -webkit-gradient(
   linear, right top, left top, from(rgba(255, 255, 255, 1.0)),
   to(rgba(255, 255, 255, 0))
 ); */

 /* mozilla example - FF3.6+ */
 /* background-image: linear-gradient(
   rgba(255, 255, 255, 0), rgba(255, 255, 255, 1.0)
 ); */
 background-color:white;

 /* margin-top:7px; */
 padding:25px;
 padding-bottom: 0px;
 text-align: center;
 width: 100%;

} .footer a {

 color: white;
 text-decoration : none;
 margin:0px 20px;
 bottom: 0px;
 width: 100%;

} .fengexian {

 color: #CCDFCB;
 margin-top: 30px;
 margin-bottom: 30px;
 margin-right:10%;
 margin-left: 10%;

} .sponsoren {

 width:20%;
 max-height:initial;
 margin:30px;
 vertical-align: middle;
 max-width: 200px;
 min-width: 100px;

} .contactus {

 line-height: 1.6;
 text-align: center;
 background-color: #cc0234;
 margin-right: -25px;
 margin-left: -25px;
 font-size: 20px;

} .contactus div {

 height: 32px;

} .contactus img {

 height: 20px;

} /* footer mobile */ @media screen and (max-width: 800px) {

 .sponsoren {
   width:100%;
   margin:12px 0;
 }
 .footer a {
   margin: 5px;
 }
 .contactus a span {
   display: none;
 }

}

/* document styles */ html, body {

 height: 100%

} body {

 min-height: 100%;
 box-sizing: border-box;
 padding: 0;
 margin: 0;
 font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
 font-weight: normal;
 font-size: 16px;

} h1, h2, h3, h4, h5, h6 {

 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 color: #10487c;

}

HQ_page h1,
HQ_page h2,
HQ_page h3,
HQ_page h4,
HQ_page h5,
HQ_page h6 {

 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 color: #10487c;
 padding-top:1px;
 padding-bottom:1px;

}

HQ_page h1,
HQ_page h2 {

 padding-bottom:5px;

} .myAnswer {

 padding-left:30px;

} .emph {

 color:rgb(49, 49, 49);
 text-decoration: underline;

} .timeline h3 {

 margin-top: 0px;

} .myModal-header h3 {

 margin-top: 20px;

} p {

 color:rgb(56, 56, 56);
 line-height: 1.6;

}

selection {

 /* color: red; */
 background: rgb(0, 149, 207);

} /* explanation quote */ .klk2elaborate {

 cursor: help;
 color:rgb(0, 102, 255);

} .klk2elaborate::before {

 content:"[";
 color: rgb(31, 112, 233);

} .klk2elaborate::after {

 content: "]⇓";
 color: rgb(31, 112, 233);

} .moreinfo {

 cursor: pointer;
 color: rgb(31, 112, 233);
 text-decoration-style: underline;

} .moreinfo::after {

 content: "⇓";
 color: rgb(31, 112, 233);

} .moreinfo:hover {

 text-decoration: underline;

} .disappear {

 display: none;

} .explanation {

 background: #f9f9f9;
 border-left: 10px solid #ccc;
 margin: 1.5em 10px;
 padding: 0.5em 10px;
 quotes: "\201C""\201D""\2018""\2019";

} .explanation::before {

 color: #ccc;
 /* content: open-quote; */
 font-size: 4em;
 line-height: 0.1em;
 margin-right: 0.25em;
 vertical-align: -0.4em;

} /* figure */ /* .figureWrapper {

} */ .figureMiddle {

 margin: 0.5em;

} .figureRight {

 margin: 0.5em 0 1.3em 1.4em;
 clear: right;
 float: right;

} .figureMiddle .figureFrame{

 margin: 0 auto;
 max-width:75%;
 /* max-height: 300px; */
 /* max-height:400px; */
 border: 1px solid #c8ccd1;
 padding: 3px;
 background-color: #f8f9fa;

} .figureRight .figureFrame {

 max-width:300px;
 border: 1px solid #c8ccd1;
 padding: 3px;
 background-color: #f8f9fa;
 font-size: 94%;
 overflow: hidden;

} .figureCaption p{

 text-align: left;
 font-size: 13px;

} .figureModal {

 cursor: pointer;

} img.figure {

 width: 100%;

}

/* Style the Image Used to Trigger the Modal */

.figure:hover {opacity: 0.8;} .modal-body .figure:hover {

 opacity: 1;

}

/* The Modal (background) */ .figureModalWindow {

 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 999; /* Sit on top */
 padding-top: 100px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
 /* overflow: hidden; */

}

/* Modal Content (Image) */ .figureModal-content {

 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;

} .figureModal-content-wide {

 margin: auto;
 display: block;
 max-width: 80%;

}

/* Caption of Modal Image (Image Text) - Same Width as the Image */ .modalCaption {

 margin: auto;
 display: block;
 width: 80%;
 max-width: 700px;
 text-align: center;
 color: #ccc;
 padding: 10px 0;
 height: 150px;

} .modalCaption p{

 color: #ccc;

} /* Add Animation - Zoom in the Modal */ .figureModal-content, .modalCaption {

 animation-name: zoomFigure;
 animation-duration: 0.3s;

}

@keyframes zoomFigure {

 from {transform:scale(0)}
 to {transform:scale(1)}

}

/* The Close Button */ .closeFigure {

 position: absolute;
 top: 15px;
 right: 35px;
 color: #f1f1f1;
 font-size: 40px;
 font-weight: bold;
 transition: 0.3s;

}

.closeFigure:hover, .closeFigure:focus {

 color: #bbb;
 text-decoration: none;
 cursor: pointer;

}

/* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){

 .figureModal-content {
     width: 100%;
 }

} /* lab annotation */ .annotationImg {

 max-width: 600px;
 position: relative;
 margin-left: auto;
 margin-right: auto;
 border: 2px solid blue;
 padding: 3px;

} .annotationImg img {

 width: 100%;

} .annotation-dot {

 position: absolute;
 z-index: 100;
 width: 20px;
 height: 20px;
 /* cursor: pointer; */
 cursor: url(/images/zoom_in.png), auto;
 border: 5px solid purple;
 background-color: orangered;
 opacity: 0.3;
 border-radius: 50%;
 margin-right: -50%;
 transform: translate(-50%, -50%);

} .annotation-dot:hover {

 opacity: 1;
 animation-name: goSolid;
 animation-duration: 0.7s;

} @keyframes goSolid {

 from {opacity: 0.5;}
 to {opacity: 1};

} /* .tooltiptext {

 display: none;

} */ .tooltip {

 /* position: relative; */
 display: inline-block;
 /* border-bottom: 1px dotted black; */

} .tooltip .anno-text {

 visibility: hidden;
 width: 120px;
 background-color: black;
 color: #fff;
 text-align: center;
 border-radius: 6px;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 bottom: 150%;
 left: 50%;
 margin-left: -60px;

} .tooltip .anno-text::after {

 content: "";
 position: absolute;
 top: 100%;
 left: 50%;
 margin-left: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: black transparent transparent transparent;

} .tooltip:hover .anno-text {

 visibility: visible;

} .zoomInFrame {

 padding:0px;
 border:2px solid yellow;
 max-width:300px;
 background-color:white;

} .zoomInFrame img{

 width:100%;

}

/* toc */ .docs, .introduction{

 /* font-size: 1.2em; */
 position: relative;
 /* background-color:#FFFFFF; */
 /* box-shadow: 2px 2px 10px #919191; */

} .introduction {

 width: 100%;
 /*text-align: center;*/

} .introduction h1 {

 margin-left: auto;
 margin-right: auto;

} .introduction p {

 text-align: justify;

} .introduction img{

 width:100px;

}

introDiv, #main {

 font-family: 'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;

} .toc-column {

 padding-left: 0;
 /* background-color: #FFFFFF; */

} .toc-wrapper{

 position: sticky;
 top:100px;
 right: 0px;
 margin-top:20px;
 margin-bottom: 15px;
 border-radius: 7px;
 /* border: 1px solid black; */
 font-size: 20px;
 padding: 10px 0px 3px 5px;
 /* background-color: #f8f9fa; */

} .toc-wrapper a {

 text-decoration: none;

}

.toc-wrapper > li {

 text-align: right;

}

tableOfContent {

 padding-left:0;

}

tableOfContent > li {

 margin: 10px 0px;

}

tableOfContent > li > a {

 color: rgb(0, 57, 133);

} .toc-wrapper ul {

 padding-left:12px;

} /* top */ .toc-wrapper > li > ul {

 text-align: left;
 font-size: 0.7em;

} .toc-wrapper ul, .toc-wrapper li {

 list-style: none;
 margin:0;

} .backToTop {

 cursor: pointer;
 margin-right:15px;

}

/* logbook accordion */ .accordion {

 background-color: #eee;
 color: #444;
 cursor: pointer;
 padding: 18px;
 width: 100%;
 border: none;
 text-align: left;
 outline: none;
 font-size: 15px;
 transition: 0.4s;
 margin-bottom:3px;

}

button.active, .accordion:hover {

 background-color: #ddd;

}

.accordion:after {

 content: '\002B';
 color: #777;
 font-weight: bold;
 float: right;
 margin-left: 5px;

}

button.active:after {

 content: "\2212";

}

.my-panel {

 padding: 0 18px;
 background-color: white;
 max-height: 0;
 overflow: hidden;
 transition: max-height 0.2s ease-out;

} .my-panel p {

 text-align: justify;

} .all img {

 max-width: 400px;
 display:block;
 margin:0 auto;

} .all {

 position: relative;

} .ibp h2 {

 color: #10487c;

} .cloning h2 {

 color: #2E2F31;

} .biobrick h2 {

 color: #000;

} .organiclab h2 {

 color: #444;

}

/* Human Practice */ .myModal ul li {

 list-style-type: '-';

} .myModal ul li ul li {

 list-style-type: circle;

} .timelineHead {

 text-align:center;
 padding:10px 40px;
 margin-left: auto;
 margin-right: auto;

} .timelineHead p, .timelineHead ol, .timelineHead ul {

 /* color:#040404; */
 text-align: justify

} .reference {

 font-size: 12px;

} .referece li{

 list-style-type: decimal;

} .integrated-content p {

 text-align: justify;

} /* .integrated-content {

 background-color:white;

} */ .integrated-content, .ethics-content, .safe-content, .stakeholder-content {

 display:none;

} .activeTab {

 display: block;

} .inactiveTab {

 display: none;

} .hp-heading {

 background-image:url();
 background-repeat: no-repeat;
 background-size: cover;

} .hp-tabs > ul{

 list-style-type: none;
 margin: 0;
 padding: 0;

} .hp-tabs ul li {

 display:inline;

} .hp-tabs ul li a {

 display: inline-block;
 width: 150px;

} .hp-tabs button {

 font-size: 20px;
 height: 70px;
 width: 200px;
 white-space: normal;
 /* border-color: #cc0234; */

} .hp-tabs button:hover{

 opacity: 0.9;

} .int-btn.activeBtn, .int-btn:hover, .eth-btn.activeBtn, .eth-btn:hover, .saf-btn.activeBtn, .saf-btn:hover, .sta-btn.activeBtn, .sta-btn:hover {

 background-color: #d5ff83;
 color: #505050;

}

/* Timeline */ /* The actual timeline (the vertical ruler) */ .timeline {

 position: relative;
 max-width: 1200px;
 margin: 5px auto;

}

/* The actual timeline (the vertical ruler) */ .timeline::after {

 content: ;
 position: absolute;
 width: 6px;
 background-color: rgb(100, 100, 100);
 top: 0;
 bottom: 0;
 left: 50%;
 margin-left: -3px;

}

/* Container around content */ .tl-event {

 padding: 10px 40px;
 position: relative;
 /* background-color: greenyellow; */
 width: 50%;
 border:1px;

}

/* The circles on the timeline */ .tl-event::after {

 content: ;
 position: absolute;
 width: 25px;
 height: 25px;
 right: -13px;
 background-color: white;
 border: 4px solid #FF9F55;
 top: 20px;
 border-radius: 50%;
 z-index: 1;

}

/* Place the container to the left */ .left {

 left: 0;

}

/* Place the container to the right */ .right {

 left: 50%;

}

/* Add arrows to the left container (pointing right) */ .left::before {

 content: " ";
 height: 0;
 position: absolute;
 top: 22px;
 width: 0;
 z-index: 1;
 right: 30px;
 border: medium solid #eee;
 border-width: 10px 0 10px 10px;
 border-color: transparent transparent transparent #eee;
 /* box-sizing: content-box; */

}

/* Add arrows to the right container (pointing left) */ .right::before {

 content: " ";
 height: 0;
 position: absolute;
 top: 22px;
 width: 0;
 z-index: 1;
 left: 30px;
 border: medium solid #eee;
 border-width: 10px 10px 10px 0;
 border-color: transparent #eee transparent transparent;
 /* box-sizing: content-box; */

}

/* Fix the circle for containers on the right side */ .right::after {

 left: -13px;

}

/* The actual content */ .tl-content {

 padding: 20px 30px;
 background-color: #eee;
 position: relative;
 border-radius: 6px;

} .tl-content.docs > h2 {

 margin:0;

}

/* modal window */ /* button.readmore {

 border-radius: 10%;

} */

/* .tl-content button {

 left:0;

} */ @media screen and (min-width:768px) {

 .modal-dialog {
   width:60%;
 }

}

/* Media queries - Responsive timeline on screens less than 600px wide */ @media screen and (max-width: 600px) {

 /* Place the timelime to the left */
 .timeline::after {
   left: 31px;
 }
 
 /* Full-width containers */
 .tl-event {
   width: 100%;
   padding-left: 70px;
   padding-right: 25px;
 }
 
 /* Make sure that all arrows are pointing leftwards */
 .tl-event::before {
   left: 60px;
   border: medium solid white;
   border-width: 10px 10px 10px 0;
   border-color: transparent white transparent transparent;
 }

 /* Make sure all circles are at the same spot */
 .left::after, .right::after {
   left: 15px;
 }
 
 /* Make all right containers behave like the left ones */
 .right {
   left: 0%;
 }

} /* The Modal (background) */ .myModal {

 display: none; /* Hidden by default */
 position: fixed; /* Stay in place */
 z-index: 999; /* Sit on top */
 padding-top: 100px; /* Location of the box */
 left: 0;
 top: 0;
 width: 100%; /* Full width */
 height: 100%; /* Full height */
 overflow: auto; /* Enable scroll if needed */
 background-color: rgb(0,0,0); /* Fallback color */
 background-color: rgba(0,0,0,0.4); /* Black w/ opacity */

}

/* Modal Content/Box */ .myModal-content {

 position: relative;
 background-color: #fefefe;
 margin: auto;
 padding: 0;
 border: 1px solid #888;
 box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
 -webkit-animation-name: animatetop;
 -webkit-animation-duration: 0.4s;
 animation-name: animatetop;
 animation-duration: 0.4s;
 border-radius: 6px;

} @-webkit-keyframes animatetop {

 from {top:-600px; opacity:0} 
 to {top:0; opacity:1}

} /* Add Animation */ @keyframes animatetop {

 from {top: -600px; opacity: 0}
 to {top: 0; opacity: 1}

} /* The Close Button */ .closeModal {

 color: white;
 float: right;
 font-size: 28px;
 font-weight: bold;

 margin-top: -2px;
 
 float: right;
 /* font-size: 21px; */
 font-weight: bold;
 line-height: 1;
 color: #000;
 text-shadow: 0 1px 0 #fff;
 filter: alpha(opacity=20);
 opacity: .2;

 appearance: none;
 padding: 0;
 cursor: pointer;
 background: transparent;
 border: 0;

}

.closeModal:hover, .closeModal:focus {

 color: #000;
 text-decoration: none;
 cursor: pointer;

} .myModal-header {

 padding: 2px 16px;
 color: white;
 border-bottom: 1px solid #e5e5e5;

}

.myModal-body {

 padding: 2px 16px;

}

.myModal-footer {

 padding: 2px 16px;
 color: white;
 border-top: 1px solid #e5e5e5;

} @media screen and (min-width:768px) {

 .myModal-content{
   width: 60%;
 }

} @media screen and (max-width:767px) {

 .myModal {
   padding-top:15px;
   padding-bottom:15px;
   padding-left:5px;
   padding-right:5px;
 }

} /* photo slides */ .personale {

 position:sticky;
 top: 65px;
 background-color:white;
 height: 500px;

} .personale-wrapper {

 height:100%;

} /* .team-wrapper { } */ .teamMembers img {

 width:100%;

} /* .teamMembers {

 margin: 10%;

} */ @media screen and (max-width: 992px) {

 .teamMembers {
   margin: 5%;
 }

} @media screen and (min-width: 1440px) {

 .teamMembers {
   margin: 5%;
 }

} .foto img {

 border-radius: 35%;

} /* slides */ .slideshow-container {

 max-width: 800px;
 position: relative;
 margin: auto;

}

/* Hide the images by default */ .mySlides {

 display: none;

}

/* Next & previous buttons */ .prevbtn, .nextbtn {

 cursor: pointer;
 position: absolute;
 top: 50%;
 width: auto;
 margin-top: -22px;
 padding: 16px;
 color: white;
 font-weight: bold;
 font-size: 18px;
 transition: 0.6s ease;
 border-radius: 0 3px 3px 0;

} .prevbtn {

 left:0;

}

/* Position the "next button" to the right */ .nextbtn {

 right: 0;
 border-radius: 3px 0 0 3px;

}

/* On hover, add a black background color with a little bit see-through */ .prevbtn:hover, .nextbtn:hover {

 background-color: rgba(0,0,0,0.8);
 text-decoration: none;

}

/* Caption text */ .slidetext {

 color: #f2f2f2;
 font-size: 15px;
 padding: 8px 12px;
 position: absolute;
 bottom: 0px;
 width: 100%;
 text-align: center;
 background-color: #0009;

}

/* Number text (1/3 etc) */ .numbertext {

 color: #f2f2f2;
 font-size: 12px;
 padding: 8px 12px;
 position: absolute;
 top: 0;

}

/* The dots/bullets/indicators */ .dot {

 cursor: pointer;
 height: 15px;
 width: 15px;
 margin: 0 2px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
 transition: background-color 0.6s ease;

}

.dot.active, .dot:hover {

 background-color: #717171;

}

/* Fading animation */ .myfade {

 animation-name: myfade;
 animation-duration: 1.5s;

}

@-webkit-keyframes myfade {

 from {opacity: .4} 
 to {opacity: 1}

}

@keyframes myfade {

 from {opacity: .4} 
 to {opacity: 1}

} .slideJumbotron {

 background-image: linear-gradient(to bottom right,
   rgba(57, 44, 172, 0.801), rgba(126, 0, 151, 0.521));
   margin-bottom: 0;

} .team-main {

 background-image: linear-gradient(to bottom right,
   rgba(57, 44, 172, 0.801), rgba(126, 0, 151, 0.521));

} /* change images with fade effect */ .swapImage img {

 -webkit-transition: all 0.1s ease-in-out; 
 -moz-transition: all 0.1s ease-in-out; 
 -ms-transition: all 0.1s ease-in-out; 
 -o-transition: all 0.1s ease-in-out; 
 transition: all 0.1s ease-in-out;

} .foto img {

 width:100%;

}

/* MISC Correction */

top_title{

 display:none;

}

globalWrapper{

 font-size:100%;
 padding-bottom: 0;
 margin-bottom: -10px;

} div#mw-content-text.mw-content-ltr {

 background-image: url("");
 background-attachment: fixed;

} body {

 background-image: url("");
 background-attachment: fixed;

}

content{

 width:100%;
 margin:0 auto;
 padding:0px;

} ul.normal-menu li {

 list-style:none;

}

ul.nav.navbar-nav.navbar-right {

 margin: 0;

}

HQ_page p {

 font-family: 'Roboto',"Helvetica Neue",Helvetica,Arial,sans-serif;
 font-size: 16px;
 text-align: justify;

}

HQ_page .figureCaption p{

 text-align: left;
 font-size: 13px;

}

HQ_page .sponsors-list a {

 padding-right: 0;

}

HQ_page .introduction h1,
HQ_page .timelineHead h1 {

 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 padding-top: 0;
 padding-bottom: 5px;

}

HQ_page .jumbotron h1 {

 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 /*text-shadow: 2px 2px #5d0086;*/

}

HQ_page .tl-content h3 {

 padding-top: 0px;

} .jumbotron h1 {

 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 /*text-shadow: 2px 2px #5d0086;*/

} .myTooltips {

 position:fixed;
 border-radius:5px;
 border: 2px solid #444;
 max-width:500px;
 /* min-height:100px; */
 background-color:wheat;
 padding:10px;

} .myTooltips p {

 font-size:12px;

} .myTooltips button {

 position: absolute;
 bottom:5px;
 right:5px;

} .tooltipsBtn {

 cursor:help;

} .parts-table th, .parts-table td {

 text-align: center;
 padding:5px;
 border:1px solid rgb(156, 156, 156);
 border-collapse: collapse;

} .parts-table th {

 background-color:rgb(183, 0, 255);

} .parts-table .odd-tr {

 background-color:wheat;

}

mw-content-text a[href ^="https://"], .link-https {

   background: url(https://2018.igem.org/wiki/skins/Igem/resources/lock_icon.gif?2015-09-11T20:20:00Z) center right no-repeat;
   padding-right: 0px;

} $(document).ready(function(){

 var offsetTop = 65;
 // set container height so that "sticky" functions
 $('.toc-column').height($('.docs').height());
 
 $(window).resize(setTOCColumn);
 $(window).scroll(setTOCColumn);
 
 // smooth scrolling
 $(document).on('click', 'a[href^="#"]', function (event) {
   event.preventDefault();

   $('html, body').animate({
     scrollTop: $($.attr(this, 'href')).offset().top - offsetTop
   }, 300);
 });
 // 
 if(document.getElementsByClassName('activeTab').length == 0) {
   generateTOC({'id':'#tableOfContent', 'src': '.docs section'});
 }

 // load json, pass to insertExplanation()
 // insertExplanation();

});

document.addEventListener("DOMContentLoaded", function(){

 setTOCColumn();

});

function setTOCColumn(){

 var tocColumn, docs;
 if(document.getElementsByClassName('activeTab').length == 0) {
   tocColumn = $('.toc-column');
   docs = $('.docs');
 } else {
   tocColumn = $('.activeTab .toc-column');
   docs = $('.activeTab .docs');
 }
 if ($(window).width() < 992) {
   tocColumn.css("height", "100%");
 } else {
   tocColumn.height(docs.height());
 }

}

function topFunction() {

 $('html, body').animate({scrollTop: 0}, 300);

}

function generateTOC(options){

 var sections = document.querySelectorAll(options['src']);
 var liList = new Array();
 for (var i = 0; i<sections.length;i++) {
   var s = sections[i];
   var h2 = s.querySelector('h2');
   if(h2) {
     var id = idFromTxt(h2,i);

liList.push("

<a href=\"#"+ id +"\">"+ h2.innerHTML +"</a>

<a href=\"#"+ id +"\">"+ h3.innerHTML +"</a>

");

 }
 liList.push("</ul>\n");
 var toc = document.querySelector(options['id']);
 if (toc){
   toc.innerHTML = liList.join("");
 }

}

// test ?,! etc function idFromTxt(el, n){

 var elid = el.innerHTML.replace(/[^\w]/g, ) + n;
 el.id = elid;
 return elid;

}

function showMore(e){

 // insert click-to-elaborate events
 var sp = document.getElementById(e.target.dataset.target);
 sp.classList.toggle('disappear');
 setTOCColumn();

}

function openFigureModal(e){

 var hdurl = e.querySelector('img').getAttribute('data-hdurl');
 if (!hdurl) {
   hdurl = e.querySelector('img').src;
 }
 var modal = document.getElementById('imageModal');
 var img = modal.querySelector('img');
 img.src = hdurl;
 var caption = e.parentElement.querySelector(".figureCaption").innerHTML;
 modal.querySelector(".modalCaption").innerHTML = caption;
 var html = document.querySelector('html');
 html.style.overflow = 'hidden';
 modal.style.display = "block";
 var closeBtn = modal.querySelector('.closeFigure');
 closeBtn.onclick = function(){
   modal.style.display = 'none';
   html.style.overflow = 'auto';
   img.src = "";
 };
 window.addEventListener('click', function(event) {
   if (event.target == modal) {
     modal.style.display = "none";
     html.style.overflow = 'auto';
     img.src = "";
   }
 });

} function openWideFigureModal(e){

 // console.log(e);
 var hdurl = e.querySelector('img').getAttribute('data-hdurl');
 if (!hdurl) {
   console.log("Why");
   hdurl = e.querySelector('img').src;
 }

 var modal = document.getElementById('wideImageModal');
 var img = modal.querySelector('img');
 img.src = hdurl;
 var caption = e.parentElement.querySelector(".figureCaption").innerHTML;
 modal.querySelector(".modalCaption").innerHTML = caption;
 var html = document.querySelector('html');
 html.style.overflow = 'hidden';
 modal.style.display = "block";

 var closeBtn = modal.querySelector('.closeFigure');
 closeBtn.onclick = function(){
   modal.style.display = 'none';
   html.style.overflow = 'auto';
   img.src = "";
 };
 window.addEventListener('click', function(event) {
   if (event.target == modal) {
     modal.style.display = "none";
     html.style.overflow = 'auto';
     img.src = "";
   }
 });

}

function openModal(e){

 var targetID = e.getAttribute('data-target');
 // console.log(targetID);
 var modal = document.querySelector(targetID);
 if (modal != null){
   modal.style.display = "block";

   var html = document.querySelector('html');
   html.style.overflow = 'hidden';

   var closeBtn = modal.querySelector('.closeModal');
   closeBtn.addEventListener('click', function(){
     modal.style.display = 'none';
     html.style.overflow = 'auto';
   });
   window.addEventListener('click', function(event) {
     if (event.target == modal) {
       modal.style.display = "none";
       html.style.overflow = 'auto';
     }
   });
 }

}

function linksInModal(e){

 console.log(e.target);
 console.log(e.target.dataset.parentModal);
 var modal = document.getElementById(e.target.dataset.parentModal);
 var html = document.querySelector('html');
 modal.style.display="none";
 html.style.overflow="auto";

}

function changeHPTabs(e){

 // e.preventDefault();
 let tabID = e.dataset.target;
 $(".activeTab").toggleClass("activeTab");
 $(tabID).toggleClass("activeTab");
 $(".activeBtn").toggleClass("activeBtn");
 e.classList.toggle("activeBtn");
 generateTOC({'id':'.activeTab #tableOfContent', 'src': '.activeTab .docs section'});

 if ($(window).width() < 992) {
   $('.activeTab .toc-column').css("height", "100%");
 } else {
   $('.activeTab .toc-column').height($('.activeTab .docs').height());
 }

}

// photo slides // Next/previous controls function plusSlides(n) {

 showSlides(slideIndex += n);

}

// Thumbnail image controls function currentSlide(n) {

 showSlides(slideIndex = n);

}

function showSlides(n) {

 var i;
 var slides = document.getElementsByClassName("mySlides");
 var dots = document.getElementsByClassName("dot");
 if (n > slides.length) {slideIndex = 1} 
 if (n < 1) {slideIndex = slides.length}
 for (i = 0; i < slides.length; i++) {
   slides[i].style.display = "none"; 
 }
 for (i = 0; i < dots.length; i++) {
   dots[i].classList.remove('active');
 }
 slides[slideIndex-1].style.display = "block"; 
 dots[slideIndex-1].classList.add('active');

} function showVideoModal(e){

           // console.log(e);
           var vidurl = e.dataset.vidUrl;
           if (!vidurl) {
               console.log("error");
               return
           }
           var modal = document.getElementById('videoModal');
           modal.style.display = "block";

           var vid = modal.querySelector("video");
           vid.querySelector('source').src=vidurl;
           vid.play();
           var html = document.querySelector('html');
           html.style.overflow = 'hidden';
           
           var closeBtn = modal.querySelector('.closeFigure');
           closeBtn.onclick = function(){
               modal.style.display = 'none';
               html.style.overflow = 'auto';
               vid.pause();
               vid.currentTime = 0;
           };
           window.addEventListener('click', function(event) {
               if (event.target == modal) {
                   modal.style.display = "none";
                   html.style.overflow = 'auto';
                   vid.pause();
               }
           });
       }

function showTooltips(e) {

           console.log(e.clientX, e.clientY);
           let tooltip = document.getElementById(e.target.dataset.target);
           tooltip.style.display="block";
           tooltip.style.top=e.clientY + 16 + "px";
           tooltip.style.left=e.clientX + "px";
       }

       function closeTooltips(e,btn) {
           btn.parentElement.style.display="none";
       }

// extend jQuery (function($){

}(jQuery));

@@ Line 152: / Line 152: @@
      </div>
 </div>
-<!-- Whole igem page container, closed in separate pages-->
-<div class="container" id="main-container">
-    <!-- content start -->
-    <div class="contents row">
-<html>