// $documentWidth: 1200px
$headerheight: 44px

.al-container
  width: 98%
  min-width: 304px // 310 - 6 (scrollbar)
  height: 100%
  margin: 0 auto
  // @include smart
  padding: 0 1%

.al-wrapper
  min-width: 100%
  min-height: 100%
  position: absolute
  left: 0
  top: 0

.al-contentWrapper
  min-width: 100%
  min-height: 100%

.al-overlay
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  z-index: 10
  background-color: $wildblueyonder
  opacity: 0.75
  filter: alpha(opacity=75)
  display: none

.al-overlay__body
  @extend .al-overlay
  background-color: white

.al-headerWrapper
  background-image: url('../images/back.jpg')
  background-color: black
  background-repeat: no-repeat
  background-position: right top
  background-size: 100% 270px 
  background-size: 100% 100%

.al-header
  width: 100%
  height: $headerheight
  background-color: transparentize(black, 0.5)
  
  .al-headerContainer
    @extend .al-container
    // @include smart
    padding: 0
    width: 100%
    // @include tablet
    //   padding: 0
    //   width: 100%
    line-height: $headerheight
    color: white
    a
      color: white

  .al-logo
    float: left
    height: $headerheight
    a
      display: inline-block
      border: none
      height: 100%

  .al-lang
    position: relative
    float: left
    cursor: pointer
    width: 50px
    i
      position: relative
      top: 3px
      left: 0
      display: inline-block
      margin: 0
      margin-left: 10px
    a
      border-bottom: none
    ul
      line-height: $headerheight
      width: 48px
    ul li ul
      width: 48px
      position: absolute
      left: 0
      top: $headerheight
      z-index: 10
      display: none
      line-height: 24px
      box-shadow: 0px 5px 15px 0px rgba($wildblueyonder, 0.75)
    ul li:hover ul
      display: block
    ul li:hover
      background-color: $iron
      color: $monza
      a
        color: $monza
    ul li:hover ul li
      background-color: $iron
      padding-right: 10px
      width: 100%
      color: black
      a
        color: black
        &:hover
          color: $monza
    ul li:hover ul li:last-child
      padding-bottom: 10px

  .al-userArea
    float: right
    cursor: pointer
    padding: 0 3%
    &:hover
      background-color: $iron
      color: $monza
      a
        color: $monza
        border-bottom: 1px dotted rgba($monza, 0.25)
    i
      position: relative
      top: 6px
      left: 0
      margin: 0 5px
    a
      margin-right: 5px
    // @include smart
      &:hover
        background-color: $iron
        color: $monza
        a
          color: $monza
          border-bottom: 1px dotted rgba($monza, 0.25)
    // @include tablet
    //   &:hover
    //     background-color: $iron
    //     color: $monza
    //     a
    //       color: $monza
    //       border-bottom: 1px dotted rgba($monza, 0.25)
    // @include desktop all til .al-userDropMenu
    // position: relative
    // &:hover
    //   background-color: $iron
    //   color: $monza
    //   a
    //     color: $monza
    //     border-bottom: 1px dotted rgba($monza, 0.25)
    // &:hover .al-userDropMenu
    //   display: block
    .al-userDropMenu
      position: absolute
      right: 0
      min-height: 50px
      width: auto
      // @include smart min-max-width
      min-width: 320px
      max-width: 400px
      top: $headerheight
      color: black
      background-color: $iron
      box-shadow: 0px 5px 15px 0px rgba($wildblueyonder, 0.75)
      z-index: 110
      display: none
      form
        min-width: 300px
        padding-top: 10px
        padding-left: 20px
        padding-right: 10px
        table
          width: 100%
          input[type='text'], input[type='password']
            width: 100%
            height: 35px
            padding: 0 7px
            font-size: 16px
          input[type='submit']
            min-width: 50%
            height: 35px
            background-color: $wildblueyonder
            color: white
            font-size: 16px
            font-weight: bold
            position: absolute
            right: 0
            top: 8px
          a
            color: black
            border-bottom: 1px solid darken(white, 25%)
            font-size: 14px
            line-height: 1
            top: 16px
            &:hover
              color: $monza
          td
            position: relative
          td:last-child
            height: $headerheight
      .al-user__logout
        text-align: right
        input[type='submit']
          margin-bottom: 15px
          min-width: 35%
          height: 35px
          background-color: $wildblueyonder
          color: white
          font-weight: bold
      .al-userRegister
        padding: 10px 0
        margin-top: 10px
        background-color: $mystic
        text-align: center
        line-height: 1.5
        font-size: 14px
        span
          display: block
        a
          color: $monza
          font-size: 16px
          border-bottom: 1px solid rgba($monza, 0.25)
          &:hover
            color: black

.al-search
  width: 100%

  .al-searchContainer
    position: relative
    @extend .al-container
    // @include smart
    line-height: $headerheight
    height: $headerheight
    position: relative
    // @include tablet
    //   padding: 10px 0
    // @include desktop
    //   padding: 10px 0
    h1
      color: white
      margin: 10px 0
      margin-left: 10px
      font-size: 42px
      position: relative
      z-index: 2
    .al-might
      color: white
      margin: 10px 0
      margin-left: 10px
      font-size: 60px
      position: relative
      z-index: 2
    img.al-background
      position: absolute
      top: 20px
      right: -40px
      z-index: 1

.al-searchAdvertisement
  text-align: center
  text-transform: uppercase
  padding: 25px 0
  color: white
  h4
    font-size: 20px
    letter-spacing: 5px
    line-height: 1.5

.al-searchContainer__Window
  color: white
  font-size: 18px
  margin-right: 4%
  padding: 0 1%
  float: right
  cursor: pointer
  i
    position: relative
    top: 3px
    left: 0
    margin-right: 4px
    display: inline-block
  &:first-child
    margin-right: 0
  &:hover
    background-color: white
    color: $monza
    a
      color: $monza
      border-bottom: 1px dotted rgba($monza, 0.25)

.al-searchContainer__Window--search
  @extend .al-searchContainer__Window
.al-searchContainer__Window--cart
  @extend .al-searchContainer__Window
.al-searchContainer__Window--menu
  @extend .al-searchContainer__Window

.al-window
  display: none
  background-color: white
  color: black
  position: absolute
  right: 0px
  top: 0
  z-index: 100
  box-shadow: 0px 5px 10px -2px rgba($wildblueyonder, 0.75)
  min-width: 300px
  width: 100%
  max-width: 400px
  padding: 0 2%
  i
    display: inline-block
  h4
    font-size: 16px
    font-weight: bold
    padding: 5px 0

.al-tab
  display: none
  overflow: auto
.al-tab--active
  display: inherit
.al-searchMenu__TabList
  font-size: 16px
  ul
    display: inline-block
    list-style-type: none
    margin: 0
    padding: 0
    border: 1px solid $wildblueyonder
    border-radius: 2px
    background-color: white
    li
      display: inline-block
      cursor: pointer
      padding: 5px 8px

  .al-list--active
    background-color: $mystic
    border: 1px solid $wildblueyonder
    margin: -1px

.al-window__searchMenu
  @extend .al-window
  .al-searchMenu--Input
    width: 100%
    padding: 10px 0
    table
      width: 100%
      td:first-child
        width: 70%
      td:last-child
        padding-left: 10px
    input
      width: 100%
      height: 100%
      height: 30px
      font-size: 16px
    input[type="search"]
      padding-right: 0!important
    input[type="search"]:focus, input[type="password"]:focus, textarea:focus
      box-shadow: 0 0 10px $gold
      border: 3px solid $gold
      border-radius: 5px
    input[type="submit"]
      background-color: $gold
      box-sizing: border-box
  .al-searchMenu--select
    margin-bottom: 10px
    padding-bottom: 20px
    .selectize-input
      border: 1px solid black
      width: 95%

.al-window__menuMenu
  @extend .al-window
  min-width: 250px
  max-width: 260px
  span
    margin-right: 10px
  a
    display: block
    border-bottom: 1px solid $mystic
    line-height: 1
    font-size: 18px
    color: black
    position: relative
    padding: 8px
    padding-left: 10px
    &:first-child
      padding-top: 10px
    &:last-child
      border: none
      padding-bottom: 10px
    &:hover
      border-bottom: 1px solid $mystic!important
      background-color: rgba($mystic, 0.5)
    &.al-active
      font-weight: bold
      color: inherit!important
      border-bottom: 1px solid $mystic!important
      background-color: rgba($mystic, 0.5)
    i
      position: absolute
      right: 8px
      top: 40%

.al-window__cartMenu
  @extend .al-window
  .al-table__cartMenu--header
    margin-top: 2%
    margin-bottom: 4%
    table
      width: 100%
      td
        padding: 5px 10px
        &:first-child
          font-weight: bold
          width: 55%
      input
        font-size: 16px
      input[type="submit"]
        background-color: $gold
        box-sizing: border-box
        padding: 10px
  .al-table__cartMenu--bottom
    padding: 20px 0
    table
      width: 100%
      td
        padding: 5px 10px
        &:first-child
          font-weight: bold
          width: 55%
      input
        font-size: 16px
      input[type="submit"]
        background-color: $gold
        box-sizing: border-box
        padding: 10px
  .al-table__cartMenu--item
    table
      width: 100%
      td
        height: 80px
        padding: 1%
        border-top: 1px solid $mystic
        border-bottom: 1px solid $mystic
      td:last-child
        vertical-align: top
        position: relative
      img
        max-width: 80px
        max-height: 160px
  .al-cartMenu__item
    position: relative
    h5
      margin-right: 30px
      font-weight: bold
    table
      margin-top: 20px
    a
      position: absolute
      top: 0
      right: 0
  .al-table__cartMenu--info
    table
      margin-top: 20px
      td
        border: none
        height: 30px
        &:first-child
          width: 55px
        &:last-child
          font-weight: bold
          vertical-align: middle
          text-align: right
          width: 65px



.al-body
  width: 100%
  min-height: 200px
  position: relative
  background-color: white
  // @include smart
  padding-bottom: 570px
  // @include tablet
  //   padding-bottom: 230px
  // @include desktop
  // padding-bottom: 240px
  
  .al-bodyContainer
    @extend .al-container

// FOOTER
.al-footer
  width: 100%
  position: absolute
  left: 0
  bottom: 0
  background-color: lighten(black, 15%)
  color: white

.al-footerContainer
  @extend .al-container
  padding-top: 25px
  overflow: hidden
  // @include smart
  padding-left: 10px

.al-footerInfo
  float: left
  line-height: 22px
  margin: 0 5%
  padding-bottom: 20px
  // @include smart
  width: 100%
  // @include tablet
  //   max-width: 28%
  span
    display: block
    font-weight: 700
    font-size: 16px
    letter-spacing: 0.5px
    padding-bottom: 2px
  a
    border-bottom: 1px solid rgba(white, 0.25)
    color: white
    &:hover
      color: white
      border-bottom: 1px solid white!important
  i
    margin-left: -20px
    margin-right: 4px
    position: relative
    top: 1px
  i.icon-new_window
    margin-left: 4px
    margin-right: 0
  // &:nth-child(1)
    // @include desktop
    // margin-left: 10px
  // &:nth-child(2)
    // @include desktop
    // margin: 0 16%
  &:last-child
    // @include smart
    span
      margin-left: -18px
      font-weight: normal