/*--------------------------------------------------------------------------------
 * Main EHS@SFU CSS template. Updated for SFU_Header testing
 * Covers the page layout for the essential fixed elements
 * Such as Body, Backgrounds, SFU header and Footer
 * See EHS.CSS for EHS specific page layout
 *  Angelo Sozzi (asozzi at sfu dot ca)
 * V0.8 from the 9.Feb.2006
 ******Changelog*************

- Striped to essentials for SFU_Header testing
-----------------------------------------------------------------------------------*/

/*********--- Main Page container elements ---*********/

/* Set all margins and padings to zero*/
*{	margin: 0; padding: 0; }

/* Set the overall body background and page fonts.*/
body {  
	font-family: Arial, Helvetica, Verdana, sans-serif;
	font-size: 0.8em;					/*Textsize at 80% for entire page*/
	color:#000000;						/*Black text*/
	background-color: #A7A8A0;			/*Background Grey*/
}
/* page container for shadows */
#pageContainer {
  width: 100%;
  background: #E2E1E1 url(../img/pageContainer_bg.gif) repeat-y center; /* shadows along side*/
  text-align:center;  /* Unobstrusive Win IE5 hack to center Container on Page */
}

/*Main autocentered page content. Faux column method for left navigation backgrd.
If it is not needed set "#container{background-image: none;} "*/
#container {
	width:980px;
	height:auto;
	margin: 0 auto; 						/* auto centering of Container */
	background:#FFFFFF;
	text-align:center;
	background-image: url(../img/containerColumn_bg.gif); /*Left Navi background*/
	background-repeat: repeat-y;
	border-top: 5px solid #2E3192;			/* the topmost blue ribbon */
}
/* For the copyright and stuff*/
#footer {
	position: relative;
	clear: both;
	height: 25px;
	padding: 2px 0 5px 0;
	background: #B6B7B1;
	font-size:1em;
	text-align: center;
	line-height:25px;
	color: #FFF;
}
/* Make links in the footer non changing  */
#footer a, #footer a:link, #footer a:visited {
	text-decoration: none;
	color: #FFF;
}
#footer a:hover {
	color: #FFF;
	text-decoration: underline;
}	
/* Bottom shadow, alos stops the #pageContainer background image from runing too far */
#pageFooter {
  width: 100%;
  height: 25px;
  background: #A7A8A0 url(../img/pageFooter_bg.gif) no-repeat top center; /* botom shadow*/
  text-align: center;
}

/**************--- SFU logo Banner ---*************************/
  
/* Contains the to banner, use 960px wide since left border is 20px allready */
#banner {
	width:auto;
	height:70px; 						/*fixed banner height*/
	border-left: 25px solid #A43E31; 	/* the lovely darker red red bar on the left*/
}
/*The logo parts */
#SFUlogo{  /* SFU logo at the left 465px + 25px border */
	float:left;
	width:465px;
	height:70px;
	border-left: 25px;
}
#EHSlogo{ /* EHS logo at the right 490px  */
	float:right;
	width:490px;
	height:70px;
}

/* Make the invisible overlays clickable but not show up or outline in any way  */
#banner a, #banner a:link, #banner a:visited, #banner a:hover, #banner a img {
	text-decoration:none;
	padding: 0px; border: none; 		/* No border for the invisible gif overlay  */
	background: none;
	}
/**************--- SFU Navbar components  ---*********/

/*  Nav bar outline*/	
#SFUnavbar {
  font-size: 1.21em;					/*  Make sure the stuff in the header is legible, since body is 0.8em*/
  line-height:1em;
  float:left; 							/* Needs to be float to adapt size */
  background: #B5111A;
  border-left: 25px solid #CB5A60;		/* left redish border */
  color:#FFF;} 							/*White text reads better on red backgrd*/
  
/* SFUnavUL, the SFU, Surrey etc links with pipes, Adapted from www.alistapart.com */
#SFUnavUL li {
  display:inline;
  float:left;
  list-style-type:none; /*Suppress Li diamond */
  padding: 0 10px 0 0; 	/* distance end of link to pipe*/
  margin-right: 10px; 	/* distance pipe to next link*/
  background: url(../img/SFUnav_pipe.gif) 100% 20% no-repeat; /*place pipe center right of li box */
  }	
#SFUnavUL li a {
  display:block;
  color: #FFF;
  text-decoration:none;
  padding:6px 0px 8px;
  border-bottom:16px solid #B5111A;
  }
  
/* Treat SFU.CA special, no pipe, bold and extra padding*/
#SFUnavUL #vancouver {background: none;}
#SFUnavUL #sfuca {
  font-weight: bold;
  background: none;
  padding: 0 30px 0 40px; /* use padding instead of margin since IE adds margins for some reason*/
  }  
/* The bottom Salmon bar when hovering*/
#SFUnavUL a:hover,
	.sfuca #SFUnavUL #sfuca a,
	.burnaby #SFUnavbar #burnaby a,
	.surrey #SFUnavbar #surrey a,
	.vancouver #SFUnavbar #vancouver a {
  border-bottom:16px solid #CB5A60; 
  color: #FFF;
}
/************Check bottom of file for drop-menu*******************/

/*------------------------------------------------------ 
The SFU Search form,
------------------------------------------------------*/   
 /* remove the ugly outlines */
#SFUnavbar form fieldset  { border:0 solid;  }

#SFUnavbar form {
  display: inline-block;
  
  text-align: right;
  float:right;
  padding:4px 10px 0 10px;}
  /* IE star fix for collapsing left margin (distance pipe to SFU search)*/
  * html #SFUnavbar form  {padding-left:10px;
  width: 12.6em;  /*needed for IE to constrain the Form box */
 }	
#SFUnavbar #s {
  height:1.2em;
  width:100px;
  padding:0; border:0;
  font-size:1em;
  vertical-align:middle;
}

/****** Crossbrowser CSS only Drop menu adapted from ********/
/* http://www.cssplay.co.uk/menus/final_drop3.html 			*/
/* look there if multilevel dropdowns are needed 			*/

/* style the outer div to give it width */
.menu {
  float: right;
  font-size:15px;
 /* height:3em; */
  }
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
  padding:0;
  margin:0;
  list-style-type: none; 
  background:#B5111A;
  }
/* style the sub-level lists  */
.menu ul ul {width:5em;}

/* float the top list items to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu ul li {
  width:5.2em;
  display:block;
  float:left;
  z-index:200;
  padding: 0 8px 0 0; /* distance end of link to pipe*/
  background: url(../img/SFUnav_pipe.gif) 100% 20% no-repeat; /*place pipe center right of li box */
  }
/* style the sub level list items*/
.menu ul ul li {
  display:block;
  width:5em;
  height:auto;
  position:relative;
  line-height:1em;
  background: none;
  }
/* style the links for the top level */
.menu a, .menu a:visited {
  display:block;
  float:left;
  width: 100%;
  height:100%;
  font-size:15px;
  text-decoration:none;
  color:#FFF;
  background:#B5111A;
  padding: 6px 0 8px 0;
  border-bottom:16px solid #B5111A;
  }
/* style the sub level links */
.menu ul ul a, .menu ul ul a:visited {
  display:block;
  background:#CB5A60; 
  color:#FFF;
  width:5em;
  height:100%;
  line-height:1em;
  border:0; 
  padding:0.3em 0.5em; /* change padding for IE below*/}
.menu ul table ul a, .menu ul table ul a:visited  {width:6em; w\idth:5em; 
}
/* IE specific: style the table so that it takes no part in the layout - 
required for IE to work, also add z-index here or it will render belo other relative content */
.menu table {position:absolute; left:0; top:0; font-size:1em;}
.menu ul ul table {lef\t:-1px;}
.menu ul ul table ul.left {margin-lef\t:2px;}
.menu li:hover {position:relative; z-index:200;}
* html .menu a:hover {position:relative; z-index:200;}

/* style the level hovers */
/* first */
.menu a:hover {border-bottom:16px solid #CB5A60;}
.menu :hover > a {border-bottom:16px solid #CB5A60;} /*IE*/
/* second */
.menu ul ul a:hover{color:#000;background:#B5111A; border:0;}
.menu ul ul :hover > a {color:#000;background:#B5111A;} /*IE*/

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
  visibility:hidden;
  position:absolute;
  height:0;
  top:45px; /*top of the dropdown list, use px for usability at font size changes*/
  left:0;
  width:5em;
  }
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul {
  visibility:visible; 
  height:auto; 
  padding-bottom:3em; 
  background:transparent url(../img/transparent.gif);
  }
/*Override width for A-Z funny size so we have 8 letter lines in FF and IE (IE box expansion bug with the padding a=1.2 em instead of 1em)*/
#AtoZ {width:9.8em;} 
/*Resize  width for AtoZ so they can float inside the ul*/ 
#AtoZ li{width:1em; padding:0; margin:0;}
/* Change the boxes of the A-Z links so they float in 3 rows*/
#AtoZ a{
  font-size:0.8em;
  text-transform:uppercase;
  width:1em;
  padding:0.2em 0.13em;} /* change padding for IE below*/
.menu ul table #AtoZ a, .menu ul table #AtoZ a:visited  {width:1em; w\idth:1em; margin:0; padding:0.2em 0.13em;
}




/*------------------------------------------------------ 
Three Column 195px/790px(590px/195px) Layout (Main EHS homepage) 
Should probably be moved into the EHS.css file
To shut off left column bg_image set "#container{background-image: none;} "
------------------------------------------------------*/
/* the left column (navigation) background is set in #container*/
 #NavColumn{
  text-align:left;
  width:195px;
  float:left;
  position:relative;
 }
/* contains whatever may be on the right of the page*/
 #ContentWrapper{
  width:780px; /* 790-5px for a 5px virtual gutter*/
  float:right; 
  position:relative;
  text-align:left;
 }
/* The following two whould be within the #twocols to make sense*/
/* column for additional news etc.*/
#SecondaryContent{
 width:195px; 
 float:right; 
 position:relative;
 z-index: 58;
 }
 /* The main content column*/
#MainContent{
 background-color: #FFF;  
 float: left; 
 display:inline; /* othwerwise it will be below #rightcol*/
 position: relative; 
 /*
padding: 10px 10px 10px 20px; 
*/
 width:585px; /* #twocols - #rightcol (800px-190px=610px-paddingRL)l*/
 }
 /* Insert some space below the menu, may have a better solution but it works*/
 .clear {
  height: 1px;
  clear:both;
  }