@charset "utf-8";
/* CSS Document */

body {
   background-color:white;
   font-weight:400;
   font-family:Arial,sans-serif;
}

 a:link{color:#0000cc; text-decoration:none}

 a:visited{color:#0000cc; text-decoration:none}

 a:hover{color:#cc6666; text-decoration:underline}

 a:active{color:#ccffff; text-decoration:underline}
 
.style1 {font-family: "Times New Roman", Times, serif}

/*  GENERAL VALUES  */

#footer {
	clear: both;
	text-align: center;
	color: #33ccff;
	font-size: 0.65em;	
}

#outer {
    width:100%;
    text-align: center;
}

.inner {
    display: inline-block;
}

.center {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

.centerlabels {
	text-align:center;
}

/* HEADER STYLE  */
.header {
	display:inline-block;
}

.vimg {
	vertical-align:middle;
}

span {
	display:inline-block;
	vertical-align:middle;
}

.hdlogo {
	width:10%;
	height: 6%; 
}

/* -------------------------  */
	
#container
{
	width: 100%;
	height: auto; 
	margin-left: auto;
	margin-right:auto;
}

.displaybox {  /* For Locate Records based on Observer etc..  */
	width: 70%;
	height: auto;
	margin-left:auto;
	margin-right:auto;
}

#docbox
{
   height: auto; 
   margin-left:auto;
   margin-right:auto;
   background-color:#FFF;
}

#txtbox
{
   height: auto; 
   margin-left:auto;
   margin-right:auto;
   background-color:#FFF;
} 

#picbox
{
   height: auto; 
   margin-left:auto;
   margin-right:auto;
   text-align: center;
}

.mw80 {
	max-width: 80%;
}

.indent {
	margin-left: 5%;
}

.ml15 {
	margin-left: 15%;
}

.center {
	text-align:center;
}

.mv-left {
	float:left;
	margin-left: 5%;
}

.mv-right {
	float:right;
	margin-right: 5%;
}

 /* MAYBE  GENERAL  */
 
.footer-txt {
	color: #33ccff ;
	font-size: 0.55em;
	text-align:center;
}

.hr80 {
	color: #33ccff;
	width: 80%;
	line-height: 2px;
}

.bold {
	font-weight:800;
}

.one {
	font-size:1.1em;
	font-style:italic;
}

.t12 { /* Red */
	font-size:0.75em;
	font-weight:400;
	color: red;
}

.t16 { /* Red */
	font-size:1.0em;
	font-weight:600;
	color: red;
}

.t24 { /* Red */
	font-size:1.5em;
	font-weight:800;
	color: red;
}

.d0 {  /* Black */
	font-size:1.18vw;
	font-weight:400;
	color:black;	
}

.sdown {  /* Black for index-down page*/
	font-size: .75em;
	font-weight:400;
	color:black;	
}
.dosr {  /* Black for OSR table*/
	font-size: .95em;
	font-weight:400;
	color:black;	
} 

.dosrdesc {  /* Black for OSR table description*/
	font-size: .95em;
	font-weight:400;
	color:black;
	max-width: 400px;	
} 

.d4 { /* Pink */
	font-size:1.18vw;
	font-weight:400;
	color: #F3C;
}

.d1 { /* Red */
	font-size:1.18vw;
	font-weight:400;
	color: red;
}

.d2 { /* Green*/
	font-size:1.18vw;
	font-weight:400;
	color:#32CD32;	
}

.d3 { /* Blue */
	font-size:1.18vw;
	font-weight:400;
	color:#1E90FF;	
}

.d5 {  /* Brown */
	font-size:1.18vw;
	font-weight:400;
	color:#B22222;
}

.d10 { /* Red */
	font-size:1.75em;
	font-weight:800;
	color: red;
}

.disp {  /* Black */
	font-size:1.75em;
	font-weight:700;
	color:black;
}

.d16 {  /* Black */
	font-size:1.0em;
	font-weight:500;
	color:black;
}

.d20 {  /* Black */
		font-weight:700;
		color:black;
}

/* .pghf { /* page header font 
	font-weight:800;
	color: #0000CC;  */
}

.webman {
	font-size: 0.7em;
	font-weight:400:
	text-align:center;
}

.box {
	border: 1px solid black;
}

table.box {
	border: 1px solid black;
}

td.box {
	border: 1px solid black;
	text-align:left;
}

table.cbox {
	border: 1px solid black;
}

td.cbox {
	border: 1px solid black;
	text-align:center;
}

.alert {
    padding: 20px;
    background-color: #f44336;
    color: white;
    opacity: 1;
    transition: opacity 0.6s;
    margin-bottom: 15px;
}


/* INDEX PAGE SPECIFIC  */
.idxinfo {
	font-size: 1.0vw;
	font-weight: 800;
	text-align:center;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	border: 1px solid #999;
}

.idxcols-block {
	width:98%;
	font-size:1.1vw;
	font-weight:400;
	margin-left: auto;
	margin-right:auto;
}

.idxborder {
	border: 1px solid #999;
}

input[type=number] {
   width:50px;
}

select {
	font-size: 0.8vw;
	background-color: #CBCCAB;
}


input:hover[type=submit] {
	background-color:#F66;
	color:#FFF;	
}

/* finalise (f) button is yellow, save (s) button is green and return (r) is red */
.inputf {
	background-color: yellow;
	color: green;
}

.inputs {
	background-color: green;
	color: white;
}

.inputr {
	background-color: red;
	color: black;
}

.inputf:hover[type=button] {
	background-color: green;
	color: yellow;
}

.inputs:hover[type=button] {
	background-color: blue;
	color: white;
}

.inputr:hover[type=button] {
	background-color: red;
	color: #808080;
}

.blink_me {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

input:hover[type=button] {
	background: #093;
	color:#FFF;	
}

/**********SCREEN MANAGEMENT*********/

@media screen and (min-width: 1801px) {  /*  100%  */

	body {
		font-size: 20px;
	}

	#docbox
	{
	   width: 95%;
	}
	
	#txtbox
	{
	   width: 55%;
	}
	
	#picbox
	{
	   width: 89%;
	}
	
	/* CONTROL FONTS  */
	
	.d20 {  /* Black */
		font-size:2.0em;  
	}
	
	.ml15 {
		font-size: 1.5em;
	}
	
	/*HEADER CONFIG  */
	div#hlinks
	{
	   margin-left: 350px;
	   margin-top: -220px;
	   width: 420px; 
	   height: auto;
	   text-align:left;
	}
	
	.deslogo {
		width:20%;
		height: 20%; 
	}
}


@media screen and (min-width: 1601px) and (max-width: 1800px){  /* 89%  */

	body {
		font-size: 18px;
	}

	#docbox
	{
	   width: 90%; 
	}
	
	#txtbox
	{
	   width: 82%; 
	}
	
	#picbox
	{
	   width: 80%;
	}
	
	/* CONTROL FONTS  */
	
	.d20, .pghf {
		font-size: 1.7em;
	}
	
	.ml15 {
		font-size: 1.3em;
	}
	
	.t24 {
		font-size: 1.275em;
	}
	
	/*HEADER CONFIG  */
	div#hlinks
	{
	   margin-left: 298px;
	   margin-top: -187px;
	   width: 357px; 
	   height: auto;
	   text-align:left;
	}
	
	.deslogo {
		width:20%;
		height: 20%; 
	}
}


@media screen and (min-width: 1201px) and (max-width: 1600px){  /*  67%  */

	body {
		font-size: 16px;
	}

	#docbox
	{
	   width: 95%; 
	}
	
	#txtbox
	{
	   width: 100%; 
	}
	
	#picbox
	{
	   width: 84%;
	}
	
	/* CONTROL FONTS  */
	
	.d20, .pghf {
		font-size: 1.4em;
	}
	
	.t24 {
		font-size: 0.892em;
	}
	
	.ml15 {
		font-size: 1.1em;
	}
	
	/*HEADER CONFIG  */
	div#hlinks
	{
	   margin-left: 245px;
	   margin-top: -154px;
	   width: 294px; 
	   height: auto;
	   text-align:left;
	}
	
	.deslogo {
		width:20%;
		height: 20%; 
	}
}


@media screen and (min-width: 901px) and (max-width:1200px) {  /*  50%  */

	body {
		font-size: 13px;
	}

	#docbox
	{
	   width: 90%; 
	}
	
	#txtbox
	{
	   width: 88%; 
	}
	
	#picbox
	{
	   width: 86%;
	}
	
	/* CONTROL FONTS  */
	
	.d20, .pghf {
		font-size: 1.0em;
	}
	
	.t24 {
		font-size: 0.75em;
	}
	
	.ml15 {
		font-size: 1.0em;
	}
	
	/*HEADER CONFIG  */
	div#hlinks
	{
	   margin-left: 175px;
	   margin-top: -110px;
	   width: 210px; 
	   height: auto;
	   text-align:left;
	}
	
	.deslogo {
		width:15%;
		height: 15%; 
	}
}


@media screen and (min-width:729px) and (max-width:900px) {  /* 41%  */

	body {
		font-size: 10px;
	}
	
	#container
	{
	   width: 98%; 
	}
	
	#docbox
	{
	   width: 96%; 
	}
	
	#txtbox
	{
	   width: 94%; 
	}
	
	#picbox
	{
	   width: 80;
	}
	
	/* CONTROL FONTS  */
	
	.d20, .pghf {
		font-size: 0.6em;
	}
	
	.t24 {
		font-size:0.45em;
	}
	
	.ml15 {
		font-size: 0.7em;
	}
	
	/*HEADER CONFIG  */
	div#hlinks
	{
	   margin-left: 105px;
	   margin-top: -66px;
	   width: 126px; 
	   height: auto;
	   text-align:left;
	}
}

@media screen and (max-width:728px) {  /* <40%  */

	body {
		font-size: 9px;
	}
	
	#container
	{
	   width: 99%; 
	}
	
	#docbox
	{
	   width: 97%; 
	   height: auto; 
	}
	
	#txtbox
	{
	   width: 96%; 
	}
	
	#picbox
	{
	   width: 90%;
	}
	
	/* CONTROL FONTS  */
	
	.d20, .pghf {
		font-size: 0.6em;
	}
	
	.t24 {
		font-size: 0.45em;
	}
	
	.ml15 {
		font-size: 0.4em;
	}
	
	/*HEADER CONFIG  */
	div#hlinks
	{
	   margin-left: 105px;
	   margin-top: -66px;
	   width: 126px; 
	   height: auto;
	   text-align:left;
	}
}


@media screen and (min-width: 1536px) and (max-height: 2048px) and (orientation:portrait) {
	div#container
	{
	   width: 420px; 
	   height: auto; 
	   margin-left:auto;
	   margin-right:auto;
	   margin-top:4%;
	}
	
	div#docbox
	{
	   width: 360px; 
	   height: auto; 
	   margin-left:auto;
	   margin-right:auto;
	   background-color:#FFF;
	   border-color:#666;
	   border:thick;
	}
	
	div#txtbox
	{
	   width: 290px; 
	   height: auto; 
	   margin-left:auto;
	   margin-right:auto;
	   background-color:#FFF;
	}
	
	div#picbox
	{
	   width: 294px;
	   height: auto; 
	   margin-left:auto;
	   margin-right:auto;
	   text-align: center;
	}
	
	/* CONTROL FONTS  */
	
	.d20, .pghf {
		font-size: 0.6em;
	}
	
	.t24 {
		font-size: 0.45em;
	}
	
	/*HEADER CONFIG  */
	div#hlinks
	{
	   margin-left: 105px;
	   margin-top: -66px;
	   width: 126px; 
	   height: auto;
	   text-align:left;
	}
	
}


@media screen and (min-width: 2048px) and (min-height: 1536px) and (orientation:landscape) {
	div#container
	{
	   width: 420px; 
	   height: auto; 
	   margin-left:auto;
	   margin-right:auto;
	   margin-top:4%;
	}
	
	div#docbox
	{
	   width: 360px; 
	   height: auto; 
	   margin-left:auto;
	   margin-right:auto;
	   background-color:#FFF;
	   border-color:#666;
	   border:thick;
	}
	
	div#txtbox
	{
	   width: 290px; 
	   height: auto; 
	   margin-left:auto;
	   margin-right:auto;
	   background-color:#FFF;
	}
	
	div#picbox
	{
	   width: 294px;
	   height: auto; 
	   margin-left:auto;
	   margin-right:auto;
	   text-align: center;
	}
	
	/* CONTROL FONTS  */
	
	.d20, .pghf {
		font-size: 0.6em;
	}
	
	.t24 {
		font-size: 0.45em;
	}
	
	/*HEADER CONFIG  */
	div#hlinks
	{
	   margin-left: 105px;
	   margin-top: -66px;
	   width: 126px; 
	   height: auto;
	   text-align:left;
	}
	
}