body {
	margin: 0;
	font-family: Verdana, Arial, Helvetica, Geneva, SunSans-Regular, sans-serif;
	font-size: 11pt;
	min-height: 100%;
	/* Needed to make .footer work, i.e. footer stays at the bottom even on mobile devices and doesn't come up */
	position: relative;
	padding-bottom: 25px;
	/* footer-height */
}

html {
	height: 100%;
}

/* Needed to make .footer work, i.e. footer stays at the bottom even on mobile devices and doesn't come up */

#formtable {
	background-color: #DDFFDD;
	border-collapse: separate;
	border-spacing: 0 0px;
}

#formtable tbody>tr:last-child>td {
	border-bottom: 0;
}

#output {
	text-align:left;
/*	background-color:#EEFFEE; */
	border-collapse:separate;
	border-spacing:0 0px;
	padding:10px;
}

thead {
	background-color: #DDFFDD;
	border: none;
	border-collapse: collapse;
}

.form_explanation {
	color: #777777;
	font-size: 9pt;
}

.lettercount {
	text-indent: 20px;
	color: #777777;
	font-size: 9pt;
}

.pangram {
	border-radius: 16px;
	background-color: #FFF1DC;
	padding: 8px;
	margin: 2px;
}

.pangram_explanation {
	color: #444444;
	font-size: 9pt;
}

.rightbox {
	float: right;
	width: 215px;
	border: 1px solid;
	border-color: #FFF1DC;
	font-family: verdana, arial, sans-serif;
	font-size: 10pt;
	padding-top: .1in;
	padding-bottom: .1in;
	padding-right: .1in;
	padding-left: .1in;
}

.footer {
	color: #777777;
	font-size: 8pt;
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 1rem;
	text-align:center;
	vertical-align: bottom;
	height: 20px;
	/* Height of the footer */
}

.menu {
	text-align: center;
}

.lh {
	text-decoration: underline;
}

/* highlight the first occurence of a letter in a pangram, e.g. font-style:italic, font-weight:bold, text-decoration:underline, etc. */

.topbarleft {
	float: left;
	font-family: verdana, arial, sans-serif;
	font-size: 12pt;
	color: #000000;
	background-color: #bbbbbb;
	border: 0;
}

.topbarright {
	float: right;
	font-family: verdana, arial, sans-serif;
	font-size: 12pt;
	color: #000000;
	background-color: #bbbbbb;
	border: 0;
}

cursorauto {
	cursor: auto
}

cursordefault {
	cursor: default
}

cursorwait {
	cursor: wait
}

table, td, p, ul {
	font-family: verdana, arial, sans-serif;
	overflow: hidden;
	font-size: 11pt;
}

table, th {
	font-family: verdana, arial, sans-serif;
	font-size: 10pt;
}

h2 {
	font-family: verdana, arial, sans-serif;
	font-size: 13pt;
	margin-top: 0pt;
	margin-bottom: 1pt;
}

h3 {
	font-family: verdana, arial, sans-serif;
	font-size: 13pt;
}

table.topbar {
	font-family: verdana, arial, sans-serif;
	font-size: 12pt;
	color: #000000;
	background-color: #eeeeee;
	border: 1px solid;
	border-color: #444444;
	width: 100%;
	border: 0;
}

div.example {
	border: #603 dotted;
	padding: 0.5em;
	margin: 1em 2em
}

p.blocktext_centered {
	text-align: center;
	border: 1px dotted;
	font-family: verdana, arial, sans-serif;
	font-size: 10pt;
	padding-top: .1in;
	padding-bottom: .1in;
	padding-right: .1in;
	padding-left: .1in;
}

.rightbox-colored {
	border: thin;
	width: 160px;
	border-style: dotted;
	border-color: #2266FF;
	font-family: verdana, arial, sans-serif;
	font-size: 10pt;
	padding-top: .1in;
	padding-bottom: .1in;
	padding-right: .1in;
	padding-left: .1in;
	background-color: #FFFFFF;
	text-decoration: none;
}

pre {
	font-family: courier, "courier new", monospace, monospace;
	font-size: 11pt;
}

a:hover {
	color: #FF0000;
}

img.flag {
	border: 1px solid;
}

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.homelink {
	text-decoration: none;
	color: white;
}

.homelink_awad {
	text-decoration: none;
	color: black;
}

.align-right {
	float: right;
	margin: 0 0 5px 5px;
}

.align-left {
	float: left;
	margin: 0 15px 15px 0;
}

.frame {
	padding: 5px;
	border: 1px solid #aaa;
}

.shadow {
	-moz-box-shadow: 3px 3px 5px 6px #ccc;
	-webkit-box-shadow: 3px 3px 5px 6px #ccc;
	box-shadow: 3px 3px 5px 6px #ccc;
}

/* ============== /palindrome styles =========== */
.palindrome{border-radius:16px;background-color:#DDFFDD;margin:2px;}
.menu { margin-top:30px; padding:0px 20px; }
.adv_pal_container { width:100%; margin: auto; padding-top:20px; justify-content: center; text-align:left;}
.adv_pal_container h1 { width: 100%; text-align:left; }
.adv_pal_container  #formtable { display: inline-block; text-align: left;}
.adv_pal_container  #formtable tr td { padding:5px 10px;  }

.frm_fld_td textarea { max-width:60% }
.frm_fld_td input { max-width: 35%; }

@media (max-width:639px)
{
	.adv_pal_container { width:100%; padding: 20px 10px; box-sizing: border-box;}
}

@media (max-width:575px)
{
	.adv_pal_container h1  { font-size: 22px; }
	.awd_top_bar_form tr td { padding:5px; width:100%; box-sizing: border-box; display: block; text-align: center; }
}

@media (max-width:479px)
{
	.adv_pal_container  #formtable tr td { padding:10px; width:100%; display: block; box-sizing: border-box; }
	.adv_pal_container  #formtable tr td:nth-child(1) { border-bottom:0px !important}
}