/*
  This CSS file is divided into section by what part of 
  the page it controls.  You can search for the start of
  each section by using the "#xx#" number index below.


  #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# - FOOTER
  #05# - GENERAL SETTINGS (h1, h2, h3, a, etc.)

*/


/*
   ======================================================
   #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 crest
    #999999 : library "top" and "side" menu dark line
    #a43e31 : header dark grey background (behind crest)
    #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
   ======================================================
*/


body {
	margin: 0px;
	padding: 0px;
	background-color: #a7a8a0;
	color: black;
	height: 100%;
	font: 12pt Arial, Helvetica, sans-serif;
}

body img {
	border: none;
	}


/* Contains the "your browser does not support..." text section that is
   normally hidden from browsers with CSS */

div#noCSSBrowser {
    display: none;
    height: 0px;
    overflow: hidden;
}


/* From SFU.ca - wraps the entire page for centering */

div#centerPage {
    margin-left: auto;
    margin-right: auto;
    padding: 0px;
    width: 980px;
    border-top: 5px solid #2e3192;  /* blue bar across top of page */
}


/* Starts the content section including page title and breadcrumbs. */

div#bodyContent {
    clear: both;
    height: 100%; /* IE 6 fix - doesn't float div contents correctly unless some height is specified. */
    background: #ffffff;
}


/* Contains the actual page content */

div#pageContentSpecific {
	z-index: 1;
	display: block;
	clear: both;
	line-height: 1.25em;
	font-size: 96%;
}


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


/* 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#crestlink. */

#header {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	border-left: solid 25px #a43e31;
	background-color: #6e6d64;
	width: 955px;  /* 980 - 25 */
}


/* Displays the crest image as the link, while hiding the link text.  Degrades to show text link with no CSS.
   Adjust the margin and padding to place the crest in the right spot */

a#crestLink {
    background-image: url(../images/banner_left.gif);
    background-position: left top;
    background-repeat: no-repeat;
    /* Make block big enough to contain crest image */
    display: block;
    padding: 71px 0px 0px 0px;
    width: 465px;
    /* Hide link text */
        height: 0px;  
    overflow: hidden;
	float: left;
}


/*
   ======================================================
   #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 */

div#redBar {
    width: 955px;  /* 980 - 25 */
    margin: 0px;
    padding: 0px;
    background-color: #b5111a;
    float: left;
    clear: both;
    border-left: solid 25px #cb5a60;  /* Pink box on left */
    font-size: 15px;
    line-height: 1em;   /* Necessary so all lines are the same height, including bolded ones */
}


/* 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;
    float: left;
    clear: none;
}


div#rightRedBar {
    float: right;
    clear: none;
    font-size: 1em;
    padding: 0px 10px 0px 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;
	font-size: .8em;
	text-transform: uppercase;
}


/* 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#SFUOnlineMenu ul 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#SFUOnlineMenu ul 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 ul {
    display: none;
}

.over ul {
    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 #SFUSearch label {
    float: left;
    padding-top: 6px;
    padding-right: 5px;
}


div#rightRedBar #SFUSearch input {
    float: left;
    margin: 3px 0px 0px 0px;
    padding: 0px;
    width: 100px;
    overflow: hidden;
}


/*
   ======================================================
   #04# - FOOTER
   ======================================================
*/


#footer {
    font-size: 0.8em;
    position: relative;
    clear: both;
    width: 980px;
    margin: 0px;
    background: #bbbbbb;
    color: #ffffff;
    text-align: center;
    padding-top: 2px;
    padding-bottom: 2px;
}

#footer a {
    color: #ffffff;
    text-decoration: none;
}

#footer a:hover {
    text-decoration: underline;
}

/*
   ======================================================
   #05# - GENERAL SETTINGS (h1, h2, h3, a, etc.)
   ======================================================
*/


a {
	color: #0054a6;
}

a:link, a:active { color: #0054a6; text-decoration: none; }

a:visited { color: #0054a6; text-decoration: none; }

a:hover {
	color: #6d9dcc;
	text-decoration: underline;
	font-size: 10pt;
}


h1 {
	color: #b5111b;
	text-transform: none;
	font-family: "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	font-size: 14pt;
	line-height: 1.3;
	font-weight: bold;
	}

h2 {
	padding-top: 1em;
	color: #555;
	font: bold 13pt/0.1 "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	line-height: 0.4;
	}

h3 {
	color: #777;
	font: bold 12pt/1.4 "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	}h3 {
	font-size: 12px;
	font-weight: bold;
	text-transform: none;
	color: #b5111b;
}

h5 {
	color: #414141;
	font-size: 11px;
	font-weight: bold;
	text-transform: none;
	color: #414141;
	font-family: "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	line-height: 0.5pt;
}

hr {
	height:0.25px;
	width:100%;
	background:#cccccc1;
	margin: -5px;
   }

h7 {
	color: #b5111b;
	font: bold 12pt/0 "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	}h7 {
	font-size: 14px;
	font-weight: bolder;
	text-transform: none;
	color: #b5111b;
	line-height: 2.5;
}

li2 {
margin-left: 0;
padding-left: 2em;
}

h8 {
	color: #414141;
	font: bold 14pt/0 "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	}h8 {
	font-size: 14px;
	font-weight: bolder;
	text-transform: none;
	
}

h9 {
	color: #b5111b;
	font: bold 14pt/1.5 "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	}h9 {
	font-size: 14px;
	font-weight: bolder;
	text-transform: none;
}

h10 {
	color: #414141;
	font: bold 14pt/1.4 "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	}h10 {
	font-size: 14px;
	font-weight: bolder;
	text-transform: none;
	
}

h11 {
	color: #555;
	font: bold 11pt/1.4 "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	}h11 {
	font-size: 14px;
	font-weight: bolder;
	text-transform: none;
	color: #222;
}