body    { margin: 10px; font: 16px Verdana; }
td      { font: 16px Verdana; }
p { margin: 5px; }

/*******************************************************************/
/* links */

/* All other links in RFFlow, must be in this order */
a:link    { color: #0A8CA0; }
a:visited { color: #CC6600; }
a:hover { color: #CC6600; }
a:active  { color: #0A8CA0; }

/* menu class in the top menu of RFFlow, must be in this order */
a.menu:link    { color: black; }
a.menu:visited { color: black; }
a.menu:hover { color: #CC6600; }
a.menu:active  { color: black; }
/* a.menu { text-decoration: none; }  Diana thought underlines were helpful */

/* menuspan class to make the top and bottom menus larger to click on. */
span.menuspan {
  display: inline-block; 
  padding: 5px;
}

/*******************************************************************/

 
.maintitle { 
  font: 26px Verdana; 
  color: #0A8CA0; 
  text-align: center; 
  padding: 10px; 
}

.smalltitle {  
  font: 20px Verdana; 
  color: #0A8CA0; 
  margin-top: 10px;
/*  font-weight: bold; */ 

}
.mycopy { font: 16px Verdana; }   /* Use in bottomofpage.php */

.error {color: #CC0000; background-color: #FFFFCC; }

/*******************************************************************/

/*******************************************************************/

 

/*******************************************************************/

li { margin: 10px 0}

.bigimage { 
          margin-top: 10px;
          margin-bottom: 10px;
          max-width: 100%; 
          height: 100%;
          }

/*******************************************************************/

* {
  box-sizing: border-box;
}

.left {
/*  padding-top: 10px; */
  font: 20px Verdana; 
  color: #0A8CA0;
  vertical-align: text-top; 
/*  font-weight: bold; */
/*  background-color: yellow; */
  padding-top: 10px;
  padding-left: 10px;
  float: left;
  width:20%; /* The width is 20%, by default */
}



.main {
/*  background-color:#f1f1f1; */
  padding: 10px;
  float: left;
/*  max-width: 500px; */
  width:80%; /* The width is 60%, by default */
}


.outerdiv {
          max-width: 900px; 
          margin: auto; 
          }


.bottomrff {
           padding-top: 10px;
           max-width: 900px;
           font-family:verdana; 
           font-size:16px; 
           color:#969696;
           }



.main60 {
/*  background-color:#f1f1f1; */
  padding: 10px;
  float: left;
/*  max-width: 500px; */
  width:60%; /* The width is 60%, by default */
}

/* Use left40 and main60 for samples where text on left, image right. */
/* Text comes first if on a phone. */

.left40 {
/*  padding-top: 10px; */
/*  font: 20px Verdana; */  
/*  color: #0A8CA0; */ 
  vertical-align: text-top; 
/*  font-weight: bold; */
/*  background-color: yellow; */
  padding-top: 10px;
  padding-left: 10px;
  float: left;
  width: 40%; /* The width is 20%, by default */
}


/* Use left40 and main60 for samples where text on left, image right. */
/* Text comes first if on a phone. */

.leftreg {
  width: 20%;
  float: left;
  padding-top: 10px;
  padding-left: 10px;
}


/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .left, .main, .left40, .main60, .leftreg {
    width: 100%; /* The width is 100%, when the viewport is 800px or smaller */
   /* background-color: yellow; */ 
  }
}


/******************************************************************/

input[type="text"]
{
    font-size: 16px;
}


/***************************************************/