/* Add Padding around tap-targets, do this for touch devices, rathe specifically smalls screens! */

@media (any-pointer: coarse) {
	#nav_block {
		line-height:1.4em;
		font-size:1.4em;
		width:160px !important;
	}
	#nav_block .nav ul {
		padding:0;
	}
	#nav_block a {
		padding: 0.8em 0.4em;
		white-space: nowrap;
	}
	#nav_block .nav > ul > li {
		padding-left:3px;
	}
	#nav_block .newsbody, #nav_block .newsfooter {
        	line-height:1.2rem;
	}
	.content_photoblack, .content_photogray, .content_photowhite, .content3, .content2, .content1, .maincontent {
		margin-left:160px;
	}
	.longLinks {
		line-height:2em;
	}
	ul.touchPadding li {
		padding-bottom:1em;
	}
	div.tagbar {
		line-height:1.8em;
	}
	div#footer {
		line-height: 1.5em;
	}
	div#footer a {
		white-space: nowrap;
	}
}

/* Customise the page for smalls screens. Mostly about hiding the sidebar, menu, and search by default */

@media only screen and (max-width: 712px) {

	#header {
		padding-left:40px;
	}
	#header h1 {
		display: inline-block;
		height: 40px;
		background-size:139px 40px;
		background-repeat: no-repeat;
	}

	.content_photoblack, .content_photogray, .content_photowhite, .content3, .content2, .content1, .maincontent {
		margin-top:18px;
		margin-left:0;
		border-left:none;
	}

	/* ----------------- */

	label#nav_label {
		display:block;
		position:absolute;
		top:7px;
		left:10px;
		z-index:10000;
		color:yellow;
		font-size:1.3em;
	}

	#nav_block {
		top:44px;
		display:none;
		border-right:1px solid silver;
		max-height: calc( 100vh - 44px );
		overflow-x: auto;
	}
	#nav_block > div > ul {
		padding-left:4px;
	}
	input#nav_toggle:checked ~ #nav_label:before {
		content: "<";
	}
	input#nav_toggle:checked ~ #nav_block {
		display:block;
		position:fixed;
		z-index:10000;	
	}

	/* ----------------- */

        label#search_label {
                display:block;
                position:absolute;
                top:8px;
                right:10px;
                z-index:10000;
		text-shadow: 1px 1px 0px white, -1px 1px 0px white, 1px -1px 0px white, -1px -1px 0px white;
		font-size:1.2em;
        }

	#search_block {
		display:none;
	}
	input#search_toggle:checked ~ #search_label:after {
		content: "^";
	}

	input#search_toggle:checked ~ #search_block {
		display:block;
		position:fixed;
		top:44px;
		left:0px;
		right:0px;
		width:100%;
		z-index:10000;	
		background-color:#eeeeff;
		min-height:160px;
	}
	#search_block #search {
		position:relative;
		top:initial;
		left:initial;
	}
	#searchbutton {
		font-size: 1em;
		background:none;
		border:1px solid silver;
		border-radius: 6px;
		width: initial;
	}
	#search_block #searchform #searchoptions {
		display:block;
		margin-left:auto;
		top:inherit;
		left:inherit;
		position:inherit;
	}
	#searchoptions ul {
		margin:0;
		padding: 0 0 0 1em;

	}
	#searchoptions ul li {
		list-style-type: none;
	}

	/* ----------------- */

	#login {
                top:45px;
                left:initial;
		right:1em;
		color:#000066;
		white-space: nowrap;
	}
	#login a {
		color:blue;
	}

  /*Hide recent images sidebar on small screens */
  
  #right_block {
                display:none;
        }
        .content3 { margin-right:0}
}
  
	/* Above is changes to the template, any custom CSS for content, will go below */

	body iframe.full_screen {
		padding-top: 52px;
	}

	form.simpleform {
		min-width: inherit;
		max-width: 100%;
	}
	form.simpleform fieldset {
		padding:3px;
	}
	form.simpleform div.field label {
		display:block;
		float:inherit;
	}
	form.simpleform div.field input,
	form.simpleform div.field textarea, 
	form.simpleform div.field select {
		max-width: calc( 100vw - 50px );
	}
	form.simpleform div.fieldnotes {
		margin-left:5px;
	}

}

/*Three column responsive layout */
.threecolsetup{
	box-sizing:border-box;
}
.threecolumn{
	float:left;
	width:100%;
	padding:0 8px;
}
.threecolumn h3{
	color: black;
	text-align: center;
	background: silver;
  border-radius: 10px;
  padding: 2px;
}
@media (min-width:1000px){
	.threecolumn{
		width:33.33333%;
	}
}
.content_photoblack  .threecolumn h3 {
  background-color:#333333;
  color:cyan
}

.content_photogray  .threecolumn h3 {
  background-color:#cccccc;
}

/*Two column responsive layout */
.twocolsetup{
	box-sizing:border-box;
}
.twocolumn{
	float:left;
	width:100%;
	padding:0 8px;
}
.twocolumn h3{
	color: black;
  font-weight:bold;
	text-align: center;
	background: silver;
  border-radius: 10px;
  padding: 2px;
}
@media (min-width:800px){
	.twocolumn{
		width:50%;
	}
}
.content_photoblack  .twocolumn h3 {
  background-color:#333333;
  color:cyan
}

.content_photogray  .twocolumn h3 {
  background-color:#cccccc;
}

/*Collapsing menus on small screens */
.collapsible {
  background-color: whitesmoke;
  color: black;
	font-family: "Georgia", serif;
	font-weight: bold;
  cursor: pointer;
  padding: 5px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.0em;
  border-radius: 5px;
  margin-bottom: 2px;
}

.collapsible:hover {
  background-color: Gainsboro;
}

.collapsedcontent {
  padding: 0 18px;
  display: none;
  overflow: hidden;
}
@media (min-width:800px){
	.collapsedcontent{
		display: block;
	}
  .collapsible {
    background-color: white;
  }
}

/*Make Report tables responsive with 700px break point*/
@media (max-width: 700px) {
	.report.width700 thead tr {  /* hide the header row by default */
        	display:none;
	}
	.report.width700.sortable thead tr { /* but if sortable re-enable it and display as buttons */
		display: flex;
		justify-content: space-between;
   		flex-wrap: wrap;
   		padding:10px;
   		gap:8px;
   		white-space:nowrap;
	}
	.report.width700 tr, .report.width700 td, .report.report.width700 th, .report.width700 thead, .report.width700 tbody, table.report.width700 {
		display: block;
	}

	.report.width700 tbody tr:nth-child(2n+1) {
		background-color: #eee;
	}

	.report.width700 tbody tr td::before {
		display: inline-block;
		width: 25%;
		min-width: 100px;
		margin-right: 10px;
		font-weight: bold;
	}

	.report.width700 tbody tr td::before {
		content: attr(data-title);
	}
	.report.width700 td {
		text-align: left !important;
	} 
}

/*Make Report tables responsive with 1000px break point*/
@media (max-width: 1000px) {

	.report.width1000 thead tr {  /* hide the header row by default */
        	display:none;
	}
	.report.width1000.sortable thead tr { /* but if sortable re-enable it and display as buttons */
		display: flex;
		justify-content: space-between;
   		flex-wrap: wrap;
   		padding:10px;
   		gap:8px;
   		white-space:nowrap;
    	}
	.report.width1000 tr, .report.width1000 td, .report.width1000 th, .report.width1000 thead, .report.width1000 tbody, table.report.width1000 {
		display: block;
	}

	.report.width1000 tbody tr:nth-child(2n+1) {
		background-color: #eee;
	}

	.report.width1000 tbody tr td::before {
		display: inline-block;
		width: 25%;
		min-width: 100px;
		margin-right: 10px;
		font-weight: bold;
	}

	.report.width1000 tbody tr td::before {
		content: attr(data-title);
	}
	.report.width1000 td {
		text-align: left !important;
	} 
}