HTML, BODY  { height:100%; }



BODY  { width: 100%; 
        margin: auto auto;
        color: black;
        background: white;
        font-family: Myriad Pro, Tahoma, Trebuchet MS, sans-serif; }









#header_yellow_line  { background-color: #FDB913; color: #004B8D; font-weight: bold; text-align: center;
                       display: block; margin: 1em auto;
                       padding: 0.5em 0; 
                       text-align: center;
                       font-size: 90%;

                       NOTwidth: 50%; 
                       NOTfont-family: Georgia; 
                       
                     }



UL#menu-bar  { list-style-type: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: #004B8D; }
#menu-bar LI  { float: left; background-color: #004B8D; }
#menu-bar A:LINK, #menu-bar A:VISITED  { display: block;
                                width: 184px;
                                font-weight: bold;
                                color: #FFFFFF;

                                text-align: center;
                                padding: 4px;
                                text-decoration: none; }
                                
#menu-bar A:HOVER, #menu-bar A:ACTIVE  { //background-color: #0089A9; 
                              background-color: #05A; }


#menu-bar LI.current
{
    background: #0089A9;
}





#content_container  { width: 100%; background-color: #FEFEFF; }

#page_content  { width: 90%; margin: 2em auto; }

      .blue_heading  { font-weight: bold; color: #004B8D; }

      #highlights  { margin-top: 0; }


      TABLE.highlights_list TD  { vertical-align: text-top; }



      #image_collage      { width: 290px; margin: 0; padding: 0; float: right; margin-left: 2em;   border: 0px solid grey; }
      #image_collage IMG  { width: 95px; margin: 0; padding: 0; }



UL.highlights_list, UL.highlights_list LI  { margin: 0; }





.schedule_heading  { color: #004B8D; font-weight: bold; padding-top: 2em; }





.content_left  { float: left; width: 25%;   border: 0px dotted green; }
.content_right  { float: right; width: 65%;   border: 0px dotted purple; }





   .project_list        { margin-bottom: 3em; }


   .project_list .entry  { margin-bottom: 0.5em; padding:0.25em; border: 1px solid #F0F0F0; }

   .project_list .entry:nth-child(even) { background: #F0F0F0; }
   .project_list .entry:nth-child(odd) { background: #F8F8F8; }

   .project_list .entry .title  { font-weight: bold; }





#footer_yellow_line  { background-color: #FDB913; width: 100%; height: 1em; margin-top: 2em; }


/*   #footer_school_logos  { width: 100%; }   */
#footer_school_logos  { width: 50%; display: block; margin: auto auto 1em auto; }














#NOTheader_logo  { width: 100%; display: block; margin: auto auto; }


#footer_school_logos_responsive { width: 100%; }
#footer_school_logos_responsive IMG { width: 50%; float: left; }



@media (min-width: 960px) {

   BODY  { width: 960px; }



   .tabs__item  { display: table-cell; /* [4] */
                  
                  vertical-align: middle;
                  
                  
                  //background-color: #004B8D;
                  background-color: #27C;
                  
                  
                }

}



@media (max-width: 480px) {

   #header_yellow_line  { width: 100%;
                          font-size: 70%; }


   #footer_school_logos_responsive IMG { width: 100%; }


   .tabs__item  { display: inline; }





   #footer_school_logos  { width: 80%; }





   .content_left  { clear: both; width: 100%; }
   .content_right  { clear: both; width: 100%; }



}























/**
 * Tabs object.
 *
 * 1. Tables (kinda) for layout!
 * 2. This is the magic bit; make all children occupy equal width.
 * 3. Required to make the tabs fill their container.
 * 4. Make each tab pack up horizontally.
 * 5. Ensure the hit area covers the whole tab.
 */
.tabs {
    margin:  0;
    padding: 0;
    list-style: none;
    display: table; /* [1] */
    table-layout: fixed; /* [2] */
    width: 100%; /* [3] */
}


        .tabs__link {
            display: block; /* [5] */
        }


/**
 * Primary nav. Extends `.tabs`.
 *
 * 1. Stop tabs’ corners leaking out beyond our 4px round.
 */
.primary-nav {
    text-align: center;
    //border-radius: 4px;
    overflow: hidden; /* [1] */
}

        .primary-nav a {
            
            //padding: 1em;
            padding: 0.25em;


            //background-color: #004B8D;
            //color: #fff;


            //background-color: #FFF;
            //color: #000;


            background-color: #27C;
            color: #FFF;


            font-weight: bold;
            text-decoration: none;

        }

        .primary-nav a:hover {
            //background-color: #0089A9;
            background-color: #05A;
        }




        
           .primary-nav a.current {
            color: #FDD031;
            background-color:#2E5B9C;
           }
        




















ul.menu {  
    background: #333; 
    height: 30px;
    width: 100%; 
}

ul.menu > li { 
    float: left; 
    position: relative;  
}

ul.menu ul {
    background: #444; 
    display: none; 
    position: absolute;
    left: 0; top: 100%;
}

ul.menu a { 
    cursor: pointer; 
    display: block; 
    color: white; 
    line-height: 30px; 
    padding: 0 10px; 
}

ul.menu li { list-style: none; }

ul.menu li:hover { background: #555;  }
ul.menu li:hover ul { display: block;  }



@media all and (max-width: 480px) {
    ul.menu {  height: auto;   background: green; }
    ul.menu > li {  float: none; width: 100%; }
    ul.menu a { line-height: 40px; }
    ul.menu ul { position: relative; }
}