@import "reset"

// TEXT
$h1-font-size: 32px
$h1-line-height: 40px

$h2-font-size: 28px
$h2-line-height: 60px

$h3-font-size: 24px
$h3-line-height: 32px

$h4-font-size: 20px
$h4-line-height: 40px

$h5-font-size: 16px
$h5-line-height: 36px

$p-font-size: 14px
$p-line-height: 22px


// header
$full-width-paddingX: 20px

$main-width: 100%
$main-max-width: 100%

$header-height: 80px

$logo-width: 180px

$nav-buttons-margin-left: 30px

$hamburger-size: 50px


// main nav
$main-nav-padding: 140px 0 30px
$main-nav-h5-margin-bottom: 1em
$main-nav-h3-margin-bottom: 0.6em
$nav-box-width: 20%
$nav-box-sibling-margin-left: calc(20% / 3)
$main-nav-main-sibling-margin-top: 60px
$main-nav-left-button-size: 50px
$main-nav-left-button-font-size: 18px


// hero
$hero-padding-top: 80px
$headline-wrapper-margin-bottom: 40px
$quickstart-button-padding: 0 50px
$vendor-strip-height: 88px
$vendor-strip-font-size: 16px

// video
$video-section-height: 200px

@import "size"

////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////////////////////////////////

body
  background-color: white

section
  position: relative
  background-color: white

section, header, footer
  .main-section
    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: $blue
  text-decoration: none
  font-size: 1rem

#cellophane
  position: fixed
  top: 0
  left: 0
  width: 100%
  height: 100%
  display: none


// HEADER
header
  position: fixed
  top: 0
  left: 0
  width: 100%
  z-index: 8888
  background-color: transparent
  box-shadow: 0 0 0 transparent
  transition: 0.3s
  text-align: center
  overflow: hidden


.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

#blog
  &.flip-nav, &.open-nav
    .logo
      background-image: url(../images/nav_logo2.svg)

// Blog post tables
.blog-content
  table
    max-width: 100%
    border: 1px solid #ccc
    border-spacing: 0
    margin-top: 30px
    margin-bottom: 30px

    thead
      border-bottom: 2px solid #ccc

      tr
        th
          padding: .5rem
          font-size: 1.5rem

    tbody
      tr
        td
          padding: .5rem
          border-bottom: 1px solid #ccc
          border-left: 1px solid #ccc
          padding-right: 5rem

#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

  &.open-nav .flyout-button
    display: none

  .logo
    position: absolute
    top: 40px
    left: 50%
    transform: translate(-50%, -50%)
    display: block
    width: 45px
    height: 44px
    background-image: url(/images/favicon.png)

  &.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

  &:hover
    background-color: white
    color: $dark-grey

#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

  div, &:before, &:after
    position: absolute
    left: 15%
    width: 70%
    height: 2px
    background-color: $blue
    transition: 0.3s
    content: ""

  div
    top: calc(50% - 1px)

  &:before
    top: 24%

  &:after
    bottom: 24%

  &:hover
    div, &:before, &:after
      background-color: white

#mainNav

  h5
    color: $blue
    font-weight: normal

  .main-section
    white-space: nowrap
    overflow: hidden
    clear: both

  .nav-box
    float: left
    white-space: normal

  h3
    a
      color: $blue
      text-decoration: none

// Global Nav - 12/9/2016 Update

ul.global-nav
  display: none

  li
    display: inline-block
    margin-right: 14px

    a
      color: #fff
      font-weight: 400
      padding: 0
      position: relative

      &.active:after
        position: absolute
        width: 100%
        height: 2px
        content: ''
        bottom: -4px
        left: 0
        background: #fff

      .ui-icon
        filter: brightness(0) invert(1)

    ul
      display: none
      position: fixed
      top: 40px
      text-align: left

      li
        display: block
        height: 28px

        a
          background: $dark-grey
          color: #fff
          padding: 7px

      li:last-child
        a
          border-radius: 7px

  li:hover
    ul
      display: block


.flip-nav, .open-nav
  ul.global-nav li a
    color: $dark-grey

    .ui-icon
      filter: brightness(0)

.flip-nav ul.global-nav li ul li a
  background: #fff
  color: $dark-grey

.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: $blue

// FLIP NAV
.flip-nav
  header
    background-color: white


// OPEN NAV
.open-nav
  body
    overflow: hidden

  #cellophane
    display: block
    z-index: 9998

  header
    background-color: #e8e8e8
    z-index: 9999

  #hamburger
    div
      opacity: 0

    &:before, &:after
      left: 12px
      transform-origin: 0 1px

    &:before
      transform: rotate(45deg)

    &:after
      transform: rotate(-45deg)

.open-nav, .y-enough
  #tryKubernetes
    width: auto
    padding: 0 20px
    background-color: $blue
    border-color: $blue


.flip-nav, .open-nav
  header
    box-shadow: 0 1px 2px $medium-grey

  #viewDocs
    border-color: $dark-grey
    color: $dark-grey

    &:hover
      border-color: $blue
      background-color: $blue
      color: white

  #hamburger:hover
    div, &:before, &:after
      background-color: $dark-grey



// HERO
#hero
  background-image: url(/images/texture.png)
  background-color: $dark-grey
  text-align: center
  padding-left: 0
  padding-right: 0
  margin-bottom: 0
  position: relative

  &.bot-bar:after
    display: block
    margin-bottom: -20px
    height: 8px
    width: 100%
    background-color: transparentize(white, 0.9)
    content: ''

  &.no-sub

    h5
      display: none

    h1
      margin-bottom: 20px

#home #hero:after
  display: none

// VENDOR STRIP
#vendorStrip
  position: relative
  background-color: transparentize(white, 0.9)
  font-weight: 100
  white-space: nowrap
  text-align: center

  li a
    color: transparentize(white, 0.5)

    &.YAH
      color: white
      position: relative


// FOOTER
footer
  width: 100%
  background-image: url(/images/texture.png)
  background-color: $dark-grey
  overflow-x: hidden

  .main-section
    padding: 20px 0

  nav
    a
      width: 100%
      text-align: center
      display: inline-block
      margin: 10px 0
      font-size: 24px
      font-weight: 300
      color: white
      text-decoration: none


  .social
    margin: 20px 0

    div
      text-align: center
      margin-bottom: 20px

    div:last-child
      margin: 30px 0

    span
      display: block
      margin-bottom: 8px

    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

  &:focus
    background-color: $light-grey
    color: $dark-grey

.social a
  display: inline-block
  background-image: url(/images/social_sprite.svg)
  background-repeat: no-repeat
  background-size: 350px
  width: 50px
  height: 50px
  border-radius: 5px
  margin-right: 10px

  &:hover
    background-color: #fff

  span
    position: absolute
    display: block
    height: 0
    overflow: hidden

  &.button
    background-image: none
    width: auto
    height: auto

    &:hover
      color: $blue

a.twitter
  background-position: 0 0

  &:hover
    background-position: 0 100%

a.stack-overflow
  background-position: -50px 0

  &:hover
    background-position: -50px 100%

a.slack
  background-position: -100px 0

  &:hover
    background-position: -100px 100%

a.github
  background-position: -150px 0

  &:hover
    background-position: -150px 100%

a.mailing-list
  background-position: -200px 0

  &:hover
    background-position: -200px 100%

a.calendar
  background-position: -250px 0

  &:hover
    background-position: -250px 100%

a.youtube
  background-position: -300px 0

  &:hover
    background-position: -300px 100%

#viewDocs
  display: none

section
  background-color: white

#hero
  background-color: $dark-grey

  h5
    margin: 20px 0
    line-height: 28px

#vendorStrip
  position: relative

  ul
    float: left

  li
    display: inline-block
    height: 100%
    margin-right: 10px
    &:last-child
      margin-right: 0

  a
    display: block
    height: 100%
    color: white
    font-size: 0.75em
    font-weight: bold

  li + li
    margin-left: 0


#docs
  #hero
    &.light-text.no-sub
      padding-bottom: 0px

  #vendorStrip
    line-height: 44px
    max-width: 100%
    -webkit-overflow-scrolling: touch

    ul
      float: none
      overflow-x: auto

    #searchBox
      float: none
      display: block
      width: 80%
      margin: 0 auto
      height: 44px
      line-height: 44px
      position: relative

      &: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

    #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

  & > 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

  .yah
    & > .title
      background-color: $light-grey
      border-left: 3px solid $blue
      padding: 7.5px 10px 7.5px 18px
      margin-left: -3px
      color: $blue

.open-toc
  body
    overflow: hidden

  #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

  & > .container:first-child > .item.yah:first-child > .title:first-child
    margin-left: -20px !important

  .item
    overflow: hidden

  .title
    color: $dark-grey
    position: relative
    padding: 7.5px 10px 7.5px 18px
    cursor: pointer
    transition: 0.3s

    &:hover
      color: $blue

  a.item > .title
    color: black

    &:hover
      color: $blue

  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 $blue
      transform: rotate(0deg)
      transition: 0.3s

  .wrapper
    position: relative
    width: 100%
    transition: height 0.3s

  .content
    padding-left: 20px
    opacity: 0
    transition: 0.3s

  .item.on
    & > .title:before
      transform: rotate(90deg)

    & > .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

  &.on
    opacity: 1

  .overlay
    position: fixed
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: rgba(0, 0, 0, 0.4)

  .sled
    position: absolute
    top: 0
    width: 0
    height: 100%
    background-color: white
    overflow: auto
    transition: 0.3s

  &.on .sled
    width: 400px
    max-width: 100vw

  .top-bar
    height: 0
    line-height: 60px
    background-color: #444

  ul
    margin-top: 25px

  li
    position: relative
    display: block
    width: 100%
    min-height: 45px
    padding: 0 60px 0 20px
    border-bottom: 1px solid #cccccc

  a
    display: inline-block
    width: 100%
    height: 45px
    line-height: 45px
    font-family: "Roboto", sans-serif
    font-size: 20px
    color: $blue

  .button
    background: none
    padding: 0

  ul ul
    padding: 0 20px

    li
      min-height: 40px

    a
      height: 40px
      line-height: 40px
      font-size: 18px
      color: lighten(#222222, 20%)

.push-menu-close-button
  position: absolute
  top: 0
  right: 0
  width: 50px
  height: 50px

  &:before, &:after
    content: ""
    position: absolute
    top: calc(50% - 1px)
    left: 25%
    width: 50%
    height: 2px
    background-color: black

  &:before
    transform: rotate(45deg)

  &:after
    transform: rotate(-45deg)

#docsContent
  position: relative
  float: right
  width: 100%

  $toc-margin: 15px
  $header-clearance: $header-height + 20px

  * + h2, * + h3, * + h4, * + h5, * + h6
    margin-top: 30px

  h1, h2, h3, h4, h5, h6
    line-height: normal
    font-weight: 500
    margin-bottom: 30px
    padding-bottom: 10px

    // Make sure anchor links aren't hidden by the header
    &:before
      display: block
      content: " "
      margin-top: -$header-clearance
      height: $header-clearance
      visibility: hidden

  h1,h2
    border-bottom: 1px solid #cccccc

  h1
    font-size: 32px
    padding-right: 60px

  h2
    font-size: 28px

  h3
    font-size: 24px
    font-weight: 300
    margin-bottom: 5px

  h4
    font-size: 20px
    margin-bottom: 0px

  h5, h6
    font-size: 16px
    font-weight: 500

  p
    font-size: 16px
    font-weight: 300
    line-height: 1.75em

  p + p
    margin-top: 10px

  code
    display: inline-block
    box-sizing: border-box
    background-color: $light-grey
    color: $dark-grey
    font-family: $mono-font
    vertical-align: baseline
    font-size: 14px
    padding: 2px 4px

  a code
    color: $blue
    text-decoration: underline

  pre .pi, pre .s
    margin: 0
    padding: 0

  .highlight code span, code, pre code
    font-family: "Roboto Mono", monospace

  code, pre code
    color: #303030

  pre code
    padding: 0

  pre
    background-color: #f7f7f7
    display: block
    margin: 20px 0
    padding: 15px
    position: relative
    overflow-x: auto

  h1 code, h2 code, h3 code, h4 code, h5 code, h6 code
    font-size: inherit
    background-color: transparent

  .includecode
    table-layout: fixed

  .includecode, .includecode th, .includecode td
    padding: 0 !important

  .includecode th
    text-align: right !important
    padding: 10px !important

  .includecode th a, .includecode th a code
    color: white !important
    background-color: transparent !important

  .includecode pre
    margin: 0 !important

  ul li
    list-style: disc

  ol ul li
    list-style: disc

  ol li
    list-style: decimal

  ul, ol
    margin: 20px 0
    padding-left: 30px
    font-weight: 300

  ul ul, ol ol, ul ol, ol ul
    margin: 0.75em 0

  li
    margin-bottom: 0.75em
    font-size: 16px
    line-height: 1.75em

  table
    width: 100%
    border: 1px solid #ccc
    border-spacing: 0
    margin-top: 30px
    margin-bottom: 30px

  thead, tr:nth-child(even)
    background-color: $light-grey

  thead
    background-color: #555
    color: white

  th, td
    padding: 8px
    text-align: left
    margin: 0

  th
    font-weight: normal

  td
    font-size: 0.85em

  #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: $blue url(/images/icon-pencil.svg) no-repeat
    background-position: 12px 10px
    background-size: 29px 29px

  #markdown-toc, #TableOfContents
    margin-bottom: 20px

    ul, li
      list-style: disc
      color: $blue

    ul
      padding: 0 15px
      margin: 0

    li
      padding: 0
      line-height: 1.5em
      margin-bottom: 0

    a
      position: relative
      color: $blue
      font-weight: 700

  img
    max-width: 100%

  #TableOfContents
    & > ul > li
      list-style: none

    ul, li
      list-style: disk

  a.button
    border-radius: 2px
    text-decoration: none

    &:visited
      color: white

  a.issue
    margin-left: 0px

.gridPageHome .flyout-button
  display: none

.feedback--no
  margin-left: 1em

.feedback--prompt
  margin-bottom: 1em

.feedback--response
  margin-top: 1em

.feedback--button__disabled
  background-color: #f7f7f7
  color: graytext

.feedback--response__hidden
  display: none

.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

  #editPageButton
    display: none

  table
    border: 0
    margin-bottom: 0

  td
    padding: 0

  h1
    margin-bottom: 0
    border-bottom: 0
    padding-bottom: 0
    padding-left: 8px

// ocean nodes
$ocean-nodes-padding-Y: 60px
$ocean-nodes-main-margin-bottom: 60px
$ocean-nodes-h3-margin-bottom: 30px

// video
$video-section-height: 200px

// features
$features-h3-margin-bottom: 20px
$feature-box-div-width: 100%
$feature-box-margin-bottom: 0
$feature-box-div-margin-bottom: 40px


// Home-specific

#home
  &.flip-nav, &.open-nav
    .logo
      background-image: url(/images/nav_logo2.svg)

  #hero
    margin-bottom: 0
    padding-bottom: 1px

    .main-section
      padding: 0 10px
      margin-bottom: 30px

    #vendorStrip
      display: none

  // Add logo to CNCF section
  section#cncf
    padding-top: 60px
    padding-bottom: 140px
    background-image: url(/images/cncf-color.svg)
    background-position: center 100px
    background-repeat: no-repeat
    background-size: 300px



// OCEAN NODES
#oceanNodes
  padding-top: $ocean-nodes-padding-Y
  padding-bottom: $ocean-nodes-padding-Y

  a
    color: $blue

  .main-section
    margin-bottom: $ocean-nodes-padding-Y
    min-height: 160px

  .image-wrapper
    max-width: 75%
    margin: 0 auto 20px
    text-align: center

    img
      width: 100%
      max-width: 160px

  .main-section:first-child
    .image-wrapper
      max-width: 100%

      img
        max-width: 491px

  h3
    margin-bottom: $ocean-nodes-h3-margin-bottom


// Video thingy
#video
  height: $video-section-height

#video
  width: 100%
  position: relative
  background-position: center center
  background-size: cover


  & > .light-text
    display: none
    position: absolute
    top: 50%
    left: 75%
    width: 575px
    padding-right: 80px
    transform: translate(-50%, -50%)
    color: white

  h2
    font-size: 32px
    line-height: 44px
    margin-bottom: 20px

  p
    margin-bottom: 20px

  #desktopKCButton
    position: absolute
    font-size: 18px
    background-color: $dark-grey
    border-radius: 8px
    color: $white
    padding: 20px 10px 20px 10px

  #desktopShowVideoButton
    position: relative
    font-size: 24px
    background-color: white
    border-radius: 8px
    color: $blue
    padding: 15px 30px 15px 80px
    margin-bottom: 15px

    &:before
      content: ""
      position: absolute
      @include pureCenter(40px)
      width: 0
      height: 0
      border-style: solid
      border-width: 10px 0 10px 20px
      border-color: transparent transparent transparent $blue

  #mobileShowVideoButton
    @include pureCenter
    width: 80px
    height: 80px
    border-radius: 50%
    background-color: transparent
    border: 5px solid rgba(255, 255, 255, 0.2)
    overflow: visible

    &:after
      @include pureCenter
      left: 40px
      content: ""
      width: 0
      height: 0
      border-style: solid
      border-width: 20px 0 20px 30px
      border-color: transparent transparent transparent #ffffff

#videoPlayer
  @include fullScreen
  background-color: rgba(0, 0, 0, 0.9)
  display: none

  iframe
    @include pureCenter
    @include maintain-aspect-ratio

  #closeButton
    position: absolute
    top: 20px
    right: 20px
    width: 50px
    height: 50px
    border: 2px solid transparent
    transition: 0.3s

    &:before, &:after
      content: ""
      position: absolute
      top: calc(50% - 1px)
      left: 10%
      width: 80%
      height: 2px
      background-color: white

    &:before
      transform: rotate(45deg)

    &:after
      transform: rotate(-45deg)

    &:hover
      border-color: white

// KubeWeekly
#kubeweekly
  background-color: $light-grey
  padding-top: 60px
  padding-bottom: 140px
  background-size: auto
  font-family: "Roboto Mono", monospace !important
  font-size: 24px
  font-weight: bold

  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
#features
  padding-top: 140px
  background-color: $light-grey
  background-image: url(/images/wheel.svg)
  background-position: center 60px
  background-repeat: no-repeat
  background-size: 60px

.feature-box
  //padding: 50px 0
  width: 100%
  overflow: hidden
  clear: both

  h4
    line-height: normal
    margin-bottom: 15px

  & > div:first-child
    float: left

  & > div:last-child
    float: right

#features
  h3
    margin-bottom: $features-h3-margin-bottom

  .feature-box
    margin-bottom: $feature-box-margin-bottom

    & > div
      width: $feature-box-div-width
      margin-bottom: $feature-box-div-margin-bottom




// Community

#community, .gridPage
  &.open-nav, &.flip-nav
    .logo
      background-image: url(/images/nav_logo2.svg)

  #hero
    padding-bottom: 20px

  #mainContent
    padding: 20px 0

    .main-section
      max-width: none

    a
      color: $blue

    .content
      margin-bottom: 30px
      padding: 30px 0

      h1, h2, h3, h4, h5, h6, p
        line-height: normal
        max-width: 1200px
        padding: 0 20px
        margin: 0 auto 20px

      &:nth-child(even)
        background-color: $light-grey

    .company-logos
      text-align: center
      max-width: 1200px
      margin: 0 auto

      img
        width: auto
        margin: 10px
        background-color: $light-grey

    .partner-logos
      text-align: center
      max-width: 1200px
      margin: 0 auto

      img
        width: auto
        margin: 10px
        background-color: $white
        box-shadow: 0 5px 5px rgba(0,0,0,.24),0 0 5px rgba(0,0,0,.12)

    #calendarMeetings
      position: relative
      width: 80vw
      height: 60vw
      max-width: 1200px
      max-height: 900px
      margin: 20px auto

    #calendarEvents
      position: relative
      width: 80vw
      height: 30vw
      max-width: 1200px
      max-height: 450px
      margin: 20px auto

    iframe
      position: absolute
      border: 0
      width: 100%
      height: 100%

// Dialog
.ui-icon
  display: inline-block !important

#feature-state-dialog-link
  text-decoration: none !important
  padding: 5px !important
  a:visited
    color: #454545 !important
  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

  ul, li
    list-style: disc !important
    margin: 4px 12px !important

  p
    margin: 8px 0px !important

  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%

  $toc-margin: 15px
  $header-clearance: $header-height + 20px

  * + h2, * + h3, * + h4, * + h5, * + h6
    margin-top: 30px

  h1, h2, h3, h4, h5, h6
    line-height: normal
    font-weight: 500
    margin-bottom: 30px
    padding-bottom: 10px

    // Make sure anchor links aren't hidden by the header
    &:before
      display: block
      content: " "
      margin-top: -$header-clearance
      height: $header-clearance
      visibility: hidden

  h1,h2
    border-bottom: 1px solid #cccccc

  h1
    font-size: 32px
    padding-right: 60px

  h2
    font-size: 28px

  h3
    font-size: 24px
    font-weight: 300
    margin-bottom: 5px

  h4
    font-size: 20px
    margin-bottom: 0px

  h5, h6
    font-size: 16px
    font-weight: 500

  p
    font-size: 16px
    font-weight: 300
    line-height: 1.75em

  p + p
    margin-top: 10px

  code
    display: inline-block
    box-sizing: border-box
    background-color: $light-grey
    color: $dark-grey
    font-family: $mono-font
    vertical-align: baseline
    font-size: 14px
    font-weight: bold
    padding: 2px 4px

  a code
    color: $blue
    text-decoration: underline

  pre .pi, pre .s
    margin: 0
    padding: 0

  .highlight code span, code, pre code
    font-family: "Roboto Mono", monospace

  code, pre code
    color: #303030

  pre code
    padding: 0

  pre
    background-color: #f7f7f7
    display: block
    margin: 20px 0
    padding: 15px
    position: relative
    overflow-x: auto

  h1 code, h2 code, h3 code, h4 code, h5 code, h6 code
    font-family: inherit
    font-size: inherit
    background-color: transparent

  .includecode
    table-layout: fixed

  .includecode, .includecode th, .includecode td
    padding: 0 !important

  .includecode th
    text-align: right !important
    padding: 10px !important

  .includecode th a, .includecode th a code
    color: white !important
    background-color: transparent !important

  .includecode pre
    margin: 0 !important

  ul li
    list-style: disc

  ol li
    list-style: decimal

  ul, ol
    margin: 20px 0
    padding-left: 30px
    font-weight: 300

  ul ul, ol ol, ul ol, ol ul
    margin: 0.75em 0

  li
    margin-bottom: 0.75em
    font-size: 16px
    line-height: 1.75em

  table
    width: 100%
    border: 1px solid #ccc
    border-spacing: 0
    margin-top: 30px
    margin-bottom: 30px

  thead, tr:nth-child(even)
    background-color: $light-grey

  thead
    background-color: #555
    color: white

  th, td
    padding: 8px
    text-align: left
    margin: 0

  th
    font-weight: normal

  td
    font-size: 0.85em

  #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: $blue url(/images/icon-pencil.svg) no-repeat
    background-position: 12px 10px
    background-size: 29px 29px

  #markdown-toc
    margin-bottom: 20px

    ul, li
      list-style: disc
      color: $blue

    ul
      padding: 0 15px
      margin: 0

    li
      padding: 0
      line-height: 1.5em
      margin-bottom: 0

    a
      position: relative
      color: $blue
      font-weight: 700

  img
    max-width: 100%

  a
    //font-weight: 700
    text-decoration: underline

  //	a:visited
  //		color: blueviolet

  a.button
    border-radius: 2px
    text-decoration: none

    &:visited
      color: white

  a.issue
    margin-left: 0px

.ui-dialog-buttonpane
  background: #f7f7f7 !important

// Tabs
.ui-widget-header
  background: transparent !important
  background-color: transparent !important
  border: 0px !important

.ui-tabs
  ul, ol, 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

  ol li
    list-style: decimal !important

.ui-widget-content
  border: 0px !important

  p a
    color: $blue

  table
    margin: 0px !important

.ui-tabs .ui-tabs-panel
  border: 1px solid #ccc !important

.ui-tabs-anchor
  text-decoration: none !important

// Talk to us
#talkToUs
  h3, h4
    text-align: center

  h3
    margin-bottom: 15px

  h4
    line-height: normal
    margin-bottom: 50px

    br
      display: none

  #bigSocial
    overflow: hidden

    div
      width: 100%
      float: left
      padding: 30px
      padding-top: 110px
      background-position: center top
      background-size: auto
      background-repeat: no-repeat

    div:nth-child(1)
      background-image: url(/images/twitter_icon.png)

    div:nth-child(2)
      background-image: url(/images/github_icon.png)

    div:nth-child(3)
      background-image: url(/images/slack_icon.png)

    div:nth-child(4)
      background-image: url(/images/stackoverflow_icon.png)

    div + div
      margin-top: 20px
      margin-left: 0

    a
      display: inline-block
      color: $blue
      font-size: 24px
      font-weight: 400
      text-decoration: none
      margin-bottom: 15px

    a, p
      text-align: center
      width: 100%


#home
  #talkToUs
    .main-section
      padding: 30px 0

    h5
      font-size: 20px


  #caseStudiesWrapper
    position: relative
    text-align: center
    margin-bottom: 30px

    img
      padding-bottom: 1rem
      max-width: 100%

    div
      position: relative
      display: inline-block
      vertical-align: top
      width: 100%
      min-height: 230px
      margin-bottom: 60px
      padding-right: 1rem
      background-position: top center

    p
      font-size: 20px

    a
      position: absolute
      bottom: -30px
      left: 50%
      transform: translateX(-50%)
      color: $blue
      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

// This Sass ensures a sticky footer at the bottom
.page
  display: flex
  flex-direction: column
  min-height: 100vh

  .page-content
    flex: 1

// 404 page
.container-404
  text-align: center
  margin: 3.5rem 0

  ul li a
    font-size: 1.5rem

// GitHub info/edit buttons
#pre-footer
  margin-top: 2rem

  .button
    font-size: 1.1rem

    &:first-of-type
      margin-right: .75rem

  .lastedit
    margin-top: 1rem
    font-size: 1rem