/****************************************************************
* Variables
****************************************************************/

$navbar-color = #DA262E 
$navbar-text-color = #878785
$navbar-height = 100px
$navbar-link-color = white
$angular-gray = rgb(180, 180, 180)

$sidebar-color = #F7F7F7 
$sidebar-link-color = #404040 
$sidebar-selected-link-color = #fa5c4f

/****************************************************************
* Body / html
****************************************************************/

html, body
  height: 100%

body
  // Top navbar is fixed, so add padding to prevent content from going beneath
  padding-top: $navbar-height
  -webkit-font-smoothing: antialiased
  font-family: OpenSans !important

.fill-width
  width: 100%

/****************************************************************
* General mobile
****************************************************************/

@media (max-width: 769px)
  h1
    font-size: 28px


/****************************************************************
* Footer content area
****************************************************************/

.footer
  height: 50px
  background-color: #F0F0F0 
  line-height: 50px
  text-align: right
  padding-right: 30px
  
  p
    margin: 0

    a
      
      &.footer-link
        color: #919191

/****************************************************************
* Main content area
****************************************************************/

.main-content
  padding: 48px

@media (max-width: 769px)
  .main-content
    padding: 20px 15px

/****************************************************************
* Utility classes
****************************************************************/

// For getting sidebar to expand 100% of height
.fill
  height: 100%


/****************************************************************
* Main header navbar
****************************************************************/


.navbar-default
  font-size: 18px
  height: $navbar-height
  background-color: $navbar-color
  color: $navbar-text-color
  border-bottom: 0

  .navbar-brand
    
    img
      height: 50px
      margin-top: 10px

  a
    color: $navbar-link-color !important

    &.selected
      color: $selected-link-color !important

  .navbar-nav
    // TODO: Find a better way to center
    padding-top: 25px

    .btn-group
      padding-top: 6px
      padding-left: 15px

      .btn
        border: 1px solid white 
        background-color: $navbar-color

      a
        color: white !important
        font-size: 16px
        padding: 8px

        &.famous-link
          color: $sidebar-color !important
        


// For mobile screens using a horizontal viewport
@media (max-height: 640px)
  .navbar-default
    height: auto

  a
    &.navbar-brand
      padding: 5px 0 0 5px

      img
        margin: 0 !important

  button
    &.navbar-toggle
      margin-top: 5px !important


/****************************************************************
* Side nav
****************************************************************/

// Mobile screens
@media (max-width: 769px)
  .side-nav
    position: static !important
    padding-bottom: 20px !important

// Non-mobile screens
@media (min-width: 769px)
  .side-nav
    top: $navbar-height;
    bottom:0;
    position:fixed;
    overflow-y:scroll;
    overflow-x:hidden;

.side-nav
  background-color: $sidebar-color
  padding: 30px 0 30px 50px

  ul
    list-style: none
    padding: 0

    li
      padding-bottom: 4px  

    .api-section
      padding: 0
      font-size: 20px
      margin: 20px 0 10px 0
  
  a
    color: $sidebar-link-color

    &.selected
      color: $sidebar-selected-link-color

  .nav

    li
      
      a
        &:hover
          // Overwrite the default hover styling
          background-color: transparent


/****************************************************************
* Homepage
****************************************************************/

.home

  .introduction
    padding-top: 50px
    text-align: center
    margin-bottom: 30px

    .home-logo
      height: 200px

    @media (max-width: 769px)

      .home-logo
        height: 100%
        width: 100%

    .slogan
      font-size: 48px
      position: relative

      button
        position: relative
        top: -5px
        display: inline-block
        background-color: #FFF
        border: 2px solid $angular-gray
        border-radius: 5px
        font-size: .5em
        margin-left: 25px
        margin-bottom: 25px
        padding: 5px 20px 5px 20px
        color: $navbar-color
        

    .sub-text
      font-size: 16px

    .button-links
      padding-top: 25px

      .github
        display: inline-block

      .btn
        margin: 0 10px 10px 0
        width: 100%

      .btn-outline-inverse
        color: #DA262E  
        border: 1px solid $navbar-color 
        background-color: white


    .bubble 
      position: relative
      background-color:#F7F7F7
      margin: 0 auto;
      margin-top: 10px;
      margin-bottom: 10px;
      padding:10px
      text-align:center
      height: 90px
      width: 200px
      -moz-border-radius:10px
      -webkit-border-radius:10px
      -webkit-box-shadow: 0px 0 3px rgba(0,0,0,0.25)
      -moz-box-shadow: 0px 0 3px rgba(0,0,0,0.25)
      box-shadow: 0px 0 3px rgba(0,0,0,0.25)
    .bubble:before
      display: block
      content: ""  
      border-color: transparent transparent #F7F7F7 transparent
      border-style: solid
      border-width: 10px
      height:0
      width:0
      position:absolute
      top: -20px
      left: 90px
      

  .description
    margin-bottom: 25px

  .examples
    padding-top: 50px
    background-color: $sidebar-color

    @media (min-width: 1200px)
      .container 
        width: 1000px

    .example-block
      margin: 100px 0

      input
        margin-bottom: 20px

    .square
      background-color: $navbar-color 
      position: absolute
      /*width: 100%*/
      /*height: 100%*/


/****************************************************************
* FAQ page
****************************************************************/

.faq-page
  background-color: $sidebar-color

  @media (min-width: 1200px)
    .faq-content
      width: 800px

  .faq-content
    margin-top: 50px
    padding-bottom: 100px

    code
      background-color: transparent

    .index
      background-color: white
      padding: 10px 30px
      box-shadow: 5px 5px 5px #DDD
      margin-bottom: 50px

      ul
        list-style: none

    .answer-block
      margin-bottom: 75px

      h3
        color: #428bca
        // Create an offset for when clicking an anchor tag
        position: relative
        border-bottom: 1px solid #CECBCB
        
        span
          position: absolute
          // Negative offset determined by the navbar height
          top: -($navbar-height + 20px)

      .answer
        padding-left: 15px

        ul, ol
          padding-left: 20px

        // Hack to get inline code snippets with jekyll's higlight plugin
        .inline
          display: inline
          
          .highlight
            display: inline

            pre
              display: inline
              padding: 0
              border: 0
              
              code
                display: inline
                padding: 0


    hr
      margin: 30px 0
      border-top: 3px solid #eee


/****************************************************************
* Doc examples
****************************************************************/

.runnable-example-frame
  width: 100%
  height: 300px
  border: 1px solid #ddd
  border-radius: 5px

.runnable-example-tabs
  margin-top: 10px
  margin-bottom: 20px