
$stage = 'block_contents'

/*!--------------------------------------
  Container
--------------------------------------*/

#container
    background-color: $container-background
    margin-top: $container-margin-top
    margin-bottom: $container-margin-bottom
    padding: $container-padding
    build-border("$container")
    @media only screen and (max-width: $breakpoint-small-max)
        margin-top: 0
        margin-bottom: 0
        padding: 0
        border: none
    hook-selector($stage, "" + selector())

#wrapper
    /* Adjust floating element */
    overflow: visible;
    background-color: $wrapper-background
    padding: 30px $wrapper-padding
    build-border("$wrapper")
    @media only screen and (max-width: $breakpoint-small-max)
        padding: 0;
        border: none
    hook-selector($stage, "" + selector())

/*!--------------------------------------
  Header Content
--------------------------------------*/

$header_texture ?= "../images/texture.jpg"
$texture-height = img-height("../../../" + $header_texture)
$texture-width  = img-width( "../../../" + $header_texture)

$header-height-mobile = 80px

// Brand (Site Name) style : text

if 55px > $header-height
    $header-height = 55px

#header.brand-text
    padding: $header-padding
    build-border("$header")
    @media only screen and (max-width: $breakpoint-small-max)
        padding: 0
        border: none

    if $var-header-style == 'normal'
        if $var-uikit-theme == 'default'
            background-color: $header-background
        if $var-uikit-theme == 'gradient'
            background: linear-gradient(top, $header-background-dark, 50% $header-background, 90% $header-background, $header-background-dark)
        if $var-uikit-theme == 'almost-flat'
            background-color: $header-background

        height: $header-height
        // All Mobile Sizes
        @media only screen and (max-width: $breakpoint-small-max)
            //background-size: 256px auto
            height: $header-height-mobile
            margin-top: 0

    if $var-header-style == 'texture'
        position: relative
        background-color: $header-background
        background-image: url($header_texture)
        background-position: center
        background-repeat: repeat-x
        height: $header-height
        &:before
            position: absolute
            content: ""
            height: $header-height
            //background: linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.2) 100%)
            background: linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.4) 100%)
            top: 0px
        // All Mobile Sizes
        @media only screen and (max-width: $breakpoint-small-max)
            background-size: ($texture-width / 2) auto
            height: $header-height-mobile
            margin-top: 0
            &:before
                height: $header-height-mobile

    hook-selector($stage, "" + selector())

/*! Site Name */
.brand-text .site_name
    position: relative
    float: left
    font-size: 30px
    font-weight: bold
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.5)
    line-height: @font-size + 6px
    margin: (($header-height - @line-height) / 2) 0 0 20px
    padding: 0
    a:link,
    a:visited,
    a:hover
        color: #EEEEEE
        text-decoration: none
    // All Mobile Sizes
    @media only screen and (max-width: $breakpoint-small-max)
        float: none
        font-size: 1.6em
        height: 50px
        line-height: 50px
        margin: 0 auto
        text-align: center

    hook-selector($stage, "" + selector())

/*! Slogan */
.brand-text .site_slogan
    position: relative
    margin: 0
    padding: 16px 16px 0 16px
    float: right
    color: #FFF
    text-align: right
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
    // All Mobile Sizes
    @media only screen and (max-width: $breakpoint-small-max)
        font-size: 75%
        float: none
        margin: 0 auto
        padding: 0
        text-align: center
        line-height: 1.2em

    hook-selector($stage, "" + selector())

.brand-text .nameplate
    @media only screen and (max-width: $breakpoint-small-max)
        float: none
        height: 100%  
        margin: 0 auto
        max-width: 230px
        text-align: center

    hook-selector($stage, "" + selector())

// Brand (Site Name) style : logo image

$denim_logo ?= "../images/logo2.png"
$logo-height = img-height("../../../" + $denim_logo)
$logo-width  = img-width( "../../../" + $denim_logo)

$logo-top = 20px
if ($logo-height + $logo-top * 2) > $header-height
    $header-height = $logo-height + $logo-top * 2
else
    $logo-top = ($header-height - $logo-height) / 2

#header.brand-image
    padding: $header-padding
    build-border("$header")
    @media only screen and (max-width: $breakpoint-small-max)
        padding: 0
        border: none

    if $var-header-style == 'normal'
        if $var-uikit-theme == 'default'
            background-color: $header-background
        if $var-uikit-theme == 'gradient'
            background: linear-gradient(top, $header-background-dark, 50% $header-background, 90% $header-background, $header-background-dark)
        if $var-uikit-theme == 'almost-flat'
            background-color: $header-background

        height: $header-height
        // All Mobile Sizes
        @media only screen and (max-width: $breakpoint-small-max)
            //background-size: 256px auto
            height: $header-height-mobile
            margin-top: 0

    if $var-header-style == 'texture'
        position: relative
        background-color: $header-background
        background-image: url($header_texture)
        background-position: center
        background-repeat: repeat-x
        height: $header-height
        &:before
            position: absolute
            content: ""
            height: $header-height
            //background: linear-gradient(top, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 60%, rgba(0, 0, 0, 0.2) 100%)
            background: linear-gradient(top, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.4) 100%)
            top: 0px
        // All Mobile Sizes
        @media only screen and (max-width: $breakpoint-small-max)
            background-size: ($texture-width / 2) auto
            height: $header-height-mobile
            margin-top: 0
            &:before
                height: $header-height-mobile

    hook-selector($stage, "" + selector())

/*! Site Name */
.brand-image .site_name
    position: relative
    //margin: 12px 0 0 16px
    margin: $logo-top 0 0 16px
    padding: 0
    float: left
    width: $logo-width
    height: $logo-height
    a
        background: url($denim_logo) 0 0 no-repeat
        text-indent: -3000px
        display: block
        width: 100%
        height: 100%
    // All Mobile Sizes
    @media only screen and (max-width: $breakpoint-small-max)
        $height = 55px
        $vmargin = 10px
        $percentage = ($height - ($vmargin * 2)) / $logo-height
        $h = $height - ($vmargin * 2)
        $w = $logo-width * $percentage
        margin: 0 auto
        padding: $vmargin 0
        float: none
        width: $w
        height: $h
        a
            background-size: $w auto

    hook-selector($stage, "" + selector())

/*! Slogan */
.brand-image .site_slogan
    position: relative
    margin: 0
    padding: 16px 16px 0 16px
    float: right
    color: #FFF
    text-align: right
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
    // All Mobile Sizes
    @media only screen and (max-width: $breakpoint-small-max)
        font-size: 75%
        float: none
        margin: 0 auto
        padding: 0
        text-align: center
        line-height: 1.2em

    hook-selector($stage, "" + selector())

.brand-image .nameplate
    @media only screen and (max-width: $breakpoint-small-max)
        float: none
        height: 100%  
        margin: 0 auto
        max-width: 230px
        text-align: center

    hook-selector($stage, "" + selector())

/*!--------------------------------------
  Global Navigation Content
--------------------------------------*/

// variables
$bg = $navigation-background // #E7E7E7
$navigation-border-top        = lighten($bg, 28%) // $EEE
$navigation-border-bottom     = darken($bg, 14%)  // #C7C7C7
$navigation-border-right      = darken($bg, 7%)   // #D7D7D7
$navigation-background-active = darken($bg, 3.5%) // #DFDFDF

/*! Navigation Menu List */
first-child-border-left(mode, bl) // mixin
    if mode == 1
        border-left: 1px solid bl

#navigation
    padding: $navigation-padding
    @media only screen and (max-width: $breakpoint-small-max)
        padding: 0

    if $var-global-navigation-style == 'normal'
        //background: $navigation-background
        //border-top:    1px solid $navigation-border-top
        //border-bottom: 1px solid $navigation-border-bottom
        //box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
        text-align: left
        text-shadow: 0 1px 0 #FFF
        color: #444

        if $var-uikit-theme == 'default'
            background-color: #EEE
            border-top: 1px solid #EEE
            border-bottom: 1px solid #EEE
        if $var-uikit-theme == 'gradient'
            background-color: #EEE
            background-image: linear-gradient(to bottom, #FFF, #EEE)
            background-origin: border-box
            border-top: 1px solid rgba(0, 0, 0, 0.1)
            border-bottom: 1px solid rgba(0, 0, 0, 0.3)
        if $var-uikit-theme == 'almost-flat'
            background-color: #f5f5f5
            border-top: 1px solid rgba(0, 0, 0, 0.1)
            border-bottom: 1px solid rgba(0, 0, 0, 0.1)

        .uk-navbar
            border: none

        .gl-navbar-small
            .uk-navbar-nav > li > a // UIkit modifier
                height: 31px
                font-size: 13px
                line-height: 30px
                padding: 0 10px

    if $var-global-navigation-style == 'frame'
        build-border("$navigation")
        @media only screen and (max-width: $breakpoint-small-max)
            border: none

        background: $navigation-background
        //border-top:    1px solid $navigation-border-top
        //border-bottom: 1px solid $navigation-border-bottom
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
        text-align: left
        text-shadow: 0 1px 0 #FFF
        ul
            list-style: none
            margin: 0
            padding: 0
            font-weight: bold
        li
            float: left
            margin: 0
            padding: 0
            a
                font-size: 13px
                display: block
                line-height: 30px
                margin: 0
                padding: 0 7px
                border-right: 1px solid $navigation-border-right
            &:first-child a
                first-child-border-left($var-style-mode, $navigation-border-right)

    hook-selector($stage, "" + selector())

#header-content
    if $var-global-navigation-style == 'normal'
        > .uk-navbar-toggle
            height: 80px // same height with #header
    hook-selector($stage, "" + selector())

if $var-global-navigation-style == 'normal'
    #header-search
        padding: 5px

    .gl-navbar-small #header-search
        padding: 2.5px

    .gl-navbar-small #header-search-box
        font-size: 12px;
        height: 25px;
        padding: 3px;

/*!--------------------------------------
  Center Block Content
--------------------------------------*/

#centerblocks
    //line-height: 1.5em
    hook-selector($stage, "" + selector())

/*! Welcome Message */
.welcome_msg
    margin: 0.5em 0 1.5em
    padding: 0.5em 0
    border-bottom: 1px solid $center-separator-color
    color: #888

/*! Block */
#centerblocks section.block-center,
#centerblocks div.block-center
    margin: 0 0 1em 0
    padding: 0 0 2em 0
    border-bottom: 1px solid #CCC

/*!--------------------------------------
  Footer Content
--------------------------------------*/

#footer
    border-top: 1px solid #CCC
    build-border("$footer")
    @media only screen and (max-width: $breakpoint-small-max)
        border: none

    font-size: 12px
    color: #666
    background-color: $footer-background
    a:link,
    a:visited,
    a:active
        color: #666
        text-decoration: none
    a:hover
        color: $base-anker-color
        text-decoration: underline
    // All Mobile Sizes
    @media only screen and (max-width: $breakpoint-small-max)
        border: none
        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)
    hook-selector($stage, "" + selector())

#footer-content
    text-align: center
    // All Mobile Sizes
    @media only screen and (max-width: $breakpoint-small-max)
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)

/*!--------------------------------------
  Common Block Style
--------------------------------------*/

$mobile-list-type ?= 'flat' // 'iphone_like' or 'flat'

#leftblocks,
#rightblocks
    p,
    ul,
    ol,
    dl,
    blockquote,
    pre,
    address,
    fieldset,
    figure
        margin: 0 0 9px 0
    * + p,
    * + ul,
    * + ol,
    * + dl,
    * + blockquote,
    * + pre,
    * + address,
    * + fieldset,
    * + figure
        margin-top: 9px
    p
        line-height: 1.25
    ul
        list-style-position: inside
        padding-left: 0.5em
    ol
        list-style-position: inside
        padding-left: 0.9em
    li
        margin: 0 0 0.25em 0
        padding: 0
    input
        font-size: 95%
        margin-left: 0
        margin-right: 0

    /*--------------------------------------
      Admin Option
      Topic Menu
      User Menu
    --------------------------------------*/

    /* Menu Enabled */
    .sideoption
        list-style: none outside
        color: #999
        margin: 0
        padding: 0
        a
            display: block
            color: #222
            height: 1.8em
            line-height: 1.8em
            overflow: hidden
            padding: 0 5px
            white-space: nowrap
            text-decoration: none
            &:hover
                background-color: #F1F1F1
        span
            color: #999
            text-decoration: none
            margin-left: 3px

    /* Menu Disabled */
    .sideoption_off
        list-style: none outside
        color: #999
        display: block
        height: 1.8em
        line-height: 1.8em
        overflow: hidden
        margin: 0
        padding: 0 5px
        white-space: nowrap
        span
            color: #999
            text-decoration: none
            margin-left: 3px

    /* Group Label */
    .sideoption_group_label
        color: #630
        font-size: 103%
        font-weight: bold
        height: 1.6em
        line-height: 1.6em
        overflow: hidden
        margin: 0
        padding: 0 5px
        white-space: nowrap
        border-bottom: 1px dotted #ccc
    .noliststyle
        padding-left: 0
    .branch_level2 a
        padding-left: 15px
    .branch_level3 a
        padding-left: 25px
    .branch_level4 a
        padding-left: 35px
    .sideoption_off.branch_level2
        padding-left: 15px
    .sideoption_off.branch_level3
        padding-left: 25px
    .sideoption_off.branch_level4
        padding-left: 35px

    /* Block Heading */
    $mv = 9px
    h1, h2, h3, h4, h5, h6
        margin: 0 0 $mv 0
    * +
        h1, h2, h3, h4, h5, h6
            margin-top: $mv
    h1
        font-size: 17px
        line-height: @font-size + 6px
    h2
        font-size: 16px
        line-height: @font-size + 6px
    h3
        font-size: 15px
        line-height: @font-size + 6px
    h4
        font-size: 14px
        line-height: @font-size + 6px
    h5
        font-size: 13px
        line-height: @font-size + 6px
    h6
        font-size: 12px
        line-height: @font-size + 6px

    // All Mobile Sizes
    @media only screen and (max-width: $breakpoint-small-max)

        if $mobile-list-type == 'iphone_like'
            background: $mobile-blocks-background //#E7E7E7

        if $mobile-list-type == 'flat'
            nav > ul,
            nav > ol
                margin: 0
            p
                line-height: 1.625
            .sideoption_group_label
                color: #630
                font-size: 103%
                font-weight: bold
                height: 1.6em
                line-height: 1.6em
                overflow: hidden
                margin: 0
                padding: 0 5px
                white-space: nowrap
                border-top: 1px solid #e7e7e7
                border-bottom: 1px solid #e7e7e7

        input
            font-size: 16px
        input[type="submit"]
            font-size: 14px

        .sideoption a,
        .sideoption a:hover,
        .sideoption_off
            color: #222
            display: block
            font-size: 16px
            text-decoration: none

            if $mobile-list-type == 'iphone_like'
                background: url(../images/arrow-right.png) no-repeat #F7F7F7
                background-size: 24px auto
                background-position: right 50%
                border: 1px solid #CACACA
                font-weight: bold
                margin-bottom: -1px
                padding: 4px 10px
                box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)

            if $mobile-list-type == 'flat'
                padding: 10px 15px

        .sideoption_off
            color: #999

        // Block Heading
        $mv = 15px
        h1, h2, h3, h4, h5, h6
            margin: 0 0 $mv 0
        * +
            h1, h2, h3, h4, h5, h6
                margin-top: $mv
        h1
            font-size: 22px
            line-height: @font-size + 6px
        h2
            font-size: 20px
            line-height: @font-size + 6px
        h3
            font-size: 18px
            line-height: @font-size + 6px
        h4
            font-size: 16px
            line-height: @font-size + 6px
        h5
            font-size: 14px
            line-height: @font-size + 6px
        h6
            font-size: 12px
            line-height: @font-size + 6px

#leftblocks
    hook-selector($stage, "" + selector())

#rightblocks
    hook-selector($stage, "" + selector())

#loginform-loginname,
#loginform-passwd
    width: 75%

/*! Help Icon */
h1 img,
h2 img,
h3 img,
h4 img
    vertical-align: middle

/*!--------------------------------------
  System Message Block
--------------------------------------*/

.block-message
    // variables
    $rd = $msgbox-border-radius
    $bd = $msgbox-border-size

    margin: 1.5em 0
    padding: 0
    border-radius: $rd
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1)
    dl
        margin: 0
        padding: 0

    // Title
    dt
        margin: 0
        padding: 4px 8px
        background: $msgbox-title-background // #3E6C9A
        color: $msgbox-title-color // #EEEEEC
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)
        font-weight: bold
        border: $bd solid rgba(0, 0, 0, 0.2)
        border-radius: $rd $rd 0px 0px

    // Message
    dd
        margin: 0
        padding: 8px 12px
        background: $msgbox-message-background // #EEE
        color: $msgbox-message-color // #404040
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5)
        border: $bd solid rgba(0, 0, 0, 0.2)
        //border-top: 2px
        border-radius: 0px 0px $rd $rd
    p
        margin: 0.2em 0
        line-height: 1.25

    hook-selector($stage, "" + selector())

/*!--------------------------------------
  Left Block and Right Block
--------------------------------------*/

/*! Block */
.block-left,
.block-right,
.block-list
    margin: 0 8px 0.5em 8px
    padding: 8px 0
    font-size: 13px
    // All Mobile Sizes
    @media only screen and (max-width: $breakpoint-small-max)
        font-size: 100%
        margin: 0 10px
        padding: 0


/*! Block Title */
#leftblocks .block-title,
#rightblocks .block-title
    margin: 0 0 0.5em 0
    padding: 0 0 0.1em 0
    border-bottom: 1px solid #CCC
    font-size: 14px
    font-weight: bold
    line-height: 20px

/*!--------------------------------------
  Search Form
--------------------------------------*/

#searchform
    fieldset
        margin-top: 15px
        padding: 0px
    a
        line-height: 1.5em
    // All Mobile Sizes
    @media only screen and (max-width: $breakpoint-small-max)
        fieldset
            margin-top: 10px
            margin-bottom: 10px
            padding: 0px
            text-align: center
        .searchform
            text-align: center

.searchform
    line-height: 2.2em
    margin-bottom: 0.3em

input[type="text"].search
    background: url(../images/search.png) left center no-repeat #FFF
    padding-left: 24px
    width: 120px
    color: #999

/*!--------------------------------------
  Login Form
--------------------------------------*/

/*! authentication buttons */
login_form(pos) // mixin
    left: 0px
    width: 141px
    background: url('/images/oauth-login-with-sprite.png') no-repeat
    background-position: 0 pos

#login
    &_facebook
        login_form(0)
    &_twitter
        login_form(-23px)
    &_linkedin
        login_form(-44px)
    &_google
        login_form(-66px)
    &_yahoo
        login_form(-88px)
    &_microsoft
        login_form(-110px)
    &_github
        login_form(-132px)
    &_openid
        login_form(-154px)

#loginform
    fieldset
        margin-top: 15px
        padding: 0px
    .submit
        margin-bottom: 0.3em
    a
        line-height: 1.5em

.form_part
    margin-bottom: 0.3em
    label
        display: block
        line-height: 1.2em
        margin-bottom: 0.3em

/*! Third party login */
form.third-party-login
    margin: 0.1em 0
    div
        position: relative
        img
            position: absolute
            left: 6px
            top: 6px
        input
            box-sizing: border-box
            &.submit
                text-indent: 24px
                font-size: 12px
                height: 28px

div.third-party-login
    width: 164px

/*! All Mobile Sizes (devices and browser) */
@media only screen and (max-width: $breakpoint-small-max)

    /*--------------------------------------
      Global Navigation Content
    --------------------------------------*/

    #navigation_ul
        display: none

    /*--------------------------------------
      Left And Right Block
    --------------------------------------*/

    $hue = hue($mobile-block-title-background)

    #leftblocks .block-title,
    #rightblocks .block-title,
    #block-left-search > h2
        background: $mobile-block-title-background
        color: #EEEEEC
        font-weight: bold
        padding: 8px 5px
        text-align: left
        font-size: 16px
        margin-left: -10px
        margin-right: -10px
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)

        if $mobile-list-type == 'iphone_like'
            border-top: 1px solid hue(#6F99C7, $hue)
            border-bottom: 1px solid hue(#1F364F, $hue)

        if $mobile-list-type == 'flat'
            border: none

    h2.show,
    #block-left-search > h2.show
        background: url(../images/arrow-down.png) no-repeat $mobile-block-title-background
        background-size: 36px auto
        background-position: right 50%

    h2.hide,
    #block-left-search > h2.hide
        background: url(../images/arrow-up.png) no-repeat $mobile-block-title-background
        background-size: 36px auto
        background-position: right 50%

    #leftblocks .block-title,
    #rightblocks .block-title
        margin-top: 0
        margin-bottom: 0

    #block-left-search > h2
        margin-top: 0
        margin-bottom: 0

    #search-configuration-container label
        margin: 0 0 0.5em 0
        padding: 0 0 0.1em 0
        display: block
        border-bottom: 1px solid #CCC
        background: $mobile-block-title-background
        color: #EEEEEC
        font-weight: bold
        padding: 8px 5px
        text-align: left
        font-size: 16px
        margin-left: -10px
        margin-right: -10px
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3)

    #search-configuration
        font-size: 16px

    .block-left-content,
    .block-right-content,
    .block-list-content
        padding: 10px 0
        text-shadow: 0 1px 0 #FFF

    #block-left-search > .block-left-content
        padding: 10px
        margin: 0px
        if $mobile-list-type == 'iphone_like'
            background: $mobile-blocks-background // #E7E7E7

    .noliststyle
        list-style: none
        padding: 0px
        margin: 0px

    if $mobile-list-type == 'iphone_like'
        .sideoption:first-child a,
        .sideoption_off:first-child
            -webkit-border-top-left-radius: 8px
            -webkit-border-top-right-radius: 8px

        .sideoption:last-child a,
        .sideoption_off:last-child
            -webkit-border-bottom-left-radius: 8px
            -webkit-border-bottom-right-radius: 8px

    if $mobile-list-type == 'flat'
        .block-list-content
            margin-left: -10px
            margin-right: -10px
            padding: 0
            li
                border-bottom: 1px solid #e7e7e7
                &:last-child
                    border-bottom: none


hook-root($stage)
