html {
	background-color: rgba(175, 197, 221, 0.4);
}

body {
	height: auto;
	width: 950px;
	margin: auto auto;
	padding: 10px 40px;
	font-family: 'Lato', sans-serif;
	font-size: 12pt;
}

table {
	border-collapse: collapse;
	width: auto;
	font-family: 'Doulos SIL', serif;
	text-align: center;
	font-size: 15pt;
}

.lefttable {
	border-collapse: collapse;
	width: auto;
	font-family: 'Doulos SIL', serif;
	text-align: left;
	font-size: 15pt;
}

.wrap {
	width: 100%;
	overflow: auto;
}

.fleft {
	float: left;
	width: 60%;
}

.fright {
	float: right;
	width: 30%;
	border: 10px solid #393c82;
	padding: 15px;
}

td, th {
	width: 200px;
	height: auto;
	background-color: inherit;
	padding: 5px 5px;
	margin: auto auto;
	text-align: center;
}

tr:nth-child(odd) td {
	background: #d5dde5;
}

tr:nth-child(odd) th {
	background: #d5dde5;
}

img {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 1px;
    vertical-align: -30%;
}

h1 {
	font-family: 'Lato', sans-serif;
	font-size: 24pt; 
}

h2 {
	font-family: 'Lato', sans-serif;
	font-size: 18pt;
}

h3 {
  	font-family: 'Lato', sans-serif;
	font-size: 16pt; 
}

h4 {
  	font-family: 'Lato', sans-serif;
	font-size: 14pt; 
}

a:link {
    color: #0509f5;
    text-decoration: none;
}

a:visited {
    color: purple;
}

.button {
    background-color: inherit;
    color: black;
    border: none;
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    font-weight: bold;
}

.play {
    background-color: inherit;
    border: none;
    border-radius: 6px;
    padding: 1px;
    cursor: pointer;
    font-size: 15pt;
}

.lsg {
	background-color: inherit;
    border: none;
    border-radius: 6px;
    font-size: 13pt;
    font-family: 'Doulos SIL', serif;
    padding: 1px;
    cursor: pointer;
}

.showAll {
	background-color: inherit;
	border: 2px solid #393c82;
	border-radius: 3px;
	font-size: 12pt;
	font-family: 'Lato', sans-serif;
	padding: 5px;
	cursor: pointer;
}