<!doctype html>
<html lang="en" style="height: 100%;">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <title></title> -->
    <link rel="stylesheet" href="/theme/css/foundation.min.css">>
    <link rel="icon" href="/images/favicon.png">>
    <link rel="stylesheet" href="/theme/css/foundation-icons/foundation-icons.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:400,400i" rel="stylesheet" />
    <!--<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">-->
    <!--<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">-->

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
      .sidebar {
        height: 100%; /* Full-height: do not remove */
        width: 190px; /* Set the width of the sidebar */

        position: fixed; /* Fixed Sidebar (stay in place on scroll) */
        z-index: 1; /* Stay on top */
        top: 0; /* Stay at the top */
        left: 0;
        background-color: black; 
        overflow-x: hidden; /* Disable horizontal scroll */
        padding-top: 20px;
  }


    .sidebar a:hover, .dropdown:hover .dropdown-btn {
      color: #f1f1f1;
    }

    .dropdown {
      float: left;
      overflow: hidden;
      padding-bottom: 10px;
      padding-right: 10px;
    }
    
    .dropbtn {
      background-color;
      color: #ccb2d6;
      padding: 6px 8px 6px 16px;
      font-size: 20px;
      width:100%;
      text-align: left;
      border: none;
      cursor: pointer;
    }

    .dropbtn_bottom {
      background-color;
      color: #ccb2d6;
      padding: 6px 8px 6px 16px;
      font-size: 20px;
      width:100%;
      text-align: left;
      position: absolute;
      display: inline-block;
      bottom: 0;
      border: none;
      cursor: pointer;
      padding-bottom: 30px;
    }

    .sidebar a { /* , .dropdown-btn */
      padding: 6px 8px 6px 16px;
      text-decoration: none;
      font-size: 20px;
      color: #ccb2d6;
      display: block;

      border: none;
      background: none;
      width:100%;
      text-align: left;
      cursor: pointer;
      outline: none;
    }

    .dropdown-container {
      display: none;      
      background-color: #262626;
      padding-left: 12px;

    }

    .dropdown-container a {
      font-size: 16px;
    }
    
    .show {display: block;}
    
    /*.dropdown:hover .dropdown-container {
      display: block;
    }*/
    
    .main {
      margin-left: 190px; /* Same as the width of the sidenav */
      padding: 0px 10px;

    }

    @media screen and (max-height: 450px) {
      .sidebar {padding-top: 15px;}
      .sidebar a {font-size: 18px;}
    }
    </style>
  </head>
    <body style="height: 100%; display: flex; flex-direction: column">

    <!-- Top navigation bar -->
      <div class="row">
        <div class="small-12 columns"></div>
      </div>

    <div style="background-color: white;">
        <div class="row">
            <div a href="/"><img src="/theme/images/Physiome-beside-middle.png" alt="Physiome logo" style="width:100%;height:100%; padding: 1px 1px 0px 250px;"></a>
                <span style="margin-left:10px"></span>
            </div>
            <div class="small-4 column" style="text-align:right">
            </div>
        </div>
    </div>
<!--     <div style="background-color: white;">
      <div class="row">
        <div class="small-11 column"><a href="/"><img src="/theme/images/Physiome-beside-middle.png" alt="Physiome logo" style="width:100%;height:100%; padding: 1px 1px 1px 320px;"></a><span style="margin-left:10px"></span></div>
            <div class="small-4 column" style="text-align:right">
            </div>
        </div>
    </div>
 -->
   <div class="sidebar">   
      <a href="/">Home</a>

      <hr style="background-color: #ccb2d6;height: 3.0px;border: none">

      <div class="dropdown">
        <button onclick="function_showdropdown_about()" class="dropbtn">About the Journal <i class="fa fa-caret-down"></i></button>
          <!-- <a href="/about.html" class="dropdown-btn"> About the Journal <i class="fa fa-caret-down"></i></a> -->
          <div id="myDropdown-about" class="dropdown-container">
            <a href="/about.html#scope"> Scope</a>
            <a href="/about.html#philosophy"> <i>Physiome</i> Philosophy</a>
            <a href="/about.html#definitions"> Definitions</a>
          </div>
      </div>  
      <hr style="background-color: #ccb2d6;height: 3.0px;border: none">

      <div class="dropdown">
        <button onclick="function_showdropdown_authors()" class="dropbtn">For Authors <i class="fa fa-caret-down"></i></button>
          <!-- <a href="/instructions-to-authors.html" class="dropdown-btn"> For Authors <i class="fa fa-caret-down"></i></a> -->
          <div id="myDropdown-authors" class="dropdown-container">
            <a href="/instructions-to-authors.html#instructions"> Instructions</a>
            <a href="/instructions-to-authors.html#types"> Types of submissions</a>
            <a href="/instructions-to-authors.html#preparing"> Preparing your submission</a>
            <a href="/instructions-to-authors.html#submission"> Submission</a>
            <a href="/instructions-to-authors.html#curation"> Curation</a>
            <a href="/instructions-to-authors.html#publishing"> Publishing</a>
            <a href="/instructions-to-authors.html#copyright"> Copyright</a>
          </div>
      </div>  

      <hr style="background-color: #ccb2d6;height: 3.0px;border: none">
      <a href="/articles/">Published Articles</a>
      <hr style="background-color: #ccb2d6;height: 3.0px;border: none">
      <a href="/editorial-board.html"> Editorial Board</a>
      <hr style="background-color: #ccb2d6;height: 3.0px;border: none">
      <a href="/physiome-project.html"> The Physiome Project</a>
      <hr style="background-color: #ccb2d6;height: 3.0px;border: none">
      <a href="/faqs.html">Frequently Asked Questions</a>
      <hr style="background-color: #ccb2d6;height: 3.0px;border: none">
      <a href="mailto:physiome@physiomeproject.org">EMAIL US</a>
      <hr style="background-color: #ccb2d6;height: 3.0px;border: none">

      <!-- <a href="/contact-us.html">Contact us</a> -->
      <!-- <a href="/contact-us.html"><button class="dropbtn_bottom">Contact us</button></a> -->
      <!-- <a href = "mailto:physiome@physiomeproject.org"><button class="dropbtn_bottom">Email us</button></a> -->
    </div>


    <!-- Body -->
    <div class="main" style="margin-top:20px; flex: 1 0 auto">
      <div class="row">

      </div>
    </div>
    <script type="text/javascript" src="/theme/js/jquery.js"></script>
    <script type="text/javascript" src="/theme/js/what-input.js"></script>
    <script type="text/javascript" src="/theme/js/foundation.min.js"></script>
           
    <script>
    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function function_showdropdown_about() {
      document.getElementById("myDropdown-about").classList.toggle("show");
    }
    function function_showdropdown_authors() {
      document.getElementById("myDropdown-authors").classList.toggle("show");
    }

    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-container");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }
    </script>

    </body>

      <!-- Footer with contact info -->
      
      <style>
          footer {
            flex-shrink: 0;
            background-color: black;
            color: white;
            text-align: center;
          }
      </style>
  <footer>
      <!-- <span style="display: block; color: white">Contact us: <a style="color:white; text-decoration: underline;" href="mailto:physiome@physiomeproject.org">physiome@physiomeproject.org</a></span> -->
      <!-- <span style="display: block; color: white">Meet our <a style="color:white; text-decoration: underline" href="/editorial-board.html">Editorial Board</a></span> -->
      <span style="display: block; colour: white; margin-left:190px">Supported by</span>
      <p><a href="http://www.iups.org/"><img src="/theme/images/IUPS_white.png" alt="Physiome logo" style="width:7%;height:7%;"></a> <a href="https://www.vph-institute.org/"><img src="/theme/images/Horizonal_Online.png" alt="VPH logo" style="width:13%;height:13%;"></a> <a href="https://www.auckland.ac.nz/en/abi.html"><img src="/theme/images/abi-hc-rgb-white.png" alt="ABI logo" style="width:30%;height:30%;"></a> <a href="https://www.digital-science.com/"><img src="/theme/images/ds-logo-bw.png" alt="Digital Science logo" style="width:15%;height:15%;"></a></p>
  </footer>
  
  <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-200859312-1', 'auto');
      ga('send', 'pageview');
  </script>
</html>