/*
File    :   Mobile.css
Author  :   Garry Harstad
Created :   May 2018
Purpose :   Centralize CSS styles related to display of a Contrasting Colors report for mobile devices / responsive data flow.
Notes   :   This is included by the HEADER file by default.
Mods    :   
*/


@media (min-width: 801px)
{
    XXbody { margin-top:140px; }
}

@media (max-width: 900px)
{
    .shortlabel, .shortestlabel { min-width:1rem !important; }
    #resultstable .whitebox.withcolorblock { min-width:80px; } /* outline-color:blue;  */
    #resultstable .whitebox .colorblock { height:80px; }
    #resultstable .whitebox.withcolorblock .smalltext { white-space:pre-wrap; word-break:break-all; font-size:11px; }
}


@media (max-width: 800px)
{
    body.headerfixed { padding-top:0; }
    HEADER { position:static; display:block; } /* background:pink;  */
    body { margin-top:0; }
    /*body.headerfixed { margin-top:200px; }*/
    MAIN { } /* background-color:yellow;  */  /*max-width:620px; white-space: overflow-x; */
    
    FOOTER { } /* box-shadow: 0px 10px 10px rgba(100,100,100,0.5);  */
    
    .contrastHomepage { margin-top:0rem; } /*background-color:yellow; */
    
    #mainlogobox { margin: auto auto; display: inline-block; }
    #mainlogobox a img { width:90px !important; }
    #titlesblock { margin:auto auto; }
    
    
    .formentry                  { text-align:left; }
    #contrastform input,
    #contrastform button        { border-radius:0 !important; margin-top:0.15rem; }
    
    #urltotest { width:50%; }

    
    /* RESULTS PAGE 
      -------------- */
    #resultstable th, td { line-height:1rem; }
    #resultstable thead th { font-size:13px; }
    #resultstable td { padding:0 !important; }
    #resultstable .whitebox.withcolorblock { min-width:70px; } /* outline-color:red; */
    #resultstable .whitebox .colorblock { height:70px; }
    #resultstable .whitebox.withcolorblock .smalltext { white-space:pre-wrap; word-break:break-all; font-size:11px; }
    #resultstable .itemnumber { display:none; }
}