/* CSS Document */

caption {
	white-space: nowrap;
	font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
}

td {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
}


table.nav {
	background-color: #003800;
	border: 1px solid #000000;
	height: auto;
	width: 182px;
}

.navhead {
	text-decoration: none;
	width: 180px;
	height: auto;
	padding: 1px;
	float: left;
	line-height: 18px;
	clear: none;
	background-color: #003800;
	font-weight: bold;
	color: #FFFFFF;
	cursor: default;
	text-align: center;
	font-variant: small-caps;
}

a {
	color: #D1FFD1;
	text-decoration: none;
}

a.nav {
	color: #D1FFD1;
	text-decoration: none;
	width: 181px;
	height: auto;
	float: left;
	padding: 1px;
	clear: none;
	background-color: #003800;
	border: 1px solid #003800;
	text-align: left;
}

.navhelp {
	text-decoration: none;
	width: 181px;
	height: auto;
	padding: 1px;
	float: left;
	clear: none;
	background-color: #015D01;
	border: 1px solid #015D01;
}

a:hover.nav {
	background-color: #015D01;
	border-top: 1px solid #029402;
	border-left: 1px solid #029402;
	border-bottom: 1px solid #013901;
	border-right: 1px solid #013901;
}
a.navhilite {
	text-decoration: none;
	width: 150px;
	height: auto;
	padding: 1px;
	float: left;
	clear: none;
	color:#FFFF00;
	background-color: #330000;
	border-top: thin solid #330000;
	border-bottom: thin solid #330000;
	border-right: thin none #330000;
	border-left: thin none #330000;
}
a:hover.navhilite {
	background-color: #CC0000;
	border-top: thin outset #CC0000;
	border-right: thin none #CC0000;
	border-bottom: thin outset #CC0000;
	border-left: thin none #CC0000;
}


table {
}
td.charinfo {
	border-top-width: 1px;
	border-top-style: solid;
	border-top-color: #009900;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	cursor: default;
}
td.charhead {
	background-color: #009900;
	border: none;
	cursor: default;
	color: #FFFF00;
}
table.charinfo {
	border: none;
	width: 182px;
}
td.popupheader {
	background-color: #333399;
	background-image: url(../images/headbkg.GIF);
	height: 20px;
}
td.noborder {
	border: none;
}
table.noborder {
	border: none;
}
input {
	background-color: #015D01;
	border: 1px solid #013901;
	color: #CCCCCC;
}
.button {
font-family: verdana,arial,helvetica,sans-serif;  
	 font-size: 12px;  
	 color: #FFFFFF;  
	 background-color: #015D01;  
	 border-top: 1px solid #029402;  
	 border-left: 1px solid #029402;  
	 border-right: 1px solid #013901;  
	 border-bottom: 1px solid #013901;
}
.input {
	background-color: #015D01;
	border: 1px solid #013901;
	color: #CCCCCC;
}
select {
	background-color: #015D01;
	border: 1px solid #806B4D;
	color: #CCCCCC;
}
table.vitalinfo {
	background-color: #003300;
	border: 1px solid #000000;
	width: 182px;
}
a.motd {
	text-decoration: none;
	color:#D1FFD1;
}
a:hover.motd {
	font-weight: normal;
	color:#FFFF00;
}

a.hotmotd {
	font-weight: normal;
	color:#FFFF00;
}

.pagetitle {
	font-family: "Arial Black", "Courier";
	font-variant: small-caps;
	font-size: 20px;
	color: #FFFFFF;
}
.navhi {
	color: #00FF00;
	text-decoration: underline;
}

td.nav a.thot {
	position: absolute;
	left: 0px;
	height: auto;
}
td.nav a.t {
	position: absolute;
	left: 0px;
	height: auto;
}

a.t {
	width: 7px;
	height: 7px;
	border: 1px dotted #0000FF;
	background-color: #9999FF;
	color: #FFFFFF;
	font-size: 7px;
	text-decoration: none;
	padding-left: 1px;
	padding-right: 1px;
}

a.thot {
	width: 7px;
	height: 7px;
	border: 1px dotted #FF0000;
	background-color: #FF9999;
	color: #FFFFFF;
	font-size: 7px;
	text-decoration: none;
	padding-left: 1px;
	padding-right: 1px;
}

div.debug {
	background-color: #FFFFFF;
	color: #000000;
	border: 1px dotted #000000;
	width: auto;
	height: auto;
	font-size: 10px;
}

.colDkBlue	{ color: #0000FF; }
.colDkGreen   { color: #00B000; }
.colDkCyan	{ color: #00B0B0; }
.colDkRed	 { color: #BB0000; }
.colDkMagenta { color: #B000CC; }
.colDkYellow  { color: #B0B000; }
.colDkWhite   { color: #B0B0B0; }
.colLtBlue	{ color: #6262FF; }
.colLtGreen   { color: #00FF00; }
.colLtCyan	{ color: #00FFFF; }
.colLtRed	 { color: #FF2222; }
.colLtMagenta { color: #FF00FF; }
.colLtYellow  { color: #FFFF00; }
.colLtWhite   { color: #FFFFFF; }
.colLtBlack   { color: #777777; }
.colDkOrange  { color: #995500; }
.colLtOrange  { color: #FF9900; }
.colBlue  		{ color: #0070FF; }
.colLime  		{ color: #DDFFBB; }
.colBlack  		{ color: #000000; }
.colRose 		{ color: #EEBBEE; }
.colblueviolet 	{ color: #9A5BEE; }
.coliceviolet	{ color: #AABBEE; }
.colLtBrown 	{ color: #F8DB83; }
.colDkBrown 	{ color: #6b563f; }
.colXLtGreen	{ color: #aaff99; }
.colAttention 	{ background-color: #00FF00; color: #FF0000; }
.colWhiteBlack 	{ background-color: #FFFFFF; color: #000000; }
.colBack  		{ background-color: #00FFFF; color: #000000; }
.colbeige  { color: #F5F5DC; }
.colkhaki  { color: #F0E68C; }
.coldarkkhaki  { color: #BDB76B; }
.colaquamarine  { color: #7FFFD4; }
.coldarkseagreen  { color: #8FBC8F; }
.collightsalmon  { color: #FFA07A; }
.colsalmon  { color: #FA8072; }
.colwheat  { color: #F5DEB3; }
.coltan  { color: #D2B48C; }.colLtLinkBlue { color: #0099FF; }
.colDkLinkBlue { color: #006BB3; }
.colDkRust { color: #8D6060; }
.colLtRust { color: #B07878; }
.colMdBlue { color: #0000F0; }
.colMdGrey { color: #DDDDDD; }
.colburlywood { color: #DEB887; }
.trhead  { background-color:#006600; color:#FFFFFF; }
.trlight { background-color:#004000; }
.trdark  { background-color:#003000; }
.trhilight { background-color: #333333; }

.container {
	margin: 0 auto;
	max-width: 980px;
	min-width: 320px;
}

.row {
	display:flex;
	flex-wrap: wrap;
}

.column {
	text-align: center;
	flex-grow: 1;
	flex-shrink: 1;
	flex-basis: 1;

	margin: 10px;
	border: 1px solid #dedede;
	padding: 10px;

}

.col-1 {
	max-width: calc(100% / 12);
}
.col-2 {
	max-width: calc(100% / 12 * 2);
}
.col-3 {
	max-width: calc(100% / 12 * 3);
}
.col-4 {
	max-width: calc(100% / 12 * 4);
}
.col-5 {
	max-width: calc(100% / 12 * 5);
}
.col-6 {
	max-width: calc(100% / 2);
}

@media screen and (max-width: 768px) {
	.container {
		overflow: auto;
	}
	.column {
		min-width: 100%;
		width: 100%;
		margin: 10px 0;
	}
}