@charset "utf-8"

/* ---- Default Styles ---- */

.oe_product
    border: 1px solid rgba(100,100,100,0.2)

.products_pager
    text-align: center
    > div
        margin: 0 auto
        display: inline-block
        > *
            vertical-align: middle
            float: none
            padding: 0
        > ul
            padding-left: 10px
    > ul
        margin-left: auto
        margin-right: auto

/* ---- Default Styles ---- */

.oe_product
    position: relative
    .oe_product_image
        position: absolute
        left: 15px
        right: 15px
        top: 15px
        bottom: 55px
        text-align: center
        img
            max-width: 100%
            max-height: 100%
            margin: auto
            position: absolute
            top: 0
            left: 0
            bottom: 0
            right: 0
            z-index: 4
    section
        position: absolute
        left: 0
        right: 0
        bottom: 0
        overflow: hidden
        padding: 0 15px 24px 0
        min-height: 56px
        border-top: 1px solid rgba(255,255,255,0.2)
        background: rgba(255, 255, 255, 0.75)
        z-index: 5
    .product_price
        padding: 5px 0
        position: absolute
        bottom: 0
    .oe_product_cart
        position: relative
        width: 100%
        height: 100%
    .oe_subdescription
        font-size: 0.8em
        overflow: hidden
        margin-bottom: 10px

.oe_mycart
    .input-group-addon
        padding-left: 6px
        padding-right: 6px

/* Products Options */

.oe_product.oe_image_full
    .oe_product_image
        left: 0
        right: 0
        top: 0
        bottom: 0

/* Ribbon for promotionso on products */

.oe_product
    &.oe_ribbon_promo
        .ribbon-wrapper
            display: block

    .ribbon-wrapper
        display: none
        width: 85px
        height: 88px
        z-index: 5
        overflow: hidden
        position: absolute
        top: 0
        right: 0

    .ribbon
        font: bold 15px Sans-Serif
        color: white
        text-align: center
        -webkit-transform: rotate(45deg)
        -moz-transform:    rotate(45deg)
        -ms-transform:     rotate(45deg)
        -o-transform:      rotate(45deg)
        position: relative
        padding: 7px 0
        left: -5px
        top: 15px
        width: 120px
        cursor: default


/* ---- Product Sizes ---- */

.col-md-12
    .oe-height-1
        height: 75px
    .oe-height-2
        height: 150px
    .oe-height-4
        height: 300px
    .oe-height-6
        height: 450px
    .oe-height-8
        height: 600px
.col-md-9
    .oe-height-1
        height: 70px
    .oe-height-2
        height: 140px
    .oe-height-4
        height: 280px
    .oe-height-6
        height: 420px
    .oe-height-8
        height: 560px

@media (max-width: 768px)
    #products_grid
        table, tbody,tr, td
            float: left
            width: 100%
            display: inline-block
        .oe_product
            float: left
            width: 100%
            height: 300px
            display: inline-block
    .products_pager
        .pagination
            margin: 5px auto !important

@media (max-width: 400px)
    #products_grid
        .oe_product
            height: 270px
            section
                background: rgba(100, 100, 100, 0.2)
            .oe_product_image
                top: 0
                bottom: 65px
    #products_grid
        .oe_product.oe_image_full
            .oe_product_image
                bottom: 50px


@media (min-width: 992px)
    .col-md-12
        .oe-height-1
            height: 95px
        .oe-height-2
            height: 190px
        .oe-height-4
            height: 380px
        .oe-height-6
            height: 570px
        .oe-height-8
            height: 760px
    .col-md-9
        .oe-height-1
            height: 72px
        .oe-height-2
            height: 144px
        .oe-height-4
            height: 288px
        .oe-height-6
            height: 432px
        .oe-height-8
            height: 576px

@media (min-width: 1200px)
    .col-md-12
        .oe-height-1
            height: 125px
        .oe-height-2
            height: 250px
        .oe-height-4
            height: 500px
        .oe-height-6
            height: 750px
        .oe-height-8
            height: 1000px
    .col-md-9
        .oe-height-1
            height: 95px
        .oe-height-2
            height: 190px
        .oe-height-4
            height: 380px
        .oe-height-6
            height: 570px
        .oe-height-8
            height: 760px

/* ---- Product list style ---- */

@media (min-width: 400px)
    .oe_product.oe_list
        border: none
        border-bottom: 1px solid rgba(100, 100, 100, 0.2)
        width: 100%
        min-height: 100px
        position: relative
        padding-bottom: 5px
        .oe_product_image
            top: 0
            bottom: 0
            left: 0
            right: 0
            width: 170px
        section
            position: relative
            border: 0
            top: 0
            bottom: auto
            left: 180px
            background: transparent

.oe_website_sale .row .row .col-md-12
    float: none

/* product detail */

.product_detail_img
    margin-left: auto
    margin-right: auto
    display: block
    max-height: 500px

/* ---- Publish managment and options ---- */

#products_grid .css_options
    display: none
    position: absolute
    top: -6px
    left: 50%
    z-index: 10
    .dropdown
        position: relative
        left: -50%
        [name="size"]
            table
                margin-left: 20px
            td
                margin: 0
                padding: 0
                width: 20px
                height: 20px
                border: 1px #dddddd solid
                cursor: pointer
                &.selected
                    background-color: #B1D4F1
            table.oe_hover td.selected
                background-color: transparent
            table.oe_hover td.select
                background-color: #B1D4F1

.cke_editable
    #products_grid .oe_product_cart:hover > .css_options
        display: block

/* Wizard */


ul.wizard
    padding: 0
    margin-top: 20px
    list-style: none outside none
    -webkit-border-radius: 4px
    -moz-border-radius: 4px
    border-radius: 4px
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.065)

ul.wizard li 
    border: 1px solid #d4d4d4
    border-right-width: 0
    position: relative
    float: left
    padding: 0 10px 0 20px
    margin: 0
    line-height: 38px
    background: #fbfbfb

ul.wizard li .chevron
    position: absolute
    top: 0
    right: -10px
    z-index: 1
    display: block
    border: 20px solid transparent
    border-right: 0
    border-left: 10px solid #d4d4d4

ul.wizard li .chevron:before
    position: absolute
    top: -20px
    right: 1px
    display: block
    border: 20px solid transparent
    border-right: 0
    border-left: 10px solid #fbfbfb
    content: ""

ul.wizard li.text-success
    background: #f3f4f5

ul.wizard li.text-success .chevron:before
    border-left: 10px solid #f5f5f5

ul.wizard li.text-primary
    background: #f1f6fc

ul.wizard li.text-primary .chevron:before
    border-left: 10px solid #f1f6fc

ul.wizard li:first-child
    padding-left: 15px
    border-radius: 4px 0 0 4px
