/* common styles for 2 column newsletteers */

 body { background-color: #c6c6ee;
        color: #333333;
        font: 16px 'Liberation Sans','Nimbus Sans L', Arial, sans-serif;
        margin: 0;
        padding: 0;  
      } 

 * {box-sizing: border-box; }

 /* main container - centered max 800px wide */
 #main_container { width: 100%;
                   max-width: 800px;
                   margin: 0 auto 0 auto;
                   overflow: auto;
                 }

 .page_div { width: 100%;
             margin: 10px auto 10px auto;
             background-color: #f5f5f6;
             border: 1px solid #333333;
           }

 .page_number { height: 25px; 
                line-height: 25px; 
                font-size: 16px;
                border-bottom: 1px solid #333333;
              }
 .page_number .left  { float: left; padding-left: 10px; }
 .page_number .right { float: right; padding-right: 10px; }

/* module wrapper - wrap 2 modules in same wrapper to display side by side at larger widths  */
 .module_wrapper { background-color: #f5f5f6; 
                   overflow: hidden;
                 }

/* half width module (full width on small devices) */ 
 .hw_module { width: auto; 
              max-width: 640px; /* must be less than 640px-8% while displayed as a single column */
              padding-left: 4%;
              padding-right: 4%;
              background-color: #f5f5f6;
              padding-top: 15px;
              padding-bottom: 25px;
            }

/* full width module */ 
 .fw_module { padding-left: 4%;
              padding-right: 4%;
              font-size: 16px;
            }

/* set the horizontal rule for displaying between sections on small screens */
  .hr_break { height: 3px;
              background-color: #e4ebf8;
              border: none;
              margin: 0;
            }

/* class to clear floating divs - uses '::after' pseudo element  */ 
.clearfix::after { content: "";
                   display: table;
                   clear:   both;
                 }

 div.members { font-size: 14px; }
 div.members .left_col  { float: left; width: 50%; }

img.displayBlock {display: block; }

 p.justify { text-align: justify; }
 .alignleft { text-align: left; }
 .alignright { text-align: right; }
 .fontbold { font-weight: bold; }
 .fontitalic { font-style: italic; }
 .font20 { font-size: 20px; }
 .font30 { font-size: 30px; }
 .font40 { font-size: 40px; }
 .font50bold { font-size: 50px; font-weight: bold; }
 hr.hr100 { width: 100px; }
 hr.hr200 { width: 200px; } 
 p.margintop0 { margin-top: 0; }
 p.marginbottom0 { margin-bottom: 0; }
 .margin100 { margin-top: 100px; margin-bottom: 100px; }

 .padding50 { padding-top: 50px; padding-bottom: 50px; }

 /*=============================================================*/
 /* Media Query for screens 640px and above                     */
 /* Display sections side by side                               */
  /*=============================================================*/
  
 @media only print, screen and (min-width: 640px) 
 {
   /* set the width of the module container when displaying side by side and remove the padding from the hw_module */
   .left_module  { width: 50%;
                   float: left;
                   padding-left: 4%;
                   padding-right: 3%;
                 }
   .right_module { width: 50%; 
                   float: left;
                   padding-left: 3%;
                   padding-right: 4%;
                 }

   .left_module40  { width: 40%;
                     float: left;
                     padding-left: 4%;
                     padding-right: 3%;
                   }
   .right_module60 { width: 60%; 
                    float: left;
                     padding-left: 3%;
                     padding-right: 4%;
                   }

   .left_module60  { width: 60%;
                     float: left;
                     padding-left: 4%;
                     padding-right: 3%;
                   }
   .right_module40 { width: 40%; 
                    float: left;
                     padding-left: 3%;
                     padding-right: 4%;
                   }

   .hw_module { padding-left: 0;
                padding-right: 0;
              } 


    /* remove break between divs when displayed side by side */
    .hr_break_remove { display: none; }

 }