$font-stack: 'Roboto', sans-serif
$body-color: #f4f4f4
$primary-color: #03a9f4
$drawer-width: 300px
$actionbar-height: 60px
$actionbar-shadow: #999
$divider-color: #cecece
$drawer-item-height: 72px
$drawer-item-font-size: 18px
$hovered-element-color: #e0e0e0
$card-padding: 20px

=border-radius($radius)
    -webkit-border-radius: $radius
    -moz-border-radius: $radius
    -ms-border-radius: $radius
    border-radius: $radius

=box-shadow($horizontal, $vertical, $blur, $spread, $color)
    -webkit-box-shadow: $horizontal $vertical $blur $spread $color
    -moz-box-shadow: $horizontal $vertical $blur $spread $color
    -ms-box-shadow: $horizontal $vertical $blur $spread $color
    box-shadow: $horizontal $vertical $blur $spread $color

body
    font-family: $font-stack
    background: $body-color
    margin: 0px

.actionbar
    width: 100%
    height: $actionbar-height
    position: fixed
    background: $primary-color
    top: 0px
    left: 0px
    padding-left: $drawer-width + 20
    color: #fff
    font-size: 25px
    line-height: $actionbar-height
    +box-shadow(0px,4px,4px,0px,$actionbar-shadow)

.menuicon
    height: 30px
    position: fixed
    top: 0px
    left: 0px
    padding: 15px
    cursor: pointer

.drawer
    width: $drawer-width
    top: 0px
    left: 0px
    position: absolute
    height: 100%
    background: #fff
    border-right-width: 1px
    border-right-color: $divider-color
    border-right-style: solid
    z-index: 50

.drawerimg
    width: 100%

.draweritem
    height: $drawer-item-height
    line-height: $drawer-item-height
    font-size: $drawer-item-font-size
    padding-left: 16px
    cursor: pointer

.draweritem:hover
    background: $hovered-element-color

.drawerdivider
    border-top-color: $divider-color
    border-top-width: 1px
    border-top-style: solid

.main
    width: calc(100% - 300px)
    height: calc(100%-60px)
    margin-left: $drawer-width
    margin-top: $actionbar-height

.card
    width: calc(50% - 36px)
    background: #fff
    +border-radius(1px)
    +box-shadow(0px,0px,2px,2px,$divider-color)
    display: inline-block
    margin: 16px
    float: left

.input
    width: 100%
    resize: none
    border: 0px
    height: 100px
    font-family: $font-stack
    font-size: 16px
    padding: $card-padding

.carddivider
    @extend .drawerdivider
    width: 100%

.cardtext
    padding: $card-padding

.cardbuttons
    float: right
    padding: $card-padding

.cardbutton
    min-width: 64px
    margin-left: 8px
    padding: 5px
    color: $primary-color
    cursor: pointer

.cardbutton:hover
    background: $hovered-element-color

.overlay
    background: #000
    opacity: 0
    position: fixed
    top: 0px
    left: 0px
    width: 100%
    height: 100%
    z-index: 30

#output
    -moz-hyphens: auto
    -ms-hyphens: auto
    -webkit-hyphens: auto
    hyphens: auto
    word-wrap: break-word


#outputcard
    display: none

@media screen and (max-width: 1400px)
    .drawer
        display: none
        border-right-width: 0px
    .actionbar
        padding-left: 60px
    .main
        width: 100%
        margin-left: 0px

@media screen and (max-width: 750px)
    .card
        width: calc(100% - 36px)