/****************VARIABLES********************/

/* #1F1F1F medium grey, used as a background color that matches the background image*/
/* #F4F4F4 whitish, used as the basic text color */
/* #6D70D3 steel blue, #4b961d is the best green, #FFFFD0 is the best light yellow/white, #3f8216 a darker green, #7422c7 a darker purple */
/* #FFFFD0 light yellow/white, used in news titles for example, when there's already too much of the regular accent color on the page */
/* #F4F4F4 whitish, used in contact info for example, when there's already too much of the regular accent color on the page and accentColor2 won't work*/
/* #999999 medium grey, #6D70D3 dull but pleasant steel blue */
/* #000000 pure black, used in top navigation */
/* #2F2F2F dark grey but lighter than the background of #1F1F1F so it stands out */
/* #232323 darker grey than #2F2F2F but lighter than the background of #1F1F1F so it stands out */

:root{
	--backgroundColor: #1F1F1F;
	--basicTextColor: #F4F4F4;
	--accentColor: #F4F4F4;
	--accentColor2: #FFFFD0;
	--accentColor3: #F4F4F4;
	--linkColor: #999999;
	--darkTextColor: #000000;
	--footerBackground1: #2F2F2F;
	--warningColor: #C00000;
	
	--mastheadHeight: 102px;
	--verticalMastheadOffset: 15px;
}


/*********************************************/
/* general formatting */

html {
}

body {
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: 1em; /* Default browser font size is 16px (usually). small = 0.8em = 12.8pt in Firefox */
	background-color: var(--backgroundColor);
}

#container {
	width: 990px;
	margin: 0 auto;
	padding: 0;
	border: 0;
}

#navigation {
}

html>body #navigation {
	/*width: 100%;*/
	overflow: hidden; /*fills remaining space*/
}

#column_l {	
	position: relative;
	float: left;
	width: 137px;
	padding: 15px 15px 15px 0px; /*top, right, bottom, left*/
	margin: 0px;
}

html>body #column_l {
	width: 140px; /*140*/
	padding: 15px 15px 15px 0px; /*top, right, bottom, left*/ /*15px 15px 15px 0px*/
	margin: 0px;
}

#column_r {
	position: relative;
	float: left;
	margin: 0;
	width: 832px; /*832 = 990 total width - 140 column left width - 15 column left padding - 3 for safety. Note the value of 990 is set in DaveLayout.css.*/
	padding: 15px 0px 15px 0px; /*top, right, bottom, left*/
}

html>body #column_r {
	width: 835px;  /*835 = 990 total width - 140 column left width - 15 column left padding. Note the value of 990 is set in DaveLayout.css.*/
	padding: 15px 0px 15px 0px; /*top, right, bottom, left*/
}

.story_column_r {	/*for stories which need narrower columns for readability */
	width: 635px;  /*635 = 990 total width - 140 column left width - 15 column left padding - 200 so more readable text column width. Note the value of 990 is set in DaveLayout.css.*/
	padding: 0px 0px 15px 0px; /*top, right, bottom, left*/
	font-size: 1em; /*in other words a factor of 1 times the containing element (body) font-size*/
	line-height: 1.4em; /*in other words a factor of 1.4 times the containing element (body) font-size*/
}

.story_column_r p {
	margin-top: 1.4em;
	margin-bottom: 1.4em;
}

.story_column_r_wide {	/*for stories which need narrower columns for readability but wider images to the right (about 350px max width images). Use rightTextWide div tag*/
	width: 835px;  /*635 = 990 total width - 140 column left width - 15 column left padding - 200 so more readable text column width. Note the value of 990 is set in DaveLayout.css.*/
	padding: 0px 0px 15px 0px; /*top, right, bottom, left*/
	font-size: 1em; /*in other words a factor of 1 times the containing element (body) font-size*/
	line-height: 1.4em;
}

.story_column_r_wide p {
	margin-top: 1.4em;
	margin-bottom: 1.4em;
}

#content {
	width: 960px;
	margin: 0;
	padding: 15px;
	border: 0;
	background-color: var(--backgroundColor);
}


/*****************************************/
/* Masthead */

#masthead {
	text-align: center;
	height: var(--mastheadHeight);
	margin-top: var(--verticalMastheadOffset);
}

.mastheadImage {
	background-image: url("../images/CrossedBanner.png");
	background-color: var(--backgroundColor);
	height: 100px;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	border-radius: 1.5em; /* rounds the corners of the element (in this case, the background image) */
}

.mastheadText{
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%); /* centers the elements in this class */
	color: var(--basicTextColor);
	width: 990px;
	margin-top: -0.1em;
	line-height: initial;
}

.mastheadName {
	font-size: 3em;
	font-weight: normal;
	font-style: normal;
	font-variant: small-caps;
	color: var(--basicTextColor);
	line-height: initial;
}

.mastheadDescription {
	font-size: 2em;
	font-weight: normal;
	font-style: normal;
	font-variant: small-caps;
	color: var(--basicTextColor);
	line-height: initial;
}

.mastheadLink { /* when placed inside the masthead (e.g. with a span tag), this creates a transparent image on top that can function as a link to the home page */
  position:absolute; 
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 1; /*put on top */
  background-image: url("EnlargedImage.png"); /* empty image that will cover the masthead */
} 

/*****************************************/
/*footers*/

#footer {
	width: 100%;
	overflow:visible; /*auto;*/
	margin: 0;
	padding: 0;
	border: 0;
	text-align: center;
	padding-bottom: 0px;
	clear: both; /* no floating elements allowed to either the left or the right */
}

#footer img {
	display:block;
	margin-left:auto;
	margin-right:auto;
}

#footer p{
	font-size: 0.8em;
	color: var(--basicTextColor);
	text-align: center;
	clear: both; /* no floating elements allowed to either the left or the right*/
	-webkit-text-size-adjust: none; /* essential to keep safari on iPhone from adjusting the text size */
}

.footerMenu {
	margin-top: 2em; /*margins do not include the background color */
	margin-right: auto;
	margin-left: auto;
	padding: 0.5em; /*padding includes the background color */
	border-radius: 1.5em;
	width: 960px;
	text-align: center;
	font-size: 1.5em;
	clear: both; /*no floating elements allowed to either the left or the right*/
	background-color: var(--footerBackground1);
	-webkit-text-size-adjust: none; /* essential to keep safari on iPhone from adjusting the text size */
}

.LowerFooterFlexWrapper {
	margin-top: -0.5em;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	width: 740px; /* Roughly the width of the lower menu that's directly above this */
	-webkit-text-size-adjust: none; /* essential to keep safari on iPhone from adjusting the text size */
}

.lowerFooterMenuElement {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;
	text-align: center;
	-webkit-text-size-adjust: none; /* essential to keep safari on iPhone from adjusting the text size */
}

.copyright {
	margin-top: 4em;
	text-align: center;
	font-size: 1em;
	font-style: italic;
}

.SSLcertificate {
	margin-top:0em; 
	text-align: center;
}


/*****************************************/
/* Main Navigation at top*/
#navigation ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: 1em;
}
#navigation li {
	display:inline-block;
}
#navigation a {
	font-size: 1.3em;
	font-weight: bold;
	text-decoration: none;
	color: var(--linkColor); /*var(--darkTextColor);*/
	display: block;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.4em;
	padding-right: 0.4em;
}
#navigation a:hover {
	font-weight: bold;
	text-decoration: none;
	color: var(--basicTextColor);
	background-color: var(--linkColor);
	background-image: none;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-left: 0.4em;
	padding-right: 0.4em; 
}

/*****************************************/

/* Main Gallery Navigation on left hand side */

#galleryNavigation ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
	padding-top: 1em;
}
#galleryNavigation ul:first-of-type {
	list-style-type: none;
	width: 100%;
	margin-top: 1.5em;
	padding: 0;
	padding-top: 1em;
}
#galleryNavigation li {
	float: none;
	line-height: 1em;
}
#galleryNavigation li:first-of-type {
	float: none;
	line-height: 1em;
	margin-top: 1em;
	margin-bottom: 0.75em;
	font-weight: bold;
	font-variant: small-caps;
	color: var(--accentColor);
}
#galleryNavigation a {
	font-weight: normal;
	text-decoration: none;
	color: var(--linkColor);
	display: block;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	padding-right: 0.25em;
	font-style: italic;
	font-size: 1em;

}
#galleryNavigation a:hover {
	font-weight: normal; /*bold*/ /*Defines from thin to thick characters, from 100 to 900. 400 is the same as normal, and 700 is the same as bold*/
	font-variant: small-caps;
	text-decoration: none;
	color: var(--basicTextColor);
	background-image: none;
}


/****************************************/

/* Next/previous navigation*/

div.nextPreviousNavigation p {
	color: var(--basicTextColor);
	text-align: right;
	padding-top: 0em; /*20px;*/
	padding-bottom: 0em;
	padding-right: 26px; /*26 = 990 total width - 140 column left width - 15 column left padding - 7 padding of the hyperlink - 802 maximum image width with boundary. Note the value of 990 is set in DaveLayout.css.*/
	font-size: 0.85em; /*in other words a factor of 1 times the containing element (body) font-size*/
	margin-top: 1em; /* 1.5em shifts the navigation into the black color*/
	margin-bottom: 1em; /* 0.4em */
}
div.nextPreviousNavigation a {
	font-weight: normal;
	font-size: 1.0625em; /*in other words a factor of 1.0625 times the containing element (body) font-size*/
	text-align: center;
	text-decoration: none;
	color: #C4C4C4; /* #C4C4C4 is lighter gray so shows up against background gray*/
	padding-top: 0.125em;  /*0.3125em; gives space at top*/
	padding-bottom: 0.125em; /*0.3125em; gives space at bottom*/
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0.125em;
	margin-right: 0.125em;
	background-color: #404040; /*dark grey*/
}
div.nextPreviousNavigation a:hover {
	font-weight: normal;
	font-size: 1.0625em;
	text-align: center;
	text-decoration: none;
	color: #FFFFFF; /* pure white */
	padding-top: 0.125em;
	padding-bottom: 0.125em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0.125em;
	margin-right: 0.125em;
}
.nextPreviousNoLinkText {
	font-size: 1.0625em;
	text-align: center;
	padding-top: 0.125em;
	padding-bottom: 0.125em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0.125em;
	margin-right: 0.125em;
}
div.nextPreviousNavigation a#nextPreviousLessSpace {
	font-size: 1em;
	text-align: center;
	padding-top: 0.125em;
	padding-bottom: 0.125em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0em;
	margin-right: 0em;
}
div.nextPreviousNavigation a#nextPreviousLessLeftSpace {
	font-size: 1em;
	text-align: center;
	padding-top: 0.125em;
	padding-bottom: 0.125em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: 0em;
	margin-right: 0.125em;
}
div.nextPreviousNavigation a#nextPreviousLessRightSpace {
	font-size: 1em;
	text-align: center;
	padding-top: 0.125em;
	padding-bottom: 0.125em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	margin-top: 0em;
	margin-bottom: 0em;
	margin-left: -0.125em;
	margin-right: 0em;
}

/*genre description on left hand side */
div.genreDescription p {
	font-weight: normal;
	text-decoration: none;
	color: var(--linkColor);
	display: block;
	padding: 7px;
	padding-left: 7px;
	padding-right: 7px;
	font-style: italic;
	float:none;
	font-size: 0.8em;
	margin-top: 0.8em;
	margin-bottom: 0.8em;
}

div.genreDescription b {
	font-weight: bold;
	font-style: normal;
}

div.genreDescription ul {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
}
div.genreDescription li {
	float:none;
}

div.genreDescription a {
	font-weight: normal;
	text-decoration: none;
	color: var(--linkColor);
	display: block;
	padding: 7px;
	padding-left: 7px;
	padding-right: 7px;
	font-style: italic;
}
div.genreDescription a:hover {
	font-weight: bold;
	text-decoration: none;
	color: var(--basicTextColor);
	padding: 7px;
	background-image: none;
}


/***********************************************/
/*Enlarged Image page*/

img#back {
	z-index: 0;
	position: absolute;
	left: 0px;
}

img#front {
	z-index: 1;
	position: absolute;
	left: 0px;
}


/***********************************************/

/* Right Column */
#column_r img {
	/*border: 1px solid #808080;*/
}


/***********************************************/
/* Site typography */
p {
	color: var(--basicTextColor);
	/*line-height: 1.6;*/
	line-height: 19pt;
}
h1 {
	font-size: 1.7; /* xx-large */
	color: var(--basicTextColor);
	font-variant: small-caps;
}
h2 {
	font-size: 1.4; /* x-large */
	font-style: normal;
	color: var(--basicTextColor);
	line-height: 1.25em;
}
h3 {
	font-size: 1.2em; /* large */
	font-style: normal;
	color: var(--basicTextColor);
	line-height: 1.25em;
}
h4 {
	font-size: 1em;	/* medium */
	font-style: normal;
	color: var(--basicTextColor);
}

ul {
	color: var(--basicTextColor);
}

hr { 
  display: block;
  margin-top: 2.5em;
  margin-bottom: 1.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}


/***********************************************/
/* Links */
a {
	color: var(--linkColor);
	text-decoration: none;
}
a:hover {
	color: var(--basicTextColor);
	text-decoration: none;
}
a.contact {
	color: var(--linkColor);
	text-decoration: none;
}
a.contact:hover {
	color: var(--basicTextColor);
	text-decoration: none;
}


/***********************************************/
/* images and galleries */
div.gallery {
	padding: 0px 0px 15px 0px; /*top, right, bottom, left*/
	font-size: 1em;
	line-height: 1.4em;
}

div.gallery img {
	/*create a thick border around a centered image*/
	text-align: center;
	vertical-align: middle;
	margin: 10px; /*space around each image*/
}
div.gallery a {
	text-decoration:none;
}
div.gallery a:hover {
	text-decoration:none;
}


/***********************************************/
/* general */

.center {
	text-align: center;
}

.centerImage {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.enlargedPhotoDescription {
	font-style: normal;
	font-size: 0.9em;
	color: var(--basicTextColor);
	width: 33em; /*435px;*/ /* 33em; On average one character takes up 0.5em so 33em will have a measure of 66 characters per line*/
	line-height: 1.4em;
	margin-top: 1.4em;
	margin-bottom: 1.4em;
}

.floatCenter {
	margin-left:auto; 
	margin-right:auto;
	color: var(--basicTextColor);
}

.awards {
	border-collapse:separate;
	border-spacing: 0.5em;
	margin-left:auto; 
	margin-right:auto;
	margin: 10px;
	font-size: 1em;
	color: var(--basicTextColor);
	background-color: #333333;
	padding: 8px;
}

.awards em {
	color: var(--accentColor2);
}

.awards strong {
	font-size: 1.25em;
}

table.prices {
	color: var(--basicTextColor);
	width: 100%;
}

table.prices em {
	color: var(--accentColor2);
}

table.prices td {
	width:20%;
}

th.size {
	color: var(--basicTextColor);
	width: 20%;
}

th.price {
	color: var(--basicTextColor);
	width: 20%;
}

th.frame {
	color: var(--basicTextColor);
	width: 20%;
}

.copyrightSymbolStyle {
	border-width: 0px;
	margin: 0px;
}

.smallVerticalPad {
	padding: 3px;
}

/*******************************************/
/* split column style for text on the left and small images on the right. THESE SHOULD ALMOST ALWAYS BE IN A "story_column_r" div tag so the overall column width is ok.*/

.leftTextColumn {	/* THIS SHOULD ALMOST ALWAYS BE IN A "story_column_r" div tag so the overall column width is ok. Will also automaticaly inherit the correct line height. */
	width: 435px; /* 435 = 990 total width - 140 column left width - 15 column left padding - 200 so more readable text column width - 200 for images on the right. Note the value of 990 is set in DaveLayout.css.*/
	float: left;
	margin-right: 1em;
	margin-top: 0;
	margin-bottom: 2em;
	color: var(--basicTextColor);
	font-size: 1em;
}
.leftTextColumn:first-of-type {	
	width: 435px;
	float: left;
	margin-right: 1em;
	margin-top: 0;
	margin-bottom: 0em;
	color: var(--basicTextColor);
	font-size: 1em;
}
.rightTextColumn {	/* THIS SHOULD ALMOST ALWAYS BE IN A "story_column_r" div tag so the overall column width is ok. Will also automaticaly inherit the correct line height. */
	width: 200px; /* 180 = 635 - 435 leftTextColumn width - 20 buffer*/
	float: left;
	margin-top: 2em;
	margin-bottom: 2em;
	color: var(--basicTextColor);
	font-size: 1em;
}

.rightTextColumn img {	/* THIS SHOULD ALMOST ALWAYS BE IN A "story_column_r" div tag so the overall column width is ok. Will also automaticaly inherit the correct line height. */
	padding-left: 1em; /* Gives space between the text and the photos that are in this column */
	border: none;
	border-style: none;
}

.rightTextColumn p {	/* THIS SHOULD ALMOST ALWAYS BE IN A "story_column_r" div tag so the overall column width is ok. Will also automaticaly inherit the correct line height. */
	padding-left: 1em; /* Gives space between the text and the photos that are in this column */
}

.rightTextColumnWide {	/* THIS SHOULD ALMOST ALWAYS BE IN A "story_column_r" div tag so the overall column width is ok.*/
	width: 350px; /* Suitable for a 350px image*/
	float: left;
	margin-top: 2em;
	margin-bottom: 1em;
}

.noFloatingToRightOrLeftOfThisElement {	/*put this in a div tag to stop floating elemnts, including the leftTextColumns and rightTextColumns above */
	clear: both; /*no floating elements allowed to either the left or the right*/
}

.shoveAbsolutelyFarRight {
	position: absolute;
	right: 0px;
	color: var(--basicTextColor);
	/*line-height:1.4em;*/
}

/***********************************************/
/* Image and figure captions */

p.caption {
	text-align: left;
	margin-top: 0.25em;
	font-size: 0.8em;
}


/***********************************************/
/* Kayakers Companion pages*/

div.kayakersCompanion h1 {
	text-align: center;
	color: var(--accentColor);
	
	font-family: "apertura", Georgia, sans-serif;
	font-size: 1.5; /* x-large */
	font-weight: 800;
	font-style: normal;
	letter-spacing:0.5px;
	color: var(--basicTextColor);
	line-height: 1.25em;
}

div.kayakersCompanion h2 {
	text-align: center;
	
	font-family: "apertura", Georgia, sans-serif;
	font-size: 1.5; /* x-large */
	font-weight: 800;
	font-style: normal;
	letter-spacing:0.3px;
	color: var(--basicTextColor);
	line-height: 1.25em;
}

div.kayakersCompanion h3 {
	color: var(--accentColor2);
}

div.kayakersCompanion h4 {
	text-align: center;
	
	font-family: "apertura", Georgia, sans-serif;
	font-size: 1em; /* x-large */
	font-weight: 800;
	font-style: normal;
	letter-spacing:0.3px;
	color: var(--basicTextColor);
	line-height: 1.25em;
}

div.kayakersCompanion li {
	margin-bottom: 0.4em;
}


/***********************************************/
/* Buy Kayakers Companion pages*/

div.buyKayakersCompanion h1 {
	text-align: center;
	color: var(--accentColor);
	
	font-family: "apertura", Georgia, sans-serif;
	font-size: 1.5; /* x-large */
	font-weight: 800;
	font-style: normal;
	letter-spacing:0.3px;
	color: var(--basicTextColor);
	line-height: 1.25em;
}

div.buyKayakersCompanion h2 {
	text-align: left;
	
	font-family: "apertura", Georgia, sans-serif;
	font-size: 1.5; /* x-large */
	font-weight: 800;
	font-style: normal;
	letter-spacing:0.3px;
	color: var(--basicTextColor);
	line-height: 1.25em;
}

div.buyKayakersCompanion h3 {
	color: var(--accentColor2);
}


/***********************************************/
/* Buy Kayakers Companion Map page*/

div.kayakersCompanionRadioButtons input {
	-webkit-appearance: none;
  	-moz-appearance: none;
  	appearance: none;
	
	border-radius: 50%;
  	width: 1em;
  	height: 1em;
	
	transition: 0.2s all linear;
	border: 2px solid var(--basicTextColor);
  	margin-right: 0.25em;
}

div.kayakersCompanionRadioButtons input:checked {
  	border: 0.33em solid var(--warningColor);
}

div.kayakersCompanionRadioButtons label {
  	margin-right: 1em;
}

div.WarningNote p {
  	margin-right: 1em;
  	color: var(--warningColor);
	text-emphasis: bold;
}

/***********************************************/
/* Thank you for purchase pages*/

div.thankYouForPurchasing h1 {
	text-align: center;
	color: var(--accentColor);
}

div.thankYouForPurchasing h2 {
	text-align: left;
}

div.thankYouForPurchasing h3 {
	color: var(--accentColor2);
}

div.thankYouForPurchasing h4 {
	color: var(--accentColor2);
}

/***********************************************/
/* Park updates pages*/

div.parkUpdates h1 {
	text-align: center;
	color: var(--accentColor);
}

div.parkUpdates h2 {
	text-align: center;
}

div.parkUpdates h3 {
	color: var(--accentColor2);
}

div.parkUpdates h4 {
	text-align: center;
}


div.parkUpdates li {
	margin-bottom: 0.4em;
}

/***********************************************/
/* AboutDave pages*/

div.aboutDave h1 {
	text-align: center;
	color: var(--accentColor);
}

div.aboutDave h2 {
	text-align: left;
}

div.aboutDave h3 {
	color: var(--accentColor2);
}


/***********************************************/
/* AboutTheArt pages*/

div.aboutTheArt h1 {
	text-align: center;
	color: var(--accentColor);
}

div.aboutTheArt h2 {
	text-align: left;
}

div.aboutTheArt h3 {
	margin-bottom:-0.5em;
	color: var(--accentColor2);
}


/***********************************************/
/* News pages*/

div.news h1 {
	text-align: center;
	color: var(--accentColor);
}

div.news h2 {
	text-align: left;
	/*color: var(--basicTextColor);*/
}

div.news h3 {
	color: var(--accentColor2);
}

div.news h4 {
	color: var(--accentColor2);
}


/***********************************************/
/* contact info page*/

div.contactInfo h1 {
	text-align: center;
	color: var(--accentColor);
}

div.contactInfo h2 {
	text-align: left;
}

div.contactInfo h3 {
	color: var(--accentColor2);
}


/***********************************************/
/* List of Galleries page*/

div.listOfGalleries h1 {
	text-align: left;
	color: var(--accentColor);
}

div.listOfGalleries h2 {
	text-align: left;
}

div.listOfGalleries h3 {
	color: var(--accentColor2);
	margin-top: 1.5em;
	margin-bottom: -0.5em;
}

div.listOfGalleries h4 {
	color: var(--accentColor2);
}

div.listOfGalleries ul {
	list-style-type: none;
}

div.listOfGalleries li {
	margin-bottom: 0.5em;
}

div.listOfGalleries img {
	float:right;
}

/***********************************************/
/* Book and map comments page*/
div.bookcomments li {
	margin-bottom: 0.75em;
}


/***********************************************/
/* DivTable ... NOT currently used, but should be in index.html in place of the table */

.divTable {
	display: table;
	margin-left:auto;
	margin-right:auto;
	width: auto;
	border-spacing: 0em;
}

.divRow {
	display: table-row;
	margin-left:auto;
	margin-right:auto;
	width:auto;
	clear:both;
}

.divCell {
	float:left;
	display: table-column;
	margin-left:auto;
	margin-right:auto;
	width: 350px;
	padding: 1em;
}

/***********************************************/
/* for the index.html page */

table.centerOnPage {
	margin-left:auto;
	margin-right:auto;
	border-collapse: separate;
	border-spacing: 1em;
}

a.homeLink:link {
	text-decoration: none;
}

a.homeLink:visited {
	text-decoration: none;
}

a.homeLink:hover {
	text-decoration: none;
}

a.homeLink:active {
	text-decoration: none;
}

img.homeTableBorder {
	margin-top:-0.5em; 
}

/***********************************************/
/* for the thankyou book page */

.emailForm {
	display: flex; 
	flex-direction: row;
	justify-content: space-between;
	align-items: baseline;
}