/* extsht1.css */

  h1 {
     font: Georgia, Verdana, sans-serif;
     }

 /*   A few CSS styles enable one ....(Padding 
   is set to 30px so this example page doe not hug the BROWSER window edges). 
 */

     body {
     font: small Verdana, sans-serif;
     color:  #000000;
     padding:  30px;     /* orig padding was 30px  */
     margin:  0;
     }


/*  Applying CSS border and margin to ALL images to separate text (see the #sidebar one below too):   */

    img {
         border: 1px solid #000000;
         float: right;
         margin: 15px;
         }


/* ed's elemental null clearers (left, right, both) */

#nullfloatleft
   {
    float: left;
   }



#nullclearleft
   {
    clear: left;
   }


#nullclearright
   {
    clear: right;
   }


#nullclearboth
   {
    clear: both;
   }



/*  simple navigation display block */

#nav
  {
   float: left;
   /* width: 130px;    was 120px; */
   display: block;
   margin-top:  5px;
   margin-left: 5px;
   margin-right: 40px;
   margin-bottom: 20px;
   padding: 10px 0;
   clear: left;
   }


#nav2
  {
   float: left;
   /* width: 130px;    was 120px; */
   display: block;
   margin-top:  5px;
   margin-left: 5px;
   margin-right: 40px;
   margin-bottom: 20px;
   padding: 10px 0;
   clear: left;
   }

#nav ul
   {
   /* display: inline; */
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: right;
    }

#nav li
   {
   display: inline;  /* this one */
   background: url(header-bullet.gif) no-repeat 100% .4em;
   padding: 0 10px 5px 0;
    font-weight: bold;         /* ed:  added this line  */
    }


#nav2 ul
   {
   /* display: inline; */
   margin: 0;
   padding: 0;
   list-style-type: none;
   text-align: right;
    }

#nav2 li
   {
   display: inline;  /* this one */
   background: url(header-bullet.gif) no-repeat 100% .4em;
   padding: 0 10px 5px 0;
    font-weight: bold;         /* ed:  added this line  */
    }

a{text-decoration:none;}      /* no underline */

/* Then we style paragraphs based  */


    p {
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 90%:
    line-height:  1.4em;
    /*  max-width: 60em; tried Jan 2009 - abandon */
    }

/*   Styles the boxout 

   FLOAT property is set to right

  */


    #sidebar {
    /* is fine to have a background on a sidebar we don't want one now */
    float: right;
    width: 162px;
    margin-left: 30px;
    margin-bottom: 20px;
    /* padding-top value, that is best removed because sidebars work 
    best when aligned with other page content */
    }


 /*    The width of the boxout has thus 

 */


   (USE the below "sidebar img" for all images in the HTML source)

 */


    #sidebar img {
    border: 1px solid #818181;
    margin-bottom: 1em;
    }

 /*    Next we will use a grouped contectu
 */

    #sidebar img, #sidebar p
    {
    margin-left: 10px;
    margin-right: 10px;
    }

 /*   We'll then add some specific 
 */


    #sidebar p {
    font-weight: bold;
    font-size: 80%;
    line-height: 1.2em;
    color: #33333;
    }

 /*     Results of these efforts can be seen now.

    Seeing ...this is all CSS
 */


 /*    We then style the content DIV.

    The margin-right setting is the same 

 */

     #content {
     margin-right: 162px;
     margin-left: 10px;
     border-right: 1px solid #222222;
     }


 /*
     Although this method works well, it's NOT a perfect 

  */