// Colors

blue = #1baaf4
green = #5C5
orange = #fe8800
darkblue = #363a46

// Fonts

@font-face
    font-family styled
    src url('../fonts/maven-pro-light-200.otf')

@font-face
    font-family styledlight
    src url('../fonts/maven-pro-light-100.otf')

@font-face
    font-family main
    src url('../fonts/source-sans-pro.ttf')

// Standard styles

h1
    font-family styledlight
    font-weight bold
    font-size 40px

h2
    font-family styled
    font-weight normal
    font-size 30px
    margin-top 50px
    margin-bottom 5px
a
    color blue

a:hover
    color orange

p 
    font-family main

label
    font-family main
    font-size 20px

input
select
textarea
    padding: 4px
    border 1px solid blue
    border-radius 0
    font-family styled
    font-size: 20px
    font-weight: normal


input:hover
select:hover
textarea:hover
    border 1px solid orange

input:active
select:active
textarea:active
input:focus
select:focus
textarea:focus
    box-shadow none
    border 1px solid orange

// Widget styles

.modal-header
    padding 20px
    border-top-left-radius 5px
    border-top-right-radius 5px
    font-family styled
    font-size 26px
    background-color bluegreen
    color white

.modal-body
    font-family main

    input
    select
        border 1px solid blue
        border-radius 0
        font-family styled

        &:hover
            border 1px solid orange

        &:focus
        &:active
            border 1px solid blue
            box-shadow none

.btn
    // position: relative for spinner from SpinJS
    position relative

    &.btn-cozy
        padding 10px
        border-radius 5px
        border 0px solid blue
        font-family main
        font-size 18px
        background-color blue
        color white

        .caret
            border-top-color white
            border-bottom-color white

        &:hover
            background-color orange
            border-color orange

        &.bigger
            font-size: 24px
            padding: 10px

        &:active
        &:focus
            border: 0px
            box-shadow 1px 3px 2px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.0)

    &.btn-cozy.toggled
        box-shadow 1px 3px 2px rgba(0, 0, 0, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.0)
        background-color blue - 10%

        &:hover
            background-color orange - 10%

    &.btn-cozy-contrast
        background-color green - 10%
        border-color green - 10%
        color white

        &:hover
            background-color orange
            border-color orange