/*
    Phones
        @media (max-device-width: 570px)
    Tablets
        @media (max-device-width: 1024px) and (orientation: landscape)
        @media (max device-width: 768px)
    Desktop
        @media (min-device-width: 768px)
*/

/* Phone view specifics */
@media (max-device-width: 570px) {

    /* Naviagtion */
    .outer-nav {
        height: 85px;
    }
    .inner-nav {
        position: absolute;
        bottom: 0;
        width: 100%;
        max-width: 100%;
        margin: 0;
        padding: 0 1em;
        height: 40px;
    }
    .inner-nav a {
        height: 40px;
        max-width: 28%;
        font-size: 12px;
        padding: 0.5em;
    }

    /* Side panel */
    aside {
        display: none !important;
    }
    aside.side-pane {
        display: block;
        width: 100%;
        padding: 1em;
    }
    aside.side-pane h1 {
        display: none;
    }
    aside #filters .list {
        list-style: none;
        width: 83%;
        margin: 0 auto;
        padding: 0;
    }
    aside #filters ul.list li {
        width: 50%;
        float: left;
        clear: none;
    }
    aside section {
        margin: 0;
    }

    /* Main content */
    main.main-pane {
        display: block;
        width: 100%;
        padding: 1em;
    }
    .content-wrapper {
        padding-top: 0;
    }
    section {
        margin: 0 0 1.5em 0;
    }

    /* Manage subscription form */
    ul.horizontal-list {
        list-style: none;
        width: 100%;
        margin: 0 auto;
        padding: 0;
    }
    ul.horizontal-list li {
        width: 50%;
        float: left !important;;
        clear: none;
    }
    ul.comma-seperated-list  > li{
        width: initial !important;
    }

    /* Articles for overview page */
    .main-pane aside {
        display: block;
        width: 100%;
        margin: 0;
    }
    .main-pane section {
        display: block;
        width: 100%;
        margin: 0;
    }
    .main-pane section > article {
        margin: 0 0 2em 0;
        padding: 1em;

    }
    .main-pane section > article:nth-of-type(odd) {
        background: #f6f6f7;
    }

    .main-pane aside > h4 {
        display: inline-block;
        color: #8D8E90;
        padding: 0;
        margin: 0;
    }
    .main-pane aside > h4 + h4:before {
        content: ", ";
    }
    .main-pane section > header, .main-pane section > header h4 {
        margin: 0.2em 0 0.2em 0;
        padding: 0;
    }

    a.read-more {
        position: relative;
        margin-top: 5px !important;
        right: 0;
        display: inline-block;
    }

    /* Administration page */
    table, thead, tbody, th, td, tr {
        display: block;
    }
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }
    tr:nth-of-type(odd) {
        background: #f6f6f7;
    }
    td {
        border: none;
        border-bottom: none !important;
        position: relative;
        padding-left: 50%;
    }
    tr {
        border-bottom: 1px solid #d8d8d8;
    }
    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }
    .th-id {
        visibility: hidden;
    }
    .td-id {
        display: none;
    }
    .td-subject {
        font-family: "DINPro-Regular", "MS Trebuchet", sans-serif;
        color: #274052 !important;
    }
    .td-type::before {
        content: 'Type:';
        position: initial;
        padding-right: 4px;
    }
    .td-date::before {
        content: 'Created on:';
        position: initial;
        padding-right: 4px;
    }
    .td-email::before {
        content: 'Email:';
        position: initial;
        padding-right: 4px;
    }
    .td-name::before {
        content: 'Name:';
        position: initial;
        padding-right: 4px;
    }
    .td-sms::before {
        content: 'SMS:';
        position: initial;
        padding-right: 4px;
    }
    input[type="text"] {
        width: 94% !important;
    }
    input[type="text"].has-translate {
        width: 85% !important;
    }
    a.button-translate.button-bigger {
        float: right;
        margin-right: 5%;
        margin-bottom: 1em;
    }
    .required:after {
        float: right;
    }
    div.input-set > label {
        line-height: 2.2em;
    }
    div > textarea {
        width: 95%;
        max-width: 95%;
        min-height: 200px;
    }
    div.information-set > label, div.input-set > label, div.input-set > div.checkbox-label {
        width: 35% !important;
    }
    div.information-set > span, div.input-set > select, div.input-set > input {
        width: 65% !important;;
    }
}