/*
Colors:
  >	Backgrounds:
	blue-gray-ish for all page backgrounds
	ivory for message/error boxes
	khaki to highlight error fields
	lightyellow to highlight banners & special areas 
  > Text:
	slategray for page headers text
	black for ordinary text
	maroon, darkblue, darkgreen for special/labels text
	dark brown for some helper-headers text
	purple for authority notes
	some other colors for particular areas
*/

*
{
	margin: 0;
	padding: 0;
}

html 
{
	font-size: 100%;
}

body
{
	font-size: 1.0em;
	color: black;	
	font-family: 'Segoe UI', Arial, Sans-Serif;
	background-color: #d6e8ed;	/* pale blue-gray-ish */
	width: 850px;
	margin-left: auto;
	margin-right: auto;
}

h2
{
	font-size: 0.9em;	
}

h3
{
	font-weight: normal;
    font-size: 1.0em;
    margin-top: 5px;
}

h4
{
	color: slategray; 
	font-variant: small-caps;
	margin-bottom: 10px;
}

h5
{
	/* Greetings/Welcome */
	font-variant: small-caps;
	margin-bottom: 0px;
	margin-top: 10px;
	color: maroon;   
	font-size: 0.9em;
	font-style: normal;
}

ul
{	
	text-align: left;
}

li 
{
	font-size: 0.8em;
	color: Black;
}

p
{
	font-size: 0.95em;
	text-align: center;
}

a			{ font-size: 1.0em; }
a:link		{ color: darkblue;   }
a:visited	{ color: darkblue;   }
a:hover		{ color: blue; }
a:active	{ color: gray; }	

a.plain 
{
	text-decoration: none;	
}

img
{
	height: 100px;
	width: 110px;
	float: left;
}

img.helpimg
{
	/* help icon img */
	height: 16px;
	width: 16px;
	float: left;
	margin-left: 10px;
}

select
{
	width: 135px;
	height: 22px;
	float: left;
	padding-top: 1px;
}

input 
{
	padding-left: 2px;
	font-family: inherit;
	font-size: inherit; 
}

input[type="file"]
{
	/*	Note inline style on php page that sets 'size'
		attribute for width of the filename box (at least for FF).
	*/
	width: 400px;
	height: 23px;
	float: left;
	font-size: 0.9em;
}

input[type="checkbox"]
{
	margin: 20px 0px 0px 5px;
}

input[type="radio"]
{
	margin-left: 10px;
	margin-right: 3px;
}

input[type="button"], input[type="submit"]
{
	margin-top: 8px; 
	width: auto;
	height: 26px;
	padding: 0px 5px 3px 5px;
	font-size: 0.9em;
}

input[type="text"], input[type="password"]
{
	width: 250px;
	float: left;
	height: 20px;
	padding-left: 2px;
}

input[type="password"]
{
    margin-top: 4px;
}

textarea
{
	font-family: inherit;
	font-size: inherit;
	padding-left: 1%;
	float: left;
}

div				
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 5px;
	margin-bottom: 5px;
	text-align: center;
}

a.leftside
{
	float: left;
	margin-left: 20px;
}

a.rightside
{
	float: right;
}

div#content
{
	float: left;
	width: 100%;
}

#header
{
	color: slategray;
}

.headertext
{
	width: 70%;
	float: left;
}

.baseform		/* a user form section */
{
    font-size: 0.9em;
    padding: 0px 30px 10px 30px;
    color: black;
    border: solid thin maroon;   
}

.baseform p
{
	margin-top: 10px;
	color: maroon;   
}

.doubleline
{
	border-bottom: darkslategray 4px double; 
	margin:  10px auto;
	width: 110%;
	position: relative;
	left: -5%;
}

/* -------------- results status area - many pages ---------------- */
#actionstatus
{
	height: 3%;
	margin: 0;
}

#actionstatus p
{
	float: none !important;
	color: darkgreen;
	margin-top: 2px;
	font-style: italic;
	margin-bottom: 2px;
}

span.hilight
{
	color: maroon;  
}

/* -------------- radiobox work ------------------------- */
/* groups of radio buttons can be horiz (spread) or vert (stack) */

.stack 
{
	text-align: left;
	padding: 0 5px 5px 0;
}

.spread p 
{	
	float: left;
}

.spread 
{
	width: 185px;		/* taller, narrower radioboxes */ 
}

.spread input[type="radio"]
{	
	float: left;
}

.spread label
{	
	float: left;
}

.radiobox p
{
	color: #005000;		/* darker than darkgreen */
	width: 118px;		/* taller, narrower radioboxes */
	margin-left: 5px;
	text-align: left;
	height: 20px; 
	padding-top: 5px; 
	margin-top: 0px;
}

.radiobox
{
	float: left;
	margin-right: 5px; 
	margin-left: 0px;
	font-size: 0.8em;
	border: solid 1px #005000; /* darker than darkgreen */
	padding-top: 3px;
}

.radiobox label
{
	position: relative;
	top: -2px;			/* ok for safari, chrome, IE; FF prefers -1px */
}

.radiobox div
{
	text-align: left;
}

/* ----------------- table work ----------- */

table
{
	border: 0;	
	margin-left: auto;
	margin-right: auto;
	width: 80%;
	border-collapse: collapse;
}

td
{
	width: 150px;
	text-align: right;
	padding: 0px 5px;
}

.datatable 
{
	text-align: center;
}

.datatable th[scope="col"]
{
	font-weight: bold;
	font-size: 0.8em;
	text-align: left;
	font-variant: small-caps;
	border: solid 1px black;
	padding-left: 5px;
	padding-right: 5px;
}

.widetable table
{
	width: 130%;
	left: -15%;		/*  half of the width over 100% */
}

.normaltable table
{
	width: 115%;
	left: -10%;
}

.datatable table
{
	border: solid 1px black;
	position: relative;
}

.datatable tr
{
	text-align: left;
}

.datatable td
{
	font-weight: normal;
	border: solid 1px black;
	padding-left: 5px;
	padding-right: 3px;
	width: auto;
	text-align: left;
	height: 22px;
}

td.datecol 
{
	width: 120px;
}

td.minwidthcell
{
	width: 50px;
}

.tiny
{
	width: 30px;	/* a very small no-border cell */
}

.datatable input[type="checkbox"]
{
	margin: 0;
}

.datatable input[type="button"]
{
	width: 50px;
	margin: 2px;
	height: 20px;
	font-size: 0.8em;
}

/* ------ footer work; often output-results area --------- */

#footer p
{
	margin-bottom: 10px;
	float: left;
	width: 110%;
	font-size: 0.9em;
}

/* ------------ special text markers ---------- */

p.simple
{
	color: darkblue;  
	font-style: normal;
}

p.special
{
	color: maroon;        
	font-style: italic;
}
	
.flagger 
{
	font-size: 1.0em !important;
	color:  #005000 !important;		/* darker than darkgreen */ 
}

.announcement 
{
	float: none;
	font-size: 1.0em !important;
	color: green !important;
	font-weight: normal;
}

.smalltext
{
	/* like a footnote */
	font-size: 0.8em;
	color: dimgray !important;
}

.highlight 
{
	font-style: italic;
	color: maroon;				
}

.mouseoverclass
{
	color: blue;
}

.mouseoutclass
{
	color: Black;
}

.tag 
	/* to mark special entries in pull-downs */
{
	color: orangered;
}
/* ------------------------------------- */
/* 	Simulate 'disabled' attribute.
	Chrome, FF, Opera, Safari browsers only allow 'disabled' for form controls. 
*/
.graycolor { color: gray !important; }
.livecolor { color: darkgreen !important; }

/* ----- call sign search box: approvals, validation ----- */
div.searcher 
{
	width: 250px; 
	border: solid 1px #005000;	/* darker than darkgreen */
	float: left;
	font-size: 0.8em;
}

.searcher input[type='text']
{
	width: 70px;
	height: 16px;
	margin-top: 2px;
	border: solid 1px gray;	
}
.searcher select
{
	width: 95px;
	border: solid 1px gray;	
}
.searcher input[type='button']
{
	width: auto;
	margin-top: 1px;
	height: 22px;
	margin-right: 5px;
}
.searcher p
{
	margin-left: 10px;
	padding-top: 4px;
	padding-right: 5px;
	float: left;
	color: #005000;		/* darker than darkgreen */
}

/* ------------ message box & work boxes ---------------- */

.workbox
{
	position: fixed;
	top: 25%;
	left: 35%;
	width: 260px; 
	z-index: 50;	
	font-size: 0.9em;
}

#msgbox
{
	position: fixed;
	top: 45%;
	left: 25%;
	width: auto;
}

#msgbox, .workbox
{
	background-color: ivory;
	padding: 15px;
	border-bottom: dimgray 3px solid;
	border-left: dimgray 1px solid;
	border-top: dimgray 1px solid;
	border-right: dimgray 3px solid;
}

#msgbox p 
{
	font-size: 0.9em;
	text-align: left;
}

.workbox a
{
	margin: 5px 0px;
}

.workbox span 
{
	padding: 0 20px 0 20px;
}

.workbox select
{
	margin: 5px 0px 0px 0px;
}

.workbox input[type="text"]
{
	width: 150px;
	float: none;
}

.workbox label
{
	float: left;
	width: 85px;
	text-align: right;
	color: maroon;   
	padding-top: 8px;
}

.workbox textarea
{
	width: 100%;   /* 325px; */
	height: 60px;
	padding: 2px;
}

#msgbox a, .workbox a
{
	font-size: 0.8em;
}

/* ----------- hide/show ----------------- */

/* Background is usually colored, sometimes it must be transparent. */
/* Do not use hideme/showme since it creates too much page movement.*/
.invisible { background-color: transparent; }
.visible   { background-color: lightyellow; }

.msgboxshow, .workboxshow
{
	display: block;
}

.msgboxhide, .workboxhide
{
	display: none;
}

.showme
{
	display: block;
}

.showmeinline
{
	display: inline;
}

.hideme
{
	display: none;
}

span.showme
{
	display: inline;
}

span.hideme
{
	display: none;
}

/* ----- blaze: page hit-count + logout link -----  */
div.blazeinfo
{
	margin-top: 0px;
	margin-bottom: 2px;
	float: right;
	color: darkslategray;
	font-size: 0.8em !important;
}

div.blazeinfo a 
{
	font-size: 0.9em;
	color: darkslategray;
}

div.blazeinfo p
{
	float: none;
}

/* ---- the merit legend box ---- */
#legend h4 
{
	font-size: 0.9em;
	font-variant: normal;
	text-align: left;
	color: maroon;   
	font-weight: normal;
}
#legend li
{
	margin: 2px 15px;
	font-size: 0.9em;
}
#legend ul
{
	margin-bottom: 20px;
}

#msgbox.bigbox
{
	left: 40%;
	width: 50%;
	height: 40%;
	overflow: auto; /* gives scrollbars */
}

/* the X that closes the box */
div.xclose 
{
	display: inline-block;
	padding-left: 95%;
	margin: 0px;
}

/* used in legend box, and badges work */
img.tinyimg
{
	height: 15px;
	width: 15px;
	margin-left: 2px;
	padding-top: 5px;
}

/* ----------- double-deck table rows -------------- */
/* Double-deck fields in row (each row presented over multiple rows/lines */
td.ddeck
{
	text-align: left;
	color: darkblue;
}
td.mask 
{
	color: sienna;					/* for words, if any */
	text-align: right;
	background-color: lightgray;	/* gray out  */
}

td.boundary 
{
	border-bottom: 2px solid darkgreen !important;
}
td.noboundary 
{
	border-bottom: 1px solid lightgray !important;
}


/* ----------- under-development page -------------- */
#underdevelopment
{
	text-align: center;
	color: maroon;   
	font-size: 1.25em;
	font-variant: small-caps;
	margin: 50px auto;
	border: solid 1px green;
	xheight: 200px;
	padding-bottom: 30px;
}

#underdevelopment a
{
    font-size: 0.8em !important;
    font-variant: normal;
    color: green;
}

#underdevelopment p
{
	margin: 50px auto;
}

div#pad
{
	height: 200px;
}

#accessfact p
{
	text-align: center;
	color: maroon;   
	font-size: 1.2em;
	font-variant: small-caps;
}

#accessfact span
{
    color: Black;
    font-weight: bold;
}

#accessfact a
{
	display: block;
	font-size: 0.9em;
	padding: 3em !important;
}

#accessfact a.snug
{
    padding: 1em !important;
    color: Green;
}

p.title
{
	color: darkgreen !important;
	font-size: 1.4em !important;
}