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

@media (any-pointer: coarse) {
	#nav_block {
		line-height:1.5em;
		font-size:1.4em;
		width:160px !important;
	}
	#nav_block .nav ul {
		padding:0;
	}
	#nav_block a {
		padding: 0.8em;
		white-space: nowrap;
	}
	.content_photoblack, .content_photogray, .content_photowhite, .content3, .content2, .content1, .maincontent {
		margin-left:160px;
	}
	.longLinks {
		line-height:2em;
	}
	ul.touchPadding li {
		padding-bottom:16px;
	}
	div#footer {
		line-height: 1.6em;
	}
	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:10px;
		left:10px;
		z-index:10000;
		color:yellow;
	}

	#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:10px;
                right:10px;
                z-index:10000;
                color:yellow;
        }

	#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;
	}
	#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;
	}

}


@media only screen and (max-width: 1200px) {
	body>#right_block {
	    width: 130px;
	}
	.content3 {
	    margin-right: 152px;
	}
}