// (C) Copyright Collin Doering 2013
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
// 
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
// 
// You should have received a copy of the GNU General Public License
// along with this program.  If not, see <http://www.gnu.org/licenses/>.

// File: _header.sass
// Author: Collin J. Doering <rekahsoft@gmail.com>
// Date: Dec 10, 2013
// Description: Styling for header (navigation and banner)

#logo-background
  @include background(linear-gradient(#cef, #cff), $fallback: #cef)
  padding: 0.75em 0

#logo
  background: url('/images/logo-banner.svg')
  background-repeat: no-repeat
  background-position: 50%
  background-size: contain
  height: 175px

@include keyframes(nav-slide)
  from
    background-position: 0 0
  to
    background-position: 304px 0

#nav
  border: 2px solid
  border-width: 2px 0 2px 0
  background: url('/images/diagonal-stripes.png')
  @include animation(nav-slide 5s linear infinite)
  @include animation-play-state(paused)

#nav.loading
  @include animation-play-state(running)

#nav-menu
  text-align: center
  margin-bottom: 0

  li
    display: inline-block
    margin: 0
    padding: 10px 3em

    .menuitem
      display: block
      color: #eee
      font-size: 1.5em
      font-weight: bold
      text-decoration: none
      text-shadow: 0.5px 1px black
      @include transition-property(transform)
      @include transition-duration(20ms)
    .menuitem:hover
      color: #ddd
      @include transform(scale(1.1))
    .menuitem:active
      @include transform(scale(0.95))

  li.active
    .menuitem
      color: #fff
      text-shadow: 2px 2px black
      @include transform(scale(1.2))
    .menuitem:hover
      @include transition(none)
    .menuitem:active
      @include transition(none)
      @include transform(scale(1.1))

  a.rss-icon
    display: inline-block
    position: absolute
    background: url('/images/rss-icon.png') 0 0 no-repeat
    background-size: contain
    border-radius: 5px
    min-height: 25px
    min-width: 25px
    margin: 0
    top: 7px
    right: 10px

  a.rss-icon:hover
    @include transform(scale(1.1))
  a.rss-icon:active
    @include transform(scale(0.9))

#status
  display: none
  border: 1px solid
  border-top: none
  border-bottom-right-radius: 5px
  border-bottom-left-radius: 5px
  background-color: rgb(146, 208, 240)
  box-shadow: 2px 5px 5px 2px #888888
  padding: 8px
  margin-bottom: 1.25em

  p.message
    display: inline-block
    text-align: center
    margin-bottom: 0

  a.close-button
    display: inline-block
    position: absolute
    right: 10px
    height: 25px

#status.error
  background-color: #FD6F6F

#status.success
  background-color: rgb(136, 211, 136)