/* Landspace tablet and Large desktop */
@media (min-width: 980px)

 
/* From portrait tablet and down */
@media (max-width: 979px)
    .hacker-icon
        $size: 12px

    body
        font-size: 85%

        button.menu
            background-color: $sidebar-bg
            border: lighten($sidebar-bg, 20%) 1px solid
            color: white
            display: block
            font-size: 16px
            height: 32px
            left: 8px
            padding: 0 5px 0 5px
            position: fixed
            text-align: center
            top: 8px
            z-index: 900

            -moz-border-radius: 4px
            -webkit-border-radius: 4px
            border-radius: 4px

            -moz-transition: left 0.3s
            -webkit-transition: left 0.3s
            transition: left 0.3s

            span
                display: block

                -moz-transition: all 0.3s
                -webkit-transition: all 0.3s
                transition: all 0.3s

            &.menu-shown
                left: $sidebar-width + 8px

                span
                    -moz-transform: rotate(180deg)
                    -webkit-transform: rotate(180deg)
                    transform: rotate(180deg)

    .sidebar
        margin-left: -1*$sidebar-width
        z-index: 999

        -moz-transition: margin-left 0.3s
        -webkit-transition: margin-left 0.3s
        transition: margin-left 0.3s

        &.shown
            margin-left: 0

        &> header
            height: auto

    table
        font-size: 60%

        th 
            padding: 1px 2px 

        td 
            padding: 1px 2px 


    section.content
        margin-left: 0
        padding: 4%
        width: auto

        .papers
            width: auto

/* Portrait tablet to desktop*/
@media (min-width: 767px) and (max-width: 979px)


/* Landscape phone to portrait tablet */
@media (max-width: 767px)
    .hide-mobile
        display: none
 
/* Landscape phones and down */
@media (max-width: 480px)