a:link
{
	color: green;
}

a:visited
{
	color: darkgreen;
}

a:focus, a:hover
{
	color: green;
}

a:active
{
	color: #007e7e;
}

a img
{
	border: 1px solid green;
}

a img:hover
{
	opacity: 0.7;
}

b, strong
{
	font-weight: bolder;
}

body
{
	background-color: #EADDCE;
	border-bottom-left-radius: 0.5em;
	border-bottom-right-radius: 0.5em;
	border-color: #8B2137;
	border-style: solid;
	border-width: 0 0.5em;
	margin: 0 auto 1em;
	max-width: 60em;
}

footer
{
	background-color: #8B2137;
	color: white;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	text-align: center;
}

footer ul
{
	list-style-type: none;
	margin-bottom: 0;
	padding: 0;
}

footer li
{
	line-height: 1.3em;
}

footer a:link
{
	color: white;
}

footer a:visited
{
	color: white;
}

header
{
	height: 120px;
}

header img
{
	background-color: white;
	border: 0;
	height: 100%;
}

html
{
	font-family: Optima, Verdana, sans-serif;
	overflow-y: scroll;
}

h1
{
	background-color: white;
	color: #8B2137;
	font-size: 2.5em;
	font-weight: normal;
	margin: 0;
	text-align: center;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5);
}

h2
{
	border-bottom: 2px solid #0F4FA8;
	color: #8B2137;
	font-size: 2em;
	font-weight: normal;
	margin: 0;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
}

main
{
	background-color: white;
	padding: 1%;
}

/* work around due to img sizes being too large */
main > div > a > img
{
	max-height: 300px;
}

nav
{
	flex-grow: 3;
	font-size: 1.3em;
}

nav ul
{
	background-color: #8B2137;
	cursor: pointer;
	margin: 0;
	padding: 0;
	text-align: center;
}

nav ul li
{
	color: white;
	display: inline-block;
	padding: 0.25em;
	position: relative;
	text-align: left;
}

nav ul ul
{
	display: none;
	left: 0;
	position: absolute;
	white-space: nowrap;
	z-index: 5; /*make this child drop down menu over the parent menu */
}

nav li li
{
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 1px solid black;
	display: block;
}

nav li li:first-child
{
	border-top: 1px solid black;
}

nav a
{
	display: block;
}

nav a:link
{
	color: #fff;
	text-decoration: none;
}

nav a:visited
{
	color: #fff;
	text-decoration: none;
}

nav a:focus, nav a:hover
{
	color: #fff;
	text-decoration: underline;
}

p
{
	font-size: 1.05em;
	line-height: 1.3em;
}

table
{
	border-collapse: collapse;
	border-style: hidden;
}

table a:link
{
	font-weight: bold;
}

caption
{
	border-bottom: 2px solid #0F4FA8;
	color: #8B2137;
	font-size: 2em;
	text-align: left;
	text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4);
}

th
{
	border: 1px solid black;
	color: #8B2137;
	padding: 0.25em;
}

td
{
	border: 1px solid black;
	padding: 0.25em;
}

/* hiding for screen readers */
#skip
{
	overflow: hidden;
	position: absolute;
	top: auto;
	left: -1000px;
}

.cbtxt { text-align: center; font-weight: bold; }
.ctxt { text-align: center; }
.jtxt { text-align: justify; }

/* book titles */
.btl
{
	color: green;
	font-weight: bold;
}

/* decorative image */
.dcrtv-img
{
	float: right;
	margin: 0.5em;
}

/* bow listing */
.tablesorter
{
	width: 100%;
}

.tablesorter tbody tr:nth-child(odd)
{
	background-color: LemonChiffon;
}

/* for list of items in the accessory and books listings */
.alist
{
	border-bottom: 1px solid black;
}

.alist:nth-child(odd)
{
	background-color: LemonChiffon;
}

.alist:last-child
{
	border-bottom: 0;
}

.alist div
{
	display: flex;
	justify-content: space-between;
}

.alist img
{
	max-height: 185px;
}

.alist ul
{
	padding-left: 1em;
}

.alist .cost
{
	font-weight: bold;
	text-align: right;
}

.alist a:link
{
	font-weight: bold;
	text-decoration: none;
}

.alist a:hover
{
	text-decoration: underline;
}

/* listings on instrument pages */
.ilist
{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0;
}

.ilist > li
{
	border: 1px solid;
	break-inside: avoid;
	margin: 1em;
	overflow: auto;
	padding: 0.5%;
	width: 160px;
}

.ilist ul
{
	margin: 0;
	padding: 0;
}

.ilist ul li
{
	text-align: center;
}

.ilist li:hover
{
	background-color: LemonChiffon;
}

.ilist a:link
{
	text-decoration: none;
}

.ilist a:visited
{
	text-decoration: none;
}

.ilist a:hover
{
	text-decoration: underline;
}

.ilist img
{
	height: 185px;
	width: 100px;
}

/* header nav */
.navbar
{
	background: linear-gradient(to bottom, #8B2137 85%, #FFFFFF);
	display: flex;
	padding-bottom: 2em;
}

/* for gallery slide show */
.slideshow-container
{
	margin: 1em auto;
}

.slideshow-slide
{
	display: none;
}

.slideshow-slide img
{
	 width: 100%;
}

.slideshow-prev, .slideshow-next
{
  border-radius: 3px;
  cursor: pointer;
  color: #8B2137;
  font-weight: bold;
  padding: 0.75em;
  transition: 0.2s linear;
  user-select: none;
}

.slideshow-prev:hover, .slideshow-next:hover
{
  background-color: rgba(0,0,0,0.8);
}

.slideshow-dot
{
  background-color: #8B2137;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  height: 1em;
  margin: 0 3px;
  transition: background-color 0.3s linear;
  width: 1em;
}

.slideshow-dot:active, .slideshow-dot:hover
{
  background-color: rgba(0,0,0,0.8);
}

.slideshow-dot-active
{
  background-color: rgba(0,128,0,0.8);
  border-radius: 25%;
}

/* small screens on mobile devices */
@media all and (max-width: 30em)
{
	footer
	{
		background: linear-gradient(to top, #8B2137 90%, #FFFFFF);
		padding-top: 2em;
	}

	footer li
	{
		margin: 0 3.5em;
	}

	.alist img
	{
		max-width: 21em;
	}

	.dcrtv-img
	{
		display: none;
	}

	.tablesorter table, .tablesorter tbody, .tablesorter th, .tablesorter tr, .tablesorter td
	{
		display: block;
	}

	.tablesorter thead
	{
		display: none;
	}

	.tablesorter td
	{
		border: none;
		border-bottom: 1px solid #eee;
		padding-left: 50%;
		position: relative;
	}

	.tablesorter td:before
	{
		top: 6px;
		left: 6px;
		padding-right: 1em;
		position: absolute;
		white-space: nowrap;
		width: 45%;
	}

	.tablesorter td:nth-of-type(1):before { content: "Type"; }
	.tablesorter td:nth-of-type(2):before { content: "Description"; }
	.tablesorter td:nth-of-type(3):before { content: "Weight"; }
	.tablesorter td:nth-of-type(4):before { content: "Cost"; }
}

@media all and (min-width: 30em)
{
	footer
	{
		background: linear-gradient(to top, #8B2137 85%, #FFFFFF);
		padding-top: 1em;
	}
}

@media (hover: hover)
{
	nav li:hover
	{
		background-color: #65081C;
		cursor: default;
	}

	nav li:hover > ul
	{
	  display: block;
	}
}