/*  Start CSS Header */

/* Navigation bar styling */
    
/*  Background and visibility of navbar */    
.navbar {
    overflow: visible;
    background-color: #bb99ff;
    font-family: sans-serif;
    width: 95%;
    margin: 20px;
    border-radius: 10px;
}

/* Navigation bar spacing/positioning od buttons and rounded edges */
.navbar a {
    float: left;
    display: block;
    font-size: 16px;
    color: white;
    text-align: center;
    padding: 14px 16px;
    border-radius: 10px;
}

/* Sets the navbar links to the active colour */
.active {
    background-color: #582CB0 !important; 
    border-radius: 10px;
}
    
/* Hides the responsive menu list */
.navbar .icon {
  display: none;
}

/* Dropdown button positioning */
.dropdown {
  float: left;
  overflow: visible;
  outline: none;
}
/* Changes primary dropdown button background */
.btn-primary  {
    background-color: #bb99ff;
/*    margin-left: 0px;
    padding-left: 8px;
    */
    }  
/* Changes primary dropdown button when clicked */
.dropdown .btn-primary:focus  {
    background-color: #582CB0 !important;
    outline: none;
    }   

/* Changes primary dropdown button when hover */   
.btn-primary:hover  {
    background-color: #884dff !important;
    } 
    
/* dropdown top button, size, background formating, hover size */
 .btn {
    font-size: 16px;  
    border: none;
    outline: none;
    color: white;
    padding: 14px 15px;
    background-color: #bb99ff;
    border-radius: 10px;
}
 /* Changes backgroud colour of dropdown button when lower menu item is clicked & held */
.navbar .dropdown .btn {
    background-color: #bb99ff;
}

 /* dropdown top button, size and backgroundformating */
.dropdown .btn {
  font-size: 16px;  
  color: white;
  padding: 14px 15px;
  background-color: #bb99ff;
  border-radius: 10px;
} 

/* Hover colour of navbar titles */
.navbar a:hover {
  background-color: #884dff;
    text-decoration: none;
}
   
/*.dropdown:hover, .dropdown a:hover, .btn:hover*/
    
/* Hover colour of dropdown titles */
.dropdown-menu a:hover {
    background-color: #884dff;
    text-decoration: none;
}
 
/* Shape and size of dropdown box */
.dropdown-menu {
    display: none;
    position: absolute;
    min-width: 20px;
    padding: 0px;
    background-color: #bb99ff;
    box-shadow: 0px 8px 16px 0px;
    border-radius: 10px;
    
}

/*  Dropdown text buttons format */
.dropdown-menu a {
    float:none;
    display: block;
    text-align: left;
    background-color: #bb99ff;
    color: white;
    margin: 0px;
    padding: 10px;
    }


/* Changes the dropdown arrow up or down */
.caret.caret-up {
    border-top-width: 0;
    border-bottom: 4px solid #fff;
  }
  
/* Addition for responsive navbar 
 When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). 
Show the link that contains should open and close the topnav (.icon) */

@media screen and (max-width: 600px) {
  .navbar a:not(:first-child), .dropdown .btn {
    display: none;
  }

  .navbar a.icon {
    float: right;
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. 
This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
@media screen and (max-width: 600px) {
  .navbar.responsive {position: relative;}
  .navbar.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .navbar.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .navbar.responsive .dropdown {float: none;}
  .navbar.responsive .dropdown-menu {position: relative;}
  .navbar.responsive .dropdown .btn {
    display: block;
    width: 95%;
    text-align: left;
  }
}
/*  End CSS Header */
  

/*  Page Body */
body {
    background-image: url(/_ind-img/gradient_bg.png);
    background-repeat: repeat-x;
    margin: 20px;
    font-size: 14px;
    color: darkslateblue;
    font-family: "Verdana", Verdana, sans;	
}
h1 {
    color: darkslateblue;
    font-family: "Verdana", Verdana, sans;
    font-size: 150%; font-weight: bold;
    margin-left: 20px;
}

h2 {
    color: purple;
    font-size: 100%;
    margin-left: 20px;
}

h3 {
    color: black;
    font-size: 90%;
    margin-left: 20px;
}

p {
	color: darkslateblue;
	width: 95%;
	margin-left: 20px;
	margin-right: 30px;
	text-align: justify; 
}

aside {
	width:200px;
	float:right;
	margin-left:10px;   
}

/*Tables e.g. Top of Diary page */
table.style1 {
 	display: flex;
	flex-direction: row; 
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	margin-right:20%;
	margin-left:10px;
	margin-bottom: 30px;
}

table.style1 td, th {
	border: 1px solid black;
	color: darkslateblue;
	font-size: 100%;
	text-align: left;
	padding-top: 4px;
	padding-bottom: 4px;
	padding-right: 10px;
    padding-left: 10px;
}

/* General container for smaller photos (includes figure caption height) (see index page) */
div.container1 {
	width:100%;
	height:190px;
	margin:20px;
	border:0px solid gray;
}
div.container1 img {
	display: inline-block; 
	float:left; 
	width:200px; 
	height:150px; 
	margin-right:20px; 
	margin-left:20px;
	margin-bottom:2px;
}

/* This container keeps videos at same height (includes figure caption height)(See bottom of 2015 Diary page) */
div.container {
	width:100%;
	height:200px;
	margin-right: 5px;
	margin-bottom: 20px;
	margin-left: 0px;
	border:0px solid gray;
}

/* Create two equal columns that sits next to each other e.g. Diary 2015 page*/
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 250px;
  margin-right: 35px;
  margin-left: 35px;
}

/* Clearfix (clear floats) */
.row::after {
    height: auto;
  content: "";
  clear: both;
  display: table;
}

span.b {
  display: inline-block;
  width: 250px;
  height: auto;
  padding: 5px;
  margin-right: 50px;
     
}

/*Start Cheshire Image*/

.sansserif {
  font-family: Arial, Helvetica, sans-serif;
}
#myImg {
  border-radius: 25px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: #582CB0; /* Fallback color */
  background-color: #582CB0;  /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  font: 15px Arial, sans-serif;
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ffffff;
  padding: 10px 50px;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: white;
  opacity: 0.9;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 90%;
  }
}

/*End Cheshire Image*/

/* Responsive layout of pictures on index page */

.row4 {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

.column4 {
  -ms-flex: 24%; /* IE10 */
  flex: 24%;
  max-width: 24%;
  padding: 0 4px;
}

.column4 img {
  margin-top: 8px;
  margin-left: 15px;
  margin-right: 15px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout on index page - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column4 {
    -ms-flex: 48%;
    flex: 48%;
    max-width: 48%;
  }
}

/* Responsive layout on index page - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column4 {
    -ms-flex: 98%;
    flex: 98%;
    max-width: 98%;
  }
}

/* Can be used as the poster id to fit to videos but all ids on page should be different (Use id="bgvid") */
#bgvid {
  width: 250px;
  height: 188px;
  background-color: #f0f0f0;
  object-fit: cover; 
}

video {  
	max-width: 100%;  
	height: auto;  
	margin-right: 0px;
	margin-left: 0px;
	position: relative;
	border-radius: 8px;
}

/* To make poster size fit video size */
.video1[poster] {  
	width: 250px;  
	height: 188px;  
	margin-right: 0px;
	margin-left: 0px;
	position: relative;
	border-radius: 8px;
	object-fit: inherit;
}

.TextWrapRight {
	clear: left;
	float: right;
	margin-left: 10px;
	margin-right: 40px;
	margin-top: 0px;
	margin-bottom: 2px;	
}

.TextWrapLeft {
	clear: right;
	float: left;
	margin-left: 20px;
	margin-right: 20px;
	margin-top: 0px;
	margin-bottom: 20px;
}

div.left {
	float:left;
	margin:0;
	padding:1em;
}

.right {
	float:right;
	width:300px;
	margin:0;
	padding:1em;
}

/* For using the whole screen, fill left, then right (see table on visitors.html)*/

.leftspace{
	float:left;
	margin-right:10px;
	margin-left:20px;
	padding-right:10px;
	border:0px solid red;
	}
	
.rightspace{
	border:0px solid black;	
	}

img { 
	display: inline-block;
	border-radius: 8px;
	border-style: solid;
	border-width: 1px;
	border-color: #582CB0;
	margin-right: 10px;
} 

.bottomleft {
	position: absolute;
	bottom: 8px;
	left: 16px;
	font-size: 80%;
}

figcaption {
	display: block;
	font-size: 80%;
	font-style: italic;
	font-variant: initial;
	text-align: center;
	margin: 0px;
}

figure {
	display: block;
	margin: 10px;
}

/*  Buttons:*/

.button1 {
	background-color: white;
	color: black;
	padding: 8px 16px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 16px;
	margin: 2px 2px 2px 20px;
	-webkit-transition-duration: 0.4s; /* Safari */
	transition-duration: 0.4s;
	cursor: pointer;
	border: 2px solid #884dff;
	border-radius: 50px;
}

.button1:hover {
    background-color: #582CB0;
    color: white;
}

/* Photos page */

.wrapper {
	width: 95%;
	Height: auto;
	position: relative;
	margin-left: 20px;
}
.wrapper .thumbnails {
	width: 50%;
	float: right;
}
.wrapper label > img {
	opacity: 0.6;
}
.wrapper label > img:hover {
	opacity: 1;
}
.wrapper input {
	display: none;
}
.wrapper input:checked + .full-image {
	display: block;
}
.wrapper input:checked ~ img {
	opacity: 1;
}
.wrapper .full-image {
	width: 530px;
	display: none;
	position: absolute;
	top: 0;
	left: 0;
}
.wrapper .description {
	width:98%;
	text-align: center;
	padding: 5px;
	background-color:#e2d4ff;
	border-radius: 8px;
}


      
/*iPhone/iPad portrait display changes:
To shrink the Cheshire image to fit on iphone display when expanded*/
@media(max-width:800px){
div[id^=image]:target {
    flex: 100%;
    max-width: 115%;
    height: auto;
  }
}

/*  iPad/iPhone photo page:*/
@media(max-width:1200px){ 
.wrapper {
    width: 100%;
}
}
@media(max-width:1200px){  
.wrapper .full-image {
    width: 50%;
}
}
@media(max-width:1200px){ 
.wrapper .thumbnails {
    width: 45%;
}
}