html {
	scroll-behavior: smooth;
}
body {
	box-sizing:border-box;
}

.no_mobile {
	display:none;
}

img {
	max-width:100%;
}

/* name main grid elements */
main {
	display:grid;
	margin:0 auto;
}

header {
	grid-area: head;
}

nav {
	grid-area: menu;
}

article {
	/* ie11 */
	width:1152px;
	max-width:100vw;
	/* end */

	margin:0 auto;
	grid-area: page;
}

footer  {
	grid-area: foot;
}


/* mobile */
main {
	grid-template-areas:
		"menu"
		"head"
		"page"
		"foot";
}

article {
	display:grid;
}

aside#page_content {
	padding:2vw;
}


section#main_image {

}
	section#main_image img {
		display:block;
		margin:0 auto;
	}

section#main_image_info {
	padding:2vw;
}

	div#main_image_details {
		display:grid;
		grid-template-columns:repeat(1, 1fr);
	}

section#main_image_comments {
	padding:2vw;
}
	section#main_image_comments div.comment {
		padding:2vw;
		margin-bottom:2vw;
	}
	section#main_image_comments div.comment:last-child {
		margin-bottom:0;
	}
	section#main_image_comments div.comment>span {
		display:block;
	}





/* home page styles are different from the rest of the site */

article#home_page {

}

aside#home_page_content {
	padding:2vw;
}

section#home_page_latest_images {
	padding:2vw;
	display:grid;
	grid-gap:2vw;
	grid-template-rows:repeat(6,40vw);
}

	/* some layouts don't need the 10th image */
	section#home_page_latest_images>a:nth-child(10) {
		display:none;
	}

.comments_list {
	display:grid;
}


/* lists of pictures */

.picture_list {
	padding:2vw;
	display:grid;
	grid-template-columns:repeat(1, 1fr);
	grid-gap:2vw;
}

#subnav {
	display:grid;
}

.adminicon {
	display:block;
	height:16px;
	width:16px;
	float:right;
	opacity:.2;
	margin:0 0 2px 2px;
	}
		#main_image_details:hover .adminicon,
		:hover>.adminicon {
			opacity:1;
		}

	.adminicon.add {
		background-image:url(/admin/images/icons/add.png);
	}
	.adminicon.edit {
		background-image:url(/admin/images/icons/pencil.png);
	}
	.adminicon.delete {
		background-image:url(/admin/images/icons/delete.png);
	}
	.adminicon.view {
		background-image:url(/admin/images/icons/view.png);
	}


@media (min-width: 600px) {

	.no_mobile {
		display:initial;
	}

	main {
		grid-template-areas:
			"head"
			"menu"
			"page"
			"foot";
	}

	section#home_page_latest_images {
		grid-template-rows:repeat(5,30vw);
	}
		section#home_page_latest_images>a:first-child {
			grid-column: 1 / 4;
			grid-row: 1 / 3;
		}

		section#home_page_latest_images>a:nth-child(10) {
			display:initial;
		}

	.picture_list {
		grid-template-columns:repeat(3, 1fr);
	}
		.picture_list img {
			width:100%;
		}

}




@media (min-width: 800px) {

	.mobile_only {
		display:none !important;
	}

	section#home_page_latest_images {
		grid-template-rows:repeat(4,30vw);
	}
		section#home_page_latest_images>a:first-child {
			grid-column: 1 / 5;
			grid-row: 1 / 3;
		}

		section#home_page_latest_images>a:nth-child(10) {
			display:none;
		}

	.picture_list {
		grid-template-columns:repeat(4, 1fr);
	}

}




@media (min-width: 1152px) {

	main {
		grid-template-columns: 1fr 452px 700px 1fr;
		grid-gap:0;
		grid-template-areas:
			"head head menu menu"
			". page page ."
			"foot foot foot foot";
	}

	/* ie11 */
	header {float:left;min-width:50%;min-height:24px;}
	nav {float:right;min-width:50%;min-height:24px;}
	/* end*/

	section#main_image_info {
		padding:24px 0;
	}
	section#main_image_comments {
		padding:0;
	}

	section#main_image_comments div.comment {
		margin-bottom:0;
	}

	section#home_page_latest_images {
		padding:24px 0;

		display:-ms-grid;
		-ms-grid-columns:1fr 1fr 1fr;
		-ms-grid-rows:200px 200px 200px;

		grid-template-columns:repeat(3,1fr);
		grid-template-rows:repeat(4,230px);
		grid-gap:24px;
	}
		section#home_page_latest_images>a:first-child {

			-ms-grid-row:1;
			-ms-grid-column:1;

			grid-column: 1 / 3;
			grid-row: 1 / 3;
		}

		section#home_page_latest_images>a:nth-child(2) {
			-ms-grid-row:1;
			-ms-grid-column:2;
		}
		section#home_page_latest_images>a:nth-child(3) {
			-ms-grid-row:1;
			-ms-grid-column:3;
		}
		section#home_page_latest_images>a:nth-child(4) {
			-ms-grid-row:2;
			-ms-grid-column:1;
		}
		section#home_page_latest_images>a:nth-child(5) {
			-ms-grid-row:2;
			-ms-grid-column:2;
		}
		section#home_page_latest_images>a:nth-child(6) {
			-ms-grid-row:2;
			-ms-grid-column:3;
		}
		section#home_page_latest_images>a:nth-child(7) {
			-ms-grid-row:3;
			-ms-grid-column:1;
		}
		section#home_page_latest_images>a:nth-child(8) {
			-ms-grid-row:3;
			-ms-grid-column:2;
		}
		section#home_page_latest_images>a:nth-child(9) {
			-ms-grid-row:3;
			-ms-grid-column:3;
		}





		section#home_page_latest_images>a:nth-child(10) {
			display:none;
		}

	.picture_list {
		grid-template-columns:repeat(6, 1fr);
	}

	#subnav {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 100px;
	}

	footer>div:first-child {
		display:grid;
		grid-template-columns: 1fr 452px 700px 1fr;
	}
		footer>div h6 {
			grid-column: 2 / 3;
		}
		footer>div #footnav {
			grid-column: 3 / 4;
		}

}

.clear {
	clear:both;
}