@import "_extend"
@import "_variables"
@import "style"

#album-container
  width img-max-width + 20px
  margin 0 auto
  h1
    margin-top: 90px
    border-left: 15px solid #378
    padding: 8px 0
    background: #f0f0f0
    text-align: center
    font: 50px album-font-family
    text-shadow: 2px 2px 3px #888

.img-wrapper-selected
  background url(selected-url) center no-repeat
  background-size 256px

.img-item
  z-index 2
  position relative
  width container-width
  margin 40px auto
  transition border .1s
  &:hover
    border-left: 10px solid #abc;
    border-right: 10px solid #cba;
  a
    &:hover
      text-decoration none
      color #7DA1BC
  img
    max-width img-max-width
    display block
    margin auto
    border 1px solid #e0e0e0
    padding 20px
    background rgba(255,255,255,0.5)
    box-shadow 1px 1px 2px rgba(0,0,0,0.2)
    transition opacity 0.3s ease-in-out

  table
    font-family album-font-family
    font-size 1em
    th
      margin-right 20px
      padding 15px 10px 3px 30px
      color #aaa
      text-align right
    td
      border-bottom 1px solid #222
      padding 15px 30px 3px 10px
      color #fff

.img-meta
  a
    display none
    position absolute
    left 30px
    bottom 30px
    z-index 100
  span
    z-index 100
    font-size 1.5em
    color #333

.img-metabg
  position absolute
  left 20px
  bottom 20px
  z-index 10
  height 0
  overflow hidden
  background #000
  opacity 0.7
  transition .2s

.img-metabg-open
  height 270px !important
  padding 30px 0

#img-nav-board
  position fixed
  left 60px
  top 370px
  height 70px
  width 70px
  border-radius 5px
  border-top 6px solid rgba(83, 169, 255, 0.8)
  border-right 6px solid rgba(255, 217, 0, 0.8)
  border-bottom 6px solid rgba(255, 118, 6, 0.8)
  border-left 6px solid rgba(61, 255, 132, 0.80)
  padding-top 26px
  font-size 50px
  font-weight bold
  text-align center
  line-height 0.5
  background #fff
  transition all 0.2s ease-out
  &:hover
    border-width 3px

#img-nav-pn
  position fixed
  left 66px
  top 375px
  z-index 50
  font-size 18px

$img-nav-pagination
  position fixed
  top 370px
  z-index 100
  width 0
  height 70px
  border 20px solid transparent

$img-nav-pagination2
  position fixed
  left 60px
  z-index 100
  width 70px
  height 0
  border 20px solid transparent

/*#img-nav-pre
  @extends $img-nav-pagination
  left 65px
  border-left-color rgba(61,255,132,0.8)
  margin-left -4px

#img-nav-next
  @extends $img-nav-pagination
  left 88px
  border-right-color rgba(255,217,0,0.8)
  margin-right -4px*/
#img-nav
  .nav
    cursor pointer

#img-nav-pre
  @extends $img-nav-pagination2
  top 375px
  border-top-color rgba(83, 169, 255, 0.5)
  margin-top -4px

#img-nav-next
  @extends $img-nav-pagination2
  top 399px
  border-bottom-color rgba(255, 118, 6, 0.5)
  margin-bottom -4px

.img-opr
  display none
  position absolute
  right 30px
  bottom 30px

#jump-to-item
  input
    width 180px
    font-size 0.8em