* {
  box-sizing: border-box;
}

/* Create two unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
 
}

.left {
  width: 20%;
  margin: 25px 0 0 0;
}
/* margin: top, right, bottom, left */
.right {
  width: 80%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1100px) {
  .column {
    width: 100%;
  }
}

/* margin: top, right, bottom, left */
 /* 
***********************
color table:

      black:#000; (or #000000)
      white:#fff; (or #ffffff)
blue:#0000ff
green: #008000
Yellow: #ffc
teal: #699
Orange: #FF9900
red: #FF0000
Light Orange: #FFDBA7


Dark Red: #8B0000 (for LINKS - ALL)
Dark Blue: #355977 (for LINKS - HOVER)


Darker Blue: #000066 
Dark Blue for Left Nav Menu Main 4 Headings: R: 37, G: 71, B: 100 = #254764
Medium Gray (columns background): #B9C9D5
Light Gray (box borders): #C9D7E1
Ultra Light Gray (background color in section-specific bottom nav boxes): #F2F5E2
Green: #ABBA39
Gray Headings (h1, h2): #355977
subhedgray sitemap subheadings: #7F7F7F

SCREENFORMATION.COM blue MENU labels: #85C1E9 (color picker: https://htmlcolorcodes.com/)

Blue for Left Nav Menu Main 4 Headings: R: 37, G: 71, B: 100 = #254764


Link Colors CSS : dark blue and red: 355977 and 8B0000

a:link {color: #8B0000; ---- All unvisited links will be colored dark red ----- }

a:visited {color: #8B0000; -----  All visited links will be colored dark red ----- }

a:active {color: #8B0000; -----  All active links will be colored dark red ----- }

a:hover {color: #355977; }  colored Dark Blue

When the mouse pointer is over the link the link will be Dark Blue


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

body {
      
	  background-color:#FFFFFF;
      margin:0;
      padding:0;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      color:#000;
      height:100%; /* this is the key! */
      }

.copy a:link { color: #8B0000; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; }
.copy a:visited { color: #8B0000; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; }
.copy a:hover { color: #355977; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; } 
.copy a:active { color: #8B0000; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; } 

/*

.text {
     font-size:.95em;
     font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
     color:#000;
      }

.text a:link { color: #8B0000; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; }
.text a:visited { color: #8B0000; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; }
.text a:hover { color: #355977; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; } 
.text a:active { color: #8B0000; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; } 

.body a:link { color: #8B0000; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; }
.body a:visited { color: #8B0000; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; }
.body a:hover { color: #355977; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; } 
.body a:active { color: #8B0000; text-decoration: underline; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; } 
*/

/* unvisited link */
a:link {
      text-decoration:underline;
  color: #8B0000;
}

/* visited link */
a:visited {
      text-decoration:underline;
  color: #8B0000;
}

/* mouse over link */
a:hover {
      text-decoration:underline;
  color: #355977;
}

/* selected link */
a:active {
      text-decoration:underline;
  color: #8B0000;
}


  
/* margin: 8px 8px 3px 0; 
margin or padding - top, right, bottom, left */
.blog_home_copy
 {
      margin: 0 0 0 -20px;
      padding:0;
      }
	  
/* margin: 0 0 0 -20px; 
margin or padding - top, right, bottom, left */
.copysmall {
      margin:0;
      padding:0;
      font-size:.85em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      color:#000;
      }

.blurbright {
      margin:0;
      padding:0;
      font-size:.75em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      color:#000;
      }

.bullet {
      margin:0;
      padding:0;
      font-size:.95em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      color:#000;
      }

.bulletsmall {
      margin: 0px 0px 0px 18px;
      padding:0;
      font-size:.75em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      color:#000;
      }
/* margin: 8px 8px 3px 0; 
margin - top, right, bottom, left */

.bulletsmallblue {
      margin: 0px 0px 0px 18px;
      padding:0;
      font-size:.75em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      
      }

.bulletsmallorange {
      margin: 0px 0px 0px 0px;
      padding:0;
      font-size:.75em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      color:#FF9900;
      }


/* margin: 8px 8px 3px 0; 
margin - top, right, bottom, left */


.copyorange {
      margin:0;
      padding:0;
      font-size:.95em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      color:#FF9900;
      }
	  
	  

.copyred {
      margin:0;
      padding:0;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      color:#FF0000;
      }

.copyorangesmall {
      margin:0;
      padding:0;
      font-size:.75em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      color:#FF9900;
      }


.copygreensmall {
      margin:0;
      padding:0;
      font-size:.75em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      color:#ABBA39;
      }


.topheader {
      font-size:3em;
      line-height:4em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      text-align: center;
      margin: 0 0 0 0;
      }

h1 {
      font-size:1em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      color: #000066;
      margin:0;
      }

.h1black {
      font-size:1em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      color: #000;
      margin:0;
      }


/* margin: 8px 8px 3px 0; 
margin - top, right, bottom, left */

h2 {
      font-size:.95em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      margin:0;
      }

.h2green {
      font-size:.95em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      color: #008000;
      margin:0;
      }

.h3green {
      font-size:.95em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      color: #008000;
      }


.h3blue {
      font-size:.95em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      }


.h3bluesmall {
      font-size:.75em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      }

.blogbluehed {
      font-size:.85em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      }


h3 {
      font-size:.85em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      margin:0;
      }

.sideright {
      font-size:.85em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      margin:0;
      }

/* margin: 8px 8px 3px 0; 
margin - top, right, bottom, left */

.h3orange {
      font-size:.85em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      color: #FF9900;
      margin: 0 0 0 0; 
      position: absolute;
      width: 190px;
     }

.h3orangewide {
      font-size:.85em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      color: #FF9900;
      margin: 0 0 0 0;
     }

.h3orangesmall {
      font-size:.75em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      color: #FF9900;
      margin: 0 0 0 0; 
      position: absolute;
      width: 190px;
     }


#sideleftcolumn {
      background-color:#FFFFFF;
      margin: 0 0 0 0; 
      padding:0;
      width:131px;
      border:none;
      }


.h3sideleft {
      font-size:.85em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      color: #FF9900;
      margin: 0 8px 0 8px; 
      position: absolute;
      width:180px;
     }

.sideleft {
      font-size:.85em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      color: #000;
      margin: 0 8px 0 8px; 
      position: absolute;
      width:180px;
      }

h4 {
      font-size:.95em;
      font-family: "Calibri", sans-serif;
      color:#000;
      background:#fff;
      font-weight: bold;
      margin:0;
      }



.caption { font-size: 0.75em; line-height: 1em; font-weight: bold; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; }

.caption_blurb { text-align: center; font-size: 10px; line-height: 10.5px; font-weight: bold; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; }

.captionblue { font-size: 0.75em; line-height: 1em; font-weight: bold; font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif; }


.minilink { font-size: 11px; line-height: 11.5px; font-family: "Calibri", sans-serif; }

.minilinkbio { 
      margin: 0px 0px 0px 5px; padding:0; 
      font-size: 11px; line-height: 11.5px; font-family: "Calibri", sans-serif; }
/* margin: 8px 8px 3px 0; 
margin - top, right, bottom, left */

      


/* --- other sample tries -------

background-image:url(images/nav-blue-background-gradient-left-740x1528.png); background-repeat:no-repeat;
width: 740px; --------- used 741 (from 740) to correct firefox indented body ---------
height: 90px; 
margin: 0 0 0 0;
*/
/* ------------------------------------------------------------------------------- */

#header {
      float:left
	  background-color:#FFFFFF;
      width:100%; 
      height:70px;
      border:none;
      padding:0;
      margin: 30px 0 0 0;
      text-align: left;
    }
/* margin - top, right, bottom, left */

/* background-image:url("images/top-header.gif"); background-repeat:no-repeat; */

.hed { 
	  float:left
	  font-size:1.5em;
      font-family: "Calibri", Candara, Segoe, "Segoe UI", sans-serif;
      font-weight: bold;
      text-align: left;
     }

/* margin: top, right, bottom, left */


/* begin BOX-SIZING special RESPONSIVE CSS */
*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
 
body { margin: 0; }
 
.columnsContainer { position: relative; margin: .5em; }
 
.leftColumn {  border: 1px solid  #ccc; padding: 1.25em; margin-bottom: .5em; }
 
.rightColumn { border: 1px solid  #ccc; padding: 1.25em; }



@media screen and (min-width: 47.5em ) {
  .leftColumn { margin-right: 19.5em; }
 
  .rightColumn { position: absolute; top: 0; right: 0; width: 18.75em; }
}


/* end BOX-SIZING special RESPONSIVE CSS */



/* BEGIN Div container for nav-left.htm */


#left {
      background-color:#FFFFFF;
      position:absolute;
      left:3px;
      top:35px;
      padding:0;
      width:30%;
      height:100%;
      border:none;
      margin: 0 0 0 8px; 
      }

/* END Div container for nav-left.htm */

/* margin: 0 8px 0 8px; 
margin - top, right, bottom, left */



#left_with_nav /* this div id not yet in use -- for insert "INCLUDE" into stylesheet */
     {
      background-color:#FFFFFF;
      position:absolute;
      left:0;
      top:25px;
      padding:0;
      width:200px;
      height:100%;
      border:none;
      margin: 0 0 0 8px; 
      
	  }

/* margin: 0 8px 0 8px; 
margin - top, right, bottom, left */



.content {
      position: relative;
      top:30px;
      margin-left:220px;	
      margin-right:10px;
      margin-bottom:20px;
      border:none;
      padding:0 10px;
      }

.contentblog {
      position: relative;
      top:80px;
      margin-left:220px;
      margin-right:220px;
      margin-bottom:20px;
      border:none;
      padding:0 10px 0 0;
      }


/*  margin: 8px 8px 3px 0; 
margin - top, right, bottom, left */

#right {
      background-color:#FFFFFF;
      position:absolute;
      right:0;
      top:90px;
      padding:0 10px 0 10px;
      width:200px;
      height:50%;
      border-left:1px solid #FF9900;
      margin: 0 8px 0 8px; 
      }

/*  margin: 8px 8px 3px 0; 
margin - top, right, bottom, left */


#header p {
      background-color:#FFFFFF;
      padding:10px;
      }


#left p {
      background-color:#FFFFFF;
      padding:0 10px;
      }


#right p {
      background-color:#FFFFFF;
      padding:0 10px;
      }

#rightblog p {
      background-color:#FFFFFF;
      padding:0 10px 0 10px;
      }

/*  margin: 8px 8px 3px 0; 
margin - top, right, bottom, left */


p.top {
      margin-top:20px;
      }

#footer { 
clear: both; 
padding-top: 1em; 
text-align: left;
background-color:#FFFFFF;
 }

#clear { 
clear: both; 
padding-top: 1em; 
text-align: left;
background-color:#FFFFFF;
 }

/* MY CSS ADDED STUFF
-------------------------------------------------------------- */

.clearboth {
    clear: both;
}
.clearleft {
    clear: left;
}
.clearright {
    clear: right;
}


.floatnone {
    float: none;
}
.floatleft {
    float: left;
}
.floatright {
    float: right;
}



/* -------------------------------------------------------------------------------    

 ------------------------------------------------------------------------------- */

/* LEFT-NAV EXTRA */
/* margin - top, right, bottom, left */

.navleft1_nolink { color: #fff; font-size: 1em; line-height: 2em; text-decoration: none; font-weight: bold; font-family: "Calibri", sans-serif; }

.navleft1_link { color: #fff; font-size: 1em; line-height: 2em; text-decoration: none; font-weight: bold; font-family: "Calibri", sans-serif; }
.navleft1_link a:link, 
.navleft1_link a:visited { color: #fff; font-size: 1em; line-height: 2em; text-decoration: none; font-weight: bold; font-family: "Calibri", sans-serif; }
.navleft1_link a:hover { color: #fff; font-size: 1em; line-height: 2em; text-decoration: underline; font-weight: bold; font-family: "Calibri", sans-serif; }


.navleft2_link { color: #000; font-size:.95em; line-height: 1em; text-decoration: none; font-weight: bold; font-family: "Calibri", sans-serif; }
.navleft2_link a:link, 
.navleft2_link a:visited { color: #FFF; font-size:.95em; line-height: 1em; text-decoration: none; font-weight: bold; font-family: "Calibri", sans-serif; margin-left: 15px; }
.navleft2_link a:hover { color: #FFF; font-size:.95em; line-height: 1em; text-decoration: underline; font-weight: bold; font-family: "Calibri", sans-serif; }
/* END LEFT-NAV EXTRA */

.navleft2_av_link { color: #000; font-size:.95em; line-height: 1.5em; text-decoration: none; font-weight: bold; font-family: "Calibri", sans-serif; }
.navleft2_av_link a:link, 
.navleft2_av_link a:visited { color: #FFF; font-size:.95em; line-height: 1.5em; text-decoration: none; font-weight: bold; font-family: "Calibri", sans-serif; margin-left: 15px; }
.navleft2_av_link a:hover { color: #FFF; font-size:.95em; line-height: 1.5em; text-decoration: underline; font-weight: bold; font-family: "Calibri", sans-serif; }
/* END LEFT-NAV_aviation EXTRA */

/* BEGIN - ROUNDED BOX 15-em style */

.bottomleftround {background-color: transparent; background: url(bottomleftround.gif) 0 100% no-repeat #e68200; width: 200px; }

/* float: left; width: 15em; margin: 8px 8px 3px 0; 
margin - top, right, bottom, left */

.bottomrightround {background-color: transparent; background: url(bottomrightround.gif) 100% 100% no-repeat}
.topleftround {background: url(topleftround.gif) 0 0 no-repeat}
.toprightround {background: url(toprightround.gif) 100% 0 no-repeat; padding:10px}
.end4box {font-size: 1px; height: 1px}


/* END - ROUNDED BOX style */


/* Image DropShadow style -- use dropshadow easily in text areas */

div.imgleft { 
background-color:#FFFFFF;
float:left; 
background: url('archive/images/dropshadow.gif') no-repeat bottom right !important; 
margin-left:3px !important; margin-right:0 !important; margin-top:8px !important; margin-bottom:0 !important
 }

div.imgleft img { 
display: block; 
position: relative; 
background-color:#FFFFFF;
border: 1px solid #666; 
margin: -2px 4px 4px -2px; 
/* margin - top, bottom, right, left */
padding: 1px;
 }

/* above is image left-float -- below is right--float 


HTML on the page!! say:

<div class="imgright">
<img src="../images/bob-mirror-209x245.JPG" width="209" height="245" alt="Bob Rose-Coutré">
</div>

*/

div.imgright { 
background-color:#FFFFFF;
float:right; 
background: url('archive/images/dropshadow.gif') no-repeat top left !important; 
margin-left:3px !important; margin-right:8px !important; margin-top:0 !important; margin-bottom:0 !important
 }

div.imgright img { 
display: block; 
position: relative; 
background-color:#FFFFFF; 
border: 1px solid #666; 
margin: 4px -2px -2px 4px; 
/* margin - top, bottom, right, left */
padding: 1px;
 }

/* END OF DropShadow Style */



/* STUFF FOR SITE-MAP 

#cont{
margin:auto;
width:800px;
text-align:left;
}

th {
text-align:center;
background-color:#FFFFFF;
color:#00AEEF;
padding:4px;
font-weight:normal;
font-size:12px;
}
td {
font-size:12px;
padding:3px;
text-align:left;
}
tr {background: #fff}
tr:nth-child(odd) {background: #FFFFFF}
#footer {
background-color:#FFFFFF;
padding:10px;
}
.pager,.pager a {
background-color:#FFFFFF;
color:#00AEEF;
padding:3px;
}
.lhead {
background-color:#fff;
padding:3px;
font-weight:bold;
font-size:16px;
}
.lpart {
background-color:#FFFFFF;
padding:0px;
}
.lpage {
font:normal 12px verdana;
}
.lcount {
background-color:#00AEEF;
color:#fff;
padding:2px;
margin:2px;
font:bold 12px verdana;
}
a.aemphasis {
color:#009;
font-weight:bold;
}


 */


      /*  end end  */