/******************************************************************************
 *                                                                            *
 * main.css                                                                   *
 *                                                                            *
 * Description:                                                               *
 *      Basic Template Page Layout.                                           *
 *      These items should render a 100% wide header, a central area with a   *
 *      centered 960px wide content area, and a 100% wide footer.             *
 *                                                                            *
 *      The Header block has a centered 960px wide area available.            *
 *                                                                            *
 * Caveats:                                                                   *
 *      Centering is done by makeing containers the full width of the body    *
 *      (100%), and centering a fixed width (960px) container in the middle   *
 *      with margin:0 auto. text-align is set to center on the outer          *
 *      containers to get around ie not pushing the content container to the  *
 *      middle.                                                               *
 *                                                                            *
 *      Overflow is set to hidden to chop off overhanging divs, and position  *
 *      is set relative to get around ie overflow bugs.                       *
 *                                                                            *
 *      The three major blocks are cleared of floats first (so they stack),   *
 *      and then floated left.                                                *
 *                                                                            *
 *          Some styles may be overriden in configuration, check wrapper      *
 *          templates for details.                                            *
 *                                                                            *
 * Color Key:                                                                 *
 *      #EBB73A: 'Gold' color.                                                *
 *                                                                            *
 ******************************************************************************
 * Version     Date        Author      Comments                               *
 * =======     ==========  ======      =====================================  *
 * v.1.00      (20131114)    ETM       Initial Release                        *
 * v.1.01      (20140708)    ETM       Added block for print only sections.   *
 * v.1.02      (20141010)    ETM       Added custom block for Twitter.        *
 * v.1.03      (20141015)    ETM       Adjusted font-size of Twitter block    *
 *                                     so it doesn't look blocky on load      *
 *                                     (and won't be as large if twitter      *
 *                                     doesn't load.)                         *
 * v.1.04      (20141230)    ETM       Added css for IE radial gradiant (IE   *
 *                                     does not apply gradiants if there is   *
 *                                     no height set.)                        *
 * v.1.05      (20150106)    ETM       Commented out unneeded html and body   *
 *                                     heights. This is handled by now by     *
 *                                     conditional divs in the fullWrapper    *
 *                                     template.                              *
 * v.1.06      (20150108)    ETM       Added html height back it is not       *
 *                                     needed for desktop, but                *
 *                                     Dolphin and Android browser were       *
 *                                     having issues.                         *
 * v.1.07      (20150325)    ETM       Reduced logo div to have search fit.   *
 * v.1.08      (20150825)    ETM       Removed overhanging padding on footer  *
 *                                     container box (it was causing scroll   *
 *                                     bars on page).                         *
 *                                     Added padding to center result boxes   *
 *                                     better.                                *
 * v.1.09      (20150901)    ETM       footerText was still too wide,         *
 *                                     restricted it back to 960px.           *
 * v.1.10      (20151019)    ETM       Added menu seperator class.            *
 * v.1.11      (20160323)    ETM       Added demo block formatting.           *
 * v.1.12      (20170224)    ETM       Layout redesign related to Lucky4Life. *
 * v.1.13      (20170814)    ETM       Added margin to benefits in banner.    *
 * v.1.14      (20180202)    ETM       ADA compliance changes.                *
 *                                     Removed less than IE10 support.        *
 * v.1.15      (20180326)    ETM       Increased z index of logo (clickable   *
 *                                     area was being obscured by another     *
 *                                     element.                               *
 * v.1.16      (20200317)    ETM       Added emergency section.               *
 *****************************************************************************/


/* =============================================================================
                            GENERAL FORMATTING
   ========================================================================== */

/* --------------------- Force full width & height. ----------------------------
    If this block is removed, the layout height/length will be determined by
    the amount of content in the page. That might result in a page which has
    a footer only a few inches from the top of the viewport, or one which
    scrolls beyond the viewport.

    This forces the layout to always be full screen regardless of how much,
    or how little, content is in place. 
*/
html, body, .viewport {  
  height: 100%;
  margin: 0;
  padding:0;
}

/* ------------------- 'Pop Up' items --------------------------------------- */
.hover-item:hover{
    -webkit-transform:scale(1.25); /* Safari and Chrome */ /* Firefox */
    -ms-transform:scale(1.25); /* IE 9 */ /* Opera */
     transform:scale(1.25);
}

/* ------------------ Full width boxes -------------------------------------- */
.full_width_box {
    margin:0;
    padding:0;
    width:auto;    
}

/* =============================================================================
                            LINKS
   ========================================================================== */
/* Underline added back for ADA compliance 
a {text-decoration:none;} 
*/
a img {border:none;}      /* Get rid of blue boxes around links */
a:link {color:BLUE;}      /* unvisited link */
a:visited {color:PURPLE;} /* visited link */
a:hover {color:BLACK;}    /* mouse over link */
a:active {color:BLACK;}   /* selected link */


/* ==============================================================================
                            CONTENT BLOCK
   ========================================================================== */
/* Full page settings (Used for centering the content container) */
div#fullpage {

}

/* Main content container */
div#col1 {
    width:960px;
    min-width:960px;
    margin:0 auto;
    /* If slider rotates beyond bounds turn this off */
    overflow:hidden;
    text-align:left;
}

/* =============================================================================
                            FOOTER BLOCK
   ========================================================================== */
footer {
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    -ms-flex-negative:0;
        flex-shrink:0;
    margin-top:5px;
    min-width:960px;
}

/* =============================================================================
                    ROUND CORNERS AND TRANSPARENCY
   ========================================================================== */

/* ----------------------- Round corners ------------------------------------ */
.round {
    border-radius: 20px;
}
.ie8 .round {
    border-radius: 20px;
    behavior: url(/javascripts/ext/PIE/PIE.htc);
    position: relative;
    z-index:1;
}

/* --------------- Varying Opacities (object and children transparent) ------ */
.opaque60 {
    opacity: 0.6;
}
.opaque70 {
    opacity: 0.7;
}
.opaque90 {
    opacity: 0.9;
}

/* Item transparent white, but not children. (used for transparent boxes 
   with rounded corners)*/
.transBox {
    /* Fallback if not supported (white) */
    background:rgba(255,255,255);           
    /* CSS3 Transparant */
    background:rgba(255,255,255,0.7);       
}

/* =============================================================================
                            BODY
   ========================================================================== */
body {                          
    -webkit-box-align:center;                          
        -ms-flex-align:center;                          
            align-items:center;
    min-width:960px;
    
    /* Image is set elsewhere, just set up the rest */
    background-position:center top;
    background-repeat:no-repeat;
    background-color:black;
}

/* =============================================================================
                        BODY HEADER
   ========================================================================== */

/* ------------------- Header Container ------------------------------------- */
header{
    padding:0;
    margin:0;
    min-width:960px;
    -ms-flex-negative:0;
        flex-shrink:0;
    width:100%;
}

/* -----------------  Demo Notice ------------------------------------------- */
#demoBlock {
    width:960px;
    height:18px;
    font-size:16px;
    font-weight:bold;
    text-align:center;
    color:WHITE;
    background-color:RED;
    border: 1px SOLID WHITE;
    -ms-flex-item-align:center;
        -ms-grid-row-align:center;
        align-self:center;
}

#state_banner_img {
    margin:0;
    padding:0;
}

/* ------------------ State Banner ------------------------------------------ */
div#state_banner {
    height:15px;      
    min-width:960px;                  
    background-color:BLACK;                                
}

/* ----------------- Full page banner behind logo --------------------------- */
div#logo_banner {    
    background-color:#A80000;   /* Default value, may be changed in AdminApp */
    min-width:960px;
    width:100%;
    height:50px;
    margin-top:-65px;
    z-index:-100;
}

/* Logo/Beneficiary block */
div#logo_bene_block {
    height:80px;
    width:960px;
    padding:0;
    margin-top:3px;
    -ms-flex-item-align:center;
        -ms-grid-row-align:center;
        align-self:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}
/* Flexbox container to stretch banner */
div#header_banner_shading_container {
    margin-top:-50px;
    width:960px;
    padding:0;
    -ms-flex-item-align:center;
        -ms-grid-row-align:center;
        align-self:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;    
}
/* Header banner shading */
img#header_banner_shading {
    z-index:-99;
    margin-left:-50px;                      
}
/* Lottery logo in header */
a#header_lottery_logo {
    z-index: 100;
}



/* ------------------ Beneficiaries in header banner ------------------------ */
.bene_format {
    color:WHITE;
    font-family:'Anton';
    padding:0;
    margin:0;                                    
}

div#bene_outer {
    margin:0 0 0 3px;
    padding:0;
    -ms-flex-line-pack:start;
        align-content:flex-start;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
    height:100%;
}

div#bene_right {
    margin:0;
    padding:0;
    -ms-flex-line-pack:center;
        align-content:center;
    -webkit-box-pack:center;
        -ms-flex-pack:center;
            justify-content:center;
    height:100%;
}

div#header_bene_num {
    font-size:53px;
    height:100%;
    /* Centering leaves number a little low, nudge it here */
    margin-top:-3px;
}
div#header_bene_suff {
    font-size:19px;
    line-height:90%;
}
div#header_bene_neb {
    font-size:30px;
    line-height:90%;
}

/* ----------------------- Links and Search Container ----------------------- */
div#head_right_container { 
    margin: 0 0 0 auto;
    -webkit-box-pack:end;
        -ms-flex-pack:end;
            justify-content:flex-end;
    -ms-flex-line-pack:center;
        align-content:center;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
}

/* ------------------------- Header Links ----------------------------------- */
a.header_tag {
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background-color: #C2C2C2;
    display:inline-block;
    margin:0 3px 0 0;
}

img.header_tag {
    position:relative;
    top:6px;
    left:3px;
}

/* ------------------------------ Search ------------------------------------ */
form#form_header_search {
    height:19px;
    margin:0 0 0 5px;                               
    background-color:transparent;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    z-index:1;
}
form#form_header_search input {
       
}

input#input_header_search {
    background-color: #C2C2C2; /* Can be overridden in AdminApp */    
    color:#FFFFFF;
    font-weight:bold;
    height:19px;
    width:106px;
    text-align:center;
    border:none;      
    margin:0;
    padding:0;      
}
input#submit_header_search {
    background-image: url("/homeapp/static/shared/images/headerLinks/magnifying_glass.png");    
    background-size:cover;
    border:none;
    border-left:1px SOLID WHITE;
    margin:0;
    padding:0;
    width:19px;
    height:19px;
    cursor:pointer;
    background-color:#C2C2C2; /* Can be overridden in AdminApp */
    color:transparent;
}

/* ----------------------------- Compulsive Gambling ------------------------ */
div#div_comp_gamb {
    background-color:#750000; /* Can be overridden in AdminApp */
    width:960px;
    height:20px;
    text-align:center;
    -ms-flex-item-align:center;
        -ms-grid-row-align:center;
        align-self:center;
    z-index:-200;
}
span#span_comp_gamb {
    color:WHITE;
    font-size:12px;
    font-family:'NotoSans',Sans-serif;
}

/* ----------------------------- Emergency messageing ------------------------ */
div#emergency {
    background-color:#A80000;
    color:WHITE;
    width:960px;
    padding:0;
    text-align:center;
    -ms-flex-item-align:center;
        -ms-grid-row-align:center;
        align-self:center;
    z-index:-200;
    font-family: 'NotoSans',Verdana, Arial, Helvetica, sans-serif;
    line-height: 12pt;
    margin-bottom: 8px;
    font-size:9pt;
    z-index:0;
}
div#emergency a:visited{color:WHITE;}
div#emergency a{color:WHITE;}

/* ------------------ Navigation Bar ---------------------------------------- */
nav{
    width:960px;
    -ms-flex-item-align:center;
        -ms-grid-row-align:center;
        align-self:center;    
}

/* =============================================================================
                            BODY MAIN
   ========================================================================== */
main{
    width:960px;
    min-width:960px;                     
    -ms-flex-negative:0;                     
        flex-shrink:0;
}

/* =============================================================================
                            FOOTER
   ========================================================================== */

/* Scams banner */
img#scams_banner {
    vertical-align:middle;
}

/* Text formating */
.footerText {
    font-family:'NotoSans',Sans-serif;
    font-size:9px;
    width: 960px;
    text-align:center;
    margin: 0 auto;
    color:#000000; /* Can be overridden in AdminApp */
}
/* Link formating (Mostly repeats footerText, but link formatting clobbers
   it if not specifically set here) */
a.footerLink {
    font-family:'NotoSans',Sans-serif;
    font-size:9px;
    width: 960px;
    text-align:center;
    margin: 0 auto;
    color: #000000; /* Can be overridden in AdminApp */
    text-decoration:underline;
}
/* Footer banner */
.footerImage {
    font-family:'NotoSans',Sans-serif;
    font-size:9;
    width: 100%;
    text-align:center;
    vertical-align:middle;
    color:white;
    padding:0px;
}

/* =============================================================================
                    CONTENT CONTAINER
   ========================================================================== */

/* ------------------- If main title is set in template --------------------- */
h1#pagetitle {
    flex:1;
    margin: 0;
    font-size: 20px;
    font-family: 'NotoSans';
    font-weight: bold;
    padding: 3px 10px;
    color: #EEEEEE; /* Can be overridden in AdminApp */
}

/* ------------------- Yellow Title on the left ----------------------------- */
h2#pagetitle {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
    width:100%;
    margin:0;
    font-size: 20px;
    font-family:'NotoSans';
    font-weight:bold;
    padding: 3px 10px;
    color: #EEEEEE; /* Can be overridden in AdminApp */
}

/* -------------------- Container for page contents ------------------------- */
.contentContainer{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color:WHITE;
    font-family:'NotoSans',Sans-serif;
    width: 100%;
    opacity:0.9;
    padding:10px;
}

/* =============================================================================
                     MAIN MENU (mostly handled in Superfish css)
   ========================================================================== */

ul#main_nav_container {
    -ms-flex-wrap:nowrap;
        flex-wrap:nowrap;
    -ms-flex-pack:distribute;
        justify-content:space-around;
    text-align:center;
}

span.menuSeperator {
    color: #FFD100 /* Can be overriden in AdminApp */
}

.header_tags {
    border-right-color: #EEEEEE; /* Can be overriden in AdminApp */
}

/* =============================================================================
                     TWITTER BLOCK
   ========================================================================== */
#landing_twitter_box {
    min-height:635px;
    min-width:400px; /* Woo box doesn't set it's own width */
    text-align:center;
    margin-top:5px;
    margin-left:5px;
    word-wrap: break-word;
    overflow-wrap: break-word;    
    overflow-y: hidden; /* Hide overflow so it doesn't overlap in print */
}