@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
 *
 */

ul
    list-style-type: disc
li > ul
    list-style-type: circle
li > * > li > ul
    list-style-type: square
li > * > li > * > li > ul
    list-style-type: disc
li > * > li > * > li > * > li > ul
    list-style-type: circle
li > * > li > * > li > * > li > * > li > ul
    list-style-type: square
li > * > li > * > li > * > li > * > li > * > li > ul
    list-style-type: disc

ol
    list-style-type: decimal
li > ol
    list-style-type: lower-alpha
li > * > li > ol
    list-style-type: lower-greek
li > * > li > * > li > ol
    list-style-type: decimal
li > * > li > * > li > * > li > ol
    list-style-type: lower-alpha
li > * > li > * > li > * > li > * > li > ol
    list-style-type: lower-greek
li > * > li > * > li > * > li > * > li > * > li > ol
    list-style-type: decimal

li > p
    margin: 0

font[style*='background'], font[class*='bg-']
    padding: 0 2px

.o_ul_toggle_self, .o_ul_toggle_next
    display: none
.o_ul_folded
    .o_close
        display: none !important
    .o_ul_toggle_self, .o_ul_toggle_next
        display: inline-block
        line-height: inherit
        float: left
        position: relative
        margin-left: -1em
        z-index: 1
        top: -0.15em
        left: 0.2em
        font-size: 1.4em
        text-decoration: none
        &:before
            content: "\f0da"
        &.o_open
            left: 0em
            &:before
                content: "\f0d7"

/* Extra Styles */

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

hr
    margin-bottom: 10px
    padding-bottom: 10px

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

.para_large
    font-size: 120%

.jumbotron.para_large p
    font-size: 150%

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

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

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

/* ----- 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
    table-layout: fixed
    width: 100%
    > *
        display: table-row
    > main
        height: 100%
    > footer
        height: 100%
        background: rgba(200, 200, 200, 0.1)
body > nav.navbar
    width: 100%
    position: absolute
    z-index: 10000
@media (min-width: 767px)
    nav.navbar + #wrapwrap
        padding-top: 34px

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

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

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

/* ---- 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

.o_normalwhitespace
    white-space: normal

.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: cover

.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
        .img
            width: 100%
    &.o_grid
        &.o_spc-none
            div.row
                margin: 0
                > *
                    padding: 0
        &.o_spc-small
            div.row
                margin: 5px 0
                > *
                    padding: 0 5px
        &.o_spc-medium
            div.row
                margin: 10px 0
                > *
                    padding: 0 10px
        &.o_spc-big
            div.row
                margin: 15px 0
                > *
                    padding: 0 15px
    &.o_masonry
        &.o_spc-none
            div.col
                padding: 0
                > img
                    margin: 0 !important
        &.o_spc-small
            div.col
                padding: 0 5px
                > img
                    margin: 5px 0 !important
        &.o_spc-medium
            div.col
                padding: 0 10px
                > img
                    margin: 10px 0 !important
        &.o_spc-big
            div.col
                padding: 0 15px
                > img
                    margin: 15px 0 !important
    &.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%
    .item
        padding-bottom: 64px
    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
        > *
            list-style-image: none
            display: inline-block
            width: 40px
            height: 40px
            margin: 0 0px 5px 5px
            padding: 0
            border: 1px solid #aaa
            text-indent: initial
            background-size: cover
            background-color: #fff
            border-radius: 0
        > *:not(.active)
            opacity: 0.8
            -webkit-filter: grayscale(100%)
            filter: grayscale(100%)
            filter: gray
            filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale")
    .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)

.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-color: 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

.oe_none
    background-color: #FFFFFF

.oe_yellow
    background-color: #A2A51B

.oe_green
    background-color: #149F2C

/* 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

.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
        min-width: 50px

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

/* ---- Menu nav bar ---- {{{ */

#oe_main_menu_navbar
    position: fixed
    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

/* ---- footer style ---- {{{ */
#footer div.row
    word-wrap: break-word

.container
    nav#oe_main_menu_navbar
        position: inherit

.oe_search_clear
    position: absolute
    display: none
    cursor: pointer
    z-index: 2
    right: 42px
    color: #939393
    padding: 10px 0
    top: 1px

.oe_search_box
    padding-right: 23px

.note-editor button
    height: 30px

.o_hidden
    display: none !important

#PlannerDialog
    top: 35px
    -webkit-box-shadow: 0 3px 9px #666666
    box-shadow: 0 3px 9px #666666

.tour
    .popover-navigation
        margin-left: 13px
        margin-bottom: 8px