/* -----------  Psuedo Table Layout  -------- */
ul.flo.tbl           { border: 0px solid #dfd; }
ul.flo.tbl label     { font-weight: bold; text-align: right; margin-bottom: 3px; margin-right: 5px; }
ul.flo.tbl li        { padding: 5px 3px 1px 3px; margin-right: 15px; display: block; border-bottom: 0px solid #fdd; }
ul.flo.tbl input[type='text'], ul.flo.tbl input[type='password'], ul.flo.tbl select, ul.flo.tbl textarea
                   { margin-top: -3px; }
ul.flo.tbl .button-row { padding: 10px 10%; display: block; }
ul.flo.tbl .button-row input[type='submit'], ul.flo.tbl .button-row input[type='reset'] { margin-left: 10px; }

/* --- define label and textarea sizes, psuedo table columns --- */
ul.flo.tbl .box-info         { margin-left: 75px; display: inline-block; font-size: 12px; }
ul.flo.tbl.lstd2 .box-info   { margin-left: 135px; }
ul.flo.tbl.lstd3 .box-info   { margin-left: 190px; }
ul.flo.tbl .l2 > label,
  .flo.tbl.lstd2 label   { width: 115px; display: inline-block; }  /* l2 = ~20 chars */
ul.flo.tbl .l3 > label,
  .flo.tbl.lstd3 label   { width: 170px; display: inline-block; }  /* l3 = ~30 chars */
ul.flo.tbl .lt1 label    { margin-top: 5px; }                      /* lt1= label-topMargin-#1 */
ul.flo.tbl .c1 input     { width: 55px; }                          /* c1 = ~10 chars */
ul.flo.tbl .c2 input     { width: 115px; }                         /* c2 = ~20 chars */
ul.flo.tbl .c3 input     { width: 170px; }                         /* c3 = ~30 chars */
ul.flo.tbl .c4 input     { width: 230px; }                         /* c4 =fs ~40 chars */
ul.flo.tbl .c7 input     { width: 400px; }                         /* c7 = ~70 chars */
ul.flo.tbl .c7 textarea  { width: 400px; height: 22px; }           /* c7 = ~70 chars, 1 line */
ul.flo.tbl .c25 textarea { width: 400px; height: 54px; }           /* c25 = ~250 chars, 3 lines */
ul.flo.tbl .c50 textarea { width: 600px; height: 102px; }          /* c50 = ~505+ chars, 6 lines */
ul.flo.tbl .cf ul        { width: 400px; }                         /* cf = column-full width */
ul.flo.tbl .cf, ul.flo.tbl .c7, ul.flo.tbl .c25, ul.flo.tbl .c50 { margin-right: 0px; }

@media only screen and (min-width: 788px) and (max-width: 979px) {
  ul.flo.tbl .l3 > label   { width: 140px; display: inline-block; }  /* l3 = ~30 chars */
  ul.flo.tbl .c50 textarea { width: 480px; }
}
@media only screen and (min-width: 610px) and (max-width: 787px) {
  ul.flo.tbl .l3 > label   { width: 140px; display: inline-block; }  /* l3 = ~30 chars */
  ul.flo.tbl .c50 textarea { width: 370px; height: 200px; }
}
/* Mobile and Table (devices and browsers) */
@media only screen and (max-width: 609px) {
  ul.flo.tbl label           { width: auto; text-align: left; }
  ul.flo.tbl .l2 > label     { display: block; }
  ul.flo.tbl .c50 textarea   { width: 100%; height: 200px; }
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 360px) and (max-width: 609px) {
  ul.flo.tbl            { width: 320px; margin-left: 0px; }
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 359px) {
  ul.flo.tbl            { width: 280px; margin-left: 0px; }
}