// Variables {{{
$colour4: #8a89ba
//$colour4: #d14836
// }}}
// Mixins {{{
@mixin vertical-gradient($startColor: #555, $endColor: #333)
    background-color: $startColor
    background-image: -webkit-gradient(linear, left top, left bottom, from($startColor), to($endColor)) /* Saf4+, Chrome */
    background-image: -webkit-linear-gradient(top, $startColor, $endColor) /* Chrome 10+, Saf5.1+, iOS 5+ */
    background-image:    -moz-linear-gradient(top, $startColor, $endColor) /* FF3.6 */
    background-image:     -ms-linear-gradient(top, $startColor, $endColor) /* IE10 */
    background-image:      -o-linear-gradient(top, $startColor, $endColor) /* Opera 11.10+ */
    background-image:         linear-gradient(to bottom, $startColor, $endColor)


@mixin radial-gradient($gradient)
    background-position: center center
    background-image: -webkit-radial-gradient(circle, $gradient)
    background-image: -moz-radial-gradient($gradient)
    background-image: -ms-radial-gradient($gradient)
    background-image: radial-gradient($gradient)

@mixin radius($radius: 5px)
    -moz-border-radius: $radius
    -webkit-border-radius: $radius
    border-radius: $radius

@mixin box-shadow($bsval: 0px 1px 4px #777)
    -moz-box-shadow: $bsval
    -webkit-box-shadow: $bsval
    -box-shadow: $bsval

@mixin transition($transval: (border linear 0.2s, box-shadow linear 0.2s))
    -webkit-transition: $transval
    -moz-transition: $transval
    -ms-transition: $transval
    -o-transition: $transval
    transition: $transval

@mixin opacity($opacity: .5)
    filter: alpha(opacity=$opacity * 100)
    opacity: $opacity

@mixin background-clip($clip: padding-box)
    -webkit-background-clip: $clip
    -moz-background-clip: $clip
    background-clip: $clip
// }}}

.openerp2
    // Global style {{{
    padding: 0
    margin: 0
    font-family: "Lucida Grande", Helvetica, Verdana, Arial, sans-serif
    color: #4c4c4c
    font-size: 13px
    background: white
    position: relative

    a
        text-decoration: none

    // buttons
    a.button:link, a.button:visited, button, input[type='submit']
        display: inline-block
        border: 1px solid #ababab
        color: #404040
        margin: 0
        padding: 4px 12px
        font-size: 13px
        text-align: center
        @include vertical-gradient(#efefef, #d8d8d8)
        @include radius(3px)
        @include box-shadow((0 1px 2px rgba(0, 0, 0, .1), 0 1px 1px rgba(255, 255, 255, .8) inset))
        text-shadow: 0 1px 1px rgba(255, 255, 255, .5)
        -webkit-font-smoothing: antialiased
        outline: none

    a.button:hover, button:hover, input[type='submit']:hover
        @include vertical-gradient(#f6f6f6, #e3e3e3)
        cursor: pointer

    a.button:focus, button:focus, input[type='submit']:focus
        border: 1px solid #80bfff
        @include vertical-gradient(#f6f6f6, #e3e3e3)
        @include box-shadow((0 0 3px #80bfff, 0 1px 1px rgba(255, 255, 255, .8) inset))

    a.button:active, a.button.active, button:active, button.active, input[type='submit']:active, input[type='submit'].active
        background: #e3e3e3
        background: -moz-linear-gradient(top, #e3e3e3, #f6f6f6) #1b468f
        background: -webkit-gradient(linear, left top, left bottom, from(#e3e3e3), to(#f6f6f6)) #1b468f
        background: linear-gradient(top, #e3e3e3, #f6f6f6) #1b468f
        @include box-shadow(none)

    a.button.disabled, button:disabled, input[type='submit']:disabled
        background: #efefef !important
        border: 1px solid #d1d1d1 !important
        @include box-shadow(none !important)
        color: #aaa !important
        cursor: default
        text-shadow: 0 1px 1px #fff !important

    button.primary
        color: white
        @include vertical-gradient(#dc5f59, #b33630)
        @include box-shadow(none)

    button.primary:hover
        @include vertical-gradient(lighten(#dc5f59, 3%), lighten(#b33630, 3%))
        @include box-shadow(0 0 1px rgba(0,0,0,0.2))

    button.primary:active
        @include vertical-gradient(#b33630, #dc5f59)
        @include box-shadow(none)

    button.following
        color: white
        width: 90px
        @include vertical-gradient($colour4, darken($colour4, 3%))

    button.unfollow
        display: none
        color: white
        width: 90px
        @include vertical-gradient(#dc5f59, #b33630)

    // Tag reset {{{
    table
        padding: 0
        font-size: 13px
        border-collapse: collapse
    thead
        font-weight: bold
        background-color: #f0f0f0
        th
            border-right: 1px dotted #afafb6
            &:last-child
                border-right: none
    th, td
        padding: 0
        line-height: 18px
        text-align: left
    th
        font-weight: bold
        vertical-align: middle

    td
        vertical-align: top

    .zebra tbody tr:nth-child(odd) td
        background-color: #f0f0fa
        @include vertical-gradient(#f0f0fa, #eeeef6)

    .zebra tbody tr:hover td
        @include vertical-gradient(#eee, #dedede)

    .numeric
        text-align: right
        width: 82px
        input
            text-align: right
    ul, li
        margin: 0
        padding: 0
    
    li
        list-style-type: none
    // }}}

    
    // }}}
    // Generic classes {{{
    .oe_left
        float: left
    .oe_right
        float: right
    .oe_clear
        clear: both
    // }}}
    // Fullscreen mode {{{
    .oe_content_full_screen
        .oe_application
            top: 0
            left: 0
        .topbar, .leftbar
            display: none
    // }}}
    // Webclient {{{
    .oe_webclient
        width: 100%
        height: 100%
    // }}}
    // Topbar {{{
    .oe_topbar
        width: 100%
        height: 31px
        border-top: solid 1px #d3d3d3
        border-bottom: solid 1px black
        @include vertical-gradient(#646060, #262626)

        .oe_systray
            float: right
        .oe_systray > div
            float: left
            padding: 0 4px 0 4px

        .oe_topbar_item
            li
                float: left
                a
                    display: block
                    padding: 5px 10px 7px
                    line-height: 20px
                    height: 20px
                    color: #eee
                    vertical-align: top
                    text-shadow: 0 1px 1px rgba(0,0,0,0.2)
                    &:hover
                        background: #303030
                        color: white
                        @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
            .oe_active
                background: #303030
                font-weight: bold
                color: white
                @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)

        .oe_topbar_avatar
            width: 24px
            height: 24px
            margin: -2px 2px 0 0
            @include radius(4px)
        .oe_topbar_avatar
            vertical-align: top
        .oe_dropdown_toggle:after
            width: 0
            height: 0
            display: inline-block
            content: "&darr"
            text-indent: -99999px
            vertical-align: top
            margin-top: 8px
            margin-left: 4px
            border-left: 4px solid transparent
            border-right: 4px solid transparent
            border-top: 4px solid white
            @include opacity(0.5)
    // }}}
    // TopBarUserMenu {{{
    .oe_user_menu
        float: right
        padding: 0
        margin: 0
        li
            list-style-type: none
            float: left
        .oe_dropdown
            position: relative
        .oe_dropdown_options
            float: left
            background: #333
            background: rgba(37,37,37,0.9)
            display: none
            position: absolute
            top: 32px
            right: -1px
            border: 0
            z-index: 900
            margin-left: 0
            margin-right: 0
            padding: 6px 0
            zoom: 1
            border-color: #999
            border-color: rgba(0, 0, 0, 0.2)
            border-style: solid
            border-width: 0 1px 1px
            @include radius(0 0 6px 6px)
            @include box-shadow(0 1px 4px rgba(0,0,0,0.3))
            @include background-clip()
            li
                float: none
                display: block
                background-color: none
                a
                    display: block
                    padding: 4px 15px
                    clear: both
                    font-weight: normal
                    line-height: 18px
                    color: #eee
                    &:hover
                        @include vertical-gradient(#292929, #191919)
                        @include box-shadow(none)
    // }}}
    // Leftbar {{{
    .oe_leftbar
        width: 220px
        background: #f0eeee
        border-right: 1px solid #afafb6
        text-shadow: 0 1px 1px white
    a.oe_logo
        width: 220px
        display: block
        text-align: center
        height: 70px
        line-height: 70px
        img
            height: 40px
            width: 157px
            margin: 14px 0
    .oe_footer
        position: fixed
        bottom: 0
        padding: 4px 0
        background: #f0eeee
        width: 220px
        text-align: center
        a
            font-weight: 800
            font-family: serif
            font-size: 16px
            color: black
            span
                color: #c81010
                font-style: italic
    // }}}
    // Menu {{{
    .oe_menu
        float: left
        padding: 0
        margin: 0
        li
            float: left
        a
            display: block
            padding: 5px 10px 7px
            line-height: 20px
            height: 20px
            color: #eee
            vertical-align: top
            text-shadow: 0 1px 1px rgba(0,0,0,0.2)
            &:hover
                background: #303030
                color: white
                @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
        .oe_active
            background: #303030
            font-weight: bold
            color: white
            @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
    .oe_menu_more_container
        position: relative
        .oe_menu_more
            position: absolute
            padding: 0
            background-color: #646060
            z-index: 1
            border: 1px solid black
            border-bottom-left-radius: 5px
            border-bottom-right-radius: 5px
            li
                float: none
                a
                    white-space: nowrap
    .oe_secondary_menu_section
        font-weight: bold
        margin-left: 8px
        color: $colour4
    .oe_secondary_submenu
        padding: 2px 0 8px 0
        margin: 0
        width: 100%
        display: inline-block
        li
            position: relative
            padding: 1px 0 1px 16px
            a
                display: block
                color: #4c4c4c
                padding: 2px 4px 2px 0
            .oe_menu_label
                position: absolute
                top: 1px
                right: 1px
                font-size: 10px
                background: $colour4
                color: white
                padding: 2px 4px
                margin: 1px 6px 0 0
                border: 1px solid lightGray
                text-shadow: 0 1px 1px rgba(0,0,0,0.2)
                @include radius(4px)
                @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
        .oe_active
            background: $colour4
            border-top: 1px solid lightGray
            border-bottom: 1px solid lightGray
            text-shadow: 0 1px 1px rgba(0,0,0,0.2)
            @include box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.2))
            a
                color: white
            .oe_menu_label
                background: #eee
                color: $colour4
                text-shadow: 0 1px 1px white
                @include box-shadow(0 1px 1px rgba(0, 0, 0, 0.2))
        .oe_menu_toggler:before
            width: 0
            height: 0
            display: inline-block
            content: "&darr"
            text-indent: -99999px
            vertical-align: top
            margin-left: -8px
            margin-top: 4px
            margin-right: 4px
            border-top: 4px solid transparent
            border-bottom: 4px solid transparent
            border-left: 4px solid #4c4c4c
            @include opacity(0.5)
        .oe_menu_opened:before
            margin-top: 6px
            margin-left: -12px
            margin-right: 4px
            border-left: 4px solid transparent
            border-right: 4px solid transparent
            border-top: 4px solid #4c4c4c
    // }}}
    // Main {{{
    .oe_main
        width: 100%
        height: 100%
        border-spacing: 0px
    // }}}
    // Application to rename into action {{{
    .oe_application
        width: 100%
        a
            color: $colour4
            &:hover
                text-decoration: underline
    // }}}
    // FormView Layout {{{
    .oe_form
        label
            font-weight: bold
    .oe_form_topbar
        border-bottom: 1px solid #cacaca
        @include vertical-gradient(#fcfcfc, #dedede)
        padding: 0 8px
        line-height: 30px 
        button
            font-size: 12px 
            height: 24px 
            line-height: 24px 
            vertical-align: top
            padding: 0 10px 
            margin: 3px 0
            span.i
                line-height: 20px 
                height: 24px 
        ul
            height: 30px
            padding: 0
            margin: 0
            text-shadow: 0 1px 1px white
            border-left: 1px solid #cacaca
            border-right: 1px solid #cacaca
            li   
                padding: 0
                margin: 0
                float: left 
                vertical-align: top
                border-right: 1px solid #cacaca
                height: 30px 
                padding: 0 12px 
                &:first-child
                    border-left: 1px solid #cacaca
                a    
                    color: #4c4c4c
                    &:hover
                        color: black
        .oe_form_steps
            img  
                margin: 0 8px
                vertical-align: top
            li   
                border-right: none 
                padding: 0
                &:first-child
                    margin-left: 12px 
                    border-left: none 
                &:last-child
                    margin-right: 12px 
        .oe_form_steps_active
            font-weight: bold 
            color: #b33630
    .oe_form_sheetbg
        background: url(/web/static/src/img/form_sheetbg.png)
        padding: 8px
        border-bottom: 1px solid #ddd 
    .oe_form_sheet_width
        min-width: 650px
        max-width: 880px
        margin: 0 auto
    .oe_form_sheet
        padding-top: 8px
        background: white
        min-height: 420px
        border: 1px solid #afafb6
        @include box-shadow(0 0 10px rgba(0,0,0,0.3))
        //.avatar
        //    max-height: 52px
        //.contacts
        //    li
        //        float: left
        //        width: 33%
        //        margin-bottom: 4px
        //    .avatar
        //        height: 40px
        //        width: 40px
        //        border: 1px solid
        //        border-color: #e5e5e5 #dbdbdb #d2d2d2
        //    .data
        //        padding: 2px
        //        line-height: 18px
    .oe_form_header
        padding: 4px 16px
    .oe_form_group_cell
        line-height: 18px
        .oe_form_button
            width: 100%
            white-space: nowrap
    .oe_layout_debugging
        .oe_form_group
            border: 2px dashed red
        .oe_form_group_cell
            border: 1px solid blue
            padding-bottom: 1em
        .oe_layout_debug_cell
            color: white
            background: #696
            font-size: 80%
            text-align: center
        .oe_layout_debug_cell
            display: block
    .oe_layout_debug_cell
        display: none

    .oe_form_notebook
        margin: 8px 0
        padding: 0 8px
        list-style: none
        zoom: 1
    .oe_form_notebook:before, .oe_form_notebook:after
        display: table
        content: ""
        zoom: 1
    .oe_form_notebook:after
        clear: both
    .oe_form_notebook > li
        float: left
    .oe_form_notebook > li > a
        display: block
        color: #4c4c4c
    .oe_form_notebook
        border-color: #ddd
        border-style: solid
        border-width: 0 0 1px
    .oe_form_notebook > li
        position: relative
        margin-bottom: -1px
    .oe_form_notebook > li > a
        padding: 0 12px
        margin-right: 2px
        line-height: 30px
        border: 1px solid transparent
        @include radius(4px 4px 0 0)
    .oe_form_notebook > li > a:hover
        text-decoration: none
        background-color: #eee
        border-color: #eee #eee #ddd
    .oe_form_notebook > li.ui-state-active > a, .oe_form_notebook > li.ui-state-active > a:hover
        background-color: #ffffff
        border: 1px solid #ddd
        border-bottom-color: transparent
        cursor: default

    // }}}
    // Kanban view {{{
    .oe_kanban_group_title
        margin: 1px 1px 4px
        font-size: 15px
        font-weight: bold
        text-shadow: 0 1px 0 white
    .oe_kanban_column, .oe_kanban_group_header
        width: 240px
        vertical-align: top
        padding: 6px 7px 6px 6px
        background: #f0eeee
        border-left: 1px solid #f0f8f8
        border-right: 1px solid #b9b9b9
    .oe_kanban_record
        position: relative
        display: block
        min-height: 50px
        background: white
        border: 1px solid #d8d8d8
        border-bottom-color: #b9b9b9
        padding: 6px
        margin: 6px 0
        display: block
        @include radius(4px)
        &:last-child
            margin-bottom: 0
        &:hover
            @include box-shadow(0 0 3px rgba(0,0,0,0.6))
        .oe_kanban_title
            font-weight: bold
            margin: 2px 4px
    .oe_kanban_gravatar
        width: 20px
        height: 20px
        @include radius(3px)
        @include box-shadow(0 1px 2px rgba(0,0,0,0.2))
    // }}}

    // Application to rename into action {{{
    .oe_application
        a
            color: $colour4
            &:hover
                text-decoration: underline
    // }}}

// Transitional overrides for old styles {{{
.openerp
    .oe_form_field_many2one
        td:first-child
            position: relative
        span.oe-m2o-drop-down-button
            position: absolute
            top: 3px
            right: 2px
// }}}

// au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
// vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker: