/* We use this CSS to modify the UI elements that come "out-of-the-box" with Author-it's Magellan Help.
   Do not use this CSS to modify the style fonts, colors, etc. Use styleDefinitions.css for that. */

/*---------- Landing Page Colors and Fonts ---------------*/

/* rotator section main container - all the rotator items and the control buttons */
section.testimonials_section {
    background-color: #FFFFFF;
    padding: 15px;
    align-content: center;
}

/* Promoted content section main container */
section.content_root_section {
    background-color: #FFFFFF;
    padding-bottom:30px;
}


/* Title and Search bar section */
.mainpage_block.jumbotron {
    background-color: transparent !important;
    padding:15 1% 15 1%;
    margin: 40px 0 40px 0;
}
h1.text-center {
	font-family: "Barlow", "Segoe UI", "Calibri";
	font-size: 24px;
	color: var(--panel-head-text-color);
	font-weight: 600;
}

/* [2022 Oct 05: Fix font weight for the search results.] */
#shortened_search_result > div td a {
    font-size: 1em;
    font-weight: normal;
}

#shortened_search_result > div td a span {
    font-size: 1em;
    color: var(--primary-color);
}

/* Site title - comes from the Book Web Title property of the Book */
.mainpage_block.jumbotron > h1 {
    margin: 0px 10px -40px 0px;
    color: #FFFFFF;
    font-weight: 1;
    font-size: 38px;
    text-shadow: none;
    white-space: normal;
    height: 125px;
    line-height: 150%;
}

/* top nav menu and item containers */
nav.navbar-default {
	background-color: white;
	box-shadow: 0px 2px 2px var(--light-gray-color);
}

div#navigation-root > ul.nav.navbar-nav > li.dropDownChild > a a {
	color: var(--text-color) !important;
	font-weight: normal;
}

div#navigation-root > ul.nav.navbar-nav > li.dropDownChild.open  > a{
	background-color: white;
	border-bottom: 3px solid var(--primary-color);
}

		/* And for mobile viewing:*/
.bg_orange{
	background-color: white;
}
header#ipad .m_top_icons > li > a > svg {
	fill: var(--primary-color) !important;
}

/* base defaults for the header container  */
header#desktop > div.container-fluid > div.row {
    padding: 5px 5px 3px 5px;
	vertical-align: middle;
    background-color: var(--background-color);
}

/* [2020/09/10: Hide the top nav items altogether.] */
/* [2020/10/30: Except for hamburger icon, which is li.m_top_menu.] */
ul.top_icons.nav.navbar-nav.pull-right {
	display: none;
}

li.m_top_config.hidden-xs, li.m_top_help.hidden-xs, header#ipad li.m_top_config, header#ipad li.m_top_help  {
	display: none !important;
}
/* [2020/10/30: Add hamburger icon back in, but right-align it.] */
header#ipad li.m_top_menu {
	float: right;
}

/* Web Heading from [LandingPageRotatorItems] topics and [LandingPageContentItems] topics,respectively.
 * They're always H3 regardless of TOC level in book. */
/* [SLW 2023-Feb-16: Modify the font sizes of the rotator and content cards to maintain the same font sizes
 *  regardless of the font settings for p elements in the styleDefinitions.css.] */

.testimonials_header h3, .landing_content_box h3 {
    font-family: "Barlow", "Segoe UI", "Calibri";
	font-size: 20px;
	color: var(--panel-head-text-color);
	background-color: #FFFFFF;
	margin: 0;
    padding: 10px;
    font-weight: 500;
    text-align: center;
}

/*Hover color for[LandingPageRotatorItems] and [LandingPageContentItems] cards, respectively. */
.testimonials_header:hover, .landing_content_box:hover  {
	box-shadow: 1px 1px 3px var(--primary-color);
}

/* Body content from [LandingPageRotatorItems] individual topics. divs have id="l_{topic id}" */
.testimonials_header {
	height: 325px;

}

.testimonials_header p > div {
    padding: 0 10px 1em;
    font-size: 14px;
    overflow: hidden;
    line-height:normal;
    word-spacing:normal;
	text-align:center;
}

._landingpagerotatoritem_ p {
	font-size: 14px; /*Should be the same as .testimonials_header p > div */
}

/* Body content from [LandingPageRotatorItems] individual topics. divs have id="l_{topic id}" */
.landing_content_box p > div {
    padding: 0 10px 1em;
    font-size: 14px;
    overflow: hidden;
    max-height: 220px;
    line-height:normal;
    word-spacing:normal;
	text-align:center;
}

._landingpagecontentitem_ p {
    font-size: 14px; /* Should be the same as .landing_content_box p > div */
}

/*---------- Footer Colors---------------*/

/* footer links */
.footer_links a {
	background-color: white;
    color: var(--primary-color);
    text-decoration: none;
    margin: 0 10px;
    font-size: 13px;
}
/* footer section container - aligned to the bottom of the window */
/* [Sam 2021-Jun-08: Add border to the footer to offset it with the TOC and the topic content.]*/ 
.footer {
    background-color: white;
    color: var(--secondary-color);
	box-shadow: 0px -2px 4px var(--light-gray-color);
    padding: 10px 0;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 6000;
}

/*---------- Tables ---------------*/

table.table {
    border-collapse: separate;
    border-spacing: 1px;
    border-radius: 4px;
    border: 2px solid var(--light-gray-color);
    background-color: var(--light-gray-color);
    box-sizing: border-box;
    box-shadow: 1px 1px 3px var(--light-gray-color);
	margin-bottom: 0;
}
/* [SLW 2023-Feb-16: Modify the table padding to have equal spacing above and below the table paragraphs.] */
table.table td {
    padding: 0 5px 16px !important;
}  

table.table th {
    padding: 16px 5px !important;
}  

table.table td .tableheader {
	padding-top: 16px;
}

div.tableheader {
	padding-top: 0 !important;
}
  
/* This CSS block hides the right "NAVIGATION" block and realigns the margin of the center block
   to remove the extra white space where the tab control would go.*/   
   /*[Sam 2021-Jun-08: Showing the right "NAVIGATION" block again, but using the themeconfig.json
     file to show only those items that we want to show. ]*/
/*section.content_block > .right_block  {
	display: none;
}*/

/*[Sam 2021-Jun-08: Now that "NAVIGATION" block is back, change the color of the expander button.]*/
#right_block_collapse:hover > p::before{
	color: white;
}

/*[Sam 2021-Jun-08: Hide the images for the sections in the "NAVIGATION" block, since we can't
   change the colors without altering the underlying Javascript.]*/

a.collapsed:hover > i.fa.acc_expand.pull-right::before {
 color: white;
}

a.collapsed > i.fa.acc_expand.pull-right::before {
 color: var(--dark-gray-color);
}

i.fa.acc_expand.pull-right::before {
 color: white;
}

section.content_block > .center_block {
	margin-right: 2px;
}
/* End codeblock for hiding the right "NAVIGATION" block*/

/* Specify color for language drop-down on top bar*/
/*a#langDp {
    color: var(--primary-color);
} */


/*---------Change the tree button colors----------*/
/* footer panel containing the TOC, Index, and Glossary buttons */
/* [2020/09/10: Now that we've locked down Index and Glossary buttons, hide the Contents button as well]*/
/* [2021/04/15: Set the height of the hidden panel to something small] */
#menusection > div.panel-footer {
	display: none;
    background-color: var(--background-color) !important;
    position: absolute;
    width: 100% !important;
    padding: 5px 3px 5px 3px;
    border-top: 1px solid var(--light-gray-color);
    border-left: none;
    border-radius: 0;
    bottom: 0px;
}
div#menusection.panel-collapse.filtersec.in {
	height: 100% !important;
}
#accordion3 > .panel-default > .panel-collapse > .panel-body {
	height: 100% !important;
}
#accordion3 > .panel-default {
	padding-bottom: 0px;
}
/* normal button */
#menusection > div.panel-footer .menu_bot_btn {
    width: calc(33.3333% - 5px);
    border: 1px solid var(--light-gray-color);
    border-radius: var(--border-radius-small);
    background-color:  var(--button-bg-color);
    color: inherit;
    float: left;
    white-space: pre-wrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 6px 5px;
    margin: 0 2px 0 2px;
    box-shadow: none;
    font-weight: 600;
}

/*[Sam 2022-Apr-13: Change image color for icons in the right pane (My Saved Searches, etc.) when selected.*/
#accordion2 > .panel-default > .panel-heading > .panel-title > a.collapsed  > img {
	filter: none;
}

#accordion2 > .panel-default > .panel-heading > .panel-title > a.collapsed:hover > img {
	filter: invert(100%);
}

#accordion2 > .panel-default > .panel-heading > .panel-title > a  > img{
	filter: invert(100%);
}

/* TOC expander button*/
#left_block_collapse:hover {
	background-color: var(--active-btn-bg-color);
	border: 1px solid var(--active-btn-bg-color);
}

/*[Sam 2021-May-18: Add indentation to TOC list items and have the text wrap for all TOC items.]*/
li.jqtree_common {
	color: var(--dark-gray-color);
	font-size: 14px;
	margin-left: 20px;
	margin-top: 10pt;
	margin-bottom: 0px;
}
div.jqtree-element.jqtree_common {
	color: var(--dark-gray-color);
	font-size: 14px;
	margin-top: 10pt;
	margin-bottom: 0px;
}
 span.jqtree-title.jqtree_common.jqtree-title-folder {
	padding-right: 20px;
	width: 100%;
}
ul.jqtree-tree span.jqtree-title {
	height: auto;
	white-space: pre-wrap;
}
ul.jqtree-tree .jqtree-toggler.jqtree-toggler-left{
	vertical-align: top;
}

/*[Sam 2021/04/15: Hide Save Search button on Search results pane]*/
button.btn.btn-primary.submit_btn.pull-right {
	display: top;
}

/* hover over normal and active button */
#menusection > div.panel-footer .menu_bot_btn:hover, #menusection > div.panel-footer .menu_bot_btn.active:hover {
    border: 1px solid var(--active-btn-bg-color);
    background-color: var(--active-btn-bg-color);
    box-shadow: 1px 1px 3px var(--shadow-color);
    color: var(--active-btn-text-color);
}

/* active/selected button */
#menusection > div.panel-footer .menu_bot_btn.active {
    border: 1px solid var(--active-btn-bg-color);
    background-color: var(--active-btn-bg-color);
    box-shadow: 1px 1px 3px var(--shadow-color);
    color: var(--active-btn-text-color);
}

/* Hide the language drop-down on top bar */
li.lang_dropdown {
    display: none;
}

li.dropdown.lang_dropdown.m_top_lang {
    display: none !important;
}

/* Hide ellipses menu in the mobile view. */
/* [Sam 2020-07-23: This menu normally displays the widgets that you see on the right Navigation pane. 
    Since we've turned those off in the siteconfig.json, the menu is blank and we need to hide it.
	If we decide to turn those widgets back on, we should also display the menu again.] */
li.dropdown.m_top_ellipses.hidden-sm.hidden-md.hidden-lg {
	display: none !important;
}


/* Hide the floating Related Topics box on the right */
div.thisRatebox.right-box-menu {
	display:none !important;
}

/* Specify color change for navigation buttons on hover (highlighted background) */
div#left_block_collapse:hover > p::before {
	color: white;
}

/*[Sam 2020-07-27: We've hidden the Related Topics box for now, so we don't need to change its
   hover color. If we decided to add the Related Topics box back in, we can use the following
   two styles to adjust the hover color.]
div.related_menu:hover > div.related_header:hover::before {
	color: var(--active-btn-text-color);
}
p.group_header:hover {
	color: var(--active-btn-text-color);
}*/

/* Add in the rotating background image.*/
@keyframes dynamicBG {
	0%		{background-image: url(../images/LifeSciencesMasthead.png);}
	7.5%	{background-image: url(../images/LifeSciencesMasthead.png);}
	12.5%	{background-image: url(../images/MarineMasthead.png);}
	20%		{background-image: url(../images/MarineMasthead.png);}
	25%		{background-image: url(../images/MiningMasthead.png);}
	32.5%	{background-image: url(../images/MiningMasthead.png);}
	37.5%	{background-image: url(../images/NaturalGasMasthead.png);}
	45%		{background-image: url(../images/NaturalGasMasthead.png);}
	50%		{background-image: url(../images/PulpPaperMasthead.png);}
	57.5%	{background-image: url(../images/PulpPaperMasthead.png);}
	62.5%	{background-image: url(../images/SteelFabricatorMasthead.png);}
	70%		{background-image: url(../images/SteelFabricatorMasthead.png);}
	75%		{background-image: url(../images/WaterTreatmentMasthead.png);}
	82.5%	{background-image: url(../images/WaterTreatmentMasthead.png);}
	87.5%	{background-image: url(../images/WindMasthead.png);}
	95%		{background-image: url(../images/WindMasthead.png);}
	100%	{background-image: url(../images/LifeSciencesMasthead.png);}
}

div.row.clearfix > div.col-md-12 {
 background-size: cover;
 animation: dynamicBG 40s linear 0s infinite normal;
 }
 
div.row.clearfix > div.col-md-12:hover {animation-play-state: paused;}