/************************************************************************************
DevPortal Menu This is the primary navigation menu for devportal. The contents of this menu are accessible in dropdowns on a desktop and in an expandable left menu for phones and tablets.
**************************************************************************************/ .dp-primary-nav {
background-color: #f6f6f6; border-right: 1px solid #e7e7e7; position: fixed; top: 50px; bottom: 0; width: 300px; left: -300px; display: block; margin: 0; z-index: 100; transition: all .3s ease-out; overflow: scroll; } @media (min-width: 992px) { .dp-primary-nav { background-color: transparent; position: static; width: auto; border-right: none; overflow: hidden; } } @media (min-width: 1400px) { .dp-primary-nav { max-width: 1400px; margin: 0 auto; } }
.dp-primary-nav–open {
left: 0; }
.dp-primary-nav-list {
margin-left: 0; }
.dp-primary-nav-list-item {
position: relative; transition: max-height .4s ease-in-out; max-height: 51px; overflow: hidden; list-style: none; } @media (min-width: 992px) { .dp-primary-nav-list-item { position: static; max-height: 70px; float: left; overflow: initial; padding: 0 1%; } .dp-primary-nav-list-item:first-child { margin-left: 16px; } } @media (min-width: 1400px) { .dp-primary-nav-list-item { padding: 0 1.25%; } }
.dp-primary-nav-list-item–open {
max-height: 1000px; } .dp-primary-nav-list-item--open .dp-primary-nav-list-expander-icon { transform: rotateX(180deg); }
@media (max-width: 991px) {
.dp-primary-nav-list-item-current { border-left: #E87825 5px solid; } }
@media (min-width: 992px) {
.dp-primary-nav-list-item-current { border-bottom: #E87825 5px solid; } }
.dp-primary-nav-list-item–isActive a.dp-primary-nav-list-link {
color: #e87825; }
a.dp-primary-nav-list-link {
line-height: 30px; display: inline-block; color: #111; border-bottom: 1px solid rgba(0, 0, 0, 0.2); padding: 10px 10px 10px 16px; display: block; position: relative; transition: color 0.25s linear; } a.dp-primary-nav-list-link:hover { text-decoration: none; } @media (min-width: 992px) { a.dp-primary-nav-list-link { border-bottom: none; font-size: 16px; padding: 0; line-height: 70px; max-height: 70px; } a.dp-primary-nav-list-link:hover { color: #e87825; text-decoration: underline; } }
@media (min-width: 992px) {
.dp-primary-nav-list-item--hasCaret a.dp-primary-nav-list-link:after { position: absolute; content: ''; border-width: 1px 1px 0 0; border-color: rgba(0, 0, 0, 0.3); border-style: solid; background-color: #f6f6f6; right: 50%; transform: translateX(50%) rotate(-45deg); bottom: -7px; transition: all 0s linear; height: 15px; width: 15px; } }
.dp-primary-nav-list-expander {
padding: 6px 12px; position: absolute; right: 10px; top: 6px; } @media (min-width: 992px) { .dp-primary-nav-list-expander { display: none; } }
.dp-primary-nav-list-expander:hover {
background: rgba(0, 0, 0, 0.05); }
.dp-primary-nav-list-expander-icon {
width: 14px; height: 14px; vertical-align: middle; transition: transform .4s; fill: #444; }
.dp-dropdown-panel {
background: #fff; border-width: 0 0 1px 0; border-color: rgba(0, 0, 0, 0.2); border-style: solid; } @media (min-width: 992px) { .dp-dropdown-panel { display: none; position: absolute; left: 0; width: 100%; top: 70px; line-height: initial; border-width: 0 1px 1px 1px; text-align: left; background: #fff; background: -moz-linear-gradient(left, #fff 0%, #fff 25%, #f6f6f6 25%, #f6f6f6 100%); background: -webkit-linear-gradient(left, #fff 0%, #fff 25%, #f6f6f6 25%, #f6f6f6 100%); background: linear-gradient(to right, #fff 0%, #fff 25%, #f6f6f6 25%, #f6f6f6 100%); } .dp-dropdown-panel:after { content: ''; width: 1px; height: 100%; position: absolute; left: 25%; background-color: rgba(0, 0, 0, 0.2); top: 0; } } @media (min-width: 1400px) { .dp-dropdown-panel { max-width: 1400px; } }
@media (min-width: 992px) {
.dp-dropdown-panel--4col { background: #fff; } .dp-dropdown-panel--4col:after { width: 0; } }
.dp-dropdown-panel–isActive {
display: block; }
.dp-dropdown-panel-inner {
position: relative; } @media (min-width: 992px) { .dp-dropdown-panel-inner { min-height: 440px; padding: 0; background: -moz-linear-gradient(top, #f6f6f6 0%, rgba(255, 255, 255, 0) 24px); background: -webkit-linear-gradient(top, #f6f6f6 0%, rgba(255, 255, 255, 0) 24px); background: linear-gradient(to bottom, #f6f6f6 0%, rgba(255, 255, 255, 0) 24px); } }
.dp-secondary-nav-list {
padding: 6px 0; } @media (min-width: 992px) { .dp-secondary-nav-list { overflow: hidden; padding: 0 0 16px; } .dp-secondary-nav-list > .dp-secondary-nav-list-item:first-child { padding-top: 16px; } }
@media (min-width: 992px) {
.dp-dropdown-panel--1col { width: auto; position: static; left: auto; width: 100%; margin-left: 50%; border: 0; } .dp-dropdown-panel--1col:after { display: none; } .dp-dropdown-panel--1col .dp-dropdown-panel-inner { position: absolute; background-color: #FFF; transform: translateX(-50%); min-height: 0; border: 1px solid rgba(0, 0, 0, 0.2); border-top: 0; } .dp-dropdown-panel--1col .dp-dropdown-panel-inner .dp-secondary-nav-list--1col { padding-right: 0; padding-bottom: 28px; } .dp-dropdown-panel--1col .dp-secondary-nav-list--1col { float: left; width: auto; padding-right: 3%; } .dp-dropdown-panel--1col .dp-secondary-nav-list--1col .dp-secondary-nav-list-link { padding-right: 36px; width: 100%; } .dp-dropdown-panel--1col .dp-secondary-nav-list-item--isActive .dp-secondary-nav-list-link:after { display: none; } }
.dp-secondary-nav-list–4col .dp-secondary-nav-list {
margin-bottom: 0; }
.dp-secondary-nav-list–4col .dp-secondary-nav-list-title {
font-weight: 500; font-size: 12px; color: #767676; text-transform: uppercase; padding: 0 16px; font-size: 12px; background-color: #f6f6f6; margin-top: -6px; line-height: 125%; }
@media (min-width: 992px) {
.dp-secondary-nav-list--4col { float: left; width: 25%; padding-right: 3%; } .dp-secondary-nav-list--4col .dp-secondary-nav-list-title { padding: 36px 0 0 36px; font-size: 14px; margin-top: 0; background-color: transparent; } .dp-secondary-nav-list--4col .dp-secondary-nav-list-link { width: 100%; border-right: none; padding-right: 0; } .dp-secondary-nav-list--4col .dp-secondary-nav-list-link:hover .dp-secondary-nav-title { color: #e87825; } .dp-secondary-nav-list--4col .dp-secondary-nav-list-item--isActive .dp-secondary-nav-title { color: #111; } }
.dp-secondary-nav-list-item {
width: 100%; clear: both; } @media (min-width: 992px) { .dp-secondary-nav-list-item { padding-left: 0; } }
@media (min-width: 992px) {
.dp-secondary-nav-list-item--isActive .dp-secondary-nav-title { color: #e87825; } .dp-secondary-nav-list-item--isActive .dp-tertiary-nav-wrapper { display: block; opacity: 1; visibility: visible; min-height: 380px; } .dp-secondary-nav-list-item--isActive .dp-secondary-nav-list-link { position: relative; } .dp-secondary-nav-list-item--isActive .dp-secondary-nav-list-link:hover .dp-secondary-nav-title { text-decoration: underline; } .dp-secondary-nav-list-item--isActive .dp-secondary-nav-list-link:after { position: absolute; content: ''; width: 15px; height: 15px; border-width: 1px 0 0 1px; border-color: rgba(0, 0, 0, 0.3); border-style: solid; background-color: #f6f6f6; transform: rotate(-45deg); right: -8px; top: 50%; z-index: 100; } }
.dp-secondary-nav-list–4col .dp-secondary-nav-list-item–isActive .dp-secondary-nav-list-after {
width: 0; height: 0; }
.dp-secondary-nav-list-link {
padding: 8px 8px 8px 24px; display: block; } .dp-secondary-nav-list-link:hover { text-decoration: none; } @media (min-width: 992px) { .dp-secondary-nav-list-link { padding: 16px 36px 8px 36px; width: 25%; float: left; } }
.dp-secondary-nav-title {
font-size: 14px; color: #111; font-weight: normal; margin: 0; } @media (min-width: 992px) { .dp-secondary-nav-title { font-size: 16px; margin-bottom: 8px; } }
.dp-secondary-nav-tag {
color: #888; font-size: 12px; line-height: 18px; display: none; font-weight: normal; } @media (min-width: 992px) { .dp-secondary-nav-tag { display: block; } }
.dp-tertiary-nav-wrapper {
height: 0; visibility: hidden; opacity: 0; float: left; width: 75%; position: absolute; top: 0; left: 25%; } @media (min-width: 992px) { .dp-tertiary-nav-wrapper { padding: 32px 24px 16px 16px; } }
.dp-tertiary-nav-row {
width: 100%; clear: both; margin-bottom: 16px; overflow: hidden; }
.dp-tertiary-nav-list {
width: 30%; float: left; margin-bottom: 16px; }
.dp-tertiary-nav-list-title {
font-weight: 500; font-size: 13px; color: #888; text-transform: uppercase; margin-bottom: 8px; }
.dp-tertiary-nav-list-item {
font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
a.dp-tertiary-nav-list-link {
color: #333; font-size: 13px; line-height: 18px; display: inline-block; padding: 3.5px 0; transition: color 0.15s linear; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; } a.dp-tertiary-nav-list-link:hover { color: #e87825; text-decoration: none; }
.dp-primary-nav-overlay {
position: fixed; z-index: 90; background: rgba(0, 0, 0, 0.3); top: 50px; left: 0; right: 0; bottom: 0; visibility: hidden; opacity: 0; transition: all 0.4s ease-in-out; }
.dp-primary-nav-overlay–active {
visibility: visible; opacity: 1; }
@media (min-width: 992px) {
.dp-primary-nav-overlay { display: none; } }
.lang-switcher-wrapper {
position: absolute; display: block; color: #333; } @media (min-width: 992px) { .lang-switcher-wrapper { right: 38px; } } @media (min-width: 1400px) { .lang-switcher-wrapper { right: 140px; } }
.dp-secondary-nav-list-item–selected a p, .dp-tertiary-nav-list-item–selected {
color: #e87825; font-weight: bold; }
.lang-switcher-wrapper .dp-dropdown-panel-inner, .lang-switcher-wrapper .dp-dropdown-panel {
min-height: auto; /* Required for compatibility with IE */ min-height: initial; min-width: 200px; max-width: 300px; }
.lang-switcher-wrapper .dp-primary-nav-list-link, .lang-switcher-wrapper .dp-primary-nav-list-item, .lang-switcher-wrapper .dp-secondary-nav-title {
font-size: 12px; color: #333; }
.lang-switcher-wrapper .lang-switcher-link–isActive .dp-secondary-nav-title {
color: #e87825; font-weight: bold; }
.lang-switcher-wrapper .dp-secondary-nav-list {
position: relative; width: 100%; }
.nav-dropdown-arrow {
width: 15px; height: 6px; padding-left: 3px; }
/*# sourceMappingURL=menu.css.map */