/********************************************************
* This is the main CSS file for the Scisense web site.  
* DO NOT EDIT THIS FILE!
*
* Created by: Eva Placko (eva@uwo.ca)
* Date:       December 2008
*
***********************************************************/
/*    S C I S E N S E  Web Site  S T Y L E S H E E T      */
/**********************************************************/
/*
            COLOURS USED: 
			
			Red			- #CC0033
			Palest Grey - #E2E7E7   (closest web safe=#CCCCCC)
			Dark Grey 	- #4B4A4A   (closest web safe=#333333)


*/
/***********************************************************				
 *
 * 			Standard HTML tag definitions
 *
 **********************************************************/

/* All fonts on a page will be Arial with size 12 pixels 
   by default unless overriden.
*/
body {
	margin: 0;      /* Define customized values for each element rather than defaults */
	padding: 0;
	font-family:"Times New Roman", Times, serif;
	font-size: 12px;
	color: #000000;
	background: #FFFFFF;
	text-align: center;    /* Center the page in the center of screen in some browsers */
	}

/* Paragraphs will have 1.5 times the letter height between lines,
   no margin, and have padding of 10 pixels at left, bottom and right.
*/	
p {
	line-height: 1.5em;
/*	margin: 0 10px 10px 10px; */
	text-indent: 0;
	}
	
/* Indenting a paragraph - padding of 30 pixels at the left.  */	
p.indent {
	text-indent: 20px;
	}
	
/* This is the text inside a box. */	
p.inABox {
	border: 1px solid #54401F;
	padding: 10px;
	margin: auto;
	width: 400px;
	text-indent: 0;
	text-align: center;
	}
	
/* The following set the link colours.  MUST be defined in this order. */
a {
	color: #cc0033;              
	text-decoration:none;  
	}    /* link shows as red */
a:link { 
	color: #cc0033; 
	}   /* not visited and not moused-over */
a:visited { 
	color: #cc0033;
	}   /* have been visited */
a:hover { 
	color: #cc0033;
	text-decoration: underline; 
	}   /* when moused-over */
a:active { 
	color: #cc0033; 
	}  /* when clicked */

/* **** NOT NEEDED? **** */
/* This section is used to "light up" the appropriate button 
   on the left navigation menu bar depending on the page you are on. */
body#home-page          li a#home,
body#about-us-page      li a#aboutUs,
body#sitemap-page       li a#sitemap
 	{
 	color: #cc0033;	
	/*background: url("../images/button.jpg") repeat-x;	*/
	/*background-color: #ffffff;*/
	/*display: block;*/   /* this will highlight the whole cell background*/
	}
	
h1 {
	font-size: 24px;
	padding: 5px 10px 0px 10px;
	font-weight: bold;
	margin:0;
	color: #4b4a4a;	
	}
	
h2 {
	font-size: 20px;
	padding: 10px;
	font-weight: bold;
	margin:0;
	color: #4b4a4a;
	}
	
h3 {
	font-size: 16px;
	padding: 10px 10px 5px 10px;
	font-weight: bold;
	margin:0;
	color: #cc0033;
	}

h4 {
	font-size: 14px;
	padding: 6px 0px 3px 10px;
	font-weight: bold;
	margin:0;
	color: #4b4a4a;
	}
	
ul.noBullet {
	list-style: none;
	}
		
li {
	line-height: 150%;
	}

hr {
	height: 1px;
	color: #4b4a4a;
	}

/* All images will have no border by default */	
img	{
	border: 0;
	margin: 0;
	padding: 0;
	}
	
/*********************************************************************
 *
 * 			Clearing fixes.
 *
 ********************************************************************/						
/*------------------------ CLEARFIX --------------------------------*/
/* Here follows the brillant "no-extra-markup" clearing method devised by Tony Aslett - www.csscreator.com */
/* simply add the clearfix class to any containter that must enclose floated elements */
/* read the details of how and why this works at http://www.positioniseverything.net/easyclearing.html */
.clearfix:after {
    content: ".";            /* the period is placed on the page as the last thing before the div closes */
	display: block;          /* inline elements don't respond to the clear property */ 
    height: 0;               /* ensure the period is not visible */
    clear: both;             /* make the container clear the period */
    visibility: hidden;	     /* further ensures the period is not visible */
}

.clearfix {display: inline-block;}   /* a fix for IE Mac */

/* next a fix for the dreaded Guillotine bug in IE6 */
/* Hides from IE-mac */
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
/* end of "no-extra-markup" clearing method */				   
  
.clearfloats {
	clear: both;
	height: 0;
	line-height: 0;
	}	
/*------------------- End of Clearing Fixes------------------------------*/ 
	
/***********************************************************************
 *
 * 					Definitions of IDs
 *
 **********************************************************************/
/*===================================================================== 
						THE WHOLE PAGE 
=====================================================================*/ 

/* This encloses the entire page including header, navigation, content
   and footer. */	
#PageBoundary {	
	width: 640px;
	margin-top: 20px;
    margin-left: auto;    /* Center page in the browser */
    margin-right: auto;   /* Center page in the browser */
	text-align: left;	
	/*border: 1px solid #999999;*/
    background-color: #ffffff; 
	border: none; 
	}
	
/* This encloses the entire page - used on article pages, brochures, etc. */	
#PageBoundary2 {	
	width: 680px;
	margin-top: 20px;
    margin-left: auto;    /* Center page in the browser */
    margin-right: auto;   /* Center page in the browser */
	text-align: left;	
    background-color: #ffffff;  
	}
/* ----------------------- Top Search Bar -------------------------

  This is the Search Bar at the top of the display above the header. */
 
#TopSearchBar {
	display: none;
	}	
#TopSearchBar form {
	display:none;
	}
#TopSearchBarTable {
	display:none;
	}	
div#topNav {
	display:none;
	}	
/* ------------------------- Header ----------------------------

  This is the Search Bar at the top of the display above the header. */
		
#Header {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: right;
	background-color: #ffffff;  
	}
/* This is text that should only show up on the printed version. */	
#HeaderForPrint {
	margin: 0;
	padding: 0;
	width: 100%;
	text-align: right;
	background-color: #ffffff; 
	}	
/*==================================================================== 
							CONTENT AREA  
=====================================================================*/ 
	
/* This encloses the Horizontal Navigation Menu (full row), the Vertical  
   Menu Column, the Content Column and the Right Column (if any). 
   The buttonBackground image is used to fill in the navigation
   column with the background colour if the content is longer than
   the navigation bar. */

#ContentArea {
	/*	clear: both;*/
	width: 100%;
	background: none;	
	}
	
#ContentAreaFull {
	width: 100%;
	background: none;			
    }		
/*==================================================================== 
							NAVIGATION  
=====================================================================*/ 	
/* ---------------------- Horizontal Nav Menu ------------------------

  These is the Horizontal Navigation Menu under the header.  It will 
  look like File Folder Tabs. */
  
#HorizontalNavMenu {
	display: none;
	}

/* --------------------- Vertical Menu Column ----------------------

  These is the Vertical Menu column on the left of the display.  
  These links use a JavaScript to expand and collapse. */

#VerticalMenuColumn {
	display: none;
	}	
	
#VerticalMenuList {
	display: none;
	}
#VerticalMenuList2 {
	display: none;
	}						
#VerticalMenuList .treenode,
#VerticalMenuList2 .treenode {
	display: none;
	}
		
#VerticalMenuSubList {
	display: none;
	}	

/*=================== CONTENT COLUMN =============================*/ 	
/* This is the main information column where the content will go. 
   It has a width of 375 pixels and floats left to sit next to the 
   Vertical Menu Column.  */
   
#ContentColumn {
	margin: 10px 5px 0px 10px;
	float: left;
	background-color: #ffffff; 
	width: 640px;
    }
#ContentColumnFull {
	margin: 5px 0px 0px 5px;
	float: left;
	background-color: #ffffff; 
	width: 640px;	
    }
.contentHeader {
	font-weight: bold;
	border-top: 1px solid #999999;
	border-bottom: 1px solid #999999;
	text-indent: 5px;
	margin: 0px;
	padding: 3px 0px;
	}

/*=================== RIGHT COLUMN =============================*/ 	
/* This is the column at the right of the display.  It has a 
   width of 188px and sits next to the Content Column.  */
   	
#RightColumn {
	float: left;
	/* border-left: 1px solid #4b4a4a;*/
	width: 200px;
	background-color: #ffffff;
	padding-left: 7px;
	font-size: 90%;
	}

#RightColumn p {
	margin: 0px 10px 0px 10px;
	line-height: 1.7em;
	text-align:left;
	}
		
/*======================= FOOTER =============================== 	
  This is the footer at the bottom of each web page. */	
   
#Footer {
	display:block;
	font-size: 80%;
	text-align: left;	
	clear:both;
	width: 100%;
	padding-top: 7px;
	padding-bottom: 5px;	
	margin: 0px;
	border: none; 	
    border-top: 1px solid #999999;	
	}

/*======================= COPYRIGHT ============================ 		
  Used for the Copyright message in the footer. */ 
#copyright {
	margin: 0px;
	text-align: center;
	color: #999999;
    }

#copyright a, 
#copyright a:link {
	color: #999999;
	text-decoration: none;
	}  
#copyright a:visited, 
#copyright a:hover,
#copyright a:active {
	color: #cc0033;
	text-decoration: underline;
	}

/* To Top of Page links */		
#topOfPage {
	display: none;
	}
	
/* To HELP file */		
#help {
	float: right;
	padding: 10px 0 0 0 ;
	font-size: 120%;
	text-align: right;
	}
#help a {
	font-weight:bold;
	color: #65A4B6;
	}	
#closeWindow {
	display:none;
	}
/* For displaying errors. */
#errorBoxCentred {
	width: 400px;
    margin: 15px auto;
    padding: 10px 0 10px 0;
    text-align: center;
	background-color: #ffffff ;
	color: #CC0066;
	border: 1px solid #003300;
   }	
	
#errorBox {
	width: 400px;
    margin: 15px;
    padding: 10px 0 10px 0;
    text-align: left;
	color: #CC0066;
	border-top: 1px solid #CC0066;
	border-bottom: 1px solid #CC0066;	
	}	
	
/**************************** TABLES  *********************************/

table#table1b {
	width: 550px;
	margin: 5px 0 0 0;
	border: none;
	border-collapse:collapse;
	
	}
table#table1b th { 
	text-align: left;
	font-weight: normal;
	font-size: 80%;
	}	
table#table1b td { 
	padding: 15px;
	border: none;
	}
table#table1b .rightBar {
	border-right: 1px solid #000000;
	}	
	
table#distributors {
	width: 100%;
	padding: 3px;
	line-height: 1.0em;
	/*border: 1px solid #cccccc;*/
	border-collapse: collapse;
	}
table#distributors td {	
	border-bottom: 2px solid #cccccc;
	}
table#distributors td.atCenter {
	text-align: center;
	vertical-align: middle;
	}	

table#formTable th {
	background-color:#cccccc;
	}
	
table#brochures {
	width: 100%;
	border: 1px solid #cccccc;
	border-collapse: collapse;		
	}
table#brochures th {
	border: 1px solid #cccccc;
	padding: 5px 10px;
	color: #999999;
	text-align:left;
	}
table#brochures td {
	border-right: 1px solid #cccccc;
	padding: 0px 10px;
	text-align:left;
	}	
	
table#articles {
	margin: 0px;
	width: 680px;
	border-collapse: collapse;	
/*	border: 1px solid red;	*/
	}
table#articles th {
	color: #999999;
	text-align:left;
	}
table#articles td {
	padding-left: 5px;
	text-align:left;
	}		
table.controlUnits {
	width: 100%;
	border-collapse: collapse;		
	}
table.controlUnits th {
	border-top: 1px solid #cccccc;
	border-bottom: 1px solid #cccccc;	
	padding: 5px 10px;
	text-align:left;
	font-weight:bold;
	}
table.controlUnits td {
	padding: 0px 10px;
	text-align:left;
	}				

table.catheterTable {
	width: 100%;
	border: 1px solid #cccccc;
	border-collapse: collapse;
	}		
table.catheterTable th {
	padding: 3px;
	font-weight: bold;
	vertical-align:top;
	border: 1px solid #cccccc;	
	}	
	
table.catheterTable td {
	padding: 3px;
	vertical-align:top;
	border: 1px solid #cccccc;
	font-size: 10px;
	}			
			
/*********************End of  TABLES  *********************************/		

/*=============== IMAGES ==========================/ 
/* Image floats right, text will wrap to the left of it. 
   Margin at left. */	
img.atRight { 
	float: right;
	margin: 30px 10px 0 10px;
	}
/* Image floats right, text will wrap to the left of it.  
   Margin at right. */
img.atRightWithMargin  {
	float: right;
	margin: 0 15px 10px 10px;
	}
img.atRightWithMargin2  {
	float: right;
	margin: 15px 15px 15px 10px;
	}	
/* 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: 0 10px 5px;	
	}	
/* 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: 10px 20px auto;
}	
/*=============== END OF IMAGES ==========================/ 
/***************** FORMS ********************************************/
/*----------------------- General for all forms --------------------*/
form {
	margin: 5px 20px 10px 15px;     /* Space around the form.  Width adjusts with window size.*/
	padding: 5px 10px 5px 10px;               /* Space inside the top of the form before start of items */
	font-size: 12px; 
	}
/* Starts next item on a new line after a BR */
form br {
	clear: left;
	}
/* This affects the form's LABEL field.  In this case, no Width is specified so
   by default, labels are varying lengths. */				
form label {
	padding-right: 10px;	
    padding-top: 5px;
	margin-bottom: 10px;
	/* If you have a WIDTH defined, all lables are the same width. */
	/* If there is No WIDTH defined, labels are varying lengths. */ 
	text-align: right;
	color: #000000;          
	/*height: 10px;*/        /* The HEIGHT attribute doesn't seem to do anything here */
	float: left;     
	}	
		
/* This affects the Input boxes, Radio buttons and Checkboxes 
   as well as the Submit buttons. */
form input {
 	float: left;                 /* With this setting, radio buttons are displayed horizonatally
	                                with the label after a radio button displayed to the right 
									of the radio button. */									
	/* The following only affect Input boxes and Submit buttons. */
	/*width: 50px;                 /* This OVERRIDES the Size="" in the <input type="text"> tag.*/
	text-align: left;          /* This and other text formatting affects the text typed into the input box */
	margin-right: 5px;
	}
	
/* This affects the form's LEGEND field.  The legend must be
   used within a Fieldset block.  If there is no Fieldset, the
   Legend tags will cause an error in the HTML validation.  
   The following apply to the Legend text.
   */
form legend {
	padding: 10px 10px 10px 10px;
	margin: 10px;
	font-size: 16px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bold;
	color: #333333;	
	}
	
/* This is the width of the fieldset within the form */
form fieldset {
	padding-top: 10px;
	width: 97%;
	margin: 0 auto;   /* This centres the fieldset in the form */
	background-color: #ffffff;
	color: #333333;
    /*background-color: #E2E7E7;*/
	}
	
form textarea {
/* If the following is uncommented, the text box starts on a new line */
/*	margin-left: 180px; */ /* text box starts 180px from the left */
	float: left;
	}	
	
form select {
	float: left;
	}
/* This is used in the Label tag as <label for="" class="fixedWidth">, or in the 
   Input tag as <input type="text" class="fixedWidth"> or in the
   Submit buttons as <input type="submit" class='fixedWidth">.
   This makes the item the defined width. 
   If no "class=fixedWidth" is specified in the Label or Submit button tag, 
   the size of the item varies with the length of the text.
   If no "class=fixedWidth" is specified in the Input type="text" tag, 
   the size of the item takes the value in the tag's Size="" parameter.
   */
.fixedWidth {
	width: 150px;
	}
.submit {
	text-align: center;
	}				
/* ------------------ End of general FORMS --------------------------*/	

/* ------------------ SPECIFIC forms ------------------------------ */		

/* This is for the Feedback and Order forms.  Currently they use the 
   same definitions. */
form#feedback, #orderForm, #registerForm {
	margin:0 auto;	
	width: 100%;
	/*border: 1px solid #000000;*/
	/*background-color: #E2E7E7;*/
	}	
	
/* This is for the Close button forms.*/		
form#closeButton {
	display:none;
	}		
		
/* This is for the Newsletter subscribe/unsubscribe forms.*/
form#newsletterForm {
	/*background-color: #E2E7E7;*/
	border: 1px solid #4B4A4A;
	}
form#newsletterForm fieldset {
	border: none;
	background-color: #FFFFFF;
	}	
/******************** End of FORMS **********************************/		

/**********************************************************
 *
 * 			Class definitions
 *
 **********************************************************/
.highlight {
	color: #cc0066;
}
/* ONLY DISPLAYS if the browser doesn't support CSS.  
   The text between the .alt will normally not show up.*/
.alt {
	display: none;
	}
.caption {
	font-size: 90%;
	}
.smallText {
	font-size: 80%;
	}
.requiredMark {
	color:#FF0000;
	}

.treemenu {
	margin : 0px 20px;
	padding : 10px;
	list-style : none;	
	background-color : #EEE;
	border : 1px solid #000;
	width : 200px;
}

.treemenu ul {
	list-style : none;
	margin : 0px 10px;
	padding : 0px 10px;
}

.treemenu li {
	display : inline;
}

.treemenu a {
	display : block;
	padding-left : 12px;
	text-decoration : none;

}

.treemenu .treeopen {
	background-repeat : no-repeat;
	background-position : left;
}		

.treemenu .treeclosed {
	background-repeat : no-repeat;
	background-position : left;
}
.style1 {
	color: #0099FF;
	font-weight: bold;
}

.introText {
	color: #cc0033;
	}

.bottomLine {
	border: 1px solid #CC0066;
	}

.menuTitle {
	margin: 10px;
	font-size: 120%;
	font-weight:bold;
	border-bottom: 2px solid #000000;
	}
	
.topLink {
	display:none;
	}