/* ATTRA/NCAT website stylesheet, NCAT IT, 7/24/15 */
/* LAST CHANGE 09/13/17 ~ Migrated from DEV */
/* -------------------[ Main Page Elements ]------------------- */

/* font-size:100px
   color: #ff0 
   PROD VERSION!!!
*/

body {background:#FFFFFF}

#outer_wrap {
font-family:tahoma,geneva,verdana,sans-serif;
font-size:12px;
color:#303324;
text-align:left;
margin:10px 0 0 0;
padding:0;
line-height:150%
}

#wrap {
background:#FFFFFF;
border-color:none;
-moz-box-shadow:   0px 0px 9px 2px rgba(0, 0, 0, 0.2);
-webkit-box-shadow:0px 0px 9px 2px rgba(0, 0, 0, 0.2);
box-shadow:        0px 0px 9px 2px rgba(0, 0, 0, 0.2);
margin-right:auto;
margin-left:auto;
max-width:1243px;
}

/* 9-2017 when added navvy.php */
@media (min-width:900px) and (max-width:1266px) {
	#wrap { margin-top: 160px; }
}
@media (min-width:612px) and (max-width:899px) {
	#wrap { margin-top: 130px; }
}
#main_content ul li {
	list-style: none;
}

#userBar {
padding:0 2px;
max-width:1243px;
margin:0 auto;
background:none;
/* height:83px; */
}

#userBar_left {
float:left;
width:266px;
height:80px;
padding:0 20px
}

#userBar_left_esp {
float:left;
width:360px;
height:80px;
padding:0 20px
}

#userBar table.signin {
/*background:url(/images/lock.png) 0% 0% no-repeat;*/
width:320px;
margin:0 10px 0 0;
text-align:right
}

#userBar table.signout {
/*background:url(/images/un_lock.png) 0% 0% no-repeat;*/
width:320px;
margin:0 10px 0 0;
text-align:right
}

#userBar_right_signin {
text-align:left;
height:60px;
font-size:12pt;
padding:5px 0 0 0
}

#userBar_right_signout {
text-align:left;
height:60px;
font-size:12pt;
padding:20px 0 0 0
}

/* for spanish users - /includes/userbar_esp.php */
#userBar_right_signin_esp {
text-align:right;
height:60px;
font-size:12pt;
padding:20px 0 0 0
}

#userBar_right_signout_esp {
text-align:right;
height:60px;
font-size:12pt;
padding:20px 0 0 0
}
/* end esp userbar */

	/* responsive styles for userBar */
	@media (min-width:320px) and (max-width:498px) {
	/* displays lower on page for mobile browsers */
	#userBar {
	margin:50px auto;
	}
	
	#userBar_left {
	float:none;
	background-size:320px;
	/*background:url(/images/NCAT_ATTRA_head_logo.png) no-repeat center;*/
	margin:-40px auto -15px auto
	}
	
	#userBar_left_esp {
	float:none;
	background-size:320px;
	/*background:url(/images_espanol/NCAT_ATTRA_head_logo_esp.png) no-repeat center;*/
	margin:-40px 0 -15px -25px
	}
	
	.alert {
	display:none;
	}
		
	.mobile_menu { 
	margin-left:15px !important;
	/* pushes logo to the right on mobile/tablet...so the hamburger nav doesn't cover it. */
	}
	}
    

/* -------------------[ Navigation ]------------------- */
#nav {
width:100%;
max-width:1243px;
background:#001489;
height:40px;
line-height:40px;
/* dmw margin-top:97px; */
	margin-top:40px;
}

ul.nav {
list-style-type:none;
margin:0;
padding:0;
position:absolute;
font-size:1.2em;
font-weight:bold;
letter-spacing:0px;
height:40px;
line-height:40px
}

ul.nav li {
display:inline-block;
float:left;
}

ul.nav li a {
color:#FAF7E8;
margin:0;
display:block;
height:40px;
text-align:center;
line-height:40px;
text-decoration:none;
margin:auto 14px
}

ul.nav li:hover {
color:#FAF7E8;
margin:0;
display:block;
height:40px;
text-align:center;
line-height:40px;
background:#FFD200
}

ul.nav li a:visited {
color:#FAF7E8
} 

/* style for dropdown links */
ul.nav li:hover ul.nav a {
position: relative;
background:#FFD200;
color:#FAF7E8;
height:40px;
line-height:40px;
font-size:0.8em;
margin:0;
z-index:1000
}

/* hover state for dropdown links */
ul.nav li:hover ul.nav li:hover a {
position: relative;
background:#FFD200;
color:#FAF7E8;
height:40px;
line-height:40px
}

/* hide dropdown links until they are needed */
ul.nav li ul {
display:none
}

/* make dropdown links vertical */
ul.nav li ul li {
display:block;
float:none
}

/* prevent text wrapping */
ul.nav li ul li a {
min-width:150px;
text-align:left;
padding:0 0 0 15px
}

/* display the dropdown on hover */
ul.nav li a:hover + .nav_hidden, .nav_hidden:hover {
display:block
}

/* style 'show menu' label button and hide it by default */
.show-menu {
text-decoration:none;
font-size:1.2em;
font-weight:bold;
letter-spacing:0px;
color:#FAF7E8;
text-align:center;
padding:0;
display:none
}

/* hide the checkbox */
input[type=checkbox]{
display:none;
-webkit-appearance:none
}

/* show menu when invisible checkbox is checked */
input[type=checkbox]:checked ~ #menu{
display:block
}

	/* responsive styles for nav bar*/
	@media (max-width:1107px){
	/*Make dropdown links appear inline*/
	ul.nav {
	position:static;
	display:none;
	height:auto !important;
	}
	
	/* create vertical spacing and make all menu links full width */
	ul.nav li {
	position:relative;
	z-index:1000;
	/*margin-bottom:1px;*/
	width:100%;
	background:#001489;
	text-align:center;
	border-bottom:1px solid #FAF7E8
	}
	
	ul.nav li a {
	background:#001489
	}
	
	ul.nav li a:hover {
	background:#FFD200;
	margin:0
	}
	
	/* display 'show menu' link */
	.show-menu {
	display:block
	}
	
	.nav_hidden {
	display:none !important
	}
	
	.hidden_arrow {
	display:none !important
	}
	}

/* search box */
#searchblock {
float:left;
width:560px;
height:70px;
padding:25px 0 0 80px
}

	/* responsive styles for search box

This is now handled below, near line 503 in no_mobile. Completely hidden when launched new navvy for mobile.


/*@media (min-width:499px) and (max-width:1025px) {
	/*make big search box disappear at less than 1024px*/
	/*#searchblock {
	/*display:none
	/*}
		
	userBar_right_signin_esp {
	margin-right:750px;
	border:1px solid #000;
	}
} */
	
.searchtext {
color:#61686f;
border:1px solid #c3c3c3;
padding:2px 0 3px 6px;
height:18px
}

.searchinput {
padding:0;
margin:0;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}

textarea.filled { 
font-style:italic;
color:#777
}

.button {
font-size:16px;        
height:25px;
font-weight:bold;        
}
/* end search box */

/* -------------------[ End Navigation ]------------------- */

/* -------------------[ Content ]------------------- */

#leftcontent_home {
font-size:11pt;
font-weight:bold;
width:20%;
float:left;
margin:130px 0 15px 0;
/* dmw margin:25px 0 15px 0; */
padding:1px 10px 15px 15px;
border-right:1px solid #ccc9b8
}
@media (min-width:1266px) {
	#leftcontent_home { margin:25px 0 15px 0; }
}

#leftcontent {
font-size:11pt;
font-weight:bold;
width:20%;
float:left;
/* dmw margin:150px 0 15px 0; see media query below */
margin:150px 0 15px 0;
padding:1px 10px 15px 15px;
border-right:1px solid #ccc9b8
}
@media (max-width:1278px) {
	#leftcontent {margin:10px 0 15px 0; }
}
/* Espanol */
#wrap.wrap-spanish-home div#page div#leftcontent {
margin:0 0 15px 0;
}

#main_content {
font-family:tahoma,geneva,verdana,sans-serif;
font-size:11pt;
line-height:1.5em;
width:75%;
float:left;
padding:3px 0 25px 15px;
}

/* target only main page main_content, not cart pop-up main_content which unfortunately has the same name
also see media query below */
div#outer_wrap div#wrap div#main_content {
/* dmw	margin:135px 0 15px 0 */
	margin:165px 0 15px 0
}
@media (max-width:1278px) {
	div#outer_wrap div#wrap div#main_content { margin:30px 0 15px 0 }
}
/* Spanish home page */
div#outer_wrap div#wrap div#main_content.spanish-home {
	margin:0 0 15px 0
}


p {
margin-top:0px;
margin-bottom:15px
}

	/* responsive styles for main_content */
	@media (max-width:870px){
	/* fit content if viewport is less than 870px wide || rule applied for any browser width below the value defined in the query. */
	#main_content {
	width:70%;
	}
	.mobile_menu { 
	margin-left:55px !important;
	/* pushes logo to the right on mobile/tablet...so the hamburger nav doesn't cover it. */
	}
	}

	/* responsive style for mobile */
	@media (max-width:480px){
	/* Lose left nav if screen > 480px */
	#main_content {
	width:90%;
	}
	#leftcontent {
	display:none
	}
	.mobile_menu { 
	margin-left:55px !important;
	/* pushes logo to the right on mobile/tablet...so the hamburger nav doesn't cover it. */
	}
	}

/* -------------------[ Home Page Specific Classes]------------------- */

.main ul li {
	list-style: none;
}

figcaption ul li  {
	list-style: none;
}

#feature {
font-size:10pt;
/* dmw width:70%;  */
width:74%;
padding:1px 0 15px 5px;
margin:0 45px 0 0;
height:auto;
float:right;
line-height:1.75em
}
/* dmw 
@media (min-width:1278px) {
	#feature { margin:0 45px 0 0; }
}*/

#lead_story {
font-size:11pt;
width:98%;
min-height:180px;
border:1px solid #CCC9B8;
line-height:1.75em;
padding:10px;
margin:-20px 0 0 -7px;
}

#helpful {
font-size:11pt;
width:98%;
display:inline-table;
border:1px solid #CCC9B8;
line-height:1.75em;
padding:10px;
margin:-20px 0 0 -7px;
}

#helpful ul {
list-style-position:inside;
}

#helpful li {
list-style:disc url(/images/bullet.gif) outside
}

.lead_image {
float:right;
margin:8px 0 20px 12px;
}

#blog_box {
font-size:11pt;
line-height:1.75em;
width:50%;
float:left;
padding:0;
margin:0
}

.emphasis-related-pub {
border:3px dotted #DCDCDC;
padding:5px
}

#sub_feature {
font-size:10pt;
width:30%;
padding:1px 0 15px 10px;
margin:10px 0 0 0;
height:auto;
float:left;
text-align:left
}

#sub_feature li {
list-style:disc url(/images/bullet.gif) outside
}


@media (max-width:1254px){	 
	.no_mobile {
		display: none;
		height: 0px !important;
		padding:0 !important;
		}
}

	@media (max-width:799px){
	/* fit content if viewport is less than 800px wide || rule applied for any browser width below the value defined in the query. */
	#feature {
	width:65%;
	}
	#lead_story {
	width:100%;
	padding:10px
	}
	#helpful {
	width:96%;
	margin-bottom:-25px;
	}
	.lead_image {
	float:none;
	margin:0;
	}
	/*#blog_box {
	display:none
	}	*/
	.no_mobile {
	display:none
	}	
	.home_video {
	display:none
	}
	.mobile_menu { 
	margin-left:55px !important;
	/* pushes logo to the right on mobile/tablet...so the hamburger nav doesn't cover it. */
	}
	}
	
	@media (max-width:600px) {
	/* displays lower on page for mobile browsers */
	#feature #yellow-box {margin-top:110px;}
	#feature {
	width:100%;
	margin: 10px; 
	padding:10px;
	border:none
	}
	#lead_story {
	width:96%;
	}
	#helpful {
	width:96%;
	}
	#helpful ul {
	margin:0 0 0 -15px
	}
	#blog_box {
	display:none
	}
	.no_mobile {
	display:none
	}
	.mobile_menu { 
	margin-left:55px !important;
	/* pushes logo to the right on mobile/tablet...so the hamburger nav doesn't cover it. */
	}
	}

	@media (max-width:480px) {
	/* displays lower on page for mobile browsers */
	#feature {
	width:100%;
	margin:0;
	padding:10px;
	}
	#lead_story {
	width:92%;
	margin:-35px 0 -80px 0
	}
	#blog_box {
	display:none
	}
	#helpful {
	display:none
	}
	.lead_image {
	float:none;
	margin:0;
	}
	.no_mobile {
	display:none
	}
	.mobile_menu { 
	margin-left:55px !important;
	/* pushes logo to the right on mobile/tablet...so the hamburger nav doesn't cover it. */
	}
	}
	
	@media (max-width:320px) {
	/* displays lower on page for mobile browsers */
	#feature {
	width:100%;
	margin:0;
	padding:10px;
	}
	#lead_story {
	width:92%;
	margin:-35px 0 -80px 0
	}
	.no_mobile {
	display:none
	}
	.mobile_menu { 
	margin-left:55px !important;
	/* pushes logo to the right on mobile/tablet...so the hamburger nav doesn't cover it. */
	}
}

/* -------------------[ End Home Page Specific Classes ]------------------- */

#sidebar {
width:250px;
font-size:8pt;
float:left;
margin:0;
padding:0
}

#footer {
font-size:11pt;
color:#303324;
width:99%;
background:#FFFFFF;
line-height:1.75em;
clear:both;
margin:0px auto;
padding:20px 0 ;
text-align:left
}

#footer p {
margin:0
}

#footer a:hover {
color:#000000 !important
}

/* -------------------[ HTML PUBS ]------------------- */
#cite {
font-size:13px;
line-height:120%
}

#pdf_box {
float:right;
font-size:8pt;
line-height:120%;
width:350px
}

#summary {
padding:10px;
width:98%;
float:left;
/*display:table*/
}

#summary_buttons {
width:300px;
height:auto;
text-align:center;
margin:0 auto;
padding-top:13px;
padding-bottom:10px;
border:2px solid #ccc9b8
}

.summary_left, .summary_middle, .summary_right {	
width:29%;
float:left
}

	/* responsive styles for summary pages */
	@media (min-width: 600px) and (max-width: 1000px) {
	#summary_buttons {
	height:auto;
	text-align:center;
	margin:0 auto;
	padding-bottom:10px auto;
	border:none
	}
	#summary_buttons img {
	height:auto
	}	
	.summary_left {
	float:left;
	clear:both
	}
	.summary_middle {
	float:right;
	width:auto;
	margin:-250px 0 0 -25px;
	padding:auto 10px;
	clear:both;
	}
	.summary_right {
	float:none;
	clear:both;
	}
	}

	/* responsive styles for summary pages */
	@media (max-width: 600px) {
		
	#summary {
	padding:10px auto;
	}
	.header {
	text-align:center;
	font-size:36px;
	}
	#summary_buttons {
	height:auto;
	text-align:center;
	margin:0 auto;
	padding-bottom:10px auto;
	border:none
	}
	#summary_buttons img {
	height:auto
	}
	.summary_left {
	margin:auto 50px;
	width:90%;
	clear:both
	}
	.summary_middle {
	margin:auto 60px;
	width:90%;
	clear:both
	}
	.summary_right {
	margin:auto 10px;
	float:left;
	clear:both;
	}
	.mobile_menu { 
	margin-left:55px !important;
	/* pushes logo to the right on mobile/tablet...so the hamburger nav doesn't cover it. */
	}
	}

.summary_toc {
line-height:2.0em !important;
}

.smaller {
font-size:9pt;
color:#777777;
line-height:normal;
margin:0 0 15px 0 !important
}

.cutline {
font-size:10pt;
color:#777777;
line-height:normal;
padding:5px;
}

.cutline img {
margin:0 !important;
padding:0 !important
}

.border-pub-table-left {
border:1px solid #CCC9B8;
margin:3px 15px 15px 0px
} 
	
.border-pub-table-right {
border:1px solid #CCC9B8;
margin:3px 0px 3px 15px;
padding:0 !important
}

.border-pub-table {
border:1px solid #CCC9B8;
margin:3px 15px 15px 0px
} 

.gray_border_float_left {
float:left;
margin:5px 20px 10px 0;
padding:5px;
border:1px solid #CCC9B8
}

.gray_border_float_right {
float:right;
margin:5px 0 10px 20px;
padding:5px;
border:1px solid #CCC9B8
}

.emphasis-lightgrey {
background:#EEEEEE;
border:thin solid #CCC9B8;
padding-left:5px;
padding-right:5px;
margin-bottom:10px;
text-align:left;
vertical-align:top
}

.emphasis-pub-lightyellow {
font-size:1em;
background:#EEEEEE;
padding:0px 0px 0px 0px;
margin:0px 0px 15px 0px;
text-align:left;
vertical-align:top;
border:1px solid #CCCCCC
}

.emphasis-pub-sidebar {
font-size:12px;
line-height:18px;
background:#EEEEEE;
padding:10px;
margin:0px 0px 0px 15px;
text-align:left;
vertical-align:top;
border:1px solid #CCCCCC
}

.emphasis-pub-lightyellow td {
border:1px solid #CCCCCC;
padding:5px
}

.gray_box {
font-size:1em;
background:#EEEEEE;
padding:0px 5px 0px 5px;
margin:0px 0px 15px 0px;
text-align:left;
vertical-align:top;
border-collapse:separate; 
border-spacing:10pt 5pt;
border:1px solid #CCCCCC
}

.gray_box td {
border:1px solid #CCCCCC;
padding:5px
}

.top_arrow {
background:url(/images/top.gif) no-repeat;
background-position:top left;
padding-left:30px
}

.bigtype {font-size:25px;}

/* -------------------[ Publication Lists ]------------------- */

hr {
display:block;
position:relative;
padding:0;
clear:both;
border:none;
border-top:1px solid #AAA;
border-bottom:1px solid #FFF;
font-size:1px;
line-height:0;
overflow:visible
}

.hr_lists {
display:block;
position:relative;
padding:0;
margin:8px auto;
width:95%;
clear:both;
border:none;
border-top:1px solid #AAA;
border-bottom:1px solid #FFF;
font-size:1px;
line-height:0;
overflow:visible
}

span.bull { 
color:#AAA !important;
}

.titles {
color:#330000;
line-height:130%;
margin:0;
padding:0 0 3px 0;
text-align:left;
font-weight:bold;
font-size:1.1em
}

.cat_titles {
font-size:17px;
font-weight:bold;
color:#418900;
padding-bottom:20px
}


/* -------------------[ Headings ]------------------- */

h1, h2, h3, h5, h6, h7 {
color:#330000;
letter-spacing:-1px;
line-height:130%;
margin:0;
padding:0 0 3px 0;
text-align:left;
font-weight:normal
}

h1 {
text-align:left;
font-size:30px;
line-height:100%;
padding:5px 5px 5px 0px;
margin:0;
}

h1 a,
/*h1 a:visited*/ {
color:#330000;
}

h2 {
font-size:26px;
}

h3 {
font-size:12pt;
font-weight:bold
}

h4 {
font-size:10pt;
font-weight:bold;
color:#000000;
margin-bottom:-0.5px;
}

h4 a,
h4 a:visited {
color:#996600;
}

h4 a:hover {
text-decoration:underline;
color:#000
}

h5,h6,h7 {
font-size:10pt;
font-weight:bold
}

#sidebar h2, #midcontent h2  {
font-weight:bold;
font-size:9pt;
letter-spacing:0px;
margin:0;
padding:0
}

h1.sectionhead, h2.sectionhead, h2#trackbacks, h3.feedback_section, h3.comment_form_title  {
line-height:100%;
font-weight:bold;
font-size:10pt;
letter-spacing:0px;
margin:0;
padding:10px 15px;
border-bottom:1px solid #CCC9B8;
background:#E5E0C3
}

/* -------------------[ Links ]------------------- */
a {
color:#001489;
text-decoration:none
}

a:visited {
color:#40214A;
text-decoration:underline !important
}

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

#footer a:hover, #footer a:active {
text-decoration:underline;
color:#fff;
}

/* -------------------[ Sidebar ]------------------- */
#sidebar ul {
list-style-type:none;
margin:0 ;
padding:0;
}

#sidebar ul li {
list-style-type:none;
margin:0 0 10px;
padding:0;
}

#sidebar ul li ul {
list-style-type:square;
margin:0;
padding:0;
}

#sidebar ul li ul li {
list-style-type:none;
padding-left:15px;
margin:0;
background:url(/images/bullet.gif) 0 5px no-repeat;
}

/* -------------------[ Misc Tags and Classes ]------------------- */
.button-success {
color:white;
border-radius:4px;
text-shadow:0 1px 1px rgba(0, 0, 0, 0.2);
background:rgb(28, 184, 65); /* this is a green */
        }
.button-xlarge {
font-size:125%
}

blockquote {
border:2px dotted #ccc;
background-color:#eee;
margin:1em 2em;
padding:0 1ex
}

/*For tooltip target element that has set class="tooltip" */
.tooltip { text-decoration:none; color:#001489; outline:none; }

/*For tooltip box*/
div#mcTooltip 
{
    line-height:16px;
    border-width: 1px;   
    color:#333; 
    border-color:#001489;
    padding:20px;
    font-size: 12px;
    font-family: Verdana, Arial;
    border-radius:1px; /*Rounded corners. N/A for IE 8 and below.*/
    box-shadow: 0 1px 4px #AAAAAA; /*Drop shadow. N/A for IE 8 and below.*/
}

div#mcTooltip, div.mcTooltipInner 
{
    background-color:#FBF5E6;
}

/* For hyperlink within tooltip */
div#mcTooltip a { color:#001489; }

/*Close button. Available when sticky or overlay has been set to true, or is on iPhone, iPad, Android, BlackBerry, or IEMobile devices. */
div#mcttCloseButton 
{
    width:45px;height:13px;position:absolute;/*background-image:url(closeBtn.gif);*/cursor:pointer; overflow:hidden;
    top:12px; right:14px; left:auto;
}            

/* Only applies when overlay has been set to true or 1 */
div#mcOverlay 
{
    background-color: black;
    opacity:0.5; filter: alpha(opacity=50); 
    display:none;top:0;left:0;width:100%;height: 100%;overflow:visible;z-index:4; 
}

/*Only available when calling by tooltip.ajax(...). It will be a spinning image indicating a request is in progress.*/
div#tooltipAjaxSpin {margin:20px 50px; background:transparent url(loading.gif) no-repeat center center; width:50px; height:30px; font-size:0;}

/*The settings below should remain unchanged*/
div#mcTooltipWrapper {position:absolute;visibility:hidden;overflow:visible;z-index:9999999999;top:-2000px;}
div#mcTooltip {float:left;border-style:solid;position:relative;overflow:hidden;}
div.mcTooltipInner {float:left;position:relative;width:auto;height:auto;}
div#mcttCo {position:absolute;text-align:left;}
div#mcttCo em, div#mcttCo b {display:block; width:0; height:0;overflow:hidden;}

/*workable with bootstrap*/
div#mcTooltip, div#mcTooltip div {
     -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
     box-sizing:content-box;
}

img {
  vertical-align: middle;border: 0;
}
.button_box {
  padding:5px;
  border:1px solid #001489;
  background-color:#FFD200;
  margin:0;
  text-align:center	
}

/* ordered lists spacing */
ol li { margin-bottom:15px; }
ul li { margin-bottom:15px; }

/* adjust anchor links for sticky header */
a.anchor {
    display: block;
    position: relative;
    top: -150px;
    visibility: hidden;
}

/* adjust spanish pages for sticky header and nav */
#wrap.wrap-spanish-home div.bxSlider { 
	margin-top: 138px; 
	}

/* font awesome icons for social links left sidebar */
a i.fa {
	color:#001489;
	font-size: 32px;
	padding-right:8px;
}