body {              /*  sans-serif Uses the font Arial for windows browsers and Helvetica for OS X browsers    */
         font-family: sans-serif;
         font-size: 100%;    /*   makes base-line text 16 pixels = 1em   */
         background-color: ghostwhite;    /*  also try blanchedalmond for very light brown color background  */
    }

           /*  sets all elements to use box-sizing: border-box   */
    * { 
        -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
            box-sizing: border-box;
    }


 
           /*          makes flexible entire page width up to 960 pixels (60em), 2nd line centers the page in browswers    */

    .page {
         max-width: 60em;
         margin: 0 auto;
    }

  
                  /*   makes green top border and thin black bottom border for these links, with subtle touch top and bottom padding   */

    .nav-main {
         border-top: 5px solid #019443;
         border-bottom: 1px solid gray;
         padding: 0.45em 0 .5em;

    }


                  /*   makes thin black vertical border for these links and displays them all on one line with padding and smaller text size */

    .nav-main li {
         border-left: 1px solid gray;
         display: inline-block;
         padding: .5em 1.4em .5em 1.4em;
         font-size: .875em
    }


             /*   not in use  -  makes no thin black vertical border for the first link 

    .nav-main li:first-child {
         border-left: none;
    }
   */


                  /*  first two line reduces left margin for these links and 3rd line removes bullets */

    .nav-ext  {
         margin-left: 0;
         padding-left: 0;
         list-style: none;
    
    }
                /*  reduces default indent for dd  in a defined list */     


    dd     {
         margin-left: 0.5em;
    }



                /*  puts margin in after each dd with dt pair in a defined list */     


    dd + dt {
         margin-top: 1em;
    }


                  /*  not in use 

    .nav-ext li {
         margin-left: 0;
         padding-left: 0;
         list-style-type: none;
         outline: 2px solid red;
    }

*/

 


     section {
         padding: 5px;

    }



     /*   for displaying on larger screens (not phones)   */

 @media only screen and (min-width: 48em) {


            /*  -  makes flexible main portion of page width up to 1/2 page 480 pixels - desired width divided by containing block width using 480px/960px (960px = 60em) */


     main {
         float: left;       
         width: 50%;      
         padding: 5px;
    }


              /*  -  makes flexible sidebar portion of page width up to 480 pixels - desired width divided by containing block width using 480px/960px  */

    .sidebar {
         float: right;        
         width: 50%;       
         padding: 5px;
    }

}



     footer {
         border-top: 1px solid gray;
         padding: 0.5em;
         clear: left;
   }

                  /*   makes green top border and thin black bottom border for these links, with subtle touch top and bottom padding   */

    .nav-footer {
         border-top: 3px solid #019443;
         border-bottom: 1px solid gray;
         padding: 0.45em 0 .5em;

    }


                  /*   makes thin black vertical border for these links and displays them all on one line with padding and smaller text size */

    .nav-footer li {
         border-left: 1px solid gray;    
         display: inline-block;
         padding: .5em 1.4em .5em 1.4em;
         font-size: .8125em
    }


                 /*   makes text about 30% smaller than default for h1    */

     h1 {
         font-size: 1.25em;
 /*        text-indent: 0.5em;   */
         text-align: center;
    }

     h2 {
         font-size: 1.15em;
         text-indent: 1.5em;      
    }

     h3 {
         font-size: 1em;      
    }


     p {
         margin: 20px;

}
   
                              

    .bordertype {
         padding: 12px;
         border-style: outset;
         border-color: yellow;  
}

 



/*   makes flexble images be flexible   */
    .post-photo,
    .post-photo-full {
         max-width: 100%;
         border: 4px solid brown;
}


/*   this set of clearfix commands clears floats and makes container height equal to taller of the two floated columns   */
    .clearfix:before,
    .clearfix:after  {
         content: " ";
         display: table;
}

    .clearfix:after  {
         clear: both;
}

    .clearfix  {
         *zoom: 1;
}