html {font-size: 16px; font-family: Arial; font: Arial;}


.arrow-down:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #f00;
}
.arrow-up:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid #f00;
}

.screen-reader-shortcut {position:absolute;top:-1000em;}
.screen-reader-shortcut:focus {left:6px;
							   top:-1000em;
							   height:auto;
							   width:auto;
							   display:block;
							   font-size:14px;
							   font-weight:600;
							   padding:15px 23px 14px;
							   background:#f1f1f1;
							   color:#0073aa;
							   z-index:100000;
							   line-height:normal;
							   text-decoration:none;
							   box-shadow:0 0 2px 2px rgba(0,0,0,.6);
							   outline:2px solid transparent;outline-offset:-2px}

#spinnerIcon {
	position:absolute;
	width:66px;
	height:66px;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%, -50%); /*()50% of image size)*/
	z-index: 1000;
}

/* Main Page */
#HSPcontainer {
			background-color: #F3E2A9;
			position: relative;
			border: double;
			top: 0;
			left: 0;
			width: 950px;
			height: 630px;
			margin: auto;
			display: none;
			}

#HSPHeader {font-size: x-large;
			text-align: center;
			 vertical-align: middle;
			background-color: #81BDEB;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 75px;
			z-index: 10;
			}

#HSPBody {	position: absolute;
			top: 75px;
			height: 555px;
			 width: 100%;
			z-index:0;
			}

#UserNametag {position: absolute; font-size: 16; float: right; top: 10; right:5; z-index:10;}
#OwnerNametag {position: absolute; font-size: 16; float: right; top: 30; right:5; z-index:10;}

#HeaderBar {position: absolute; top: 0px; left: 0px; width:100%; background-color: yellow; text-align:center; font-size: 1.6em;}


/*  */
.modalWait {
    position: absolute; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: transparent; /* Fallback color */
}


.alertWindow {
			background-color: #F3E2A9;
			position: absolute;
			top: 50%;
  			left: 50%;
  			transform: translate(-50%, -50%); /*()50% of image size)*/
    		padding: 25px;
    		border: 15px solid navy;
   			margin: auto;
			width: 200px;
		    border-radius: 10px;  
			z-index:2;
			text-align:center;
			font-weight: bolder;
			font-size: large;
}	
	
.bottombutton {
			position: absolute;
			bottom: 5px;
			height: 30px;
			}
			

			
.saveButton {left: 10px; width: 100px; background-color: red; color: white;}
.cancelButton {left: 120px; width: 100px;}

.dimmed {background-color: lightgray;}

.hide {display: none;}
.show {display: block;}

.hidden{position: absolute; left: -5000px;}

.center {text-align: center;}

.centered {
    /* center of parent */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.centeredX {position: fixed;  left: 50%; transform: translate(-50%,0); }
.centeredY {position: fixed;  top: 50%; transform: translate(0,-50%); }

	
.headrow {font-weight: bolder; font-size: large; background-color: #BBBBBB; padding-top: 5px; padding-bottom: 5px; border-radius: 10px; width: 95%;}

.descriptor {border-style: solid; padding-left: 5px; border-radius: 4px; }

.filltitle {background-color: #dddddd; font-weight: bold;}
.filldata {background-color: #ffffdd; font-weight: bolder;}	

div.content {
    border: #48f solid 3px;
    clear: left;
    padding: 1em;
}

/* Modal Popup Window Stuff Start */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 100; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0px;
    width: 100%; /* Full width */
    height: 455px;/*  Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modalPopup {
    display: block; /* No longer Hidden by default */
    position: absolute; /* Stay in place */
    z-index: 999; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position:absolute;
	background-color: lightblue;
	width:400px;
	height: 100px;
	border:solid;
	border-radius: 10px;
	z-index: 101;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

.modal-contentPopup {
    position:absolute;
	background-color: lightblue;
	border:solid;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	z-index: 1000;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}
/* Modal Popup Stuff End */


.emphasis {
	font-weight: bold;
	color: 6600cc;
}

.button {
    margin: 2px;
    border-radius: 5px;
}

.button:hover { font-weight: bolder;
    background-color: #33CCFF;
    cursor: pointer;
}

cfinput, select, cfselect, label {cursor: pointer;}

.redded { border-color: red;}