@charset "UTF-8";
/*   
MyersBriggs.org styles
WRM 051614

NOTE: styles prefixed with *+html are IE7 specific

Add div borders FOR DEBUG:
div {
    border: 1px solid #000000;
}

*/

body {
    margin: 0;
	padding: 0;
	font-family: 'fontinRegular', Verdana, Arial, Geneva, sans-serif;
	font-size: 18px;
	line-height: 28px;
}


img {
	border: 0;
	border: none;
	padding: 0;
	margin: 0;	
}

a {
	color: #425eac;
}

sup {
   vertical-align: baseline;
   position: relative;
   top: -0.4em;
}

h1 {
	position: absolute;
    z-index: 149;
    top: 0px;
    left: 48px;
    font-size: 30px;
    padding-top: 0px;
    color: #ffffff;
    font-weight: normal;
    margin-block-start: 18px;
}

strong {
	font-family: 'fontinBold', Verdana, Arial, Geneva, sans-serif;
	font-weight: normal;
}

i {
	font-family: 'fontinItalic', Verdana, Arial, Geneva, sans-serif;
	font-style: normal;
}
em {
	font-family: 'fontinItalic', Verdana, Arial, Geneva, sans-serif;
	font-style: normal;
}
a.linkStrongDisplay {/* bold text for main pages outputting links */
	font-family: 'fontinBold', Verdana, Arial, Geneva, sans-serif;
	font-weight: normal;
}

#container {
	text-align: center;
	z-index: 1000;
	position: relative;
	height: 100%;/* NEW */
}

	#colorbar_1 {/* top beige color */
		background-color: #e6d4c0;
		height: 51px;
		width: 100%;
	}
	#colorbar_2 {/* second from top beige color */
		background-color: #e6d4c0;/*  - same as top */
		height: 124px;
		width: 100%;
		background: url(../_images/headerBG.png) repeat;
		display: grid;
    	grid-template-columns: repeat(2,auto);
	}
		.headerLeft {
			max-width: 60px;
			padding-top: 40px;
			padding-left: 40px;
		}
		.headerRight {
			text-align: right;
			padding-top: 40px;
			padding-right: 40px;
		}
	#colorbar_3 {/* large purple middle bar (slideshow bar)  */
		background-color: #8167a8;
		height: 418px;
		width: 100%;
		background: url(../_images/slideshow/slideshowBG.jpg) repeat;
	}
		#slideshowContainer {
			position: relative;
			width: 935px;
			height: 418px;
			margin: 0 auto;
			margin-top: 60px;
			  left: 12px;
			  right: 0;
		}
		#slideshow {
			position: absolute;
		}
		#slidePager {
			position: absolute;
			z-index: 100;
			right: 0;
			padding-right: 25px;
			padding-top: 10px;
		}
		
	 #colorbar_4 {/*nav bg purple bar*/
		background-color: #8167a8;
		background: url(../_images/slideshow/slideshowBG.jpg) repeat;
		width: 100%;
		z-index: 999;
		text-align: center;
		position: absolute;
	}
		#navbar {
			margin: 0 auto;
			height: 60px;
			font-size: 0;
			min-width: 1300px;
			background-color: #8167a8;
		}
		.navItem {
			text-align: center;
			vertical-align: middle;
			height: 61px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: -1px;
			padding: 18px;
			cursor: pointer;
			font-size: 16px;
			background-color: #3575cc;
			border:#e6d4c0 thin solid;
			color:#ffffff;
			font-family: 'fontinRegular', Verdana, Arial, Geneva, sans-serif;
		}
			.navItem a {
				color:#ffffff;
				text-decoration: none;
			}
		
		/* The container <div> - needed to position the dropdown content */
		.navDropdown {
			position: relative;
			display: inline-block;
			height: 60px;
		}
		
			/* Dropdown Content (Hidden by Default) */
			.navDropdown-content {
				display: none;
				position: absolute;
				text-align: left;
				background-color: #fcf8e8;
				min-width: 160px;
				box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
				z-index: 1;
			}
			
			/* Links inside the dropdown */
			.navDropdown-content a {
				color: #000000;
				text-decoration: none;
				padding-bottom: 3px;
			}

			/* Show the dropdown menu on hover */
			.navDropdown:hover .navDropdown-content {
				display: block;
			}
			
			/* Change the background color of the dropdown button when the dropdown content is shown
				- all items except the last one  */
			.navDropdown:hover .navItem  {
				background-color:/*rgb(252,248,232)*/#f6edda;
				border:#000000 solid thin;
				/*background: linear-gradient(180deg, rgba(252,248,232,1) 26%, rgba(204,204,204,1) 100%);*/
			}
			.navDropdown:hover .navItem:not(.lastNavItem) a {
				color: #000000!important;
			}
			
				.subNavItem:hover {
					background-color: #f7e1bb;
					cursor: pointer;
				}
					.subNavItem {
						font-size: 14px;
						margin: 4px;
						padding-left: 6px;
						padding-right: 6px;
					}
						.hoverNavLink {
							color: #000000;
							text-decoration: none;
							padding-top: 3px;
						}

#containerInner {/* container for inner page */
	background-color: #ffffff;
	width: 100%;
	top: 40px;
	/*height: 100%;*/
	position: relative;
	text-align: center;
	overflow: hidden;
}
	#contentContainer { /* container for inner page content 960 px widepadding-top: 65px */
		width: 85%;
		margin: 0 auto;
		display: grid;
		grid-template-columns: 242px 1fr;
		grid-template-rows: 1fr;
		gap: 0px 0px;
		grid-template-areas: "sidebar content";
	}
		#titleContainer {
			width: 100%;
			height: 62px;
			background: url(../_images/titleShadow.png) left bottom no-repeat;
		}
			#titleContainer_inner {/* container for inner page title */
				position: relative;
				height: 62px;
				width: 100%;
				background-color: #8167a8;
				margin-right: 36px;
			}
			.titleText {
				position: absolute;
				z-index: 149;
				top: 0px;
				left: 48px;
				font-size: 30px;
				padding-top: 0px;
				color: #ffffff;
				font-weight: normal;
				margin-block-start: 18px;
			}

		#content_left{
			width: 242px;
			z-index: 150;
			grid-area: sidebar;
		}
		
			.content_left_callout {
				padding-top: 20px;
				color: #8167a8;
			}
			.calloutTitle {
				font-size: 18px;
				line-height: 21px;
				font-family: 'fontinSmallCaps', Verdana, Arial, Geneva, sans-serif;
			}
			.calloutText {
				text-align: left;
				padding-top: 8px;
				padding-bottom: 4px;
				padding-left: 13px;
				padding-right: 13px;
				font-size: 17px;
				line-height: 28px;
				font-family: 'fontinSmallCaps', Verdana, Arial, Geneva, sans-serif;
				text-align: center;
			}
				.calloutText_strong {
					font-family: 'fontinBold', Verdana, Arial, Geneva, sans-serif;
					font-weight: normal;
				}
			.calloutCitation {
				font-size: 14px;
				font-family: 'fontinBold', Verdana, Arial, Geneva, sans-serif;
				font-weight: normal;
				float: right;
				padding-right: 15px;
				padding-top: 12px;
				letter-spacing: 1px;
			}
			.content_left_hRuleUpper {
				padding-bottom: 3px;
			}
			.content_left_hRuleLower {
				padding-top: 15px;
			}
			
		#content_right{
			margin: 0;
			text-align: left;
			background-color: #ffffff;
			grid-area: content;
			margin-right: 35px;
		}		
		/* START content area specific html styles */
			#content_right p{
				margin: 0px;
				padding: 0px;
			}
			#content_right ul{
				margin: 0px;
				padding-top: 8px;
			}
			#content_right li{
				margin-left: 20px;
				margin-top: 0px;
				margin-bottom: 8px;
			}
			#content_right li blockquote{
				margin-left: 14px;
				margin-right: 14px;
				margin-top: 8px;
			}
			#content_right h2{
				font-family: 'fontinBold', Verdana, Arial, Geneva, sans-serif;
				font-weight: normal;
				font-size: 20px;
				margin-bottom: 5px;
				margin-top: 30px;
			}
			.content_right_dropCap {
				font-family: 'fontinSmallCaps', Verdana, Arial, Geneva, sans-serif;
				font-size: 22px;
			}
			.content_right_boldPurple {
				font-weight: normal;
				color: #8167a8;
			}
			.content_right_smallPurple {
				font-family: 'fontinRegular', Verdana, Arial, Geneva, sans-serif;
				font-size: 14px;
				font-weight: normal;
				color: #8167a8;
				line-height: 16px;
			}
			.typeChartPop {
				line-height: 12px;
			}
			p.linkPageIndent {
				margin-left: 14px!important;	
			}
			p.resourceItem {
				margin-right: 14px!important;
				margin-left: 14px!important;
				margin-bottom: 8px!important;
			}
		/* END content area specific html styles */
		
			#breadcrumbNavContainer {
				text-align: right;
				padding-top: 8px;
				padding-right: 40px;
				padding-bottom: 32px;
				font-size: 12px;
			}
			.content_right_inner{
				padding-left: 80px;
				padding-right: 50px;
			}

/* box trio */
#boxContainer {
	/*position: absolute;*/
	top: 636px;
	width: 100%;
	text-align: center;
	z-index: 1;
	/*background-color: #f7eada;
	padding-top: 40px;
	margin-bottom: 60px;*/
}
	.boxTrio {
		position: relative;
		z-index: 1000;
		width: 294px;
		height: 198px;
		display: inline-block;
		vertical-align: top;
		padding-bottom: 30px;
	}
		/*#box1 {
			padding-right: 20px;
		}*/
		#timelineBox {
			padding-left: 20px;
		}

	#box_emailField {
		background:  url(../_images/btmBox_2.png) left no-repeat;
	}
		.emailContainer_home {
			margin-top: 120px;
			margin-left: 27px;
			text-align: left;
		}
			#emailField_home {
				width: 198px;
				background-color: #f7eada;
				border: 0;
				font-family: 'fontinRegular', Verdana, Arial, Geneva, sans-serif;
			}
			#emailField_btn:hover {
				cursor: pointer; 
				cursor: hand;
			}

#footerContainer {
	width: 100%;
	background-color: #e6d4c0;
	position: absolute;
	margin-top: 20px;
	line-height: 18px;
}
	table.footerTable {
		margin: 0 auto;
		width: 960px;
		border-spacing: 0;
	}
	.footerTable a {
		text-decoration: none;
		color: #666;
	}
	a.footerHeader {
		font-family: 'fontinSmallCaps', Verdana, Arial, Geneva, sans-serif;
		font-size: 12px;
		color: #000000;
	}
	.footerTable a:hover {
		text-decoration: underline;
		color: #000000;
	}
	.footerTable td {
		display: table-cell;
		vertical-align: top;
		text-align: left;
		font-size: 11px;
		padding: 8px;
	}
	.footerTable td.blueRow {
		background-color: #3575cc;
		height: 13px;
		padding: 0;
	}
	.footerTable td.divCell {
		background: url(../_images/footer_vDiv.png) top left no-repeat;
	}
	.footerTable td.footerBottomCell {
		text-align: center;
		font-family: 'fontinSmallCaps', Verdana, Arial, Geneva, sans-serif;
		font-size: 12px;
		padding-top: 5px;
	}
		.footerTable td.footerBottomCell a{
			color: #000000;
		}
		.footerTable td.footerBottomCell a:hover {
			cursor: pointer; 
			cursor: hand;
		}
			#emailPage_unsubscribe {
				width: 210px;
				font-family: 'fontinRegular', Verdana, Arial, Geneva, sans-serif;
			}
			#emailField_unsubscribe {
				width: 210px;
				font-family: 'fontinRegular', Verdana, Arial, Geneva, sans-serif;
			}
				#unsubscribeLink:hover {
					cursor: pointer; 
					cursor: hand;
					text-decoration: underline;
				}