/* ======== Latest Revision: 20151129 ======== */

  body {
  	     margin : 0px 0px 0px 0px;
         padding: 0px 0px 0px 0px;
         font-family: "Liberation Sans", "Nimbus Sans L", Arial, sans-serif;
         font-size: 12px;
         font-weight: normal;
       }

/*  ======================= HH Banner (top)  ======================= */

 .banner_container { background-image: url('../graphics/hh_banner_bg_20x95.gif');
                     background-color: #000000;
                     width: 100%;
                     height: 95px;
                   }

 .banner_container .left { float: left;
                           width: 95px;       /* total width 100px  */
                           height: 95px;
                           padding-left: 5px;
                           text-align: left;
                         } 

 .banner_container .center { background-image: url('../graphics/hh_heading.gif');
                             background-repeat: no-repeat;
                             background-position: center 2px; /* horizontally centered, 2px down */
                             height: 48px;                     /* total height 95px */
                             overflow: hidden;
                             padding-top: 47px;
                             color: #ffffff;
                             font: bold 16px Arial;
                             text-align: center; 
                           }

  .center  img { padding-left: 130px; }

 .banner_container .right { float: right;
                            width: 95px; /* total width 100px */
                            height: 95px;
                            padding-right: 5px;
                            text-align: right;
                          } 

    .date   { color: #000000;
              text-align: right;
              font : italic 11px Arial, Helvetica, sans-serif;
              white-space: pre;
            }
/* ======================= Photo head Div  ======================= */
  div.photohead { width: 1001px;
                  height: 130px; /*  plus margins etc */
                  margin-top:    0;
                  margin-bottom: 0;
                }
   
  div.sml_photo { float: left;
                  width: 166px;
                  height: 130px;
                  padding: 0px 1px 0px 0px;
                }

/* ======================= main divs for ya_index.php and ya_reports.php ====================== */

  /* common outer container */ 
  div.outer_container { width: 1001px;
                        background-color: #c6c6ee;
                        margin: 0 auto 0 auto;
                        overflow: auto;
                      }

  /* common inner container */
  div.inner_container { width: 1001px;
                        background-color: #c6c6ee;
                        overflow: auto;
                        background-repeat: repeat-y;
                      }

  /* background image for ya_index - contains fake borders */
  div.index_bg { background-image: url('ya_index_bg.gif'); }

  /* background image for ya_reports - contains fake borders */
  div.reports_bg { background-image: url('ya_reports_bg.gif'); }

  /* common headings */
  div.headings { background-image: url(hh_tab_head.gif);
                 color: #ff0000; 
                 font : bold 17px Arial, Helvetica, sans-serif;               
                 border-bottom: 1px solid #ffffff; 
                 border-top: 1px solid #ffffff; 
                 height: 20px;
                 line-height: 20px;
                 text-align: center;
               }

/* ==================== Left column - ya_index ============================== */

  div.events  { float: left;
                width: 276px;  /* total width 280px */
                border-right: 2px solid #808080;
                border-left:  2px solid #808080;
              }

  p.further_events { margin: 0;
                     padding-bottom: 5px;
                     text-align: center;
                     background-color:#ffffff;
                     border-bottom: 1px solid #000000;
                     font-weight: bold;
                   }

        .odd       { background-color: #e1e1ff; }

        .even      { background-color: #c6c6ee; }

       .event_date { 
                     float: left;
                     width: 48px; 
                     vertical-align: top;
                     color: #000080;
                     font : 12px Arial, Helvetica, sans-serif;
                     padding: 2px 0px 2px 2px; 
                     text-align: left;
                   }

        .event     { 
                     width: 222px; 
                     margin-left: 50px;
                     color: #000080;
                     font : 12px Arial, Helvetica, sans-serif;
                     padding: 2px 2px 2px 2px; 
                     text-align: left;
                   }

       .event_year { 
                     color: #ffffff;
                     font : bold 13px Arial, Helvetica, sans-serif;
                     text-align: center;
                     background-color: #000080; 
                   }

   .events .photo  { padding-top: 10px;
                     border-top: 1px solid #000000;
                     text-align: center;
                     font : 11px Arial, Helvetica, sans-serif;
                     color: #000080;
                   }

/* ==================== Left column - ya_reports ============================== */

  div.reports { float: left;
                width: 799px;
                border-left: 2px solid #808080;
              }
 
  div.repsubject { width: 539px;
                   float: left;
                   font : bold 12px Arial, Helvetica, sans-serif;
                   height: 20px;
                   line-height: 20px; /* if shorthand 'font' specified, line-height must come AFTER */
                   background-color: #c6c6ee;
                   padding-left: 10px; 
                   text-align : left;
                   border-top: 1px solid #000000;
                   border-bottom: 1px solid #ffffff;
                 }

  .repsubject a:link    {color: #000000 ;  text-decoration: none; }
  .repsubject a:visited {color: #000000 ;  text-decoration: none; }
  .repsubject a:active  {color: #ff0000 ;  text-decoration: none; }
  .repsubject a:hover   {color: #ffffff ;  text-decoration: none; }

   div.repauthor { width: 247px;
                   margin-left: 549px;
                   font : italic 12px Arial, Helvetica, sans-serif;
                   background-color: #c6c6ee;
                   text-align: right;
                   padding-right: 3px; 
                   border-top: 1px solid #000000;
                   border-bottom: 1px solid #ffffff;
                   height: 20px;
                   line-height: 20px; /* if shorthand 'font' specified, line-height must come AFTER */
                 }
   /* overrides background color - must be listed AFTER div.repauthor and div.repsubject */
   div.report_open { background-color: #ffffff; }

  .report_open a:link    {color: #0000ff ;  text-decoration: none; }
  .report_open a:visited {color: #0000ff ;  text-decoration: none; }
  .report_open a:active  {color: #ff0000 ;  text-decoration: none; }
  .report_open a:hover   {color: #ff0000 ;  text-decoration: none; }

  div.repnews   { font : normal 12px Arial, Helvetica, sans-serif;
                  padding-left: 40px;
                  padding-right: 40px;
                  text-align: left;
                  background-color: #ffffff;
                }

  div.end_report { font: bold 10px Arial, Helvetica, sans-serif;
                   color: #000080;
                   margin-top: 20px;
                   padding-bottom: 5px;
                 } 

/* ==================== Middle column - ya_index ============================== */

  div.notices { float: left;
                width: 521px;
              }

  .welfare_statement { border-bottom: 2px solid #808080;
                       padding-left: 80px;
                       padding-top: 5px;
                       padding-bottom: 5px;
                       text-align: justify;
                       color: #000000;
                       font-weight: bold;
                       background-color: #c6c6ee;
                     }  

  .warning_statement { border-bottom: 2px solid #808080;
                       padding-left: 10px;
                       padding-right: 10px;
                       padding-top: 10px;
                       padding-bottom: 10px;
                       font-size: 14px;
                       text-align: justify;
                       color: #cc0000;
                       font-weight: normal;
                       background-color: #c6c6ee;
                     }  

  .quadkids_container { height: 70px;
                        background-color: #ffffff;
                        border-bottom: 1px solid #808080;
                      }

  .quadkids_container .left { float: left;
                              width: 70px;
                              height: 55px;
                              padding: 5px 10px 10px 10px;
                            }
  .quadkids_container .right { margin-left: 100px;
                               height: 60px;
                               padding: 10px 10px 0 0;
                               background-color: #ffffff;
                               text-align: left;
                               color: #000000;
                               background-color: #ffffff;
                             } 

  .notices .photo { text-align: center;
                    /*margin-top: 5px;*/
                    background-color: #ffffff;
                  }

  .notices .photo1 { padding-top: 2px;
                     border-bottom: 2px solid #000000;
                   }

    .bluehead   { height: 20px;
                  font : bold 15px Arial, Helvetica, sans-serif;
                  background-color: #000080;
                  color: #ffffff;
                  text-align: center;
                }

  .training_div { padding: 5px 0 5px 40px;
                  background-color: #e1e1ff;
                }

 div #induction { width: 370px;
                  color: #000080; 
                  background-color: #eeeeee;
                  padding: 5px;
                  margin-bottom: 20px;
                  margin-top: 10px;
                  box-shadow: 5px 5px 3px #888888;
                }

  .subject   { float: left;
               width: 318px;
               font-weight : bold;
               background-color: #e1e1ff;
               padding-left: 3px; 
               white-space : pre;
               text-align : left;
             }

  .subject a:link    {color: #000000 ;  text-decoration: underline; }
  .subject a:visited {color: #000000 ;  text-decoration: underline; }
  .subject a:active  {color: #ff0000 ;  text-decoration: none; }
  .subject a:hover   {color: #ff0000 ;  text-decoration: none; }

  .author    { float: right;
               width: 197px;
               font : italic 8pt Arial, Helvetica, sans-serif;
               background-color: #e1e1ff;
               text-align: right;
               padding-right: 3px; 
               white-space : pre;
             }

  .news   { font : normal 12px Arial, Helvetica, sans-serif;
            background-color : #e1e1ff;
            border-bottom: 1px solid #000000;
            padding-left: 3px;
            padding-right: 3px;
            text-align: left;
           }

  /* set properties for links within news items - blue/black with underlines */
  .news a:link    {color: #0000ff ;  text-decoration: underline; }
  .news a:visited {color: #0000ff ;  text-decoration: underline; }
  .news a:active  {color: #0000ff ;  text-decoration: underline; }
  .news a:hover   {color: #000000 ;  text-decoration: none; }

  .more  { font: bold 10px Arial, Helvetica, sans-serif;
           color: #000080;
         } 


  .newer_div { text-align: center;
               border-bottom: 2px solid #000000;
               background-image: url(../graphics/hh_bg_stripe.gif);
             }


  .older_div { text-align: center;
               background-image: url(../graphics/hh_bg_stripe.gif);
             }

 /* older news - shown as a link - background-position changes when hovering to show a different part of the image */
 a#older_img_link { width: 43px;
                    height: 27px;                                
                    display: block; 
                    background-image: url('../graphics/hh_news_prev_sprite.gif');
                    background-position: bottom left;
                    text-indent: -9999px; /* hide the text*/
                    outline: 0; /* remove dotted line around background-image - use :focus instead */
                    margin: 0 auto 0 auto;
                  }
 a#older_img_link:hover { background-position: top left; }
 a#older_img_link:focus { background-position: top left; } /* use :focus when removing setting 'outline: 0;' */ 

 /* also reposition background image when hovering over the separate text link */
 #older_text_link:hover + #older_img_link { background-position: top left; }

 /* newer news - shown as a link - background-position changes when hovering to show a different part of the image */
 a#newer_img_link { width: 43px;
                    height: 27px;                                
                    display: block; 
                    background-image: url('../graphics/hh_news_next_sprite.gif');
                    background-position: bottom left;
                    text-indent: -9999px; /* hide the text*/
                    outline: 0; /* remove dotted line around background-image - use :focus instead */
                    margin: 0 auto 0 auto;
              }
 a#newer_img_link:hover { background-position: top left; }
 a#newer_img_link:focus { background-position: top left; } /* use :focus when removing setting 'outline: 0;' */
 
 /* also reposition background image when hovering over the separate text link */
 #newer_text_link:hover + #newer_img_link { background-position: top left; }

/* ==================== Common Right column - links ============================== */

  div.links   { float: right;
                width: 196px;  /* total width 200px */
                border-left:  2px solid #808080;
                border-right: 2px solid #808080;
              }

  .links .photo { text-align: center;
                  border-bottom: 1px solid #000000;
                  padding: 5px 0px 5px 0px;
                  font-style: italic;
                  font-size: 11px; 
                }

  /***************************************/
  /* CSS used for the links              */
  /* Used by yainc_links.htm             */
  /***************************************/ 

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

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

  /* apply styles to all <li> tags within top_level <ul> */

  .top_level li { background-color: #e1e1ff;
                  color: #000080;
                  width: 196px;
                  border-bottom: solid 2px #808080;
                }

  /* apply styles to all <a> tags within top_level */

  .top_level li a { display: block;      /* ensure whole element is clickable (not just text)  */
                    text-decoration: none;
                    color: #000080;
                    cursor: pointer;
                    text-align: center;
                    padding: 3px 0 3px 0;
                  }

  /* apply styles to all <li> tags which don't have clickable links - ie. the current page */

  .top_level li.nonlink { color: #000080;
                          text-align: center;
                          padding: 3px 0 3px 0;
                          background-color: #c0c0c0; 
                          border-bottom: 2px solid #ffffff;
                        }

  /* apply styles to all <li> tags within top_level when hovering */

  .top_level li:hover{ background-color: #c6c6ee; 
                       border-bottom: 2px solid #ffffff;
                     }
  /* reset 'hover' background color for the nonlink - dont want it to change color when hovering */ 

  li.nonlink:hover {background-color: #c0c0c0;}

  /***************************************/
  /* End CSS used for the links          */
  /***************************************/ 

/* ==================== Common Footer ============================== */

  div.footer { background-color: #ffffff;
               border: 2px solid #808080;
               height: 58px;
             }

  .footer .left { float: left;
                  width: 148px;
                  height: 33px;
                  padding-left: 2px;
                  padding-top: 25px;
                }

  .footer .right { float: right;
                   width: 110px;
                   height: 55px;
                   padding-top: 3px;
                   padding-left: 40px;
                 }

  .footer .middle { font-size: 14px;
                    margin-right: 150px;
                    margin-left: 150px;
                    padding-top: 5px;
                    padding-left: 60px;
                  }

 /* left-floated container for the left side credits */
 .left_credit { float: left;
                padding-left: 5px;
                height: 15px;
                color: #000080;
                font: bold 9px Arial;
              }

  /* right-floated container for the right side credits */
 .right_credit { float: right;
                 padding-right: 5px;
                 height: 15px;
                 color: #000080;
                 font: bold 9px Arial;
               }

/* ================== other common styles ==================== */

   .join  { font-style : italic;
            font-family: Arial, Helvetica, sans-serif;
          }
 a.join:link     {color: #0000ff ;  text-decoration: underline; }
 a.join:visited  {color: #0000ff ;  text-decoration: underline; }
 a.join:active   {color: #ff0000 ;  text-decoration: none; }
 a.join:hover    {color: #ff0000 ;  text-decoration: none; }

 /* Small (11px) italic font    */
 .font11italic { font: italic 11px Arial; }

 /* Small (12px) bold font    */
 .font12bold { font: bold 12px Arial; }

 /* Small (12px) bold red font    */
 .font12redbold { font: bold 12px Arial; color: #ff0000;}

/* colors */
.red          {color: #ff0000;} 
.blue         {color: #0000ff;} 
.gray         {color: #949494;}
.color800000  {color: #800000;}

/*   .join1  { font: bold 12px Arial, Helvetica, sans-serif; }  */

 /* set properties for text links - blue/black with underlines */

 a.blueblackul:link     {color: #0000ff ;  text-decoration: underline; }
 a.blueblackul:visited  {color: #0000ff ;  text-decoration: underline; }
 a.blueblackul:active   {color: #0000ff ;  text-decoration: underline; }
 a.blueblackul:hover    {color: #000000 ;  text-decoration: none; }

 /* set properties for text links - blue/red with no underlines */
 a.blueredx:link    {color: blue ;  text-decoration: none;}
 a.blueredx:visited {color: blue ;  text-decoration: none;}
 a.blueredx:active  {color: red  ;  text-decoration: none;}
 a.blueredx:hover   {color: red  ;  text-decoration: none;}

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

 /* set properties for text links - black/red with no underlines */
 a.blackredx:link    {color: black ;  text-decoration: none;}
 a.blackredx:visited {color: black ;  text-decoration: none;}
 a.blackredx:active  {color: red   ;  text-decoration: none;}
 a.blackredx:hover   {color: red   ;  text-decoration: none;}

 /* remove blank lines before and after paragraph */
 p.margin0   { margin: 0; }