/**/ /* Main Page Styles */ body { margin: 0 !important; padding: 0 !important; max-width: 100% !important; } .relative { position: relative; } .off-canvas-content { min-height: 100vh; overflow: auto; } .off-canvas-content .outer-row { margin: 0 auto; } .main-section > .outer-row { max-width: 90em; padding-top: 1em; padding-bottom: 1em; } img { vertical-align: baseline; } .navigation-wrapper { float: left; flex: 1 1; align-self: flex-start; display: flex; order: 2; justify-content: flex-end; } .title-bar-section.middle > div { } /* Topbar (Navigation) Dropdown Styles*/ ul.navigation { height: 100%; padding-top: 0; padding-bottom: 0; white-space: nowrap; z-index: 2; position: relative; margin-top: 0; margin-bottom: 0; margin-left: 0; background-repeat: repeat; background-position: center center; color: #ffffff; font-family: replica-regular; font-size: 16px; font-weight: normal; padding-left: 20px; padding-right: 20px; } ul.navigation, ul.navigation ul { list-style: none; } ul.navigation ul { z-index: 1000; width: auto; margin: 0; padding: 10px 0 10px 0; position: absolute; background-color: #EBEEF1; } ul.navigation > li > ul.openLeft { left: auto; right: 0; } ul.navigation > li > ul.openRight { left: 0; } ul.navigation > li.has-children:after { content: ' '; display: block; position: absolute; height: 0; width: 0; border: 8px solid transparent; bottom: 0; left: 50%; margin-left: -8px; border-bottom-color: #EBEEF1; } ul.navigation ul, ul.navigation > li.has-children:after { -webkit-transition: all 100ms ease-in; -moz-transition: all 100ms ease-in; -ms-transition: all 100ms ease-in; -o-transition: all 100ms ease-in; transition: all 100ms ease-in; visibility: hidden; opacity: 0; } ul.navigation ul ul { top: 0; left: 100%; background-color: #EBEEF1; } ul.navigation ul ul.openLeft { left: auto; right: 100%; } ul.navigation ul ul.openRight { right: auto; left: 100%; } ul.navigation a { text-decoration: none; outline: none; color: #ffffff; font-family: replica-regular; font-size: 16px; font-weight: normal; } ul.navigation li { position: relative; list-style: none; margin: 0; background-color: transparent; } ul.navigation li > a { display: block; line-height: 45px; color: #000000; font-size: 15px; font-weight: normal; margin-left: 0px; margin-right: 0px; margin-top: 0px; margin-bottom: 0px; padding-left: 15px; padding-right: 15px; padding-top: 10px; padding-bottom: 0px; } ul.navigation li li { padding: 0 10px; } ul.navigation > li { position: relative; float: left; display: block; } ul.navigation li:hover > ul, ul.navigation > li.has-children:hover:after { visibility: visible; opacity: 1; } ul.navigation li:hover { background-color: transparent; } ul.navigation ul > li { line-height: 15px; } ul.navigation ul > li > a { padding: 0 15px; padding-left: 10px; padding-right: 10px; padding-top: 7px; padding-bottom: 7px; line-height: 13px; text-align: left; } ul.navigation ul > li:hover { background-repeat: repeat; background: #EAEDF0; background: -moz-linear-gradient(top, transparent 0%, transparent 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,transparent), color-stop(100%,transparent)); background: -webkit-linear-gradient(top, transparent 0%, transparent 100%); background: -o-linear-gradient(top, transparent 0%,transparent 100%); background: -ms-linear-gradient(top, transparent 0%,transparent 100%); background: linear-gradient(top, transparent 0%,transparent 100%); -pie-background: linear-gradient(transparent, transparent); } #resultList .glossary .term a:visited { } #resultList h3.title a:visited { color: #2200C1; text-decoration: underline; } #resultList .glossary .term a:focus { } #resultList h3.title a:focus { color: #2200C1; text-decoration: underline; } ul.sidenav li a:hover { background-color: #303335; } #resultList .glossary .term a:hover { } #pagination a:hover { border-top: solid 1px #e2e2e6; } #resultList h3.title a:hover { text-decoration: underline; } ul.sidenav ul > li > a:hover { background-color: #303335; } ul.sidenav ul ul > li > a:hover { background-color: #303335; } ul.sidenav ul ul ul > li > a:hover { background-color: #303335; } ul.sidenav ul ul ul ul > li > a:hover { background-color: #303335; } ul.navigation li > a:hover { color: #28bea1; font-size: 15px; } ul.navigation ul > li > a:hover { } ul.navigation ul ul > li > a:hover { } ul.navigation ul ul ul > li > a:hover { } ul.navigation ul ul ul ul > li > a:hover { } #resultList .glossary .term a:active { } #resultList h3.title a:active { color: #2200C1; text-decoration: underline; } ul.navigation ul > li.has-children > a:after { position: absolute; border: none; content: "\00bb"; right: 5px; top: 9px; } nav.title-bar { padding: 10px 0; line-height: inherit; display: block; padding-top: 10px; padding-bottom: 10px; background-color: #ffffff; } nav.title-bar .menu-icon { display: none; } .title-bar-layout { display: flex; direction: ltr; flex-wrap: wrap; align-items: center; justify-content: space-between; } .title-bar-section { position: absolute; } .title-bar-section.middle { width: 100%; left: 0; right: 0; height: auto; min-height: 2.5em; } .title-bar-layout .logo-wrapper { display: flex; flex: 0 1 auto; order: 1; min-height: 87px; align-self: center; justify-content: flex-start; } .title-bar-layout a.logo { border: none; padding: 0; margin: 0; z-index: 1; display: block; width: 182px; height: 87px; align-self: center; background: transparent url('Images/Spryker-documentation-logo.jpg') no-repeat center center; -pie-background: transparent url('Skins/Fluid/Stylesheets/Images/Spryker-documentation-logo.jpg') no-repeat center center; } .title-bar-container { z-index: 1000; } /* Topbar Menu Functionality Styles */ #navigation.topbar > .row { height: 100%; } #navigation.topbar { background-color: #292928; padding-top: 10px; padding-bottom: 10px; } /* Search */ .nav-search-wrapper { flex: 1 1 auto; display: flex; order: 3; justify-content: center; flex-basis: 100%; } .nav-search { /* override .row Foundation css styles */ /* supports V11 home page template */ margin-left: 0; margin-right: 0; max-width: none; display: none; width: 100%; margin-top: 10px; } .search-bar { width: 100%; } .search-bar .search-field { padding: 0 0 0 10px; line-height: 1em; top: 0; left: 0; position: relative; height: 2em; border-top: none; border-right: none; border-bottom: none; border-left: none; border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; color: #5F5F5F; font-size: 1em; padding-left: 10px; background-color: #ffffff; padding-right: 50px; } .search-bar .search-field::-webkit-search-cancel-button { display: none; } .search-bar .search-filter { float: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; line-height: 2em; padding-right: 5px; cursor: pointer; height: 2em; border-top: none; border-bottom: none; border-right: solid 1px #000000; border-left: solid 1px #000000; width: 45px; background: #ffffff url('Images/FilterOutline.png') no-repeat center center; -pie-background: #ffffff url('Skins/Fluid/Stylesheets/Images/FilterOutline.png') no-repeat center center; } .search-bar .search-filter.selected { background: transparent url('Images/Filter.png') no-repeat center center; -pie-background: transparent url('Skins/Fluid/Stylesheets/Images/Filter.png') no-repeat center center; } .search-bar .search-filter.open { color: #888888; background-color: #ffffff; } .search-bar .search-filter-wrapper { display: none; position: absolute; top: 0; font-size: 1em; right: 56px; } .search-filter-content { display: none; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; position: absolute; right: 0; line-height: normal; text-align: left; overflow: auto; z-index: 1; white-space: nowrap; top: 2em; color: #888888; background-color: #ffffff; } .search-filter-content ul li { padding: 5px; margin: 0; } .search-filter-content ul li:hover { color: #000000; background-color: #ffffff; } .search-bar .search-submit-wrapper { position: absolute; top: 0; right: 0; font-size: 1em; } /* OffCanvas */ ul.off-canvas-list li { margin: 0; } .off-canvas { display: none; z-index: 1001; } /* Side Nav */ .sidenav-layout { flex-direction: row; display: block; } .sidenav-layout.row::before, .sidenav-layout.row::after { display: none; } html[dir='rtl'] .sidenav-layout { flex-direction: row-reverse; } .sidenav-wrapper { flex: 0 1 auto; overflow: auto; width: 20%; display: none; background-color: #45494c; } .sidenav-wrapper ul ul.is-accordion-submenu { background: inherit; } .body-container { flex: 1 1; overflow: inherit; } ul.sidenav ul > li > a { border-bottom: none 0px #303335; margin-left: 2em; padding-top: 0.3em; padding-bottom: 0.3em; } ul.sidenav ul ul > li > a { margin-left: 4em; } ul.sidenav ul ul ul > li > a { margin-left: 6em; } ul.sidenav ul ul ul ul > li > a { margin-left: 8em; } /* Pulse.htm */ html.pulseTopic .main-section .row.outer-row { padding: 0; max-width: 1050px; } /* Google Custom Search Styles */ .gsc-results { line-height: normal; } .off-canvas-wrapper-inner nav.title-bar .outer-row { } .menu-icon-container { min-height: 87px; } .off-canvas-wrapper-inner .outer-row { max-width: 90em; padding-left: 1em; padding-right: 1em; } .search-auto-complete ul { padding-left: 0px; padding-right: 0px; padding-top: 0px; padding-bottom: 0px; border-top: solid 1px #808080; border-right: solid 1px #808080; border-bottom: solid 1px #808080; border-left: solid 1px #808080; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #ffffff; } .search-auto-complete li a { color: #000000; font-weight: normal; padding-left: 7px; padding-right: 27px; padding-top: 7px; padding-bottom: 7px; } .search-auto-complete li.auto-result-item a { } .search-auto-complete li.auto-result-item { margin-left: 2px; margin-right: 2px; margin-top: 2px; margin-bottom: 2px; } .search-auto-complete li.auto-result-content a { } .search-auto-complete li.auto-result-content { } .search-auto-complete li.auto-result-history a { } .search-auto-complete li.auto-result-history { } .search-auto-complete li.auto-result-item.auto-result-selected a { } .search-auto-complete li.auto-result-item.auto-result-selected { border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; background-color: #ececec; } .search-auto-complete li.auto-result-content.auto-result-selected { background-color: #ececec; } .search-auto-complete li.auto-result-history.auto-result-selected { background-color: #ececec; } .search-auto-complete li.auto-result-item .auto-result-description { color: #888888; font-size: 13px; } .search-auto-complete li.auto-result-content .auto-result-description { } .search-auto-complete li.auto-result-history .auto-result-description { } .search-auto-complete li.auto-result-item .auto-result-icon { margin-right: 5px; } .search-auto-complete li.auto-result-content .auto-result-icon { background: transparent url('Images/icon-topic.png') no-repeat center center; -pie-background: transparent url('Skins/Fluid/Stylesheets/Images/icon-topic.png') no-repeat center center; background-size: contain; } .search-auto-complete li.auto-result-history .auto-result-icon { background: transparent url('Images/icon-search.png') no-repeat center center; -pie-background: transparent url('Skins/Fluid/Stylesheets/Images/icon-search.png') no-repeat center center; background-size: contain; } .search-auto-complete li.auto-result-item .auto-result-phrase { font-size: 16px; } .search-auto-complete li.auto-result-content .auto-result-phrase { } .search-auto-complete li.auto-result-history .auto-result-phrase { } .search-auto-complete li.auto-result-item .auto-result-phrase .search-result-highlight { font-weight: bold; } .search-auto-complete li.auto-result-content .auto-result-phrase .search-result-highlight { } .search-auto-complete li.auto-result-history .auto-result-phrase .search-result-highlight { } .search-auto-complete li .auto-result-remove { margin-left: 10px; margin-right: 10px; margin-top: 2px; margin-bottom: 2px; width: 17px; height: 27px; background: transparent url('Images/icon-remove.png') no-repeat center center; -pie-background: transparent url('Skins/Fluid/Stylesheets/Images/icon-remove.png') no-repeat center center; background-size: contain; } .search-auto-complete li.auto-result-item .auto-result-separator { } .search-bar .search-submit { height: 2em; border-top: none; border-right: none; border-bottom: none; border-top-right-radius: 0px; border-bottom-right-radius: 0px; } .search-bar .search-filter:hover { background: #ffffff url('Images/FilterOutline.png') no-repeat center center; -pie-background: #ffffff url('Skins/Fluid/Stylesheets/Images/FilterOutline.png') no-repeat center center; } #resultList .glossary .definition { } #resultList .glossary { margin-bottom: 25px; padding-left: 15px; padding-right: 15px; padding-top: 15px; padding-bottom: 15px; background-position: center center; } #resultList .glossary .term { font-size: 1.5em; margin-bottom: 10px; } #resultList .glossary .term a { } h1#results-heading { color: #393f45; font-size: 1.5em; font-weight: bold; font-style: normal; } #results-heading { border-bottom: solid 1px #EBEBEB; margin-bottom: 20px; padding-bottom: 10px; } .search-bar .search-field::-webkit-input-placeholder { color: #5F5F5F; } .search-bar .search-field::-moz-placeholder { color: #5F5F5F; } .search-bar .search-field:-moz-placeholder { color: #5F5F5F; } .search-bar .search-field:-ms-input-placeholder { color: #5F5F5F; } #pagination { height: 2.5em; line-height: 2.5em; } #pagination a { border-top: solid 1px #fafafc; border-right: solid 1px #fafafc; border-bottom: solid 1px #fafafc; border-left: solid 1px #fafafc; color: #0185D1; font-size: 1em; margin-left: 5px; margin-right: 5px; margin-top: 20px; margin-bottom: 20px; padding-left: 8px; padding-right: 8px; padding-top: 2px; padding-bottom: 2px; text-decoration: none; } #pagination a#selected { font-weight: bold; border-top: solid 1px #e2e2e6; } #resultList .description { font-size: 0.8em; } #resultList .gs-snippet { font-size: 0.8em; } #resultList h3.title a { color: #176EBD; font-family: replica-regular; font-size: 1em; } #resultList h3.title { margin-bottom: 2px; text-decoration: none; } #resultList .url cite { color: #1EBEA0; font-family: replica-regular; font-size: 0.8em; font-style: normal; } #resultList { line-height: 1em; text-align: left; display: block; } .search-bar.search-bar-container .search-submit { width: 56px; background: #494C4f url('Images/SearchIcon.png') no-repeat center center; -pie-background: #494C4f url('Skins/Fluid/Stylesheets/Images/SearchIcon.png') no-repeat center center; } .search-bar.search-bar-container .search-submit:hover { background: #494C4f url('Images/SearchIcon.png') no-repeat center center; -pie-background: #494C4f url('Skins/Fluid/Stylesheets/Images/SearchIcon.png') no-repeat center center; } .phrase-suggest { font-style: italic; } .phrase-suggest a { color: #207DCD; font-family: replica-regular; } .sidenav-container ul ul { background-color: #45494c; } .sidenav-container { padding-left: 20px; padding-right: 20px; padding-top: 20px; } ul.sidenav li a { border-bottom: solid 1px #303335; padding-left: 0.67rem; padding-right: 0.67rem; padding-top: 0.67rem; padding-bottom: 0.67rem; color: #ffffff; font-family: Arial; font-size: 1em; line-height: 1.6em; } ul.sidenav li { } ul.sidenav li.is-accordion-submenu-parent > a span.submenu-toggle { border-top-color: #a1a8ac; } ul.sidenav li.is-accordion-submenu-parent > a span.submenu-toggle:hover { } ul.sidenav li a.selected { font-weight: bold; } ul.sidenav ul > li > a.selected { } ul.sidenav ul ul > li > a.selected { } ul.sidenav ul ul ul > li > a.selected { } ul.sidenav ul ul ul ul > li > a.selected { } ul.navigation ul a { } ul.navigation ul ul a { } ul.navigation ul ul ul { background-color: #EBEEF1; } ul.navigation ul ul ul a { } ul.navigation ul ul ul ul { background-color: #EBEEF1; } ul.navigation ul ul ul ul a { } ul.navigation ul ul > li > a { margin-right: 0px; padding-right: 10px; } ul.navigation ul ul ul > li > a { padding-right: 10px; } ul.navigation ul ul ul ul > li > a { padding-right: 10px; } ul.navigation li.is-expanded > a { color: #28bea1; font-size: 15px; } ul.navigation ul > li.is-expanded > a { } ul.navigation ul ul > li:hover { background-repeat: repeat; background: #EAEDF0; background: -moz-linear-gradient(top, transparent 0%, transparent 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,transparent), color-stop(100%,transparent)); background: -webkit-linear-gradient(top, transparent 0%, transparent 100%); background: -o-linear-gradient(top, transparent 0%,transparent 100%); background: -ms-linear-gradient(top, transparent 0%,transparent 100%); background: linear-gradient(top, transparent 0%,transparent 100%); -pie-background: linear-gradient(transparent, transparent); } ul.navigation ul ul > li.is-expanded > a { } ul.navigation ul ul ul > li:hover { background-repeat: repeat; background: #EAEDF0; background: -moz-linear-gradient(top, transparent 0%, transparent 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,transparent), color-stop(100%,transparent)); background: -webkit-linear-gradient(top, transparent 0%, transparent 100%); background: -o-linear-gradient(top, transparent 0%,transparent 100%); background: -ms-linear-gradient(top, transparent 0%,transparent 100%); background: linear-gradient(top, transparent 0%,transparent 100%); -pie-background: linear-gradient(transparent, transparent); } ul.navigation ul ul ul > li.is-expanded > a { } ul.navigation ul ul ul ul > li:hover { background-repeat: repeat; background: #EAEDF0; background: -moz-linear-gradient(top, transparent 0%, transparent 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,transparent), color-stop(100%,transparent)); background: -webkit-linear-gradient(top, transparent 0%, transparent 100%); background: -o-linear-gradient(top, transparent 0%,transparent 100%); background: -ms-linear-gradient(top, transparent 0%,transparent 100%); background: linear-gradient(top, transparent 0%,transparent 100%); -pie-background: linear-gradient(transparent, transparent); } ul.navigation ul ul ul ul > li.is-expanded > a { }