/* ============== */
/* GLOBAL (BEGIN) */
/* ============== */

@font-face{ font-family:REPSCROLL; src:url('./_fonts/rep-scroll.ttf');    }
@font-face{ font-family:NESMARIO;  src:url('./_fonts/SuperMarioNES.ttf'); }
@font-face{ font-family:VCRJP;     src:url('./_fonts/vcr-jp.ttf');        }
@font-face{ font-family:MINECART;  src:url('./_fonts/MinecartLCD.ttf');   }

:root{
    --Red000:             rgba(200,1,1,0.4);
    --RoadGreen:          rgba(1,115,92,0.6);
    --RoadBlue:           #173662;
    --cc_l_blue:          rgba(200,245,255,0.9);
    --CF_NUM_01:          REPSCROLL;
    --CF_NUM_02:          NESMARIO;
    --CF_NUM_03:          VCRJP;
    --CF_NUM_04:          MINECART;
    --BAR_RED:            rgba(100,1,1,1);
    --BAR_GRN:            rgba(1,80,1,1);
    --BAR_DRK:            rgba(50,50,50,0.8);
    --cdiv_bord_blue:     rgba(200,245,255,0.47);

    --grid_bor_col:       rgba(175,175,175,0.85);
    --grid_bor_col_lnk:   rgba(175,175,175,0.85);
    --grid_bg_col:        rgba(1,1,1,0.65);
}

body{
    height:               100vh;
    width:                100vw;
    padding:              0px;
    margin:               0px;
    overflow:             hidden;
    background-image:     url('./images/bg_default.jpg');
    background-repeat:    no-repeat;
    background-size:      cover;
    background-position:  bottom;
    align-items:          center;
    align-content:        center;
    justify-content:      center;
}

#div_main{
    margin:               0px;
    padding:              0px;
    height:               100vh;
    width:                100vw;
    border-width:         0px;
    border-style:         solid;
    border-color:         black;
    align-items:          center;
    align-content:        center;
    justify-content:      center;
}

/* ============ */
/* GLOBAL (END) */
/* ============ */


/* ============================= */
/* CENTRAL LAYOUT SHARED (BEGIN) */
/* ============================= */

/* replaced by div_setup_menu. confirm not used elsewhere before deletion. */
/* #div_menu{
  margin:               0px;
  padding:              0px;
  height:               625px;
  width:                500px;

  align-items:          center;
  align-content:        center;
  justify-content:      center;

  border-width:         5px;
  border-style:         double;
  border-color:         rgba(120,120,120,0.8);
  border-radius:        25px;
  background-color:     rgba(1,1,1,0.9);
} */

#div_setup_menu{
    margin:               0px;
    padding:              0px;
    height:               800px;
    width:                600px;
    align-items:          center;
    align-content:        center;
    justify-content:      center;
    border-width:         5px;
    border-style:         double;
    border-color:         var(--cdiv_bord_blue); /* rgba(120,120,120,0.8); */
    border-radius:        25px;
    background-color:     rgba(1,1,1,0.78);
}

.form_new_game{
    text-align:           center;
    margin:               10px;
    padding:              10px;
    width:                250px;
    border-style:         solid;
    border-radius:        8px;
    border-width:         1px;
    border-color:         rgba(5,100,150,0.95);
    font-family:          monospace;
    font-size:            30px;
    font-weight:          bold;
    color:                palegreen; /*rgba(1,120,255,0.94);*/
    background-color:     rgba(1,1,1,1);
}

.form_new_game:hover{
    border-color:         rgba(35,130,190,0.95);
}

.font_setup_title{
    font-weight:          bold;
    font-size:            50px;
    text-decoration:      none;
    color:                deepskyblue;
    font-family:          NESMARIO;
}

.font_setup_label{
    font-family:          MINECART;
    font-size:            14px;
    color:                lightskyblue;
}

/* replaced by btn_begin_game. confirm not used elsewhere before deletion. */
/* .form_submit{
  width:              250px;
  font-size:          30px;
  border-width:       7px;
  border-color:       silver;
  color:              white;
  background-color:   rgba(1,115,92,0.6);
  border-radius:      15px;
} */

.btn_begin_game{
    margin:               2px;
    padding:              30px;
    width:                350px;

    font-weight:          bold;
    font-size:            25px;
    text-decoration:      none;
    color:                ivory; /*var(--cc_l_blue);*/
    font-family:          NESMARIO;

    border-radius:        10px;
    border-style:         double;
    border-width:         7px;
    border-color:         darkgreen;

    background-color:     rgba(1,1,1,1);
}

.btn_begin_game:hover{
    margin:               4px;
    border-width:         5px;
    border-color:         darkgreen;
}


/* replaced by btn_begin_game. confirm not used elsewhere before deletion. */
/* .form_submit:hover{
    background-color:   rgba(1,115,92,0.6);
    color:              white;
} */


/* replaced by btn_begin_game. confirm not used elsewhere before deletion. */
/* .form_new_game:hover{
  border-style:       inset;
} */

/* =========================== */
/* CENTRAL LAYOUT SHARED (END) */
/* =========================== */



/* =================== */
/* FINAL SCORE (BEGIN) */
/* =================== */

#div_final_score{
    margin:               0px;
    padding:              0px;
    height:               775px;
    width:                675px;
    align-items:          center;
    align-content:        center;
    justify-content:      center;
    border-width:         5px;
    border-style:         double;
    border-color:         var(--cdiv_bord_blue);
    border-radius:        25px;
    background-color:     rgba(1,1,1,0.85);
    font-family:          MINECART;
    font-size:            20px;
    color:                silver;
}

.td_score{
    border-color:       red;
    border-width:       0px;
    border-style:       solid;
    font-size:          20px;
    color:              white;
    font-family:        MINECART;
}

.td_score_col_1{
    width:              80px;
    color:              lightskyblue;
}

.td_score_col_2{
    width:              10px;
    color:              darkgray;
    font-weight:        bold;
}

.td_score_col_3{
    width:              455px;
    color:              palegreen;
}

.font_score_title{
    font-weight:        bold;
    font-size:          50px;
    text-decoration:    none;
    color:              deepskyblue;
    font-family:        NESMARIO;
}

.font_score_divider   { color:dimgray; }

.font_score_daily{
    font-family:        MINECART;
    font-size:          20px;
    color:              white;
}

.font_score_daily_value{
    font-weight:        normal;
    color:              palegreen;
}

#btn_score_continue{
    margin:             5px;
    padding:            25px;
    width:              260px;
    font-weight:        bold;
    font-size:          25px;
    text-decoration:    none;
    color:              deepskyblue;
    font-family:        NESMARIO;
    border-radius:      10px;
    border-style:       solid;
    border-width:       1px;
    border-color:       dimgray;/* var(--cc_l_blue); */
    background-color:   black;
}

#btn_score_continue:hover{
    border-color:       white;
    color:              deepskyblue;
    background-color:   black;/*rgba(1,1,10,0.3);*/
}

/* ================= */

#div_confirm_quit{
  margin:               0px;
  padding:              0px;
  height:               450px;
  width:                750px;
  align-items:          center;
  align-content:        center;
  justify-content:      center;
  border-width:         5px;
  border-style:         double;
  border-color:         var(--cdiv_bord_blue); /*rgba(5,100,150,0.65);*/
  border-radius:        25px;
  background-color:     rgba(1,1,1,0.85);
  font-family:          MINECART;
  font-size:            30px;
  color:                deepskyblue;
}

.btn_quit{
    margin:             25px;
    padding:            20px;
    width:              150px;
    font-weight:        bold;
    font-size:          25px;
    text-decoration:    none;
    color:              white;
    font-family:        MINECART;
    border-radius:      10px;
    border-style:       solid;
    border-width:       1px;
    border-color:       rgba(5,175,250,0.5); /*var(--cc_l_blue);*/
    background-color:   rgba(0,0,0,1);
}

.btn_quit:hover{
    border-width:       1px;
    border-color:       lightskyblue;
    color:              white;
    background-color:   black;/*rgba(1,1,10,0.3);*/
}


#btn_quit_cancel        { background-color:black; }
#btn_quit_cancel:hover  { background-color:black; }


/* ================= */
/* FINAL SCORE (END) */
/* ================= */



/* ==================================== */
/* (B) GAMEPLAY GRID PROPERTIES (BEGIN) */
/* ==================================== */

.GridContainer{
    --top_bottom:           0px;
    margin-top:             top_bottom;
    margin-bottom:          top_bottom;
    width:                  1000px;
    height:                 100vh;
    padding:                0px;
    margin:                 0px;
    display:                grid;
    grid-template-columns:  150px 150px 150px 550px;
    grid-template-rows:     50px  120px 150px 130px 150px 150px auto 50px  ;
    gap:                    8px;
    grid-template-areas:
    " Ticker        Ticker        Ticker        Ticker      Ticker      Ticker      "
    " FinancePanel  FinancePanel  FinancePanel  MainContent MainContent MainContent "
    " StatBarPanel  StatBarPanel  NavBuysell    MainContent MainContent MainContent "
    " LocationPanel LocationPanel LocationPanel MainContent MainContent MainContent "
    " NavA          NavB          NavC          MainContent MainContent MainContent "
    " .             .             NavD          MainContent MainContent MainContent "
    " .             .             .             MainContent MainContent MainContent "
    " Footer        Footer        Footer        Footer      Footer      Footer      ";

    /* dev */
    border-width:       0px;
    border-style:       solid;
    border-color:       red;
}

.GridItem{
    display:            grid;
    overflow:           hidden;

    background-color:   var(--grid_bg_col);

    border-width:       2px;
    border-style:       groove;
    border-color:       black;
    border-radius:      10px;

    font-family:        monospace;
    color:              white;
}

/* use this section only for grid-area assignment */
.Ticker         { grid-area: Ticker;        }
.StatBarPanel   { grid-area: StatBarPanel;  }
.FinancePanel   { grid-area: FinancePanel;  }
.LocationPanel  { grid-area: LocationPanel; }
.MainContent    { grid-area: MainContent;   }
.NavBuysell     { grid-area: NavBuysell;    }
.NavA           { grid-area: NavA;          }
.NavB           { grid-area: NavB;          }
.NavC           { grid-area: NavC;          }
.NavD           { grid-area: NavD;          }
.Footer         { grid-area: Footer;        }


/* additional properties for grid elements*/
.Ticker{
    position:                   relative;
    top:                        -2px;
    border-top-left-radius:     0px;
    border-top-right-radius:    0px;
    align-items:                center;
    border-color:               darkgreen;
    border-width:               3px;
    background-color:           black;
    border-style:               dotted;
}

.StatBarPanel{
    border-color:               dimgray;
}

.NavBuysell{
    border-color:               dimgray;
}

.FinancePanel{
    border-color:               dimgray;
    align-items:                center;
}

.MainContent{
    padding-top:                10px;
    border-color:               ivory;
    border-style:               double;
    border-width:               4px;
}

.Footer{
    border-bottom-left-radius:  0px;
    border-bottom-right-radius: 0px;
    align-items:                center;
    font-weight:                500;
    position:                   relative;
    bottom:                     -2px;
    background-color:           black;
}

#div_footer{
    border-color:               black;
}

/* ===================================*/
/* (B) GAMEPLAY GRID PROPERTIES (END) */
/* ===================================*/




/* ========================= */
/* TICKER PROPERTIES (BEGIN) */
/* ========================= */

#p_ticker{
    animation: marquee 600s linear infinite;
    white-space: nowrap;

    position: relative;
    top: -10px;

    /* dev */
    border-width: 0px;
    border-style: dotted;
    border-color: red;
    font-size: 19px;
    font-family:NESMARIO;
}

@keyframes marquee {
  0%    { transform: translate(0, 0);  }
  100%  { transform: translate(-50%, 0);  }
}

.font_ticker{
    font-size:      20px;
    font-weight:    bold;
}

.font_ticker_red    { color:#f20515; }
.font_ticker_green  { color:#36eb1a; }
.font_ticker_yellow { color:#eef205; }
.font_ticker_drugname { color:yellowgreen; }
.font_ticker_loopmsg  { color:gray; }

.font_ticker_percent{
    font-size:      19px;
    font-weight:    bold;
    color:          gold;
}

/* ======================= */
/* TICKER PROPERTIES (END) */
/* ======================= */



/* ============================= */
/* DATA PANEL PROPERTIES (BEGIN) */
/* ============================= */

.display_infoBox{
    /* border properties */
    border-style:solid;
    border-width:0px;
    border-color:silver;
    background-color:black;
    /*  */

    /*  */
    padding:2px;
    /*width:200px;*/
    /* text properties */
    font-size:15px;
    font-family: monospace;
    font-weight: normal;
}

.display_infoName{ color:white; }

.display_infoValue{ color:silver; }

.display_cad{ font-size:10px;color:gray; }

.display_health{
    background-color:rgb(0,120,0); /* rgb(0,140,0); -> rgb(140,0,0) */
    border-color:gray;
    border-width:1px;
    font-size:13px;
    color:white;
}

.display_reputation{ background-color:rgb(120,120,0); /* rgb(0,140,0); -> rgb(140,0,0) */ }

.display_day{
    font-size:25px;
    font-weight: bold;
}

.display_navBar{
    font-family:monospace;
    font-size:23px;
    font-weight:bold;
    color:white;
    text-decoration:none;
}

.display_navBar_current{
    text-decoration:underline;
}

.display_actionBar{
    font-family:arial;
    font-size:17px;
    font-weight:normal;
    color:silver;
    text-decoration:none;
}

.display_actionBar_current{
    text-decoration:underline;
}

.display_actionBar_BR{
    font-family:monospace;
    font-size:18px;
}


/* replaced by btn_rsb_etc... ensure no longer in use and remove */
.input_submit_action{
    text-align:         center;
    margin:             15px;
    padding:            17px;
    width:              175px;
    border-style:       solid;
    border-radius:      5px;
    border-width:       2px;
    border-color:       silver;
    font-family:        monospace;
    font-size:          17px;
    color:              white;
    background-color:   rgba(1,1,40,0.6);
}

.input_submit_action_city{
    font-size:          17px;
    font-weight:        normal;

}

.input_submit_action_newday{
    border-width:       4px;
    border-radius:      15px;
    border-style:       groove;
    padding:            1px;
    padding-left:       10px;
    padding-bottom:     8px;
    font-weight:        bold;
    font-size:          45px;
    color:              green;
}

.input_submit_action_newday_last{
    color:              red;
}

.input_submit_action:hover{
    border-color:       rgba(250,250,250,0.9);
    background-color:   rgba(0,0,80,0.6);
}

.input_submit_action_disabled,.input_submit_action_disabled:hover{
    border-color:       gray;
    background-color:   black;
    color:              gray;
}

.input_submit_action_newday:hover{

}
/* =========================== */
/* DATA PANEL PROPERTIES (END) */
/* =========================== */



/* ======================= */
/* FINANCE DISPLAY (BEGIN) */
/* ======================= */

#table_finance   { width:  95%; }

.td_finance_name { width: 55px; }
.td_finance_s    { width: 20px; }

.font_finance_currency{
    font-size:      17px;
    font-family:    MINECART;
    font-weight:    normal;
    color:          palegreen;
    letter-spacing: 5%;
}

.font_finance_currency_s{
    font-size:      19px;
    color:          gold;
    font-weight:    bold;
    font-family:    MINECART;
}

.font_finance_name{
    font-size:      17px;
    font-family:    MINECART;
    font-weight:    bold;
    color:          dodgerblue;
    letter-spacing: 5%;
}

.font_finance_red   { color: red;       }
.font_finance_gray  { color: lightgray; }
.font_finance_green { color: palegreen; }

/* ======================= */
/*  FINANCE DISPLAY (END)  */
/* ======================= */



/* ================= */
/* CITY MENU (BEGIN) */
/* ================= */

#div_city_main{
    padding:25px;
    padding-top:20px;
    font-size:20px;
}

.font_city_name{
    font-weight:bold;
    text-decoration: underline;
    font-size:30px;
}

.btn_city{}

/* =============== */
/* CITY MENU (END) */
/* =============== */



/* ================ */
/* BUY/SELL (BEGIN) */
/* ================ */

/* LIST */

#table_buysell { width:100%; }
#table_buysell tr:hover { background-color:rgba(100,100,100,0.4); }

.tr_buysell   { height:40px;margin-bottom:5px;margin-top:5px; }
.tr_buysell_A { background-color:rgba(5,5,5,0.5);          }
.tr_buysell_B { background-color:rgba(15,15,15,0.5);       }

.font_buysell_col_head       { font-family:MINECART; }
.font_buysell_col_head_buy   { font-size:24px;  color:green;  font-weight:bold; }
.font_buysell_col_head_sell  { font-size:24px;  color:red;    font-weight:bold; }
.font_buysell_col_head_item  { font-size:13px;  color:white;  line-height:20px;  margin-bottom:3px;  text-decoration:underline; }
.font_buysell_col_head_units { font-size:18px;  color:gray;   line-height:30px;  margin-top:3px;}

.font_buysell_item_name{font-family:MINECART;}
.font_buysell_units_owned{}

.td_buysell{
    height:40px;
    margin-left:0px;
    margin-right:0px;
    padding:10px;
    font-size:            20px;
    color:                white;
    font-weight:bold;
}

.td_buysell_q           { color:gold; }
.td_buysell_zero        { color:lightslategray; }
.td_buysell_item_price  { width:45%;  }
.td_buysell_item_name   { width:45%;  }
.td_buysell_units_owned { width:auto; }







#TABLE_BuySell_Item{
    width:            90%;
    padding:          0px;
    margin:           0px;
}
.TD_BuySell_BtnCol{
    width:20%;
}
.TD_BuySell_CenterCol{
    padding:          0px;
    margin:           0px;
    width:50%;
}

#TR_BuySell_Header{
    height:           30px;
}

.TD_BuySell_Header{
    padding:          0px;
    margin:           0px;
    height:           30px;
    font-size:        20px;
    font-family:      monospace;
    font-weight:      bold;
    color:            white;
}

.BTN_BuySell_Item{
    padding:          10px;
    margin:           25px;

    width:            200px;
    height:           70px;

    border-radius:    20px;
    border-style:     solid;
    border-width:     1px;
    border-color:     rgba(1,100,1,0.6);

    font-size:        25px;
    font-family:      monospace;
    font-weight:      bold;
    color:            white;
    letter-spacing:   2px;

    background-color:  rgba(255,255,255,0.6);/* rgba(1,1,40,0.6); */
}

.BTN_BuySell_Item_Sell{
    color:black;
    /* color: rgba(250,0,0,1); */
}

.BTN_BuySell_Item_Buy{
    color:black;
    /* color: rgba(0,250,0,0.6); */
}

#P_BuySell_CenterDisplay{
    font-size:        100px;
    padding:          0px;
    margin:           0px;
}

.BTN_BuySell_Item_Disabled{

}

.font_buysell_header{
    font-size:        20px;
    font-family:      monospace;
    color:            silver;
}

.font_buysell_header_itemname{
    font-weight:      bold;
    color:            lightslategray;
}

.font_buysell_header_symbol{
    font-weight:      bold;
    color:            gray;
}

.font_buysell_header_arrow_red{
    font-weight:      bold;
}

.font_buysell_header_arrow_green{
    font-weight:      bold;
}

.font_buysell_body_smalldark{
    font-size:        14px;
    font-family:      monospace;
    color:            gray;
}

.font_buysell_body_currency{
    font-size:        28px;
    font-family:      monospace;
    color:            green;
    margin:           6px;

}

.font_buysell_body_dollarsign{
    font-size:        25px;
    font-weight:      bold;
    color:            silver;
}

.font_buysell_body_quantity{
    font-size:        25px;
    font-family:      monospace;
    color:            var(--cc_l_blue);
}

.font_buysell_body_medium{
    font-size:        20px;
    font-family:      monospace;
    color:            silver;
}

.font_buysell_header_icon{
    font-size: 20px;
}



/* maybe move to shared? */

.button{
    text-align:         center;
    margin:             15px;
    padding:            17px;
    width:              175px;
    border-style:       solid;
    border-radius:      5px;
    border-width:       2px;
    border-color:       silver;
    font-family:        monospace;
    font-size:          17px;
    color:              white;
    background-color:   rgba(1,1,40,0.6);
}

.button:hover{
    border-color:       rgba(250,250,250,0.9);
    background-color:   rgba(0,0,80,0.6);
}

.button_disabled,.button_disabled:hover{
    border-color:       gray;
    background-color:   black;
    color:              gray;
}


/* ============== */
/* BUY/SELL (END) */
/* ============== */



/* ================= */
/* BANK MENU (BEGIN) */
/* ================= */

#div_bank_main{
    padding:                20px;
    text-align:             left;
    font-family:            monospace;
    font-size:              20px;
    line-height:            30px;
}

.font_bank_title{
    font-family:            NESMARIO;
    color:                  gray;
    text-decoration:        none;
    font-weight:            normal;
    margin:                 5px;
    font-size:              18px;
}

.font_bank_currency{
    color:                  green;
    font-weight:            bold;
    font-family:            MINECART;
    font-size:              23px;
}

.font_bank_currency_loan{
    color:                  rgba(250,20,20,1);

}

.font_bank_dollarsign{
    font-size:              23px;
    padding:                5px;
    color:                  silver;
    font-weight:            bold;
    font-family:            MINECART;
}





.btn_bank{
    padding:                7px;
    margin:                 1px;
    width:                  120px;
    height:                 45px;
    background-color:       black;
    color:                  white;
    border-radius:          15px;
    border-color:           gray;
    border-width:           2px;
}

.btn_bank:hover{
    border-color:           black;
    color:                  white;
    border-width:           1px;
}

#btn_bank_confirm{
    height:35px;
    width:100px;
    background-color:black;
    border-color:gold;
    border-style:solid;
    border-width:1px;
    border-radius:5px;
    font-weight:400;
    font-size:15px;
    color:gold;
}

#btn_bank_confirm:hover{ border-width:2px; }

#btn_bank_confirm:disabled{
    border-width:1px;
    border-color:silver;
    color:gray;
}

#s_bankloan_payment{
    width:                  75%;
}

.font_bank_loanamt{
    font-size:   23px;
    font-family: MINECART;
    font-weight: bold;
}

.font_bank_fineprint{
    font-size:15px;
    color:gray;
}

#P_Bank_LoanDisplay{

}

/* =============== */
/* BANK MENU (END) */
/* =============== */



/* ================= */
/* INVENTORY (BEGIN) */
/* ================= */

#table_inv{ width:100%; }

.tr_inv{ padding-bottom:25px; }

.tr_inv:hover{ background-color:rgba(100,100,100,0.4); }

.td_inv{
    font-size:20px;
    color:white;
    font-weight:bold;
    text-align:center;
    align-items:center;
    align-content:center;
    justify-content:center;
}

.td_inv_leftCol   { width:45%; }
.td_inv_rightCol  { width:45%; }
.td_inv_centerCol { width:auto; }

.td_inv_header{
    text-decoration:none;
    text-align:left;
    color:gray;
    margin:0px;
}

.font_inv_headbar{
    color:gold;
    font-size:20px;
    font-weight:bold;
}

/* =============== */
/* INVENTORY (END) */
/* =============== */











.input_submit_city{
    text-align:         center;
    margin:             20px;
    padding:            17px;
    width:              215px;
    border-style:       solid;
    border-radius:      5px;
    border-width:       4px;
    border-color:       silver;
    font-family:        monospace;
    font-size:          25px;
    color:              white;
    font-weight:        bold;
    background-color:   var(--RoadGreen);
}

.input_submit_city:hover{
    border-color:       white;
    color:              white;
}

.input_submit_city_current{
    color:              white;
    border-color:       silver;
    background-color:   var(--RoadBlue);
}

.input_submit_city_current:hover{
    border-color:       gray;
    color:              white;
}

.input_submit_city_home{
    /*color:            gold;*/
}











/* ============== */
/* SHARED (BEGIN) */
/* ============== */

.div_x{
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    align-items:center;
    align-content:center;
    justify-content:center;
    text-align:center;
}
.div_x_inline { display:inline;}
.div_x_Tright { text-align:right; }
.div_x_Tleft  { text-align:left; }

/* #div_headbar       { display:flex; width:100%;}
#div_headbar_left  { width:45%; position:relative; left:-15px;}
#div_headbar_right { width:45%; position:relative; right:-15px;}
#div_headbar_inner_left { position:relative; top:-5px; left:-10px;}

.btn_headbar{
    height:35px;
    width:100px;
    background-color:black;
    border-color:rgba(255,0,0,0.6);
    border-style:solid;
    border-width:1px;
    border-radius:5px;
    font-weight:400;
    font-size:15px;
    color:rgba(255,0,0,0.6);
}

.btn_headbar:hover{
    border-width: 2px;
}

.btn_headbar:disabled{
    color:gray;
    border-color:green;
    border-width:1px;
} */

.font_green  { color:green;  }
.font_blue   { color:blue;   }
.font_orange { color:orange; }
.font_gold   { color:gold;   }
.font_white  { color:white; }
.font_gray   { color:gray; }
.font_silver { color:silver; }
.font_red    { color:red; }
.font_yellow { color:yellow; }

.font_light_blue { color:var(--cc_l_blue); }
.font_lightskyblue  { color:lightskyblue;  }
.font_ivory { color:ivory; }
.font_steelblue{ color:steelblue; }
.font_mediumseagreen { color:mediumseagreen;}
.font_khaki{ color:khaki;}

.font_minecart{font-family:MINECART;}

.font_smalldark{
    font-size:        14px;
    font-family:      monospace;
    color:            gray;
}

/* ============ */
/* SHARED (END) */
/* ============ */


/* .font_header_icon{
    font-size:35px;
}

.font_header_currency{
    font-size:20px;
    font-family: MINECART;
    font-weight: bold;
    color: silver;
}
/* these replaced with _finance. remove eventually */
/*
.font_header_currency_s{
    font-size:23px;
    color:green;
    font-weight:bold;
    font-family: MINECART;
}

 */












/* ====================== */
/* RIGHT SIDE BAR (BEGIN) */
/* ====================== */

.btn_rsb{
    text-align:         center;
    margin:             15px;
    padding:            15px;
    width:              90px;
    border-style:       solid;
    border-radius:      5px;
    border-width:       2px;
    border-color:       rgba(0,0,0,0);
    font-family:        monospace;
    font-size:          45px;
    color:              white;
    background-color:   rgba(0,0,0,0);
}

.btn_rsb_city{
    font-size:          17px;
    font-weight:        normal;

}

.btn_rsb_nextday{
    border-width:       4px;
    border-radius:      15px;
    border-style:       groove;
    padding:            1px;
    padding-left:       10px;
    padding-bottom:     8px;
    font-weight:        bold;
    font-size:          45px;
    color:              green;
}

.btn_rsb_newday_last{
    color:              red;
}

.btn_rsb:hover{
    border-color:       rgba(250,250,250,0.9);
    background-color:   rgba(0,0,0,0);
}

.btn_rsb_disabled,.btn_rsb_disabled:hover{
    border-color:       gray;
    background-color:   black;
    color:              gray;
}

.btn_rsb_newday:hover{

}

/* ====================== */
/*  RIGHT SIDE BAR (END)  */
/* ====================== */








/***********sidebar*************/


.font_sb_large{
    font-size:37px;
    font-weight:bold;
}

.font_sb_medium{
    font-size:25px;
    font-weight:bold;
}

.font_location{
    font-size:18px;
    font-weight:600;
    color:gray;
}

.font_sb_cross{
    font-size:35px;
    font-weight:bold;
}

.font_sb_cbox{
    font-size:25px;

}

.p_sb_bar{
    width:140px;
    height:60px;
    white-space: nowrap;
    padding:0px;
    margin:0px;
}

.div_sb_bar{
    width:135px;
    height:30px;
    border-width:1px;
    border-style:solid;
    border-color:silver;
    text-align: center;
    justify-content:center;
    align-items:center;
    align-content: center;
}

.table_sb_bar{
    width:180px;
    margin:0px;
}

.td_sb_bar{
    margin:0px;
    background-color: rgba(1,1,1,0);
}

.td_sb_bar_container{
    width:135px;
    background-color: rgba(1,1,1,0);
}

.td_sb_bar_icon{
    width:45px;
}





#div_sb_health_main{
    background-color:var(--BAR_RED);
    z-index: 2;
    height:30px;
    width:135px;
}

.div_sb_hbars{
    position:relative;
    height:30px;
    width:135px;
}

#div_healthbar{
    z-index:2;
    top:-30px;
    background-color:var(--BAR_GRN);
    width:100%;
}

#hb1{ z-index:3; }


#div_sb_inv_main{
    background-color:var(--BAR_DRK);
    z-index: 2;
    height:30px;
    width:135px;
}

#div_invbar{
    z-index:2;
    top:-30px;
    background-color:var(--BAR_GRN);
    width:100%;
}

#ib1{ z-index:3; }








.font_header{
    font-size:          25px;
    font-weight:        bold;
}


.A_Footer{
    font-size:          19px;
    text-decoration:    none;
    color:              silver;
    font-family:        NESMARIO;
    font-weight:        bold;
}

.A_Footer_NewGame{
    font-size:          19px;
    text-decoration:    none;
    /*color:              rgba(255,0,0,0.6);*/
    color:              rgba(200,10,10,1);
}
































/* ========================= */
/*  TOP RIGHT PANEL (BEGIN)  */
/* ========================= */

#div_nav_newday{
    /*border-color:       dimgray;*/
    margin:             0px;
    padding:            0px;
}

.div_rtop_inner{
    position:           relative;
    top:                0px;
    height:             calc(100% - 6px);
    width:              calc(100% - 6px);
    border-width:       0px;
    border-color:       darkgreen;
    border-style:       solid;
    border-radius:      8px;
    margin:             0px;
    font-family:        monospace;
    font-size:          30px;
    color:              white;
}

.div_rtop_inner:hover{
    /*background-color:   rgba(10,10,10,0.75);*/
    border-color:       green;
}

#btn_rtop_nextday{}

#btn_rtop_endgame{}

.btn_rtop{
    text-align:         center;
    margin:             0px;
    padding:            0px;
    width:              90px;
    border-style:       solid;
    border-radius:      15px;
    border-width:       2px;
    border-color:       rgba(0,0,0,0);
    font-family:        monospace;
    font-size:          30px;
    color:              white;
    background-color:   rgba(0,0,0,0);
}

.btn_rtop_nextday{
    border-width:       4px;
    border-radius:      15px;
    border-style:       groove;
    padding:            0px;
    padding-left:       0px;
    padding-bottom:     0px;
    font-weight:        bold;
    font-size:          30;
    color:              gold;
}

.btn_rtop_nextday_last{
    color:              red;
}

.btn_rtop:hover{
    /* border-color:       rgba(250,250,250,0.9); */
    color:              gold;
    background-color:   rgba(100,200,100,0.4);
}

.btn_rtop_disabled,.btn_rtop_disabled:hover{
    border-color:       gray;
    background-color:   black;
    color:              gray;
}

.btn_rtop_nextday:hover{

}

/* ======================= */
/*  TOP RIGHT PANEL (END)  */
/* ======================= */

/* dissolve above into below */


/* ============================ */
/* NAV PANEL PROPERTIES (BEGIN) */
/* ============================ */

.DivNavPanel{
    border-color:       lightskyblue;
    background-color:   rgba(20,20,20,0.95);
}

.DivNavPanel:hover{
    border-color:       deepskyblue;
    background-color:   rgba(60,60,60,0.95);
}

.DivNavPanel_Active{
    border-color:       gold;
}

.DivNavPanel_Disabled{
    border-color:       dimgray;
}

.DivNavPanel_Active_Disabled{
    border-color:       lightslategray;
}

.NavPanel_IMG{

}

.font_nav_icon{
    font-size:          60px;
    z-index:            -1;
}

.p_nav_icon{
    font-size:          60px;
    z-index:            -1;
    position:           relative;
    top:                -30px;          /* total_h = font_size + top_gap + bottom_gap = font_size + 2*top_gap */
}


/* LOCATION LIST LINK PANEL */

.font_nav_loc{
    font-size:          32px;
    font-weight:        bold;
}

/* ========================== */
/* NAV PANEL PROPERTIES (END) */
/* ========================== */