#main {
	width: 980px;
	background-image: url(../images/main_bg.gif);
	background-position: left top;
	background-repeat: repeat-y;
	float: left;
	}


#leftnav {
	width: 195px;
	float: left;
	line-height: 1em;
	padding-bottom: 40px;
	padding-top: 14px;
	}

#leftnav ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	}

#leftnav a:visited {
	text-decoration: none;
	}

#leftnav li {
	padding: 0px;
	margin: 0px;
	color: #555;
/* Fix for IE li height issue */
	height: 1%;
/* end fix */
	}

#leftnav li a {
	text-decoration: none;
	display: block;
	padding: 7px 8px 5px 32px;
	text-decoration: none;
	color: #555;
	}

#leftnav li a:hover {
	text-decoration: none;
	background: transparent url(../images/leftnav_bg_over.gif) top left no-repeat;
	}

#leftnav li.over {
	color: #555;
	text-decoration: none;
	background: #fff url(../images/leftnav_bg_over.gif) top left no-repeat;
	padding: 7px 8px 5px 32px;
	margin: 0px;
	}
	
#leftnav li.highlight {
	color: #0054A6;
	text-decoration: none;
	background: #fff url(../images/leftnav_bg_over.gif) top left no-repeat;
	margin: 0px;
	padding: 0px;
	}

#leftnav .nested {
	padding: 0px;
	margin: 0px;
	margin-left: 10px;
	}
	
#leftnav .nestedsub {
	margin-left: 16px;
	}

#leftnav .nestedsub a {
	color: #3a76b1;
	}
	
#leftnav .nestedsub a:hover {
	color: #0054a6;
	}

#leftnav .nestedsub li.nestsubover {
	font-weight: bold;
	color: #3a76b1;
	padding: 4px 8px 2px 32px;
	}

#leftnav ul li ul {
	margin: 0px;
	padding-left: 0px;
	padding-bottom: 6px;
	}

#leftnav ul li ul li a {
	background-color: transparent;
	text-decoration: none;
	display: block;
	padding: 4px 8px 2px 32px;
	text-decoration: none;
	color: #0054a6;
	}

#leftnav ul li ul li a:hover {
	color: #b5111b;
	background-color: transparent;
	background-image: none;
	}

#leftnav ul li ul li.subover {
	color: #b5111b;
	background-color: transparent;
	background-image: none;
	margin-left: 32px;
	padding: 4px 6px 2px 0px;
	list-style-image: url(../images/bullet_red.gif); 
	}

#leftnav ul li ul li.subover a {
	color: #b5111b;
	background-color: transparent;
	background-image: none;	
	padding: 0px 6px 0px 0px;
	list-style-image: url(../images/bullet_red.gif);
	}

#leftnav li.rule {
	padding: 0em;
	height: 0em;
	line-height: 0em;
	margin-left: 32px;
	width: 145px;
	border-top: 1px dotted #777;
	}
	
#centrecol {
	padding: 6px 0px 40px 20px;
	width: 553px;
	float: left;
	}
	
#breadcrumb {
	color: #777;
	margin-bottom: 16px;
	margin-top: 6px;
	}
	
	div#mainMenus {
    margin: 0px;
    padding: 0px;
    clear: both;
}


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

div.mainMenu {
    width: 238px;
    float: left;
    clear: none;
    padding: 0px;
    margin: 0; 
    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: #b5111a;
    color: #ffffff;
    display: block;
    font-size: 1em;
    line-height: 1.7em;
    font-weight: normal; 
	padding: 1px 0px 1px 15px;
}

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

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


/* 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: 266px;   
}


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

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


/* 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 #dddddd;
}


/* 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 5px 20px;
    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;
}
#overlay {
	position: relative;
	float: left;
	padding-top: 200px;
	width: 980px;
	background: url(../images/banner.jpg) no-repeat 0 0 #dedede;
}
/*#overlay {
	position: relative;
	padding-top: 200px;
	float: left;
	width: 735px;
	background: url(../images/Falls.jpg) no-repeat 0 0 #dedede;
}
#overlay_right {
	position: relative;
	float: right;
	
	top: -200px;
	left: 500px;
	width: 390px;
	height: 200px;
	background: url(../images/screen.png);
	
}
#overlay_float {
	position: relative;
	float: right;
	left: -180px;
	top: -180px;
	width: 200px;
	text-decoration: none;
    color: #fefefe;
    line-height: 1.4em;
    display: block;
	background: url(../images/screen.png)
	
}*/
#left-content {
	border-left: 25px solid #dedede;
	padding: 15px 20px;
	width: 690px;
	float: left;
}
#fullpage-content {
	border-left: 25px solid #dedede;
	padding: 15px 20px;
	width: 830px;
	float: left;
}
	
/* The following styles are for the accordian AJAX feature. Users can click on a link in a definition list to show hidden content */
		
dl.togglable {
	margin-bottom: 2em;
}	

dl.togglable dd {
	margin: 0px;
	margin: 4px 0px 12px 0px;
	padding: 8px 10px;
	background-color: #ebf0f4;
	border: 1px solid #999;
	color: #555;
	line-height: 1.2em;
	}

dl.togglable dt {
	padding-bottom: .3em;
	}

dl.togglable ul {
	margin: 0px;
	padding: 0px;
	margin-left: 16px;
	}

dl.togglable ol {
	margin: 0px;
	padding: 0px;
	margin-left: 16px;
	}