/********************************************************************************/
/* hhss_head_menu_foot.css                                                      */
/*                                                                              */
/* Contains css for: hhinc_common_banner.php                                    */
/*                   hhinc_common_menu.php                                      */
/*                   hhinc_common_footer.php                                    */
/*                   and for layout of standard web pages                       */
/* Used in all the standard web pages                                           */
/*                                                                              */
/* RWD breakpoints: 420px, 760px, 850px                                         */
/* The printed page is based on breakpoint 420px - 759px                        */
/********************************************************************************/

/*===========================================================*/
/* initial styles for all devices - assumed min width 320px  */
/* small banner heading with menu button on right linked to  */
/* navigation items grouped at bottom                        */
/*===========================================================*/

/* set background-color to same color as the main (right side) div to ensure color extends to the bottom */

 body { background-color: #c6c6ee; }

/* outer info container - full width, initially set with no left margin */ 
 #outer_common_container { margin-left: 0; 
                           margin-top: 5px;
                           background-color: #c6c6ee;
                           min-height: 1px; /* IE7 - otherwise main content appears below left_div instaed of next to */
                         }

  /* top banner container - 3 columns - left and right fixed, centre variable */
  .banner_container  { width: 100%;
                       background-color: #000000;
                       height: 50px;
                       border-bottom: 1px solid #eeeeee; 
                     }

  /* left banner_container - reduced size 'gate' logo */ 
  .banner_container .left  { float: left;
                             width: 45px;
                             height: 50px;
                             background-image:  url('graphics/hh_gate_44x44.gif'); 
                             background-position: center;
                             background-repeat: no-repeat;
                             background-size: 38px;
                             margin-left: 2px;
                           }

  /* don't display left logo when xmas header is shown */
  .banner_container .left_logo { background-image: none;
                               }

  /* right banner_container - menu button on small devices */ 
  .banner_container .right  { float: right;
                              width: 45px;
                              height: 50px;
                              margin-right: 2px;
                            }

  /* link in right div at top of page - for small devices */
  /* displays link to menu or to close window             */ 
  a.right_link { margin-top: 7px;
                 font-weight: bold;
                 text-align: center;
                 border-radius: 4px;
                 background-color: #e1e1e1;                  /* set color in case 'rgba' not understood */
                 background-color: rgba(225, 225, 225, 0.8); /* #e1e1e1 with opacity 0.8 */
                 background: linear-gradient(#777777, #dddddd, #777777);
               }
  /* set initial states for the 'menu' and 'close window' links           */
  /* only one (or none) can be displayed - configured in individual pages */ 
  a.menu_link  { display: block; 
                 font-size: 13px;
                 width: 40px;
                 margin-left: 2px;     
                 padding-top: 9px; 
                 padding-bottom: 9px; 
               }
  a.close_link { display: none; 
                 font-size: 20px;
                 width: 30px;
                 margin-left: 12px;
                 padding-top: 2px; 
                 padding-bottom: 2px;
               } 

  /* center banner_container */
  .banner_container .center  { font-size: 10px; 
                               height: 18px;
                               padding-top: 32px;
                               margin-bottom: 0;
                               color: #ffffff;
                               font-weight: bold;
                               text-align: center;
                               background-repeat: no-repeat;
                             }
  .banner_container #hh_text_banner { display: none; }

  /* small background image for center container (normal or xmas, depending on date) */ 
  .banner_container .normal_banner { background-image: url('graphics/hh_heading_204x18.gif');
                                     background-position: center 4px; /* horizontally centered, 4px down */
                                   }
  .banner_container .xmas_banner   { background-image: url('graphics/hh_xmas_heading_small.gif');
                                     background-position: center top;
                                   } 

  /* dont display the left column (menu) on small devices */
  #left_column { display: none;}

  #common_footer { width: 100%;
                   background-color: #333333;
                   clear: left;
                 }

  /* footer navigation bar (menu items grouped in 79px wide containers */

  .footer_navbar { padding: 1px 2px 0 2px;
                   background-color: #333333;
                   height: auto; 
                   font-size: 12px; 
                   font-weight: normal;
                   overflow: hidden;
                   width: 316px; 
                   margin-left: auto; 
                   margin-right: auto;
                 }

  .footer_navbar ul { list-style-type: none;  
                      margin: 0; 
                      overflow: hidden;
                      padding-left: 0;
                      padding-right: 0; 
                      padding-bottom: 8px;
                    }

  .footer_navbar li a { float: left; 
                        height: 27px;     /* total height (27+7) must be same as background-image */
                        padding: 7px 1px 0 1px; 
                        width: 75px;
                        color: #ffffff; 
                        text-align: center;
                        background-image: url('graphics/hh_nav_bg_2x34.gif');
                        line-height: 1;
                        overflow: hidden;
                        margin: 1px;
                      }

  .footer_navbar a:link     {color: #ffffff; text-decoration: none; font-weight: normal; }
  .footer_navbar a:visited  {color: #ffffff; text-decoration: none; font-weight: normal; }
  .footer_navbar a:active   {color: #ff0000; text-decoration: none; font-weight: normal; }
  .footer_navbar a:hover    {color: #ff0000; text-decoration: none; font-weight: normal; }

  /* set color of the link to the current page */
  .footer_navbar .current_page  { color: #808080 !important; }

  /* don't display the '|' which is displayed on wider screens between menu items */
  li span.bar {display: none;}

  /* 'back to top' link in footer navbar */
  div#back_to_top { font-size: 15px; 
                    margin: 0 1px 2px 1px; 
                    background: linear-gradient(#4f4f4f, #353535, #4f4f4f);
                    text-align: center; 
                    line-height: 22px;
                  } 
  #back_to_top a { display: block; 
                   outline: 0; /* remove dotted line around background-image - use :focus instead */
                 }

    #back_to_top a:focus  {color: #ff0000;}

  /* 'Twitter' and 'YouTube' link in footer navbar */
  div#social_media_link { font-size: 15px; 
                          margin: 0 1px 0 1px; 
                          text-align: center;
                          background-color: #333333;
                        } 

  /* don't display the left credit on smaller devices */ 
  .left_credit { display: none;
               }

  /* right-floated container for the right side credit */
  .right_credit { float: right;
                  padding-right: 5px;
                  height: 20px;
                  line-height: 20px;
                  color: #000080;
                  font-weight: bold;
                  font-size: 11px;
                }
  /* don't display xhtml logo on smaller devices */
  .xhtml_logo_div { display: none; }

/*=====================================================*/
/* Media Query for devices 395px and above             */
/* Increase footer menu div to hold 5 items per line   */ 
/*=====================================================*/
@media only screen and (min-width: 395px)
{
  .footer_navbar { width: 395px; 
                 }
}


/*=====================================================*/
/* Media Query for devices 420px and above             */
/* Medium banner heading with larger gate logo on left */ 
/* Printed pages also use this media query             */
/*=====================================================*/
@media only print, screen and (min-width: 420px)
{
  .banner_container,
  .banner_container .left,
  .banner_container .right { height: 59px; }

  /* increase size of gate logo on small devices in left div */
  .banner_container .left { background-size: auto;
                            width: 60px;
                          }

  /* re-instate left logo (only applicable at xmas when logo has been suppressed on narrow screens) */
  .banner_container .left_logo { background-image:  url('graphics/hh_gate_44x44.gif'); ;
                               }

  .banner_container .right { width: 60px;
                           }

  .banner_container .center { padding-top: 37px;
                              font-size: 13px;
                              height: 22px;
                            }

  .banner_container .normal_banner { background-image: url('graphics/hh_heading_300x22.gif');
                                     background-position: center 10px; /* horizontally centered, 10px down */
                                   }

  a.menu_link { margin-left: 12px; }     
  a.close_link { margin-left: 22px; }     

} /* end rules for width 420px and above */ 

/*=====================================================*/
/* Media Query for devices 474px and above             */
/* Increase footer menu div to hold 6 items per line   */ 
/*=====================================================*/
@media only screen and (min-width: 474px)
{
  .footer_navbar { width: 474px; 
                 }
}

/*==================================================*/
/* Media Query for devices 760px and above          */
/* Full size banner heading with HH logo on right   */
/* Left menu column added.                          */
/* Bottom menu now one line.                        */  
/*==================================================*/
@media only screen and (min-width: 760px)
{
  /* set background-image (112px wide) for the left column to ensure color extends to the bottom of column */ 
  body { background-image:url('graphics/hh_menu_bg.gif'); background-repeat:repeat-y; }

  /* outer info container - add left margin to hold the left floated menu column */ 
  #outer_common_container { margin-left: 112px; }

  /* left floated container - contains the menu */ 
  #left_column { display: block;
                 float: left;
                 width: 110px;                    /* do not change these 2 lines - they must stay the         */
                 border-right: 2px solid #808080; /* same as the background image dimensions (hh_menu_bg.gif) */
                 font-size: 12px; 
                 position: relative; z-index: 10; /* required to ensure the 'hovered' elements appear above 'index_container' */
               } 

  /* background images displayed below the menu in left floated div */
  /* the image name and image height are specified within the html  */
  .nav_photos { float: left;
                width: 105px;
                margin-left: 5px;
                margin-top: 3px;
                margin-bottom: 3px;
                background-repeat: no-repeat;
              }

  /* add background image to banner container */
  .banner_container { /* background-image: url('graphics/hh_banner_bg_20x95.gif'); */
                      height: 95px;
                    }

  /* left banner container - empty - used to keep the banner central */
  .banner_container .left { width: 90px;
                            margin-left: 5px;
                            height: 95px;
                            background-image: none; 
                          } 

  /* center banner container with background image (normal or xmas) */
  .banner_container .center { height: 25px;           /* total height 95px */
                              margin-bottom: 5px;
                              padding-top: 65px;
                              font-size: 16px;
                            }

  /* background image in center container - usually 'normal_banner' but 'xmas_banner' is displayed at Christmas */ 
  .banner_container .normal_banner { background-image: url('graphics/hh_heading.gif');
                                     background-position: center 4px; /* horizontally centered, 4px down */
                                   }
  .banner_container .xmas_banner   { background-image: url('graphics/hh_xmas_heading3_sprite.gif'); 
                                   } 
                    .xmas_banner:hover { background-position: center -90px;  }

 /* right banner container */
 .banner_container .right { width: 90px;
                            margin-right: 5px;
                            height: 95px;
                            background-repeat: no-repeat;
                          } 

  /* background image for right container */ 
  .banner_container .right_normal_logo { background-image: url('graphics/hh_logo_silver90.gif'); }

  /* dont display the link in right div */
  a.right_link { display: none; }

  /****************************************/
  /* CSS used for the menu in left column */
  /* Used by hhinc_common_menu.php        */
  /****************************************/ 

  /* remove default styles from <ul> and <li> elements */

  #menu_container ul { margin: 0;
                       padding: 0;
                    }
  #menu_container li { list-style-type: none;
                     }

  /***********************************************************************/
  /* TOP LEVEL MENU                                                      */
  /* styles will also be inherited by second level unless explicitly set */
  /***********************************************************************/

  /* apply styles to all <li> tags (includes top_level and second_level) */

  .top_level li { background-color: #d6d9ee; /* #e1e1e1 */
                  color: #000080;
                  width: 110px;
                  /*font-weight: bold;*/
                  text-indent: 2px; 
                  border-bottom: solid 1px white;
                }

  /* apply styles to Home <a> tag */

  a#home { display: block;      /* ensure whole element is clickable (not just text)  */
          height: 75px;
          line-height: 12px; 
          text-decoration: none;
          color: #000080;
          cursor: pointer;
          text-align: center;
          padding-top: 2px;
        }

  /* apply styles to all <a> tags (includes top_level and second_level) */

  .top_level li a { display: block;      /* ensure whole element is clickable (not just text)  */
                    height: 20px;        /* set height and line-height the same to get text    */
                    line-height: 20px;   /* vertically centered - without the need for padding */
                    text-decoration: none;
                    color: #000080;
                    cursor: pointer;
                  }

  /* set the 'current page' background-color */

  #menu_container .current_page  { background-color: #c6c6ee; }

  /* apply styles to all <li> tags when hovering (includes top_level and second_level) */

  .top_level li:hover{ background-color: #ffffff;
                       position: relative;  /* set point of origin for the 2nd level menu items */
                     }

  /****************************************************************************/
  /* SECOND LEVEL MENU                                                        */
  /* top_level styles will be inherited unless explicitly set in second_level */
  /****************************************************************************/

  /* hide all second level <ul>'s until the user hovers over the parent (top_level) <li> item */

  .second_level { display:none;
                }

  /* set border-top for first item in the list */

  .second_level li.first { border-top: 1px solid #ffffff;
                         }

  /* display the second_level <ul> when the parent <li> is hovered over */

  li:hover .second_level { position:absolute;
                           left:105px;
                           top:3px;
                           display:block;
                         }

  /* set styles for the second level <li> tags - other styles will be inherited from top_level */

  .second_level li { background-color: #d6d9ee; /* #e1e1e1; */
                     color: #000080;
                     font-weight: normal;
                     width: 50px;
                     text-indent: 4px; 
                     border-left:   1px solid #ffffff;
                     border-right:  1px solid #ffffff;
                     border-bottom: 1px solid #ffffff;
                   }  

  .other_links li { width: 200px; } /* override width of second_level 'other links' menu */

  /* set the hover background color for the second level <li> tags - other styles inherited from top_level */

  .second_level li:hover { background-color:#ccffff;
                         }
  /* set the style for the second_level <a> tags - other styles will be inherited from top_level */

  .second_level li a { color:#000080;
                       display:block;
                     }

/********************************************/ 
/* CSS used for the bottom navigation bar   */
/********************************************/ 

/* create left-floated container (within 'common_footer' div for the xhtml logo */

 .xhtml_logo_div { display: block;
                   float: left;
                   width: 110px;
                   height: 37px;
                   background-color: #d6d9ee; /* #e1e1e1; */
                   border-right: 2px solid #808080;
                 }

  .footer_navbar { margin-left: 112px; /* left margin contains the xhtml_logo_div */ 
                   padding: 0;
                   background-image: url('graphics/hh_tab_head.gif');
                   font-weight: bold;
                   font-size: 9px;
                   text-align: center;
                   border-top: none; 
                   width: auto;
                 }

  .footer_navbar ul { padding-left: 0;
                      padding-right: 0;
                      padding-bottom: 0;
                    }

  /* menu is displayed as a horizontal unordered list */
  .footer_navbar ul li {   display: inline;
                       }

   /* include the '|' between items */
   li span.bar {display: inline;}

   /* don't display the 'back to top' link on wider devices */
   div#back_to_top { display: none; }

   /* don't display the 'Twitter' and 'YouTube' links on the bottom navigation */
   div#social_media_link { display: none; }

  .footer_navbar li a { float: none;
                        line-height: 20px;  /* ensures text is vertically centered */
                        display: inline;
                        border-bottom: none;
                        background-image: none;
                        height: auto;
                        padding: 0;
                      }

  /* set properties for bottom nav bar links - dark blue with no underlines */

  .footer_navbar a:link     {color: #000090 ;   font-weight: bold}
  .footer_navbar a:visited  {color: #000090 ;   font-weight: bold}
  .footer_navbar a:active   {color: #ff0000 ;   font-weight: bold}
  .footer_navbar a:hover    {color: #ff0000 ;   font-weight: bold }

  /* left-floated container for the left side credit */
   .left_credit { display: block; 
                  float: left;
                  padding-left: 5px;
                  height: 20px;
                  line-height: 20px;
                  color: #000080;
                  font-weight: bold;
                  font-size: 11px;
                }

} /* end media rule for min-width: 760px */

/*===============================================================*/
/* Media Query for devices 850px and above                       */
/* Include xmas logo in right div of top banner (date dependant) */
/* Increase font size for footer navigation items                */
/*===============================================================*/
@media only screen and (min-width: 850px)
{
  .banner_container .right_xmas_logo   { background-image: url('graphics/hh_logo_red_black90_sprite.gif'); }
                    .right_xmas_logo:hover { background-position: right top; }



  .footer_navbar { font-size: 11px;
                 }
} /* end media rule for min-width: 850px */


/*======================================================================*/
/* Additional Media Query for 'print'                                   */
/* Remove background images and background-color from the banner        */
/* Display HIGHGATE HARRIERS as plain text (instead of background-image */
/*======================================================================*/

@media only print
{
   .banner_container { background-color: #ffffff; }

   .banner_container .left          { background-image: none; } 
   .banner_container .normal_banner { background-image: none; }
   .banner_container .xmas_banner   { background-image: none; }

   .banner_container .center { padding-top: 3px;
                               color: #000000;  
                             }

   .banner_container #hh_text_banner { display: block;
                                       font-size: 30px;
                                       font-weight: bold;
                                       margin: 0;
                                     } 

   .banner_container .right .right_link { display: none; } 

} /* end media rule for print */