/***** Global layout variables *****/
body{
  width: 99%; /* Controls the width of the whole page */
  margin-left: auto; /* Centres the page */
  margin-right: auto; /* Centres the page */
  min-width: 1000px; /* If the browser window is less wide than this, 
cause the 
window to scroll */
  background: #FFFFFF; /* Colour of the page */
  font-size: 14px;
  font-family: 'Trebuchet MS', Trebuchet, 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  text-align: left;
}

/***** HTML5 tags *****/
header, nav, aside, section, footer {
  display: block; /* Display these elements as blocks (sections of the page) */
}

/***** Page header *****/
.banner{ /* From top of page to navigation bar, inclusive, is part of the banner */
  text-shadow: 0px 1px 1px #000;
}

.bannerimage1{ /* Left image */
  margin-left: 3em;
  margin-right: 3em;
  margin-top: 1em;
  float: left; /* Position the image at the left of the banner */
  box-shadow: 2px 2px 2px white; /* Put a shadow around the image */
}
.bannerimage2{ /* Right image */
  margin-left: 3em;
  margin-right: 3em;
  margin-top: 1em;
  float: right; /* Position the image at the right of the banner */
  box-shadow: 2px 2px 2px white;
  z-index: -1; /* Position the image behind the other elements of the banner */
  display:run-in;
}

  .banner h1{ /* Name at top of page */
    font-size: 3em;
    text-align:left;
    margin-top:0px;
    color: #0000FF;
    
  }

  /***** Navigation bar *****/
  .banner nav{
    margin-left: 2em;
    height: 40px;
    text-align: left;
    font-size: 1.3em;
    line-height: 30px;
  }
    .banner nav ul{ /* The list container in the navigation bar*/
      width: inherit;
      padding: 0px;
    }
    .banner nav li{ /* The list elements that contain links in the navigation bar */
      display: inline; /* Make the navigation bar's list elements display horizontally in a bar instead of a list */
      margin: 0;
    }
    .banner nav a:link, .banner nav a:visited { /* Formatting the links in the navigation bar*/
      height: 30px;
      text-align: center;
      width: 8em;
      padding: 5px 1em;
      font-size: 14px;
      display: inline-block;
      color: #000000;
      text-decoration: none; /* Don't make the links blue and underline them */
      font-weight: bold;
      background-color: #CCCCFF;
      border-radius: 5px;
    }
    .banner nav .active a:link, .banner nav .active a:visited, .banner nav a:hover, .banner nav a:active {
      box-shadow: 0px 1px 4px white; /* Give the navigation bar buttons a shadow 
effect on hover*/
      color: #0000FF;
      background-color: #CCCCFF; /* Don't change colour when hovering */
    }
    .info{ /* Text beside picture in top left*/
      color: #000000;
      font-size: 16px;
      font-weight: bold;
    }
    .info a:link{ /* Links beside picture in top-left */
      text-decoration: none; /* Don't underline links */
      color: #000000; /* Don't colour links */
    }

/***** Content *****/
div.wrapper{
  padding: 0em;
  width: 90%;
  margin: 0 auto;
  background: #0FABCE;
}
  .column{
      float: left;
      padding: 10px;
      width: 90%;
      background: #FFFFFE;
      border-radius: 10px;
  }
  .left_column{
      float: left;
      padding: 10px;
      width: 40%;
      background: #CCCCFF;
      border-radius: 5px;
      font-size: 16px;
  }
  .left_column b{
      margin-left: 1em;
  }
  .left_column h3{
      text-decoration: underline;
  }
  div.right_column{
      float: right;
      padding: 10px;
      width: 40%;
      background: #CCCCFF;
      border-radius: 5px;
      font-size: 16px;
  }

  .wrapper h2{
      color: #0000FF;
      font-size: 1.8em;
      font-weight: bold;
      background-color: #FFFFFE;
      overflow: hidden;
      padding:3px;
      text-shadow: 0px 1px 1px #000;
    }

  .wrapper a:link{
      color: #000000;
      font-weight: bold;
      overflow: hidden;
      text-decoration: none; /* Don't underline links */
      padding:3px;
    }
  .wrapper a:hover{
    color: #0000FF;
  }


      
.content{
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2em;
}
  .content h2{
    color: #0000FF;
    font-size: 1.8em;
    font-weight: bold;
    background-color: #FFFFFE;
    overflow: hidden;
    padding:3px;
    text-shadow: 0px 1px 1px #000;
  }
  .content h3{
    color: #000000;
    font-size: 1.5em;
    font-weight: bold;
    overflow: hidden;
  }
  .content p{
    background-color: #CCCCFF;
    border-radius: 5px;
    padding:3px;
  }
  .content li{
    text-shadow: 0px 1px 1px #CCC;
    padding:1px;
    width: 95%;
    font-size:1.4em;
  }
    .date{
      color: #000000;
      font-size: 10px;
    }

  .content a{
      color: #0000FF;
      font-weight: bold;
      overflow: hidden;
  }

/***** Button *****/
.button:link, .button:visited{
  color: #000000;
  background: #CCCCFF;
  padding: 8px;
  border-radius: 5px;
  font-size: 1.3em;
  margin: 6px 6px 6px 6px;
  box-shadow: 0px 1px 2px white;
  text-decoration: none;
  text-align: center;
  display: block;
}
  .button:hover{
    background-color: #CCCCFF;
    color: #0000FF;
    text-shadow: 0px 1px 1px #FFF;
    box-shadow: 3px 3px 3px white;
  }

/***** Footer *****/
.footer{
  margin-bottom: 0.2em;
  padding: 15px 20px 5px 20px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #CCCCFF;
  font-style: normal;
  text-align: left;
  box-shadow: 0px 1px 2px white;
}

  .footer a{
    color: #000000;
    text-decoration: none;
    font-weight: bold;
    text-shadow: 0px 1px 1px #000;
  }