/**
 * Header Styles
 *
 * Header styles shared among all standard pages for The Evergreen
 * State College
 *
 * These styles were originally developed by generations forgotten
 * to time. These styles apply to the black header bar at the top of
 * the primary template design. They should probably be combined into
 * the common.css stylesheet to save us a server hit.
 *
 * Styles in this file are organized according to the SMACSS principles:
 * http://smacss.com/
 *
 * @project    The Evergreen State College
 * @version    1.0
 * @package    xhtml (Transitional) and CSS
 * @author     The Evergreen State College
 * @copyright  2013 by the author
 * @cssdoc     0.2.22
 * @license    Copyrighted
 
 * Table of Contents
 *
 * 1. Base Styles .................. (base)
 * 2. Layout Styles ................ (layout)
 * 3. Module Styles ................ (module)
 *   3.1 Header Search ............. (header-search)
 *   3.2 Primary (Top) Navigation .. (primary-nav
 * 4. State Styles ................. (states)
 */

/**
 * 1. Base Styles
 *
 * @section base
 * @see http://smacss.com/book/type-base
 */

/**
 * 2. Layout Styles
 *
 * @section layout
 * @see http://smacss.com/book/type-layout
 */

#header{
    margin: 0;           /*box model*/
    padding: 0;
    width: 100%;
    min-width: 790px;
    overflow: hidden;    /*layout*/
    position: relative;  /*position*/
    background: black;   /*backgrounds & borders*/
}
 
/**
 * 3. Module Styles
 *
 * @section module
 * @see http://smacss.com/book/type-module
 */
 
#evergreen_logo {  /*deprecated - this is the old header logo */
    margin: 0 0 -17px;  /*box model*/
    padding: 6px 0 0 16px;
    float: left;        /*layout*/
    z-index: 500;       /*positioning*/
}
.evergreen-logo{  /*this is Alyssa's new official logo*/
    padding: 13px 0 0 20px;  /*box model*/
    width: 295px;
    float: left;             /*layout*/
}

#resourcesfor {  /*deprecated - this is being removed from the main header.*/
  float: left;
  padding: 13px 10px 0 54px; /* 230 */
}

    /**
     * 3.1 Header Search
     *
     * @subsection header-search
     */
    #searchaz { /* form & A-Z index link*/
      float: right;
      padding: 13px 20px 18px 0;
    }
    
    /*#header label {
      display: block;
      color: white;
      font-weight: bold;
      font-size: .8em;
      margin-bottom: 2px;
    }*/
    
    #header form {
        margin: 0;
        padding: 0;
    }
    /*#header input,
    #header select{
        border-width: 1px;*/     /*box model*/
        /*margin: 0;
        padding: 0.37037037037037em;*/
        /*color: #333;*/                /*typography*/
        /*font-size: 1em;*/
        /*background-color: #e5e5e5;*/  /*backgrounds & borders*/
        /*border-top-color: #492c5d;
        border-bottom-color: #fdf4b6;
        border-radius: 2px;
        box-shadow: 0 1px                0                  hsla(52, 95%, 85%, .4),
                    0 0.37037037037037em 0.37037037037037em #ccc inset;
    }
    #header input:focus,
    #header select:focus{
        background-color: #fff;
    }*/
    /*#header form input,
    #header form select{
        padding: 3px;
    }
    #header form select{
        padding: 1px;
        font-size: 9pt;
    }
    #header .submit{
      color: white;
      padding: 2px;
      background-color: #333;
    }*/
    
    #azindex,
    #azindex:link{
        padding-right:6px;  /*box model*/
        color: #fff;        /*typography*/
        font-size: 9pt;
        text-decoration: none;
    }
    #azindex:hover{
        color: #B9DAE8; /* skyblue hover */
    }
    
    #searchaz .search{
        border: none;
        background: none;
        width: auto;
    }

    /**
     * 3.2 Primary (Top) Navigation
     *
     * @subsection primary-nav
     */
    #menu{
      border-bottom: 5px solid #46502B;  /*box model*/
      width: 100%;
      clear: both;                       /*layout*/
      overflow: hidden;
    }
    #menu ul.primary{ 
      margin: 0;         /*box model*/
      padding: 0;
      width: auto;
      float: right;      /*layout*/
      overflow: hidden;
      list-style: none;  /*lists*/
    }
    #menu ul.primary li{
      float: left;
    }
    #menu ul.primary li a{  /* top nav tabs */
      height: 1.2em;        /*box model*/
      padding: 5px 6px 7px;
      width: 7em;
      display: block;       /*layout*/
      position: relative;   /*position*/
      color: black;         /*typography*//*inactive state color*/
      font-size: 9pt;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      background: #996600;  /*backgrounds & borders*/
    }
    #menu ul.primary li a:hover{
        color: #D4D79F; /*pale hover color*/
        background: #000;
    }
    #menu ul.primary li.spacer{
      height: 1.2em;        /*box model*/
      padding: 5px 0 7px;
      width: 10px;
      display: block;       /*layout*/
      position: relative;   /*position*/
      font-size: 9pt;       /*typography*/
      background: #996600;  /*backgrounds & borders*/
    }
    #menu ul.primary li.on a,
    #menu ul.primary li.on a:hover{
        /* Second css descriptor prevents current item 
           from appearing to react to hover event. */
        color: white; /* active color*/
        background: #46502B; /* green color */
    }
    #menu .secondary{
      margin: 0;                  /*box model*/
      padding: 0;
      width: 100%;
      clear: both;                /*layout*/
      overflow: hidden;
      font-size: 8pt;             /*typography*/
      background-color: #46502B;  /*backgrounds & borders*/
    }
    #menu .secondary ul{
      margin: .5em 0 .1em;  /*box model*/
      padding: 0;
      width: auto;
      float: right;         /*layout*/
      position: relative;   /*position*/
      list-style: none;     /*lists*/
    }
    #menu .secondary ul li{
      display: inline;
    }
    #menu .secondary ul li a{
        margin: 0 1em;  /*box model*/
        color: white;   /*typography*/
        text-decoration: none;
        font-size: 8pt;
        font-weight: bold;
    }
    #menu .secondary ul li a:hover{
        color: #D4D79F; /*pale hover color*/
    }

/**
 * 4. State Styles
 *
 * @section state
 * @see http://smacss.com/book/type-state
 */