// Themme Curve
// ===========================================================================

// mixin
bottom-space($size = 10px)
    margin-bottom: $size
    // All Mobile Sizes (devices and browser)
    @media only screen and (max-width: $breakpoint-small-max)
        margin-bottom: 0


hook-root($stage = '')

    if $stage == 'base'
        html
            $color = $var-base-color
            $hue = hue($color)
            $color= hue(#3465A4, $hue)
            //background: none
            //background: linear-gradient(top, $color 0, #eeeeec 400px, #eeeeec 100%)
            //background: linear-gradient(top, $color 0, #eeeeec 1000px)
            background: linear-gradient(top, #3465A4 0, #eeeeec 390px)

    if $stage == 'block_contents'

        #container
            bottom-space()
            @media only screen and (min-width: $breakpoint-medium) and (max-width: $breakpoint-medium-max)
                margin: 5px
            box-shadow: 2px 2px 10px #ccc
            box-shadow: 0 0 8px 1px #333
            @media only screen and (max-width: $breakpoint-small-max)
                margin: 5px
                build-border("$container")

        #header
            bottom-space(12px)

        #navigation
            text-shadow: 0 1px 0 #FFF
            background: #dbddd9 url(../images/css/menu_bg.png) repeat-x 0 0
            border: 1px solid #939490
            margin: auto
            bottom-space(12px)
            //width: 95%
            border-radius: 8px
            box-shadow: 0px 0px 2px 1px #aaa
            li a
                border-right: 1px dotted #939490
            li:first-child a
                border-left: 1px dotted #939490
            .uk-navbar
                background: none
            .uk-navbar-nav
                margin: 0 1em

            .uk-navbar-nav > li > a,
            .uk-navbar-nav > li > a:link,
            .uk-navbar-nav > li > a:visited
                text-decoration: none
                text-shadow: none
                color: #2E3436

            .uk-navbar-nav > li:hover > a,
            .uk-navbar-nav > li > a:focus,
            .uk-navbar-nav > li.uk-open > a,
            .uk-navbar-nav > li > a:active,
            .uk-navbar-nav > li.uk-active > a
                box-shadow: none
                border-top-color: #939490
                background: #ededeb url(../images/css/menu_bg_active.png) repeat-x 0 0

        .navigation_content
            width: 100%


        #wrapper
            padding: 0px $wrapper-padding 30px
            //background-color: #F7F8EC
            bottom-space()

        #footer
            width: auto
            padding: 12px
            border: 1px solid #656663
            background: #ededeb
            color: #223
            border-radius: 8px
            // All Mobile Sizes
            @media only screen and (max-width: $breakpoint-small-max)
                border: none
                border-radius: 0
                color: #999
                background-color: $mobile-footer-background
                a:link,
                a:visited,
                a:active
                    color: #999
                    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)


    if $stage == 'main_contents'

        .storytext
            //padding: 15px
            //border: 1px solid #e7e7e7
            //background-color: white

        .story_status
            margin: 0 0 15px 50px
            padding-top: 5px

        .story_image
            float: left
            margin: -60px 10px 10px 0


hook-selector($stage = '', $selector = '')

    if $stage == 'layout_3cols_LRbar'

        if $selector == '#navigation'
            width: (@width - 20px)

    if $stage == 'layout_2cols_Rbar_fixed'

        if $selector == '#navigation'
            width: (@width - 2px)

        if $selector == '.navigation_content'
            width: (@width - 2px)
