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; height: 28px; } /* Used for hit counter digits. */

.hit_counter { 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 {
	position: sticky;
	top: 0;
	border-top: 5px solid black;
	border-bottom: 5px solid black;
	margin: 10px;
	background-color: LightGrey;
}
button.linkbutton {
	height: 30px;
	border: 2px solid red;
	color: black;
	background-color: Ivory;
	vertical-align: middle;
	font-size: small;
	margin: 2px;
}

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;
  padding: 14px 20px;
  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;
	margin: 20px;
}

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;
	background-color: white;
	border: 1px solid black;
	width: 100%;
}

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

#result-list {

}

table.result-list {
	border-collapse: collapse;
	width: 100%;
    background-color: white;
    font-family: sans-serif;
    font-size: 10px;
	& td {
		text-align: left;
		padding: 2px;
		border: 1px solid black;
	}
	& span.title {
		font-style: bold;
		font-size: 12px;
		color: black;
	}
	& span.author {
		font-size: 10px;
		color: Gray;
	}
}


div.detail-header {
	width: auto;
	background-color: #8290AA;
    background-image: linear-gradient(#929EAE, #6C7D9B);
	padding: 10px;	
	& span.title {
		font-family: sans-serif;
		font-size: 18px;
		color: white;
	}
	& span.author {
		font-family: sans-serif;
		font-size: 12px;
		font-style: italic;
		color: white;
	}
}
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 {
	width: 100%;
	background-color: white;
	padding: 5px;
	font-family: sans-serif;
	color: black;
	& td.label {
		font-style: bold;
		font-size: 12px;
		width: 25%;
	}
	& td.data {
		width: 74%;
	}
	& td {
		padding-bottom: 10px;
		padding-right: 20px;
		vertical-align: top;
	}
}
hr.divider {
	width: 94%;
}

#summary {
	padding: 5px;
	background-color: white;
	font-family: sans-serif;
	color: black;
}

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:10px;
	padding:5px;
}

#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.book-image
{
	max-width: 100%;
	border: 2px solid black;
	margin: 10px;
}


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