h1.headline, h2.headline, h3.headline, h4.headline, h5.headline, h6.headline { text-align: center; color: RoyalBlue; }

.centeredimg { display:block; margin-left: auto; margin-right: auto; width: 75%; }

img.digit { vertical-align: middle } /* Used for hit counter digits. */

.hit_counter { font-size: x-large; font-family: fantasy } /* Used for label in hit counter. */

.fineprint { font-size: x-small; font-weight: bold; }

img.email { vertical-align: middle; } /* Used for the graphic used to display an email address, for security. */

div.linkbar {
	border-top: 5px solid black;
	border-bottom: 5px solid black;
	margin: 50px;
	background-color: LightGrey;
}
button.linkbutton {
	height: 50px;
	length: 300px;
	border: 2px solid red;
	color: black;
	background-color: Ivory;
	margin: 5px;
}

button.linkbutton:hover {
	background-color: yellow;
}

input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input[type=submit] {
  font-size: 18px;
  background-color: #4CAF50;
  color: white;
  margin: 8px 0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

button {
	width: 150px;
	font-size: 18px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049;
}

div.text-field {
	border: none;
	border-radius: 15px;
	padding: 20px;
	background-color: LightGrey;
	color: black;
}

div.details {
	margin-top: 30px;
	border: 1px solid black;
}

div.form {
  border-radius: 5px;
  background-color: #f2f2f2;
  padding: 20px;
  margin-left:30px;
}

#result-list {
	overflow-x: auto;
}

table.result-list {
	border-collapse: collapse;
	border: 3px solid red;
    background-color: white;
    font-family: sans-serif;
    font-size: 15px;
	font-weight: normal;
	color: black;
	border-spacing: 2px;
	& th,td {
		text-align: left;
		padding-left: 10px;
		padding-right: 10px;
	}
	& tr:nth-child(even) {background-color: #f2f2f2;}
	& tr {
		white-space: nowrap;
		height: 28px;
		cursor: pointer;
	}
	& tr.book-data:hover {
		background-color: LightSkyBlue;
	}
}

div.detail-header {
	display: flex;
	align-items: center;
	width: 100%;
	height: 50px;
	background-color: #8290AA;
    background-image: linear-gradient(#929EAE, #6C7D9B);
	& span.title {
		font-family: sans-serif;
		font-size: 18px;
		color: white;
		padding-left: 20px;
	}
	& span.author {
		font-family: sans-serif;
		font-size: 12px;
		font-style: italic;
		color: white;
		padding-left: 20px;
	}
}
div.detail-body {
	background-color: #CBCCCE;
	padding: 5px;
}

.detail-label {
	display: inline-block;
	font-family: sans-serif;
	border: 1px solid black;
	color: #6D758C;
	font-style: bold;
	width: 7%;
}

.detail-data {
	display: inline-block;
	font-family: sans-serif;
	border: 1px solid black;
	color: black;
	width: 42%;
}

.summary-data {
	display: inline-block;
	font-family: sans-serif;
	color: black;
	width: 80%;
}

#detail-table {
	table-layout: fixed;
	width: 100%;
	background-color: #CBCCCE;
	padding: 5px;
	& td.label {
		color: #6D758C;
		font-style: bold;
		width: 10%;
	}
	& td.data {
		color: black;
		width: 39%;
	}
	& td.theSummary{
		color: black;
		width: 89%;
	}
	& td {
		font-family: sans-serif;
		vertical-align: top;
		padding-bottom: 10px;
		padding-right: 20px;
	}
}

#summary-table {
	table-layout: fixed;
	width: 100%;
	background-color: #CBCCCE;
	padding: 5px;
	& td.label {
		color: #6D758C;
		font-style: bold;
		width: 10%;
	}
	& td.data {
		color: black;
		width: 91%;
	}
	& td.theSummary{
		color: black;
		width: 91%;
	}
	& td {
		font-family: sans-serif;
		vertical-align: top;
		padding-bottom: 10px;
		padding-right: 20px;
	}
}

p.alert {
	text-align: center;
	font-family: sans-serif;
	font-style: bold;
	font-size: 32px;
	color: red;
}

body
{
	background-image: url('/images/paper3.jpg');
	width: 90vw;
	margin:20px;
	padding:10px;
}

#header
{
	width: 100%;
	margin-top: 20px;
	margin-bottom: 20px;
}

img.banner-large
{
	display:block; 
	margin-left: auto; 
	margin-right: auto;
	width: 75%;
	border: 5px solid navy;
}

img.banner-small
{
	display:block; 
	margin-left: auto; 
	margin-right: auto; 
	max-height: 20vw;
	border: 5px solid navy;
}

img.toLeftPortrait
{
	float: left;
	max-width: 25%;
	border: 2px solid black;
	margin: 20px;
}

img.toRightPortrait
{
	float: right;
	max-width: 25%;
	border: 2px solid black;
	margin: 20px;
}

img.toLeftLandscape
{
	float: left;
	max-width: 40%;
	border: 2px solid black;
	margin: 20px;
}

img.toRightLandscape
{
	float: right;
	max-width: 40%;
	border: 2px solid black;
	margin: 20px;
}

p.spacer
{
	clear: both;
	padding: 30px;
}

#footer
{
	width: 970px;
	padding: 1em;
}