/************************************************************************
* This is the customized CSS file for the Faculty of Science web site.  
*
* Created by: Sue Barschel, modified by Eva Placko (eva@uwo.ca)
* Date:       June 2006
*
***********************************************************/

/* Use this page to overwrite styles found in standard1.css 
   - DO NOT CHANGE standard1.css */

/***********************************************************				
 *
 * 			Standard HTML tag re-definitions
 *
 **********************************************************/
/*  These are added to/override the definition in standard1.css */	
h1 {
	font-size: 20px;
	font-style: italic;
	font-weight: bold;
	color: #660099;
	margin: 10px 0 10px 10px;
	}
/*  These are added to/override the definition in standard1.css */
h2  {
	color: #660099;
	font-size: 16px;
	margin: 5px 0 10px 10px;
	}
/*  These are added to/override the definition in standard1.css */
h3  {
	color: #000000;
	font-size: 14px;
	margin: 5px 0 5px 10px;	
	}
/*  These are added to/override the definition in standard1.css */
h4  {
	color: #660099;
	font-size: 12px;
	margin: 5px 0 5px 10px;	
	}	
p {
    margin-left: 10px;
	}
p.indent {
	margin-left: 50px;
	}
/*--------------------- End of Standard tag definitions -------*/

#wordmarkForPrint {
	display: none;
	}
	
/* The top navigation bar and drop-down menus */
#nav {
   clear: both;
	padding: 0 0 0 6px;
	margin: 0;
	list-style: none;
	width: 740px;
	height: 20px;
	background:#609;
	margin-bottom: 5px;	
	}	
#nav ul {
	padding: 0;
	margin: 0 0px 0 0px;
	list-style: none;
	}
#nav a {
	display: block;
	color:#FFFFFF;
	text-decoration:none;
	}
#nav li {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	background:#609;
	font-weight:bold;
	float: left;
	padding: 0 0px 0 2px;
	}
#nav li a:hover {
	color:#c9f;
	text-decoration: none;
	}
/*Drop down menu tags*/
#nav li ul {
	position: absolute;
	width: 125px;
	left: -999em;
	border: 1px solid #609;
	}
#nav li ul li {
	width:119px;
	font-family:Arial, Helvetica, sans-serif; 
	font-weight:normal;
	border-bottom: 1px solid #609;
	clear:left;
	padding: 3px;
	background: #fff;
	}
#nav li ul li a {
	color: #609;
	font-size:12px; 
	background-color:#fff;
	display:block;
	}
#nav li ul li a:hover{
	color: #609;
	background-color:#ccc;
	margin:0px;
	display:block;
	}
/* End of top navigation bar and drop-down menus */

#leftcol{
	width: 150px;
	margin: 0;
	padding: 0;
	}
#secondCol {
	float: left;
	padding: 0;
    width: 590px;
	margin: 0;
	}
	
/* These are for the site map page */	
#twoCols{
	display: block;
	float: left;
	width: 740px;
	padding: 0;
	border: 0;
	}
#col1{
	float: left;
	width: 360px;
	border: 0;
	padding: 0 0 0 3px;
	}
#col2 {
	float: left;
	width: 360px;
	margin: 0;
	padding: 0;
	}	
		
	
/* ---------- Top navigational buttons for Career pages ------*/
/*            NOT CURRENTLY USED */	

#listWithBullets, 
#listWithBullets ul { 
	list-style:circle;
	}
#listWithoutBullets, 
#listWithoutBullets ul { 
	list-style:none;
	}
#careerTopMenu,
#careerTopMenu ul { 
	list-style: none;     /* No bullets */
	}	
/* All list items (ul li). If no definition is found for 
   lower level list items, these settings will be used.*/
#careerTopMenu li { 
	/*--If the following line is removed, the buttons are 
	    on top of each other vertically, not horizontally */
	font-size: .9em;
	padding: 0 4px;
	border-right: 1px solid #330099;
	display:inline;    /* The menu items appear horizontally instead of vertically */	
	/*border : 1px solid yellow;*/    /*for debugging */	
	}
/* Button when not moused over - initial state */
#careerTopMenu li a {
	/*--Width of un-moused button in the list item width */  
	/*width: 10em;*/		
	color : #330099;
	font-weight : none;
	text-decoration : none;
	background-color : #FFFFFF;
/*	width: 70px;*/
	/* The following was causing the menu in IE to wrap (i.e. didn't fit)
	   Each button was 145 pixels wide instead of 130 as specified.
	   When it is commented out, each button is now 130 pixels in IE
	   as it should be.
	   Is this part of the IE BOX MODEL problem?????*/
    /*	padding : 0 0.5em; */ 
	/*--Menu text is centered in first drop-down menu */	
	text-align: center;   
	}
/* Button when moused over.  Uses definition from 
   "#nav li a" above and adds/overrides the following: */	
#careerTopMenu li a:hover {
		background-color : #FFFFFF;
		color: #CC0033;	
	}
/* ---------- End of top navigational buttons for Career pages ------*/	

/* This is a list used that is used as a navigation box at the left */	
#generalItemsList  {
	background-color: #CCCCFF; 
	border-left: 1px solid #000000;
	}
#careerGeneralLinks {
	background-color: #CCCCFF; 
	border-left: 1px solid #000000;
	}
#iipGeneralLinks {
	background-color: #ffcc99;
	border-left: 1px solid #000000;
	}	
#researchLinks {
	background-color: #d1edf8;
	border-left: 1px solid #000000;
	}	
#undergradsLinks {
	background-color: #e8d9ed;
	}	
#gradsLinks {
	background-color: #ffccff;
	}	
#counsellingLinks {
	background-color: #8cd6f8;
	}	
#outreachLinks {
	background-color: #ccffcc;
	}
#facultyStaffLinks {
	background-color: #ffffcc;
	}
#alumniLinks {
	background-color: #ffcccc;
	}	
#publicationsLinks {
	background-color: #D3BDA8;
	}
#bmscGeneralLinks {
	background-color: #bbf8e6;
	}
#welcomeLinks {
	background-color: #e8d9ed;
	}		
#generalItemsList li,
#careerGeneralLinks li,
#iipGeneralLinks li,
#researchLinks li,
#undergradsLinks li,
#gradsLinks li,
#counsellingLinks li,
#outreachLinks li,
#facultyStaffLinks li,
#alumniLinks li,
#publicationsLinks li,
#bmscGeneralLinks li
 {
/*	padding: 0 5px 0 10px; */
	margin: 0px 3px 0px 10px;
	padding: 2px 0 3px 0;
	}
/* This class is the heading of the above lists.
   These are added to/override the definition in standard1.css */	
.general_items {
/*	border-left: 1px solid #000; */
	margin: 10px 0px 0px 0;
	}	
.nav_about_box {
	padding: 0;
	margin: 0;
	}
#disciplinesList  {
/*	list-style: none;	*/
/*	border: 1px solid blue; */ 
	width: 40%;
	float: left;
	}
		
#disciplinesList li {
	font-size:12px;
	padding-left: 10px;
	margin-left: 30px;
	}
#spaceBetweenItems li {
	padding-bottom: 10px;
	}
#highlightBox {
    margin: 15px 30px;
	border: 1px solid #660099;
	}		

/*************************** FORMS ****************************/
/*----------------------- General for all forms --------------*/
form { 	
	margin: 15px 10px 40px 10px;
	padding-top: 10px;
	font-size: 14px; 
	width: 90%;
 	}
 
/* Starts next item on a new line after a BR */
form br {
	clear: left;
	}
		
/* The form's LABEL field  */				
form label {
/*	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
	padding-right: 10px;	
    padding-top: 5px;
	height: 10px;
	display: block;
	float: left;	
	margin-bottom: 10px;	
	width: 210px; */ /* how wide the label field is */	
	}	
/* This seems to control the radio button label position
   (beside button, rather than under button) */
form label, input {
	float: left; 
	}
/* The form's LEGEND text */
form legend {
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	padding: 10px 10px 20px 10px;
	font-weight: bold;
	margin:0;
	color: #660099;
	}
form fieldset {
	width: 90%;
	margin: 0 auto;   /* This centres the fieldset in the form */	
/*	width: 720px;*/
	}	
form textarea {
/* If the following is uncommented, the text box starts on a new line */
	margin-left: 120px; /* text box starts 180px from the left */
	float: left;
	}	
form textarea .alignLeft {
	text-align: 10px; 

	}		
form select {
	float: left;
	}		
/* ------------------ End of general FORMS --------------------------*/		

/*-------------------------- SPECIFIC FORMS -------------------------*/
/* Form with this ID name will have a pale blue background */
form#iipForm { 
	background-color: #ffcc99;
	}
form#iipForm label {
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
	padding-right: 10px;	
    padding-top: 5px;
	height: 10px;
	display: block;
	float: left;	
	margin-bottom: 10px;	
	width: 210px;  /* how wide the label field is */	
	}	
	
form#connectForm {  
	padding: 0;
	}		
form#connectForm  label {
	font-family: Arial, Helvetica, sans-serif;
	text-align: right;
	padding-right: 10px;	
    padding-top: 5px;
	margin-bottom: 10px;	
	width: 150px;  /* how wide the label field is */
	}		

form#search {
	font-family: Arial, Helvetica, sans-serif;
	text-align:left; 
	font-size:12px; 
	}
					
form#search label, input {
/*border: 1px solid red;	*/
	}
	
form#infoForm { 
	background-color: #cccccc;
	}	
		
/* ------------------ End of SPECIFIC FORMS -------------------------*/		
	
/* ------------------ FORM classes --------------------------------- */	
form .fixedWidth {
	width: 140px;
	}


/* Used for Buttons. Button is 120px wide. */
form .submit {
	width: 120px;
	margin: 10px 5px 15px 0;
	text-align: center;
	}	
/* Used as "class="radioButton". Smaller width for the radio button. */	
form .radioButton {
	width: 30px;
	text-align: left;
	}
/* This puts the submit button on the same line rather than below. 
   Overrides "form label, input" definition above.  */	
form .inline {
	float: none; 
	margin: 0 0 0 20px;
	}

/* ------------------ End of FORM classes --------------------------*/		
/******************** End of FORMS **********************************/		

/*************************** TABLES ****************************/

table {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	width: 90%;
	margin: 10px;
	padding: 0px;	
	}
table th {
	text-align:left;
	background-color:#CCCCCC;
	padding-bottom: 5px;	
	}
table td {
	padding-bottom: 5px;
	border-bottom: 1px solid #cccccc;
	}	
#participantTable {
	margin-left: 10px;
	}
#participantTable td {
/*	border-bottom: 1px solid #000000;
	border-right: 1px solid #000000; */
	padding: 10px;
	text-align: center;
	vertical-align: bottom;
	}
#formTable td {
	border: none;
	}


/********************** End of TABLES ****************************/
	
/*=============== IMAGES ==========================*/ 
/* Image floats right, text will wrap to the left of it. 
   Margin at left. */	
img.atRight { 
	float: right;
	margin: 0 0 0 10px;
	}
/* Image floats right, text will wrap to the left of it.  
   Margin at right. */
img.atRightWithMargin  {
	float: right;
	margin: 0 10px 10px 0;
	}
/* Image floats left, text will wrap to the right of it.  
   Margin at right. */		
img.atLeft { 
	float: left;
	margin: 0;	
	}
img.atLeftWithMargin { 
	float: left;
	margin: 10px 10px;	
	}	
/* Image floats left, text will wrap to the right of it. 
   No margins. */		
img.atRightBottom { 
	float: right;
 	position: inherit;
 	right: 0px;
 	bottom: 0px;
 	}
img.atCenter {
	margin: 0 0 0 100px;
}	
/*=============== END OF IMAGES ========================== */ 
.pic{
float:left;
padding:0 5px 5px 0;
}
.text{
clear:right;
padding-bottom:30px;
}

.story{
width: 90%;
padding-bottom:50px;
}
.highlight {
	font-weight: bold;
	color: #FF0000;
	}
.careerColour {
	background-color: #ffcc99;
	}
.iipColour {
	background-color: #CCCCFF;	
	}	
.topOfPage, .backLink {
	text-align: center;
	font-family:Arial, Helvetica, sans-serif;
	font-size: 75%; 
	}

.blueTitle {
	font-family: Arial, Helvetica, sans-serif; 
	font-size: large; 
	font-weight: bold; 
	color: #000099;
	}
.quotation {
	font-size: 110%;
	background-color: #cccccc;
	text-align: center;
	}