html, body { margin: 0; padding: 0; } input, button { outline: none; } button { cursor: pointer; } ul, li { list-style: none; } ul { margin: 0; padding: 0; } a { text-decoration: none; } .clear { display: block; clear: both; } .light-text { color: white; } .right { float: right; } .left { float: left; } .center { text-align: center; } *, .button { box-sizing: border-box; font-family: "Roboto", sans-serif; background: none; margin: 0; border: 0; } body { font-family: "Roboto", sans-serif; } h1, h2, h5, p { font-weight: 300; } h3, h4 { font-weight: 400; } html, body { margin: 0; padding: 0; } input, button { outline: none; } button { cursor: pointer; } ul, li { list-style: none; } ul { margin: 0; padding: 0; } a { text-decoration: none; } .clear { display: block; clear: both; } .light-text { color: white; } .right { float: right; } .left { float: left; } .center { text-align: center; } h1 { font-size: 32px; line-height: 40px; } h2 { font-size: 28px; line-height: 60px; } h3 { font-size: 24px; line-height: 32px; } h4 { font-size: 20px; line-height: 40px; } h5 { font-size: 16px; line-height: 36px; } p { font-size: 14px; line-height: 22px; } section, header, #vendorStrip { padding-left: 20px; padding-right: 20px; } section main, header main, #vendorStrip main { width: 100%; max-width: 100%; } header { height: 80px; } .nav-buttons { height: 80px; line-height: 80px; } .nav-buttons .button + * { margin-left: 30px; } #hamburger { width: 50px; height: 50px; } #mainNav { padding: 140px 0 30px; } #mainNav h5 { margin-bottom: 1em; } #mainNav h3 { margin-bottom: 0.6em; } #mainNav .nav-box { width: 20%; } #mainNav .nav-box + .nav-box { margin-left: calc(20% / 3); } #mainNav main + main { margin-top: 60px; } #mainNav .left .button { height: 50px; line-height: 50px; font-size: 18px; } .open-nav #tryKubernetes, .y-enough #tryKubernetes { margin-left: 30px; } #hero { padding-top: 80px; } #docs #hero h1, #docs #hero h5 { padding-left: 20px; padding-right: 20px; } #vendorStrip { height: 88px; line-height: 88px; font-size: 16px; } body { background-color: white; } section { position: relative; background-color: white; } section main, header main, footer main { position: relative; margin: auto; } p { font-size: 14px; font-weight: 400; } .button { display: inline-block; border-radius: 6px; padding: 0 20px; line-height: 40px; color: white; background-color: #3371e3; text-decoration: none; } #cellophane { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; } header { position: fixed; top: 0; left: 0; width: 100%; z-index: 8888; background-color: transparent; box-shadow: 0 0 0 transparent; overflow: hidden; transition: 0.3s; text-align: center; } .logo { position: relative; float: left; display: block; width: 180px; height: 88px; top: 0; left: 0; transform: none; background-image: url(/images/nav_logo.svg); background-size: contain; background-position: center center; background-repeat: no-repeat; } #docs .flyout-button { position: fixed; top: 20px; left: 20px; width: 50px; height: 50px; background-image: url(/images/toc_icon.png); background-position: center center; background-repeat: no-repeat; background-size: auto; border-radius: 50%; transition: 0.3s; z-index: 99999; } #docs.open-nav .flyout-button { display: none; } #docs .logo { position: absolute; top: 40px; left: 50%; transform: translate(-50%, -50%); display: block; width: 45px; height: 44px; background-image: url(/images/favicon.png); } #docs.flip-nav .flyout-button { background-image: url(/images/toc_icon_grey.png); } .nav-buttons { float: right; } #viewDocs, #tryKubernetes { display: none; } #viewDocs { border: 2px solid white; background-color: transparent; transition: 0.3s; } #viewDocs:hover { background-color: white; color: #303030; } #tryKubernetes { width: 0; padding: 0 0; border: 1px solid transparent; background-color: transparent; text-align: center; white-space: nowrap; vertical-align: middle; overflow: hidden; transition: 0.3s; } #hamburger { display: inline-block; position: relative; vertical-align: middle; padding: 0; border: 0; background: none; } #hamburger div, #hamburger:before, #hamburger:after { position: absolute; left: 15%; width: 70%; height: 2px; background-color: #3371e3; transition: 0.3s; content: ""; } #hamburger div { top: calc(50% - 1px); } #hamburger:before { top: 24%; } #hamburger:after { bottom: 24%; } #hamburger:hover div, #hamburger:hover:before, #hamburger:hover:after { background-color: white; } #mainNav h5 { color: #3371e3; font-weight: normal; } #mainNav main { white-space: nowrap; overflow: hidden; clear: both; } #mainNav .nav-box { float: left; white-space: normal; } #mainNav h3 a { color: #3371e3; text-decoration: none; } ul.global-nav { display: none; } ul.global-nav li { display: inline-block; margin-right: 14px; } ul.global-nav li a { color: #fff; font-weight: 400; padding: 0; position: relative; } ul.global-nav li a.active:after { position: absolute; width: 100%; height: 2px; content: ''; bottom: -4px; left: 0; background: #fff; } ul.global-nav li a .ui-icon { filter: brightness(0) invert(1); } ul.global-nav li ul { display: none; position: fixed; top: 40px; text-align: left; } ul.global-nav li ul li { display: block; height: 28px; } ul.global-nav li ul li a { background: #303030; color: #fff; padding: 7px; } ul.global-nav li ul li:last-child a { border-radius: 7px; } ul.global-nav li:hover ul { display: block; } .flip-nav ul.global-nav li a, .open-nav ul.global-nav li a { color: #303030; } .flip-nav ul.global-nav li a .ui-icon { filter: brightness(0); } .flip-nav ul.global-nav li ul li a { background: #fff; color: #303030; } .flip-nav ul.global-nav li a.active:after, .flip-nav ul.global-nav li ul li a.active:after, .open-nav ul.global-nav li a.active:after { background: #3371e3; } .flip-nav header { background-color: white; } .open-nav body { overflow: hidden; } .open-nav #cellophane { display: block; z-index: 9998; } .open-nav header { background-color: #e8e8e8; z-index: 9999; } .open-nav #hamburger div { opacity: 0; } .open-nav #hamburger:before, .open-nav #hamburger:after { left: 12px; transform-origin: 0 1px; } .open-nav #hamburger:before { transform: rotate(45deg); } .open-nav #hamburger:after { transform: rotate(-45deg); } .open-nav #tryKubernetes, .y-enough #tryKubernetes { width: 150px; background-color: #3371e3; border-color: #3371e3; } .flip-nav header, .open-nav header { box-shadow: 0 1px 2px #4c4c4c; } .flip-nav #viewDocs, .open-nav #viewDocs { border-color: #303030; color: #303030; } .flip-nav #viewDocs:hover, .open-nav #viewDocs:hover { border-color: #3371e3; background-color: #3371e3; color: white; } .flip-nav #hamburger:hover div, .flip-nav #hamburger:hover:before, .flip-nav #hamburger:hover:after, .open-nav #hamburger:hover div, .open-nav #hamburger:hover:before, .open-nav #hamburger:hover:after { background-color: #303030; } #hero { background-image: url(/images/texture.png); background-color: #303030; text-align: center; padding-left: 0; padding-right: 0; margin-bottom: 0; position: relative; } #hero.bot-bar:after { display: block; margin-bottom: -20px; height: 8px; width: 100%; background-color: rgba(255, 255, 255, 0.1); content: ''; } #hero.no-sub h5 { display: none; } #hero.no-sub h1 { margin-bottom: 20px; } #home #hero:after { display: none; } #vendorStrip { position: relative; background-color: rgba(255, 255, 255, 0.1); font-weight: 100; white-space: nowrap; text-align: center; } #vendorStrip li a { color: rgba(255, 255, 255, 0.5); } #vendorStrip li a.YAH { color: white; position: relative; } footer { width: 100%; background-image: url(/images/texture.png); background-color: #303030; } footer main { padding: 20px 0; } footer nav a { width: 100%; text-align: center; display: inline-block; margin: 10px 0; font-size: 24px; font-weight: 300; color: white; text-decoration: none; } footer .social { margin: 20px 0; } footer .social div { text-align: center; margin-bottom: 20px; } footer .social div:last-child { margin: 30px 0; } footer .social span { display: block; margin-bottom: 8px; } footer .social input { text-align: center; } #search, #wishField { background-color: transparent; padding: 10px; font-size: 16px; font-weight: 100; color: white; border: 1px solid white; transition: 0.3s; } #search:focus, #wishField:focus { background-color: #f7f7f7; color: #303030; } .social a { display: inline-block; background-image: url(/images/social_sprite.png); background-repeat: no-repeat; background-size: auto; width: 50px; height: 50px; border-radius: 5px; margin-right: 10px; } .social a:hover { background-color: #fff; } .social a span { position: absolute; display: block; height: 0; overflow: hidden; } .social a.button { background-image: none; width: auto; height: auto; } .social a.button:hover { color: #3371e3; } a.twitter { background-position: 0 0; } a.twitter:hover { background-position: 0 100%; } a.stack-overflow { background-position: -50px 0; } a.stack-overflow:hover { background-position: -50px 100%; } a.slack { background-position: -100px 0; } a.slack:hover { background-position: -100px 100%; } a.github { background-position: -150px 0; } a.github:hover { background-position: -150px 100%; } a.mailing-list { background-position: -200px 0; } a.mailing-list:hover { background-position: -200px 100%; } a.calendar { background-position: -250px 0; } a.calendar:hover { background-position: -250px 100%; } #viewDocs { display: none; } section { background-color: white; } #hero { background-color: #303030; } #hero h5 { margin: 20px 0; line-height: 28px; } #vendorStrip { position: relative; } #vendorStrip ul { float: left; } #vendorStrip li { display: inline-block; height: 100%; } #vendorStrip a { display: block; height: 100%; color: white; font-size: 0.75em; font-weight: bold; } #vendorStrip li + li { margin-left: 0; } #docs #vendorStrip { line-height: 44px; } #docs #vendorStrip ul { float: none; } #docs #vendorStrip #searchBox { float: none; display: block; width: 80%; margin: 0 auto; height: 44px; line-height: 44px; position: relative; } #docs #vendorStrip #searchBox:before { position: absolute; width: 15px; height: 15px; content: ''; right: 8px; top: 7px; background-image: url(/images/search-icon.svg); background-repeat: no-repeat; background-size: 100% 100%; z-index: 1; } #docs #vendorStrip #search { width: 100%; padding: 0 10px; height: 30px; line-height: 30px; font-size: 16px; vertical-align: top; background: #fff; border: none; border-radius: 4px; position: relative; } #encyclopedia { position: relative; padding: 50px 20px 20px 20px; overflow: hidden; font-size: 14px; } #encyclopedia > div { height: 100%; } #docsToc { position: fixed; background-color: white; top: 0; left: 0; width: 0; height: 100vh; overflow: hidden; padding: 50px 0; z-index: 999999; transition: 0.3s; } #docsToc .yah > .title { background-color: #f7f7f7; border-left: 3px solid #3371e3; padding: 7.5px 10px 7.5px 18px; margin-left: -3px; color: #3371e3; } .open-toc body { overflow: hidden; } .open-toc #docsToc { padding: 50px 20px; width: 400px; max-width: 100vw; overflow-y: auto; } .pi-accordion > .container:first-child > .item:first-child > .title:first-child { padding-left: 0; font-size: 1.5em; font-weight: 700; } .pi-accordion > .container:first-child > .item.yah:first-child > .title:first-child { margin-left: -20px !important; } .pi-accordion .item { overflow: hidden; } .pi-accordion .title { color: #303030; position: relative; padding: 7.5px 10px 7.5px 18px; cursor: pointer; transition: 0.3s; } .pi-accordion .title:hover { color: #3371e3; } .pi-accordion a.item > .title { color: black; } .pi-accordion a.item > .title:hover { color: #3371e3; } .pi-accordion div.item > .title:before { content: ""; position: absolute; top: 12px; left: 2px; border-style: solid; border-width: 5px 0 5px 8px; border-color: transparent transparent transparent #3371e3; transform: rotate(0deg); transition: 0.3s; } .pi-accordion .wrapper { position: relative; width: 100%; transition: height 0.3s; } .pi-accordion .content { padding-left: 20px; opacity: 0; transition: 0.3s; } .pi-accordion .item.on > .title:before { transform: rotate(90deg); } .pi-accordion .item.on > .wrapper > .content { opacity: 1; } dt { margin-bottom: 8px; } dd { margin-bottom: 16px; } .pi-pushmenu { display: none; position: fixed; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.3s; } .pi-pushmenu.on { opacity: 1; } .pi-pushmenu .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); } .pi-pushmenu .sled { position: absolute; top: 0; width: 0; height: 100%; background-color: white; overflow: auto; transition: 0.3s; } .pi-pushmenu.on .sled { width: 400px; max-width: 100vw; } .pi-pushmenu .top-bar { height: 0; line-height: 60px; background-color: #444; } .pi-pushmenu ul { margin-top: 25px; } .pi-pushmenu li { position: relative; display: block; width: 100%; min-height: 45px; padding: 0 60px 0 20px; border-bottom: 1px solid #cccccc; } .pi-pushmenu a { display: inline-block; width: 100%; height: 45px; line-height: 45px; font-family: "Roboto", sans-serif; font-size: 20px; color: #3371e3; } .pi-pushmenu .button { background: none; padding: 0; } .pi-pushmenu ul ul { padding: 0 20px; } .pi-pushmenu ul ul li { min-height: 40px; } .pi-pushmenu ul ul a { height: 40px; line-height: 40px; font-size: 18px; color: #555555; } .push-menu-close-button { position: absolute; top: 0; right: 0; width: 50px; height: 50px; } .push-menu-close-button:before, .push-menu-close-button:after { content: ""; position: absolute; top: calc(50% - 1px); left: 25%; width: 50%; height: 2px; background-color: black; } .push-menu-close-button:before { transform: rotate(45deg); } .push-menu-close-button:after { transform: rotate(-45deg); } #docsContent { position: relative; float: right; width: 100%; } #docsContent * + h2, #docsContent * + h3, #docsContent * + h4, #docsContent * + h5, #docsContent * + h6 { margin-top: 30px; } #docsContent h1, #docsContent h2, #docsContent h3, #docsContent h4, #docsContent h5, #docsContent h6 { line-height: normal; font-weight: 500; margin-bottom: 30px; padding-bottom: 10px; } #docsContent h1:before, #docsContent h2:before, #docsContent h3:before, #docsContent h4:before, #docsContent h5:before, #docsContent h6:before { display: block; content: " "; margin-top: -100px; height: 100px; visibility: hidden; } #docsContent h1, #docsContent h2 { border-bottom: 1px solid #cccccc; } #docsContent h1 { font-size: 32px; padding-right: 60px; } #docsContent h2 { font-size: 28px; } #docsContent h3 { font-size: 24px; font-weight: 300; margin-bottom: 5px; } #docsContent h4 { font-size: 20px; margin-bottom: 0px; } #docsContent h5, #docsContent h6 { font-size: 16px; font-weight: 500; } #docsContent p { font-size: 16px; font-weight: 300; line-height: 1.75em; } #docsContent p + p { margin-top: 10px; } #docsContent code { display: inline-block; box-sizing: border-box; background-color: #f7f7f7; color: #303030; font-family: "Roboto Mono", monospace; vertical-align: baseline; font-size: 14px; font-weight: bold; padding: 2px 4px; } #docsContent a code { color: #3371e3; text-decoration: underline; } #docsContent pre .pi, #docsContent pre .s { margin: 0; padding: 0; } #docsContent .highlight code span, #docsContent code, #docsContent pre code { font-family: "Roboto Mono", monospace; } #docsContent code, #docsContent pre code { color: #303030; } #docsContent pre code { padding: 0; } #docsContent pre { background-color: #f7f7f7; display: block; margin: 20px 0; padding: 15px; position: relative; overflow-x: auto; } #docsContent h1 code, #docsContent h2 code, #docsContent h3 code, #docsContent h4 code, #docsContent h5 code, #docsContent h6 code { font-family: inherit; font-size: inherit; background-color: transparent; } #docsContent .includecode { table-layout: fixed; } #docsContent .includecode, #docsContent .includecode th, #docsContent .includecode td { padding: 0 !important; } #docsContent .includecode th { text-align: right !important; padding: 10px !important; } #docsContent .includecode th a, #docsContent .includecode th a code { color: white !important; background-color: transparent !important; } #docsContent .includecode pre { margin: 0 !important; } /* These are being clobbered by line 37 and it is affecting