@charset "utf-8"

@import "common"

/*
 *       THIS CSS FILE IS FOR WEBSITE THEMING CUSTOMIZATION ONLY
 *
 * css for editor buttons, openerp widget included in the website and other
 * stuff must go to the editor.css
 *
 */

/* ----- GENERIC LAYOUTING HELPERS ---- */

/* Vertical Spacing */
.mt128
    margin-top: 128px !important
.mt92
    margin-top: 92px !important
.mt64
    margin-top: 64px !important
.mt48
    margin-top: 48px !important
.mt32
    margin-top: 32px !important
.mt16
    margin-top: 16px !important
.mt8
    margin-top: 8px !important
.mt4
    margin-top: 4px !important
.mt0
    margin-top: 0px !important

.mb128
    margin-bottom: 128px !important
.mb92
    margin-bottom: 92px !important
.mb64
    margin-bottom: 64px !important
.mb48
    margin-bottom: 48px !important
.mb32
    margin-bottom: 32px !important
.mb16
    margin-bottom: 16px !important
.mb8
    margin-bottom: 8px !important
.mb4
    margin-bottom: 4px !important
.mb0
    margin-bottom: 0px !important

/* Extra Styles */

img.shadow
    +border-radius(3px)
    +box-shadow(0px 3px 8px rgba(0, 0, 0, 0.2))
    margin: 0 auto

h1.text-muted, h2.text-muted, h3.text-muted
    margin-top: 10px

header
    a.navbar-brand.logo
        padding: 0 15px
    a.navbar-brand
        img
            max-height: 50px

// add {WORD JOINER} (equivalent to deprecated ZERO WIDTH NO-BREAK SPACE) at
// the beginning of paragraphs so they don't "disappear" after saving when
// used solely for spacing.
#wrapwrap p:empty:after
    content: '\2060'

/* ----- Snippets Styles ----- */

.para_large
    font-size: 120%

.readable
    font-size: 120%
    max-width: 700px
    margin-left: auto
    margin-right: auto

/* ----- EDITOR ----- */
#oe_main_menu_navbar
    min-height: 34px
    z-index: 1001
    +border-radius(0px)
    margin-bottom: 0px
    li a, li button
        padding: 4px 8px 4px 8px
        margin-top: 2px
        font-size: 13px
    .navbar-nav.navbar-right:last-child
        margin-right: 0 !important

.css_non_editable_mode_hidden
    display: none !important

/* ----- BOOTSTRAP FIX ----- */

.container, .readable
    .container
        padding-left: 0
        padding-right: 0
        width: auto

/* ----- BOOTSTRAP HACK FOR HEADER NAV BAR ----- */

.navbar.navbar-static-top
    margin-bottom: 0
    ul.nav
        > li.divider
            margin-top: 15px
            padding-top: 20px
            border-right: 1px solid grey

/* ----- BOOTSTRAP HACK FOR STICKY FOOTER ----- */

html,body, #wrapwrap
    +box-sizing(border-box)
    height: 100%

#wrapwrap
    display: table
    width: 100%

header, main, footer
    display: table-row

footer
    height: 100%
    background: rgb(239, 248, 248)
    background: rgba(200, 200, 200, 0.1)

#footer_container, #footer
    padding-top: 24px
    padding-bottom: 12px

/* ----- BOOTSTRAP FIX ----- */

.col-md-12
    float: left
    width: 100%

@-moz-document url-prefix()
    .table .img-responsive
        width: 100%

/* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */

.oe_structure.oe_editable.oe_empty:empty, .oe_editable[data-oe-type=html]:empty, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
    background-image: url('/website/static/src/img/drag_here.png') !important

.oe_structure.oe_empty:empty, [data-oe-type=html]:empty, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
    background-image: none
    background-repeat: no-repeat
    background-position: center
    height: 220px !important

.oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child
    position: static

.oe_structure.oe_empty:empty:before, [data-oe-type=html]:empty:before, .oe_structure.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before
    content: ' '
    text-align: center
    display: block
    padding-top: 160px
    padding-bottom: 30px
    color: grey
    font-size: 24px

.oe_structure.oe_editable.oe_empty:empty:before, .oe_editable[data-oe-type=html]:empty:before, .oe_structure.oe_editable.oe_empty > .oe_drop_zone.oe_insert:only-child:before, [data-oe-type=html] > .oe_drop_zone.oe_insert:only-child:before
    content: 'Drag Building Blocks Here' !important

.css_editable_display
    display: none

/* ---- HACK FOR COVERING UP CK EDITOR BOGUS P INSERTION --- */

.navbar .nav > li > p
    margin-bottom: 0px

// .navbar .nav > li  a
//     text-shadow: none

// .nav > li  a
//     display: block

/* ---- HOMEPAGE THEME CUSTOMIZATION ---- */

.nav-hierarchy
    padding-left: 16px

/* -- Hack for removing double scrollbar from mobile preview -- */
div#mobile-preview.modal
    overflow: hidden

ul.nav-stacked > li > a
    padding: 2px 15px

#customize-menu .dropdown-header
    text-transform: uppercase

/* ---- PUBLISH ---- */
.css_published
    .btn-danger, .css_publish
        display: none
.css_unpublished
    .btn-success, .css_unpublish
        display: none

[data-publish='off']>*:not(.css_options)
    +opacity(0.5)

/* ---- END of PUBLISH ---- */

@include selection
    background: rgba(150, 150, 220, 0.3)

.logo-img
    width: 220px


.oe_demo
    position: relative
    img
        width: 100%
    div
        position: absolute
        left: 0
        background-color: rgba(0,0,0,0.4)
        opacity: 0.85
        bottom: 0px
        width: 100%
        padding: 7px
        color: white
        font-weight: bold
        a
            color: white


/* ---- SNIPPETS --- */

.oe_img_bg
    background-size: 100%

.carousel, .parallax, .blockquote
    overflow: hidden

@media (max-width: 400px)
    section, .parallax, .row, .hr, .blockquote
        height: auto !important

.carousel-inner
    height: 100%
    .item
        height: 100%
        background-size: cover
.carousel
    .carousel-control
        cursor: pointer
        span
            top: 50%
            position: absolute
            margin-top: -8px
        &.left
            left: -10px
            *
                position: absolute
                top: 50%
                z-index: 5
                right: 50%
        &.right
            right: -10px
            *
                position: absolute
                top: 50%
                z-index: 5
                left: 50%

.quotecarousel
    padding-bottom: 16px

.hr
    padding: 4px 0


.o_image_floating
    width: 40%
    margin: 4px
    div.o_container
        position: relative
        mark
            display: block
            position: absolute
            bottom: 0
            width: 100%
            background-color: rgba(86,61,124,.25)
            a
                color: white
    &.o_hide_link div.o_container mark
        display: none
    &.o_margin_s
        margin-bottom: 4px
        &.pull-right
            margin-left: 8px
        &.pull-left
            margin-right: 8px
    &.o_margin_m
        margin-bottom: 8px
        &.pull-right
            margin-left: 12px
        &.pull-left
            margin-right: 12px
    &.o_margin_l
        margin-bottom: 12px
        &.pull-right
            margin-left: 16px
        &.pull-left
            margin-right: 16px
    &.o_margin_xl
        margin-bottom: 24px
        &.pull-right
            margin-left: 32px
        &.pull-left
            margin-right: 32px


/* gallery */

.o_gallery
    &.o_grid, &.o_masonry
        &.o_spc-none
            div.row
                margin: 0
            div.row > *
                padding: 0
        &.o_spc-small
            div.row
                margin: 5px 0
            div.row > *
                padding: 0 5px
        &.o_spc-medium
            div.row
                margin: 10px 0
            div.row > *
                padding: 0 10px
        &.o_spc-big
            div.row
                margin: 15px 0
            div.row > *
                padding: 0 15px
        .img
            width: 100%
    &.o_grid
        &.size-auto .row
            height: auto
        &.size-small .row
            height: 100px
        &.size-medium .row
            height: 250px
        &.size-big .row
            height: 400px
        &.size-small, &.size-medium, &.size-big
            .img
                height: 100%
    &.o_nomode
        &.o_spc-none
            .img
                padding: 0
        &.o_spc-small
            .img
                padding: 5px
        &.o_spc-medium
            .img
                padding: 10px
        &.o_spc-big
            .img
                padding: 15px

    &.o_slideshow .carousel ul.carousel-indicators li
        border: 1px solid #aaa
    .carousel-inner .item img
        max-width: none

.o_gallery.o_slideshow > .container
    height: 100%

.o_gallery.o_slideshow .carousel, .modal-body.o_slideshow .carousel
    height: 100%
    img
        max-height: 100%
        max-width: 100%
        margin: auto
        position: relative
        top: 50%
        -webkit-transform: translateY(-50%)
        -ms-transform: translateY(-50%)
        transform: translateY(-50%)
    ul.carousel-indicators
        display: block
        height: auto
        padding: 0
        border-width: 0
        position: absolute
        bottom: 0
        li
            list-style-image: none
            display: inline-block
            width: 35px
            height: 35px
            margin: 0 0px 5px 5px
            padding: 0
            border: 1px solid #aaa
            text-indent: initial
            background-size: cover
            opacity: 0.5
            background-color: #000
        li.active
            opacity: 1
    .carousel-control.left, .carousel-control.right
        background-image: none
        background-color: transparent

/* Parallax Theme */

div.carousel
    .carousel-indicators
        li
            border: 1px solid grey
        .active
            background-color: grey
    span.carousel-img img, div.carousel-content
        max-height: 95%
        padding: 10px        
    div.carousel-content
        background-color: black
        color: white
        background: rgba(0, 0, 0, 0.3)
        margin-top: 75px

.parallax
    background-size: cover
    > div
        position: relative
        display: table
        width: 100%
        min-height: 200px
        > div
            display: table-cell
            vertical-align: middle
            padding: 32px 0

/* Background (kept for 8.0 compatibility) */

.oe_dark
    background: #eff8f8
    background: rgba(200, 200, 200, 0.14)

.oe_black
    background-color: rgba(0, 0, 0, 0.9)
    color: white

.oe_green
    background-color: #169C78
    color: white
    .text-muted
        color: #ddd

.oe_blue_light
    background-color: #41b6ab
    color: white
    .text-muted
        color: #ddd

.oe_blue
    background-color: #34495e
    color: white

.oe_orange
    background-color: #f05442
    color: white
    .text-muted
        color: #ddd

.oe_purple
    background-color: #b163a3
    color: white
    .text-muted
        color: #ddd

.oe_red
    background-color: #9C1b31
    color: white
    .text-muted
        color: #ddd

/* Misc */

.texttop
    vertical-align: top

table.well tr
    th
        text-align: right
        padding-right: 10px
    td
        padding-right: 5px

.logo-img
    width: 220px

.oe_demo
    position: relative
    img
        width: 100%
    div
        position: absolute
        left: 0
        background-color: rgba(0,0,0,0.4)
        opacity: 0.85
        bottom: 0px
        width: 100%
        padding: 7px
        color: white
        font-weight: bold
        a
            color: white

address
    .fa.fa-mobile-phone
        margin: 0 3px 0 2px
    .fa.fa-file-text-o
        margin-right: 1px

span[data-oe-type="monetary"]
    white-space: nowrap

.oe_template_fallback
    @include column-count(3)

.oe_website_login_container
    width: 400px
    margin: 40px auto

.oe_website_overflow_ellipsis
    white-space:nowrap
    overflow:hidden
    text-overflow:ellipsis

.oe_website_spinner
    width: 121px
    input
        text-align: center

div.media_iframe_video
    height: 0
    margin: 0 auto
    text-align: center
    position: relative
    overflow: hidden
    padding-bottom: 66.5%
    iframe
        width: 100%
        height: 100%
        position: absolute
        margin-left: -50%
    .css_editable_mode_display
        position: absolute
        width: 100%
        height: 100%
        display: none
        z-index: 2

/* Mobile view */

@media (max-width: 768px)
    img:not(.cke_iframe), .media_iframe_video, span.fa, i.fa
        -webkit-transform: none !important
        -moz-transform: none !important
        -ms-transform: none !important
        -o-transform: none !important
        transform: none !important


/* Fix: backward compatibility saas-3 */

div.carousel
    .container
        > .carousel-caption
            position: absolute
            right: 50%
            left: 50%
            bottom: 20px
            > div
                position: absolute
                text-align: left
                padding: 20px
                background: rgba(0, 0, 0, 0.4)
                bottom: 20px
        > .carousel-image
            top: 5%
            bottom: 5%
            position: absolute
            max-height: 90%
            margin: 0 auto
    .item.text_image
        .container
            > .carousel-caption
                left: 10%
                > div
                    right: 50%
                    margin-right: -20%
                    max-width: 550px
            > .carousel-image
                right: 10%
                left: 50%
    .item.image_text
        .container
            > .carousel-caption
                right: 10%
                > div
                    left: 50%
                    margin-left: -20%
                    max-width: 550px
            > .carousel-image
                right: 50%
                left: 10%
    .item.text_only
        .container
            > .carousel-caption
                left: 10%
                right: 10%
                top: 10%
                bottom: auto
                > div
                    text-align: center
                    background: transparent
                    bottom: auto
                    width: 100%
            > .carousel-image
                display: none !important