/* 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;}
    /*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; }


}


/* 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% }


}



/* 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) {}




/* replaces code from recollect3.css for testing */
@media only screen and (min-width: 751px) and (max-width: 1400px) {
        .video-js { width:380px!important; height:308px!important;}
        .avhero { height:560px!important;}
        .captions[style] { height:316px!important; }
        div.video, div.audio, div.captions { margin: 0; padding:0;}
    }