/* General portrait adjustments */

@media screen and (orientation: portrait) {

    .content {
        min-height: 72vh;
    }

}

/* General widescreen adjustments */

@media screen and (min-aspect-ratio: 14/9) and (orientation: landscape) {

    .content {
        min-height: 76vmin;
    }

    #main-navigation {
        height: 8.5vmin;
    }

    #main-navigation h1 {
        font-size: 3vmin;
        margin: 2.5vmin 0 2.5vmin 5vmin;
    }

    #main-navigation ul {
        padding: 1vmin 1.5vmin 1.5vmin 1.5vmin;
        font-size: 3vmin;
    }

    #main-navigation .dropdownContent li {
        font-size: 1.6vmin;
    }

    #main-navigation ul.dropdownContent li a {
        min-width: 20vmin;
    }

    h1 {
        font-size: 2.5vmin;
        margin: 3.2vmin 0;
    }

    .content h1.blue-header,
    .content h1.blue-header-organisation,
    .content h1.blue-header-venue,
    .content h1.blue-header-note,
    .content h1.blue-header-question,
    .content h1.blue-header-user,
    .content h1.blue-header-profile,
    .content h1.blue-header-search,
    .content h1.blue-header-tag,
    .content h1.blue-header-venue,
    .content h1.blue-header-quiz,
    .content h1.blue-header-home {
        font-size: 2vmin;
    }

    h2 {
        font-size: 2.1vmin;
        margin: 2.5vmin 0;
    }

    p, li, td, th,
    label, button {
        font-size: 1.8vmin;
    }

    .piePlotLabel p {
        font-size: 1.2vmin;
    }

    th {
        font-size: 1.8vmin;
        padding: 0.35em;
    }

    td {
        font-size: 1.5vmin;
        padding: 0.35em;
    }

    .compact,
    .compact p,
    .compact li,
    .compact td {
        font-size: 1.8vmin;
    }

    nav.tabs ul li {
        padding: 1.3vmin;
    }

    label {
        width: 14vw;
    }

    div.submit {
        padding-left: 14vw;
    }

    div.fieldset-submit {
        padding-left: 15.5vw;
    }

    div.left-submit {
        padding: 1vmin 0 0 0vw;
    }

    .compact th {
        font-size: 2vmin;
    }
}

/* Now catch scaling needed on lower-res viewports: */

/* small pcs/large tablets */
@media screen and (min-width: 769px) and (max-width: 1200px) {
    .content h1.blue-header,
    .content h1.blue-header-organisation,
    .content h1.blue-header-venue,
    .content h1.blue-header-note,
    .content h1.blue-header-question,
    .content h1.blue-header-user,
    .content h1.blue-header-profile,
    .content h1.blue-header-search,
    .content h1.blue-header-tag,
    .content h1.blue-header-venue,
    .content h1.blue-header-quiz,
    .content h1.blue-header-home {
        font-size: 2vmin;
    }

    nav.tabs ul li {
        font-size: 1.4vmin;
        padding: 1.2vmin;
    }
}

/* reset logo below 769 OR on portrait/crazy resolutions */
/* @media screen and (aspect-ratio: 8/10) */

@media screen and (orientation: portrait) {

    #main-navigation {
        text-align: center;
        height: auto;
    }

    .nav-left, .nav-right {
        padding: 1vmin;
        text-align: center;
        width: auto;
        float: none;
        margin: 0 auto;
        background-image: none;
    }

    .nav-right {
        float: none;
        width: 100%;
        padding: 1vmin 0;
    }

    nav li {
        padding: 0 0.3vmin 0 0;
    }

    #main-navigation h1 {
        font-size: 3em;
        margin: 0;
        background: none;
    }
}

/* tablet screens - use main menu but inline */
@media screen and (min-width: 501px) and (max-width: 768px) {

    #main-navigation h1 {
        font-size: 3em;
        background: none;
    }

    article.tabs {
        text-align: center;
    }

    article.tabs h1 {
        text-align: left;
    }

    ul.pagination,
    article.tabs nav.sub {
        text-align: left;
    }

    .content section.panel {
        width: 39vw;
        margin: 0 1vmin 2vmin;
    }

    .content section.ovenLineOverviewMicro {
        min-height: inherit;
    }

    .content section.panel table.fixed-height {
        height: 17.5vh;
    }

    .content h1.blue-header,
    .content h1.blue-header-organisation,
    .content h1.blue-header-venue,
    .content h1.blue-header-note,
    .content h1.blue-header-question,
    .content h1.blue-header-user,
    .content h1.blue-header-profile,
    .content h1.blue-header-search,
    .content h1.blue-header-tag,
    .content h1.blue-header-venue,
    .content h1.blue-header-quiz,
    .content h1.blue-header-home {
        font-size: 2vmin;
    }

    p, li, td, th, label, select {
        font-size: 1.8vmin;
    }

    th.action {
        width: 19vw;
    }

    table.vertical th {
        width: 14vw;
    }

    label {
        width: 17vw;
    }

    div.submit {
        padding-left: 17vw;
    }

    div.fieldset-submit {
        padding-left: 18.5vw;
    }

    .dashboard-left {
        width: 100%;
        float: none;
    }

    .dashboard-right {
        width: 100%;
        float: none;
        margin-left: 0;
    }

}

/* Mobile screens */
@media screen and (max-width: 500px) {

    #standard-menu {
        display: none;
    }

    #mobile-menu {
        display: block;
    }

    .mobile-hidden {
        display: none;
    }

    #mobile-menu-show {
        font-size: 2.5vmin;
        margin: 0 0 3vmin 0;
    }

    #main-navigation ul.mobile-nav {
        border-width: 1px;
        border-color: rgba(0, 0, 0, 0.5);
        border-style: solid;
        display: block;
        font-size: 2.5vmin;
        list-style-type: none;
        margin: 0 0 3vmin 0;
        padding: 0;
    }

    #main-navigation ul li {
        border-width: 0 0 1px 0;
        border-color: rgba(0, 0, 0, 0.5);
        border-style: solid;
        background-color: rgba(0, 0, 0, 0.1) !important;
        display: block;
        font-size: 2.5vmin;
        padding: 3vmin 0;
        min-height: unset;
        text-align: center;
    }

    #main-navigation ul li.dashboard,
    #main-navigation ul li.search,
    #main-navigation ul li.admin,
    #main-navigation ul li.user,
    #main-navigation ul li.organisation,
    #main-navigation ul li.venue,
    #main-navigation ul li.note,
    #main-navigation ul li.logout,
    #main-navigation ul li.reports {
        background-position: 1vmin center;
        background-size: auto 7vmin;
    }

    #main-navigation ul li.dashboard {
        background-size: auto 7vmin;
    }

    #main-navigation ul li.reports {
        background-size: auto 7vmin;
    }

    #main-navigation ul li ul {
        padding: 0;
        background-color: rgba(255, 255, 255, 0.3);
        margin: 3vmin auto;
        width: 60%
    }

    #main-navigation ul li ul li {
        padding: 1vmin 0;
        margin: 0;
        border-color: rgba(0, 0, 0, 0.3);
    }

    #main-navigation ul li span {
        font-size: 2.8vmin;
        padding: 0;
    }

    #main-navigation ul li a {
        font-size: 3vmin;
        padding: 0;
    }

    #main-navigation ul li ul li {
        padding: 1.5vmin;
    }

    #main-navigation ul li ul span,
    #main-navigation ul li ul li a {
        font-size: 3vmin;
    }

    .btn, ul.pagination li {
        border-radius: 0.7vmin;
        padding: 0.75vmin 1.2vmin;
    }

    article.tabs {
        text-align: center;
    }

    article.tabs h1 {
        text-align: left;
    }

    ul.pagination,
    article.tabs nav.sub {
        text-align: left;
    }

    article.tabs nav.sub li {
        font-size: 2.2vmin;
    }

    div.max-height {
        max-height: unset;
        overflow-y: auto;
    }

    .content section.panel {
        width: 80vw;
        margin: 0 1vmin 2vmin;
    }

    .content section.panel table.fixed-height {
        height: 17.5vh;
    }

    .content h1.blue-header {
        font-size: 3.5vmin;
    }

    .content h1.blue-header-home,
    .content h1.blue-header-search,
    .content h1.blue-header-user,
    .content h1.blue-header-organisation,
    .content h1.blue-header-venue,
    .content h1.blue-header-note,
    .content h1.blue-header-quiz,
    .content h1.blue-header-question {
        font-size: 5vmin;
        padding-left: 9vmin;
    }

    nav.tabs ul li {
        padding: 2vmin;
        font-size: 2.5vmin;
    }

    h1, article.tabs h1 {
        font-size: 3vmin;
    }

    h2, article.tabs h2 {
        font-size: 3.5vmin;
    }

    th {
        font-size: 3.0vmin;
    }

    p, li, td, legend, label, button {
        font-size: 3vmin;
        text-align: left;
    }

    legend {
        padding: 1vmin;
    }

    label,
    span.fakeLabel {
        width: 38vw;
    }

    span.help-block {
        margin-left: 38vw;
    }

    .input-margin {
        margin-left: 38vw;
    }

    div.submit {
        padding-left: 38vw;
    }

    label.search-label {
        width: 28vw;
    }

    div.search-label {
        padding-left: 28vw;
    }

    p.search-label {
        margin-left: 28vw;
    }

    input[type=text],
    input[type=email],
    input[type=tel],
    input[type=password],
    input[type=number],
    input[type=date],
    input[type=datetime-local],
    textarea,
    .btn, ul.pagination li,
    select {
        font-size: 3vmin;
    }

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="datetime-local"],
    textarea,
    select {
        width: 40vw;
    }

    .input-wide input,
    .input-wide select,
    .input-wide textarea {
        width: 45vw;
    }

    .input-wide textarea {
        height: 15vh;
    }

    form div.inline-block.border {
        width: 35vw;
        float: left;
        padding: 0 1vmin 0 1vmin;
        margin: 0 1vw 1vw 0;
    }

    th.action {
        width: 35vw;
    }

    table.vertical th {
        min-width: 17vw;
    }

    .dashboard-left {
        width: 100%;
        float: none;
    }

    .dashboard-right {
        width: 100%;
        float: none;
        margin-left: 0;
    }

    video {
        max-width: 100%;
    }

}