body {
	font: 10pt Arial, Verdana, Helvetica, sans-serif;
	margin: 0pt; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: center; /* this centers the container in IE 5* browsers. The text is then set to the left aligned default in the #container selector */
	color: #000000;
	background: #c1b396;
	/* The following attributes adjust the left and right shading on #container */
	background-image: url("images/bg_shadow.jpg");
	background-position: 50%;
    background-repeat: repeat-y;
    background-attachment: scroll;
}

a:link{
    color: #A67C52;
  }

a:visited {
  color: #714316;
}

a:hover {
  color: #DB1018;
}

a:active {
  color: #DB1018;
}

strong {
	color:#714316;
}

#thumbwrapper {
/* Uncomment thumbwrapper and imageframe borders to see how images and captions are being positioned in the thumbnails */
/* border-style:dotted; */
	float: left;
	text-align:center;
/* The width for thumbwrapper and the width for imageframe need to match in order to centre the thumbnail images properly */
	width: 171px;
	height: 170px;
/*	display:table; */
}

#imageframe {
/* Creating the imageframe div inside the thumbwrapper div allows vertically aligning the caption text for each thumbnail, */
/* regardless whether the image is portrait or landscape */
/* border-style:solid; */
/* Match the width of imageframe with the width for thumbwrapper */
	text-align:center;
	width:171px;
	height:115px;
/* Set the font size to match the height only for the sake of IE */
	font-size:115px;
/* The following two attributes set vertical centering for Firefox and Chrome */
	display:table-cell; 
	vertical-align:middle;
}

/* Use a conditional statement to reset the font size for browsers other than IE */ 
*>#imageframe {
	font-size:10pt;
}

#image {
/* This property is set only for the sake of IE */
	vertical-align:middle;
}

img#image {
/* Set the border around thumbnail images */
	  border-style: solid;
    border-width: 2px;
}

img.dmca {
	position: relative;
	top: 12px;
}

#caption {
	margin:0 0 0 0;
}

#spacer {
/* Spacer is a placeholder so that the footer does not begin underneath the floating thumbnail images */
	clear:both;
	font-size : 2px;
}

.align-right { /*float:right; */ margin: 0 0 15px 15px; }
.align-left { float:left; margin: 0 15px 15px 0; }

.frame {
	float:left;
	padding: 5px;
	margin: 0 15px 0px 0;
	border: 1px solid #aaa;
} 

h1{
	font : 18pt Arial, Helvetica, sans-serif;
	color : #6f3536;
	text-transform: uppercase;
}

h2{
	font : bold 11pt Arial, Helvetica, sans-serif;
	color : #898989;
	margin: 0 0 11pt 0;
	}
	
h3{
	font : 14pt Arial, Helvetica, sans-serif;
	color : #a67c52;
	text-transform: uppercase;
	}
	
p{
    
}

.dayBorder{
	border-style:solid;
	border-width:1px;
	border-color:#C8BCB0;
}

.darkenBackground {
	background-color: rgb(0, 0, 0);
	opacity: 0.5; /* Safari, Opera */
	-moz-opacity:0.50; /* FireFox */
	filter: alpha(opacity=50); /* IE */
	z-index: 5;
	height: 100%;
	width: 100%;
	background-repeat:repeat;
	position:fixed;
	top: 0px;
	left: 0px;
}

#container {	width: 780px;  /* using 20px less than a full 800px width allows for browser chrome and avoids a horizontal scroll bar */
	background: #FFFFFF;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #000000;
	text-align: left; /* this overrides the text-align: center on the body element. */
    /*-o-box-shadow: 10px 10px 5px #888;
    -icab-box-shadow: 10px 10px 5px #888;
    -khtml-box-shadow: 10px 10px 5px #888;
    -moz-box-shadow: 5px 0px 10px #a08d6f;
    -webkit-box-shadow: 10px 10px 5px #888;
    box-shadow: 10px 10px 5px #888;*/
	padding-bottom: 0px; /*Adjusts the spacing above the footer */
}

#header {
	background: #FFFFFF; 
	padding-bottom: 11px; /*Adjusts the spacing below the main navigation */
}

#header h1 {
	margin: 0; /* zeroing the margin of the last element in the #header div will avoid margin collapse - an unexplainable space between divs. If the div has a border around it, this is not necessary as that also avoids the margin collapse */
	padding: 0; /* using padding instead of margin will allow you to keep the element away from the edges of the div */
	font : Arial, Verdana, Helvetica, sans-serif;
	font-size : 14pt;
	color : #000000;
}

#header img {
	display:block;
	border: 0;
}

#mainContent {
	padding: 0 46px; /* Adjusts the left margin of text on the page. Remember that padding is the space inside the div box and margin is the space outside the div box. */
	background: #FFFFFF;
	padding-bottom: 14px;
}

#footer {
	background:#f9f7f5;
	width: 780px;
	/* Anchor the footer at the bottom of the browser window */
	/* position: relative;
    bottom: 0; 
/*	position: relative;
margin-top: -7.5em; */
/*height:60px;
position: relative;
margin-top: -60px; */
}

#footer p {
	margin: 0; /* zeroing the margins of the first element in the footer will avoid the possibility of margin collapse - a space between divs */
	padding: 10px 0 10px 0; /* padding on this element will create space, just as the the margin would have, without the margin collapse issue */
    font-size: 8pt;
	text-align: center;
}
	
table.embeddedvideo
{
	width: 100%;
	border-spacing: 0px;
    border-collapse: separate;
}

td.embeddedvideo
{
	text-align: center;
	/* top right bottom left */
	padding: 20px 0px 20px 0px;
}

iframe.embeddedvideo
{
	/* border: medium dashed green;
	border-width: 35px; */
	/* width: 640px;
	height: 360px; */
	width: 560px;
	height: 315px;
}

/* Styles for hiding Related Videos in embedded YouTube videos, adapted from https://www.maxlaumeister.com/blog/hide-related-videos-in-youtube-embeds/ */

.hideYouTubeRelatedVideosWrapper
{
	display: inline-block;
	position: relative;
}

.hideYouTubeRelatedVideosWrapper.ended::after
{
	content:"";
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	cursor: pointer;
	/* Currently, setting the rel=0 parameter in a YouTube URL enables showing only other videos in the same channel as the embedded video,
	rather than disabling the Related Videos banner completely. Setting a black background colour covers the Related Videos feed, which users 
	cannot click anyway. */
	background-color: black;
	background-repeat: no-repeat;
	background-position: center;
	/* background-size: 64px 64px; */
	/* background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==); */
	background-size: 68px 48px;
	background-image: url('./images/youtubeplaybutton.png');
}

.hideYouTubeRelatedVideosWrapper.paused::after
{
	content:"";
	position: absolute;
	/* top: 70px; */
	top: 0;
	left: 0;
	/* bottom: 50px; */
	bottom: 0;
	right: 0;
	cursor: pointer;
	/* Currently, setting the rel=0 parameter in a YouTube URL enables showing only other videos in the same channel as the embedded video,
	rather than disabling the Related Videos banner completely. Setting a black background colour covers the Related Videos feed, which users 
	cannot click anyway. */
	background-color: black;
	background-repeat: no-repeat;
	background-position: center;
	/* background-size: 40px 40px; */
	/* background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEiIHdpZHRoPSIxNzA2LjY2NyIgaGVpZ2h0PSIxNzA2LjY2NyIgdmlld0JveD0iMCAwIDEyODAgMTI4MCI+PHBhdGggZD0iTTE1Ny42MzUgMi45ODRMMTI2MC45NzkgNjQwIDE1Ny42MzUgMTI3Ny4wMTZ6IiBmaWxsPSIjZmZmIi8+PC9zdmc+); */
	background-size: 68px 48px;
	background-image: url('./images/youtubeplaybutton.png');
}