@charset "utf-8";
/* CSS Document */

/* note: have to zero the margins to get flush-fitting content; otherwise there is a 10 px margin around the browser window by default */
body {
	margin: 0 0 0 0;
	background-color:#4D6D86;
	font-size:100%;
}

img {
	border: 0 none;
}

div.main_block {
	background-image:url(../../Assets/images/common/gradient.png);
	background-repeat:no-repeat;
    margin-left:auto;
    margin-right:auto;
    width:850px;
}

/* ---------------------------------------
 * common header, present on all pages
 *
 * (top of page down to but not including Nav Menu!)
 * ----------------------------------------
 */
div.commonHeader {
	position:relative;
	height:120px;
	width:100%;
	background-color:transparent;
}

/* logo is 45 pixels high */
div #instituteLogo {
	float:left;
	margin-top:41px;
	margin-left:32px;
}

div #sites {
  	-moz-border-radius-topleft:1ex;
  	-webkit-border-top-left-radius:1ex;
  	-moz-border-radius-bottomleft:1ex;
  	-webkit-border-bottom-left-radius:1ex;
	float:right;
	background-color:#013668;
	margin-top:38px;
	height:52px;
	width: 325px;
}

div #sitesContainer {
	margin-top:15px;
	margin-left:1em;
}

/* ---------------------------------------
 * page header (NOT used on Home page)
 *
 * - below the nav menu, 2 variations possible and customized to the particular page.
 * - variation 1: thinner, has breadcrumbs.
 * - variation 2: thicker, has descriptive text, has graphic
 *
 * 'overflow:hidden' crops background image to the right for variation 2
 * ----------------------------------------
 */
 div.pageHeader {
 	position: relative;
	overflow: hidden;
	width: 100%;
	padding: 0;
	margin: 0;
	background-color: transparent;
	color: #FFFFFF;
	font-weight:normal;
	font-family:arial, helvetica, sans-serif;
	text-decoration:none;
}
div.colorBarThin {
  	-moz-border-radius-topleft:1ex;
  	-webkit-border-top-left-radius:1ex;
	position: relative;
	margin-left: 20px;
	width: 830px;
	height: 30px;
	z-index: 50;
	/* background-color: set by each page */
}
div.colorBarThick {
	position: relative;
	margin-left: 20px;
	width: 830px;
	height: 97px;
	z-index: 50;
	background-color: transparent;
}

/* set (height = line-height) to do vertical centering of the text */
div.breadCrumbs {
	margin-left: 10px;
	height: 30px;
	line-height: 30px;
	font-size: 12px;
}
div.breadCrumbs a {
	text-decoration: none;
}
div.breadCrumbs a:link {
	color: #FFFFFF;
}
div.breadCrumbs a:visited {
	color: #FFFFFF;
}
div.breadCrumbs a:hover {
	color: #999999;
}

/* set (height = line-height) to do vertical centering of the text */
div.headerTitle {
  	-moz-border-radius-topleft:1ex;
  	-webkit-border-top-left-radius:1ex;
	float: left;
	padding-left: 15px;
	width: 150px;
	height: 97px;
	line-height: 97px;
	font-size: 24px;
}

/* containing <div> is floated left, this is done in source html
 * Using <table> to do vertical centering of text block
 */
td.headerDescription {
	text-align: left;
	padding-right: 10px;
	width: 408px;
	height: 97px;
	line-height: 15px;
	font-size: 12px;

}
/* z-index greater than .colorBarThick
 * height of element block should be height of .colorBarThick + .whiteBar, because the
 * background image will extend below this element block.
 */
div.headerImage {
	position: absolute;
	top: 0px;
	left: 579px;
	height: 127px;
	width: 271px;
	/* background-image: set by each page */
	background-repeat: no-repeat;
	z-index: 70;
}
/* z-index should be greater than .colorBarThin, .colorBarThick, .headerImage
 * display:block is an IE7 hack on the <img> tag to prevent space gaps between the image and other element blocks
 */
div.upperFilament, div.upperFilament img {
	position: absolute;
	display: block;
	right: 0px;
	bottom: 0px;
	z-index: 100;
}
/* z-index should be greater than .colorBarThin, .colorBarThick
 * contains the .whiteBar and .lowerFilament. When used with .colorBarThin, set background-color to be
 * same as .colorBarThin; when used with .colorBarThick, set background-color to be transparent
 */
div.headerSeparator {
	position: relative;
	width: 100%;
	height: 30px;
	background-color: transparent;
	z-index: 100;
}
/* width is 850px - .lowerFilament width */
div.whiteBar {
	position: relative;
	width: 723px;
	height: 30px;
	background-color: #FFFFFF;
}
/* z-index should be greater than .colorBarThin, .colorBarThick, .whiteBar
 * display:block is an IE7 hack on the <img> tag to prevent space gaps between the image and other element blocks
 */
div.lowerFilament, div.lowerFilament img {
	position: absolute;
	display: block;
	width: 127px;
	height: 30px;
	top: 0px;
	right: 0px;
    /* background-color set by each page */
}

/* ---------------------------------------
 *  Main Page Content (top level landing pages, i.e. Home, About Us, Science, Events, Newsroom, Contact Us)
 *
 *  Has a 2 column layout, 1st column is about 2/3 width of content area
 * ----------------------------------------
 */
div.mainPage {
	position: relative;
	width: 100%;
	background-color: #FFFFFF;
	color: #000000;
	font-family:arial, helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
}
div.mainPage_Col1 {
	position: relative;
	float: left;
	margin-left: 20px;
	margin-bottom: 20px;
	width: 568px;
}

div.mainPage_Col2 {
	position: relative;
	float: right;
	margin-top: 10px;
	margin-bottom: 20px;
	width: 254px;
}

/* ---------------------------------------
 *  Main Page Content >> mainPage_Col1
 *
 * ----------------------------------------
 */
div.mainPage_Col1 h1 {
	margin: 0;
	font-family:arial, helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #30506C;
}
div.mainPage_Col1 h2 {
	font-family:arial, helvetica, sans-serif;
	font-size: 16px;
	font-weight: normal;
	color: #4A6B84;
}
div.mainPage_Col1 p {
	font-family:arial, helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
}
div.mainPage_Col1 ul {
	font-family:arial, helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
}
div.mainPage_Col1 img {
	float: left;
	margin-right: 1em;
}

/* ---------------------------------------
 *  Main Page Content >> mainPage_Col2
 *
 * ----------------------------------------
 */
 div.mainPage_Col2 h2 {
 	margin-top: 0;
	font-family:arial, helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #30506C;
}

div.mainPage_Col2 h3 {
 	margin-top: 0;
	font-family:arial, helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #30506C;
}

div.mainPage_Col2 p {
	font-family:arial, helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
}

/* ---------------------------------------
 *  Sub Page Content (non-top level landing pages, i.e. not "Overview")
 *
 *  Has a 2 column layout, 1st column is about 1/3 width of content area
 * ----------------------------------------
 */
div.subPage {
	position: relative;
	width: 100%;
	background-color: #FFFFFF;
	color: #000000;
	font-family:arial, helvetica, sans-serif;
}
div.subPage_Col1 {
	float: left;
	margin-left: 20px;
	margin-bottom: 20px;
	width: 225px;
}

div.subPage_Col2 {
	float: right;
	margin-right: 10px;
	margin-bottom: 20px;
	width: 575px;
	font-family:arial, helvetica, sans-serif;
	font-style: normal;
	font-weight: normal;
	font-color: #000000;
	font-size: 12px;
}
/* ---------------------------------------
 *  Sub Page Content >> subPage_Col1 >> Navigation Column
 *
 *  Note: this style implementation may look overly complicated, it is that way
 *  to work around an incompatibility with IE8's IE7 emulation mode. Specifically,
 *  it doesn't like the style attributes of 'line-height' and 'height', in combination
 *  with nested <ul>. That's why I no longer nest the <ul> list items.
 * ----------------------------------------
 */
div.navCol {
	width: 100%;
	color: #000000;
	background-color: #E9E9E9;
	font-family:arial, helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
}

/* modifies '.navCol li' with an arrow to the far left, vertically centered, dark background and white text */
#navCol_Selected {
	background-color: #30506C;
	color: #FFFFFF;
	background-image: url(/Assets/images/common/arrow_right.png);
	background-repeat: no-repeat;
	background-position: 5px 50%;
}
div.navCol ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}
/* padding-left is to leave space for the arrow_right for the current page nav item */
li.navCol_Level1 {
	padding-left: 25px;
	height: 36px;
	line-height: 36px;
	border-bottom: 1px dotted gray;
}
div.navCol li a {
	text-decoration: none;
	color: #000000;
}
div.navCol li a:link {
	color: #000000;
}
div.navCol li a:visited {
	color: #000000;
}
div.navCol li a:hover {
	color:#999999;
}

/* sub 'menu' level 2, style controls the indentation */
li.navCol_Level2 {
	padding-left: 42px;
	height: 36px;
	line-height: 36px;
	border-bottom: 1px dotted gray;
	background-color: #CACACA;
}
/* ---------------------------------------
 *  Sub Page Content >> subPage_Col2
 * ----------------------------------------
 */
div.subPage_Col2 h1 {
	margin: 0;
	font-family:arial, helvetica, sans-serif;
	font-size: 24px;
	font-weight: bold;
	color: #30506C;
}
div.subPage_Col2 h2 {
	font-family:arial, helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #4A6B84;
}
div.subPage_Col2 p {
	font-family:arial, helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
}
/* ---------------------------------------
 *  inner footer (inside main block)
 *
 *  - set (height = line-height) as a hack to center the text in the block element
 *  - don't use padding here, or you'll get IE8 compatibility mode problem where footer is too wide
 * ----------------------------------------
 */
div.footer_inner {
	height: 33px;
	line-height: 33px;
	width: 850px;
	background-color: #002C53;
	color: #FFFFFF;
	font-size: 11px;
	font-weight: normal;
	font-family: arial, helvetica, sans-serif;
	text-decoration: none;
}
div.footer_inner a:link {
	color: #FFFFFF;
	text-decoration: none;
}
div.footer_inner a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
div.footer_inner a:hover {
	color: #999999;
	text-decoration: underline;
}

/* ---------------------------------------
 * outer footer (outside main content block)
 * Sized so that there is a one line space above the text,

 * ---------------------------------------
 */
div.footer_outer {
	color: #FFFFFF;
	font-size: 11px;
	margin-top: 11px;
	padding-right:1em;
	font-family: arial, helvetica, sans-serif;
	text-decoration: none;
	float: right;
}
div.footer_outer a:link {
	color: #FFFFFF;
	text-decoration: none;
}
div.footer_outer a:visited {
	color: #FFFFFF;
	text-decoration: none;
}
div.footer_outer a:hover {
	color: #999999;
	text-decoration: underline;
}

/* ---------------------------------------
 * Rectangular area with a title, a graphic to the left, descriptive text to the right, and
 * a button to the lower right.
 *
 * This is a 2 row layout:
 * Row 1 - title
 * Row 2 - graphic, text description with button
 *
 * Sometimes it has a title outside of the rectangular area
 * --------------------------------------------------------
 */
.topicBlock {
	position: relative;
	border: 2px solid #E9E9E9;
	width: 558px;
	margin-bottom: 4px;
	background-color: #F0F0F0;
}
.topicBlock_OuterTitle {
	margin-left: 0;
	margin-top: 0;
	margin-bottom: 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #31506C;
}
.topicBlock_OuterTitle a {
	text-decoration: none;
	font-family: arial, helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #31506C;
}
.topicBlock_OuterTitle a:link, .topicBloc_OuterTitle a:visited {
	text-decoration: none;
	color: #31506C;
}
.topicBlock_OuterTitle a:hover {
	text-decoration: underline;
	color: #31506C;
}

.topicBlock_Row1 {
	margin-left: 15px;
	margin-top: 5px;
	margin-bottom: 5px;
	font-family: arial, helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #31506C;
}
.topicBlock_Row2 {
	margin-left: 15px;
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
}
.topicBlock_Row2 img {
	float: left;
	display: block;
	margin-right: 1em;
	/*
	width: 170px;
	height: 116px;
	*/
}
/*
.topicBlock_Row2 div {
	float: left;
	margin-left: 10px;
	width: 362px;
}
*/
.topicBlockButton {
	position: absolute;
	bottom: 10px;
	right: 10px;
	padding: 1px;
	border: 2px solid #CCCCCC;
}
.topicBlockButton a {
	font-family: arial, helvetica, sans-serif;
	font-size: 10px;
	line-height: 14px;
	font-weight: bold;
	text-decoration: none;
	color: #31506C;
}
.topicBlockButton a:link {
	color: #31506C;
}
.topicBlockButton a:visited {
	color: #31506C;
}
.topicBlockButton a:hover {
	color: #FFFFFF;
	background-color: #013668;
}

/* -----------------------------
 * goBlock is a right column (Col 2) top block (sometimes standalone)
 * which has a button to go to an external site, either an SAB
 * vanity website, or to a brain-map.org website.
 * Often followed by blueBoxes (see next style section)
 * -----------------------------
 */
div.goBlock {
  	-moz-border-radius-topleft:1ex;
  	-webkit-border-top-left-radius:1ex;
	position: relative;
	float: right;
	width: 100%;
	color: #FFFFFF;
	background-color: #31506C;
}

div.goBlockContents {
	margin: 10px;
	line-height: 2em;
	font-weight: normal;
	font-size: .75em;
}

div.goBlockDestination {
	float: left;
	font-weight: normal;
	font-size: 1.7em;
}

div.goBlockButton {
	float: left;
	line-height: 1.7em;
	margin-bottom: 10px;
	margin-left: 10px;
	padding-left: 5px;
	padding-right: 5px;
	color: #FFFFFF;
	background-color: #0079C2;
	border: 2px solid #646464;
}

div.goBlockButton a {
	font-family: arial, helvetica, sans-serif;
	font-size: 1em;
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
}
div.goBlockButton a:link, .websiteButton a:visited {
	color: #FFFFFF;
}
div.goBlockButton a:hover {
	color: #FFFFFF;
	background-color: #013668;
}

/* ------------------------------
 * blueBox is a Column2 container.
 * Has subtopic links in alternating shades of blue
 * Use the lighter shade as the general default background,
 * start with .blueBoxLight, alternate with .blueBoxDark.
 *
 * Note: if blueBox is first element in column 2, the first blueBox gets
 * a round upper left corner. This will be a special light blue box, .blueBoxLight_Top
 * ------------------------------
 */
div.blueBoxContainer {
    -moz-border-radius-topleft:1ex;
  	-webkit-border-top-left-radius:1ex;
	width: 100%;
	margin-bottom: 20px;
	color: #000000;
	background-color: #FFFFFF;
	font-weight: normal;
	font-family: arial, helvetica, sans-serif;
	font-size: 12px;
	text-decoration: none;
}
div.blueBoxLight_Top {
    -moz-border-radius-topleft:1ex;
  	-webkit-border-top-left-radius:1ex;
	float: right;
	width: 100%;
	background-color: #DEF7FF;
 }
div.blueBoxLight_Top img {
	float: left;
	margin-right: 1em;
}

div.blueBoxLight {
	float: right;
	width: 100%;
	background-color: #DEF7FF;
}
div.blueBoxLight img {
	float: left;
	margin-right: 1em;
}

div.blueBoxDark {
	float: right;
	width: 100%;
	background-color: #CEE7F7;
}
div.blueBoxDark img {
	float: left;
	margin-right: 1em;
}

div.blueBoxText {
	float: left;
	margin: 15px;
}
div.blueBoxText a {
	font-weight: bold;
	color: #31506C;
	text-decoration: none;
}
div.blueBoxText a:link {
	color: #31506C;
}
div.blueBoxText a:visited {
	color: #31506C;
}
div.blueBoxText a:hover {
	color: #31506C;
	text-decoration: underline;
}

/* so far, these buttons are only on the Events page. */
.blueBoxButton {
	border: 2px solid #CCCCCC;
	padding: 1px;
}
.blueBoxButton a {
	font-family: arial, helvetica, sans-serif;
	font-size: 10px;
	line-height: 14px;
	font-weight: bold;
	text-decoration: none;
	color: #31506C;
}
.blueBoxButton a:link {
	color: #31506C;
}
.blueBoxButton a:visited {
	color: #31506C;
}
.blueBoxButton a:hover {
	color: #CCCCCC;
	background-color: #013668;
}

/* ---------------------------------------
 * utility styles
 * ---------------------------------------
 */
div.clearFloats
{
	clear:both;
}

/* valign text next to Acrobat image button */
div.valignAcrobat {
	font-size: 10px;
	font-weight: normal;
	line-height: 30px;
	height: 30px;
}
div.valignAcrobat a {
	float: left;
}

/* Adobe Spry style to hide dynamic content regions until after dynamic content is rendered */
.SpryHiddenRegion {
	visibility: hidden;
}