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

Line 12: Line 12:
  
 
<!-- Whole igem page container, closed in separate pages-->
 
<!-- Whole igem page container, closed in separate pages-->
−
<div class="container">
+
<div class="row" id="nav-container">
−
    <script>
+
−
        bGenerateCat = true;
+
−
    </script>
+
 
     <!-- Navigation bar -->
 
     <!-- Navigation bar -->
 
     <div class="nav-bar">
 
     <div class="nav-bar">
Line 154: Line 151:
 
         </ul>
 
         </ul>
 
     </div>
 
     </div>
 +
</div>
 +
<!-- Whole igem page container, closed in separate pages-->
 +
<div class="container" id="main-container">
  
 
     <!-- content start -->
 
     <!-- content start -->
 
     <div class="contents row">
 
     <div class="contents row">
−
         <div class="col-xs-12 col-sm-12 col-md-4 col-lg-3 col-xl-3" style="display:none">
+
         <div class="relative-pos col-xs-12 col-sm-12 col-md-4 col-lg-3 col-xl-3">
−
             <div id="docJump" class="doc-catalogue box-row"></div>
+
             <div id="toc-container" class="doc-catalogue" style="display:none;">
 +
                Life is like riding a bicycle. To keep your balance you must keep moving.
 +
            </div>
 
         </div>
 
         </div>
 
         <div id="docContent" class="doc-content col-xs-12 col-sm-12 col-md-8 col-lg-9 col-xl-9">
 
         <div id="docContent" class="doc-content col-xs-12 col-sm-12 col-md-8 col-lg-9 col-xl-9">
 +
            <script>
 +
                var bGenerateCat=true;
 +
            </script>
 
<html>
 
<html>

Revision as of 14:12, 27 July 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("T--TU-Eindhoven--logBG.png") 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;

}

  1. 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;

}

  1. HQ_page h1,
  2. HQ_page h2,
  3. HQ_page h3,
  4. HQ_page h4,
  5. HQ_page h5,
  6. HQ_page h6 {
 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 color: #10487c;
 padding-top:1px;
 padding-bottom:1px;

}

  1. HQ_page h1,
  2. 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;

}

  1. 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;

}

  1. tableOfContent {
 padding-left:0;

}

  1. tableOfContent > li {
 margin: 10px 0px;

}

  1. 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(T--TU-Eindhoven--HP-bkgrd.jpeg);
 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 */

  1. top_title{
 display:none;

}

  1. globalWrapper{
 font-size:100%;
 padding-bottom: 0;
 margin-bottom: -10px;

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

 background-image: url("T--TU-Eindhoven--BGgraySpread150.png");
 background-attachment: fixed;

} body { 

 background-image: url("T--TU-Eindhoven--BGgraySpread150.png");
 background-attachment: fixed;

}

  1. content{
 width:100%;
 margin:0 auto;
 padding:0px;

} ul.normal-menu li { 

 list-style:none;

}

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

 margin: 0;

}

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

}

  1. HQ_page .figureCaption p{
 text-align: left;
 font-size: 13px;

}

  1. HQ_page .sponsors-list a {
 padding-right: 0;

}

  1. HQ_page .introduction h1,
  2. HQ_page .timelineHead h1 {
 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 padding-top: 0;
 padding-bottom: 5px;

}

  1. HQ_page .jumbotron h1 {
 font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 /*text-shadow: 2px 2px #5d0086;*/

}

  1. 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;

}

  1. 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>
      "); } var h3s = s.querySelectorAll('h3'); for (var j = 0; j < h3s.length; j++) { var h3 = h3s[j]; var id = idFromTxt(h3, j); liList.push("
    • <a href=\"#"+ id +"\">"+ h3.innerHTML +"</a>
      • ") 
         }
      liList.push("
    • "); 
     }
 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));