@import bootstrap/bootstrap

html
    background: $gray

body
    background: transparent

#page
    @extend .container
    background: $white
    padding: 2*$baseLineHeight
    margin-top: 2*$baseLineHeight
    margin-bottom: 2*$baseLineHeight
    +border-radius(3px)
    +box-shadow(0 0 9px $grayDarker)
    position: relative

#header

    margin-bottom: $baseLineHeight * 2

    .headline h1
        font-size: $baseFontSize*1.2
        line-height: ($baseFontSize*1.2) + 2px
        text-align: center
        margin: $baseLineHeight*.75 0

    .forminfo
        +clearfix
        border: 1px solid $grayLight
        padding: $baseLineHeight / 2 $baseLineHeight

        p
            float: left
            margin: 0 2em 0 0
            min-width: 45%
            &.ssn
                clear: left
            span
                font-weight: bold

.article

    h1
        font-size: 2*$baseFontSize - 2px
        margin-bottom: $baseLineHeight/2

input,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="tel"],
input:focus:required:invalid,
textarea:focus:required:invalid,
select:focus:required:invalid
    border: 1px solid $grayLight+#080808
    border-bottom: 2px solid $gray
    background: $grayLighter + #060606
    +border-radius(0)
    text-transform: uppercase

    +box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075))
    +transition(border linear 0.2s, box-shadow linear 0.2s)

    // Focus state
    &:focus
        outline: 0
        outline: thin dotted \9
        background: #ffa
        border-color: $grayLight - #111 $grayLight - #111 $gray - #111
        /* IE6-9
        +box-shadow(inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(255, 216, 82, 0.8))

    &.notcaps
        text-transform: none

.form-buttons
    padding: $baseLineHeight 0 0 0

.form-horizontal

    .control-group
        margin-bottom: $baseLineHeight / 2

    .help-inline
        color: $grayLight

span.input-disabled
    display: inline-block
    padding: 5px
    font-weight: bold

.smalldivide
    margin-bottom: 3px

.form-insurance
    margin-top: 2*$baseLineHeight

    .control-label
        font-weight: bold

    input
        &.phone-3, &.phone-4
            width: $gridColumnWidth * 0.65
            text-align: center
        &.phone-4
            width: $gridColumnWidth * 0.8
        &#form_address_1, &#form_address_2
            width: 4*$gridColumnWidth + 3*$gridGutterWidth
        &#form_city
            width: (2*$gridColumnWidth) + (1.7*$gridGutterWidth)
        &#form_state, &#form_middle_name
            width: $gridColumnWidth / 2
        &#form_zip
            width: $gridColumnWidth + $gridGutterWidth
        &#form_dob, &#form_effective_date, &.input-date
            width: 2*$gridColumnWidth

        &[type="text"]
            margin-bottom: 2px

        &.error, &.error:focus
            border-color: $red
            background: $grayLighter + #200

    #dependents
        border-bottom: 1px solid $grayLight

        .dependent
            border-top: 1px solid $grayLight
            padding: $baseLineHeight / 3 0
            div
                padding: $baseLineHeight / 4 0
                &.row
                    padding: 0
            label.depend-label
                display: block
                text-align: right
                padding-top: 4px

    h3
        margin: $baseLineHeight 0 $baseLineHeight / 2

    div.another
        margin: $baseLineHeight / 2 0 0 0
        text-align: right

    .coverages
        margin: 0 0 $baseLineHeight 0
    span.sigdate
        display: inline-block
        padding-top: 5px
        color: $gray
    span.signature-guide
        display: inline-block
        margin-left: $gridGutterWidth
        margin-bottom: $baseLineHeight
        font-size: $baseFontSize - 2px
        color: $gray + #111

.form-little
    .control-label
        width: 1*$gridColumnWidth + 1*$gridGutterWidth
    .controls
        margin-left: 1*$gridColumnWidth + 2*$gridGutterWidth

.colist

    table
        @extend .table
        @extend .table-striped

    h1
        text-align: center
        margin: -$baseLineHeight 0 1.5*$baseLineHeight

    td.coid
        font-size: $baseFontSize - 1px
        color: $grayDark + #333
    td.clearco
        font-size: $baseFontSize - 2px
        text-align: center
        color: $grayLight
    th.clearco
        text-align: center

.cosettings

    h1
        text-align: center
    h2
        font-size: 1.4*$baseFontSize
        margin: $baseLineHeight 0 $baseLineHeight / 2
    h3
        font-size: $baseFontSize + 1px
        margin: $baseLineHeight 0 $baseLineHeight / 2
        a.btn
            font-weight: normal
            margin-left: $baseLineHeight / 2
    label.inline
        padding-top: 0
        padding-bottom: 5px
        margin-right: 0.75*$baseLineHeight

    textarea
        width: 4*$gridColumnWidth + 5*$gridGutterWidth
        white-space: nowrap
        overflow-x: hidden

    span.enroll-name
        font-weight: bold

    table.table-coelections
        .control-label
            width: $gridColumnWidth + 2*$gridGutterWidth
        .controls
            margin-left: $gridColumnWidth + 2.5*$gridGutterWidth
            label.checkbox input
                width: auto
        .controls input
            width: 4*$gridColumnWidth + 3*$gridGutterWidth

    .card-inline
        @extend .form-inline
        margin-bottom: $baseLineHeight / 3
        &.hide
            display: none
        label
            padding-top: 4px
        input
            padding-top: 1px
            padding-bottom: 0

    .insurance-download
        font-weight: bold
        margin: -0.5 * $baseLineHeight 0 0.5 * $baseLineHeight 0
        padding-left: 0.5 * $baseLineHeight

        .btn
            font-weight: normal
            margin-left: .5em
            margin-top: -.5em

#login-page

    padding-top: 1*$baseLineHeight
    padding-bottom: 10*$baseLineHeight

    h1
        text-align: center

    input
        background-color: #fff
        border-width: 1px
        border-color: $grayLight
        &:focus
            background-color: #ffd

.alert .close
    border: 0
    background: transparent

a.btn-logout
    @extend .btn
    @extend .btn-small
    position: absolute
    top: 3px
    right: 3px

a.btn-backto
    @extend .btn
    @extend .btn-small
    position: absolute
    top: 3px
    left: 3px

p.logout-notice
    position: absolute
    top: 5px
    right: 82px
    font-size: $baseFontSize - 2px
    line-height: $baseFontSize - 1px
    color: $grayLight
    text-align: right

p.step-notice
    position: absolute
    top: 2px
    left: 2*$baseLineHeight + 4*$gridColumnWidth + 4*$gridGutterWidth - 1px
    width: 4*$gridColumnWidth + 3*$gridGutterWidth
    background: #bfa
    border: 1px solid $grayLight
    border-color: $grayLight+#333 $grayLight $grayLight $grayLight+#222
    text-align: center
    padding: $baseLineHeight/4 0
    color: $gray
    +border-radius(3px)

    span
        font-size: $baseFontSize+3px
        font-weight: bold

div.messages

    .headers
        font-weight: bold
        margin-bottom: 3px
        position: relative
    a
        display: block
        color: $textColor
        background: $grayLighter
        padding-top: 4px
        padding-bottom: 4px
        margin-bottom: 2px
        height: $baseLineHeight
        position: relative
    a:hover
        background: $grayLighter - #222
        text-decoration: none
    a.unread
        font-weight: bold
    a.selected
        background: $grayLighter - #003
        &:hover
            background: $grayLighter - #114

    a span
        white-space: nowrap
        overflow: hidden
        text-overflow: ellipsis
        -ms-text-overflow: ellipsis

    label
        position: absolute
        top: 0
        right: 0
        height: 100%
        width: 30px
        margin: 0
        input
            position: absolute
            top: 5px
            right: 10px

div.recieved-messages, div.sent-messages

    margin-top: 0.75 * $baseLineHeight

    h2
        font-size: 120%
        margin-bottom: 0.5 * $baseLineHeight

div.email-controls

    margin-bottom: 1.5 * $baseLineHeight

    a.btn
        width: 75%
        height: 2 * $baseLineHeight
        line-height: 2 * $baseLineHeight

form#compose

    label
        text-align: right
        font-weight: bold
        margin-top: 5px

        &#subject-label
            margin-top: 0.5*$baseLineHeight + 5px

    input, textarea, span.uneditable-input
        width: 100%
        text-transform: none

    span.uneditable-input
        color: $textColor
        border-color: transparent
        background: transparent

    textarea
        font-family: $monoFontFamily

    input[type="file"]
        border: 0
        background: transparent
        +box-shadow(none)
        line-height: $baseFontSize
        height: auto
        margin: $baseLineHeight - $baseFontSize 0

    #attachment-row-5
        padding-bottom: 0.5*$baseLineHeight

    textarea:focus
        background: #f8f8f8

    a.btn
        margin: $baseLineHeight / 4 0 $baseLineHeight / 2 0

    span.attachment-name
        display: block
        margin-top: 0.4em


#reset-password

    input[type="password"]
        background: #fff
        &:focus
            background: #ffa

    h4
        text-align: center