/*
File    :   A11y.css
Author  :   Garry Harstad
Created :   April 2018
Purpose :   Centralize Global CSS styles.
Notes   :   This is included by the HEADER file by default.
Mods    :   
*/


/*
text-overflow: clip;
overflow:      hidden;
*/

/* ELEMENT BASED STYLES
   --------------------------------- */
 html { margin:0; padding:0; }
 body { background-color: white; color:#333;
          /*background:linear-gradient(to bottom, #9E4594 0%, #761786 100%); */
          font-family: Verdana, Geneva, Sans-Serif, Arial, Verdana; /* Google fonts: Roboto, Open Sans */
          font-size: 16px;
          margin:0 0 0 0; padding:0;
          width:100%;
          height:100%; }

body.headerfixed { padding-top:140px; }
          
HEADER { z-index: 5;
         position:fixed; left:0; right:0; top:0; background:#FEFEFE; display:block; padding:8px; margin: 0 auto; outline:0px solid red;
         /*height:120px; */
         width:auto; /*100%*/
         /*
         min-width:500px;
         white-space:nowrap;
         */
         box-shadow: 0px 10px 10px rgba(100,100,100,0.5); } /* dark orange rgb(255,140,0) , grey: (100,100,100)*/

FOOTER { z-index: 5;
         font-size:80%;
         height:2rem;
         width:auto;
         /*min-width:680px;*/
         text-align:center;
         /*position:fixed; left:0; right:0; bottom:0; */
         background:#FEFEFE;
         display:block; padding:8px; 
         margin: 2rem auto auto auto; 
         outline:0px solid red;
         border-top:1px solid gray;
         background-color: #EFEFEF;
        }
FOOTER a:link { color:darkblue; }
FOOTER #auxlinks { margin-top:0.5rem; }
FOOTER #contactbar { margin-top:0.35rem; }
FOOTER #contactbar span { margin:auto 0.25rem; }
FOOTER #contactbar img { padding:1px; border-radius:2px; background-color:gray; height:14px; }

H1 { margin:0; font-style:normal; font-size:1.5rem; }
H2 { margin:0; font-style:italic; font-size:1rem; }

MAIN { min-height:20vh; max-width:1200px; position:relative; display:block; padding:1em; margin:auto auto auto auto; outline:0px solid red; } /* min-width:500px; min-height:60vh; */ /* background:ghostwhite;  width:100%; */


abbr[title], acronym[title] { cursor:help; text-decoration: underline solid silver; }

input[type=search], input[type=text], input[type=password], textarea { caret-color: rgb(255, 0, 0) !important; }



a, a:link, a:visited { color:blue; text-decoration:none; border-bottom:1px dotted rgba(0,0,200,0.5); box-shadow:none; } /*text-shadow: 1px 1px 1px rgba(100,100,100,0.15);*/
a:hover, a:active { border-bottom-color:white; color:darkblue; text-shadow: 1px 1px 1px rgba(205,205,205,0.15); /* background-color:powderblue; */
     transition: all 0.2s ease;
     transition-delay: 0.0s; }

a:focus { transition: all 0.25s ease-in; transition-delay: 0.1s; }

a:focus, h1:focus, h1:focus, h2:focus, h3:focus, h4:focus, h5:focus,
button:focus, input:focus
{ outline:1px solid rgba(11,120,218,0.75); box-shadow: 0px 0px 3px 3px rgba(11,120,218,0.5); } /* box-shadow: none|h-offset v-offset blur spread color |inset|initial|inherit */

/* ANIMATED border */
a { position: relative; }

a:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,255,0.5);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.1s ease-in-out 0s;
  transition: all 0.1s ease-in-out 0s;
}

a:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
/* end: ANIMATED border */

/*:focus:disabled { outline:0; box-shadow:none; } */

/* ---------------------------------
    end: ELEMENT BASED STYLES */




/* ID BASED STYLES
   --------------------------------- */
 #skiplinklander { position:absolute; top:130px; left:-9000px; }
 
 #constrainer { max-width:100%; margin: 0 0; }/* min-width:550px; outline:0px solid red;*/

 #mainlogobox       { display:inline-block; margin-left:0.35rem; margin-top:0.25rem; }
 #mainlogobox a     { display:inline-block; border:0; }
 #mainlogobox a img { border:0; width:150px; }
   
 #titlesblock { display:inline-block; vertical-align:top; outline:0px solid green;  margin:0.15rem 0 0.15rem 1rem; }

 
  
 
/* ---------------------------------
   end: ID BASED STYLES */

 
 
 
 
/* ClassName BASED STYLES
   --------------------------------- */
/* SCREENREADER ONLY classes*/
.sr-only { text-indent:-9000px; }
   
.ui-widget-overlay {
  opacity: 0.5;
  filter: Alpha(Opacity=50);
  background-color: black;
}

   
/* Actually a START due to stupid Iphone converting the EYE entity to EMOJIS. */
.eyesymbol::before { content: "\2605"; 
    display:inline-block;
    font-size:130px;
    margin-top:-20px;
    /*line-height:6rem; */
  }  /* ref: https://www.fileformat.info/info/unicode/char/1f441/index.htm */
/*
EYE: \1F441
SUN: \9749
YINYAN: \9775
*/

.skiplink, .skiplink:link, .skiplink:visited  { position:absolute; top:0; left:-9000px; display:inline-block; background-color:black; color:white; padding:0.5em; border:2px solid white; border-radius:0.0em; }
.skiplink:hover, .skiplink:active { color:yellow; }
body a.skiplink:focus { text-indent:0; z-Index:987654321; left:0px; }
   
   
.hiddenobj { display:none; }
.normaltext { font-size: 16px; font-weight:normal; line-height:1.25rem; font-style:normal; }

.infobox { padding:3rem; background-color:#EEE; min-width:400px; max-width:700px; border:2px solid #666; border-radius: 0 1rem 0 1rem; } 
 
.dialogbox { font-size:1rem; z-index:9999999; width:600px; }
.fixed-dialogbox { width:900px; overflow:auto; max-height:300px; font-size:1rem; z-index:9999999; }
 
 
 .infomsgbox { border:2px solid mediumblue; padding:0rem; margin:1rem; background-color:powderblue; color:black; min-width; 600px;  max-width:800px; }
 .warnmsgbox { border:2px solid orange; padding:0rem; margin:1rem; background-color:lightyellow; color:brown; min-width; 600px;  max-width:800px;  }
 
.shortlabel    { display:inline-block; min-width:6.5rem; font-weight:normal; }
.shortestlabel { display:inline-block; min-width:5.5rem; font-weight:normal; }

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

.fleft  { float:left; }
.fright { float:right; }
.fnone  { float:none }
                        
.pad1    { padding:1rem; }

.inblock { display:inline-block; }
.block   { display:block; }



  /* Link with a popup icon in front of it. */
  .poplink { text-decoration:none; padding-left:1rem; background: URL(/image/icon/popup.gif) LEFT no-repeat; }

  /* Link with SPACE for a popup icon in front of it: but no icon. */
  .nopoplink { text-decoration:none; padding-left:1rem; }
/* ---------------------------------
   end: ClassName BASED STYLES */