/* ----------------------------------- TOC ----------------------------------- Bootstrap Overrides:......Changes to base-Bootstrap CSS Globals:..................Styling of HTML and BODY Site Elements:............Re-usable site elements Structure:................Site structural components Section Specific:.........Styles for Home and all Sub Pages Page/Element Specific:....Page, element or flow Specific CSS Responsive:...............Specific styles for Desktop, Tablet and Mobile Additive CSS:.............Additive/override CSS Browser Hacks:............Functionality Fixes for Older Browsers */ /*----------------------------------- Bootstrap Overrides -----------------------------------*/ /*----------------------------------- Globals -----------------------------------*/ /* ---- HTML/Body: Enable ScrollSpy w/ postion:relative ---- */ html body#responsive_offcanvas { background: #f1f1f1; overflow-x: hidden; position: relative; } /* Stops Side-Scrolling of Off-Canvas content on iOS and Android - DO NOT APPLY TO ARCHIVED DOC */ @media only screen and (max-width:767px) { html { max-width:100vw; overflow-x:hidden; } html body#responsive_offcanvas { max-width:100vw; overflow-y:visible; } } /*----------------------------------- Structure -----------------------------------*/ /* ---- Off-Canvas Template ---- */ .row-offcanvas { position: relative; } /* Off-Canvas Template: Navigation */ .sidebar-offcanvas { width: 270px; height: 100%; padding: 0; margin-left: -270px; border-right: 1px solid #d4d4d4; background-color: #fff; bottom: 0; float: left; font-size: 12px; position: absolute; } .sidebar-offcanvas .offcanvas_nav { width: 269px; padding: 0 0 20px; border: none; background: #fff; overflow-y: auto !important; } /* Off-Canvas Template: Content */ .row-offcanvas.active { margin-left: 270px; } /* Off-Canvas Template: Content Configuration */ /* Content Configuration: Fluid */ /* Content Configuration: Desktop Scrolled */ /* Desktop Scrolled: Off-Canvas Not Active */ .sticky_header_container.affix ~ .row-offcanvas .sidebar-offcanvas { margin-left: 0; left: -270px; position: fixed; top: 96px; } .sticky_header_container.affix ~ .row-offcanvas .sidebar-offcanvas .offcanvas_nav { bottom: 0; left: -270px; position: fixed; top: 96px; } .sticky_header_container.affix ~ .full_banner_container ~ .row-offcanvas .sidebar-offcanvas { top: 0px !important; } .sticky_header_container.affix ~ .full_banner_container ~ .row-offcanvas .sidebar-offcanvas .offcanvas_nav { top: 128px !important; } /* Desktop Scrolled: Off-Canvas Active */ .sticky_header_container.affix ~ .row-offcanvas.active .sidebar-offcanvas { left: 0; z-index: 10; } .sticky_header_container.affix ~ .row-offcanvas.active .sidebar-offcanvas .offcanvas_nav { left: 0; } /* Content Configuration: Fixed */ @media only screen and (min-width:992px) { .responsive_offcanvas_fixed .row-offcanvas.active { margin-left: 0; } .responsive_offcanvas_fixed .row-offcanvas.active .sidebar-offcanvas { display: none; } } /* Off-Canvas Template: Animation */ /* ---- Non-Mobile Adjustments ---- */ @media only screen and (min-width:768px) { .row-offcanvas { -moz-transition: margin-left .5s ease-in; -webkit-transition: margin-left .5s ease-in; transition: margin-left .5s ease-in; } .sidebar-offcanvas, .offcanvas_nav { -webkit-transition: left .5s ease-in; -moz-transition: left .5s ease-in; transition: left .5s ease-in; } } .no_animate .row-offcanvas, .no_animate .row-offcanvas *:not(.item):not(.panel-collapse), .no_animate .horizontal_nav_container * { -webkit-transition: none !important; -moz-transition: none !important; transition: none !important; } /* ---- Horizontal Nav ---- */ .offcanvas_horizontal_nav { display: table-cell; vertical-align: top; } .offcanvas_horizontal_nav .cta_box { text-align: right; } .offcanvas_horizontal_nav .cta_box .cta_item { float: none; } /* ---- Off-Canvas Actuator ---- */ /* Off-Canvas Actuator: Container */ /* Actuator Container: Inactive */ .offcanvas_actuator { width:270px; background: url(/images/responsive/global/bg-offcanvas-actuator.png) repeat-y -270px top; color: #428bca; cursor: pointer; display: table-cell; vertical-align: top; -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; transition: all .5s ease-in; } /* Actuator Container: Active */ .offcanvas_actuator.active { background: url(/images/responsive/global/bg-offcanvas-actuator.png) repeat-y 0 top; color: #9e9e9e; -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; transition: all .5s ease-in; } /* Actuator Container: Fixed */ .offcanvas_actuator_fixed { display: none; } /* Off-Canvas Actuator: Button */ /* Actuator Button: Inactive */ .offcanvas_actuator .btn { padding: 4px; margin-left: 2px; background-color: transparent; float: left; } .offcanvas_actuator .btn, .offcanvas_actuator .btn:active { box-shadow: none; outline: none; } .offcanvas_actuator .btn:hover, .offcanvas_actuator .btn:focus, .offcanvas_actuator .btn:active { color: #428bca; } /* Actuator Button: Active */ .offcanvas_actuator.active .btn:hover, .offcanvas_actuator.active .btn:focus, .offcanvas_actuator.active .btn:active { color: #9e9e9e; } /* Actuator Button: Icon */ .offcanvas_actuator .btn .icon-menu { margin-top: 2px; font-size: 33px; line-height: 1.00; } .offcanvas_actuator .btn .icon-filter { margin-top: 6px; font-size: 22px; line-height: 1.00; } /* Off-Canvas Actuator: Labels */ /* Actuator Labels: Inctive */ .offcanvas_actuator .offcanvas_actuator_label { margin-top: 12px; display: block; float: left; } .offcanvas_actuator .offcanvas_actuator_label:focus { padding: 4px; margin-top: 8px; margin-left: -4px; border-radius: 4px; background: #e5e5e5; outline: none; } .offcanvas_actuator .offcanvas_actuator_label:before { content: "FILTER"; } .offcanvas_actuator .offcanvas_actuator_close:before { content: "Close"; } .offcanvas_actuator .offcanvas_actuator_close { margin: 12px 15px 0 0; color: #0076a8; display: block; float: right; opacity: 0; -webkit-transition: all .5s ease-in; -moz-transition: all .25s ease-in; transition: all .25s ease-in; } .offcanvas_actuator .offcanvas_actuator_close:hover { color: #004b87; } .offcanvas_actuator .offcanvas_actuator_close:focus { padding: 4px; margin-top: 8px; margin-right: 11px; border-radius: 4px; background: #e5e5e5; outline: none; } /* Actuator Labels: Active */ .offcanvas_actuator.active .offcanvas_actuator_close { opacity: 1; -webkit-transition: all .5s ease-in; -moz-transition: all .25s ease-in; transition: all .25s ease-in; } /* Added for Doc 19a */ .offcanvas_actuator a.offcanvas_actuator_label { color: #428bca !important; text-decoration: none !important; } .offcanvas_actuator.active a.offcanvas_actuator_label { color: #9e9e9e !important; } .offcanvas_actuator a.offcanvas_actuator_close { color: #0076a8 !important; text-decoration: none !important; } .offcanvas_actuator a.offcanvas_actuator_close:hover { color: #004b87 !important; } /* ---- Footer ---- */ /* Footer Nav */ .footernav { float: none; } .footernav * { -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; transition: all .5s ease-in; } /*----------------------------------- Responsive -----------------------------------*/ /* ---- Non-Mobile Adjustments ---- */ @media only screen and (min-width:768px) { } /* ---- Large Desktop (lg) ---- */ @media (min-width:1200px) { } /* ---- Small Desktop (md) ---- */ @media (min-width:992px) and (max-width:1199px) { } /* ---- Tablet (sm) ---- */ @media (min-width:768px) and (max-width:991px) { /* ---- Header ---- */ /* ---- Horizontal Nav ---- */ .responsive_offcanvas_fixed .container { width: 100%; } } /* ---- Non-Desktop Adjustments ---- */ @media (max-width:991px) { html body.responsive_offcanvas_fixed { background: #f1f1f1; } /* Off-Canvas Actuator: Container */ /* Actuator Container: Fixed */ .offcanvas_actuator_fixed { display: table-cell; } } /* ---- Mobile (xs) ---- */ @media (max-width:767px) { /* ---- Off-Canvas Template ---- */ /* Fixes to Activate position:sticky on sticky_header_container */ html body#responsive_offcanvas { overflow-x:visible; } .row-offcanvas { width:calc(100vw - (100vw - 100%)); margin:0; background:#fff; left:0; overflow:hidden; } .row-offcanvas.active { width:100%; padding-left:270px; margin:0; left:0; } .row-offcanvas .body_lead_container, .row-offcanvas .content_container, .row-offcanvas .body_trail_container, .row-offcanvas #footer { width:calc(100vw - (100vw - 100%)); overflow-x:hidden; transition:width 0.5s ease-in; } .row-offcanvas.active .body_lead_container, .row-offcanvas.active .content_container, .row-offcanvas.active .body_trail_container, .row-offcanvas.active #footer { width:calc(100vw - (100vw - 100%)); } .row-offcanvas .body_lead_container > .container, .row-offcanvas .content_container > .container, .row-offcanvas .body_trail_container > .container, .row-offcanvas #footer > .container, .row-offcanvas .fat_footer_container > .container, .row-offcanvas .body_lead_container > .container-fluid, .row-offcanvas .content_container > .container-fluid, .row-offcanvas .body_trail_container > .container-fluid, .row-offcanvas #footer > .container-fluid, .row-offcanvas .fat_footer_container > .container-fluid { width:calc(100vw - 20px); } /* Off-Canvas Template: Animation */ .row-offcanvas { margin-left: 0; left: 0; -webkit-transition: all .5s ease-in; -moz-transition: all .5s ease-in; transition: all .5s ease-in; } .sidebar-offcanvas, .offcanvas_nav { -webkit-transition: left .5s ease-in; -moz-transition: left .5s ease-in; transition: left .5s ease-in; -ms-transition: left 0s ease-in; } } /*----------------------------------- Browser Hacks -----------------------------------*/ /* ---- Safari 7.1+ (8.0 is the latest version of Safari at this time) ---- */ _::-webkit-full-page-media, _:future, :root .sidebar-offcanvas { -webkit-transition: none !important; } _::-webkit-full-page-media, _:future, :root .offcanvas_nav { -webkit-transition: none !important; }