website/static/css/case-study-styles.css

2046 lines
49 KiB
CSS

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, .open-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: auto;
padding: 0 20px;
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;
max-width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch; }
#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-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; }
#docsContent ul li {
list-style: disc; }
#docsContent ol ul li {
list-style: none; }
#docsContent ol li {
list-style: decimal; }
#docsContent ul, #docsContent ol {
margin: 20px 0;
padding-left: 30px;
font-weight: 300; }
#docsContent ul ul, #docsContent ol ol, #docsContent ul ol, #docsContent ol ul {
margin: 0.75em 0; }
#docsContent li {
margin-bottom: 0.75em;
font-size: 16px;
line-height: 1.75em; }
#docsContent table {
width: 100%;
border: 1px solid #ccc;
border-spacing: 0;
margin-top: 30px;
margin-bottom: 30px; }
#docsContent thead, #docsContent tr:nth-child(even) {
background-color: #f7f7f7; }
#docsContent thead {
background-color: #555;
color: white; }
#docsContent th, #docsContent td {
padding: 8px;
text-align: left;
margin: 0; }
#docsContent th {
font-weight: normal; }
#docsContent td {
font-size: 0.85em; }
#docsContent #editPageButton {
position: absolute;
top: -25px;
right: 5px;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
white-space: nowrap;
text-indent: 50px;
overflow: hidden;
background: #3371e3 url(/images/icon-pencil.svg) no-repeat;
background-position: 12px 10px;
background-size: 29px 29px; }
#docsContent #markdown-toc, #docsContent #TableOfContents {
margin-bottom: 20px; }
#docsContent #markdown-toc ul, #docsContent #markdown-toc li, #docsContent #TableOfContents ul, #docsContent #TableOfContents li {
list-style: disc;
color: #3371e3; }
#docsContent #markdown-toc ul, #docsContent #TableOfContents ul {
padding: 0 15px;
margin: 0; }
#docsContent #markdown-toc li, #docsContent #TableOfContents li {
padding: 0;
line-height: 1.5em;
margin-bottom: 0; }
#docsContent #markdown-toc a, #docsContent #TableOfContents a {
position: relative;
color: #3371e3;
font-weight: 700; }
#docsContent img {
max-width: 100%; }
#docsContent #TableOfContents > ul > li {
list-style: none; }
#docsContent #TableOfContents ul, #docsContent #TableOfContents li {
list-style: disk; }
.fixed footer {
position: fixed;
bottom: 0; }
#miceType {
clear: both;
font-size: 11px;
line-height: 18px;
color: #aaa; }
html.search #docsContent {
position: relative;
float: none;
width: 90%;
max-width: 850px;
margin: 0 auto; }
html.search #docsContent #editPageButton {
display: none; }
html.search #docsContent table {
border: 0;
margin-bottom: 0; }
html.search #docsContent td {
padding: 0; }
html.search #docsContent h1 {
margin-bottom: 0;
border-bottom: 0;
padding-bottom: 0;
padding-left: 8px; }
#home.flip-nav .logo, #home.open-nav .logo {
background-image: url(/images/nav_logo2.svg); }
#home #hero {
margin-bottom: 0;
padding-bottom: 1px; }
#home #hero main {
padding: 0 10px;
margin-bottom: 30px; }
#home #hero #vendorStrip {
display: none; }
#oceanNodes {
padding-top: 60px;
padding-bottom: 60px; }
#oceanNodes a {
color: #3371e3; }
#oceanNodes main {
margin-bottom: 60px;
min-height: 160px; }
#oceanNodes .image-wrapper {
max-width: 75%;
margin: 0 auto 20px;
text-align: center; }
#oceanNodes .image-wrapper img {
width: 100%;
max-width: 160px; }
#oceanNodes main:first-child .image-wrapper {
max-width: 100%; }
#oceanNodes main:first-child .image-wrapper img {
max-width: 491px; }
#oceanNodes h3 {
margin-bottom: 30px; }
#video {
height: 200px; }
#video {
width: 100%;
position: relative;
background-position: center center;
background-size: cover; }
#video > .light-text {
display: none;
position: absolute;
top: 50%;
left: 75%;
width: 525px;
padding-right: 80px;
transform: translate(-50%, -50%);
color: white; }
#video h2 {
font-size: 32px;
line-height: 44px;
margin-bottom: 20px; }
#video p {
margin-bottom: 20px; }
#video #desktopKCButton {
position: relative;
font-size: 18px;
background-color: #303030;
border-radius: 8px;
color: #ffffff;
padding: 20px 10px 20px 10px; }
#video #desktopShowVideoButton {
position: relative;
font-size: 24px;
background-color: white;
border-radius: 8px;
color: #3371e3;
padding: 15px 30px 15px 80px;
margin-bottom: 15px; }
#video #desktopShowVideoButton:before {
content: "";
position: absolute;
position: absolute;
top: 50%;
left: 40px;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 10px 0 10px 20px;
border-color: transparent transparent transparent #3371e3; }
#video #mobileShowVideoButton {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80px;
height: 80px;
border-radius: 50%;
background-color: transparent;
border: 5px solid rgba(255, 255, 255, 0.2);
overflow: visible; }
#video #mobileShowVideoButton:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
left: 40px;
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 20px 0 20px 30px;
border-color: transparent transparent transparent #ffffff; }
#videoPlayer {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
display: none; }
#videoPlayer iframe {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80vw;
height: 45vw;
max-width: 142.22222vh;
max-height: 80vh; }
#videoPlayer #closeButton {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
border: 2px solid transparent;
transition: 0.3s; }
#videoPlayer #closeButton:before, #videoPlayer #closeButton:after {
content: "";
position: absolute;
top: calc(50% - 1px);
left: 10%;
width: 80%;
height: 2px;
background-color: white; }
#videoPlayer #closeButton:before {
transform: rotate(45deg); }
#videoPlayer #closeButton:after {
transform: rotate(-45deg); }
#videoPlayer #closeButton:hover {
border-color: white; }
#cncf {
padding-top: 60px;
padding-bottom: 140px;
background-image: url(/images/cncf-color.png);
background-position: center 100px;
background-repeat: no-repeat;
background-size: 300px; }
#kubeweekly {
background-color: #f7f7f7;
padding-top: 60px;
padding-bottom: 140px;
background-size: auto;
font-family: "Roboto Mono", monospace !important;
font-size: 24px;
font-weight: bold; }
#kubeweekly h5 {
font-size: 20px; }
.subscribe-button {
border-radius: 6px;
padding: 0 20px;
line-height: 31px;
color: white;
background-color: blue;
text-decoration: none;
font-size: 14px; }
#features {
padding-top: 140px;
background-color: #f7f7f7;
background-image: url(/images/wheel.png);
background-position: center 60px;
background-repeat: no-repeat;
background-size: auto; }
.feature-box {
width: 100%;
overflow: hidden;
clear: both; }
.feature-box h4 {
line-height: normal;
margin-bottom: 15px; }
.feature-box > div:first-child {
float: left; }
.feature-box > div:last-child {
float: right; }
#features h3 {
margin-bottom: 20px; }
#features .feature-box {
margin-bottom: 0; }
#features .feature-box > div {
width: 100%;
margin-bottom: 40px; }
#community.open-nav .logo, #community.flip-nav .logo, .gridPage.open-nav .logo, .gridPage.flip-nav .logo {
background-image: url(/images/nav_logo2.svg); }
#community #hero, .gridPage #hero {
padding-bottom: 20px; }
#community #mainContent, .gridPage #mainContent {
padding: 20px 0; }
#community #mainContent main, .gridPage #mainContent main {
max-width: none; }
#community #mainContent a, .gridPage #mainContent a {
color: #3371e3; }
#community #mainContent .content, .gridPage #mainContent .content {
margin-bottom: 30px;
padding: 30px 0; }
#community #mainContent .content h1, #community #mainContent .content h2, #community #mainContent .content h3, #community #mainContent .content h4, #community #mainContent .content h5, #community #mainContent .content h6, #community #mainContent .content p, .gridPage #mainContent .content h1, .gridPage #mainContent .content h2, .gridPage #mainContent .content h3, .gridPage #mainContent .content h4, .gridPage #mainContent .content h5, .gridPage #mainContent .content h6, .gridPage #mainContent .content p {
line-height: normal;
max-width: 1200px;
padding: 0 20px;
margin: 0 auto 20px; }
#community #mainContent .content:nth-child(even), .gridPage #mainContent .content:nth-child(even) {
background-color: #f7f7f7; }
#community #mainContent .company-logos, .gridPage #mainContent .company-logos {
text-align: center;
max-width: 1200px;
margin: 0 auto; }
#community #mainContent .company-logos img, .gridPage #mainContent .company-logos img {
width: auto;
margin: 10px;
background-color: #f7f7f7; }
#community #mainContent .partner-logos, .gridPage #mainContent .partner-logos {
text-align: center;
max-width: 1200px;
margin: 0 auto; }
#community #mainContent .partner-logos img, .gridPage #mainContent .partner-logos img {
width: auto;
margin: 10px;
background-color: #ffffff;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.24), 0 0 5px rgba(0, 0, 0, 0.12); }
#community #mainContent #calendarMeetings, .gridPage #mainContent #calendarMeetings {
position: relative;
width: 80vw;
height: 60vw;
max-width: 1200px;
max-height: 900px;
margin: 20px auto; }
#community #mainContent #calendarEvents, .gridPage #mainContent #calendarEvents {
position: relative;
width: 80vw;
height: 30vw;
max-width: 1200px;
max-height: 450px;
margin: 20px auto; }
#community #mainContent iframe, .gridPage #mainContent iframe {
position: absolute;
border: 0;
width: 100%;
height: 100%; }
.ui-icon {
display: inline-block !important; }
#feature-state-dialog-link {
text-decoration: none !important;
padding: 5px !important; }
#feature-state-dialog-link a:visited {
color: #454545 !important; }
#feature-state-dialog-link a code {
display: inline-block !important;
box-sizing: border-box !important;
background-color: #f7f7f7 !important;
color: #303030 !important;
font-family: "Roboto Mono", monospace !important;
vertical-align: baseline !important;
font-size: 14px !important;
font-weight: bold !important;
padding: 0px 4px !important; }
#feature-state-dialog {
background: #fff !important;
border: 1px solid #ddd !important;
padding: 0.5em 1em !important; }
#feature-state-dialog ul, #feature-state-dialog li {
list-style: disc !important;
margin: 4px 12px !important; }
#feature-state-dialog p {
margin: 8px 0px !important; }
#feature-state-dialog code {
display: inline-block !important;
box-sizing: border-box !important;
background-color: #f7f7f7 !important;
color: #303030 !important;
font-family: "Roboto Mono", monospace !important;
vertical-align: baseline !important;
font-size: 14px !important;
font-weight: bold !important;
padding: 0px 4px !important; }
.ui-dialog {
background: #f7f7f7 !important;
padding: 0.5em; }
.ui-dialog-content {
position: relative;
float: right;
width: 100%; }
.ui-dialog-content * + h2, .ui-dialog-content * + h3, .ui-dialog-content * + h4, .ui-dialog-content * + h5, .ui-dialog-content * + h6 {
margin-top: 30px; }
.ui-dialog-content h1, .ui-dialog-content h2, .ui-dialog-content h3, .ui-dialog-content h4, .ui-dialog-content h5, .ui-dialog-content h6 {
line-height: normal;
font-weight: 500;
margin-bottom: 30px;
padding-bottom: 10px; }
.ui-dialog-content h1:before, .ui-dialog-content h2:before, .ui-dialog-content h3:before, .ui-dialog-content h4:before, .ui-dialog-content h5:before, .ui-dialog-content h6:before {
display: block;
content: " ";
margin-top: -100px;
height: 100px;
visibility: hidden; }
.ui-dialog-content h1, .ui-dialog-content h2 {
border-bottom: 1px solid #cccccc; }
.ui-dialog-content h1 {
font-size: 32px;
padding-right: 60px; }
.ui-dialog-content h2 {
font-size: 28px; }
.ui-dialog-content h3 {
font-size: 24px;
font-weight: 300;
margin-bottom: 5px; }
.ui-dialog-content h4 {
font-size: 20px;
margin-bottom: 0px; }
.ui-dialog-content h5, .ui-dialog-content h6 {
font-size: 16px;
font-weight: 500; }
.ui-dialog-content p {
font-size: 16px;
font-weight: 300;
line-height: 1.75em; }
.ui-dialog-content p + p {
margin-top: 10px; }
.ui-dialog-content 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; }
.ui-dialog-content a code {
color: #3371e3;
text-decoration: underline; }
.ui-dialog-content pre .pi, .ui-dialog-content pre .s {
margin: 0;
padding: 0; }
.ui-dialog-content .highlight code span, .ui-dialog-content code, .ui-dialog-content pre code {
font-family: "Roboto Mono", monospace; }
.ui-dialog-content code, .ui-dialog-content pre code {
color: #303030; }
.ui-dialog-content pre code {
padding: 0; }
.ui-dialog-content pre {
background-color: #f7f7f7;
display: block;
margin: 20px 0;
padding: 15px;
position: relative;
overflow-x: auto; }
.ui-dialog-content h1 code, .ui-dialog-content h2 code, .ui-dialog-content h3 code, .ui-dialog-content h4 code, .ui-dialog-content h5 code, .ui-dialog-content h6 code {
font-family: inherit;
font-size: inherit;
background-color: transparent; }
.ui-dialog-content .includecode {
table-layout: fixed; }
.ui-dialog-content .includecode, .ui-dialog-content .includecode th, .ui-dialog-content .includecode td {
padding: 0 !important; }
.ui-dialog-content .includecode th {
text-align: right !important;
padding: 10px !important; }
.ui-dialog-content .includecode th a, .ui-dialog-content .includecode th a code {
color: white !important;
background-color: transparent !important; }
.ui-dialog-content .includecode pre {
margin: 0 !important; }
.ui-dialog-content ul li {
list-style: disc; }
.ui-dialog-content ol li {
list-style: decimal; }
.ui-dialog-content ul, .ui-dialog-content ol {
margin: 20px 0;
padding-left: 30px;
font-weight: 300; }
.ui-dialog-content ul ul, .ui-dialog-content ol ol, .ui-dialog-content ul ol, .ui-dialog-content ol ul {
margin: 0.75em 0; }
.ui-dialog-content li {
margin-bottom: 0.75em;
font-size: 16px;
line-height: 1.75em; }
.ui-dialog-content table {
width: 100%;
border: 1px solid #ccc;
border-spacing: 0;
margin-top: 30px;
margin-bottom: 30px; }
.ui-dialog-content thead, .ui-dialog-content tr:nth-child(even) {
background-color: #f7f7f7; }
.ui-dialog-content thead {
background-color: #555;
color: white; }
.ui-dialog-content th, .ui-dialog-content td {
padding: 8px;
text-align: left;
margin: 0; }
.ui-dialog-content th {
font-weight: normal; }
.ui-dialog-content td {
font-size: 0.85em; }
.ui-dialog-content #editPageButton {
position: absolute;
top: -25px;
right: 5px;
width: 50px;
height: 50px;
line-height: 50px;
border-radius: 50%;
white-space: nowrap;
text-indent: 50px;
overflow: hidden;
background: #3371e3 url(/images/icon-pencil.svg) no-repeat;
background-position: 12px 10px;
background-size: 29px 29px; }
.ui-dialog-content #markdown-toc {
margin-bottom: 20px; }
.ui-dialog-content #markdown-toc ul, .ui-dialog-content #markdown-toc li {
list-style: disc;
color: #3371e3; }
.ui-dialog-content #markdown-toc ul {
padding: 0 15px;
margin: 0; }
.ui-dialog-content #markdown-toc li {
padding: 0;
line-height: 1.5em;
margin-bottom: 0; }
.ui-dialog-content #markdown-toc a {
position: relative;
color: #3371e3;
font-weight: 700; }
.ui-dialog-content img {
max-width: 100%; }
.ui-dialog-content a {
text-decoration: underline; }
.ui-dialog-buttonpane {
background: #f7f7f7 !important; }
.ui-widget-header {
background: transparent !important;
background-color: transparent !important;
border: 0px !important; }
.ui-tabs ul, .ui-tabs ol, .ui-tabs li {
padding: 0px !important;
list-style: none !important;
margin-bottom: 0px !important;
margin-left: 4px !important; }
.ui-tabs-panel ul li {
list-style: disc !important; }
.ui-tabs-panel ol li {
list-style: decimal !important; }
.ui-widget-content {
border: 0px !important; }
.ui-widget-content table {
margin: 0px !important; }
.ui-tabs .ui-tabs-panel {
border: 1px solid #ccc !important; }
.ui-tabs-anchor {
text-decoration: none !important; }
#talkToUs h3, #talkToUs h4 {
text-align: center; }
#talkToUs h3 {
margin-bottom: 15px; }
#talkToUs h4 {
line-height: normal;
margin-bottom: 50px; }
#talkToUs h4 br {
display: none; }
#talkToUs #bigSocial {
overflow: hidden; }
#talkToUs #bigSocial div {
width: 100%;
float: left;
padding: 30px;
padding-top: 110px;
background-position: center top;
background-size: auto;
background-repeat: no-repeat; }
#talkToUs #bigSocial div:nth-child(1) {
background-image: url(/images/twitter_icon.png); }
#talkToUs #bigSocial div:nth-child(2) {
background-image: url(/images/github_icon.png); }
#talkToUs #bigSocial div:nth-child(3) {
background-image: url(/images/slack_icon.png); }
#talkToUs #bigSocial div:nth-child(4) {
background-image: url(/images/stackoverflow_icon.png); }
#talkToUs #bigSocial div + div {
margin-top: 20px;
margin-left: 0; }
#talkToUs #bigSocial a {
display: inline-block;
color: #3371e3;
font-size: 24px;
font-weight: 400;
text-decoration: none;
margin-bottom: 15px; }
#talkToUs #bigSocial a, #talkToUs #bigSocial p {
text-align: center;
width: 100%; }
#home #talkToUs main {
padding: 30px 0; }
#home #talkToUs h5 {
font-size: 20px; }
#home #caseStudiesWrapper {
position: relative;
text-align: center;
margin-bottom: 30px; }
#home #caseStudiesWrapper img {
padding-bottom: 1rem; }
#home #caseStudiesWrapper div {
position: relative;
display: inline-block;
vertical-align: top;
width: 100%;
min-height: 230px;
margin-bottom: 60px;
padding-right: 1rem;
background-position: top center; }
#home #caseStudiesWrapper p {
font-size: 20px; }
#home #caseStudiesWrapper a {
position: absolute;
bottom: -30px;
left: 50%;
transform: translateX(-50%);
color: #3371e3;
font-weight: 400; }
/* Google Search */
.cse .gsc-control-cse, .gsc-control-cse {
padding: 0; }
.gsc-control-cse table, .gsc-control-cse-en table {
margin: 0px !important; }
.gsc-above-wrapper-area {
border-bottom: 0; }
/* Bing Search */
#bing-results-container {
margin-top: 30px;
margin-left: 20px; }
.bing-result {
margin-bottom: 20px; }
.bing-result-name a {
font-size: 16px;
color: #0000CC; }
.bing-result-url {
color: #008000;
font-size: 13px; }
.bing-result-snippet {
color: #000;
font-size: 11px; }
#bing-pagination-container {
margin: 10px;
margin-left: 20px; }
.bing-page-anchor {
text-decoration: none !important;
cursor: pointer;
color: #0000CC;
margin-right: 8px; }
hr {
background-color: #999999; }
h2 {
margin-bottom: 15px !important; }
.subhead {
padding-bottom: 2% !important;
padding-top: 0% !important; }
.details {
margin-left: 1.9%;
padding-right: 5%;
font-size: 16px !important;
padding-bottom: 2% !important; }
.section1 {
margin-bottom: 3%; }
.section1 .cols {
width: 80% !important;
margin-left: 6.8%;
padding-top: 1.5%; }
.section1 .cols .col1 {
width: 52% !important;
font-weight: 300 !important; }
.section1 .cols .col2 {
width: 46% !important; }
.banner2text {
width: 63%;
padding-top: 10%;
padding-left: 0% !important;
float: initial !important;
text-align: center;
margin: 0 auto;
position: relative; }
.banner3text, .banner4text, .banner5text {
width: 63%;
padding-left: 0% !important;
float: initial !important;
text-align: center;
margin: 0 auto;
position: relative; }
.fullcol {
float: initial !important; }
body footer {
background-color: #585858 !important; }
.section1 {
float: left !important; }
.banner1 {
padding-left: 11.9% !important; }
.banner2 {
float: initial !important;
padding-bottom: 2% !important; }
footer {
padding: 0% 7%; }
.banner4, .banner3, .banner5 {
float: initial !important; }
@media screen and (max-width: 910px) {
.banner2text {
width: 47%;
padding-top: 45%; }
.details {
margin-left: 0%;
margin-bottom: 3%; }
.subhead {
padding-bottom: 0% !important;
padding-top: 0% !important; }
.banner3 {
width: 100% !important; } }
@media screen and (max-width: 780px) {
.section1 .cols {
width: 100% !important;
margin-left: 0%;
padding-top: 5%; }
.section1 .cols .col1, .section1 .cols .col2 {
width: 100% !important;
margin-left: 0% !important; }
.fullcol {
width: 90% !important;
margin-left: 5% !important; }
.banner1 {
padding-left: 10% !important;
margin-bottom: 6% !important; }
.banner2text {
padding-top: 60% !important;
padding-bottom: 2% !important; } }
@media screen and (min-width: 750px) {
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; }
p {
font-size: 16px;
line-height: 24px;
letter-spacing: 0.1px; }
h1 {
font-size: 36px;
line-height: 44px; }
h3 {
font-size: 28px;
line-height: 36px; }
h4 {
font-size: 24px;
line-height: 40px; }
#home #viewDocs, #home #tryKubernetes {
display: inline-block; }
#vendorStrip {
display: block;
text-align: center; }
#vendorStrip img {
max-height: 24px;
vertical-align: middle;
margin: 0 30px; }
#docs #vendorStrip li a {
font-size: 1em;
font-weight: normal; }
#docs #vendorStrip li li + li {
margin-left: 60px; }
#oceanNodes h3 {
text-align: left;
margin-bottom: 18px; }
#oceanNodes main {
position: relative;
clear: both;
display: table;
height: 160px; }
#oceanNodes main .content {
display: table-cell;
position: relative;
vertical-align: middle; }
#oceanNodes main .image-wrapper {
position: absolute;
top: 50%;
max-width: 25%;
max-height: 100%;
transform: translateY(-50%); }
#oceanNodes main:nth-child(odd) {
padding-right: 210px; }
#oceanNodes main:nth-child(odd) .image-wrapper {
right: 0; }
#oceanNodes main:nth-child(even) {
padding-left: 210px; }
#oceanNodes main:nth-child(even) .image-wrapper {
left: 0; }
#oceanNodes main:nth-child(1) {
padding-right: 0; }
#oceanNodes main:nth-child(1) h3, #oceanNodes main:nth-child(1) p {
text-align: center; }
#oceanNodes main:nth-child(1) .image-wrapper {
position: relative;
display: block;
float: none;
max-width: 100%;
transform: none; }
#oceanNodes main:nth-child(1) .content {
display: block; }
#oceanNodes main img {
width: 100%; }
#video {
height: 400px;
display: block; }
#video > .light-text {
display: block; }
#mobileShowVideoButton {
display: none; }
#features {
padding-bottom: 60px; }
#features .feature-box {
margin-bottom: 30px; }
#features .feature-box:last-child {
margin-bottom: 0; }
#features h3 {
margin-bottom: 40px; }
#features .feature-box > div {
width: 45%;
margin-bottom: 0; }
#talkToUs #bigSocial div {
width: calc(50% - 15px); }
#talkToUs #bigSocial div + div {
margin-top: 0; }
#talkToUs #bigSocial div:nth-child(2) {
margin-left: 20px; }
#talkToUs #bigSocial div:nth-child(3) {
margin-top: 20px; }
#talkToUs #bigSocial div:nth-child(4) {
margin-top: 20px;
margin-left: 20px; }
#talkToUs #bigSocial a {
display: inline-block;
color: #3371e3;
font-weight: 400;
text-decoration: none; }
footer nav {
text-align: center; }
footer nav a {
width: 30%;
padding: 0 20px; }
footer .social {
text-align: center; }
footer .social div {
display: inline-block; }
footer .social div:last-child {
display: block;
margin: 0; }
footer .social span {
display: inline-block;
margin-right: 10px; }
footer .social input {
text-align: left; }
#home #caseStudiesWrapper div {
width: 48%; } }
@media screen and (min-width: 1025px) {
#hamburger {
display: none; }
ul.global-nav {
display: inline-block; }
#docs #vendorStrip #searchBox:before {
top: 15px; }
#vendorStrip {
height: 44px;
line-height: 44px; }
#vendorStrip li a.YAH:after {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 4px;
background-color: #3371e3; }
#vendorStrip #searchBox {
float: right; }
#home #hero #vendorStrip {
display: block; }
#docs #hero h1, #docs #hero h5 {
text-align: left; }
#docs #hero #vendorStrip ul {
float: left; }
#docs #hero #vendorStrip #searchBox {
float: right;
width: 250px; }
#docs #hero #vendorStrip #search {
vertical-align: middle; }
#docs .flyout-button {
display: none; }
#docs .logo {
position: relative;
float: left;
display: block;
width: 180px;
height: 88px;
top: 0;
left: 0;
transform: none;
background-image: url(../images/nav_logo.svg); }
#docs.flip-nav .logo, #docs.open-nav .logo {
background-image: url(../images/nav_logo2.svg); }
#encyclopedia {
padding: 50px 50px 100px 100px;
clear: both; }
#docsToc {
position: relative;
float: left;
padding: 0 20px;
left: 0;
width: 350px;
z-index: auto; }
#docsToc .push-menu-close-button {
display: none; }
#docsContent {
width: calc(100% - 400px); }
#docsContent #editPageButton {
right: -25px; }
section main, header main, footer main {
max-width: 1200px; }
header, #vendorStrip, #encyclopedia, #hero h1, #hero h5, #docs #hero h1, #docs #hero h5,
#community #hero h1, .gridPage #hero h1, #community #hero h5, .gridPage #hero h5 {
padding-left: 100px;
padding-right: 100px; }
#vendorStrip {
padding-right: 10px; }
#home section main, #home header main, #home footer main {
max-width: 1000px; }
#oceanNodes main {
position: relative;
max-width: 830px; }
#oceanNodes main:nth-child(1) {
max-width: 1000px;
padding-right: 475px; }
#oceanNodes main:nth-child(1) h3, #oceanNodes main:nth-child(1) p {
text-align: left; }
#oceanNodes main:nth-child(1) .image-wrapper {
position: absolute;
max-width: 48%;
transform: translateY(-50%); }
#oceanNodes main:nth-child(1) .image-wrapper img {
max-width: 425px; }
#video {
height: 550px;
position: relative;
background-position: center center;
background-size: cover; }
#talkToUs h4 br {
display: block; }
#talkToUs #bigSocial div {
width: calc(25% - 18px); }
#talkToUs #bigSocial div + div {
margin-left: 20px; }
footer {
width: 100%;
background-image: url(../images/texture.png);
background-color: #303030; }
footer main {
padding: 20px 0; }
footer nav {
overflow: hidden;
margin-bottom: 20px; }
footer nav a {
width: 16.65%;
float: left;
font-size: 24px;
font-weight: 300;
white-space: nowrap; }
footer .social {
padding: 0 30px;
max-width: 1200px; }
footer .social div {
float: left; }
footer .social div:last-child {
float: right; }
#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; }
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%; }
#community #hero, .gridPage #hero {
text-align: left; }
#community #hero h1, .gridPage #hero h1 {
padding: 20px 100px; }
#community #tryKubernetes, .gridPage #tryKubernetes {
width: auto;
background-color: #3371e3;
padding: 0 20px; }
#bigSocial div {
width: calc(25% - 18px); }
#home #caseStudiesWrapper div {
width: 24%;
min-height: 260px; } }
@media screen and (min-width: 1300px) {
#vendorStrip {
padding-right: 100px; } }
@media screen and (min-width: 456px) {
#vendorStrip li + li {
margin-left: 20px; } }