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


/*Accordion*/
.input-toggle-accordion {
input {
    display: none;
}

label {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    padding: 8px 22px;
    margin: 0 0 1px 0;
    cursor: pointer;
    background: #e6e1ff;
    border-radius: 5px;
    color: black;
    transition: ease .5s;
    position: relative;
}

label:hover {
    background: #000066;
    color: white;
}

label::after {
    content: '+';
    font-size: 22px;
    font-weight: bold;
    position: absolute;
    right: 10px;
    top: 2px;
}

input:checked + label::after {
    content: '-';
    right: 14px;
    top: 3px;
}

.content {
    background: #E9EFF4;
    padding: 10px 25px;
    border: 1px solid silver;
    margin: 0 0 1px 0;
    border-radius: 5px;
}

input + label + .content {
    display: none;
}

input:checked + label + .content {
    display: block;
}
}

.details-accordion {
details {
  margin: 5px;
}
details > * {
  padding: .75rem;
}
details > div {
  background: #E9EFF4;
  border-radius: 0 0 5px 5px;
}
summary {
  border-radius: 5px;
  font-size: 1.2em;
  font-weight: bold;
  color: black;
  background: #e6e1ff;
  cursor: pointer;
}
details[open] summary {
  border-radius: 5px 5px 0 0;
}
}


/*Reuse page styling */
.reuse-tabs {
  position:relative;
  margin:auto;
  max-width:940px;
}
.reuse-image {
  text-align: center;
}
/*reuse header grid*/
.reuse-header-grid {
  display: grid;
  grid-template-areas:
    'reuse-header-title reuse-header-geoid'
    'reuse-header-copyright reuse-header-geoid';
  grid-template-rows: max-content max-content;  
  grid-template-columns: 1fr 20ch;
  grid-row-gap: 2px;
  grid-column-gap: 5px;
  margin-bottom: 5px;
  #border: 1px solid red;
}
@media all and (max-width: 600px) {
  .reuse-header-grid {
  grid-template-areas: 
    'reuse-header-title'
    'reuse-header-geoid';
  grid-template-rows: max-content max-content max-content;
  grid-template-columns: 1fr;
  }
.reuse-header-copyright {
  display: none;
  }
}
.reuse-header-title {
  grid-area: reuse-header-title;
}
.reuse-header-title h2 {
  margin-bottom: 2px;
}
.reuse-header-geoid {
  grid-area: reuse-header-geoid;
  text-align: center;
  background: cornsilk;
  align-self: center;
  padding: 5px;
}
.reuse-header-copyright {
  grid-area: reuse-header-copyright;
}

/*reuse donate sticky grid*/
.reuse-donate-grid {
  display: grid;
  grid-template-areas:
    'reuse-donate-button reuse-donate-useful reuse-donate-link'
    'reuse-donate-button reuse-donate-message reuse-donate-link';
  grid-template-rows: max-content max-content;  
  grid-template-columns: 1fr 1fr 1fr;
  grid-row-gap: 2px;
  grid-column-gap: 5px;
  margin-bottom: 5px;
  background-color: #3AD271;
  padding:10px;
  text-align:center;
  position: -webkit-sticky;
  position: sticky;
  bottom: 0;
  
  a {
  color: #00008b;
  }
}
@media all and (max-width: 800px) {
  .reuse-donate-grid {
  grid-template-areas: 
    'reuse-donate-useful'
    'reuse-donate-button';
  grid-template-rows: max-content max-content;
  grid-template-columns: 1fr;
  }
.reuse-donate-message {
  display: none;
  }
.reuse-donate-link {
  display: none;
  }
}
.reuse-donate-button {
  grid-area: reuse-donate-button;
  align-self: center;
}
.reuse-donate-useful {
  grid-area: reuse-donate-useful;
  align-self: center;
  font-weight: bold;
  margin-bottom: 3px;
}
.reuse-donate-message {
  grid-area: reuse-donate-message;
  align-self: center;
}
.reuse-donate-link {
  grid-area: reuse-donate-link;
  align-self: center;
}
.reuse-ccbox-grid {
  display: grid;
  grid-template-areas:
    'reuse-ccbox-logo reuse-ccbox-message';
  grid-template-rows: max-content;  
  grid-template-columns: max-content 1fr;
  grid-row-gap: 2px;
  grid-column-gap: 5px;
  margin: auto;
  background-color: #E9EFF4;
  max-width: 750px;
}

.reuse-ccbox-logo {
  grid-area: reuse-ccbox-logo;
  padding:10px;
}
.reuse-ccbox-message {
  grid-area: reuse-ccbox-message;
  text-align: left;
  align-self: center;  
}
.reuse-ccdeed-grid {
  display: grid;
  grid-template-areas:
    'reuse-ccdeed-requirements reuse-ccdeed-image';
  grid-template-rows: max-content;  
  grid-template-columns: 1fr max-content;
  grid-row-gap: 2px;
  grid-column-gap: 5px;
  margin: auto;
}
@media all and (max-width: 600px) {
  .reuse-ccdeed-grid {
  grid-template-areas: 
    'reuse-ccdeed-image'
    'reuse-ccdeed-requirements';
  grid-template-rows: max-content max-content max-content;
  grid-template-columns: 1fr;
  }
}
.reuse-ccdeed-requirements {
  grid-area: reuse-ccdeed-requirements;
  text-align: left;
  align-self: center;
  background-color: #e6e1ff;
}
.reuse-ccdeed-image {
  grid-area: reuse-ccdeed-image;
  padding:10px;
  text-align: center;
}
.reuse-credit-example {
  background-color: #E9EFF4;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  width: fit-content;
  overflow: auto;
  margin: auto;
}
.reuse-diffimage {
  background-color: gold;
  border-radius: 10px;
  padding: 10px;
}
.reuse-reminders {
  background-color: #e6e1ff;
  border-radius: 10px;
  padding: 2px;
  h3 {
    text-align: center;
  }
}
.reuse-stamped-image {
  background-color: #e6e1ff;
  border-radius: 10px;
  padding: 10px;
  img {
    display: block;
    margin: auto;
    max-width: 95%;
  }
  h3 {
    text-align: center;
  }
}
.reuse-stamping-options {
  background-color: #E9EFF4;
  border-radius: 10px;
  padding: 10px;
}
.reuse-stampingopt-grid {
  display: grid;
  grid-template-areas:
    'reuse-stampingopt-param reuse-stampingopt-input reuse-stampingopt-desc';
  grid-template-rows: max-content;  
  grid-template-columns: 2fr 2fr 3fr;
  grid-row-gap: 2px;
  grid-column-gap: 5px;
  margin: auto;
}
@media all and (max-width: 850px) {
  .reuse-stampingopt-grid {
  grid-template-areas: 
    'reuse-stampingopt-param reuse-stampingopt-input'
    'reuse-stampingopt-desc reuse-stampingopt-desc';
  grid-template-rows: max-content max-content;
  grid-template-columns: 1fr 1fr;
  /*background-color: #F6F9FB;*/
  padding: 2px;
  }
}
.reuse-stampingopt-param {
  grid-area: reuse-stampingopt-param;
  text-align: left;
  align-self: center;
  label {
    font-size: 1em !important;
    font-weight: bold;
  }
  label::after {
    content: ':';
  }
}
.reuse-stampingopt-input {
  grid-area: reuse-stampingopt-input;
  text-align: left;
  align-self: center;
  #background-color: yellow;
}
.reuse-stampingopt-desc {
  grid-area: reuse-stampingopt-desc;
  text-align: left;
  align-self: center;
  #background-color: green;
}
.reuse-copyright-warning {
  background-color: #f4c7c3;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  margin: auto;
}
.reuse-codepreview {
  display: block;
  background-color: white;
  border: 1px solid silver;
  max-width: 700px;
  margin: auto;
  padding: 10px;
}
.reuse-hotlink-warning {
  background-color: #f4c7c3;
  border-radius: 10px;
  padding: 2px;
  h3 {
    text-align: center;
  }
}
.reuse-wikipedia-warning {
  background-color: #ffff66;
  border-radius: 10px;
  padding: 2px;
  h3 {
    text-align: center;
  }
}
.forum-gsd-grid {
  display: grid;
  grid-template-areas:
    'forum-gsd-gr forum-gsd-location'
    'forum-gsd-thumbnails forum-gsd-thumbnails'
    'forum-gsd-count forum-gsd-search';
  grid-template-rows: max-content max-content max-content;  
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 2px;
  grid-column-gap: 5px;
  margin: 10px 0px 0px 10px;
  width: 100%;
}
.forum-gsd-grid > div {
  min-width: 0px;
}
@media all and (max-width: 800px) {
  .forum-gsd-grid {
  grid-template-areas:
    'forum-gsd-gr'
    'forum-gsd-location'
    'forum-gsd-thumbnails'
    'forum-gsd-search'
    'forum-gsd-count';
  grid-template-rows: max-content max-content max-content max-content max-content;  
  grid-template-columns: 1fr;
  grid-row-gap: 2px;
  grid-column-gap: 5px;
  margin: 10px 0px 0px 10px;
  width: 100%;
  }
}

div.forum-gsd-gr {
  grid-area: forum-gsd-gr;
  h3 {
    margin-top: 0;
    margin-bottom: 0;
  }
}
div.forum-gsd-location {
  grid-area: forum-gsd-location;
  text-align: right;
}
@media all and (max-width: 800px) {
  div.forum-gsd-location {
    text-align: left;
  }
}
div.forum-gsd-thumbnails {
  grid-area: forum-gsd-thumbnails;
  text-align: center;
}
div.forum-gsd-thumbnails-none {
  background-color: indigo;
  color: white;
  border-radius: 10px;
  padding: 5px;
  min-width: 0px;
}
div.forum-gsd-count {
  grid-area: forum-gsd-count;
  margin: 10px 0px 10px 0px;
}
div.forum-gsd-search {
  grid-area: forum-gsd-search;
  text-align: right;
  margin: 10px 0px 10px 0px;
}



.forum-gsd-thumbs-flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  height: 512px;
  overflow-x: auto;
}
@media all and (max-width: 850px) {
  .forum-gsd-thumbs-flex-container {
    flex-wrap: nowrap;
    overflow-y: auto;
    height: auto;
    overflow-x: none;
  }
}
.forum-gsd-thumbs-flex-photo {
  display: flex;
  flex-wrap: wrap;
  text-align:center;
  padding-bottom:1em;
  width:150px;
  font-size:0.8em;
  padding: 5px;
  margin: 5px;
  border: silver 1px solid;
}
.forum-gsd-thumbs-attribution
{
  text-align: center;
  width: 100%
}