div, span, input, label { 
        font-family: arial;   font-size:20px;              }
/* Gives 3,5,10% borders around text inside containers        */
                                                #Margin3p  {
        margin-left:3%; margin-right:3%;                   }
                                                #Margin5p  {
        margin-left:5%;}
                                                #Margin10p {
        margin-left:10%;                                   }
/* RedLight, GreenLight variables. Alarm for weight gain.     */
                                                #BioFGreen {
        color:#004400; width:60%; border-radius: 6px;
        border:10px solid green;
        padding:4px;              background-color:#eeeeee;}       
                                                #BioFCyan  {
        color:#004444; width:60%; border-radius: 6px;
        border:10px solid #00ffff;
        background-color:#eeeeee; padding:4px;             }       
                                                #BioFRed   {
        color:#440000; width:60%; border-radius: 6px;
        border:10px solid orange;
        padding:4px;              background-color:#eeeeee;}       
/* Pop-up ToolTips. Currently scattered all over the place    */
  .tooltip { position: relative; display: inline-block;
              border-bottom: 1px dotted black;
   }
  .tooltip .tooltiptext { visibility: hidden; width: 220px;
     background-color: black; color: #fff; text-align: left;
     border-radius: 6px;  padding: 5px 0;
     /*Position the tooltip*/ position: absolute; z-index: 1;
  }
  .tooltip:hover .tooltiptext {  visibility: visible;
  }
                                                 .tooltip  {
        position: relative;    display: inline-block;
        border-bottom: 1px dotted black; font-size:20px;   }
                                    .tooltip .tooltiptext  {
        visibility: hidden; width: 150px;
        background-color: black;   color: #fff;       
        text-align: center; border-radius: 6px;
        padding: 5px 0;     position: absolute;
        z-index: 1;         top: 20px;  right: 0%;         }

        .tooltip:hover .tooltiptext { visibility: visible; }
/* Named variables for containers with rounded corners etc.    */
                                               #SplashTop  {
        background-color:#ffeeaa; border-radius:15px; 
        border:2px solid black;  text-align: justify; 
        margin-left:3%;  margin-right:3%;  width:94%;      }
/* Container just below sign-on area                           */
                                               #InputCan   {
        border:2px solid black;   border-radius:10px; 
        width:99%;  background-color:#ffffdd;
        margin-left:1%;  font-size:20px;                   }
/* Container for one week history of Projection and user diary */
                                               #SixDayCan  {
        width:90%;
        margin-left:5%;
        border: solid black 1px;
        max-height : 300px;
        background-color:#eeeeee; 
        white-space : nowrap;
        overflow-x : scroll;
        overflow-y : scroll;                               }
/* Container for description of user while he/she signs on.    */
/* InputCan and SixDayCan only appear after password check.    */
                                               #HtGoalCan  {
        border:2px solid black; border-radius:10px;
        width:94%;              margin-left:3%; 
        background-color:#ffffee;                          }
/* <span>...</span> pair to hidden InputCan and SixDayCan.     */
/* changed to inline) by the pageLoad function.                */
                                                 #dataDiv  {
        border : solid black 1px;
        margin : 1%;
        margin-left : 10%;
        width : 80%; white-space: nowrap;
        min-height : 50px;
        max-height : 250px;
        overflow-x : scroll;                               }
                                              .dataItemDiv {
        display : inline;                                  }
                                              #otherItems  {
      display : none; //initially invisible. made visible
            // (changed to inline) by the pageLoad function
                                                           }