body { background-color: #DDD; }

.border1 { border: 1px solid black; }

.rounded5  { border-radius: 5px; }
.rounded10 { border-radius: 10px; }

.nopad
{
	margin: 0px;
	padding: 0px;
}

.smalltext { font-size: 0.65em; }
.hspace { padding-right: 1.5em; }

.vspace5  { padding-bottom: 0.5em; }
.vspace10 { padding-bottom: 1.0em; }
.vspace20 { padding-bottom: 2.0em; }
.vspace30 { padding-bottom: 3.0em; }
.vspace40 { padding-bottom: 4.0em; }
.vspace50 { padding-bottom: 5.0em; }

.pink { background-color: #FCC; }

p { line-height: 1.3em; }

div.header
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	height: 66px;
	background-color: #FFF;
}

div.footer
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row nowrap;
	-ms-flex-flow: row nowrap;
	flex-flow: row nowrap;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;
	height: 66px;
	background-color: #FFF;
}

div.site_msg
{
	text-align: center;
	padding-top: 12px;
	padding-bottom: 2px;
	width: 100%;
	height: 2em;
	background-color: #FCC;
	border: 1px solid black;
}

div.valign
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

div.page { min-height: 75vh; }

form.paper
{
	margin: 2px;
	padding: 8px;
	background: #E0DAC0;
}

input[type=submit]
{
	padding: 5px 15px;
	background: #9AD;
	border: none;
	cursor: pointer;
	-webkit-border-radius: 5px;
	border-radius: 10px;
	font-size: 1.1em;
}

input.dir[type=submit]
{
	margin: 2px 20px;
	padding: 2px 5px;
	background: #BCD;
	border: none;
	cursor: pointer;
	-webkit-border-radius: 5px;
}


input.file[type=submit]
{
	margin: 2px 40px;
	padding: 2px 5px;
	background: #BCD;
	border: none;
	cursor: pointer;
	-webkit-border-radius: 5px;
}

table
{
	table-layout: fixed;
	border-collapse: collapse;
	text-align: left;
}      

th
{
	background: #CCF;
	padding: 5px;
	overflow: hidden;
	white-space: nowrap;
	border: solid 1px #666;
}

td
{
	background: #FFF;
	padding: 5px;
	overflow: hidden;
	white-space: nowrap;
	border: solid 1px #666;
}

.t1   { width:   1%; max_width:   1%; }
.t5   { width:   5%; max_width:   5%; }
.t10  { width:  10%; max_width:  10%; }
.t15  { width:  15%; max_width:  15%; }
.t20  { width:  20%; max_width:  20%; }
.t30  { width:  30%; max_width:  30%; }
.t100 { width: 100%; max_width: 100%; }

.tmid { text-align: center; }
.tright { text-align: right; }





/* Tooltips */

.inline
{
	display: inline;
}

.tooltip
{
	position: relative;
	display: inline-block;
}

.tooltip .tooltiptext
{
	visibility: hidden;
	width: 80vw;
	background-color: #336;
	color: #fff;
	border: 2px solid black;
	text-align: left;
	padding: 10px;
	border-radius: 10px;

	/* Position the tooltip text */
	position: absolute;
	z-index: 100;
	bottom: -400%;
	left: 80%;
	margin-left: -30px;

	/* Fade in tooltip */
	opacity: 0;
	transition: opacity 1s;
}

.tooltip .tooltiptext::after
{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #336 transparent transparent transparent;
}

.tooltip:hover .tooltiptext
{
	visibility: visible;
	opacity: 1;
}