/*********************************************************
 *  RSMS-2 Style Sheet
 *********************************************************/
body {
	visibility: hidden; /* this is removed at end of style sheet */
  color: #000000; background: #a0c0c8;
  font-size:100%;
	}

/*************************************************/
/*  Basic components, may be used anywhere       */

/* rounded corners for various elements */
h1,h2,h3,h4,h5,h6, fieldset, img, aside, header, legend {
	-webkit-border-radius: 0.3em;
	-moz-border-radius: 	 0.3em;
	border-radius:				 0.3em;
}

/* headers */
h1,h2,h3,h4,h5,h6 {
	font: 0.5em sans-serif; text-align: center;
	margin: 2px;
	}
h1 { font-size: 1.5em; }	/* 24/16 */
h2 { font-size: 1.0em; }	/* 16/16 */
h3 { font-size: 0.87em; color: white;}	/* 14/16 */
h4 { font-size: 0.75em; margin: 2px; }	/* 12/16 */
h5 { font-size: 0.63em; color: black; }	/* 10/16 */
h6 { font-size: 0.5em; }	/* 8/16 */

sup, span.reqd, #reqdNote { color: red; text-align:center; }
p { margin:2px; padding:0; }
hr {
	display: block; position: relative; 
	padding: 0; margin: 8px auto;
	clear: both; width: 90%;
	border: none; border-top: 1px solid #AAA; border-bottom: 1px solid #000;
	font-size: 1px; line-height: 0;
	overflow: visible;
	}
	
/* figures */
figure { border: 1px solid gray; }
figcaption { font-weight: bold; font-size: small; }	

/* forms */
form { font-family: Ariel; font-size: 0.87em; padding: 0; margin: 0; }
fieldset { background-color: #ffffdd; border: 1px solid gray; margin: 2px; padding-bottom: 2px; }
fieldset.grouping { border: 1px solid gray; width: auto; margin-bottom: 1em; }
fieldset p.notes {
	text-align: left;
	padding: 0; margin: 0;
	margin: 0.5em;
	font-size: 0.8em;
	color: blue;
	}
legend {
	background-color: green; color: white;
  padding: 0 0.5em 0 0.5em; margin: 0;
  border: 2px solid #593131;
  font-size: 0.87em; font-weight: bold;
  text-align: center;
  }

/* tables & parts of */
table { border-collapse:collapse; border:1px outset gray; empty-cells:hide; margin:2px; padding:0; }
caption { color: blue; font-size: 0.75em; margin: 0 0 0.5em; font-weight: bold; }
.colRight { text-align: right; }
tr.odd { background-color: #EEE; }
tr.even { background-color: #CCC; }
label, .lblFld { font-size: 0.63em; font-weight: bold; margin-left: 0;}
label span.required { color: red; }
th,td { text-align:center; vertical-align:middle; border: 1px inset #ddd; padding: 0 5px 0 5px;}
th.topTH { text-align: center; padding: 0; margin: 0; }
th.text, td.text { text-align: left; }
td.label { text-align: left; white-space: nowrap; }
td.number { text-align: right; }
td.center { text-align: center; }
.tblSpace { vertical-align: top; }

/* form input fields */
.placeholder { color: #aaa; }	
input, select, textarea { margin: 2px; }
input:not([type=button]):not([type=select]):not([attr=readonly]):focus,
select:focus, 
textarea:focus {
	/* place blue shadow on all input fields */
	-webkit-box-shadow: 0 0 12px rgba(51,204,255, 0.5);-moz-box-shadow: 0 0 12px rgba(51,204,255, 0.5);
	box-shadow: 0 0 12px rgba(51,204,255, 0.5);	
	}
input.text { padding: 0 0 0 0.3em; width: 17em; }
input[readonly] { border: 0; background-color: #ffffdd; }
input[required]::after { content:"*"; color: red; }
input[type=checkbox] { padding-left: 5px; }
input[type=number], input.number, input.money,
input[type=range], input.range { text-align: right; }

/* lozenge shape buttons - from "CSS3 for Web Designers", Jeffrey Zeldman " */
input[type=button], input[type=submit], button {
	padding: 2px 4px; margin: 1.5em 0 0 7em;
	font-family: Helvitca, Arial, sans-serif; font-weight: bold; font-size: 12px;
	line-height: 1;
	color: #444; border: none; 
	background-image: -webkit-linear-gradient(top, #fff, #bbb);
	background-image: -moz-linear-gradient(top, #fff, #bbb);
	background-image: -ms-linear-gradient(top, #fff, #bbb);
	background-image: -o-linear-gradient(top, #fff, #bbb);
	background-image: linear-gradient(top, #fff, #bbb);
	background-color: rgb(240,240,240);
	-webkit-border-radius: 23px; -moz-border-radius: 23px; -o-border-radius: 23px;
	border-radius: 23px;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.5);-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	}
/* =========================================================================== */
/* things below here are page-specific styles */
/* =========================================================================== */
	
/***********Miscellaneous**************/
.hilite { color: red; }
.yes { background-color: green; color: white; }
.no { background-color: red; color: white; }
.hide { position:absolute; top:0; left:-9999px; height:0; overflow:hidden; display:none; }
	
/*************************************************/
aside {
	position:fixed; top:1%; left:1%;
	float:left; max-width:25%; 
	margin:0; margin-top:0.3em;
	padding-bottom:0.2em;
	height:auto;
	font-size:0.87em; /* 14/16 */
	color:black; border:0.15em solid black;
	-moz-box-shadow:0.2em 0.4em 0.6em -0.2em #000;
	-webkit-box-shadow:0.2em 0.4em 0.6em -0.2em #000;
	box-shadow: 0.2em 0.4em 0.6em -0.2em #000;
	}
img#logo { padding: 3px; border: 2px solid #ddd; width:90%; }
aside input[type=submit] { position: relative; left:30%; }

/* ---------------------------- */
header {
	text-align: left; height:5em; background: #ffcc66; /*#90b0b8;*/
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	}
header #fld1,
header #fld2 { margin: 0; padding: 0; text-align: center }
	
/* ---------------------------- */
nav { font-size: 0.9em; margin-top:2px; }
hr.navSpacer { margin: 3px; margin-left:20px; color: gray; width: 75%; padding-left: 2em; }
#accordion { margin-left: auto; margin-right: auto; }
.navHeading {	
	position: relative;
	-moz-border-radius: 3px; 	-webkit-border-radius: 3px;
	border-radius: 3px;
	font: bold 16px Veranda;
	text-align: left; 
	padding-left: 1em; 
	margin: 2px 1px 0px 1px;
	color: #ffffff; background: #000000;
	font-weight: bold;
	cursor: pointer;
	}
.navUnselected:before {
	content: "\00A0";
	display: block; position: absolute; top: 0.4em; left: 4px;
	width: 0; height: 0;
	border-width: 3px 0px 3px 7px;
	border-style: solid;
	border-color: transparent transparent transparent #ffcc66;
	}
.navSelected:before {
	content: "\00A0";
	display: block; position: absolute; top: 0.4em; left: 5px;
	width: 0; height: 0;
	border-width: 7px 3px 0px 3px;
	border-style: solid;
	border-color: #ffcc66 transparent transparent transparent;
	}
.navContent {	
	background: white; color: black;
	font: 12px Veranda;
	padding-left: 1em; margin: 0px 3px 0px 3px;
	display: none;
	}
.notOffline { display: none; }
	
/* ---------------------------- */
footer { position: relative; width: 100%; text-align : center; 
	color: #ffffff; font-size: 0.75em; letter-spacing: 1px;
	}

/* ---------------------------- */
#container, #msg { position: relative; color: red; }

/*************************************************/
article#help {
	position: absolute; top: 10px; left: 500px;
	display: none;
	background: #FFFFBF; color: black;
	width: 300px; 
	}	
#help ul {
  list-style: none;
	margin-left: 0; padding-left:0;
	}
#help .noteHead {
	list-style-type: none; text-decoration: none;
	font-weight: bold;
	margin-left: 0; padding-left:0;
}
#help .draggable {
	border: 1px solid black;
	background: #FFFFBF; color: black;
	cursor: pointer;
	}	
	
/*************************************************/
#content {
	display: -moz-box; display: -o-box; display: -webkit-box; display: -ms-box;
	display: box;
	-moz-box-orient: vertical; -o-box-orient: vertical; -webkit-box-orient: vertical; -ms-box-orient: vertical;
	box-orient: vertical;
	max-width: 500px;
	position: absolute; top:0em; left: 12em;
	margin-top: 0; padding-top: 1px;
	}
	
/* ------------ */
select optgroup.addNew { background-color: yellow; padding-left: 0px; }

/* ------------ */
#contentHdr {
  -moz-border-radius: 10px; -webkit-border-radius: 10px;  
  border-radius: 10px;
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8); -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
	background: #ffcc66;
	width: 100%;
	margin-bottom: 10px;
	}
#hdrTitle {
	font-size: larger;
	display: inline;
	margin: 0 20px 0 20px;
	-moz-box-flex: 3;-webkit-box-flex: 3;-o-box-flex: 3;-ms-box-flex: 3;
	box-flex: 3;
	-moz-box-ordinal-group: 3;-webkit-box-ordinal-group: 3;-o-box-ordinal-group: 3;-ms-box-ordinal-group: 3;
	box-ordinal-group: 3;
	}
#backBtn {
	margin: 0 10px 0 10px;
	-moz-box-flex: 1;-webkit-box-flex: 1;-o-box-flex: 1;-ms-box-flex: 1;
	box-flex: 1;
	-moz-box-ordinal-group: 1;-webkit-box-ordinal-group: 1;-o-box-ordinal-group: 1;-ms-box-ordinal-group: 1;
	box-ordinal-group: 1;
	}
#gpsFlag {
	font-size: smaller;
	margin: 10px;
	-moz-box-flex: 1;-webkit-box-flex: 1;-o-box-flex: 1;-ms-box-flex: 1;
	box-flex: 1;
	-moz-box-ordinal-group: 2;-webkit-box-ordinal-group: 2;-o-box-ordinal-group: 2;-ms-box-ordinal-group: 2;
	box-ordinal-group: 2;
	text-align: left;
	float: left;
	}
#offlineFlag {
	font-size: smaller;
	margin: 10px;
	-moz-box-flex: 1;-webkit-box-flex: 1;-o-box-flex: 1;-ms-box-flex: 1;
	box-flex: 1;
	-moz-box-ordinal-group: 4;-webkit-box-ordinal-group: 4;-o-box-ordinal-group: 4;-ms-box-ordinal-group: 4;
	box-ordinal-group: 4;
	text-align: right;
	float: right;
	}
	
/* ------------ */
#content form {
	margin-top: 2px; padding: 2px;
	overflow: auto;
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#f5eedb), color-stop(1, #faf8f1) );
  background: -moz-linear-gradient( center bottom, #f5eedb 0%, #faf8f1 100% );  
	border: 1px gray;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
	}
#content form fieldset {
	margin: 0px; padding: 2px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; 
	margin-bottom: 1em; 
	}
#content form fieldset p { margin: 0; padding: 0; }
#content table { margin-bottom: 2px; margin-left: 5px; padding: 1px; }
#content td, th { font-size: 0.85em; margin: 0; padding: 0; }
#content th { text-align: left; }
#content input { margin: 5px 0; }	
#content input.latlon { text-align: right; }
#content input.text { padding: 0 0 0 3px; width: 172px; }	
#content div.btnGrp { text-align: center; padding-left: 3px; padding-right: 3px; }
#content #deltBtn { margin-left: 20px; margin-right: 20px; }
#content input[type=radio]+label,input[type=checkbox]+label {
	margin-left: 0em; margin-right: 1em;
	} 
#content input[type=radio]:checked+label,input[type=checkbox]:checked+label { 
	background-color: lightgreen; color: black; font-weight: bold; 
	}

/* ---------------------------- */
#content article {
	background: white;
	padding: 10px;
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;  
  box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
  -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
	max-width: 480px;
	overflow: auto;
	}
#about { margin-left: 2px; width: 100%; }
#about p { margin-top: 5px; }
#statistics { margin-top: 5px; width: auto; }
#statBtn { margin: 5px 0 5px 0; }
#statData { display: none; }

/*************************************************/
#report table {
  background: -webkit-gradient( linear, left bottom, left top, color-stop(0,#f5eedb), color-stop(1, #faf8f1) );
  background: -moz-linear-gradient( center bottom, #f5eedb 0%, #faf8f1 100% );  
	}
#report td.locDesc { text-align: left; }
/*************/
div.filters { float: left; border: 1px solid gray; margin-left: 10px;	}
/*************/
div.filters .clickable {
	background-color: #DDD;
	border-left: 1px solid white;
	border-top: 1px solid white;
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
	margin: 5px; padding-left: 5px;
	width: 50%;
	cursor: pointer;
	}

/*************************************************/
/**/
/*           target mobile devices               */  
/**/
/*************************************************/
@media screen and (max-width: 480px) {  
		body { margin: 0; padding: 0; }
    aside, article, nav, section { margin: 0; padding: 0; width: 100%; 	font-size: 1.0em; }

		input[type=button], input[type=submit], button {
			background-image: none; background-color: #eee;
			}
		/* ---------------------------- */
		aside { position: static; max-width:480px; }
		header  {
			position: relative; top: 0px; left: 0px;
			background: #ffcc66; font-size: 1.0em; text-align: center; 
			height:auto;   width: 100%;		
			}
		nav { margin-top:1px; line-height: 1.6; }
		.navHeading { font-size: 1.5em; height: 1.5em; }
		.navContent { font-size: 1.5em; padding-left: 20px; }
		.navSspacer { padding-left: 20px; }
		nav .notPDA { display: none; }
			
		/* ---------------------------- */
    #content { 
    	position: static; width: 100%; font-size: 0.9em; }  
		#content, form { max-width: 100%;	padding:0;  }
		#content table { margin:0; padding:0; }
		
		/* ---------------------------- */
		article#help { position: static; max-width: 100%; }
	}  

body {
	visibility: visible; /* DO NOT REMOVE */
	}