
html, body { margin: 0; }

body { font-size: 11.5pt; }

div, table, img {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
}

button, input[type=button] { padding: 3px 5px 3px 5px; }

select, input[type=text] { padding: 3px; }

textarea { padding: 5px; resize: none; border:thin solid gray; }
textarea:focus { outline: none; }

td { word-wrap: normal; }

.link-text { color: blue; font-weight: bold; cursor: pointer; }

.menu-line span { cursor: pointer; }

.drag-text { cursor: move; }

.sitename { font-family: 'Blippo Blk BT'; font-size: 1.8em;  color: #AABBFF; cursor: pointer; }
.sitename:hover { color: #99FFFF; }

.topmenu td { color: #AABBFF; cursor: pointer;  }
.topmenu td:hover { color: #99FFFF; }

.top-menu { color: GhostWhite; }
.top-menu td { color: LightGray; }
.top-menu th { font-weight: normal; cursor: pointer;  }
.top-menu th:hover { font-weight: bold; color: white; }

.top-banner { position: relative; color: ghostWhite; }
.top-banner th { width: 140px; background: rgba(100,100,100,0.5); cursor: pointer; }
.top-banner th:hover { color: white; background: rgba(0,0,0,0.5); }
.top-banner .title { font-size: 18pt; font-weight: 900; }

.basicform { border: thin outset #008080; border-collapse: collapse;  text-align: center; }
.basicform th { border: thin solid #008080; padding: 3px; color: #81c0c0; }
.basicform td { border: thin solid #008080; padding: 3px; }

.dbgrid { text-align: center; border-collapse: collapse; white-space: nowrap; }
.dbgrid thead { text-align: center; background: #008080; }
.dbgrid thead span { cursor: pointer; }
.dbgrid th { padding: 3px 10px 3px 10px; font-weight: normal; }
.dbgrid td { padding: 3px 10px 3px 10px; }
.dbgrid tfoot { border-color: transparent; }
.dbgrid tfoot td { padding: 3px 5px 3px 5px; cursor: pointer; }

.bogrid { text-align: center; border-top: 2px solid gray; }
.bogrid thead { background-color: WhiteSmoke; border-bottom: thin solid gray; }
.bogrid tbody tr:hover { color: gray }
.bogrid td { padding: 3px; border-bottom: thin dotted lightGray; }

.data-list { text-align: center; border-top: 2px solid gray; }
.data-list thead { font-size: 0.85em; background-color: WhiteSmoke; border-bottom: thin solid gray; }
.data-list tbody tr:hover { color: gray }
.data-list td { padding: 3px; border-bottom: thin dotted lightGray; }
.data-list tfoot { border-color: transparent; }
.data-list tfoot td { padding: 3px 5px 3px 5px; cursor: pointer; }

.icons80 { padding: 3px 3px 0 3px; min-height: 86px; }
.icons80 span { margin-right: 3px; }
.icons80 img { width: 80px; height: 80px; border: thin solid #005555; cursor: pointer; }

.icons80cp { padding: 2px; }
.icons80cp span { margin-right: 2px; }
.icons80cp img { width: 80px; height: 80px; border:thin solid #005555; cursor: pointer; }

.icons100 { padding: 3px 3px 0 3px; min-height: 107px; }
.icons100 span { margin-right: 3px; }
.icons100 img { width: 100px; height: 100px; border: thin solid #005555; cursor: pointer; }

.icons_book { padding: 3px 3px 0 3px; min-height: 254px; }
.icons_book span { margin-right: 3px; }
.icons_book img { width: 90px; height: 120px; border: thin solid #005555; cursor: pointer; }

.icons_clip { position: absolute; bottom: 0; left: 5px; right: 5px; }
.icons_clip span { margin-right: 3px; }
.icons_clip img { width: 90px; height: auto; border: thin solid #005555; }

.icon_main { position: relative; text-align: center; }
.icon_title{
	position: absolute; left: 1px; bottom: 5px; right: 1px;
	padding: 5px 0 5px 0;
	font-size: 9pt; opacity: 0.75;
	background-color: #005555;
}

.iconBoard img { cursor: pointer; }

.cartoon { position: absolute; top: 1px; right: 1px; }

.popup-menu {
	position: absolute;
	border: thin solid white;
	padding: 2px;
	background: #c0c0c0;
	color: black;
	display: none;
	z-index: 999;
}
ul.popup-menu-sero {
	margin: 0;
	padding: 3px;
	list-style:none;
}
ul.popup-menu-sero li {
	margin-bottom: 3px;
	padding: 5px 10px 5px;
	background: #f4f4f4;
	cursor: pointer;
}
ul.popup-menu-sero li:hover { background: white; }	

.popmenu {
	position: absolute;
	border: thin solid white;
	padding: 2px;
	background: #c0c0c0;
	color: black;
	display: none;
}
.popmenu table td { margin: 0; padding: 0; vertical-align: top; }

.popboard {
	position: absolute; background-color: #c0c0c0; color: black;
	border: thin solid #e8e8e8;
	display: none;
}
.popboard div { padding: 10px; border: thin solid #808080; background-color: white; color: black; }
.popboard table { color: black; }
.popboard table th { font-weight: normal; font-size: 0.85em; }
.popboard .pop-title {
	position: relative; top: 0; left: 0; right: 0;
	padding: 0;
	border: none;
	background-color: #c0c0c0;
}

.popup-board {
	position: absolute;
	border: thin solid #c0c0c0;
	background: white;
	font-size: 11pt; color: black;
	display: none;
}
.popup-head {
	width: 100%;
	background: #555555;
	color: white;
}
.popup-head td { padding: 5px; }
.popup-body { position: relative; padding: 10px; }

.th_align_right th { text-align: right; }
.th_align_left th { text-align: left; }
.th_align_center th { text-align: center; }

.opaque-glass {
	position: absolute; top: 0; bottom: 0; left: 0; right: 0;
	background-color: rgba(0,0,0,0.5); display: none;
}

.helpline {
	position: absolute; bottom: 0; left: 0; right: 0; padding: 10px;
	background-color: black; border-top: thin solid #c0c0c0;
	color: #c0c0c0; text-align: center;
	display: none; 
}

@media only screen and (max-width: 400px) {
	.over-400 { display: none; }
}

@media only screen and (max-width: 600px) {
	.over-600 { display: none; }
}

@media only screen and (max-width: 600px) {
	body { width: 600px; }
}

@media only screen and (max-width: 800px) {
	.over-800 { display: none; }
}

@media only screen and (max-width: 1152px) {
	.over-1100 { display: none; }
}

@media only screen and (max-width: 1000px) {
	.over-1000 { display: none; }
}

.wide-screen-only { display: block; }
@media only screen and (max-width: 1024px) {
	.wide-screen-only { display: none; }
}

@media only screen and (max-width: 1200px) {
	.over-1200 { display: none; }
}

@media only screen and (max-width: 1400px) {
	.over-1400 { display: none; }
}
