body {
        font-family:Verdana, Geneva, Tahoma, sans-serif;
        /* font-family: Arial, sans-serif; */
        /* background: #f4f4f4; */
        /* background:antiquewhite; */
        /* background:midnightblue; */
        margin: 0;
        padding: 4px;
    }
    h1 {
        margin-bottom: 10px;
    }

    #containerold {
        background: white;
        padding: 3px;
        border-radius: 5px;
        /* max-width: 350px; */
        /* 600px; */
        margin: auto;
        /* box-shadow: 0 2px 6px rgba(0,0,0,0.15); */
    }
    #arrivals {
        /* margin-top: 20px; */
         margin-top: 2px;
    }
    .arrival {
        padding: 2px;
        border-bottom: 1px solid #ddd;
    }
    .arrival:last-child {
        border-bottom: none;
    }
    .line {
        font-weight: bold;
        font-size: 1.2em;
    }
    .destination {
        color: #555;
    }
    .time {
        float: right;
        font-weight: bold;
    }


    div.bgbusmap
    {
        background-image: url("../assets/bus-stop-map-sgh.png");
        position: relative;
        margin-left: auto;
        margin-right: auto;

        border-radius: 8px;
         box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

.tight
{
    padding:0px;
    margin-bottom: 0px;
}

.tighttopbot
{
    padding-top:0px;
    padding-bottom: 0px;
    margin-top:0px;
    margin-bottom: 0px;
}

button.toarchway
{
    position: absolute;
    top: 2px;
    left: 200px;
    width: 90px;
    height: 48px;
    border: 3px solid red;
}
    button.fromarchway
    {
        position: absolute;
        top: 95px;
        left: 190px;
        width: 90px;
        height: 48px;
        border: 3px solid red;
    }

button.tocamden
{
    position: absolute;
    top: 170px;
    left: 2px;
    width: 90px;
    height: 48px;
    border: 3px solid red;
}
    button.fromcamden
    {
        position: absolute;
        top: 100px;
        left: 50px;
        width: 90px;
        height: 48px;
        border: 3px solid red;
    }

    .cent
    {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    button,a,link
    {
        cursor:pointer;
    }

    ::placeholder 
    {
  color: red;
    }

    button.btntfl
   {
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 2px;
    margin-right: 2px;
     width: 104px;
    /* border:0px; */
    padding:2px;
    padding-left:0px;
    padding-right:0px;
    line-height: 14px;
    border-radius: 2px;
    border:5px solid silver;
    background-color: midnightblue;
   }

button.btntfl2
   {
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 2px;
    margin-right: 2px;
     width: 220px;

    border:0px;
    padding:2px;
    padding-left:0px;
    padding-right:0px;
    line-height: 14px;
    border-radius: 2px;
    border:1px solid silver;
    /* background-color: midnightblue; */
   }

   span.btntfl1
   {
    font-size:13px;
    line-height: 14px;
    /* background-color: #333; */
   }

span.btntfl2
   {
    font-size:12px;
    line-height: 14px;
    /* background-color: #333; */
   }

    /* span.btntfl2
   {
    font-size:12px;
    line-height: 12px;
    font-family: 'Arial Narrow';
   } */

   /* button list */
   table.tflbtnlist
   {
    width :290px;
      /* width :330px; */
    vertical-align: top;
    /* border:1px solid red; */
    margin-left: auto; 
    margin-right: auto;
    padding-left: 0px;
    padding-right: 0px; 
    /* background-color: lime; */
    /* border-collapse: collapse; */
    /* margin-right: auto; */
    border:1px solid #666;
    border-radius: 5px;
     /* box-shadow: 0 2px 6px rgba(0,0,0,0.15); */
   }

   /* the whole table */
   table.tbtfl
   {
    width :300px;
    /* border:1px so lid #ff4040; */
    vertical-align: top;
    /* border:1px so lid silver; */
    margin-left: auto;
    margin-right: auto;
    padding:0px;
    margin-top: 0px;
        margin-bottom: 0px;
    /* background-color: snow; */
    /* width:350px; */
    border-radius: 5px;
     /* box-shadow: 0 2px 6px rgba(0,0,0,0.15); */
   
    /* background-image: url("../assets/tflmapbg.jpg"); */
   }

   table.tbtfldata
      {
        width :290px;
    vertical-align: top;
    /* border:1px sol id red; */
    margin-left: auto;
    margin-right: auto;
    padding:0px;
    /* background-color: lime; */
    /* width:350px; */
    border-radius: 5px;
    /* border:1px solid red; */
     /* box-shadow: 0 2px 6px rgba(0,0,0,0.15); */
   
   }

   button.btntflcheck
   {
    background-color: pink;
   }

    .vehicleid, .hhmm , .tflmins, .linename, .tick, .platform, .mins
    {
        margin-top :0px;
        margin-bottom: 0px;
        padding-top :0px;
        padding-bottom: 0px;
        /* background-color: lime; */
    }


    /* bus route 214 */    
    .linename
    {
        font-family: monospace;   
        font-size: 13px;
        width:26px;
        font-weight: 500;
        margin-left:2px;
        margin-right:2px;
        text-align: center;
        padding-left:1px;
        padding-right: 1px;
        border:1px solid black;
        background-color: black;
        color: white;
        /* max-width: 15px ; */
    } 


    /* number plate */
    .vehicleid
    {
        /* font-family: monospace;    */
        /* font-family: 'Arial Narrow';; */
        font-weight: 540;
        font-size: 15px;
        margin-left:0px;
        margin-right:0px;
        text-align: center;
        padding-left:0px;
        padding-right:0px;
        border:1px solid black;
        background-color: yellow;
        color: black;
        width: 45px ;
    } 
    
    /* future flag if this route is useful */
    .tick
       {
        font-family: monospace;
        font-size: 11px;
        font-weight: 500;
        margin-left:2px;
        margin-right:2px;
        text-align: center;
        padding-left:3px;
        padding-right: 3px;
        border:1px solid black;
        /* color:white; */
        /* background-color: #e44; */
       }

    .tfldesttxt
    {
        /* background-color: pink; */
        margin:0px;
        padding:0px;
    }

   
    
    /*clock hh:ss  */
    .hhmm  
    {
        font-family: 'Courier New', Courier, monospace;   
        width:42px;
        font-weight: 550;
        font-size: 12px;
        margin-left:4px;
        margin-right:4px;
        text-align: center;
        padding-left:1px;
    padding-right: 1px;
    border:2px solid silver;
    /* background-color: #eee; */
   } 

   /* countdown mins */
    .tflmins
   {
    font-family: monospace;   
    font-weight: 530;
    font-size: 14px;
    margin-left:0px;
    margin-right:0px;
    text-align: center;
    padding-left:1px;
    padding-right: 1px;
    /* border:1px solid black; */
    /* background-color: snow; */
     width:20px;
    /* color: black; */
   } 

   /* the units col  */
  .mins 
   {
    font-family: monospace;   
    font-weight: 530;
    font-size: 11px;
    margin-left:0px;
    margin-right:0px;
    text-align: left;
    padding-left:0px;
    padding-right: 1px;
    /* border:1px solid black; */
    /* background-color: #eee; */
    color: black;
   } 


/* the letter code for the stop*/   
 .platform
   {
   
    font-family: verdana;   
    font-size: 12px;
    font-weight: 530;
    margin-left:0px;
    margin-right:0px;
    text-align: center;
    padding-left:0px;
    padding-right: 0px;
    border:1px solid black;
    color:white;
    background-color: red;
   }    


   div.third
   {
     /* border:1px sol id lime; */
     text-align: center;
    padding-top:0px;
    padding-bottom: 0px;
    margin-top:0px;
    margin-bottom: 0px;
   }

   div.divsurround
   {
      margin-left: auto;
      margin-right: auto;
      margin-bottom: 4px;
      width:300px;
      border:1px solid #666;
      padding-top:2px;
      padding-bottom:2px;
      padding-left: 4px;
       padding-right: 4px;
      border-radius: 5px;
   }

   img.img
   {
    margin-top: 10px;
    margin-bottom:10px;
    border-radius:10px;
    max-width: 300px;
    max-height: 300px;
   }