/*
  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, h4, a, etc.)
  #06# - SUB-LEVEL PAGE STYLES
  #07# - LEFT MENU
  #08# - CENTRE PAGE CONTENT (Breadcrumbs, dimensions of white space, lists, right menu)
  #09# - ZEBRA TABLES - COLOURING TABLES
  #10# - OPTIONLIST TABLES 
  #11# - EXTERNAL LINK STYLE IN TOPIC MENU
  #12# - TOGGLE BOXES
  #13# - BOXES
  #14# - COLLAPSING MENUS ON SUB PAGES
  #15# - RIGHT-HAND COLUMN COLLAPSING MENU
  #16# - RIGHT-HAND MENU FLYOUT
  #17# - ACADEMIC ADVISING SERVICES
  #18# - RECREATION

*/


/*
   ======================================================
   #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;
    font-family: Arial, Helvetica, sans-serif;
	color: #333;
    height: 100%;  /* Fix for IE6 text selection bug */
}

body img {
	border: none;
	}
	

/* provide position for right side menu */
div#right-menu{
	position:relative;
	top:10px;

}


/* 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: 80%;
}


/*
   ======================================================
   #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;
    background-image: url(/students-resources/calendar-archive/11Summer-calendar/images/banner_right.jpg);  /* 490x70 */
    background-position: right top;
    background-repeat: no-repeat;
    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(/students-resources/calendar-archive/11Summer-calendar/images/banner_left.jpg);
    background-position: left top;
    background-repeat: no-repeat;

    /* Make block big enough to contain crest image */

    display: block;
    padding: 71px 0px 0px 0px;
    width: 410px;

    /* Hide link text */
    
    height: 0px;  
    overflow: hidden;
}


/*
   ======================================================
   #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;
/* Fix for IE li height issue */
	width:320px;
	height: 1%;
/* end fix */
}


div#rightRedBar {
    float: right;
    clear: none;
    font-size: 1em;
    padding: 0px 10px 0px 0px;
/* Fix for IE li height issue */
	height: 1%;
/* end fix */
}


/* "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;
	
	/* The following coding fixes the IE6 problem with z-index 
		and the dropdown menus from the header. Where <select> 
		elements placed within the text (content) area would 
		prevent the users from seeing the dropdowns when 
		hovering on them.
		
		Note: That this was entered in at a later date then the
		comment for "ul#pullDowns li ul" and fixes the IE6 bug. */
	
    position: relative;
    z-index: 101;
    width: 200px;
}


/* 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.
   
   Note: This IE6 bug is fixed by the coding added in 
   "ul#pullDowns" as stated above. */

ul#pullDowns li ul {
    position: absolute;
    float: left;
    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, h4 a, etc.)
   ======================================================
*/



a { color: #0054a6; }

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

/*a:visited { color: #25316e; text-decoration: none; }*/
a:visited { color: #0054a6; text-decoration: none; }

a:hover { color: #6d9dcc; text-decoration: underline; }

h1 {
	color: #b5111b;
	font: bold 1.4em/1.5em "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	padding-top: 1em;
	}

h2 {
	padding-top: 1em;
	color: #555;
	font: bold 1.2em/1.3em "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	}

h3 {
	padding-top: 1em;
	color: #777;
	font: 1.1em/1.4em "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	}
	
h4 {
	padding-top: 1em;
	color: #0054a6;
	font-family: "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	font-size: 1em;
	line-height: 1.1em;
	}

h5 {
	padding-top: 1em;
	color: #b5111b;
	font: 1.0em/1.4em "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	}

/*
   ======================================================
   #06# - SUB-LEVEL PAGE STYLES
   ======================================================
*/
#main {
	width: 980px;
	background-image: url(/students-resources/calendar-archive/11Summer-calendar/images/subhome_bg.gif);
	background-position: left top;
	background-repeat: repeat-y;
	float: left;
	line-height: 1.2em;
	}
	
/*
   ======================================================
   #07# - LEFT MENU
   ======================================================
*/
	
#topic_menu {
	width: 194px;
	float: left;
	line-height: 1em;
	padding-bottom: 40px;
	}

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

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

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

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

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

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

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

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

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

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

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

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

#topic_menu 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(/students-resources/calendar-archive/11Summer-calendar/images/bullet_red.gif); 
	}

#topic_menu ul li ul li.subover a {
	color: #b5111b;
	background-color: transparent;
	background-image: none;	
	padding: 0px 6px 0px 0px;
	list-style-image: url(/students-resources/calendar-archive/11Summer-calendar/images/bullet_red.gif);
	}

#topic_menu li.rule {
	padding: 0em;
	height: 0em;
	line-height: 0em;
	margin-left: 32px;
	width: 145px;
	border-top: 1px dotted #777;
	}
	
/*
   ======================================================
   #08# - CENTRE PAGE CONTENT (Breadcrumbs, dimensions 
   		of white space, lists, right menu)
   ======================================================
*/

#centre {
	float: left;
	margin-left: 20px;
	padding-top: 4px;
	width: 766px;
	}

#breadcrumb {
	color: #777;
	margin-bottom: 16px;
	margin-top: 6px;
	}

#text {
	width: 532px;
	float: left;
	padding-right: 38px;
	margin-right: 8px;
	padding-bottom: 40px;
	line-height: 1.3em;
	}

#text ul {		
	margin: 0em;
	padding: 0em;
	margin-top: .4em;
	margin-left: .6em;
	list-style-type: none;
	}

#text ul li {
	padding-left: 10px;
	padding-top: 6px;
	background-image: url(/students-resources/calendar-archive/11Summer-calendar/images/grey_bullet.gif);
	background-repeat: no-repeat;
	background-position: 0px 11px;
	}

#contact {
	margin-top: 30px;
	}
	
#right_menu {
	float: left;
	width: 183px;
	}

#subphoto {
	width: 225px;
	float: left;
	}

#subhead {
	padding-top: 20px;
	width: 280px;
	float: left;
	}
	
img.shadow {
	margin-top: 15px;
	margin-bottom: 10px;
	}

.clear {
	clear: left;
	}
	
.intro {
	font: 1.2em/1.6em Arial, Helvetica, Verdana, sans-serif;
	color: #555;
	}

#help {
	margin-top: 30px;
	}
	
#help ul {
	margin: 0px;
	padding: 0px;
	list-style: none;
	margin: 10px 0px;
	}

#help ul li {
	padding-top: 4px;
	}	

#contact_col {
	margin-top: 40px;
	}

.group {
	width: 460px;
	padding: 10px;
	background-color: #e9e9e9;
	}
	
	
.underline {
	padding-bottom: .5em;
	border-bottom: 1px solid #ccc;
	}	

.floatleft {
	float: left;
	margin-right: 62px;
	}

.floatp {
	margin-top: 0px;
	width: 260px;
	float: left;
	}
	
/*
   ======================================================
   #9# - ZEBRA TABLES - COLOURING TABLES
   ======================================================
*/

.alternate td { background-color: #ccc; } /* Dark Gray */
.alternate td.odd { background-color: #DEDEDE; } /* Light Gray */

#alternate {
	}
	
td {padding: 0.2cm; }

#alternate .odd{background-color: #DEDEDE;}

#alternate .even{background-color: #ccc;}

/*
   ======================================================
   #10# - OPTIONLIST TABLES
   ======================================================
*/

.optionlist {
	margin-bottom:20px;
	}

.optionlist th {
	border-color: #ddd;
	border-style: none solid none none;
	border-width: medium 1px medium medium;
	color: #666;
	font-family: Arial,Helvetica,sans-serif;
	font-size: 1.2em;
	line-height: 1.4em;
	padding: 0px;
	padding-right: 10px;
	text-align: left;
	width: 110px;
	}

.optionlist th span {
	font-size: .8em;
	line-height: 1.2em;
	font-weight: normal;
	}

.optionlist td {
	padding-left: 20px;
	font-size: .95em;
	line-height: 1.4em;
	}

.optionlist td strong {
	color: #444;
	}

.optionlist td p {
	padding-top: 0px;
	margin-top: 0px;
	}

.optionlist td img {
	margin: 4px 0px -2px 2px;
	}

/*
   ======================================================
   #11# - EXTERNAL LINK STYLE IN TOPIC MENU
   ======================================================
*/

.external,
.pdf {
	padding-right: 13px;
	background-repeat: no-repeat;
	background-position: 100% 50%;
}
.external {
	background-image: url(/students-resources/calendar-archive/11Summer-calendar/images/external.gif);
}
.pdf { 
	background-image: url(/students-resources/calendar-archive/11Summer-calendar/images/pdf.gif);
}

#topic_menu .external {
	background: url(/students-resources/calendar-archive/11Summer-calendar/images/external-leftnav.gif) no-repeat 100% 50%;
	padding-right: 15px;
}

#topic_menu ul ul .external:hover {
	background: url(/students-resources/calendar-archive/11Summer-calendar/images/external-leftnav-hover.gif) no-repeat 100% 50%;
	padding-right: 15px;
}

/*
   ======================================================
   #12# - TOGGLE BOXES
   ======================================================
*/

.togglable {
	margin-bottom: 2em;
}	

.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;
	}

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

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

.togglable ol {
	margin: 0px;
	padding: 0px;
	margin-left: 16px;
	}
	
/*
   ======================================================
   #13# - BOXES
   ======================================================
*/
.box {
	width: 227px;
	padding-bottom: 0px;
	background: url(/students-resources/calendar-archive/11Summer-calendar/images/box_bg.gif) top left repeat-y;
	}

.box h2 {
	color: #444;
	font: bold 1em/1.2em "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	margin-bottom: 0px;
	padding: 20px 10px 0px 24px;
	background: url(/students-resources/calendar-archive/11Summer-calendar/images/box_top.gif) top left no-repeat;
	}
	
.box h2 span {
	font: bold 1.2em/1.2em "Lucida Grande", Lucida, Arial, Verdana, sans-serif;
	color: #2e3192;
	}

.box ul a {
	padding-left: 30px;
	}
	
	
.box a:link {
	color: #2e3192;
	text-decoration: none;
	}

.box a:visited {
	color: #2e3192;
	text-decoration: none;
	}
	
.box a:hover {
	text-decoration: underline;
	}

.box p {
	margin-left: 24px;
	margin-right: 16px;
	margin-top: .3em;
	padding-top: 0px;
	font: .8em/1.4em Verdana, Arial, Helvetica, sans-serif;
	}

.box strong {
	color: #444;
	}


	
.column { width: 47%; float: left; padding: 0px 10px 0px 0; }

.column ul {
	list-style-type: none;
	margin-left: 0px;
	padding: 5px 0 20px 30px;
	margin-top: 10px;

}

.links ul {
	list-style: none;
	margin-left: 0px;
	padding-left: 20px;
	margin-top: 10px;
}


/*
   ======================================================
   #14# - COLLAPSING MENUS ON SUB PAGES
   ======================================================
*/

#menu_collapse li a.grey_header {
	background : #6E6D64;
}

#menu_collapse li a.grey_header:hover {
	background-color : #2E3192;
}

#menu_collapse li.white_header {
	padding: 3px 6px 3px 32px;
	letter-spacing: .1em;
	color:#000000;
	background-color: #FFFFFF;
}

#menu_collapse li {
	background-color: #FFFFFF;
	border-bottom: 1px solid #ffffff;
}

#menu_collapse li a.external {
	background: url(/students-resources/calendar-archive/11Summer-calendar/images/external.jpg) no-repeat right;
}

#menu_collapse li a {
	background : #BA1A1A;
	padding: 3px 6px 3px 32px;
	color: #FFFFFF;
	letter-spacing: .1em;
}

#menu_collapse li a:hover {
	color: #FFFFFF;
	letter-spacing: .1em;
	background-image: none;
	background-color : #2E3192;
}

#menu_collapse a {
	display : block;
	padding : 0.7em 1em;
}

#menu_collapse ul.sub {
	padding-bottom: 0px;
}

#menu_collapse ul.sub li {	
	padding-left: 8px;
	border-bottom: 1px solid #DEDED6;
}

#menu_collapse ul.sub li:hover {
	list-style: none;
	background: none;
	background-color: #CCCCCC;
}

/*
   ======================================================
   #15# - RIGHT-HAND COLUMN COLLAPSING MENU
   ======================================================
*/

#right_collapse {
	list-style: none;
	position: relative;
	margin: 0px;
	padding: 0px;
	margin-left: -6px;
	width: 194px;
	letter-spacing: .1em;
	padding-top:15px;
	padding-bottom:30px;
	}
	
#right_collapse li {
	background-color: none;
	position: relative;
	}
	
#right_collapse li a {
	background-color: #6E6D64;
	padding-left: 10px;
	color: #FFFFFF;	
	}
	
#right_collapse li a:hover {
	text-decoration: none;
	background-color : #2E3192;
	}

#right_collapse a {
	border-bottom: 1px solid #ffffff;
	display : block;
	padding-top: 3px;
	padding-bottom: 3px;
	}
	
#right_collapse ul.sublist {
	background-color: #none;
	list-style: none;
	padding: 0px;
	margin: 0px;
	}

#right_collapse ul.sublist li {
	border-bottom: 1px solid #DEDED6;
	}
	
#right_collapse ul.sublist li:hover {
	list-style: none;
	background: none;
}
	
#right_collapse ul.sublist li a {
	padding-left:18px;
	margin:0px;
	color: #0054a6;
	background-color: #D9D9D6;
	}

#right_collapse ul.sublist li a:hover {
	color: #6d9dcc;
	background-color: #BBBBBB;
	}

/*
   ======================================================
   #16# - RIGHT-HAND MENU FLYOUT
   ======================================================
*/

#right_flyout {
	margin-top: 39px;
	margin-bottom: 0px;
	}
	
#right_flyout li a {
	color:#0054a6;    
	padding: 2px 0px;
	}

#right_flyout a, #right_flyout li {
	margin:0px;
	padding:0px;
	}
	
#right_flyout li a:hover {
	text-decoration: none;
	color: #b5111b;
	}


/* This style the main links*/
#right_flyout li {   		
	padding: 0px 0px;
	/*border-top: 1px solid #9CA4C8;
	border-bottom: 1px solid #9CA4C8;*/
	margin-bottom: 1px;
	}

/* *** Fly out CSS **** */
.flyout_leftside, .flyout_leftside ul {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	overflow:visible;
	margin: 0px;
	padding: 0px;
	}

.flyout_leftside ul {
	padding: 3px 0px;
	padding-left: 5px;
	}

.flyout_leftside li {
	position:relative;
	}
	
.flyout_leftside li ul {
	display:none;
	left:160px;
	position: absolute;
	top:0px;
	z-index:2000;
	width: 180px;
	background-color: #CCCCCC;
	border-right:5px solid #D9D9D6;
	}
	
.flyout_leftside li ul li {
	}
	
.flyout_leftside li a, .flyout_leftside ul li a {
	display:block;
	text-decoration:none;
	}

/** Comment this out so that it won't ruin template **/
/** html .flyout_leftside li {
	float:left;
	height:1%;
	}*/
	
* html .flyout_leftside li a {
	height:1%;
	}
	
* html .flyout_leftside ul li {
	float:left;
	height:1%;
	}
	
* html .flyout_leftside ul li a {
	height:1%;
	}
	
.flyout_leftside li a:hover {
	}
	
.flyout_leftside li:hover ul, .flyout_leftside li.over ul {
	display:block;
	background-color: #ECECEB;
	}
	
ul#right_flyout.flyout_leftside {
	margin-top: 0px; /* This control the space between "Academic Advising" and "First Year Students"*/
	/*margin-top:40px;*/
	margin-bottom:-15px;
	padding-right: 10px;
	}
		
#right_flyout_1 li {
	letter-spacing: 0em;
	border-top: none;
	border-bottom: 1px solid #fff;
	}
	
#right_flyout_1 li a {
	margin-left: -4px;
	}
	
#right_flyout_1 li a:hover, #right_flyout_1 li a.over {
	background-color:#DDDDDD;
	border-right:5px solid #666666;
	text-decoration:none;
	}	

/*
   ======================================================
   #17# - ACADEMIC ADVISING SERVICES
   ======================================================
*/
	

/*style the icon/images in table menu on index.html*/
#icon{
	position:relative; 
	padding-top:10px; 
	padding-right: 7px; 
	margin-top:0px; 
	z-index:1;
	}
	
#iconSD{
	 
	 height:90px; 
	 width:100px;
	 border-right: 1px solid #FFFFFF;
	 font-size:11px; 
	 vertical-align:text-top; 
	 padding:11px; 
	 margin:0px;
	
	}
	

/*style the title in the table menu on index.html
Academic Checklist, Academic Difficulty...etc*/ 
#title{
	width:100px;
	padding:0px; 
	border-right: 1px solid #BABCB6;
	font-size:11px;
	text-align:center;
	}

#titleSD{
	
	padding:0px; 
	width:100px;
	border-right: 1px solid #FFFFFF;
	font-size:12px;
	text-align:center;
	
	}


/*style the blurb in the table menu on index.html*/
#info{
	text-align:left;
	overflow:visible;
	clear:both;
	vertical-align:text-top; /*This aligns all the text to top of cell*/
	}

/*style the "back to top" in all the sublink; 1st year, 2nd year...etc*/ 
a.submenu {
	position: relative;
	left: 480px;
	}

/*sets the color of hyperlink to be grey. This is use in the blurb in table menu on index.html*/
a.grey { color: #333333; }
a.grey:link, a:active { color: #333333; text-decoration: none; }
a.grey:visited { color: #333333; text-decoration: none; }
a.grey:hover { color: #333333; text-decoration: none; }



/* style the "welcome to SFU" message index.html*/
#welcome {
    text-decoration:none;
	color:#000;
	background-color: #cccccc;
	font-size:11px;
		
}

/* style the rotating caption under main picture in index.html*/
.caption {
	width:415px;
	padding-left: 0px;
    text-decoration:none;
	color:#000;
	background-color: #fff;
	margin-top:20px;
	clear:left;
	position:relative;
	left:-14px;
	font-size:11px;
	}


/*
   ======================================================
   #18# - RECREATION
   ======================================================
*/


/* left side links */

#site_nav {
	width:147px;
	padding:0;
	float:left;
	line-height: 1em;
	font-size:12px;
	margin: 0;
	min-height:295px;
 	height:auto !important;
 	height:295px;
	}

#site_nav a.nava {
	display: block;
	padding: 4px 3px 4px 10px;
	text-decoration: none;
	border-bottom: 1px dotted #bbb;
	color: #000;
	}


#site_nav a.aselected { 
	background-color:#CC0033;
	color: #fff;
	display: block;
	padding: 4px 2px 4px 10px;
	text-decoration: none;
	border-bottom: 1px dotted #bbb;
	} 
	
#site_nav a:hover{
	border-bottom: 1px dotted #bbb;
	margin: 0;
	background-color: #333;
	color: #fff;
	}

#site_nav a.navb {
	display: block;
	padding: 4px 3px 4px 25px;
	background-color:#ccc;
	text-decoration: none;
	background-image: url(/students-resources/recreation new/recreation/images/sub-menu/lv2_bk.jpg);
	background-repeat: no-repeat;
	background-position:left center;
	color: #000;
	border-bottom: 1px dotted #bbb;
	}

#site_nav a:hover.navb{ 
	background-color: #333 !important; 
	background-image: url(/students-resources/calendar-archive/11Summer-calendar/images/sub-menu/lv2_hover.gif);
	}

#site_nav a.navc {
	display: block;
	padding: 4px 7px 4px 37px;
	background-color:#aaa;
	text-decoration: none;
	background-image: url(/students-resources/recreation new/recreation/images/sub-menu/lv3_nav.jpg);
	background-repeat: no-repeat;
	background-position:left center;
	color: #000;
	border-bottom: 1px dotted #bbb;
	}

#site_nav a:hover.navc{ 
	background-color: #333 !important; 
	background-image: url(/students-resources/calendar-archive/11Summer-calendar/images/sub-menu/lv3_hover.gif);
	}
	

/** Main table and buttons - from health.css **/
/** General settings for the tables **/
#palette_rec {
	margin-right:-41px;
	width: 560px;
	}
	
#palette_rec td {
	border: 1px;
	border-color: #FFFFFF;
	width: 25%;
	padding: 5px 5px;
	}
/** The table header buttons **/
.rollover_button_rec {
	color:#FFFFFF;
	font-weight:bold;
	}

.rollover_button_rec a {
	letter-spacing: 0.5px;
	color: #FFFFFF;
	width:100%;
	height:100%;
	display:block;
	color:#FFFFFF;
	font-weight:bold;
	}
	
.rollover_button_rec a:hover {
	text-decoration: none;
	width:100%;
	height:100%;
	display:block;
	color:#FFFFFF;
	}
	
.rollover_button_rec a:visited {
	color:#FFFFFF;
	}		
/** These are the individual colours **/

/* Recreation main page table rollover */	
td#recreation_rollover {
	text-align:center;
	color: #FFFFFF;
	background-color: #7a95ad;	
	}
	
td#recreation_rollover:hover {
	background-color: #2E3192;
	}

/* These are the lower cells with the content */
.news_spot_rec td {
	height: 100px;
	vertical-align: text-top;
	}
	

/** These provide the background colours for the table **/

	
td#recreation_bg {
	background-color: #b7c4d1;
	}

/** Main picture, and the news box beside it and the captions - from health.css **/
#main_picture_rec {
	margin-left: 10px;
	z-index: -1;
	}
	
.caption_rec {
	padding-left: 0px;
	text-decoration:none;
	background-color: #fff;
	color: #000;
	}

/ banner_right /

#banner_right
	{
	position: absolute;
	margin-left: 589px;
	width: 365px;
	height: 76px;
	background-image:url(/students-resources/calendar-archive/11Summer-calendar/images/banner_right.jpg);
	background-position: right top;
	background-repeat: no-repeat;
	}
	
	
/*** requirements page ****/
	
	
h4.reqs  {
		line-height: -90%;
		color: #000;
		margin: 1px;
		padding-bottom: 1px;
	}

/** whiteout code ***/

h1.whiteout { color: #FFFFFF; font-size:2px; }	.clickhere {
	color: #069;
}
Citation {
	font-size: 60%;
}
.bullet {
	font-size: 150%;
}