/*

	Title : framework.css
	Author : Erickson Barnett

	Acknowledgements:

	The defaults in this css file have bits and pieces picked
	up from Eric Meyer's reset.css
	[meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/]
	and Olav Berkjoy's blueprint.css
	[code.google.com/p/blueprintcss] - which in turn has many
	other collaborators.

	Many thanks to all involved.

	TABLE OF CONTENTS:
	- CSS Reset
	- Body (site-wide defaults)
	- Typography (font-size/margins/color)
	  - Headers
	  - Lists
	  - Links
	  - Other non-traditional elements
	- Tables
	- Forms
	- Common classes
	- Page Layout

	USAGE NOTES:

	To calculate the spacing and arrangement of text
	(your vertical rhythm) you need to know these units:

	-- font size:
	   main font size (in px)

	-- line height:
	   main line height (in px)

	-- vertical unit:
	   a value which determines the space between elements (in px).

	-- inside vertical proportion:
	   a multiple of the vertical unit used for the bottom margin
	   in normal copy elements

	-- outside vertical proportion:
	   multiples of the vertical unit used for the top and
	   bottom margin in header elements

	proportions should increase/decrease in multiples of .25.

	After you have these units:
	1. Set your desired font size (%) and line height (em).
	2. Set your main element margins (ems).
	3. Set your header font sizes (ems) and margins (ems).

	NOTE: All em calculations should be to three decimal points.

	The units for this file are:
	-- font size: 12px
	-- line height: 18px
	-- vertical unit: 18px
	-- inside vertical proportion: top: 0 / bottom: 1
	-- outside vertical proportion: top: 1.5 / bottom: .25

*/

/* -- FONT FAMILIES: Hard-Coded Into 'global-head' For Earlier Processing -- */

/* -- reset ---------------------------------------------*/

/* http://css-tricks.com/snippets/css/force-vertical-scrollbar/ */
html { overflow-y: scroll; }

html, body,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
object, blockquote, pre, address {
	margin: 0;
	padding: 0;
	border: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

caption, th, td {
	text-align: left;
	vertical-align: top;
}

blockquote, q {
	quotes: none;
}

a img { border: none; }

hr { border: 0; height: 0; margin: 0; padding: 0; width:0; }

/* -- body/overall ---------------------------------------------*/

/*	This is where you set your base font size and line height.

	Your main font size is specified in %.  Base browser font size
	is 16px, so your formula is: font size (px) / 16px = %.

	For example: you want 12px baseline type.
	12px / 16px = 75%;

	Line height is *NOT* specified in ems; it's a unitless scalar.
	See: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height

	The formula for line-height is:
	desired line height (px) / font size (px) = line height (em)

	For example: Your font size is 12px, and you want an 18px line
	height. 18px / 12px = 1.5em

*/

body {
	font-size: 75%; /* sets base font-size to 12px */
	line-height: 1.5;
}

body {
	font-family: Arial, "Helvetica Neue", "Lucida Grande", Helvetica, verdana, sans-serif;
	color: #666666;
	background: #fff;
}

/* -- typography ---------------------------------------------*/

/*	This is where you set your baseline margin.

	The margin is calculated by taking the margin you desire (in px)
	and dividing by the main font size (in px).  Your main font
	size is specified in % in the body declaration above.

	For example: you want a 18px bottom margin for 12px type.
	18px / 12px = 1.5em;

	NOTE: All em calculations should be to three decimal points.

*/

p, ul, ol, dl, dd, blockquote, pre, code, table {
	margin: 0 0 1.5em 0; /* 18px */
}

/* lists should be a quarter-size less than the main margin */

li {
	margin: .75em 0 .75em 0;
}

.titles li {
	margin: 1.25em 0 1.25em 0;
}

/* -- headers -- */

/* 	This is where you set your header margins, font size, and
	line height.

	Font sizes (em) are calculated by taking the font size you
	desire (in px) and dividing by the body font size (in px)

	For example: you want 36px type.
	Body font size (in px) = 16px * 75% = 12px
	New font size (in em) = 36px / 12px = 3em

	The margins (px) are determined by the outside vertical proportion.
	If we have a vertical unit of 18px, and our margin-top
	proportion is 1.5, then we have a top margin of 18px * 1.5 = 27px.

	The margins (em) are then calculated by taking the margin you
	desire (in px) and dividing by the header font size (in px).

	For example: you want a 27px margin for 36px type.
	27px / 36px = .75em;

	Line height should be calculated as the closest 25% (or 33% depending) multiple of
	the vertical unit that is greater than the font size. (Rounded up)

	For example: Your unit is 18px.  Your font size is 28px.
	18px * 2 = 36px.  36px / 34px = 1.059em

	NOTE: All em calculations should be to three decimal points.

*/

h1 {
	font-weight: normal;
	font-family: 'MyriadProCondBold',sans-serif;
	/* font-size: 2.333em; /* 28px */
	font-size: 3em; /* 36px */
	line-height: 1.143;
	color: black;
	margin: .964em 0 .179em 0;
	padding: 0;
	border: 0;
}

h2 {
	font-weight: normal;
	font-family: 'MyriadProRegular',serif;
	font-size: 2em; /* 24px */
	line-height: 1.125;
	margin: 1.125em 0 .208em 0;
	color: #3577c1;
	padding: 0;
	border: 0;
}

h3 {
	font-weight: normal;
	font-size: 1.5em;
	line-height: 1.125;
	margin: 1.688em 0 .3125em 0;
	padding: 0;
	border: 0;
	color: #3577c1;
}

h4 {
	font-weight: normal;
	font-size: 1em; /* 12px */
	line-height: 1.166;
	color: #3577c1;
	margin: 2.25em 0 .417em 0;
	padding: 0;
	border: 0;
}

h5 {
	font-weight: normal;
	font-size: 1em; /* 12px */
	line-height: 1.166;
	margin: 2.25em 0 .417em 0;
	padding: 0;
	border: 0;
}

h6 {
	font-weight: normal;
	font-size: 1em; /* 12px */
	line-height: 1.166;
	margin: 2.25em 0 .417em 0;
	padding: 0;
	border: 0;
}

br+h1, br+h2, br+h3, br+h4, br+h5, br+h6 {
	margin-top: 0;
}

dt {
	font-size: 1em; /* 12px */
	line-height: 1.166;
	margin: 2.25em 0 .417em 0;
}

/*	these next rules deal with headers that show up right below
	one another. Use the bottom vertical unit for the margin.

	This does not work in IE6.
*/

h1 + h2 {
	margin-top: .208em;
}

h2 + h3 {
	margin-top: .3125em;
}

h3 + h4 {
	margin-top: .357em;
}

h4 + h5, h5 + h6 {
	margin-top: .417em;
}

/* -- lists -- */

ul, li { list-style-type: none; }

li {
	position: relative;
	padding: 0 0 0 .8em;
	margin-left: .25em;
}

.bullet::before,
ul > li::before {
  color: #C00;
  font-weight: bold;
  content: "\203A  ";  /* SINGLE RIGHT-POINTING ANGLE QUOTATION MARK */
  position: absolute;
  left: 0;
  top: -.05em;
}

.bullet-list > li,
.bullet-list > dt {
  position: relative;
}

.bullet-list > li::before,
.bullet-list > dt::before {
  color: #C00;
  font-weight: bold;
  content: "\203A  ";  /* SINGLE RIGHT-POINTING ANGLE QUOTATION MARK */
  position: absolute;
  left: -1.5ex;
}

.bullet-list > dt:nth-of-type(1) {
  margin-top: 2.5ex;
}

li ul li {
	padding: 0 0 0 12px;
	margin-left: 1em;
}

ol {
	padding-left: 1em;
	margin-left: 1em;
}

ol li {
	list-style: decimal;
	background: none;
	padding-left: 0;
}

dt {
	font-weight: bold;
}

/* -- links -- */

a {
    text-decoration: none;
    color: #37C;
}

a:visited {
    color: #37C;
}

a:hover, a:focus {
	color: #038;
	text-decoration: underline;
}

a:active {
    color: #038;
}

/* -- other elements -- */

pre, code, tt { font-family: 'andale mono', 'monotype.com', 'lucida console', monospace; line-height: 1.5; }
code { white-space: pre; }
tt { display: block; margin: 1.5em 0; line-height: 1.5; white-space: pre;}
strong, b { font-weight: bold; }
em { font-style: italic; }

dfn {
	font-style: normal;
	cursor: pointer;
	border-bottom: 1px dashed #ccc;
}

sup {
  font-size: .85em;
  font-weight: normal;
  vertical-align: top;
}

/* -- tables ---------------------------------------------*/


table   { margin-bottom: 1.333em; }
th      { border-bottom: 2px solid #ccc; font-weight: bold; }
td      { border-bottom: 1px solid #ddd; }
th,td   { padding: 4px 10px 4px 0; }
tfoot   { font-style: italic; }
caption { background: #ffc; }


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


/* form {} */
/* fieldset {} */
/* legend {} */

label { margin: .5em 0; }

input {
	margin: .5em 0;
	border: 1px solid #7f9db9;
	padding: 2px;
}

.short { width: 100px; }
.medium { width: 150px; }
.long { width: 200px; }

/* input:focus {} */
.checkbox { width: 13px; height: 13px; border: none; }
.radio { width: 13px; height: 13px; border: none; }

label.wide { width: auto !important; padding: 0 !important; }

/* select {} */

form br { clear: left; }

textarea {
	margin: .5em 0;
	border: 1px solid #7f9db9;
	padding: 2px;
	width: 300px;
}

#main-content.wide .text {
	width: 300px;
}

#main-content.wide textarea {
	width: 98%;
}

#main-content.wide form table {
	width: 100%;
	margin-bottom: 6em;
}

.button-img {
	width: auto !important;
	height: auto !important;
	border: 0 !important;
	padding: 0 !important;
}

.button {
	float: left;
	margin-right: 10px;
	width: auto !important;
	height: auto !important;
	cursor: pointer;
}

.button:hover {
	background: #d8e7ef;
}

/* -- common classes -------------------------------------*/

.right {
	text-align: right;
 }

.clearer {
	clear: both;
}

.hide, .print {
	display: none;
}

.leadin {
	padding: 0;
	margin-top: 0;
}

.imgleft {
	float: left;
	margin-right: 1em;
	margin-bottom: 1em;
}

.imgright {
	float: right;
	margin-left: 1em;
	margin-bottom: 1em;
}

.last {
	border-right: none !important;
}

.replaced {
	width: 0;
	height: 0;
	display: block;
	margin: 0;
	padding: 0;
	direction: ltr;
	text-indent: -10000px;
	background: url(/images/bg/header-image.jpg) top left no-repeat;
}

ul.no-bullet {
	margin-left: 0;
	padding-left: 0;
}

ul.no-bullet li {
	padding-left: 0;
	background: none;
}
ul.no-bullet li::before {
  content: none;
}

/* Indentation instead of line shifts for sibling paragraphs. */
p.indent { text-indent: 2em; margin-top: -1em; }
/* can use p + p for a whole block */

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

/*

 for every four lines of content, we want five lines of
 tighter text:

 New type size in em's:
 11px (wanted side note size) / 12px (existing base size) = 0.917 (new type size in ems)

 New line-height value:
 base-line-height (px) x 4 = height
 height / 5 = new line height
 new line height / 11px = (new line height in em's)
 margin = main unit margin

*/

.incremental p, p.incremental {
	font-size: .917em;
	line-height: 1.164;
	margin: 0 0 1.091em 0;
}

p.small, .small p {
	font-size: .917em;
	margin: 0 0 1.091em 0;
}

/* 	some elements should just run the same as the body text.  This
	is that class */

.normal {
	font-size: 1em;
	line-height: 1.5;
	margin-bottom: 0;
}

/* 	There is always some sort of separator as well. */

.separator {
	margin: 24px 0 0 0;
	border-top: 1px solid #999;
	padding: 23px 0 0 0;
}

p.small, .small p {
	font-size: .917em;
	margin: 0 0 1.636em 0;
}


.divider {
	margin: 18px 0 0 0;
	background: url(/images/common/gray-divider.gif) top left repeat-x;
	padding: 17px 0 0 0;
}


/* tight VU is 12 / line height is 14 */

.tight p, p.tight {
	line-height: 1.167;
	margin: 0 0 .5em 0;
}

div.tight * {
	line-height: 1.167;
	margin: 0 0 1em 0;
}

div.tight ul li, ul.tight li {
	margin: 0 0 4px 0;
	line-height: 1.167;
	padding: 0;
	background: none;
}


/* -- layout ---------------------------------------------*/

#content-wrapper {
	float: left;
	width: 960px;
	padding: 0 1px 24px 1px;
	border-bottom: 1px solid #dddddd;
	background: url(/images/bg/content-wrapper.gif) top left repeat-y;
}

body.wide #content-wrapper {
	background: url(/images/bg/content-wrapper-wide.gif) top left repeat-y;
}

#content-wrapper.wide {
	background: url(/images/bg/content-wrapper-inside-wide.gif) top left repeat-y;
}

#sidebar {
	float: left;
	width: 209px;
	padding: 4px 5px 27px 4px;
	height: 300px;
}

#sidebar-info {
	border-top: 1px solid #dddddd;
	padding: 4px;
	margin: 18px -4px 18px -4px;
}

#sidebar-info h3 {
	margin-top: 0;
}

#sidebar-info div.wrapper {
	padding: 18px 12px;
	background: url(/images/bg/secondary-nav.gif) top left repeat-x;
}

#sidebar-info div.wrapper p {
	margin-bottom: 1em;
}

#sidebar-info div.wrapper img {
	float: right;
}

#intro-wrapper {
	background: #0465C3;
	border-bottom: 2px solid #c00;
	border-radius: 0;
	color: #fff;
	font-size: 1.32rem;
	width: 100%;
	margin: 0;
	overflow: hidden;
	padding: 0;
	position: relative;
	text-shadow: #333 1.5px 1.5px 3.5px !important;
}

#intro {
	box-shadow: 0 3px 400px 15px #003;
	min-height: 11em;
	padding: 0 2em !important;
}

/* here are all the intro graphic rules for the main pages - removed !important so JS can override the background */

body.blank #intro {
	background: white;
}

body.home #intro-wrapper {
	background: #0465C3 url(/nanolabs/images/bg/body-wallpaper-light-blue.png) bottom right / cover no-repeat; }
body.home #intro {
	background: none;
	box-shadow: 0 3px 400px 15px #003; }

body.how-to-help #intro-wrapper {
	background: #0465C3; }
body.how-to-help #intro {
	background: #0465C3 url(/nanolabs/images/bg/body-wallpaper-light-blue.png) bottom right / cover no-repeat;
	box-shadow: 0 3px 400px 15px #003; }

body.therapeutics #intro-wrapper {
	background: #009814; }
body.therapeutics #intro {
	background: #009814 url(/nanolabs/images/bg/body-wallpaper-green.png) bottom right / cover no-repeat;
	box-shadow: 0 3px 400px 15px #010; }

body.dna-analytics #intro-wrapper,
body.dna-forensics #intro-wrapper {
	background: #89201D;
}
body.dna-analytics #intro,
body.dna-forensics #intro {
	background: #89201D url(/nanolabs/images/bg/body-wallpaper-red.png) bottom right / cover no-repeat;
	box-shadow: 0 3px 400px 15px #300;
}

body.news-events #intro-wrapper {
	background: #98008F; }
body.news-events #intro {
	background: #98008F url(/nanolabs/images/bg/body-wallpaper-purple.png) bottom right / cover no-repeat;
	box-shadow: 0 3px 400px 15px #101; }

body.ctx-study-blue #intro-wrapper,
body.about-us #intro-wrapper,
body.products-services #intro-wrapper,
body.design-methods #intro-wrapper,
body.directions #intro-wrapper,
body.glossary #intro-wrapper,
body.contact-us #intro-wrapper,
body.careers #intro-wrapper {
	background: #002085; }
body.ctx-study-blue #intro,
body.careers #intro,
body.contact-us #intro,
body.glossary #intro,
body.directions #intro,
body.products-services #intro,
body.design-methods #intro,
body.about-us #intro {
	background: #002085 url(/nanolabs/images/bg/body-wallpaper-dark-blue.png) bottom right / cover no-repeat;
	box-shadow: 0 3px 400px 15px #001; }

body.ctx-study-brown #intro-wrapper,
body.investor-relations #intro-wrapper,
body.partnering #intro-wrapper {
	background: #88521E; }
body.ctx-study-brown #intro,
body.investor-relations #intro,
body.partnering #intro {
	background: #88521E url(/nanolabs/images/bg/body-wallpaper-brown.png) bottom right / cover no-repeat;
	box-shadow: 0 3px 400px 15px #010; }

#intro h1 {
	font-family: 'AkzidenzGroteskBoldCond',sans-serif;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: .5em;
	font-size: 3em;
	line-height: .85em;
}

#intro h1 strong {
	color: #3577c1;
}

body.search-results #intro h1,
body.search-results #intro h2 {
	color: #333;
	text-shadow: none;
}

#intro h2 {
	font-family: 'MyriadProCondRegular',sans-serif;
	margin-top: .2em;
	margin-bottom: 0;
	padding-bottom: .5em;
	font-size: 2.25em;
	line-height: .95;
	max-width: 24em;
}

#intro table {
	margin-left: -7px;
}

#intro td {
	border-bottom: 0;
	padding-bottom: 0;
}

#intro .images img {
	display: inline;
	margin-right: 18px;
}

p.images {
	margin-bottom: 0;
}

#main-content {
	float: left;
	/* width: 429px; /* */
	width: 649px;
	padding: 27px 30px 2em 31px !important;
}

#main-content.wide {
	/* width: 649px; /* */
	width: 822px;
	box-shadow: 0 3px 400px 15px #CCD;
}

body.search-results #main-content.wide {
	box-shadow: none;
}

#main-content #intro {
	width: 482px;
	display: inline;
	padding: 4px;
	margin: -27px -30px 27px -31px;
}

#main-content #intro div.wrapper {
	background: url(/images/bg/callout.gif) top left repeat-x;
}

#main-content #intro div.stock-photo {
	padding: 36px 26px 18px 27px;
}

/* here are all the intro graphic rules for the secondary pages */

#main-content #intro {
	background: none !important;
}

body.wide #main-content {
	width: 960px;
	padding: 0 1px;
}


#main-content.leadin {
	padding-top: 4px;
}

#main-content div.section {
	border-bottom: 1px solid #ddd;
	margin: 0 -30px 0 -31px;
	padding: 0 4px;
	clear: left;
}

#main-content div.latest {
	border-bottom: 0;
	padding-top: 4px;
}

#main-content div.latest h3 {
	background: #ebebeb url(/images/common/mini-logo.gif) 12px 4px no-repeat;
	border-top: 4px solid #818080;
	margin-bottom: 4px;
	margin-top: 0;
	padding: 6px 12px 6px 40px;
	color: #cc0000;
	font-size: 1.2em;
	line-height: 1.2;
	text-transform: uppercase;
}

#news-briefs {
	padding: 0;
}

#news-briefs h3 {
	font-size:1.2em;
	padding:0;
	margin-bottom:.5em
}

#news-briefs dl {
        font-size: 1.2rem;
	height: 38em;
	margin-top: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding-right: 1.3em;
}

#news-briefs dl,
#news-briefs dd {
	margin-left: 0;
	margin-bottom: 2.25em;
}

#news-briefs dt:nth-of-type(1) {
	margin-top: 0;
}

#news-briefs .source,
.news-list .source {
	font-style: italic;
	white-space: nowrap;
}

#news-briefs .source:before,
.news-list .source:before {
	content: '\2014\00A0';
}

#news-briefs > dl > dt > em:nth-of-type(1),
.news-list > ul > li > em:nth-of-type(1) {
	font-style: normal;
	color: #F00;
	font-weight: bold;
}

.news-list {
	border-top: 1px solid #ddd;
	padding-top: 5px;
}

.news-list .list-separator {
	padding: 0 2em;
}

.news-list ul {
	margin-bottom: 0;
	max-width: 48em;
}

.news-list li {
	margin-top: 9px;
	margin-bottom: 0;
	background: none;
	margin-left: 0;
}

.news-list .info {
	display: block;
	font-size: .929em;
}

.news-list p,
.news-list .date {
	display: block;
	font-size: .929em;
	color: #999999;
}

.news-list .monthYear {
	position: relative;
	left: -36px;
}

div.list-separator {
	position: relative;
	padding-left: 100px;
	padding-right: 36px;
	background: url(/images/common/gray-divider.gif) bottom left repeat-x;
	padding-bottom: 14px;
	margin-bottom: 14px;
}

div.latest div.last {
	background: none;
}

div.list-separator h4 {
	position: absolute;
	color: #666;
	margin-top: 0;
	text-align: right;
	top: 0;
	left: 12px;
	width: 70px;
}

div.glossary-list h3 {
	margin-bottom: 9px !important;
}

div.glossary-list h4 {
	width: 100px;
	font-weight: bold;
}

div.glossary-list div.list-separator {
	padding-left: 130px;
}

#intro h1,
body.home #intro h1 {
	color: white;
	text-shadow: #333 1.5px 1.5px 3.5px;
}

#intro h2,
body.home #intro h2 {
	color: white;
	text-shadow: #333 1.5px 1.5px 3.5px;
}

body.home #intro td a {
	color: white;
	text-decoration: none;
	font-weight: bold;
}

body.home #intro td a:hover {
	/* text-shadow: none; /* */
}

body.home #intro td a:hover .link {
	color: #FFF;
	text-decoration: underline;
	text-shadow: #600 1px 1px 0;
}

body.home #intro td a .image,
body.home #intro td a > img {
	box-shadow: 0 3px 5px 1px rgba(0, 0, 0, .75);
	border: 1px solid #DDD;
	border-radius:12px;
}

body.home #intro td a .image > img {
	box-shadow: none !important;
	border: 1px solid transparent !important;
	border-radius:12px;
}

body.home #intro td a:hover .image,
body.home #intro td a:hover > img {
	position: relative;
	top: -1px;
	box-shadow: 0 4px 5px 2px #000;
}

body.home #intro td a:hover .image > img {
	box-shadow: none !important;
	border: 1px solid transparent !important;
}

#intro em {
	color: #C00;
}

strong.title {
	color: #ed1b2d;
}

a.image-link img {
	border: 1px solid transparent;
}

a.image-link:hover img {
	border: 1px solid #3577c1;
}

a.text-link {
	color: #666;
	/* text-decoration: none; /* */
}

a.text-link:hover {
	color: #3577c1;
	/* color: #000; /* */
	/* text-decoration: underline; /* */
}

#secondary-content {
	float: left;
	width: 245px;
	padding: 4px 3px 4px 4px;
	border-left: 1px solid #ddd;
}

/* vertical-unit = 12 = tight measure */

#secondary-content div.callout {
	border: 1px solid #dddddd;
	padding: 12px;
	background: url(/images/bg/callout.gif) top left repeat-x;
	margin: 0 0 9px 0;
}

.product-link,
.product-link:hover {
  text-decoration: none;
}
.product-name {
  position: relative;
  font-size: 1.2em;
  font-weight: bold;
}
a .product-name {
  text-decoration: underline;
}

/*
.product-name:after {
  position: absolute;
  height: 1px;
  margin: 0 auto;
  content: '';
  left: 0;
  right: 0;
  width: 100%;
  background-color: currentColor;
  left: 0;
  bottom: .15em; // adjust this to move up and down. you may have to adjust the line height of the paragraph if you move it down a lot.
}
*/

div.callout.inside {
	border: none;
}

div.callout.blank {
	background: none !important;
	padding: 4px !important;
}

div.callout.blank div.wrapper {
	padding: 9px;
	background: #d3e1f3 !important;
}

div.callout.blank h3 {
	background: none !important;
	padding-bottom: 0 !important;
}

div.callout.blank img {
	display: block;
}

div.callout h3 {
	line-height: 1.125;
	margin: 0;
	color: black;
	background: url(/images/common/gray-divider.gif) bottom left repeat-x;
	padding-bottom: 6px;
	margin-bottom: 6px;
}

div.callout h4 {
	margin-top: 8px;
	margin-bottom: -4px;
}

div.callout p {
	line-height: 1.167;
	margin: .5em 0 0 0;
}

div.callout ul {
	line-height: 1.167;
	margin: .5em 0 0 0;
}

div.callout ul li {
	margin: 0 0 3px 0;
	padding: 0;
	background: none;
}

div.callout ul li a {
	color: black;
}

div.callout ul li a:hover {
	color: #3577c1;
}

div.callout ul.bulleted li {
	padding: 0 0 0 12px;
}


div.callout a.more {
	display: block;
	color: black;
}

.learn-more, a.learn-more,
.ff1-button, a.ff1-button,
.f4-button, a.f4-button {
	display: block;
	color: #000;
}

.more a:hover, a.more:hover, a.learn-more:hover, .learn-more a:hover,
.ff1-button a:hover, a.ff1-button:hover {
	color: #3577c1 !important;
}

/* widget blocks */

#main-content div.widget {
	padding: 0 4px !important;
}

#main-content div.widget div.wrapper {
	border: 1px solid #dddddd;
	border-top: 0;
	margin: 0 0 4px 0;
}

#main-content div.widget div.wrapper p {
	line-height: 1.167;
	margin: .5em 0 0 0;
}

#secondary-content div.widget {
	border-top: 0 !important;
	padding: 0 !important;
}

div.widget h3 {
	background: #656464 url(/images/bg/widget-header.gif) top left repeat-x;
	border-top: 1px solid #656464;
	color: white;
	margin-top: 0;
	margin-bottom: 1px;
	padding: 6px 12px;
}

#main-content div.widget ul {
	margin: 0;
	padding: 0;
	line-height: 1.2;
	font-size: 1em;
	font-size: 12px; /* don't resize! */
}

#main-content div.widget ul li {
	float: left;
	margin: 0;
	padding: 0;
	border-right: 1px solid #ddd;
	border-top: 1px solid #ddd;
}

#main-content div.widget ul li a {
	display: block;
	width: 81px;
	background: #fff;
	border: 1px solid white;
	color: #666;
	padding: 9px 6px 5px 6px;
	text-decoration: none;

}

#main-content div.widget ul li.last {
	border-right: 0;
}

#main-content div.widget ul li a:hover {
	color: black;
}

#main-content div.widget ul li.on a {
	background: #74a3d9;
	color: white !important;
}


#main-content div.widget {
	/* background: url(/images/bg/logo-spikes.png) bottom left no-repeat; */
}

div.widget div.wrapper div.computing-for {
 	background: url(/images/bg/callout.gif) top left repeat-x;
}

/* module js background images */

p.title strong {
	color: #333333;
}

/* -- */

#footer {
	clear: both;
	padding: 12px 24px 0 24px;
	/* background: url(/images/bg/content-wrapper-wide.gif) top left repeat-y; */
	border-top: 1px solid #dddddd;
	background: white;

}

#footer p {
	color: #666666;
	margin: 0;
	line-height: 1.83;
}

/*-- navigation ------------------*/

body.design-methods #mainnav li#design-methods,
body.products-services #mainnav li#products-services,
body.news-events #mainnav li#news-events,
body.investor-relations #mainnav li#investor-relations,
body.therapeutics #mainnav li#therapeutics,
body.dna-forensics #mainnav li#dna-forensics,
body.dna-analytics #mainnav li#dna-analytics,
body.about-us #mainnav li#about-us,
body.how-to-help #mainnav li#how-to-help,
body.partnering #mainnav li#partnering,
body.careers #mainnav li#careers,
body.contact-us #mainnav li#contact-us {
	background-position: 0 -100px;
	border-left: 1px solid #2c589f;
}

body.home .navbar-mininav .nav-item-home,
body.news-events .navbar-mininav .nav-item-news,
body.careers .navbar-mininav .nav-item-careers,
body.contact-us .navbar-mininav .nav-item-contact,
body.directions .navbar-mininav .nav-item-contact {
        font-weight: bold;
}

#mininav {
	position: absolute;
	bottom: 58px;
	right: 5px;
	margin: 0;
	padding: 0;
}

#mininav li {
	float: left;
	margin: 0;
	padding: 0 14px 0 7px;
	line-height: 1.1;
}

#mininav li a {
	color: #666666;
	text-decoration: none;
}

#mininav li a:hover {
	color: #3577C1;
}

#mininav strong {
	color: red;
}

li#mini-search {
	background: none;
}
li#mini-search::before {
	content: none;
}

#sidebar ul {
	margin: 0;
	padding: 0;
}

#sidebar ul li {
	margin: 0 0 4px 0;
	line-height: 1.167;
	padding: 0;
	background: none;
}

#sidebar ul li a {
	text-decoration: none;
	color: #666666;
}

#sidebar ul li a:hover {
	color: #74a3d9;
}

ul#secondary-nav {
	background: url(/images/bg/secondary-nav.gif) top left repeat-x;
	padding: 18px 12px 5px 12px;
	margin: 0;
}

ul#secondary-nav li a {
	font-weight: bold;
}

ul#secondary-nav li.on a {
	color: black;
}

/* need to set class-based ons here */

ul#secondary-nav li ul, ul#extra-nav li ul {
	display: none;
}

img.screenshot {
	margin-bottom: 18px;
}

div.question {
	padding: 9px 12px 0 12px;
}

div.question p {
	font-weight: bold;
	margin-bottom: 0;
}

div.answer {
	padding: 0 12px 9px 12px;
}

.video-screenshot {
	border: 1px solid #ccc;
	border-bottom: none;
	margin-left: 0 !important;
}

.overlay {
	background:rgba(255, 255, 255, .7);
	position: absolute;
        z-index: 999;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.alert {
	width:80%;
	border:1px solid #c00;
	border-radius:.5em;
	font-size:2em;
	background:rgb(255, 192, 192);
	color:#c00;
	text-align:center;
	margin:3em auto;
	padding:1em;
}

div.quote p {
	background: url(/images/common/quote.gif) top left no-repeat;
	padding-top: 24px;
	color: #3577c1;
	line-height: 1.5;
}

div.quote p span.attribution {
	font-weight: bold;
	display: block;
	line-height: 1.333;
	margin-top: 4px;
	color: #666;
}

table th {
	background: #4d4c4c url(/images/bg/th.gif) top left repeat-x;
	color: white;
	padding: 8px;
}

table td {
	padding: 8px;
}

table tr.alt {
	background: #f3f3f4;
}

p.caption {
	text-align: center;
	margin-top: -12px;
}