/******************************************************************************
Module           :   BusMobile.css
Description      :   Mobile page CSS3 styling
-------------------------------------------------------------------------------
Copyright        :   2015-2021 Alexander Bell
Last Modified    :   12/20/2021
******************************************************************************
TERMS OF USE     :  This module is copyrighted. Keep this notice intact.
******************************************************************************/

html {margin: 0; padding: 0; box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
body { margin: 0;padding: 0; font-family: 'Arial Narrow',Arial,Calibri;  font-size: 16px;}

#divContainerList
{
    width               : 100%;
    margin-bottom       : 4em;
    z-index             : 101;
}
#divControlPanel 
{
    width               : calc(100% - 0.8em);
    margin-left         : 0.3em;
    margin-top          : 0.2em;
    z-index             : 102;
}
table#tblControls
{
    width               : calc(100% - 3.3em);
    margin              : 0;
    padding             : 0;
}
table#tblControls td
{
    width               : 25%;
    min-width           : 2em;
    margin              : 0;
    padding             : 0;
    z-index             : 101;
}
table#tblControls td:first-child { width: auto; min-width: 9em;}

/* BUS ROUTE SELECT*/
select#cmbRoutes
{
   width                    : 100%;
   height                   : 2.2em;
   line-height              : 2.2em;
   font-size                : 1.4em;
   text-indent              : 0.3em;
   text-align               : left;
   vertical-align           : middle;
   box-shadow               : inset 0 0 1px #000099;
   border                   : 2px solid #000099;
   border-radius            : 10px;
   -webkit-appearance       : none;
   -moz-appearance          : none;
   appearance               : none;
   font-weight              : 700;
   color                    : #000099;
   cursor                   : pointer;
   outline                  : none;
}
/*For IE*/
select#cmbRoutes::-ms-expand {display: none;}
select#cmbRoutes option
{
    padding             : 0.2em 0em 0.2em 0.2em;
    font-size           : 1em;
    font-weight         : normal;
}
select#cmbRoutes option[selected]{ font-weight:bold}
select#cmbRoutes option:nth-child(even) { background-color:#fafafa; }
select#cmbRoutes:hover {font-weight: 700; box-shadow: 0 0 5px #000099;}
select#cmbRoutes option[disabled] {display: none;}

/*LABEL FOR SELECT*/
label#lblSelectRoute
{ 
    position    : relative; 
    display     : inline-block; 
    width       : 100%;
}

/*DOWN ARROW*/
label#lblSelectRoute::after {
    content: "\25bc";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    font-size: 1.2em;
    line-height: 1.2em;
    padding-top: 0.8em;
    padding-left: 0.1em;
    text-align: center;
    background: #000099;
    color: #fefefe;
    border-radius: 0 10px 10px 0;
    pointer-events: none;
}
.no-pointer-events label#lblSelectRoute:after { content: none; }

/*BUTTONS*/
.btnType1
{
    width                   : 100%;
    height                  : 2em;
    line-height             : 2em;
    font-size               : 1.5em;
    font-weight             : 900;
    margin                  : 0px;
    padding                 : 0px;
    vertical-align          : middle;
    cursor                  : pointer;
    border                  : none;
    border-radius           : 10px;
    color                   : #fdfdfd;
    background              : #000099;
    z-index                 : 103;
}
.btnType1:hover {box-shadow: 0 0 2px #000099;}

/*TOGGLE BUTTON*/
.divToggleButton input[type=checkbox]{display: none; white-space: nowrap;}
.divToggleButton label
{
    display         : block;
    float           : left;
    cursor          : pointer;
    font-size       : 1em;
}
/*pseudo-toggle button control size*/
.divToggleButton input[type=checkbox] + label 
{
    width           : 100%;
    height          : 3.1em;
    line-height     : 3.1em;
    font-weight     : 600;
}
/* additional styling: rounded border, gradient */
div.divToggleButton input[type=checkbox] + label
{
    vertical-align   : middle;
    text-align       : center;
    border           : none;
    border-radius    : 10px;
    color            : #fdfdfd;
    background       : #000099;
}
/*unchecked style*/
div.divToggleButton input[type=checkbox]:not(:checked) + label::before{
    content         : "OFF";
    color           : #f3aba6;
    opacity         : 0.8;
}
/*checked style*/
div.divToggleButton input[type=checkbox]:checked + label::before{
    content         : "AUTO \2713";
    color           : #fdfdfd;
}

/* DIV DYNAMIC DATA */
.divUpdData {
    visibility      : collapse;
    height          : 0;
    z-index         : -1;
}
.divUpdData .dataVal {height:0;}

/*DIV TICKER/CLOCK*/
.divTicker{
    width           : 100%;
    margin          : 0.2em 0em 0.2em 0.3em;
    padding         : 0;
    border          : 0;
    font-family     : Arial,Calibri; 
}

/*DIGI-CLOCK*/
.lblDigitalClockOn, .lblDigitalClockOff {font-size: 1em; color: #114f1d;}
.lblDigitalClockOff {color: #ff6a00;}

/*TICKER*/
.lblTickerOn, .lblTickerOff{
    font-size       : 1em;
    margin-left     : 0.1em;
    letter-spacing  : 0.15em;
    color           : #9c9c09;
}
.lblTickerOff {color: transparent;}

/*BLINK ON UPD*/
.spanUpdatedNotice 
{
    font-size           : 1em;
    vertical-align      : central;
    text-align          : center;
    font-weight         : 600;
    background-color    : #000099;
    color               : #fafafa;
    opacity             : 0;
    -webkit-animation-name: blinkUpdateNotice;
    -webkit-animation-duration: 2s;
    animation-name: blinkUpdateNotice;
    animation-duration: 2s;
}
@-webkit-keyframes blinkUpdateNotice{ from {opacity: 0;}  to {opacity: 1;} }
@keyframes blinkUpdateNotice{ from {opacity: 0;} to {opacity: 1;}}

/* ROUTE DESTINATION/STOPS */
#divStops {
    width: calc(100% - 1.1em);
    margin-left: 0.5em;
    background-color: #fff;
}

#divSheduleLink {float: right; }
a#lnkRouteDestination {color: #90661b; padding:0.2em; font-size:0.9em; font-weight: 600;}
#divRouteDestination {float:left; font-weight: 600;color: #90661b;}

/* TABLE STOPS */
.tblBusStops { border-collapse:collapse; width: 100%;}

/*LEFT BORDER*/
.tblBusStops tbody tr { border-left: 1px solid #000099; }

/*ODD/EVEN ROWS*/
.tblBusStops tbody tr:nth-child(odd) { background-color:#f5f5f5; }
.tblBusStops tbody tr:nth-child(even) { background-color:#fefefe; }

/*FIRST/LAST STOP*/
.tblBusStops tbody tr:first-child,.tblBusStops tbody tr:last-child {
    background-color: #f0f0f0;
}
.tblBusStops tbody tr:last-child {border-bottom: 2px solid #dedede;}

/*TBL CELLS*/
.tblBusStops tbody tr td {
    padding         : 0.3em 0.1em;
    vertical-align  : middle;
    text-align      : left;
}

/*CIRCLE+NUM*/
.tblBusStops tbody tr td:first-child {
    width: 0.1em;
    text-indent: -0.35em;
    font-size: 0.6em;
    color: #000099;
    letter-spacing: 0.1em;
}

/*STOPS NAME*/
.tblBusStops tbody tr td:nth-child(2) {
    font-size: 0.9em;
    color: #04042c;
    padding: 0.3em 0em 0.3em 0.5em;
}
/*BUS TEXT+ICON*/
.tblBusStops tbody tr td:nth-child(3)
{
    width           : 1em;
    font-size       : 0.8em;
    padding-right   : 0.2em;
    overflow-x      : visible;
    white-space     : nowrap;
    text-align      : right;
    color           : #0d4414;
}

/*ROUTE FILTER*/
#divIcon a {
    display: block;
    padding: 0.5em 0.7em;
    text-decoration: none;
}
#divIcon a.icon {
    background-color: #000099;
    color: #cdcdcd;
    display: block;
    position: absolute;
    font-size: 1.5em;
    right: 0.2em;
    top: 0.2em;
    border-radius: 0.4em;
}
#divIcon a.icon:hover {color: #fafafa;}
#routeFilter {display: none;}


/*BUS b1 PSEUDO-ICON: 1EM, BLUE/YELLOW LIGHT*/
.b1, .b2
{
    display                 : inline-block;
    vertical-align          : middle;
    width                   : 1em;
    height                  : 1em;
    border                  : 0.2em solid;
    border-bottom           : none;
    border-radius           : 0.3em 0.3em 0em 0em;
}
.b1:before, .b2:before
{
    content                 :'';
    display                 : block;
    height                  : 0.5em;
    width                   : 0.7em;  
    margin-left             : -0.03em;
    padding                 : 0;
    margin-top              : 0.2em;
    border-top              : 0.2em solid;
    border-bottom           : 0.2em solid;
}
.b1:after,.b2:after {
    content: '';
    display: block;
    width: 0.3em;
    height: 0.4em;
    margin: -0.4em auto;
}
/*bus icon color*/
.b1, .b1:before { border-color: #000099; }
.b1:after {background : #000099; }
/*optional: headlights color*/
.b1:before { background : Yellow;}


/*BUS b2 PSEUDO-ICON: 1EM, YELLOW/White LIGHT*/
/*bus icon color*/
.b2, .b2:before { border-color: #dd9513;}
.b2:after {background: #dd9513;}

/*optional: headlights color*/
.b2:before {background: Yellow;}