:root {
    --dark-blue : #003f87;
    --light-blue : #0083d6;
    --pale-blue : #cce6f7;
    --very-pale-blue : #ddeeff;
    --light-gray : #efefef;
    --page-width : 1080px;
}

* {
  box-sizing: border-box;
}

body {
    font-family : verdana;
    max-width: var(--page-width);
    margin: auto;
    background-image : url("../images/backgroundwater.jpg");
    background-size : cover;

    background-color : rgba(255,255,255,0.4);
    background-blend-mode  : lighten;
}

/****************************************************************
  Header styling

  Lots of magic numbers here, just to position the elements.
****************************************************************/

header {
    background-color : white;
    position : relative;
    height : 180px;
    text-align: center;
}

header ul {
    margin-top : 20px;
    margin-right : 20px;
    float : right;
}
header li {
    display : inline; 
    margin-right : 20px;
}


.top-bar {
    background-color: var(--light-blue);
    position : absolute;
    top : 0px;
    height : 8px;
    width : 100%;

}

.search-bar {
    background-color: var(--light-blue);
    position : absolute;
    top : 50px;
    height : 50px;
    width : 100%;
}

.search-bar a {
    position : absolute;
    top : 12px;
    left : 280px;
    color : var(--pale-blue);
    font-style : oblique;
    font-weight : bold;
}
.search-bar a:hover {
    color : white;
}
.search-bar form {
    margin-top : 10px;
    margin-right : 20px;
    float : right;
}
.search-bar form input {
    width : 250px;
}

.banner {
    position : absolute;
    top : 100px;
    margin : auto;
    width : 100%;
}

.banner-text a {
    position : absolute;
    right : 40px;
    bottom : 0px;
    color : white;
    font-size : 24pt;
    font-family : Helvetica, Arial, Sans-Serif;
}

.logo {
    background-color: var(--dark-blue);
    margin : auto;
    position : absolute;
    top : 0px;
    left : 40px;
}

/****************************************************************
  Navigation styling
****************************************************************/

navigation {
  float: left;
  width: 30%;
  background-color: white;
  padding: 20px;
}


navigation a, .dropdown {
    margin : 2px;
    padding : 6px 8px 6px 16px;
    display : block;
    text-align : left;
    cursor : pointer;
    width : 100%;
    background-color: var(--pale-blue);
    color : var(--light-blue);
}

navigation a:hover {
    background-color : var(--very-pale-blue);
}

.downarrow {
    float : right;
}

.dropdown-container {
    display : none;
    padding-left : 10px;
}

.dropdown-container a {
    font-size: small;
}

.huxley-link {
    margin : 20px;
}

/****************************************************************
  Main content styling
****************************************************************/

article {
    float: left;
    padding: 20px;
    width: 70%;
    background-color: white;
}

section {
      background-color : white;
}

/* Clear floats after the columns */
section:after {
  content: "";
  display: table;
  clear: both;
}

/****************************************************************
 Footer styling
****************************************************************/

.wwu {
    background-color: var(--light-blue);
    color: white;
    padding: 10px;
    text-align: right;
}

.copyright {
    font-style : oblique;
}

/* Miscellaneous tweaks */
#download {
    float : right;
}

.lakeimage {
    margin-left : 8px;
    float : right;
}

.datalink {
    padding: 4px;
    border: 1px solid white;
    float: left;
    font-size: 14px;
    width: 130px;
    background-color: var(--pale-blue);
    color : var(--light-blue);
    text-decoration: underline;
}

.datalink:hover {
    background-color : var(--very-pale-blue);
}

.datalinkwide {
    padding: 4px;
    border: 1px solid white;
    float: left;
    font-size: 14px;
    background-color: var(--pale-blue);
    color : var(--light-blue);
    text-decoration: underline;
}

.datalinkwide:hover {
    background-color : var(--very-pale-blue);
}

.dataitem {
    clear : both;
}

.dataheader {

    clear : both;
}



/****************************************************************
 Responsive layout - makes the two columns/boxes stack on top of 
each other instead of next to each other, on small screens 
****************************************************************/
@media (max-width: 800px) {
  navigation, article {
    width: 100%;
    height: auto;
  }
  header li {
      display : none;
  }
  .search-bar a {
      display : none;
  }
}