@charset "utf-8";

/* © 2016
   Author: Jane Griffiths
   Last amended: 27/01/16
*/

/* STYLES FOR CSS-ONLY GALLERY */

/* CSS only gallery (using radio inputs)
 * Heavily adapted from an example at 
   http://css-tricks.com/forums/topic/click-thumbnail-and-make-it-larger-image-image-gallery-wo-javascript/
 * Support needed for IE7 & older - see http://css-tricks.com/child-and-sibling-selectors/
 */

.gallery_banner {
	width: 100%;
	height: 1px;
}

#gallery_boxout {
	position: relative;
	padding: 20px 20px 20px 20px;
	margin-top: 30px;
	border: 1px solid #D5D5AA;
	border-radius: 10px;
	background-color: #FEFEFC;
	color: #555;
	box-shadow: 2px 2px 5px #CCC;
	z-index: 50;
	height: auto; /* or 600px if this needs to be defined */
	min-width:220px;
}

.gallery_head {
	width: 750px;
}

#gallery_picker_link a {
	text-decoration: none;
	border-bottom: dashed 1px;
}

.gallery_control_instructions {
	display: none;
	/* to be revealed only if on large screen with JavaScript enabled */
}

#gallery_menu {
	margin-top: 40px;
}

.gallery_list {
	line-height: 2em;
}

.gallery_list li {
	list-style: none;
	margin-left: 10px;
}

#current_li {
	list-style:url(images/current.png);
	list-style-position:outside;
}

.gallery_pics_wrapper {
    width: 750px;
	height: 510px; /* picture_frame height (450px) 
	                  plus gallery_control_panel height (60px) */
    position: relative;
}

.picture_frame {
	width:600px;
	height: 450px;
	border: 1px solid #333;
	-moz-box-shadow: 2px 2px 5px #888;  
	-webkit-box-shadow: 2px 2px 5px #888;   
	box-shadow: 2px 2px 5px #888;
    
	background-size:contain;
	background-repeat:no-repeat;
	background-position:center;
	
	background-color: #F5F5F5;
}
/* Fade-in animation for the picture frame, 
applicable only to screens at least 480px wide, 
to prevent bugs on screens below this size when 
thumbnails are no longer visible */
@media screen and (min-width: 480px) {
	.picture_frame {
	animation-name: fade_in;
    animation-duration: 2.5s;
	}
}
@keyframes fade_in {
    0% {opacity: 0.5;
	}
	100% {opacity: 1;
	}
}

.gallery_pics_wrapper .full-image {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}

.gallery_pics_wrapper .description {
    position:relative;
	bottom:51px;
	height:40px;
	width:590px;
	margin-left: 1px;
	margin-bottom: 5px;
    padding:5px;
	background-color:#FFF;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE8 */
	filter: alpha(opacity=80); /* IE5-7 */
	opacity: 0.8; /* Standard */
	text-align:center;
	animation-name: reveal_description;
    animation-duration: 1.5s;
}
@keyframes reveal_description {
	0% {opacity: 0; bottom: 0px; height: 0px;}
	50%{opacity: 0.3;}
	100% {opacity: 0.8; bottom: 51px; height: 40px;}
}

.thumbnail_frame {
	width: 65px;
	height: 65px;
	box-shadow: 1px 1px 2px #888;

	-webkit-transition: border 1s; /* Safari */
    transition: border 1s;
}

.thumbnail_frame:hover {
	border: 1px solid #008000;
}

.gallery_pics_wrapper .thumbnails {
    width: 140px;
    float: right;
}

.gallery_pics_wrapper a {
    margin: 2px;
}
.gallery_pics_wrapper img {
    border: 1px solid #000;
}

/* Reduce the opacity of unselected thumbnails... */
.gallery_pics_wrapper label > img {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /* IE8 */
	filter: alpha(opacity=60); /* IE5-7 */
	opacity: 0.6; /* Standard */
}

/* ...but restore full opacity on hover */
.gallery_pics_wrapper label > img:hover {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
	filter: alpha(opacity=100); /* IE5-7 */
	opacity: 1; /* Standard */
}

/* Ensure that only the selected image is shown, by hiding the others */
.gallery_pics_wrapper input {
    display: none;
}

/* Applies only to .full-image div that's *immediately* after a checked radio within the gallery */
.gallery_pics_wrapper input:checked + .full-image {
    display: block;
}
/* As above, but for IE8, which doesn't support the 'checked' pseudo-element: */
.gallery_pics_wrapper input[type="radio"][checked="checked"] + .full-image {
    display: block;
}/* NB: this fails when testing in compatibility mode, as the browser doesn't 
update the radio button's state: may need JavaScript workaround as well or instead */

/* Applies to any image preceded by a checked radio within the gallery */
.gallery_pics_wrapper input:checked ~ img {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
	filter: alpha(opacity=100); /* IE5-7 */
	opacity: 1; /* Standard */
}
/* As above, but for IE8, which doesn't support the 'checked' pseudo-element: */
.gallery_pics_wrapper input[type="radio"][checked="checked"] ~ img {
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /* IE8 */
	filter: alpha(opacity=100); /* IE5-7 */
	opacity: 1; /* Standard */
}/* NB: this fails when testing in compatibility mode, as the browser doesn't 
update the radio button's state: may need JavaScript workaround as well or instead */


/* STYLES FOR GALLERY CONTROLS */

#gallery_control_panel {
	position: relative;
	width: 600px; /* Same as for picture_frame */
	height: 60px;
	text-align:center;
	margin-top: -40px;
	display: none; /* Hidden unless the browser has JavaScript enabled, 
	                  in which case the control panel will be revealed 
					  dynamically via the gallery.js code */
}

#gallery_buttons {
	position:absolute;
	width: 600px;
	margin-right: auto;
	margin-left: auto;
	text-align:center;
}

#pause_control {
	visibility: hidden; /* at outset (responds to events using JavaScript) */
	width: 100px;
	z-index: 99;
	position: absolute;
	left: 250px;
}

#play_control {
	visibility:inherit; /* at outset (responds to events using JavaScript) */
	width: 100px;
	z-index: 60;
	position: absolute;
	left: 250px;
}

#prev_control {
	position: absolute;
	z-index: 99;
	left: 100px;
}

#next_control {
	position: absolute;
	z-index: 99;
	right: 100px;
}

#pause_control, #play_control, #prev_control, #next_control {
	min-height: 2.5em;
}


/* MOBILE VERSIONS OF GALLERY */

/* Screens up to 980px*/
@media screen and (max-width: 980px) {
  .gallery_pics_wrapper, .gallery_head {
	  width: 680px;
  }
  .picture_frame {
	  width:550px;
	  height: 412px;
  }
  .gallery_pics_wrapper {
	  height: 472px; /* gallery_control_panel height (60px) 
	                    plus picture_frame height */
  }
  #gallery_control_panel, #gallery_buttons {
	  width: 550px; /* Same as for picture_frame */
  }
  .gallery_pics_wrapper .thumbnails {
	  width: 120px;
  }
  .thumbnail_frame {
	  width: 55px;
	  height: 55px;
  }
  .gallery_pics_wrapper .description {
	  width:540px;
  }
  
  #pause_control, #play_control {
	  left: 225px;
  }

  #prev_control {
	  left: 100px;
  }
  
  #next_control {
	  right: 100px;
  }
}

/* Screens up to 800px*/
@media screen and (max-width: 800px) {
  .gallery_pics_wrapper, .gallery_head {
	  width: 630px;
  }
  .picture_frame {
	  width:500px;
	  height: 375px;
  }
  .gallery_pics_wrapper {
	  height: 435px; /* gallery_control_panel height (60px) 
	                    plus picture_frame height */
  }
  #gallery_control_panel, #gallery_buttons {
	  width: 500px; /* Same as for picture_frame */
  }
  .gallery_pics_wrapper .thumbnails {
	  width: 120px;
  }
  .thumbnail_frame {
	  width: 55px;
	  height: 55px;
  }
  .gallery_pics_wrapper .description {
	  width:490px;
  }
  .description {
	  font-size: 0.9em;
	  line-height: 1.25em;
  }
  
  #pause_control, #play_control {
	left: 200px;
  }

  #prev_control {
	  left: 100px;
  }
  
  #next_control {
	  right: 100px;
  }
}

/* Screens up to 768px*/
@media screen and (max-width: 768px) {
  h1 {
	  font-size: 1.4em;
  } 
  .gallery_pics_wrapper, .gallery_head {
	  width: 565px;
  }
  .picture_frame {
	  width:450px;
	  height: 337px;
  }
  .gallery_pics_wrapper {
	  height: 397px; /* gallery_control_panel height (60px) 
	                    plus picture_frame height */
  }
  #gallery_control_panel, #gallery_buttons {
	  width: 450px; /* Same as for picture_frame */
  }
  .gallery_pics_wrapper .thumbnails {
	  width: 105px;
  }
  .thumbnail_frame {
	  width: 45px;
	  height: 45px;
  }
  .gallery_pics_wrapper .description {
	  width:440px;
  }
  
  #pause_control, #play_control {
	left: 175px;
  }

  #prev_control {
	  left: 80px;
  }
  
  #next_control {
	  right: 80px;
  }
}

/* Screens up to 639px*/
@media screen and (max-width: 639px) {
  .gallery_pics_wrapper, .gallery_head {
	  width: 500px;
  }
  .picture_frame {
	  width:400px;
	  height: 300px;
  }
  .gallery_pics_wrapper {
	  height: 360px; /* gallery_control_panel height (60px) 
	                    plus picture_frame height */
  }
  #gallery_control_panel, #gallery_buttons {
	  width: 400px; /* Same as for picture_frame */
  }
  .gallery_pics_wrapper .thumbnails {
	  width: 90px;
  }
  .thumbnail_frame {
	  width: 40px;
	  height: 40px;
  }
  .gallery_pics_wrapper .description {
	  width:390px;
  }
  
  #pause_control, #play_control {
	left: 150px;
  }

  #prev_control {
	  left: 60px;
  }
  
  #next_control {
	  right: 60px;
  }
}

/* Screens up to 579px*/
@media screen and (max-width: 579px) {
  h1 {
	  font-size: 1.3em;
  }
  .gallery_pics_wrapper, .gallery_head {
	  width: 456px;
  }
  .picture_frame {
	  width:360px;
	  height: 270px;
  }
  .gallery_pics_wrapper {
	  height: 330px; /* gallery_control_panel height (60px) 
	                    plus picture_frame height */
  }
  #gallery_control_panel, #gallery_buttons {
	  width: 360px; /* Same as for picture_frame */
  }
  .gallery_pics_wrapper .thumbnails {
	  width: 84px;
  }
  .thumbnail_frame {
	  width: 36px;
	  height: 36px;
  }
  .gallery_pics_wrapper .description {
	  width:350px;
  }
  
  #pause_control, #play_control {
	  width: 80px;
	  left: 140px;
  }

  #prev_control {
	  left: 40px;
  }
  
  #next_control {
	  right: 40px;
  }
}

/* Screens up to 519px*/
@media screen and (max-width: 519px) {
  h1 {
	  font-size: 1.25em;
  }
  .gallery_pics_wrapper, .gallery_head {
	  width: 412px;
  }
  .picture_frame {
	  width: 330px;
	  height: 247px;
	  border: 0.5px solid #333;
	  box-shadow: 2.5px 2.5px #CCCCCC;
  }
  .gallery_pics_wrapper {
	  height: 267px; /* Allow for gallery_control_panel height 
	                    plus picture_frame height */
  }
  #gallery_control_panel, #gallery_buttons {
	  width: 330px; /* Same as for picture_frame */
	  margin-top: 0px;
  }
  #pause_control, #play_control {
	left: 125px;
  }
  #prev_control {
	  left: 30px;
  }
  #next_control {
	  right: 30px;
  }
  .gallery_pics_wrapper .thumbnails {
	  width: 70px;
  }
  .thumbnail_frame {
	  width: 30px;
	  height: 30px;
  }
  .gallery_pics_wrapper .description {
	  width:320px;
	  padding:5px;
	  background-color:#FFF;
	  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)"; /* IE8 */
	  filter: alpha(opacity=80); /* IE5-7 */
	  opacity: 0.8; /* Standard */
	  text-align:center;
  }
}

/* Screens up to 479px*/
@media screen and (max-width: 479px) {
  #gallery_boxout {
	  width: 90%;
  }
  h1 {
	  font-size: 1.25em;
  }  
  #gallery_control_panel {
	  left:0px; /* To align better with main picture, 
				   as thumbnails will be removed (see below) */
  }
  #gallery_buttons, .gallery_head {
	  width: 330px; /* NB: head now the same width as picture_frame, 
	                   as there will be no thumbnails to allow for */
  }
  .gallery_pics_wrapper {
	  width: 380px;
	  height: 267px; /* Allow for gallery_control_panel height 
	                    plus picture_frame height */
  }  
  #pause_control, #play_control {
	  left: 125px;
  }
  #prev_control {
	  left: 30px;
  }
  #next_control {
	  right: 30px;
  }
  #pause_control, #play_control, #prev_control, #next_control {
	min-height: auto;
  }

  /* Thumbnails aren't much use at this scale, 
  so hide them to allow more room for main picture */
  .thumbnails {
	  visibility:hidden;
  }
  /* ...But restore the visibility of the selected picture afterwards */
  .picture_frame {
	  visibility:visible;
  }
}

/* Screens up to 400px*/
@media screen and (max-width: 400px) {
  .gallery_head, .picture_frame, #gallery_control_panel, #gallery_buttons {
	  width: 300px;
  }
  .picture_frame {
	  height: 225px; /* Three-quarters of width */
  }
  .gallery_pics_wrapper {
	  width: 340px;
	  height: 245px; /* Allow for gallery_control_panel height 
	                    plus picture_frame height */
  }  
  #pause_control, #play_control {
	  left: 110px;
  }
  #prev_control {
	  left: 25px;
  }
  #next_control {
	  right: 25px;
  }
}

/* Screens up to 360px*/
@media screen and (max-width: 360px) {
  .gallery_head, .picture_frame, #gallery_control_panel, #gallery_buttons {
	  width: 280px;
  }
  .picture_frame {
	  height: 210px; /* Three-quarters of width */
  }
  .gallery_pics_wrapper {
	  width: 320px;
	  height: 230px; /* Allow for gallery_control_panel height 
	                    plus picture_frame height */
  }    
  #pause_control, #play_control {
	  left: 100px;
  }
}

/* Screens up to 340px*/
@media screen and (max-width: 340px) {
  .gallery_head, .picture_frame, #gallery_control_panel, #gallery_buttons {
	  width: 260px;
  }
  .picture_frame {
	height: 195px; /* Three-quarters of width */
  }
  .gallery_pics_wrapper {
	width: 300px;
	height: 215px; /* Allow for gallery_control_panel height 
	                    plus picture_frame height */
  }    
  #pause_control, #play_control {
	left: 90px;
  }
}

/* Screens up to 320px*/
@media screen and (max-width: 320px) {
  #gallery_boxout {
	  padding: 15px;
  }
  .gallery_head, .picture_frame, #gallery_control_panel, #gallery_buttons {
	  width: 250px;
  }
  .picture_frame {
	height: 187px; /* Three-quarters of width */
  }
  .gallery_pics_wrapper {
	width: 290px;
	height: 207px; /* Allow for gallery_control_panel height 
	                    plus picture_frame height */
  }    
  #pause_control, #play_control {
	left: 85px;
  }
  #prev_control {
	  left: 20px;
  }
  #next_control {
	  right: 20px;
  }
}

/* Screens up to 300px*/
@media screen and (max-width: 300px) {
  #gallery_boxout {
	  padding: 10px;
  }
  .gallery_head, .picture_frame, #gallery_control_panel, #gallery_buttons {
	  width: 240px;
  }
  .picture_frame {
	  height: 180px; /* Three-quarters of width */
  }
  .gallery_pics_wrapper {
	width: 270px;
	height: 200px; /* Allow for gallery_control_panel height 
	                  plus picture_frame height */
  }  
  #pause_control, #play_control {
	left: 80px;
  }
  #prev_control {
	  left: 10px;
  }
  #next_control {
	  right: 10px;
  }
}

/* Screens up to 290px*/
@media screen and (max-width: 290px) {
  .gallery_head, .picture_frame, #gallery_control_panel, #gallery_buttons {
	  width: 240px;
  }
  .picture_frame {
	  height: 180px; /* Three-quarters of width */
  }
  .gallery_pics_wrapper {
	width: 260px;
	height: 200px; /* Allow for gallery_control_panel height 
	                  plus picture_frame height */
  }   
  #pause_control, #play_control {
	left: 80px;
  }
}

/* Screens up to 280px*/
@media screen and (max-width: 280px) {
  .gallery_head, .picture_frame, #gallery_control_panel, #gallery_buttons {
	  width: 230px;
  }
  .picture_frame {
	  height: 172px; /* Three-quarters of width */
  }
  .gallery_pics_wrapper {
	width: 250px;
	height: 192px; /* Allow for gallery_control_panel height 
	                  plus picture_frame height */
  }   
  #pause_control, #play_control {
	left: 75px;
  }
}

/* Screens up to 270px*/
@media screen and (max-width: 270px) {
  .gallery_head, .picture_frame, #gallery_control_panel, #gallery_buttons {
	  width: 220px;
  }
  .picture_frame {
	  height: 165px; /* Three-quarters of width */
  }
  .gallery_pics_wrapper {
	width: 240px; 
	height: 185px; /* Allow for gallery_control_panel height 
	                  plus picture_frame height */
  }   
  #pause_control, #play_control {
	width: 70px;
	left: 75px;
  }
}

/* Screens up to 260px*/
@media screen and (max-width: 260px) {
  .gallery_head, .picture_frame, #gallery_control_panel, #gallery_buttons {
	  width: 200px;
  }
  .picture_frame {
	height: 150px; /* Three-quarters of width */
  }
  .gallery_pics_wrapper {
	width: 220px;
	height: 170px; /* Allow for gallery_control_panel height 
	                  plus picture_frame height */
  }   
  #pause_control, #play_control {
	width: 50px;
	left: 75px;
  }
}

/* Screens up to 250px*/
@media screen and (max-width: 240px) {
  #gallery_boxout {
	  padding: 8px;
  }
}

/* Screens up to 240px*/
@media screen and (max-width: 240px) {
  #gallery_boxout {
	  padding: 7px;
  }
}


/* STYLES FOR PRINTED VERSIONS */
@media print {
	#gallery_picker_link {
		display: none;
	}
	
	#gallery_boxout {
		margin-top: 40px;
	}
	
	.gallery_pics_wrapper {
		width: 150px;
		height: 450px;;
	}
	
	.picture_frame {
		display: none;
	}
	
	.full-image {
		display: none;
	}
	
	.thumbnails {
		float: none;
		margin-left: 0;
		width: 140px;
	}
	
	.thumbnail_frame {
	  width: 65px;
	  height: 65px;
	}
	.description {
		display: none;
	}

	#gallery_buttons {
		display: none;
    }
}