/* SFU Library - CSS for full width header meant for inclusion
                 in other systems (catalogue, GODOT, etc.)

   Todd Holbrook, SFU Library, 2007

  #00# - CSS NOTES
  #01# - PAGE LAYOUT
  #02# - PAGE HEADER - BANNER
  #03# - RED SFU NAV BAR AND POPUP MENUS
   #03.1# - GENERAL LINK SETTINGS AND FORMATTING
   #03.2# - POPUP MENUS
   #03.3# - SFU SEARCH FORM
  #04# - TOP GREY LIBRARY MENUS
   #04.0# - GENERAL SETTINGS
   #04.1# - TOP MENU SPECIFIC

*/


/*
   ======================================================
   #00# - CSS NOTES
   ======================================================
*/


/*
    Conventions:
    
    - Unit specified for all sizes including zero (px, em, etc.)
    
    Colours used:
    
    #0054a6 : library "top" and "side" menu link hover
    #2e3192 : blue bar at top of page
    #6e6d64 : orange/grey bar to left of logo
    #999999 : library "top" and "side" menu dark line
    #a43e31 : header dark grey background (behind logo)
    #a7a8a0 : dark grey background around centered page
    #bbbbbb : grey footer background
    #b5111a : red sfu.ca popup bar
    #cb5a60 : pink left side of sfu.ca popup bar and large underline bar
    #e0e0e0 : library "top" and "side" menu background
    
    
*/


/*
   ======================================================
   #01# - PAGE LAYOUT
   ======================================================
*/



/* Make sure the page content comes below the header */

div#clearHeader {
    clear: both;
}


/*
   ======================================================
   #02# - PAGE HEADER - BANNER
   ======================================================
*/

@media screen {
    #blueBar {
	border-top: 5px solid #2e3192;  /* blue bar across top of page */
	margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
    }
}

@media print {
    #blueBar {
        display: none;
    }
}

/* Page header - contains left and right banner pieces.  The
   header should be 70 pixels high in total.  This is determined
   by the vertical padding in #header combined with the vertical
   padding in a#logoLink. */

@media screen {
    #header {
        font-family: Arial,Helvetica,sans-serif;
        margin: 0px;
        padding: 0px 0px 0px 0px;
        border-left: solid 25px #a43e31;
        background-color: #6e6d64;
        background-image: url(http://static.lib.sfu.ca/images/banner_right70.jpg);
        background-position: right top;
        background-repeat: no-repeat;
    }
}

@media print {
    #header {
        display: none;
    }
}


/* Black logo for printing */
@media screen {
    div#revealOnPrint {
        display: none;
    }
}


/* Displays the logo image as the link, while hiding the link text.  Degrades to show text link with no CSS. */

a#logoLink {
    margin-left: 45px;
    display: block;
    border: none;
    height: 70px;
}

a#logoLink img {
	border: none;
}


/*
   ======================================================
   #03# - RED SFU NAV BAR AND POPUP MENUS
   #03.1# - GENERAL LINK SETTINGS AND FORMATTING
   ======================================================

   The red bar is particularly susceptible to changes in the
   size of blocks due to text size differences, padding, etc.
   The line height must be forced and in some cases the font
   size re-specified as "1em" to keep everything lined up and
   not have any underlined links poking out below or above the
   red bar container.
   
   Everything must be set to block display and floated or minor
   differences in rendering will cause layout problems in different
   browsers.  Forcing float, block and font/line sizes seems to
   work well enough.

*/

/* Red SFU nav bar */

@media screen {
    div#redBar {
        font-family:Arial,Helvetica,sans-serif;
	margin-top: 0px;
	margin-bottom: 0px;
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px;
        background-color: #b5111a;
        float: left;
        clear: both;
	width: 100%;
        font-size: 15px;
        line-height: 1em;   /* Necessary so all lines are the same height, including bolded ones */
    }
}

@media print {
    div#redBar {
       display: none;
    }
}


/* Links in the top red bar and popup menus */

div#redBar a {
    color: #ffffff;
    text-decoration: none;
    background-color: #b5111a;
    display: block;
    float: left;
    margin: 0px;
    padding: 6px 0px 8px 0px;
}

/* Vertical bar between left side links */

div#redBar .divider {
    float: left;
    display: block;
    font-weight: bold;
    color: #cb5a60;
    margin: 0px 7px;
    padding-top: .4em;
}


/* Display the large pink link underline for top red bar links */

a.pinkUnderline {
    border-bottom: solid 16px #b5111a;
}

a.pinkUnderline:hover {
    border-bottom: solid 16px #cb5a60;
    text-decoration: none;
}


/* Left and right bars used to seperate the two halves
   of the red bar.  Font size is forced in both to make
   sure everything lines up. */

div#leftRedBar {
    font-size: 1em;
    padding: 0px 0px 0px 40px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
    border-left: solid 25px #cb5a60;  /* Pink box on left */
    float: left;
    clear: none;
}



div#rightRedBar {
    float: right;
    clear: none;
    font-size: 1em;
    padding: 0px 10px 0px 0px;
    margin-top: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
    margin-right: 0px;
}


/* "SFU.CA" link */

div#leftRedBar a#SFUCA {
    margin-right: 40px;
    font-weight: bold; 
}


/*
   ======================================================
   #03.2# - POPUP MENUS
   ======================================================

   Popup menus layout:

    ul - Menu container (#pullDowns)
      li - SFU Online label/link
        ul - SFU Online menu
          li - SFU Online menu item
      li - AZ links label/link
        ul - AZ list menu
           li - AZ list menu item

   The popup is done using the jQuery Javascript library's .hover()
   function to switch between "over" and "out" classes.  The menus
   are absolute positioned below their triggers.

*/


ul#pullDowns {
    display: inline;
    padding: 0px;
    margin: 0px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
}


/* Contains the dropdown menu uls.  The position is
   set to relative here to give the absolute positioning
   of the menus something to lock onto.  If this is left off
   it defaults to "static" and the menus lock onto something 
   else. */

ul#pullDowns li {
    position: relative;
    display: block;
    float: left;
}


/* General settings for dropdown menus.  Absolute positioning is
   used to pull the drop down menus out of the normal flow and 
   allow them to be positioned below their popup "triggers".  Note
   that there is a bug in IE6 that ignores the z-index for <select>
   elements.  These should not be positioned under the menus. */

ul#pullDowns li ul {
    position: absolute;
    float: left;
    z-index: 101;
    background-color: #cb5a60;
    width: 200px;
    top: 45px;    /* Menu starts 45 pixels below trigger */
    left: 0px;    /* Needed to align the left side of menus with their trigger */
    margin: 0px;
    padding: 0px;
}


/* AtoZ highlighting when hovering.  Make it not go right to the edge */

ul#pullDowns li ul#AtoZ {
    padding: 5px 5px 3px 5px;
}


/* General settings for menu items */

ul#pullDowns li ul li {
    padding: 0px;
    overflow: hidden;
    display: block;
}


/* Clear left so there is one entry per line */

ul#pullDowns li ul#SFUOnline li {
    clear: left;
    width: 100%;
}


/* Float and force size so that we get the grid layout */

ul#pullDowns li ul#AtoZ li {
    float: left;
    clear: none;
    width: 1.2em;
    height: 1.5em;
    padding: 0px .25em 0px 0px;
    margin: 0px;
}


/* Menu links */

ul#pullDowns li ul li a {
    color: #ffffff;
    background-color: #cb5a60;
    border: none;
    width: 100%;
    padding: 2px;
    margin: 0px;
    border: none;
    text-decoration: none;
}


/* Add some space to the SFUOnline menu items */

ul#pullDowns li ul#SFUOnline li a {
    padding: 5px;
}


/* Center AtoZ links so they look better */

ul#pullDowns li ul#AtoZ li a {
    text-align: center;
}


/* Background highlighting */

ul#pullDowns li ul li a:hover {
    background-color: #b5111a;
    text-decoration: none;
}


/* Classes for controlling pop up behaviour.  jQuery used to toggle classes. */

.out {
    display: none;
}

.over {
    display: block;
}


/*
   ======================================================
   #03.3# - SFU SEARCH FORM
   ======================================================
*/


/* SFU Search form.  Floated like everything else in
   the red bar */

div#rightRedBar #SFUSearch {
    display: block;
    float: left;
    color: #ffffff;
    margin: 0px;
}


div#rightRedBar label {
    float: left;
    padding-top: 6px;
    padding-right: 5px;
}


div#rightRedBar input {
    float: left;
    margin: 3px 0px 0px 0px;
    padding: 0px;
    width: 100px;
    overflow: hidden;
    font-size: 100%;
}


/*
   ======================================================
   #04# - TOP GREY LIBRARY MENUS
    #04.0# - GENERAL SETTINGS
   ======================================================
*/


/* Top menu colors and grey line */

@media print {
    div.libraryMenu {
        display: none;
    }
}

@media screen {
    div.libraryMenu {
        margin: 0px;
        padding: 5px 2px 3px 6px;
        background: #e0e0e0;
/*        overflow: hidden; */
        font-size: 80%;
        font-family: Arial,Helvetica,sans-serif;
        border-left: 25px solid #cccccc;
        clear: both;
         height: 1.2em; 
    }
}

div.libraryMenuBorder {
    float: left;
    padding: 0px;
    margin: 0px;
    border-bottom: 1px solid #999999;
    width: 100%;
}

/* Remove list styles */

div.libraryMenu ul {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
}


/* Float for horizontal menu, add vertical dividing line */

div.libraryMenu ul li {
    border-left: 1px solid #000000;
    float: left;
    line-height: 1.1em;
    padding: 0px .2em 0px .2em;
    
}


/* Do not put a dividing line before the first item */

div.libraryMenu ul li.libraryMenuFirst {
    border-left: none;
    padding-left: 0px;
}


/* Menu link spacing and colour */

div.libraryMenu ul li a {
    margin: 0px 5px;
    color: #111111; 
    text-decoration: none;
}


/* Highlight menu items when hovering */

div.libraryMenu ul li a:hover {
    color: #0054a6;
    background: #e0e0e0;
}


/*
   ======================================================
   #04.1# - TOP MENU SPECIFIC
   ======================================================
*/

div#topMenu {
    font-family: Arial,Helvetica,sans-serif;
    font-weight: normal;
    font-size: 10.5pt;
}