Difference between revisions of "Team:SDU-Denmark/testnavfp"

 
(85 intermediate revisions by the same user not shown)
Line 4: Line 4:
  
 
<style>
 
<style>
 +
 +
#navbarPosition {
 +
  position:absolute;
 +
  width: 65vw;
 +
  left:15vw;
 +
}
 +
 +
 +
/**************HIGHLIGHT SWITCH************/
 +
.switch {
 +
    background-color: #ccc;
 +
    border-radius: 15px;
 +
    cursor: pointer;
 +
    display: inline-block;
 +
    height: 16px;
 +
    right: -25%;
 +
    position: relative;
 +
    top: 23px;
 +
    -webkit-transition: .2s;
 +
    transition: .2s;
 +
    width: 31px;
 +
}
 +
 +
.slider {
 +
    background-color: white;
 +
    border-radius: 50%;
 +
    bottom: 2px;
 +
    position:absolute;
 +
    content: "";
 +
    height: 12px;
 +
    left: 2px;
 +
    -webkit-transition: .2s;
 +
    transition: .2s;
 +
    width: 12px;
 +
}
 +
 +
.slider.active {
 +
  -webkit-transform: translateX(15px);
 +
  -ms-transform: translateX(15px);
 +
  transform: translateX(15px);
 +
}
 +
 +
.switch.active {
 +
  background-color: #689C43;
 +
  box-shadow: 0 0 1px #689C43;
 +
}
 +
 +
 +
 +
 +
/****************HIGHLIGHT BUTTON*****************/
 +
#highlightToggle {
 +
    position: fixed;
 +
    top:30px;
 +
    right:5vw;
 +
    overflow:visible;
 +
}
 +
 +
#editorsHighlights {
 +
    position:relative;
 +
    left: 0px;
 +
    top: -30px;
 +
    width: 100px;
 +
}
 +
 +
#editorsHighlights > p {
 +
    font-size:11px !important;
 +
}
 +
 +
.highlightOverlay {
 +
    background-color: rgba(0,0,0,0.0);
 +
    position: fixed;
 +
    height: 100%;
 +
    width: 100%;
 +
    bottom: 0;
 +
    left: 0;
 +
    right: 0;
 +
    top: 0;
 +
    z-index: 50;
 +
  -webkit-transition: .7s;
 +
  transition: .7s;
 +
  pointer-events:none!important;
 +
}
 +
 +
 +
.highlightOverlay.active {
 +
    background-color: rgba(0,0,0,0.55) !important;
 +
}
 +
 +
#HQ_page p.active {
 +
  color:rgba(0,0,0,0.3) !important;
 +
  pointer-events:none!important;
 +
}
 +
 +
span.highlighted {
 +
  -webkit-transition: .2s;
 +
  transition: .2s;
 +
}
 +
 +
span.highlighted.active {
 +
  background-color:#E2DCA8;
 +
  box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
 +
  padding: 2.5px 0px 0.8px 0px;
 +
  position:relative;
 +
  z-index:101;
 +
  color:rgba(0,0,0,0.8) !important;
 +
  border-radius: 1px;
 +
  pointer-events:auto!important;
 +
}
 +
 +
#editorsHighlights.active > p.active {
 +
  color:rgba(0,0,0,0.8) !important;
 +
}
 +
 +
/**************************START OF NAVBAR***********************/
 +
a {
 +
  text-decoration: none !important;
 +
}
 +
 +
#navbar {
 +
  position:fixed;
 +
  overflow:visible;
 +
  left:0;
 +
  top:16px;
 +
  right:0;
 +
  height:72px;
 +
  background: #f8f8f8;
 +
  z-index:102;
 +
  box-shadow:0 1px 0 rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.1);
 +
}
 +
 +
.nav-tabs > li, .nav-pills > li {
 +
    float:none;
 +
    display:inline-block;
 +
    *display:inline; /* ie7 fix */
 +
    zoom:1; /* hasLayout ie7 trigger */
 +
    margin-bottom: -10px;
 +
}
 +
 +
.nav-tabs, .nav-pills {
 +
    text-align:center;
 +
}
 +
 +
 +
.nav-tabs > li > a {
 +
  font-size:16px;
 +
  font-weight: 300;
 +
  line-height: 22px;
 +
}
 +
 +
.nav-tabs > #navbarPresentation> a {
 +
  color:#37606E;
 +
}
 +
 +
.nav-tabs > #navbarIntroduction> a {
 +
  color:#547983;
 +
}
 +
 +
.nav-tabs > #navbarProject> a {
 +
  color:#376A2F;
 +
}
 +
 +
.nav-tabs > #navbarProcedures> a {
 +
  color:#689C43;
 +
}
 +
 +
.nav-tabs > #navbarPractices> a {
 +
  color:#A8883D;
 +
}
 +
 +
.nav-tabs > #navbarProspects> a {
 +
  color:#CFB26E;
 +
}
 +
 +
 +
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
 +
  color: #556E3F;
 +
  cursor: default;
 +
  background-color: rgb(248, 248, 248);
 +
  border: 1px solid #ddd;
 +
  border-bottom-color: transparent;
 +
  height: 38px;
 +
}
 +
 +
.nav > li > a:hover, .nav > li > a:focus {
 +
    text-decoration: none;
 +
    background-color: #eee;
 +
    height: 38px;
 +
}
 +
 +
 +
.nav > li > a {
 +
    padding: 8px 15px 15px 15px;
 +
}
 +
 +
 +
a.anchor {
 +
  display:block;
 +
  position:relative;
 +
  top:-60px;
 +
  visibility:hidden;
 +
}
 +
 +
 +
 +
 +
 +
/***********SUBNAVBAR*********/
 +
 +
 +
 +
#menu1 h5 {
 +
color: #37606E;
 +
}
 +
 +
#menu2 h5 {
 +
color: #547983;
 +
}
 +
 +
#menu3 h5 {
 +
color: #376A2F;
 +
}
 +
 +
#menu4 h5 {
 +
color: #689C43;
 +
}
 +
 +
#menu5 h5 {
 +
color: #A8883D;
 +
}
 +
 +
#menu6 h5 {
 +
color: #CFB26E;
 +
}
 +
 +
a:hover h5 {
 +
color: #73918A;
 +
}
 +
 +
 +
.navbar-nav {
 +
    width: 100%;
 +
    text-align: center;
 +
}
 +
 +
 +
.nav-item.nav-link {
 +
    display: inline-block;
 +
    padding-right: 20px;
 +
    padding-left: 20px;
 +
}
 +
 +
.navbar-nav a:hover {
 +
    background-color: #eee;
 +
    padding-top: 1px;
 +
    margin-top: -2px;
 +
    border-radius: 0px 0px 5px 5px;
 +
}
 +
 +
 +
.anchorMargin {
 +
  padding-top:80px;
 +
  margin-top:-80px;
 +
}
 +
 +
.nav-item.nav-link.active {
 +
    text-decoration: underline !important;
 +
}
 +
 +
 +
/**************************END OF NAVBAR***********************/
 +
 +
 +
/**********************PROGRESS BAR************************/
 +
 +
.progressContainer {
 +
  width:75%;
 +
  height: 1px;
 +
  position: absolute;
 +
  margin-bottom: 0px;
 +
  overflow: hidden;
 +
  background-color: rgba(200,200,200,.5);
 +
  content: "";
 +
  display: table;
 +
  table-layout: fixed;
 +
  z-index:1000;
 +
  left:12%;
 +
  bottom:30%;
 +
}
 +
 +
 +
.active .progressContainer {
 +
  position: absolute;
 +
  left:12%;
 +
  bottom:14%;
 +
}
 +
 +
.nav > li > a:hover + .progressContainer {
 +
  position: absolute;
 +
  left:12%;
 +
  bottom: 14%;
 +
}
 +
 +
 +
.progressBar1 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
.progressBar2 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
.progressBar3 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
.progressBar4 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
.progressBar5 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
.progressBar6 {
 +
  width: 0%;
 +
  float: left;
 +
  height: 1px;
 +
  z-index:99;
 +
  max-width: 100%;
 +
  background-color:#76925E;
 +
  -webkit-transition: width .0s ease;
 +
  -o-transition: width .0s ease;
 +
  transition: width .0s ease;
 +
}
 +
 +
 +
 +
 +
 +
@media only screen and (max-width: 1600px) {
 +
  #navbarPosition {
 +
    width: 80vw;
 +
    left:7vw !important;
 +
  }
 +
 +
  #highlightToggle {
 +
  right:0vw !important;
 +
  }
 +
 +
  .nav.nav-tabs > li {
 +
    margin-left: -2px;
 +
    margin-right: -2px;
 +
  }
 +
 +
}
 +
 +
 +
 +
@media only screen and (max-width: 1024px) {
 +
  #navbarPosition {
 +
    width: 95vw;
 +
    left:1% !important;
 +
  }
 +
 +
  .nav.nav-tabs > li {
 +
    margin-left: -2px;
 +
    margin-right: -2px;
 +
    padding-left:-15px;
 +
    padding-right:-15px;
 +
  }
 +
 +
  .nav-tabs > li > a {
 +
    font-size:14px;
 +
  }
 +
 +
HQ_page h5 {
 +
    font-size:1.1rem;
 +
  }
 +
 +
  #highlightToggle {
 +
    top:90px;
 +
  }
 +
}
 +
 +
 +
 +
@media only screen and (max-width: 768px) {
 +
  #navbarPosition {
 +
    width: 100vw;
 +
    left:-1% !important;
 +
  }
 +
 +
  .nav.nav-tabs > li {
 +
    margin-left: -3px;
 +
    margin-right: -3px;
 +
  }
 +
 +
  #highlightToggle {
 +
    top:90px;
 +
  }
 +
}
 +
 +
 +
@media only screen and (max-width: 480px) {
 +
  #navbarPosition {
 +
    width: 100vw;
 +
    left:0vw !important;
 +
  }
 +
}
 +
 +
  
  
Line 14: Line 466:
  
  
 +
<header>
 +
<div id="navbar"> 
  
<div id="navbar">
+
<div id="navbarPosition">
<div class="container-fluid">
+
  <div class="row"> 
+
    <div class="col-sm-2"><div id="skimPlacement"><button id="skimButton"><div class="skimTextPlacement"><h5>toggle skim</h5></div></button></div></div>
+
    <div class="col-sm-8">
+
      <div class="row">
+
  
 
   <ul class="nav nav-tabs">
 
   <ul class="nav nav-tabs">
 
 
     <li id="navbarPresentation" class="active"><a data-toggle="tab" href="#menu1">Presentation</a>
 
     <li id="navbarPresentation" class="active"><a data-toggle="tab" href="#menu1">Presentation</a>
         <div class="KW_progressContainer">
+
         <div class="progressContainer">
<div class="KW_progressBar">
+
<div class="progressBar1">
 +
</div>
 +
</div>
 +
    </li>
 +
 
 +
    <li id="navbarIntroduction"><a data-toggle="tab" href="#menu2">Introduction</a>
 +
        <div class="progressContainer">
 +
<div class="progressBar2">
 +
</div>
 +
</div>
 +
    </li>
 +
 
 +
    <li id="navbarProject"><a data-toggle="tab" href="#menu3">Project & Results</a>
 +
        <div class="progressContainer">
 +
<div class="progressBar3">
 +
</div>
 +
</div>
 +
    </li>
 +
 
 +
    <li id="navbarProcedures"><a data-toggle="tab" href="#menu4">Parts & Procedures</a>
 +
        <div class="progressContainer">
 +
<div class="progressBar4">
 +
</div>
 +
</div>
 +
    </li>
 +
 
 +
    <li id="navbarPractices"><a data-toggle="tab" href="#menu5">Practices</a>
 +
        <div class="progressContainer">
 +
<div class="progressBar5">
 +
</div>
 +
</div>
 +
    </li>
 +
 
 +
    <li id="navbarProspects"><a data-toggle="tab" href="#menu6">Prospects</a>
 +
        <div class="progressContainer">
 +
<div class="progressBar6">
 
</div>
 
</div>
 
</div>
 
</div>
 
     </li>
 
     </li>
  
    <li id="navbarIntroduction"><a data-toggle="tab" href="#menu2">Introduction</a></li>
 
    <li id="navbarProject"><a data-toggle="tab" href="#menu3">Project & Results</a></li>
 
    <li id="navbarParts"><a data-toggle="tab" href="#menu4">Parts & Results</a></li>
 
    <li id="navbarPractices"><a data-toggle="tab" href="#menu5">Practices</a></li>
 
    <li id="navbarProspects"><a data-toggle="tab" href="#menu6">Prospects</a></li>
 
 
   </ul>
 
   </ul>
  
Line 43: Line 521:
  
 
     <div id="menu1" class="tab-pane fade in active">
 
     <div id="menu1" class="tab-pane fade in active">
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
       <a class="nav-item nav-link" href="#Presentation"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#presentation"><h5>Opening</h5></a>
       <a class="nav-item nav-link" href="#Team"><h5>Team</h5></a>
+
       <a class="nav-item nav-link" href="#team"><h5>Team</h5></a>
       <a class="nav-item nav-link" href="#Attributions"><h5>Attributions</h5></a>
+
       <a class="nav-item nav-link" href="#attributions"><h5>Attributions</h5></a>
       <a class="nav-item nav-link" href="#Collaborations"><h5>Collaborations</h5></a>
+
       <a class="nav-item nav-link" href="#collaborations"><h5>Collaborations</h5></a>
       <a class="nav-item nav-link" href="#Achievements"><h5>Achievements</h5></a>
+
       <a class="nav-item nav-link" href="#achievements"><h5>Achievements</h5></a>
     </div>
+
     </nav>
 
     </div>
 
     </div>
  
 
     <div id="menu2" class="tab-pane fade">
 
     <div id="menu2" class="tab-pane fade">
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
       <a class="nav-item nav-link" href="#Introduction"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#introduction"><h5>Opening</h5></a>
       <a class="nav-item nav-link" href="#Description"><h5>Description</h5></a>
+
       <a class="nav-item nav-link" href="#description"><h5>Description</h5></a>
       <a class="nav-item nav-link" href="#Outreach"><h5>Outreach</h5></a>
+
       <a class="nav-item nav-link" href="#outreach"><h5>Outreach</h5></a>
     </div>
+
     </nav>
 
     </div>
 
     </div>
  
 
     <div id="menu3" class="tab-pane fade">
 
     <div id="menu3" class="tab-pane fade">
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
       <a class="nav-item nav-link" href="#"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#project"><h5>Opening</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Project Design</h5></a>
+
       <a class="nav-item nav-link" href="#design"><h5>Project Design</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Modelling</h5></a>
+
       <a class="nav-item nav-link" href="#modelling"><h5>Modelling</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Experiments</h5></a>
+
       <a class="nav-item nav-link" href="#experiments"><h5>Experiments</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Demonstration & Results</h5></a>
+
       <a class="nav-item nav-link" href="#demonstration"><h5>Demonstration & Results</h5></a>
     </div>
+
     </nav>
 
     </div>
 
     </div>
  
 
     <div id="menu4" class="tab-pane fade">
 
     <div id="menu4" class="tab-pane fade">
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
       <a class="nav-item nav-link" href="#"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#procedures"><h5>Opening</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Parts</h5></a>
+
       <a class="nav-item nav-link" href="#parts"><h5>Parts</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Notebook</h5></a>
+
       <a class="nav-item nav-link" href="#notebook"><h5>Notebook</h5></a>
       <a class="nav-item nav-link" href="#"><h5>SOPs and Protocols</h5></a>
+
       <a class="nav-item nav-link" href="#protocols"><h5>SOPs and Protocols</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Labsafety</h5></a>
+
       <a class="nav-item nav-link" href="#labsafety"><h5>Lab Safety</h5></a>
     </div>
+
     </nav>
 
     </div>
 
     </div>
  
 
     <div id="menu5" class="tab-pane fade">
 
     <div id="menu5" class="tab-pane fade">
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
       <a class="nav-item nav-link" href="#"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#practices"><h5>Opening</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Bioethics</h5></a>
+
       <a class="nav-item nav-link" href="#bioethics"><h5>Bioethics</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Integrated Practices</h5></a>
+
       <a class="nav-item nav-link" href="#integrated"><h5>Integrated Practices</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Outreach</h5></a>
+
       <a class="nav-item nav-link" href="#events"><h5>Events</h5></a>
      <a class="nav-item nav-link" href="#"><h5>Events</h5></a>
+
     </nav>
     </div>
+
 
     </div>
 
     </div>
  
 
     <div id="menu6" class="tab-pane fade">
 
     <div id="menu6" class="tab-pane fade">
     <div class="navbar-nav">
+
     <nav class="navbar-nav">
       <a class="nav-item nav-link" href="#"><h5>Opening</h5></a>
+
       <a class="nav-item nav-link" href="#prospects"><h5>Opening</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Perspectives</h5></a>
+
       <a class="nav-item nav-link" href="#perspectives"><h5>Perspectives</h5></a>
       <a class="nav-item nav-link" href="#"><h5>To future iGEM teams</h5></a>
+
       <a class="nav-item nav-link" href="#future"><h5>To future iGEM teams</h5></a>
       <a class="nav-item nav-link" href="#"><h5>Final words</h5></a>
+
       <a class="nav-item nav-link" href="#final"><h5>Final words</h5></a>
     </div>
+
     </nav>
 
     </div>
 
     </div>
  
 
   </div>
 
   </div>
 +
</div>
 +
 +
<div id="highlightToggle">
 +
<div class="switch">
 +
  <div class="slider"></div>
 +
</div>
 +
 +
<div id="editorsHighlights"><p><i>editors <span class="highlighted">highlights</span>.</i></p></div>
 +
</div>
 +
 +
</header>
 +
 +
  
 
       </div>
 
       </div>
Line 118: Line 608:
  
 
</div>
 
</div>
 +
 +
 +
    <div id="menu1">
  
 
<article id="presentationContent">
 
<article id="presentationContent">
Line 126: Line 619:
  
  
<div id="Presentation" class="row contentPresentation">          <!-- Start of attributions content -->
+
<div id="Presentation" class="row anchorMargin">          <!-- Start of attributions content -->
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
Line 147: Line 640:
 
</div>
 
</div>
  
<div class="row" id="contentPresentationGradient"></div>   
+
<div class="row contentPresentationGradient"><div class="contentPresentationGradient2"></div></div>   
 
    
 
    
  
<div id="Team" class="row contentPresentation anchor">         
+
<div id="Team" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
Line 172: Line 665:
  
  
<div class="row" id="contentPresentationGradient"></div>        
+
<div class="row contentPresentationGradient"></div>
  
  
  
  
<div id="Attributions" class="row contentPresentation">         
+
<div id="Attributions" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
Line 200: Line 693:
 
</div>
 
</div>
  
<div class="row" id="contentPresentationGradient"></div>
+
<div class="row contentPresentationGradient"></div>
  
  
  
<div id="Collaborations" class="row contentPresentation">         
+
<div id="Collaborations" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
Line 228: Line 721:
  
  
<div class="row" id="contentPresentationGradient"></div>
+
<div class="row contentPresentationGradient"></div>
  
<div id="Achievements" class="row contentPresentation">         
+
<div id="Achievements" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
Line 255: Line 748:
  
 
</article>
 
</article>
 +
</div>
 +
 +
<article id="introductionContent">
 +
  
 +
<div class="row contentPresentationGradient"></div> 
  
<div class="row" id="contentPresentationGradient"></div>
 
  
<div id="Introduction" class="row contentPresentation">         
+
<div id="Introduction" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
Line 281: Line 778:
  
  
<div class="row" id="contentPresentationGradient"></div>
+
<div class="row contentPresentationGradient"></div>
  
  
  
<div id="Description" class="row contentPresentation">         
+
<div id="Description" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
Line 307: Line 804:
  
  
<div class="row" id="contentPresentationGradient"></div>
+
<div class="row contentPresentationGradient"></div>
  
  
<div id="Outreach" class="row contentPresentation">         
+
<div id="Outreach" class="row anchorMargin">         
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-3"></div>
 
   <div class="col-sm-6">
 
   <div class="col-sm-6">
Line 334: Line 831:
  
  
<div class="row" id="contentPresentationGradient"></div>
+
<div class="row contentPresentationGradient"></div>
 
+
  
 +
</article>
  
 
</div>
 
</div>

Latest revision as of 15:45, 16 September 2017