/* stolen from the SFU Library - CSS for home page 

   -- originally designed by Todd Holbrook, 2007
*/

/*
  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# - GENERAL LAYOUT
  #02# - TOP LEFT
  #03# - TOP RIGHT
   #03.1# - SEARCH
   #03.2# - NEWS
  #04# - BOTTOM

*/

/*
    Conventions:
    
    - Unit specified for all sizes including zero (px, em, etc.)
    
    Colours used:
    
    #0054a6 : menu heading background, news links as per SFU.ca
    #990000 : section heading, learning commons link
    #cccccc : darker grey for menus
    #dedede : lighter grey for menus
    #eeeeee : lightest grey for flyout menus
    
    
*/


/*
   ======================================================
   #01# - GENERAL LAYOUT
   ======================================================
*/


div#pageContentSpecific {
    background-color: white;
    height: 100%;
    padding: 0px; /* Override common style */
}


div#bodyContent {
    background-color: white;
    border: none;
}

div#topHalf {
    background-color: white;
    margin: 0px;
    padding: 0px;
}


/*
   ======================================================
   #02# - TOP LEFT
   ======================================================
*/

div#news {
    float: left;
    clear: left;
    width: 490px;
    padding: 245px 0px 0px 0px;
    background-repeat: no-repeat;
    background-color: #ffffff;
    margin: 0px;
}


a#newsNext {
    float: left;
    clear: none;
    margin-left: 25px;
}


/* "next" button */

a#newsNext img {
    border: none;
    padding: 0px;
    margin: 0px;
}


/* Space to the left of the "next" button */

div#newsText {
    background-color: white;
    margin-left: 110px;
}

/*
   ======================================================
   #03# - TOP RIGHT
   ======================================================
*/

div.section {
    float: right;
    clear: right;
    width: 470px;
    padding: 10px;
}


div.section h3,
div.section h3 a {
    color: #990000;
    font-size:1em;
    margin:5px 16px 5px 0px;
    text-transform: uppercase;
    text-decoration: none;
}


/*
   ======================================================
   #03.1# - SEARCH
   ======================================================
*/


div#sectionSearch {
    background: #dedede;
}

div#sectionSearch form {
    display: block;
    margin: 19px 0px 14px 0px;
}

div#sectionSearch h3 {
    margin-bottom: 14px;
}


/*
   ======================================================
   #03# - NEWS
   
   NOTE: Richard is using "News" for the body of his non front page pages
   As usual, a kludge, but what the hell...
   
   Added one new style, called "newsBody" for generic use here
   ======================================================
*/

div#newsBody {
	padding-right: 25px;
	background-color: white;
	margin-left: 25;
}

div#sectionNews h1 p {
    margin-right: 25px;
    background: #ffffff;
    margin-left: 25px;
}


div#sectionNews h3 a {
    color: #990000;
    text-decoration: none;
}

div#sectionNews h3 a:hover {
    text-decoration: none;
}


/* Make news links a blue colour like the SFU.ca page and
   underline on hover. */

div#sectionNews a {
    line-height: 1.35em;
    text-decoration: none;
    color: #0054a6;
}

div#sectionNews a:hover {
    text-decoration: underline;
}


div#sectionNews ul {
    margin: 5px 2px 2px 2px;
    padding: 0px 0px 0px 13px;
}



/*
   ======================================================
   #04# - BOTTOM
   ======================================================
*/


/* Container for the bottom 4 menus */

div#mainMenus {
    margin: 0px;
    padding: 10px 0px 0px 0px;
    clear: both;
}


/* Menu placement and width. Float to get four columns.*/

div.mainMenu {
    width: 230px;
    float: left;
    clear: none;
    padding: 0px;
    margin: 0px 9px 0px 0px; 
    background: #dddddd;
    color: #000000;
}


/* Default styling for all menu lists */

div.mainMenu ul {
    list-style: none;
    margin: 0px;
    padding: 0px;
    border: 0px;
}


/* Override default h3 (and a) formatting for menu headings */

div.mainMenu h3 {
    background-color: #0054a6;
    color: #ffffff;
    display: block;
    font-size: 1em;
    line-height: 1.7em;
    font-weight: normal;
}

div.mainMenu h3 a {
    background-color: #0054a6;
    color: #ffffff;
}

div.mainMenu h3 a:hover {
    text-decoration: none;
    border: none;
    background-color: #0054a6;
}


/* About menu is larger to include room for left side
   border.  It's one pixel smaller to get better spacing
   on the right side of the Find menu since the About menu
   naturally looks a bit bigger anyway. */

div#About {
    width: 254px;   /* 230 + 25 - 1 */
}


/* Light blue block next to the About heading pushed 
   into the left margin */

div#About h3 {
    border-left: 25px solid #4d88c1;
}


/* Set a height for the menus */

div.menuContents {
    height: 20em;
}


/* White border to the left of the About menu.  Doing it
   this way rather than using a negative margin on the blue
   block gets around some annoying margin problems in IE */

div#About div.menuContents {
    border-left: 25px solid #ffffff;
}


/* Remove the margin from the right side of the Find menu
   so it's less likely to wrap */

div#Find {
    margin: 0px;
}



/* Grey colour matches SFU home page grey for About and Help
   menus */

div.light {
    background: #dedede;
}

div.light div.menuContents a {
    border-right: 5px solid #dedede;
}


/* Grey colour matches darker SFU home page grey for MyLibrary
   and Find menus */

div.dark {
    background: #cccccc;
}

div.dark div.menuContents a {
    border-right: 5px solid #cccccc;
}


/* Background and right border highlighting when mousing over a link. */

div.light div.menuContents a:hover,
div.dark div.menuContents a:hover {
    border-right: 5px solid #555555;
    background: #aaaaaa;
}


/* Menu links.  Must specify block formatting so the
   whole menu line is active */

div.mainMenu a {
    padding: 1px 0px 1px 5px;
    text-decoration: none;
    color: #000000;
    line-height: 1.4em;
    display: block;
}


/* Set the syling and width of the flyout menus.  Absolute
   positioning is used to take them out of the flow to sit
   beside the menu trigger. */

div.menuContents ul li ul {
    width: 220px;
    background-color: #eeeeee;
    margin: 0px;
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 12em;
}

div.dark div.menuContents ul li ul li a,
div.light div.menuContents ul li ul li a {
    border-right: 5px solid #eeeeee;
}


/* Control the horizontal location of the flyout menus */

li#aboutBranchesCollections ul {
    left: 12em;
}

li#aboutLearnMore ul {
    left: 14em;
}

li#myLibraryMore ul {
    left: 5em;
}

li#helpMore ul {
    left: 5em;
}



/* Space the learning commons and staff pages links down */

a#learningCommons {
    margin-top: 10px;
    color: #990000;
}

a#staffPages {
    margin-top: 10px;
}


/* Flyout menu controls.  These classes are turned on and off with 
   jQuery's .hover command.  The position must be set to relative
   and assigned to the <li> containing the flyout <ul>.  If relative
   is set on the menu items in general (not assigned at the time the 
   flyout is triggered) then they will not be z-index aware and may 
   appear on top of the flyout menu. */

li.home_over {
    z-index: 2; 
    position: relative;
}

li.home_out {}

li.home_over ul {
    display: block;
}

li.home_out ul {
    display: none;
}


/* The following is known as a Holly Hack and is a fix
   for list formatting problems in IE6.  Without this, the 
   menus open up space under the menu trigger when a flyout
   is activated.  Make sure the class applies only to the
   flyout menus or it will cause problems with other lists
   on the page */

/* Fix IE. Hide from IE Mac \*/
* html div.menuContents ul li {
    float: left;
}
* html div.menuContents ul li a {
    height: 1%;
}
#newsBody {
	margin-left: 25px;
	background-color: white;
}
/* End */