/* BioAnalyte Blue Design based on original table-based layout. Sandra Mello, January, June, Sept 2008*/

/* To quickly find styled sections use ' =NAV'  in find. */

/* Elements are styled in the following order: 

RESET browser defaults

GENERAL Styles from larger to specific: html to td. 
Anchor LINKS

TOOLS

BRANDING

NAVigation


CONTENT

MAIN

LIST for list styling within the main area

MAINSpecial  for special styling within the main area

SUBNAVigation aka Local navigation menus

SITEINFO 

WIDE for pages without sidebars (such as the site map, fair-use, or privacy policy) 

LANDING wide pages styled for links from newsletters.

HCARD	

FORMS styling for pages with forms


*/



/* =RESET browser defaults for more predictable cross-browser beahavior. Using Eric Meyer's css reset from 12 February 2008. Setting font-size to 100% (usually 16px default) assures IE6 and 7 will handle size changes correctly. */


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;           /* needed for cross-browser compatibility */
	vertical-align: baseline;
	background: transparent;
}

/* Use #B0C5E0 blue background when dropping or changing the background image to another gradient. Removed original gradient from background: #FFFFFF url(../images/backgroundgradient.jpg) repeat-x */
body {
	line-height: 1;	  /* this is the factor by which line height is calculated. It should be set to 1 in the body. Using normal also works but with wildly differing output in different browsers */
	background-color: #AAC6D2; /* same color is used as navigation background */
	font: normal 100% Verdana, Arial, Helvetica, sans-serif;
	color: #2D2D2D;
}


ol, ul, dl{
	list-style: none;
}


blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}


/* See www3 specification on using inserts and deletes. Remember to somehow highlight inserts! */
ins {
	text-decoration: none;	
	color: green;
}


del {
	text-decoration: line-through;
}


/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* each page should have one link to its author, usually an e-mail link */
address {
	display: inline;
}

strong {
	font-weight: bold;
}



/* =GENERAL styling 
----------------------------------------------- */

/* =LINKS /anchors - global styles. The order these are listed in this style sheet is important, although there is some disagreement on placing 'focus' before or after 'hover'!!! ------------------------------------------------------------------------------ */

a:link {
	text-decoration: underline;
	color: #1F527B;
}


a:visited {
	color: #5C88A5;
}


a:hover {
	text-decoration: underline;
}

/* Accessibility aid for keyboard and certain assistive device users. IE6 and 7 do not support this pseudo-class */


a:focus {
	color: #1F527B;
	font-weight: bold;
	text-decoration: underline;  /* was 	outline: .5em; until 3Feb09 - haven't uploaded yet */
}



/* IE through IE7 has no support for the pseudo-class focus; it uses active instead */

a:active {
	color: #B52939;
}


/* =TOOLS Accessibility links and link to Site Map 
---------------------------------------------------------- */

#tools {
	width: 770px;
	margin: 0 auto;
	padding: 0;
	font-size: 0.75em;
}

#tools h2.nav {
	position: absolute;
	left: -200em;
	top: -2em;
}


#tools ul {
	margin: 0;
	padding: 0;	
	color: #646464;
}


#tools li {
	display: inline;
}


#tools a {
	padding: 0 10px 3px 10px;
	color: #F0F0F0;
	text-decoration: none;
}

#tools a:hover, #tools a:active {
	text-decoration: underline;
}


/* =BRANDING 
---------------------------------------- */

#branding {
	width: 770px;
	height: 98px;
	margin: 0 auto;
	padding: 0;
	background: #FFFFFF;
	color: #000000;
}

#branding p {
	padding: 0;
	margin: 0;
}


#branding a {
	background: transparent;
	text-decoration: none;
	display: block;
	padding: 0;
	margin: 0;
}


/* =NAV global navigation menu. 
------------------------------------------- */

#navigation {
	width: 770px;	
	height: 30px;
	margin: 0 auto;
	padding: 0;
	background-color: #AAC6D2 ;    /* same as body background color */
}

#navigation h2.nav {
	position: absolute;
	left: -200em;
	top: -5em;
}


#navigation ul {
	margin: 0;
	padding: 0;
	list-style: none;
}


#navigation li {
	display: inline;
}


#navigation li a {
	display: block;
	float: left;	
	margin: 0;
	padding: 8px 20px 5px 20px;
	border-right: thin dotted #DFE7F2;
	text-decoration: none;
	font: .875em "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000000;
}

#navigation li a:hover {
	color: #9A0000;
}

#navigation li a.active {          
	background-color: #FFFFFF;
	color: #901A1F;
	font-weight: bold;
}
#navigation li a.blog { 
	display: block;
	float: right;	
	margin: 0;
	padding: 8px 20px 5px 20px;
	border-left: thin dotted #DFE7F2;
	text-decoration: none;
	font: .875em "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000000;

}


/* =CONTENT containing block for the floated main content and the sidebar/local navigation. Two-column format, one column if the sidebar is left off. 
------------------------------------ */

#content {
	width: 770px;
	margin: 0 auto;
	padding: 0;
	background: #FFFFFF ;
}


	


/* =MAIN content area. Floated.
------------------------------------- */

#main {
	float: right;
	width: 510px;	
	margin: 0;	
	padding: 30px 40px 30px 35px;	
}


#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
	font-weight: 700;
	color: #2D2D2D;
}


#main h1 {	
	margin: 0 0 10px 0;
	padding: 0.3em 0 0.3em 0.5em;
	font-size: 1em;
	background: #DFE7F2;
	color: #000000;
}

#main h2 {	
	margin: 15px 0 5px 0;
	font-size: 0.875em;
	border-bottom: 2px solid #B0C4DE;
}

#main h1 a, #main h2 a {
	text-decoration: none;
}


#main h3, #main h4, #main h5, #main h6 {	
	margin: 15px 0 5px 0;
	font-size: 0.750em;
}


#main p  {
	padding: 0.5em 0 1em 0;
	font-size: 0.750em;
}

#main img {
	display: block;
	border: none;
	margin: 0 auto;
	padding: 0;
}

#main blockquote {
	padding-left: 20px;
	border-left: 1px dotted #B0C4DE;
	font-size: 0.750em;
}

#main pre, #main code {
	padding: 1em;
	border: thin solid #B0C4DE;
	font-size: 0.750em;
}


/* =LISTS Styling for unordered and lists within the "main" div. Using em for font sizes is very tricky - change with care! */
#main ul {
	padding: 10px 0 0 40px;
	list-style-type: square;
	list-style-image: url(../images/bluesquare.gif);
}

#main ul h2 {
	font-size: 1em;
}
#main li {
	padding: 0 0 0.375em 0;
	font-size: 0.750em; /*This sets the size for all following elements: h2-6, p, nested lists as long as they are set to 1em which means the same as the parent.  */
}

 /* The following are set to font-size 1em to keep the size the same as li for any number of nested lists, ie. h, p, li li,  li li li etc. */ 
 
#main ul h3, #main ul h4, #main ol h2 {
	font-size: 1em;		
}

#main ul ul h4 {
	font-size: 1em;		
}

#main ul p, #main ol p, #main li p {
	padding: 10px 0;
	font-size: 1em; 
}

#main li li {
	padding: 0 0 5px 10px;
	font-size: 1em;   
}

/* padding and list styles for nested lists */

#main ul ul {
	padding: 0.3em;
	list-style-type: none;
	list-style-image: none;
}

#main ul ul li {
	padding: 0 0 5px 10px;
}


#main ol {
	padding: 10px 0 0 40px;
	list-style-type: decimal;
}


#main ol ol {
	list-style-type: none;
}

/* styling for links/anchors within lists */

#main ul a:link, #main ol a:link {
	text-decoration: none;
}

#main ul a:hover, #main ul a:active, #main ol a:hover, #main ol a:active {
	text-decoration: underline;
}

#main ul a:visited, #main ol a:visited {
	text-decoration: none;
	color: #5C88A5;
}

#main ol.items {
	list-style-type: lower-roman;    /* class="items" is used on the eula.html page */
}

#main dl {
	padding: 0 0 1em 1em;
}

#main dt {
	padding: 0;
}

#main dd {
	padding: 0.3em 0 0.3em 2em;
	font-size: 0.750em; /*This sets the size for all following elements: h2-6, p, nested lists as long as they are set to 1em which means the same as the parent.  */
}



/* MAINSpecial for specially styled id or classes within main 
------------------------------------------------------------ */
#main #next {
	padding: 2em 0 0 0;
	text-align: right;
	text-decoration: underline;
	font-size: 0.750em;
}

#main p#movie  {
	margin: 0;
	padding: 10px 0;
} 

#main #answers h3 {			/* used in the Support FAQs */
	padding: 0.3em 0 0.3em 0.3em;
	background: #DFE7F2;
}


/* =SUBNAV aka local, section specific navigation. Floated.
------------------------------------------------------------ */

#subnav {
	float: left;
	width: 156px;
	padding: 30px 10px 0 10px;
	border-right: 1px dotted  #B0C4DE;
}

#subnav p {
	font-size: 0.750em;
	padding: 1em 0 0 0;
}

#subnav h2.nav {
	position: absolute;
	left: -200em;
	top: -10em;
}

#subnav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#subnav h3 {
	margin: 0 0 0.3em 0;
	padding: 4px 10px;
	background: #DFE7F2;
	color: #000000;
	font: 0.875em "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#subnav #news h3 {
	margin: 3em 0 0.3em 0;
}
	
#subnav ul li ul {
	padding: 5px 0 30px 0;
}

#subnav ul ul ul {
	padding: 0;
}


#subnav li li {
	padding: 7px 10px 7px 25px;	
	border-bottom: 1px dotted  #B0C4DE;
	font: 0.750em "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#subnav li li li {
	padding: 7px 10px 0 25px;	
	font: 1.125em "Trebuchet MS", Arial, Helvetica, sans-serif; /* this is to increase the font-size back to .75 em */   
}

#subnav li a:link {
	text-decoration: none;
}


#subnav li li a:link {
	text-decoration: none;
	color: #1F527B;
}

#subnav li a:visited {
	text-decoration: none;
	color: #5C88A5;

}

#subnav li a:hover {
	text-decoration: underline;
}



/* Creates a class 'active' which styles list items on current/active pages. Class 'subactive' is for nested menu items */


#subnav h3.active {
	margin: 0 0 0.3em 0;
	padding: 4px 10px;
	border-right: thick solid #9A0000;
	font-weight: bold;
}



#subnav li li.active, #subnav li li li.active {
	padding: 6px 10px 6px 35px;
	border-right: thick solid #9A0000;
	font-weight: bold;
}





/* =CLEAR a traditional technique for clearing floated columns so that footer drops to bottom of page. This is done by creating a div that is empty but for the clear.  */
/* There is a newer technique that works in IE7, but not earlier versions */


.clear {
	clear: both;
}



/* =SITEINFO aka footer 
-------------------------------------*/


#siteinfo {
	width: 750px;	
	margin: 1px auto 0 auto;
	padding: 10px;	
	text-align: center;
	background-color: #D9E6EB;	
	font-size: 0.625em;	
	color: #2D2D2D;
}

#siteinfo h2.nav {
	position: absolute;
	left: -200em;
	top: -15em;
}

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


#siteinfo li {
	display: inline;	
	margin: 0;
}
	

#siteinfo  li a {
	padding: 0 5px;
	border-right: 1px solid #9C9C9C;
	text-decoration: underline;
	color: #2d2d2d;
}


#siteinfo p {
	padding: 10px 5px;
	margin: 0;
	font-size: 0.850em;
	color: #2d2d2d;
}

/* =WIDE for pages without sidebars
-------------------------------------*/

#wide {
	float: right;
	width: 660px;	
	margin: 0;	
	padding: 30px 40px 30px 35px;	
}


#wide h1, #wide h2, #wide h3, #wide h4 {
	font-weight: 700;
	color: #2D2D2D;
}


#wide h1 {	
	margin: 0 0 10px 0;
	padding: 0.3em 0 0.3em 0.5em;
	font-size: 1em;
	background: #DFE7F2;
	color: #000000;
}

#wide h2 {	
	margin: 15px 0 5px 0;
	font-size: 0.875em;
	border-bottom: none;
}


#wide h3, #wide h4 {	
	margin: 15px 0 5px 0;
	font-size: 0.750em;
}


#wide p  {
	padding: 0.5em 0 1em 0;
	font-size: 0.750em;
}

#wide img {
	display: block;
	border: none;
	margin: 0 auto;
	padding: 0;
}

#wide blockquote {
	padding-left: 20px;
	border-left: 1px dotted #B0C4DE;
	font-size: 0.750em;
}


#wide ul {
	padding: 0.3em 0 0 1.2em;
	list-style: square inside url(../images/bluesquare.gif);
}

#wide ol {
	padding: 0.3em 0 0 1.2em;
	list-style: decimal inside;
}



#wide li {
	padding: 0 0 1.3em 0;
	font-size: 0.750em; /*This sets the size for all following elements: h2-6, p, nested lists as long as they are set to 1em which means the same as the parent.  */
}
 /* The following are set to font-size 1em to keep the size the same as li for any number of nested lists, ie. h, p, li li,  li li li etc. */ 
 
#wide li li {
	padding: 0.3em 0.3em 0.3em 3em;
	font-size: 1em;   /* all nested lists are set to the same size as the first li */
}

#wide li p, #wide li li p {
	padding: 0.3em 0.3em 0.3em 3em;
	font-size: 1em;   /* all nested lists are set to the same size as the first li */
}
 
#wide ul h2, #wide ol h2 {
	font-size: 1.125em;   /* this is to increase the font-size back to .875 em */
	text-decoration: none;
}

#wide ul h3, #wide ol h3 {
	font-size: 1em;   
}

#wide ul p, #wide ol p {
	font-size: 1em;  
}


#wide ul a:link, #wide ol a:link {
	text-decoration: none;
}

#wide ul a:hover, #wide ul a:active, #wide ol a:hover, #wide ol a:active {
	text-decoration: underline;
}

#wide ul a:visited, #wide ol a:visited {
	text-decoration: none;
	color: #5C88A5;
}

#wide dl {
	font-size: 0.750em;
	list-style-type: none;
}

#wide dt, #wide dt {
	padding: 0 0 0 0.5em;
}

#wide #next {
	padding: 2em 0 0 0;
	text-align: right;
	text-decoration: underline;
	font-size: 0.750em;
}

/* =HCARD The h:card / v:card is only used on the "About Us" page */
#hcard, #hcard2 {
	font-size: 0.750em;
	padding: 10px 10px 10px 160px;
}

#hcard .org h3, #hcard .org h3 {
	font-weight: bold;
	font-size: 1em;
	padding: 0.3em;
}


/* =FORMS div . Actual rendering varies wildly across browsers - use with care. */

#forms {
	padding: 16px 0 0 0;
	line-height: 1.7em;
}

#forms h2 {
	padding: 0.3em;
	background: #DFE7F2;
	color: #000000;
}

#forms p {
	padding: 0.5em 0 1.5em 0;
}

#forms fieldset {
	width: 100%;
	padding: 0;
	margin: 5px 0 20px 0;
}

#forms legend {
	padding: 0;
	margin: 0;
	font-size: 0.875em;
	background: #DCE5F1;
}


#forms label {
	display: block;
	padding-right: 10px;
	font-size: 0.750em;
}


#forms input {
	display: block;
	color: #2D2D2D;
}

#forms textarea {
	margin: 0 0 1em 0;
	display: block;
	color: #444444;
}

#forms input:hover {
	background-color: #DFE7F2;
	color: #C6C6C6;
}

/* Important for accessibility and usability */
#forms input:focus, #forms select:focus, #forms textarea:focus {
	background-color: #DFE7F2;
}