/* LAYOUT (Main) */

#container {
  padding: 0;
  margin: 0 auto; 
  max-width: 100%;
}

#headerBkg { background-image: url(../images/Birds360x90Crop.jpg); }

#headerInfoBar, #footerInfoBar {
  letter-spacing: 0.15em;
}

#headerInfoBar #lft, #headerInfoBar #rht, #footerInfoBar #lft, #footerInfoBar #rht  {
  display:initial;
  float:left;
  margin-top: auto;
  margin-bottom: auto;
  text-align:left;
  width:76%;
}

#headerInfoBar #rht, #footerInfoBar #rht {
  text-align:right;
  width:24%;
}

#headerInfoBar #lft {
  text-align:left;
  width:90%;
}

#headerInfoBar #rht {
  text-align:right;
  width:10%;
}



#headerInfoBar img, #footerInfoBar img {
  height:1em;
}

#navBar1, #navBar2 { font-size:0.9em; letter-spacing: 0.15em; }
#navBar2 { font-size: 0.78em; }

#col1 { display:initial; }
#col2 { width:48%; }
#col3 { width:23%; }

/* #col2 h2 #page-heading { font-size:1em; } */
#col2Font { font-size:0.8em; }
.boxFont { font-size:0.70em; line-height:160%; letter-spacing:0.07em;}



/* LAYOUT (Secondary) */


@media screen and (max-width:32em) {
  
  #container { width: 100%; }

  #headerBkg { background-image: url(../images/Birds200x50Crop.jpg);}

  #headerInfoBar #lft, #headerInfoBar #rht, #footerInfoBar #rht {
    font-size:0.78em;
    float:left;
    margin-top: auto;
    margin-bottom: auto;
    text-align:right;
  }

  #headerInfoBar #lft {
    width:83%;
    text-align:left;
  }

  #headerInfoBar #rht {
    width:17%;
  }

  #footerInfoBar #rht {
    width:100%;
  }

  #footerInfoBar #lft {
    display: none;
  }

  #navBar1 {font-size:0.79em; }
  #navBar2 {font-size: 0.6em; }
  h2.boxHeading { font-size:0.65em; }

  #col1 { display:none; }
  #col2 { width:98%; }
  #col3 { width:98%; }
  
  /* #col2 h2 #page-heading { font-size:1em; } *?
  #col2Font { font-size:0.7em; }  /* background-color:red; */
  .boxFont { font-size:0.69em; line-height:159%; }	
}

/* My CSS insert */

#headerShading {
  background:rgba(255,255,255,0.7); /* sets bg transparency to 50% if 0.5 at end */
  <!--[if IE]>
  <style type="text/css">
  background:transparent;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#70990000,endColorstr=#70990000); /* first 2 digits start and end are %transparency*/
  zoom: 1;
  <![endif]-->
}

#headerImgShading {
  width: 70%;
  height:auto;

  background:rgba(255,255,255,0.85); /* sets bg transparency to 50% if 0.5 at end */
  <!--[if IE]>
  <style type="text/css">
  background:transparent;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#70990000,endColorstr=#70990000); /* first 2 digits start and end are %transparency*/
  zoom: 1;
  <![endif]-->
}