/*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  * 
 *
 *		Design, coding, scripting & programming copyright (c) 2016 Kevin Wood Software.
 *		kevin@kevinwoodsoftware.co.uk - All rights reserved.
 *
 *		Style.css
 *
 *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  */
@font-face {
  font-family: Caslon;
  src: url(../layout/caslon.ttf); }

* {
  box-sizing: border-box; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *                              Colours
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *                      Screen dependant sizing
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *                                 Text styles
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
body,
p, ul, a, h1, h2, h3, h4, h5, h6,
button, input, select, textarea, label,
.big, .middle, .small, .tiny {
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  font-weight: normal;
  font-size: 2vmin;
  color: #303030;
  text-align: left;
  opacity: 1;
  margin: 0 0 1em 0;
  padding: 0; }

button, input, select, textarea {
  font-family: sans-serif;
  margin: 0; }

ul {
  padding: 2vw; }

h1, h2, h3, h4, h5, h6, .big, .middle, .small {
  font-family: Caslon;
  text-shadow: 0.1em 0.1em 2px #aaa;
  font-weight: bold;
  color: #2C5564;
  margin: 0.5em 0 0.5em 0; }

h1, h3, h5, button {
  text-align: center; }

p {
  text-align: justify; }

h1, h2, .big {
  font-size: 4vmin; }

h3, h4, .middle {
  font-size: 3vmin; }

.tiny {
  font-size: 1.5 vmin; }

#num {
  width: 5em; }

#date1, #date2 {
  width: 7em; }

#text {
  width: 30em; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *                             Main Container
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.container {
  clear: both;
  width: 100%;
  margin: auto;
  padding: 0;
  border: 0;
  overflow: auto;
  zoom: 1;
  background-image: url("../layout/sea.jpg");
  background-repeat: no-repeat;
  background-size: 100% 100%; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *                                   Header
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.header {
  clear: both;
  float: left;
  width: 100%; }
  .header .headerTitleSmall, .header .headerTitleBig {
    clear: both;
    float: left;
    display: block;
    width: 100%;
    margin: 0 0 -1vmin 0;
    padding: 1vmin 0 0 0;
    font-family: Caslon;
    font-size: 7vmin;
    font-weight: bold;
    line-height: normal;
    font-weight: normal;
    text-shadow: 0.05em 0.05em 2px #aaa;
    text-align: center;
    color: #333; }
  .header .headerTitleBig {
    display: none; }
  .header .headerMenuFill {
    clear: both;
    float: left;
    display: block;
    width: 1px;
    height: 1px; }
  .header .headerMenu {
    clear: none;
    float: left;
    display: block;
    margin: 2vmin 0 -1px 0; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *                                   Menus
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.menu {
  margin: 0;
  padding: 0;
  list-style: none;
  z-index: 999; }
  .menu li {
    display: block;
    position: relative;
    float: left;
    margin: 0 1px 1px 0;
    background: #2C5564; }
    .menu li a {
      margin: 0.4vmin 0.8vmin;
      font-family: Arial, Verdana;
      font-size: 11pt;
      font-style: normal;
      color: white;
      text-decoration: none;
      white-space: nowrap; }
    .menu li ul {
      padding: 0;
      display: none; }
  .menu li:hover {
    background: #617F8A; }
    .menu li:hover ul {
      display: block;
      position: absolute;
      padding: 3px 0; }
      .menu li:hover ul li {
        float: none;
        background: #617F8A;
        padding: 1px 0;
        margin: 0; }
      .menu li:hover ul li:hover {
        background: #95A9B1; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *                                  Content
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.content {
  clear: both;
  float: left;
  display: block;
  width: 98vw;
  margin: 0 1vw 0 1vw;
  border: 3px inset #7AE2DB;
  padding: 1vw;
  height: 2000px;
  /* Overridden by adjustFooter function */
  overflow: auto;
  background: #7f7f7f;
  background: rgba(255, 255, 255, 0.8); }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *                                   Footer
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.footer {
  clear: both;
  float: left;
  width: 98vw;
  margin-left: 1vw; }
  .footer .footerTerms {
    clear: both;
    float: left;
    width: 11%;
    margin-top: 0.5vw;
    text-align: left; }
    .footer .footerTerms a {
      font-size: 1.5vw;
      color: #303030; }
  .footer .footerText {
    clear: none;
    float: left;
    width: 79%;
    margin-top: 0.5vw;
    text-align: center;
    font-size: 2vw;
    color: #303030; }
    .footer .footerText a {
      font-size: 2vw;
      color: #303030; }
  .footer .footerLogo {
    clear: none;
    float: right;
    width: 10%; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *               					Tabs
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.tab {
  text-align: center;
  margin: 1em 0 1em 0;
  font: bold 11px verdana, arial, sans-serif;
  border-bottom: 1px solid #669933;
  list-style-type: none;
  padding: 3px 10px 3px 10px; }
  .tab li {
    display: inline; }
    .tab li a {
      padding: 3px 4px;
      border: 1px solid #669933;
      background-color: #E0FFFF;
      color: #666;
      margin-right: 0px;
      text-decoration: none;
      border-bottom: none; }
    .tab li a:hover {
      border-bottom: 1px solid #fff;
      background: #fff;
      /* set desired hover color */ }
  .tab li.selected a {
    background-color: #fff;
    /* set selected tab background color as desired */
    color: #000;
    /* set selected tab link color as desired */
    position: relative;
    top: -2px;
    padding: 3px 4px 5px;
    border-bottom: 1px solid #fff; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *                              Layout styles
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.fullWidth {
  clear: both;
  width: 100%;
  display: block;
  margin: 0 0 1vw 0; }

.filler {
  clear: both;
  width: 100%;
  height: 10px;
  background-color: #00BFFF;
  margin: 0 0 1vw 0; }

/*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  
 *
 *		Photos
 *
 *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  */
.apPhotoLeft {
  clear: both;
  float: left;
  width: 45%;
  padding: 0 1% 0 0; }

.apPhotoRight {
  clear: none;
  float: left;
  width: 55%;
  padding: 0 0 10px 0; }

.apGrid {
  clear: both;
  width: 100%;
  -webkit-column-count: 2;
  -moz-column-count: 2;
  column-count: 2; }

.apGridPhoto {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
  text-align: center;
  font-size: 12px; }

/*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  
 *
 *		Page flip stuff
 *
 *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  */
.panel {
  clear: both;
  width: 100%;
  -webkit-perspective: 1000px;
  perspective: 1000px; }
  .panel .front {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    border: 1px solid #ccc;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
    -webkit-transform: rotateX(0) rotateY(0);
    transform: rotateX(0) rotateY(0);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; }
  .panel .back {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 800;
    width: 100%;
    border: 1px solid #ccc;
    background: #333;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.7);
    text-align: center;
    padding: 0 15px;
    -webkit-transform: rotateY(-179deg);
    transform: rotateY(-179deg);
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out; }

.panel.flip .front {
  z-index: 900;
  border-color: #eee;
  background: #333;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotateY(179deg);
  transform: rotateY(179deg); }

.panel.flip .back {
  z-index: 1000;
  background: #DCDCDC;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  -webkit-transform: rotateX(0) rotateY(0);
  transform: rotateX(0) rotateY(0); }

.block .left, .block .title, .block .action, .block .right, .block .bottom {
  position: absolute;
  display: block;
  top: 50%;
  left: 0;
  top: calc(50% - 48px);
  text-align: left;
  display: block;
  opacity: 0;
  cursor: pointer;
  -webkit-transition: opacity 0.4s linear; }

.block .action {
  width: 15vw;
  font: 2vw;
  text-align: center;
  margin-left: calc((100% - 15vw) / 2);
  padding: 3px;
  background: #333;
  color: white; }

.block .bottom {
  width: 15vw;
  font: 2vw;
  text-align: center;
  margin-left: calc((100% - 15vw) / 2);
  top: 10%;
  padding: 3px;
  background: #333;
  color: white; }

.block .title {
  width: 100%;
  top: 20px;
  text-align: center;
  padding: 3px;
  background: #333;
  color: white; }

.block .left {
  left: 5px;
  width: 30px; }

.block .right {
  left: 50%;
  right: 5px;
  text-align: right; }

.block:hover .action {
  opacity: 0.7; }

.block:hover .bottom {
  opacity: 0.7; }

.block:hover .title {
  opacity: 0.7; }

.block:hover .left {
  opacity: 1; }

.block:hover .right {
  opacity: 1; }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *            Layout changes for not landscape mobiles
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-height: 415px) {
  .header .headerTitleSmall {
    display: none; }
  .header .headerTitleBig {
    display: block; } }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *               Changes for 769px to 1024px
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 769px) {
  .content {
    width: 96vw;
    margin: 0 2vw 0 2vw;
    padding: 2vw; }
  .fullWidth {
    margin: 0 0 2vw 0; }
  .apFiller {
    margin: 0 0 2vw 0; }
  .footer {
    width: 96vw;
    margin-left: 2vw; }
  h1, h2, .big {
    font-size: 24pt; }
  h3, h4, .middle {
    font-size: 18pt; }
  h5, h6, p, a, ul, .small {
    font-size: 12pt; }
  .tiny {
    font-size: 10pt; } }

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 *
 *                  Changes for photo grid
 *
 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media only screen and (min-width: 500px) {
  .apGrid {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3; } }

@media only screen and (min-width: 750px) {
  .apGrid {
    -webkit-column-count: 4;
    -moz-column-count: 4;
    column-count: 4; } }

@media only screen and (min-width: 1000px) {
  .apGrid {
    -webkit-column-count: 5;
    -moz-column-count: 5;
    column-count: 5; } }

@media only screen and (min-width: 1250px) {
  .apGrid {
    -webkit-column-count: 6;
    -moz-column-count: 6;
    column-count: 6; } }

/*  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  
 *
 *												Modifiers
 *
 *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  *  */
.centre {
  text-align: center; }

.noPad {
  margin: 0;
  padding: 0; }

.smallPad {
  margin: 0 0 0.5vw 0;
  padding: 0; }