/*! 2 Columns center-right */
/*!==============================================================================
  Layout Pattern:
    * 3 Column ( Left Block * Center Block * Right Block )...left-center-right
    * 2 Column ( Left Block * Center Block )              ...left-center
    * 2 Column ( Center Block * Right Block )             ...center-right
    * 1 Column ( Center Block )                           ...center

  Block Width:
    * Container Width = 100%
    * Site Width[W]         = 960px
    * Left   Block Width[L] = 280px
    * Right  Block Width[R] = 280px
    * Center Block Width( 3 Column ) = [W] - [L] - [R] = 600px = 580px + left padding 10px + right padding 10px
    * Center Block Width( 2 Column ) = [W] - [L]       = 780px = 760px + left padding 10px + right padding 10px
    * Center Block Width( 2 Column ) = [W] - [R]       = 780px = 760px + left padding 10px + right padding 10px
    * Center Block Width( 1 Column ) = [W]             = 960px
==============================================================================*/

// Variables
// ===========================================================================

$stage = 'layout_2cols_Rbar_fixed'

// $var-style-mode = 1  width is container-width (100%)
// $var-style-mode = 2  width is site-width
//
$var-style-mode ?= 1
$var-flip-horizontal ?= false

$left  = ($var-flip-horizontal == false) ? left  : right
$right = ($var-flip-horizontal == false) ? right : left

$layout-site-width        ?= 960px
$layout-site-max-width    ?= none
$layout-left-block-width  ?= 280px
$layout-right-block-width ?= 280px
$layout-side-padding      ?= 10px

$header-padding         ?= 0
$header-border-size     ?= 0

$navigation-padding     ?= 0
$navigation-border-size ?= 0

$wrapper-padding        ?= 0
$wrapper-border-size    ?= 0

$footer-padding         ?= 0
$footer-border-size     ?= 0

// ---------------------------------------------------------------------------

if $var-style-mode == 1

    $layout-site-inner-width = $layout-site-width - ($container-padding * 2) - ($container-border-size * 2)

    // container
    $layout-container-width =           100%

    // header
    $layout-header-width =              $layout-container-width
    $layout-header-inner-width =        auto

    $layout-header-content-width =      $layout-header-inner-width

    $layout-navigation-width =          $layout-container-width
    $layout-navigation-inner-width =    auto

    $layout-navigation-content-width =  $layout-site-inner-width - (16px - $navigation-border-size * 2)

    $layout-wrapper-width =             $layout-site-inner-width
    $layout-wrapper-inner-width =       $layout-wrapper-width - ($wrapper-padding * 2) - ($wrapper-border-size * 2)

    $layout-centerblocks-width =        auto

    $layout-footer-width =              $layout-container-width
    $layout-footer-inner-width =        auto

    $layout-footer-content-width =      $layout-footer-inner-width

// ---------------------------------------------------------------------------

if $var-style-mode == 2

    $layout-site-inner-width = $layout-site-width - ($container-padding * 2) - ($container-border-size * 2)

    // container
    $layout-container-width =           $layout-site-inner-width

    // header
    $layout-header-width =              $layout-container-width
    $layout-header-inner-width =        $layout-header-width - ($header-padding * 2) - ($header-border-size * 2)

    $layout-header-content-width =      $layout-header-inner-width

    $layout-navigation-width =          $layout-container-width
    $layout-navigation-inner-width =    $layout-navigation-width - ($navigation-padding * 2) - ($navigation-border-size * 2)

    $layout-navigation-content-width =  $layout-site-inner-width

    $layout-wrapper-width =             $layout-site-inner-width
    $layout-wrapper-inner-width =       $layout-wrapper-width - ($wrapper-padding * 2) - ($wrapper-border-size * 2)

    $layout-centerblocks-width =        auto

    $layout-footer-width =              $layout-container-width
    $layout-footer-inner-width =        $layout-footer-width - ($footer-padding * 2) - ($footer-border-size * 2)

    $layout-footer-content-width =      $layout-footer-inner-width

/*!--------------------------------------
  Container
  Include All Block Level Element
  (#header, #navigation, #wrapper, #footer)
--------------------------------------*/

#container
    position: relative
    width: $layout-container-width
    layout-align-center()

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

#header
    width: $layout-header-inner-width
    layout-align-center()
    height: 80px
    &:before
        width: $layout-header-inner-width

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

#header-content
    width: $layout-header-content-width
    layout-site-max-width($layout-site-max-width)
    layout-align-center()
    padding: 0
    hook-selector($stage, "" + selector())

/*!--------------------------------------
  Global Navigation Container
--------------------------------------*/

#navigation
    width: $layout-navigation-inner-width
    layout-align-center()
    &:after
        layout-clearfix()
        margin-bottom: -1px

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

.navigation_content
    width: $layout-navigation-content-width
    layout-site-max-width($layout-site-max-width)
    layout-align-center()

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

/*!--------------------------------------
  Wrapper
  Include contents Block level elements
  (#leftblocks, #centerblocks, #rightblocks)
--------------------------------------*/

#wrapper
    width: $layout-wrapper-inner-width
    layout-site-max-width($layout-site-max-width)
    layout-align-center()
    &:after
        layout-clearfix()

/*!--------------------------------------
  Left Block Container
  display if Left Block is appeared.
--------------------------------------*/

#leftblocks,
body.js_off #leftblocks
    overflow: visible
    float: $right // LTR
    width: $layout-left-block-width
    margin: 0
    padding: 0

/*!--------------------------------------
  Center Block Container
--------------------------------------*/

#centerblocks
    overflow: visible
    //float: $left // LTR
    float: none
    width: $layout-centerblocks-width

body.js_off #centerblocks
    width: 100%
    margin: 0
    padding: 0

/*! 3 Column ( left-center-right ) */
body.left-center-right #main-content,
body.js_off #main-content
    float: $left // LTR
    /* Center Block Width = [W] - [R] - Right Padding - Left Padding - Right Border - Light Border */
    width: $layout-site-inner-width - $layout-right-block-width - ($layout-side-padding * 2) - ($wrapper-padding * 2) - ($wrapper-border-size * 2)
    margin: 0
    padding: 0 $layout-side-padding

/*! 2 Column ( left-center ) */
body.left-center #main-content
    float: $left // LTR
    /* Center Block Width = [W] - [R] - Right Padding - Left Padding - Right Border - Light Border */
    width: $layout-site-inner-width - $layout-right-block-width - ($layout-side-padding * 2) - ($wrapper-padding * 2) - ($wrapper-border-size * 2)
    margin: 0
    padding: 0 $layout-side-padding

/*! 2 Column ( center-right ) */
body.center-right #main-content
    float: $left // LTR
    /* Center Block Width = [W] - [R] - Right Padding - Left Padding - Right Border - Light Border */
    width: $layout-site-inner-width - $layout-right-block-width - ($layout-side-padding * 2) - ($wrapper-padding * 2) - ($wrapper-border-size * 2)
    margin: 0
    padding: 0 $layout-side-padding

/*! 1 Column ( center ) */
body.center #main-content
    width: 100%

/*!--------------------------------------
  Right Block Container
  display if Right Block is appeared.
--------------------------------------*/

#rightblocks,
body.js_off #rightblocks
    overflow: visible
    clear: $right // LTR
    float: $right // LTR
    width: $layout-right-block-width
    margin: 0

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

#footer
    clear: $left // LTR
    width: $layout-footer-inner-width
    layout-align-center()
    padding: 16px $footer-padding
    hook-selector($stage, "" + selector())

#footer-content
    width: $layout-footer-content-width
    layout-site-max-width($layout-site-max-width)
    layout-align-center()
    hook-selector($stage, "" + selector())

/*!--------------------------------------
  Admin Configuration Container
--------------------------------------*/

$layout-config-menu-width = 210px
$layout-config-padding = 10px
$layout-config-content-width = $layout-site-inner-width - $layout-config-menu-width - ($layout-config-padding * 4)

#config_menu
    float: left
    width: $layout-config-menu-width
    padding: 0 $layout-config-padding
    body.center-right &
        width: 200px

#config_content
    float: left
    width: $layout-config-content-width
    padding: $layout-config-padding
    body.center-right &
        width: 600px

hook-root($stage)
