/* ----------------------------------------------------------------------------
   layout-custom-style_bridgehead2.css | Version: 1.1 Edited: 2026-09-30
   Copy of layout-custom-style_bridgehead.css (sidebar TOC + bridgehead style)
   with three specific pieces from the later front-page work folded back in:
     1. Hero banner fix (".portal-header" - auto height + gradient)
     2. Search bar shadow fixes (the double-shadow + full-page-shadow bugs)
     3. Card hover shadow/lift effect
   Deliberately NOT included: the card icon/band redesign, the grid
   alignment fix, or the full featured-card system (images/dividers/JS) -
   those live only in layout-custom-style_cards.css.
   Neither layout-custom-style.css, layout-custom-style_bridgehead.css, nor
   layout-custom-style_frontpage.css are touched by this file.
   ---------------------------------------------------------------------------- */
   
   
@media (min-width: 768px) {
    .portal-header .logo {
        margin-bottom: 0;
        height: 50px;
    }
}
   
/* Frontpage | Cards */
 
.portal-single-publication a {    
    color: #333333;
    background-color: #ffffff;
}

.portal-single-publication .publication-icon {
    background-color: #1268B3;
	width: 90px;
    height: 90px;
    line-height: 90px;
	font-size: 40px;
}

.portal-single-publication a {
    border: 1px solid #ddd;
    border-radius: 9px;
	
}

.portal-single-publication .publication-icon .fa, .portal-single-publication .publication-icon i {
    color: #FFFFFF;
}

/* Frontpage | Modernize
   theme2.css hardcodes ".portal-header" to a fixed height:350px - with only
   a title and search box in it, that leaves ~250px of flat, empty navy
   space above the cards, which is most of what made the front page feel
   old-fashioned/unfinished. Switched to auto height driven by padding
   instead, so the banner hugs its actual content. A subtle diagonal
   gradient (in the same navy family, no new image asset needed) replaces
   the single flat color for a bit of depth. */
.portal-header {
  height: auto;
  padding: 48px 0;
  background-color: #043D5D;
  background-image: linear-gradient(135deg, #0a5079 0%, #043D5D 55%, #032c44 100%);
}

/* Card hover feedback - a small lift + deeper shadow on hover/focus so the
   cards feel interactive instead of static, with a smooth transition. */
.portal-single-publication a {
  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.portal-single-publication a:hover,
.portal-single-publication a:focus {
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.12);
}

/* Toolbar */
.toolbar, .tool-search-form .search-field, .pager li>a:hover, .pager li>span:hover, .colored-top .site-sidebar-header, .fixed-toolbar
 {
    background-color: #043D5D;
 }

/* theme2.css puts a generic elevated-surface drop-shadow under ".toolbar"
   (the site-wide top nav bar on every page, not just the front page hero).
   It sits directly above the sidebar header, which is also navy - the
   shadow has nowhere useful to fall (no lighter background right below it
   to show against) and just reads as a stray darker line at the seam
   instead of a real shadow, so it's removed. */
.toolbar {
    box-shadow: none;
}

.colored-top .site-sidebar-header {
    background-color: #043D5D;
}

/* The sidebar header's logo is forced to height:63px and padding:15px 0 by
   theme2.css (".site-sidebar .logo") - that combination is deliberately
   calibrated to make the header exactly 64px tall, matching ".toolbar"'s
   own fixed 64px height so the two align with no gap or overflow. Left
   alone (an earlier attempt at this fix touched height/padding too, which
   nearly ate that safety margin down to ~1px of clearance - fragile
   enough to visibly overflow). The ONLY actual conflict is max-width:90%,
   which was fighting the fixed height and squashing the image sideways
   since this logo's real proportions are very wide/short (1890x474);
   removing just that (and letting width follow the aspect ratio via
   width:auto) is enough on its own to fix the squashing without touching
   anything the theme had already calibrated correctly. */
.site-sidebar-header .logo {
  width: auto;
  max-width: none;
}

.portal-header .portal-search button i:before{
    content: "\f002";
}

.portal-header .portal-search .search-field{
    border-radius: 4px 0 0 4px;
}

/* theme2.css puts its own drop-shadow on the search INPUT and the search
   BUTTON separately. They sit edge-to-edge to look like one pill-shaped
   bar, but each casting its own independent shadow made the seam between
   them look uneven/doubled instead of like a single shadowed bar. Turned
   off on the two pieces and applied once to the form wrapping both. */
.portal-header .portal-search .search-field,
.portal-header .portal-search button {
    box-shadow: none;
}

/* The <form> itself is display:block and stretches the full page width -
   the search bar only looks centered because its parent centers the form's
   inline-level children (the input/button) with text-align. Without the
   inline-block below, the box-shadow here (put on the form so it wraps the
   whole bar as one unit) would be cast by that full-width invisible box,
   appearing as a shadow line spanning the entire page instead of just
   under the search bar. inline-block shrinks the form down to fit the
   input+button exactly, and it still gets centered the same way by the
   parent's text-align. */
.portal-header .portal-search {
    display: inline-block;
    box-shadow: 0 4px 18px rgba(0,0,0,0.10), 0 7px 10px -5px rgba(0,0,0,0.12);
    border-radius: 4px;
}


/* Figures */

img.materialboxed {
    border: 6px solid #EFF0F1;
    max-width: min(800px, 100%);
    height: auto;
    padding: 0px;
	border-radius: 15px;
	background-color: #EFF0F1;
	margin-top: 10px;
}

/* Clicking a figure (Materialize's "materialbox" zoom) adds an "active"
   class and pops the <img> out to position:absolute with an explicit,
   correctly-proportioned pixel width/height set by its JS. Its containing
   block while zoomed is still the small original .material-placeholder box,
   so the "100%" half of the max-width above was resolving against that tiny
   box instead of the zoomed size - capping the zoomed image's width but not
   its height (no max-height applies) and squashing it widthwise. Zoomed
   images are exempt from the cap so the JS's own sizing applies untouched. */
img.materialboxed.active {
    max-width: none;
}

/* Paligo writes an inline style="width:100%; height:auto;" onto the <img>
   (always this exact string) whenever a figure has a scale % set in its
   image properties - the actual scale is applied to the surrounding table's
   width instead, so this always stretches the image to 100% of that table,
   which can blow a small screenshot up well past its own resolution and
   make it look blurry/oversized. Overridden back to auto (matched only by
   this exact inline style, via !important since inline style otherwise wins)
   so scaled figures render at their real resolution instead of being
   upscaled. A width set deliberately on the image itself (e.g. a width
   attribute, or any other inline style) is untouched by this rule and keeps
   working as usual - only Paligo's "fit to container" scale is affected. */
img.materialboxed[style*="width: 100%"] {
    width: auto !important;
}

.image-viewport img {
    margin: 0;
}

div.figure-title {
    font-weight: normal;
	font-style: italic;
	color: #898989;
}

/* Previous & Next buttons */
.pager {
    padding-left: 0;
    margin: 22px 22px;
    text-align: center;
    list-style: none
}

.pager li {
    display: inline
}

.pager li>a,.pager li>span {
    display: inline-block;
    padding: 5px 14px;
    background-color: #043D5D;
	color: #FFFFFF;
    border: 1px solid #fff;
    border-radius: 15px
}

.pager li>a:focus,.pager li>a:hover {
   color: #043D5D;
   background-color: #e9edf5;
}

.pager .next>a,.pager .next>span {
    float: right
}

.pager .previous>a,.pager .previous>span {
    float: left
}

.pager .disabled>a,.pager .disabled>a:focus,.pager .disabled>a:hover,.pager .disabled>span {
    color: #043D5D;
    cursor: not-allowed;
    background-color: #fff
}

/* Frontpage | Remove Featured content panel | When this is added, the footer moves up */
  
.featured-content-label { 
display:none;
}

.portal-contents featured-content {
    display:none;
}

.portal-contents .inner {
    display:none;
}

/* Base link */
.nav-site-sidebar li a {
  color: #043D5D;
  background-color: transparent;
  transition: color 0.2s ease-out, background-color 0.2s ease-out;
}

/* Sidebar TOC look adjustment, closer to the other Anybus product UIs:
   removes the grey rule between top-level items and strengthens the
   size/weight contrast between top-level and nested items.

   - content-theme2.css's ".theme2 .toc > li" rule is what draws the grey
     border-bottom between every top-level item; matched here at the same
     specificity (so it wins on source order) and turned off.
   - content-theme2.css's ".theme2 .nav-site-sidebar > li > a" rule flattens
     theme2.css's own font-weight:700 for top-level items back down to
     "normal" - restored here (plus a touch bigger) so top-level items read
     as clearly more prominent than nested ones.
   - Nested items were font-weight:300, which reads as thin/hard to read at
     13px; bumped to 400 for legibility while staying lighter than the
     bold top-level items. */
.theme2 .toc > li {
  border-bottom: none;
}

.theme2 .nav-site-sidebar > li > a {
  font-weight: 700;
  font-size: 14px;
}

.nav-site-sidebar ul a {
  font-weight: 400;
}

/* Hover: lighten text, add subtle background */
.nav-site-sidebar li a:hover {
  color: #043D5D;
  background-color: #e9edf5;
}

/* Focus (keyboard): visible outline and accessible contrast */
.nav-site-sidebar li a:focus {
  outline: 0px solid #e9edf5;
  outline-offset: 1px;
}

/* Active/current item */
.nav-site-sidebar ul li a.active,
.nav-site-sidebar ul li a[aria-current="page"],
.nav-site-sidebar ul li.active > a {
  color: #FFFFFF;
  background-color: #043D5D;
}

/* Sidebar color */

.bg-primary, .btn-primary, .pagination>.active>a, 
.pagination>.active>span, .pagination>.active>a:hover, 
.pagination>.active>span:hover, .pagination>.active>a:focus, 
.pagination>.active>span:focus, .site-sidebar {
    background-color: #EFF0F1;
	
}
/*Active selected items*/
.nav-site-sidebar .active>a{
    color: #043D5D;
}

/*Right sidebar dot colour */
.theme2 .section-nav.nav>li.active>a:before
{
    background: #043D5D;
}

/*Sidebar navigation | Remove top padding */

.nav-site-sidebar{
    padding: 0px 0 20px
}


/* Front page background color */
.portal-body
 {
    background-color: #EFF0F1;
}

/* Remove white space from front page bottom */
.portal-content.theme2 {
    min-height: 100vh;
    background-color: #EFF0F1;
}

/* Footer */

.portal-footer{
   width: 100%;
   margin: 0px;
   background-color: #EFF0F1;
}

.portal-footer .inner{
   border: none;
   color: #333333;
}

/* Procedure bullets */
.theme2 .procedure > li::before {
    background-color: #1268B3;
}

/* Frontpage | Portal-header colors */
 
.portal-header h1 {
color: #ffffff;
}

.portal-header .portal-search button, .publication-contents h4 span {
    background-color: #EFF0F1;
    color: #333333;
}

.portal-header .portal-search button:hover {
 background-color: #EFF0F1;
  color: #333333;
  border: none;
  
}

.search-field::placeholder {
  color: #333333; /* Change this to your preferred color */
  opacity: 1;      /* Firefox lowers the opacity by default, so set to 1 */
}

.portal-header .portal-search button
 {
    background-color: #FFFFFF;
    border-radius: 0 4px 4px 0;
    border: 0;
	margin-left: 0;
    padding: 0px 18px;
    font-size: 16px;
    width: 52px;
    display: inline-block;
    color: #333333;
    -webkit-transition: background-color 0.2s ease-out;
    -o-transition: background-color 0.2s ease-out;
    transition: background-color 0.2s ease-out;
}
	
	.portal-search .btn[disabled]
 {
    opacity: 1;
    cursor: auto;
}

/* Headings | Size and color */

/* Heading scale widened (h2-h6) so adjacent levels are easier to tell apart -
   the previous sizes (2.6/2.2/1.9/1.6/1.3em, mostly weight 600) sat too close
   together, especially h4-h6. h6 is bumped to weight 700 so it still reads as
   a heading instead of blending into body text at the smallest size.

   Margins: content-theme2.css's default heading margin is "1.2em 0 1em", i.e.
   both top AND bottom margin scaled to the HEADING'S OWN font-size. Because a
   topic with sub-topics nests one <section class="section"> directly inside
   another, that top margin stacks with the parent heading's bottom margin and
   the section's own padding at every nested topic boundary - and since it's
   sized off each heading's own (large) font-size, the higher up the hierarchy
   the worse it got (h2->h3 measured ~76px). Margin-top is zeroed here so a
   topic boundary's spacing comes from .section > .section's padding only
   (see below), and margin-bottom is a small fixed value instead of 1em of the
   heading's own size, so heading-to-paragraph spacing stays modest at every
   level instead of scaling up for bigger headings.

   !important is needed on the margins specifically: content-theme2.css has
   an ID-based rule "#topic-content > section > .titlepage .title" (only
   matches a page's outermost/first heading) that outranks a plain
   "h2.title" selector on specificity alone and would otherwise silently
   put the 1em-of-own-size margin-bottom back on that one heading. */
h2.title {
  font-size: 2.6em;
  font-weight: 700;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* Targets <h3> elements that specifically have the class "title" */
h3.title {
  font-size: 2.1em;
  font-weight: 700;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* Targets <h4> elements that specifically have the class "title" */
h4.title {
  font-size: 1.7em;
  font-weight: 600;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* Targets all <h5> elements and any element with the class "h5" */
h5, .h5 {
  text-transform: none; /* Prevents the text from being forced into ALL CAPS or Capitalized (keeps original casing) */
  font-size: 1.35em;
  font-weight: 600;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* h6 is not covered by content-theme2.css's heading margin rule (which only
   lists h1-h5), so without this it keeps theme2.css's flat Bootstrap
   "9.5px 0" margin instead of matching the h2-h5 vertical rhythm. */
h6, .h6 {
  text-transform: none; /* Prevents the text from being forced into ALL CAPS or Capitalized (keeps original casing) */
  font-size: 1.1em;
  font-weight: 700;
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}


h2.title,
h3.title,
h4.title,
h5.title,
h6.title
{
  color: #333333 !important;
}

/* Admonitions headings*/
.warning h3.title,
.note h3.title,
.important h3.title,
.caution h3.title,
.tip h3.title {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 1.5em;
}

a {
    color: #1976d2;
    text-decoration: none
}

a:focus,a:hover {
    color: #11508e;
}

.theme2 .section-nav.nav li.active>a {
    color: #11508e;
}


thead th {
  background-color: #e9edf5;
}

/* Sections
   Every topic is wrapped in <section class="section">, and a topic with
   sub-topics nests one directly inside the other (.section > .section).
   Heading margin-top is zeroed above, so this padding is now the ONLY
   thing that creates the "new topic starts here" gap at a nested topic
   boundary - do not add top/bottom margin back onto headings, or it will
   stack with this again. Do NOT set this to 0 either - see the nested
   rule below for why. */
.section {
  padding: 15px 0;
}

/* A nested topic (.section directly inside another .section): this is the
   space between a topic's heading and its first sub-topic's heading, so it
   is set high enough on its own (headings no longer contribute margin-top)
   to read clearly as a topic break without being excessive. */
.section > .section {
  padding: 18px 0;
}

/* Accordion topics are nested sections too (each accordion item is its own
   <section class="section accordion">), but they render as Bootstrap
   .panel elements which already have their own margin for spacing between
   items. The 18px above stacked on top of that made closed accordions look
   far more spread out than a normal accordion list, so it's removed here -
   only for accordion sections, ordinary nested topics keep their 18px. */
.section > .section.accordion {
  padding: 0;
}

/* Admonitions */
.warning,
.note,
.important,
.caution,
.tip{
border-radius: 9px;
border-left: none;
}

.important:before{
    content: '\f06a';
    color: #1976d2;
}

.important{
    background-color: rgba(25, 118, 210, 0.05);
}

/*Custom Font Awesome 4.6.3 Icons on Front Page*/

/* 1. Fallback FIRST */
[class*="cat-panel-"]:before {
    content: "\f0f6";
}

/*EVK guide*/
.cat-panel-1:before{
    content: "\f15b"; 
}

/*Studio guide*/
.cat-panel-2:before{
    content: "\f15b"; 
}

/*About ONE*/
.cat-panel-3:before{
    content: "\f1b2"; 
}


/* Bridgehead used as an in-topic "divider" label (e.g. "Before you begin",
   "Procedure", "To do next", "Cause", "Action") - not a real heading, so it
   is deliberately kept smaller than h6 (the smallest real heading) and given
   its own look (uppercase + letter-spacing + grey) so it reads as a distinct
   label rather than being mistaken for another heading level. Grey rather
   than the brand blue: blue is already this theme's link color (#1976d2)
   and links have no underline here, so blue non-link text risks being
   mistaken for a broken link. #333333 matches the heading color for
   consistency while the case/weight/spacing still make it stand apart.
   Paligo renders this as a non-standard <h7> tag, which browsers do not
   style by default (they treat unknown elements as inline), so display:block
   and its own margin are needed here too. */
.bridgehead {
  display: block;
  font-size: 1em;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #333333;
  margin: 1.5em 0 0.5em;
}

/*GUI elements in Bold text*/
.guibutton,
.guilabel,
.guimenu,
.guimenuitem {
  font-weight: bold;
  font-family: inherit;
}

/* Paragraphs */
p {
  margin: 0 0 0.75em 0;
}

/* Lists */
ul, ol {
  margin: 0.25em 0 0.75em 0;
}

/* List items */
li + li {
  margin-top: 0.5em;
}

/* Paragraphs inside list items */
li p {
  margin: 0;
}

li p + p {
  margin-top: 0.25em;
}

/* "li p { margin: 0; }" above also zeroes a procedure step's own paragraph
   margin (a step is an <li> too), which left no gap between a step's text
   and a figure/table that follows it in the same step - restored here,
   without reintroducing spacing between consecutive paragraphs (already
   handled above by "li p + p"). */
li p + .figure,
li p + .informalfigure,
li p + .mediaobject,
li p + .table,
li p + .informaltable {
  margin-top: 0.75em;
}

/* Inline icons/images in running text (Paligo wraps each one in
   "span.inlinemediaobject") - the wrapper has a fixed height but never
   centered its content, so an icon with its own width/height attributes
   (rather than sized via the height:100% rule below) sat too high instead
   of level with the surrounding text. */
.inlinemediaobject {
  display: inline-flex;
  align-items: center;
}

/* Hide Section ToC*/
.no-section-toc ~ .footer-content .section-toc
 {display: none;}
 
 /* Hide Prev/Next buttons */
.pager {
    display: none;
}

/* Footer — align with page content */
.site-footer .inner {
    padding-left: 7.8%;
    padding-right: 30px;
    padding-top: 12px;
    font-size: 12px;
    color: #888888;
}

/* Remove the whole label e.g. Figure X and label will be removed. */
.formal-label {
 display: none;
}

/* Figures: hide the entire caption (label "Figure X." + title text), not just the label.
   Table captions (div.table-title) are untouched, so table titles still show, minus the
   "Table X." label from the rule above. */
.figure-title {
  display: none;
}

/* Paligo always emits two <br> tags after a figure's caption markup (one with
   class "figure-break", one plain) to force a line break. With the caption
   hidden above, those two empty lines are still rendered and stack on top of
   the image's own bottom margin, which is what made the space under images
   look oversized. Hide both so only the image's own margin remains. */
.figure-break,
.figure-break + br {
  display: none;
}

/* Untitled/plain tables (div.informaltable, used when a table has no caption)
   have no bottom margin at all by default, so content right after them had no
   visible gap. Formal/titled tables (.table.table-bordered) already get a
   bottom margin from the theme, so they are left alone. */
.informaltable {
  margin-bottom: 1.5em;
}