/*
File    :   A11yContrast.css
Author  :   Garry Harstad
Created :   April 2018
Purpose :   Centralize CSS styles related to display of a Contrasting Colors report.
Notes   :   This is included by the HEADER file if indicated to do so.
Mods    :   
*/
#contrastform input[type="search"]::placeholder {
    color: gray;
    opacity: 0.5; 
}

#contrastform { visibility:visible; margin:0.5rem auto; width:100%; outline:0px solid red; 
    /*white-space:nowrap;*/ }
#contrastform input[type="search"]
{    min-width:20rem;
     border:1px solid gray;
     opacity: 0.5;
     text-align:left; 
     border-radius:0.5rem 0.0rem 0.0rem 0.5rem;
     background-color:#EEEEEE;
     /*border-bottom: 2px solid #1976D2;*/
     max-width:80%;
     width:auto;
     /*min-width: 20rem;*/
     font-size: 1.3rem;
     /*line-height: 1rem;*/
     /*height: 1.4rem;*/
     padding: 0.5rem;
     
     /*
     -webkit-transition: all .25s ease;
     -moz-transition:    all .25s ease;
     -ms-transition:     all .25s ease;
     -o-transition:      all .25s ease;
     transition:         all .25s ease;
    */
     /*
     transition: all 0.4s ease-in;
     transition-delay: 0.2s;
     */
    }


#contrastform input[type="search"]:focus::placeholder { color:transparent;  transition: all 0.5s ease-out; }
#contrastform input[type="search"]:focus,
#contrastform input[type="search"]:hover
{
 z-index: 250;
 opacity: 1;
 outline:none;
 color:mediumblue;
 background-color:#EFFFFF;
 /*padding: 10px;*/
 border:1px solid black;
 /*width:50rem;*/
 transition: all 0.4s ease-in;
 transition-delay: 0.4s;
 }


#contrastform .submit { 
    color:#444;
    z-index: 5;
     /*padding:5px;*/
     width: 12rem;
     font-size: 1.3rem;
     /*height:50px;*/
     border:1px solid gray; /* border: 1px solid #0066cc; */
     text-shadow: 1px 1px 1px #AAA;
     background-color: #FFF;
     color: #333;
     
     border-radius: 0 1.0rem 1.0rem 0;
     outline:none;
     padding: 0.5rem 1.0rem 0.5rem 0.5rem;
  }
  
#contrastform .submit:hover,
#contrastform .submit:focus,
#contrastform input[type="search"]:focus ~ .submit {
 border:1px solid black;
 background-color:#333;
 color:#FFF;
 text-shadow: 1px 1px 0px #666;
 transition: all 0.4s ease-in;
 transition-delay: 0.2s;
 }

#contrastform .submit:disabled { 
    border: 1px solid black;
    background-color: silver;
    text-shadow: none;
    color: #AAA;
     transition: all 0.4s ease-in;
     transition-delay: 0.2s;
    font-style: italic; } 

 
#contrastform .submit:active { background-color:red; color:white; text-shadow: none; border: 1px solid gray; transition: all 0.2s ease-in;
 transition-delay: 0.1s; }

 
 
 
 
 
 /* ---------------------------------------
    Contrast results STYLES
 ------------------------------------------- */
.exampleblock { width:auto; padding:5px;  height:88px; outline:1px solid #666; margin: 3px auto 6px auto; max-height:90px; overflow:auto; }
.colorblock   { width:auto; padding:0; height:98px; outline:1px solid #666; margin: 3px auto 6px auto; max-height:90px; overflow:hidden; }
.colorblocknested { position:relative; top:0px; width:auto; padding:0; height:100%; border:0px inset #444; border-radius:0px; margin:auto auto; border-radius: 0%; }
.bigbold   { font-size:200%; font-weight:normal; color:#444; }

.largequote { display:inline-block; margin:auto 5px; font-size:200%; font-weight:normal; color:#444; font-family:Georgia,serif,Times; }

.bigtext   { font-size:150%; font-weight:normal; }
.smalltext { font-size: 12px; }
.whitebox  { display:block; padding:1px 4px; background-color:trasnparent; outline:1px solid #333; text-align:left; margin:5px auto;
             
             /*height:140px;*/ }

.nowrap { white-space:nowrap; }             
             
#resultstable { background:white; border-collapse: collapse; border:1px solid gray; width:100%; margin-bottom:4em; } /* min-width:800px; max-width:1400px;  */ /* min-width:1200px; table-layout:fixed; */

#resultstable th, #resultstable td { padding:5px; border-bottom:1px solid black;  vertical-align: top; font-size:14px; line-height:1.1em; } /* line-height:1.25rem; */
#resultstable thead th { vertical-align:middle; border-right:0px solid gray; } /* border-right:1px solid gray; background-color:white; border-color:white; color:white;  */

#resultstable td { padding:10px 5px; }
#resultstable tbody th { vertical-align:top; padding-top:1em; font-weight:bold; text-align:center; }

#resultstable textarea { margin:5px 0 0 0; width:94%; min-height:80px; overflow:auto; 
                         /* border:1px solid #333; border-radius:0.25rem; */
                         border:none;
                         outline:1px solid #333; 
                         padding: 4px;
                         background-color:alicewhite; color:darkpurple; /*#EEEEFF*/ font-family:Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New; }
                          /*  min-width:280px;  */

#resultstable h4 { font-style:normal; font-size:18px; }

#resultstable .whitebox.withcolorblock { min-width:98px; max-width:110px; background-color:white; }
#resultstable .whitebox .colorblock { height:98px; }
#resultstable .whitebox.withcolorblock .smalltext { white-space:nowrap; }

#resultstable tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

.noresults, .errorresults     { margin-top:2em; border:1px solid #333; border-radius:0 0 1em 1em; min-width:400px; width:70%; max-width:800px; min-height:5vh; font-size:1.15em; vertical-align:middle; padding:0; }
.noresults h4, .errorresults h4  { margin:0 0 0 0; color:white; background-color:darkgreen; padding: 0.5em 0.5em 0.5em 0.5em; width:auto; }

.errorresults { border-color:brown; color:brown; }


/* contrastHomepage specific styles
  ----------------------------------- */
.contrastHomepage { text-align:center; margin: 1rem auto 0 auto;
                    max-width:800px; 
                    /*min-width:400px;*/
                  }
/* For Home Page: alter styles of main logo a little. */
.contrastHomepage #mainlogobox a img { width:auto; }

FOOTER.homepagefooter { background-color:transparent; border:none; }




/* RepGen */
#savetofileform { border:1px solid gray; border-radius:1rem; box-shadow:1px 1px 1px black; padding:0.02rem 2rem 1rem 2rem; background-color:lightyellow; }