body
    margin: 0

nav
    display: block
    height: 60px
    background-color: #00BCD4
    border-bottom: 5px solid #0096a9
    ul
        display: inline-block
        margin: 0
        padding: 0
        list-style-type: none
        &.right
            float: right
        li
            height: 60px
            display: inline-block
            a
                font-size: 180%
                padding: 16px
                line-height: 2
                color: #fff
                text-decoration: none
                text-transform: uppercase
                font-weight: bold
                &:hover
                    background-color: #00c9e2

.wrapper
    min-height: 100vh
    overflow: hidden
    .container
        overflow: hidden
        padding: 10px
        background-color: #fff
        min-height: 100vh
    .left, .right
        width: 48%
        display: inline-block
    .right
        float: right
    .stamps
        float: right

.user
    min-height: 180px
    .avatar
        float: left
    .info
        margin-left: 170px
        .display_name
            font-weight: bold
            font-size: 120%
        .username
            font-size: 80%

.info
    .section
        margin: 5px 0
        .key
            width: 120px
            display: inline-block

.list
    padding: 10px
    .list-item
        background-color: #f5f5f5
        padding: 10px
        &:nth-child(even)
            background-color: #fff

.application
    min-height: 200px

    #hiddensecret
        display: none
        color: #ff796f
        background-color: #f1f1f1
        padding: 5px
        min-width: 250px

    #showbutton
        font-style: italic
        display: inline-block
        cursor: pointer
        &:hover > #hiddensecret
            display: block

    .link
        color: green
        cursor: pointer
        display: inline-block

.modal-mask
    position: fixed
    z-index: 9998
    top: 0
    left: 0
    width: 100%
    height: 100%
    background-color: rgba(0, 0, 0, .5)
    display: table
    transition: opacity .3s ease

.modal-wrapper
    display: table-cell
    vertical-align: middle

.modal-container
    width: 360px
    margin: 0px auto
    padding: 20px 30px
    background-color: #fff
    border-radius: 2px
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33)
    transition: all .3s ease
    font-family: Helvetica, Arial, sans-serif

.modal-header h3
    margin-top: 0
    color: #42b983

.modal-body
    margin: 20px 0

.modal-footer
    min-height: 50px
    
    button
        margin: 5px
        display: inline-block

    &.text-align
        text-align: center

/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.fade-enter-active, .fade-leave-active
  transition-property: opacity
  transition-duration: .25s

.fade-enter-active
  transition-delay: .25s

.fade-enter, .fade-leave-active
  opacity: 0

.modal-enter
    opacity: 0

.modal-leave-active
    opacity: 0

.modal-enter .modal-container, .modal-leave-active .modal-container
    -webkit-transform: scale(1.1)
    transform: scale(1.1)

form
    .message
        display: none