html {
	background-color: #000060;
	width: 915px;
	background-image: url(https://gotopoem.art/img/greenbar-915.jpg);
	background-repeat: repeat-y;
	padding: 2em 4em 2em 4em;
}

body {
    background-color: rgba(255,255,255,0.75);
    color: black;
    font-family: "Liberation Serif", "Georgia", serif;
    font-size: 100%;
    margin: 1em;
    padding: 0.5em 2em 0.5em 2em;
	width: 659px;
}

h1,h2,h3,h4,h5,h6 {
    color: navy;
    font-family: "Liberation Mono", "Lucida Console", "Courier New", monospace;
}

a {
	background-color: #ccff99;
	color: navy;
	border-bottom: 1px dotted #4040ff;
}

h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	background-color: rgba(255,255,255,0);
	border-bottom: none;
}

dt {
	font-family: "Liberation Mono", "Lucida Console", "Courier New", monospace;
	font-weight: bold;
}

dd {
	font-family: "Liberation Mono", "Lucida Console", "Courier New", monospace;
	margin-bottom: 9pt;
}

fieldset { margin-bottom: 18pt; }

fieldset.result { 
	border-color: maroon;
	min-height: 24pt;
}

fieldset.result legend {
	color: maroon;
	font-weight: bold;
}

img { max-width: 100%; }

table {
    border-collapse: collapse;
    caption-side: top;
}

thead {
    vertical-align: bottom;
}

tbody {
    vertical-align: top;
}

ol li { list-style-type: decimal; }
ol li ol li { list-style-type: upper-alpha; }
ol li ol li ol li { list-style-type: lower-roman; }

ul li { list-style-type: disc; }
ul li ul li { list-style-type: circle; }
ul li ul li ul li { list-style-type: square; }

#example-container:{
	box-shadow: 5px 5px 3px gray;
}

.b, .strong { font-weight: bold; }

.i, .em { font-style: italic; }

.u { text-decoration: underline; }

.btnleft { margin-right: 2em; }

.formrow {
	margin-bottom: 6pt;
}

.example {
	font-family: "Liberation Mono", "Lucida Console", "Courier New", monospace;
	font-size: 10pt;
	white-space: pre-wrap;
}

.card {
	background-color: rgba(255,255,255,1);
	border: 1px solid maroon;
	box-shadow: 5px 5px 3px #c0c0c0;
	display: inline-block;
	padding: 0.5em;
	visibility: visible;
}

.card-hidden {
	border: none;
	box-shadow: none;
	display: none;
	visibility: hidden;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  /* border: 1px solid maroon; */
  /* box-shadow: 5px 5px 3px #c0c0c0; */
}

.modal-content {
  background-color: #edfce7;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 67%;
}

.modal-close {
  background-color: #edfce7;
  border: 1px solid maroon;
  color: maroon;
  float: right;
  font-size: 28px;
  font-weight: bold;
  padding-left: 2px;
  padding-right: 2px;
}

.modal-close:hover,
.modal-close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.modal-schema {
	font-weight: bold;
}