/* CSS Document */ /* SPNG Global - used on all pages */ .ng-cloak { display: none !important; } abbr[title], acronym[title] { text-decoration: none; } #ietran_ui_langselect { font-family: inherit !important; font-size: inherit !important; height: 2.5rem; padding: .5rem; } #ibm-translate-module p { float: right; } #ibm-top { background-color: transparent; } #ibm-top.spng-omnibox-open { min-height: 1007px; } #ibm-content-main { min-height: 700px; } .ibm-landing-page ul#ibm-navigation-trail { padding-top: 10px; } #spng-top-tools { background-color: #f9f9f9; min-height: 0; padding: 5px 0; } #home { margin-bottom: 2rem; } span.spng-icon-link { display: inline-block; margin: 70px 10px 0; } span.whats-new { font-size: 14px; color: white; padding-left: 18px; text-decoration: underline; } span.whats-new a { color: #ffffff !important; } span.whats-new a:visited { color: #ffffff !important; } .nowrap { white-space: nowrap; } #home-icons .ibm-columns .ibm-col-6-1 a:hover span.spng-icon-link, #home-icons .ibm-columns .ibm-col-6-1 a:focus span.spng-icon-link { color: white; } /*TopLinks menus Ends Here */ #searchFilter-label { width: 570px; } /* CONTENT CARD STYLES - BEGIN */ .ibm-card-spng { min-height: 260px; position: relative; } html.ibm-grid-small .ibm-card-spng, html.ibm-grid-xsmall .ibm-card-spng, html.touchevents .ibm-card-spng { min-height: unset; } .ibm-col-6-2 .ibm-card-spng, .ibm-col-6-4 .ibm.-card-spng { height: 260px; overflow: hidden; } html.ibm-grid-small .ibm-col-6-2 .ibm-card-spng, html.ibm-grid-xsmall .ibm-col-6-2 .ibm-card-spng, html.touchevents .ibm-col-6-2 .ibm-card-spng, html.ibm-grid-small .ibm-col-6-4 .ibm.-card-spng, html.ibm-grid-xsmall .ibm-col-6-4 .ibm.-card-spng, html.touchevents .ibm-col-6-4 .ibm.-card-spng { height: unset; overflow: initial; } .ibm-col-6-2.spng-rows-2 .ibm-card-spng { height: 540px; } /* CONTENT CARD STYLES - END */ div#product-content div[class^=ibm-col-] .ibm-card { /* Allow only one line for each link. */ /* Make sure the "View all ..." link in content cards is always dark gray. */ } div#product-content div[class^=ibm-col-] .ibm-card li a { line-height: 1.62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 90%; } html.ibm-grid-small div#product-content div[class^=ibm-col-] .ibm-card li a, html.ibm-grid-xsmall div#product-content div[class^=ibm-col-] .ibm-card li a, html.touchevents div#product-content div[class^=ibm-col-] .ibm-card li a { text-overflow: initial; white-space: normal; } div#product-content div[class^=ibm-col-] .ibm-card li.spng-view-all-link a, div#product-content div[class^=ibm-col-] .ibm-card li.spng-view-all-link a:link, div#product-content div[class^=ibm-col-] .ibm-card li.spng-view-all-link a:visited, div#product-content div[class^=ibm-col-] .ibm-card li.spng-view-all-link a:hover, div#product-content div[class^=ibm-col-] .ibm-card li.spng-view-all-link a:focus { color: #323232 !important; } /* Avoid link icon clipping in IE (modernizr tags with "unknownX" and "gecko1" classes for IE) */ html.unknownX.gecko1 div#product-content div[class^='ibm-col-'] .ibm-card li a[class*='-link']::before { padding: 1px 0 0 1px; } /*Styles for pop-up links*/ .ibm-popup-link { display: inline-block; margin: 0; padding-left: 2.2em; position: relative; cursor: pointer; } .ibm-accessibility-link::before { /* \267f is the universal accessibility symbol (person in wheelchair). \fe0f forces an emoji rendering when one is available (except in MSIE); \fe0e forces the font's glyph to render instead of an emoji (except in MSEdge). With just the character, Chrome and Edge default to the emoji while FF and IE default to the glyph, at least under Windows 10. */ content: ' '; background: url(images/accessibility-icon.svg) no-repeat 50% 50%/cover; width: 24px; height: 25px; } /* Leadspace */ .spng-home-leadspace { background: url("images/spng_leadspace_home.png") no-repeat 50% 50%/cover; background-color: #264a60; } .lead-new-link { float: right; margin-top: 0.6em; padding-left: 10px; } .lead-new-link ::before { clear: both; } .lead-new-link ::after { clear: both; } .home-new-link { float: right; margin-top: -30px; } .home-new-link ::before { clear: both; } .home-new-link ::after { clear: both; } .spng-home-title { margin: auto; } .spng-home-title ::after { clear: both; } .spng-home-supp_comm-msg { background: #a7fae6 url("images/crane-image.png") no-repeat top right/contain; } /* OMNIBOX */ /* #spng-search is the form that wraps the omnibox components */ #spng-search { margin: 5px auto 5px; display: inline-block; position: relative; width: 100%; } /* Wrapper for the omnibox results section we need position relative to frame the reference for the results section, which is position:absolute, letting it be 'outside' the lead space */ .search-results-wrapper { position: relative; } .search-results-wrapper ::before { clear: both; } /* Omnibox search results section on the home page only */ .home-search-results { margin-left: auto; margin-right: auto; min-width: 556px; max-width: 710px !important; left: -4px; margin-top: -2px; } /* Omnibox search results section on secondary pages only */ .small-search-results { max-width: 458px !important; left: 0; margin-top: -10px; } /* Omnibox search results - styles common to all versions */ .common-search-results { border: 1px solid #3c4646; background-color: #ffffff; width: calc(80% - 42px); padding: 10px 20px; position: absolute; height: auto; max-height: 400px; min-height: 157px; overflow-y: scroll; right: 0; top: 1px; z-index: 9999; } .common-search-results ul li, .common-search-results p, .common-search-results h2 { text-align: left; } .common-search-results .result_section { clear: both; } .common-search-results .category { float: left; width: 120px; padding: 8px; color: #ffffff; text-align: left; } .common-search-results .category p { color: #ffffff; } .common-search-results .results { float: left; width: 500px; padding: 8px 0 8px 8px; } .common-search-results .results ul { margin-top: 0; } .common-search-results .results .more { float: right; } .home-search-query { margin-bottom: 0; background-color: white; border-radius: 4px 4px 4px 4px; font-weight: normal; padding: 0 2px 0 10px; text-align: left; width: 80%; min-width: 600px; max-width: 752px !important; vertical-align: bottom; -webkit-appearance: none; } .home-search-query:focus { color: black; } .small-search-query { width: 80%; max-width: 500px !important; } .common-search-link { line-height: 2.5em; position: relative; left: 10px; text-decoration: none; width: 0; } .common-search-link::before { text-indent: 0; } .home-search-link { line-height: 2.5em; } .home-search-link::before { font-size: 2.5rem; font-weight: bold; } /* Omnibox on all secondary pages */ #search-header-wrapper { background-color: #4178be; border-top: 1px solid #ececec; border-width: 1px 0; margin-bottom: 1.25rem; } #search-header { padding: 25px 0; } #search-header-small { padding: 25px 0; } #search-header-small h3 a { color: #ffffff; } #search-header-small h3 a:visited { color: #ffffff; } /* TOP HEADING BAR STARTS */ #small-header { background-color: white; border-bottom: 1px solid #ececec; margin-bottom: 1em; } #small-header h2 { padding: 0; } #small-header h2 img { vertical-align: bottom; margin-right: 5px; } /* Product optional info (Lenovo link and alert link) colors. */ product-optional-text a.ibm-textcolor-orange-50:link, product-optional-text a.ibm-textcolor-orange-50:visited { color: #d74108; } product-optional-text a.ibm-textcolor-red-50:link, product-optional-text a.ibm-textcolor-red-50:visited { color: #e71d32; } product-optional-text a.ibm-textcolor-blue-50:link, product-optional-text a.ibm-textcolor-blue-50:visited { color: #4178be; } /* Search results formatting */ .ibm-search-results mark { background: none; color: inherit; font-weight: bold; } /* Chat Invitation */ #divChatInvite { padding: 5px; z-index: 9999999999; background-color: #4178be; border: 0px solid #4178be; } #divChatInvite .chatInviteClose { float: right; padding-top: 5px; } #divChatInvite .chatInviteContent { padding: 20px 15px 10px 15px; } .hand-pointer { cursor: pointer; cursor: hand; } /* Overlays */ .WEAContainer { padding: 10px; height: 565px; } .ng-modal-overlay { /* A dark translucent div that covers the whole screen */ position: absolute; z-index: 900; top: 0; left: 0; width: 100%; height: 100%; background-color: #111; opacity: 0.5; } .ng-modal-dialog { /* A centered div above the overlay with a box shadow. */ z-index: 920; position: absolute; width: 750px; /* Default */ /* Center the dialog */ left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); background-color: #ffffff; box-shadow: 4px 4px 80px #000; } .ng-modal-dialog-content { padding: 0 20px 0 20px; text-align: left; max-height: 600px; } .ng-modal-close { margin: 0; padding: 5px 5px 0 0; position: absolute; right: 0; } .ng-modal-noninteractive { padding-top: 40px; padding-bottom: 40px; } .invalidTicketDialogField { background: #FCD3D0 none repeat scroll 0 0 !important; } /* MEDIA QUERIES STARTS Note - omnibox current defaults to 'mobile mode' for widths under 768px, aligning media query limit to match - in mobile mode there is no type-ahead support so we don't have to worry about the inline results section */ @media only screen and (min-width: 481px) and (max-width: 767px) { #spng-search { min-width: 410px; /* setting width for Mac Pro safari issue */ } #spng-search input[type="search"] { border: medium none; border-radius: 0; color: #ccc; font-size: 1.5em !important; font-weight: normal; /* height: auto !important; - Removed per defect 1425621. Seems to work fine in all browsers (in desktop and mobile modes) without it. */ width: calc(100% - 40px); } #spng-search-button { top: 6px; } #spng-search-button::before { font-size: 1.5em; } .common-search-results { width: calc(75% - 42px); min-width: 320px; } .home-search-query { min-width: 360px; } } @media only screen and (max-width: 480px) { #home { min-height: 128px; padding-top: 8px !important; } .common-search-link { left: 0; } .small-search-link { left: unset; position: absolute; margin-left: 10px; top: 3px; } .home-search-results { width: calc(100% - 67px); min-width: 200px; padding: 10px 10px 10px 5px; margin-left: 0; margin-right: 0; left: 0; } .small-search-results { width: calc(100% - 92px); min-width: 200px; } #spng-search { width: calc(100vw - 40px); max-width: calc( 100% - 10px); min-width: calc( 100% - 10px); margin: 0 auto; } #spng-search input[type="search"] { width: calc(100% - 20px); /*float: left;*/ } .home-search-results-wrapper { /* width: calc(100vw - 50px); */ width: 100%; } .home-search-query { min-width: 260px; } } /* CHWE details page */ .ng-sys-details tbody { background-color: white; } /* END CHWE details page */ /* Offscreen iframes used by httpRetryInterceptor.factory.js::loadInIframe(). */ iframe.spng-load-helper { position: absolute; top: 0; left: -10000px; width: 1px; height: 1px; border: 0; } /* Error pages: extra blank space for
within error message. */ #error-page h2 + p { /* &:first-line { font-weight: bolder; } */ } #error-page h2 + p br { content: " "; display: block; margin: 1em 0; } /*# sourceMappingURL=spng.css.map */