/* default body properties */

 body { margin: 0;
        font-family: "Liberation Sans", "Nimbus Sans L", Arial, sans-serif;
        font-size: 16px;
        color: #454545;
        background-color: #e4ebf8;
      } 

/*===========================================================*/
/* initial styles for all devices - assumed min width 320px  */
/*===========================================================*/

/* standard banner container - left (hammer), right (reverse hammer OR menu button), center (Swale Auctions) */

 .banner_container          { height: 55px;
                              background-color: #e4ebf8;   /* pale blue */ 
                              border-bottom: 5px double #d6dfef;
                            }

  .banner_container .left   { float: left;
                              width: 50px;
                              height: 55px;
                              background-repeat: no-repeat;
                              background-position: center center;
                            } 

  .banner_container .left_hammer  { background-image: url('graphics/sa_hammer_44x49.gif'); }

  .banner_container .center { background-image: url('graphics/sa_banner_220x33.jpg');
                              background-repeat: no-repeat;
                              background-position: center 10px;
                              height: 19px;
                              overflow: hidden;
                              text-align: center;
                              padding-top: 36px; 
                              color: #000090;
                              font-weight: bold;
                              font-size: 12px;
                            }


  .banner_container .right  { float: right;
                              width: 50px;
                              height: 55px;
                              background-repeat: no-repeat;
                              background-position: center center;
                            } 


  .banner_container .right_hammer { background-image: none; }

/* alternative banner container - smaller 'swale auctions' text with right floated div for 'X' button */

 .alt_banner_container { width: 100%;
                         height: 60px;
                         background-image: url('graphics/sa_banner_300x45.jpg');
                         background-repeat: no-repeat;
                         background-position: center top;
                         margin-bottom: 10px;
                         background-color: #e4ebf8;
                       }

  .alt_banner_container 
           .right   { float: right;
                      width: 15px;
                      height: 15px;
                      margin-right: 4px;
                    }

         .banner_text { padding-top: 40px;
                        text-align: center;
                        font-weight: bold;
                        font-size: 16px;
                        color: #000090;
                      }

/* menu button - used on small screens in place of full menu at top of page */ 

  div.top_menu { display: none; } /* suppress displaying of full width menu */

  .menu_button_div { float: right;
                     width: 48px; 
                     height: 20px;
                     border-radius: 3px; 
                     background-image: url('graphics/sa_tab1.jpg');
                     margin: 2px 2px 0 0;
                     text-align: center;
                   } 

  .menu_button { display: block;
                 padding: 0px 0 0px 0;
                 font-weight: bold;
                 font-size: 15px;
               }  

/* full width menu - initially spread over two lines */
  .menu_container { /*background-color: #000080;*/
                    height: 75px;
                    margin-bottom: 2px;
                  } 

  .menu_container ul { list-style: none;
                       margin: 0;
                       padding: 1px 0 0 0;
                     }

  .menu_container li { font-size: 12px;
                       font-weight: bold; 
                       float: left;
                       box-sizing: border-box; /* to allow percentage based widths that include borders */
                       height: 34px;           /* same height as background-image */
                       /*height: 23px;      total height (23+11) must be same as background-image */
                       /*margin: .28%;*/
                       padding: 11px 0 0 0; 
                       text-align: center;
                       background-image: url('graphics/sa_tab2.jpg');
                       border-style: solid; /* border-width is set on each individual li */
                       border-color: #5354f7;
                     }
  /* set width (in percentages) and borders of each menu item - relies on box-sizing set to border-box */
  li.li_home         { width: 32%; border-width: 0 1px 1px 0; }
  li.li_clearance    { width: 36%; border-width: 0 1px 1px 0; }
  li.li_testimonials { width: 32%; border-width: 0 0 1px 0; }
  li.li_gallery      { width: 32%; border-width: 0 1px 0 0; }
  li.li_guidelines   { width: 36%; border-width: 0 1px 0 0; }
  li.li_contact      { width: 32%; border-width: 0; }

 /* standard content container wrapper - max width 1024 */

  .content_container  { width: 100%; 
                        max-width: 1024px;
                        margin: 0 auto 0 auto; 
                        /*background-color: #e4ebf8;*/
                      }

 /* standard content div */
  .content { max-width: 98%;
             margin: 0 auto 0 auto;
           }

 /* footer container - 3 columns - left and right fixed, center variable */

 .footer_container           { height: 12px;
                               background-color: #e4ebf8;
                             }

 .footer_container .left   { float: left;
                             color: #000080;
                             font-weight: bold;
                             font-size: 9px;
                             padding-left: 8px;
                             display: none;  /* left div initially not displayed */
                           }  

 .footer_container .center { overflow: hidden;
                             text-align: center;
                             color: #000080;
                             font-weight: bold;
                             font-size: 10px;
                           }

 .footer_container .right  { float: right;
                             color: #000080;
                             font-weight: bold;
                             font-size: 9px;
                             text-align: right;
                             padding-right: 8px;
                           } 
 
/*=================================================*/
/* Media Query for devices 380px and above         */
/* Increase size of alternate banner graphic       */
/* change menu from large buttons to inline menu   */ 
/* remove menu button and show inline menu instead */
/*=================================================*/
@media only print, screen and (min-width: 380px)
{
 .alt_banner_container { background-image: url('graphics/sa_banner_350x52.jpg'); }

 .banner_container {border-bottom: none;}

 .banner_container .right_hammer { background-image: url('graphics/sa_hammer_reverse_44x49.gif'); }

 .menu_container { height: 20px;
                   background-image: url('graphics/sa_tab1.jpg');
                   margin-bottom: 0;
                 }

 .menu_container ul  { height: 19px;  /* height including padding = 20px */ 
                       padding: 1px 0 0 0;
                       text-align: center;
                       /*margin-top: 0;*/
                       /*margin-bottom: 0;*/
                     }

 .menu_container li  { font-size: 9px;
                       float: none;
                       display: inline;
                       height: auto; 
                       border-color: #0000bb;
                       padding: 0 2px 0 5px;  /* a 'space' is added between list items by default */
                       background-image: none;
                       margin: 0;
                     }

 li.li_home         { width: auto; border-width: 0 2px 0 0; }
 li.li_clearance    { width: auto; border-width: 0 2px 0 0; }
 li.li_testimonials { width: auto; border-width: 0 2px 0 0; }
 li.li_gallery      { width: auto; border-width: 0 2px 0 0; }
 li.li_guidelines   { width: auto; border-width: 0 2px 0 0; }
 li.li_contact      { width: auto; border-width: 0; }

 div.top_menu { display: block; }
 .menu_button_div { display: none; }
}

/*=================================================*/
/* Media Query for devices 400px and above         */
/* Increase menu font size                         */
/*=================================================*/
@media only print, screen and (min-width: 400px)
{
 .menu_container li  { font-size: 10px; }
}
/*============================================*/
/* Media Query for devices 450px and above    */
/* Increase size of standard banner           */
/* Increase menu font size                    */
/* display the footer left div                */ 
/*============================================*/

@media only screen and (min-width: 450px)
{
   .banner_container         { height: 70px; } 
   .banner_container .left   { height: 70px; 
                               width: 10%;
                             }

   .banner_container .right  { height: 70px; 
                               width: 10%;
                             }

   .banner_container .center { height: 22px;
                               padding-top: 48px; 
                               font-size: 15px;
                             }

   .banner_container .center { background-image: url('graphics/sa_banner_350x52.jpg');
                             }

   .menu_container li  { font-size: 12px; }

  .footer_container .left { display: block; } 

}

/*============================================*/
/* Media Query for devices 768px and above    */
/* Further increase size of banner            */ 
/*============================================*/

@media only screen and (min-width: 768px)
{
   .banner_container         { height: 100px; }
   .banner_container .left   { height: 100px; width: 135px; }
   .banner_container .right  { height: 100px; width: 135px; }
   .banner_container .center { height: 44px; 
                               padding-top: 56px; 
                               font-size: 25px;
                             }

  .banner_container .left_hammer  { background-image: url('graphics/sa_hammer_going_120x86.gif');
                                  }

  .banner_container .right_hammer { background-image: url('graphics/sa_hammer_gone_127x74.gif');
                                    background-position: center 27px;
                                  }

   .banner_container .center { background-image: url('graphics/sa_banner_500x75.jpg');
                               background-position: center top;
                             }
}

/*=================================================*/
/* Media Query for devices 1000px and above        */
/* Add left and right border to content_container  */
/*=================================================*/

@media only screen and (min-width: 1000px)
{
  .content_container  { border-left:  3px double #f4fbff;
                        border-right: 3px double #f4fbff; 
                      }
}

/*=======================*/
/* End of Media Queries  */
/*=======================*/

/* set properties for text links - no bold */
a:link     {color: #ffffff; text-decoration: underline;}
a:visited  {color: #ffffff; text-decoration: underline;}
a:active   {color: #454545 ; text-decoration: none;}
a:hover    {color: #454545 ; text-decoration: none;}

/* set properties for text links - no bold, text yellow */
a.y:link     {color: #ffff00 ; text-decoration: underline;}
a.y:visited  {color: #ffff00 ; text-decoration: underline;}
a.y:active   {color: #ffffff ; text-decoration: none;}
a.y:hover    {color: #ffffff; text-decoration: none;}

/* set properties for nav bar links - blue without underlines */
a.nav1:link     {color: #0000ff ;  text-decoration: none;}
a.nav1:visited  {color: #0000ff ;  text-decoration: none;}
a.nav1:active   {color: #ff0000 ;  text-decoration: none;}
a.nav1:hover    {color: #ff0000 ;  text-decoration: none;}

/* set properties for 'current page' link */
a.current_page:link     {color: #800080 ;  text-decoration: none;}
a.current_page:visited  {color: #800080 ;  text-decoration: none;}
a.current_page:active   {color: #800080 ;  text-decoration: none;}
a.current_page:hover    {color: #800080 ;  text-decoration: none;}


/* set properties for text links - blue with underlines */
a.ub:link     {color: #000080;  text-decoration: underline;}
a.ub:visited  {color: #000080;  text-decoration: underline;}
a.ub:active   {color: #ff0000;  text-decoration: underline;}
a.ub:hover    {color: #ff0000;  text-decoration: underline;}

/* set properties for text links - grey with underlines */
a.greywhiteul:link     {color: #c0c0c0;  text-decoration: underline;}
a.greywhiteul:visited  {color: #c0c0c0;  text-decoration: underline;}
a.greywhiteul:active   {color: #ffffff;  text-decoration: underline;}
a.greywhiteul:hover    {color: #ffffff;  text-decoration: underline;}

/* set properties for Faversham Life link */
a.faversham_life:link     {color: #992b10; text-decoration: underline; font-family: Georgia, serif;}
a.faversham_life:visited  {color: #992b10; text-decoration: underline; font-family: Georgia, serif;}
a.faversham_life:active   {color: #992b10 ; text-decoration: none; font-family: Georgia, serif;}
a.faversham_life:hover    {color: #790b00 ; text-decoration: none; font-family: Georgia, serif;}

.font14px { font-size: 14px; } 
.font13px { font-size: 13px; } 
.font12px { font-size: 12px; } 
.font11px { font-size: 11px; } 

.fontbold { font-weight: bold; } 

p.margin0 { margin: 0;}

p.centered { text-align: center; }