/* tablet */
@media only screen and (max-width: 790px) {
    body {
        /* STOP MOVING AROUND! */
        overflow-x: hidden;
        overflow-y: scroll !important;
    }

    /* LS 2016-08-23: Hiding as I think it's to do with a javascript function to prevent scrolling when popups are visible in mobile that doesn't work anyway */
    /*body.modal-open {
		 block scroll for mobile;
		// causes underlying page to jump to top;
		// prevents scrolling on all screens
		overflow-y: hidden;
		position: fixed;
	}*/

    div.the-body {
        margin-left: 0;
        margin-top: 0;
    }

    /*hide orig header */
    #header {
        display: none;
    }

    /*#taxnav { display:none; }*/

    /*#feature_1_5{ height: auto!important;} */
    #feature_1_5 img {
        min-height: 0 !important;
    }

    #rMenuCont {
        display: table;
        width: 100%;
        height: 50px;
    }

    #rMenuBurg,
    #rTaxBurg {
        display: table-cell;
        width: 40px;
    }

    #rMenuCent {
        display: table-cell;
        width: auto;
        font-size: 18pt;
        text-align: center;
        line-height: 20px;
        vertical-align: middle;
    }

    #rMenuSearch {
        display: table-cell;
        width: 40px;
        text-align: right;
    }

    #rMenuCent #client_logo_responsive img {
        height: 40px;
    }

    #rMenuBurg span.sprite,
    #rTaxBurg span.sprite,
    #rMenuSearch span.sprite {
        background-image: url('/img/mobile_sprite_icons.png');
        background-repeat: no-repeat;
    }

    #rMenuBurg span.sprite,
    #rTaxBurg span.sprite {
        display: block;
        height: 41px;
        width: 41px;
        background-position: -42px 0px;
        margin: 4px;
    }

    #rMenuBurg span.sprite:hover,
    #rTaxBurg span.sprite:hover {
        background-position: -42px -43px;
    }

    #rMenuSearch span.sprite {
        display: block;
        height: 41px;
        width: 41px;
        background-position: 0px 0px;
        margin: 4px;
    }

    #rMenuSearch span.sprite:hover {
        background-position: 0px -43px;
    }

    /* hiding menus in responsive */
    #menu_bar {
        display: none;
        position: absolute;
        float: none;
        left: 0px;
        top: 50px;
        z-index: 11;
        height: auto;
    }

    #search_menu {
        display: none;
        position: absolute;
        left: auto;
        right: 0px;
        top: 50px;
        padding: 10px;
        width: 279px;
    }

    #admin_menu2 {
        display: none;
    }

    /* vertical stack containers */
    .resStack {
        width: 100% !important;
        position: relative !important;
        clear: both;
        margin: 0 !important;
        display: block;
        float: none !important;
        min-width: 100% !important;
    }

    /* override container widths */
    #wrap,
    html,
    body,
    div#main,
    div#wrap,
    #main_content {
        min-width: 0;
        width: 100%;
        min-height: 0;
    }

    .avhero {
        display: table;
        height: auto !important;
        width:94%;
        margin:auto;
    }

    /*video / Audio */
    div.audio {
        display: block;
    }

    /*table-caption*/
    div.video {
        display: block;
    }

    /*table-caption*/
    div.captions {
        display: table-footer-group;
        width: inherit !important;
        height: inherit !important;
    }

    /* image */
    /* #main_content_wrap { display: table-header-group; } */
    #main_content_wrap {
        display: table-header-group;
    }

    #main_content,
    div.the-header {
        top: 0;
    }

    /*@ST 29/10/2019 R1X-1590: Dev task - Audio item - doesn't work well on mobile phone. Changed styles*/
    #main_content {
        display: flex;
        flex-direction: column;
    }

    #viewport {
        order: 1;
    }

    div.audio {
        margin-bottom: 20px;
    }

    #sidebar {
        order: 2;
        width: auto;
        height: auto !important;
    }

    /*
    #main_content_wrap:after{
      content:'---------------------------------------------------------------------------------------------------------------------';
      max-height:0;
      overflow:hidden;
      display:block;
      word-break:break-all;
    }
*/

    #viewport {
        display: block;
        width: inherit !important;
        height: inherit !important;
        text-align: left;
    }

    /*table-caption*/
    #viewport.justMetadata {
        display: block !important;
    }

    #toolbox {
        display: table-footer-group;
        width: 100%;
        min-height: 0;
        float: none;
        padding: 0;
    }

    #thezone {
        width: 100%;
        height: inherit !important;
    }

    #sidebar {
        display: block;
        float: none;
        box-shadow: none;
    }

    /*table-footer-group*/

    #toggle-sidebar {
        display: none;
    }

    /* document */
    #miniMeWindow {
        display: none;
    }

    .navigation a {
        width: 2em;
    }

    #jumpto {
        width: 100px;
    }

    #page-nav {
        font-size: 14px;
    }

    /* stuff*/
    /*
    td.stuffMain, table td.stuffSide {
    	display: block;
    	width: 100%;
    }
    */
    div.profilepics {
        margin-right: 0px !important;
    }

    table.stuffTable {
        display: table;
        table-layout: fixed;
        width: 100%;
    }

    td.stuffSide .profilepics {
        display: table-header-group;
    }

    td.stuffSide {
        display: table-caption;
    }

    td.stuffMain {
        display: table-footer-group;
    }


    .stuffSide div.profilepics {
        display: table-cell;
        width: 100%;
    }

    .stuffSide div.profilepics img {
        width: 100% !important;
        height: auto;
    }

    img.profilepic,
    span.profilepictxt {
        -moz-border-radius: 0px;
        border-radius: 0px;
        box-shadow: none;
        margin: 0px;
        display: block;
    }

    /* Next 2 styles centre any extra wide thumbnails in collections and hides the overflow. */
    div.ichild {
        width: 250px;
        overflow: hidden;
        text-align: center;
    }

    div.stuffThumbs .ichild img {
        vertical-align: top;
        margin: 0 -9999% 0 -9999%;
        border: none;
    }

    /* pop up dialogs (add tags/recollections etc) and forms */
    .ui-dialog,
    #MessageDisplayForm input,
    #MessageDisplayForm textarea,
    #MessageCreateForm textarea,
    #MessageCreateForm input,
    #UserIndexForm input,
    #UserLoginForm input,
    #UserRegisterForm input,
    #UserForgotForm input,
    #receditForm textarea {
        width: 98% !important;
        max-width: 550px !important;
        margin: 5px !important;
    }

    div.aRecollection,
    span.recdate {
        color: #333333;
    }

    /* all mobile is white background - so override to dark font */
    .blocky {
        margin: 0px !important;
        width: 95% !important;
    }

    #NodeRecollection,
    .autoLookup {
        width: 100%;
    }

    div.popped_content table {
        width: 100%;
    }

    .popped_content td {
        display: block;
    }

    /* map pop up */
    #addatable td {
        display: table-row-group;
    }

    /* contact us form - this is a CLASS, other pages use ID #main_content (so not affected) */
    /*.main_content { width: 98%; }  LS 2016-08-22: Is this necessary?  Affects any page editor page not just contact us */


    table#dragdroptable #allbookmarks {
        display: block;
        width: 98%;
    }

    table#dragdroptable #mygroups {
        display: block;
        width: 98%;
    }

    /* NEW stuff DIVS */
    div#StuffCont {
        display: table;
        width: 100%;
    }

    div.StuffMainCont {
        display: table-cell;
        width: 100%;
    }

    div.StuffSideCont {
        display: table-caption;
        width: 100%;
    }

    #main {
        display: table;
        width: 100%;
    }

    /* contributions */
    table.mandTable {
        width: inherit;
    }

    .mandTable td,
    .copyTable td,
    .outerwrapper td,
    .optTable td {
        display: table-row-group;
    }

    .mandTable label,
    .copyTable.colA>label,
    .outerwrapper label,
    .optTable label {
        font-weight: bold;
    }

    .optTable .dispRad label {
        font-weight: normal;
    }

    table.outerwrapper textarea {
        width: auto;
    }

    .created,
    .lastedit,
    .type,
    .thumbnails {
        display: none;
    }

    /*div.submit { display: block; padding-top:10px; }*/
    .mandatoryDiv,
    .optionalDiv {
        padding: 0px !important;
        width: 98% !important;
    }

    div.cc_i_txt img {
        width: 90px;
    }


    /* fix opacity problem when disable jquery-ui draggable */
    #viewport .hero.ui-state-disabled.ui-draggable-disabled {
        opacity: 1;
    }

    /* make responsive colours all the same (dark themes have dark backgrounds on sidebars!) */
    #thezone {
        background-color: #ffffff;
        margin-bottom: 0;
    }

    #thezone,
    #thezone strong,
    #thezone li,
    .cc_i_txt {
        color: #333333;
    }

    #viewport.justMetadata div.portlet-header,
    #thezone .portlet-header {
        margin-right: 0px !important;
    }

    #sidebar .portlet-header {
        /*LS 2016-08-24: Maybe not...*/
        margin: 0;
    }

    #footer {
        margin: 0;
        height: auto;
        padding: 0;
    }

    #footer-links,
    #copyright {
        float: none;
        width: 100%;
    }

    #copyright {
        margin-left: 0;
        text-align: left;
    }

    /*hide orig toolbox */
    /*#toolbox{display:none;}*/
    #toolbox #toggle-toolbox,
    span.togwrap {
        display: none;
    }

    #toolbox #searchbacknextinheader {
        display: none;
    }

    #toolbox .nodeactions {
        display: none;
    }

    #toolbox #tools {
        display: none;
    }

    #toolbox #sharemenu {
        display: none;
    }

    #main_content_wrap {
        margin: 0px;
        background: #ffffff;
        color: #333;
    }

    /*.tagCloud	{  Breaks pages that only have tagcloud
		display: none;
	}*/

    #issue-nav,
    #page-nav {
        display: block;
        /*float: none;*/
    }

    div.the-header h2,
    div.the-header h1 {
        clear: both;
    }

    /*a#next_page.next	{
		float: left;
		position: relative;
		margin-left: -13px;
	}*/
    .grid .span_12_of_12 {
        width: auto;
    }

    .grid .span_11_of_12 {
        width: auto;
    }

    .grid .span_10_of_12 {
        width: auto;
    }

    .grid .span_9_of_12 {
        width: auto;
    }

    .grid .span_8_of_12 {
        width: auto;
    }

    .grid .span_7_of_12 {
        width: auto;
    }

    .grid .span_6_of_12 {
        width: auto;
    }

    .grid .span_5_of_12 {
        width: auto;
    }

    .grid .span_4_of_12 {
        width: auto;
    }

    .grid .span_3_of_12 {
        width: auto;
    }

    .grid .span_2_of_12 {
        width: auto;
    }

    .grid .span_1_of_12 {
        width: auto;
    }

    /*.idxtable td { display: block }*/

    /* LS 2016-08-25: This is mostly for custom home pages */
    .hideForResponsive,
    .idxtable .hideForResponsive {
        display: none;
    }

    /* LS 2016-08-26: Tax Nav */

    #rTaxCont {
        width: 100%;
        height: 30px;
        background-color: #efefef;
        display: inline-block;
    }

    #rTaxCont h3 {
        padding-left: 8px;
        padding-top: 6px;
        margin-top: 0;
    }

    #rTaxNav {
        position: absolute;
        top: 80px;
        left: 0;
        background-color: #efefef;
        height: auto;
        width: 100%;
        z-index: 10;
        display: none;
        border-top: 1px solid #6d6e71;
    }

    #rTaxNav ul li a {
        display: block;
        padding: 3px;
        text-decoration: none;
        font-size: 14px;
        color: #6d6e71;
    }

    #rTaxNav ul {
        list-style: none;
        position: relative;
        display: inline-table;
        padding-left: 6px;
    }

    #rTaxNav ul ul {
        padding-left: 40px;
    }

    #rTaxNav ul li,
    #rTaxNav ul ul li {
        list-style: none;
    }

    #rTaxNav ul li a:hover {
        color: #fe673d;
    }

    .rsubmenuArrow {
        border: 10px solid transparent;
        width: 0;
        height: 0;
        position: absolute;
        right: 10px;
        display: block;
        border-top-color: rgba(34, 34, 34, 0.85);
        top: 60px;
    }

    .arrowup {
        border-top-color: transparent;
        border-bottom-color: rgba(34, 34, 34, 0.85);
        top: 50px;
    }

    /* Top Votes */
    div.top5 img {
        width: 49%
    }

    div.therest img {
        width: 24%
    }

    /* Antarctica custom pages all seem to have tables that are 75% wide */
    div.blockOcode table {
        width: 100% !important;
    }

    /* Some clients have more than one logo, hide them both */
    .sidelogo {
        display: none;
    }

    /* Some clients need some sections to wrap */
    span.heading1,
    div.grandchildren,
    fieldset.blockhead {
        white-space: normal !important;
    }

    /* Adjustments for responsive video */
    .video-js {
        width:100%!important;
        height:100%!important;
        position: relative;
    }
    .vjs-audio {
        height:56.25vw!important;
    }

    .avhero {
        height: 100% !important;
        width:94%;
        margin:auto;
    }
    .video-js .vjs-tech {
        height: auto !important;
        position: relative;
        max-width: 100%;
      }

    fieldset.avwrap {
        border:none;
        padding:0;
        margin-top:10px;
    }
    .avwrap div.video,
    fieldset.avwrap {
         margin-left:0;
     }
    /* Adjustments for responsive video end */
}




/* other width specific rules - ()ie based on image widths)*/
/* unique */
@media (max-width: 519px) {

    /*.main_content{ display:table; } LS 2016-08-22: Necessary? */
    .main_content>p.pagelinkslong {
        display: block;
    }

    div.sr2 {
        width: 95%;
        height: 150px;
        padding: 8px;
        overflow: hidden;
        border: 1px solid #f8f8f8;
        -moz-border-radius: 4px;
        border-radius: 4px;
        margin: 0 1px 1px 0;
    }

    div.sr2>a {
        display: table-cell;
        width: 150px;
    }

    div.sr2 img {
        height: 150px;
        width: 150px;
    }

    div.sr2 .metaCont {
        display: table-cell;
        padding-left: 10px;
        word-wrap: break-word;
    }

    div.sr2 a.sr2title {
        margin-top: 0;
    }

    /* Top Votes */
    div.top5 img {
        width: 99%
    }

    div.therest img {
        width: 48%
    }


/* Stop the caption input from overflowing the viewport  */
   #captext {
        width:98%!important;
    }

}



/* mobile */
@media (max-width: 400px) {
    div.sr2 {
        height: 100px;
    }

    div.sr2 img {
        height: 100px;
        width: 100px;
    }

    div.sr2>a {
        display: table-cell;
        width: 100px;
    }
}

/* phablet (large phone) */
@media (max-width: 550px) {}



/* laptop */
@media (max-width: 1300px) {}