body, html {
	height: 100%;
	padding: 0;
	margin: 0;
	font-family: Optima,Segoe,Segoe UI,Candara,Calibri,Arial,sans-serif;
  }

p a {
	color: rgb(14, 169, 216);
}

p a:hover {
	cursor: pointer;
	color: rgb(6, 120, 150);
}

h1 {
	display: block;
	position: fixed;
	color: #fff;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	background-color: rgba(0,0,0,0.8);
	padding: 6px 25px 10px;
	z-index: 8;
	font-family: TimesNewRoman, Times New Roman, Times, Baskerville, Georgia, serif;
	text-align: center;
}

h1 a {
	text-decoration: none;
}

h1 span {
	padding: 0.03em;
}

h1 span:nth-child(1){
	color: #999
}

h1 span:nth-child(2){
	color: #ccc
}

h1 span:nth-child(3){
	color: #fff
}

h4 {font-size: 1.2em}

.background {
	position: fixed;
	height: 100%;
	width: 100%;
  	background-position: center;
  	background-repeat: no-repeat;
  	background-size: cover;
}

#woodland {
	position: fixed;
}

#content {
	display: block;
	position: relative;
	width: 80%;
	max-width: 24em;
	position: relative;
	top: 5em;
	margin: auto;
	margin-bottom: 20px;
	background-color:rgba(255,255,240,0.92);
	opacity: 0;
	padding: 12px 50px 35px;
}

#poem {
	margin-bottom: 10px;
	line-height: 1.3em;
}

#poem-title, #poem-date {
	font-weight: normal;
}

#poem-title {
	margin: 0 -15px 5px 0;
	padding-bottom: 0.2em;
	border-bottom: 1px solid #000;
}

#poem-date {
	font-size: 1em;
	margin-top: 0;
	color: #555;
}

#poem p {
	padding-left: 22px;
	text-indent: -22px;
	margin: 0.1em;
}

#poem p.justified {
	padding-left: 0;
	text-indent: 0
}

#poem li {
	margin-bottom: 0.8em;
}

#poem-links {
	clear: both;
	list-style-type: none;
	position: relative;
    display: none;
    text-align: center;
	padding: 0;
	margin-top: 100px;
	margin-bottom: 125px;
}

#poem-links li {
	width: auto;
    display: inline;
	margin: 0 4px;
}

#poem-links a {
	display: inline-block;
	width: 76px;
	height: 76px;
	position: relative;
	overflow: hidden;
}

#poem-links a:hover {
	cursor: pointer;
}

#poem-links a img {
	filter: drop-shadow(3px 3px 3px #000);
	object-fit: none;
}

#refresh-button img {
	object-position: 6px 6px;
}

#share-button img {
	object-position: -58px 6px;
}

#search-button img {
	object-position: -122px 6px;
}

@media (hover:hover) and (pointer:fine){
	#refresh-button:hover img {
		object-position: 6px -58px;
	}
	#share-button:hover img {
		object-position: -58px -58px;
	}
	#search-button:hover img {
		object-position: -122px -58px;
	}
}

div.info-panel {
	position: absolute;
	top: 40px;
	left: 10%;
	right: 10%;
	min-width:300px;
	margin: auto;
	background-color: #eee;
	display: none;
	z-index: 15;
	padding: 0 30px 30px;
	min-width: 200px;
}

div.info-panel.active {
	display: block;
}

div.info-panel img {
	margin: 0 -30px 30px 30px;
	width: 50%;
	max-width: 200px;
	float: right;
}

div.info-panel p {
	max-width: 900px;
}

a.close-panel {
	display: block;
	position: absolute;
	right: 0;
	top: 0;
	padding: 0 14px;
	background-color: #ccc;
	font-size: 2em;
	margin: 0;
	text-decoration:none;
	color: #000;
}

a.close-panel:hover {
	background-color: rgb(6, 120, 150);
	cursor: pointer;
	color: #fff;
}

a.back-to-poems {
	font-weight: bold;
	text-decoration: none;
}

a.back-to-poems::before {
	content: ">>> "
}

#search-panel form {
	display: inline-block;
	margin: 5px
}

#search-panel ul {
	display: inline-block;
	line-height: 1.5em;
	list-style-type: none;
	position: relative;
	padding: 0;
	margin: 5px;
}

#search-panel ul li {
	width: auto;
	display: inline;
}

#search-panel ul li a {
	display: inline-block;
	padding: 1px 6px 3px;
	background-color: #ddd;
	text-decoration: none;
	color: #000;
	margin: 0.2em 0.1em;
}

#search-panel ul li a:hover {
	cursor: pointer;
	background-color: rgb(6, 120, 150);
	color: #fff;
}

#search-panel ul li a.active {
	background-color: #444;
	color: #fff;
}

#search-results {
	margin-top: 15px;
	padding-top: 15px;
}

#search-results td {
	border-top: solid 1px #bbb;
	padding: 4px 8px
}

#search-results td.link {
	display:none;
}

#search-results tr:hover {
	background-color: #ddd;
	cursor: pointer;
}

#search-results a, search-results a:hover, search-results a:active {
	color: inherit;
	text-decoration: none;
}

#footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	text-align: center;
	font-size: 0.95em;
	background-color: #000;
	color: white;
	padding: 9px;
}

div#mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: black;
	opacity: 0.9;
	display: none;
	z-index: 10;
}

div#mask.active {
	display: block;
}

#loader{
	display : none;
	position : fixed;
	z-index: 100;
	opacity : 0.8;
	background-repeat : no-repeat;
	background-position : center;
	background-size: 10%;
	left : 0;
	bottom : 30%;
	right : 0;
	top : 0;
}

@media screen and (max-width: 500)  {
	#content {
		width: calc(95% - 100px);
	}
}