@charset "utf-8";
/*@import url(/scripts/styles/maps.css);*/

/* CSS Document */

@media screen and (min-width: 750px)
{
	.navMap {grid-area: navmap; margin: 10px auto;}
	.menuPhoto {grid-area: photo;}
	#googleMap {grid-area: tpmap; align-self: flex-end; margin: 0 0 1rem; height: calc(100% - 1rem); } 
	/*.menuPhotoCaption {grid-area: caption;}*/
	.menuDiv {grid-area: menu;} /* position: relative;*/
	/*#regionalMap {grid-area: region;}*/

	.bigMap {grid-template-areas: 'tpmap menu';}
	.areaMap {grid-template-areas: 'photo menu' 'photo tpmap';}/* 'caption .'*/
	
	.stdMenu {grid-template-areas: 'photo menu';}
	.stdMap {grid-template-areas: 'navmap menu';}
	.guideMap {grid-template-areas: 'navmap menu';}
	#regionalMap {position: absolute; bottom: 10px; left: 10px; z-index: 20;}
	
	/*.guideMap {justify-content: center;  column-gap: 1rem;}*/
	/*.btnTPMap {right: 0; bottom: 0;}*/
}

#main-content {position: relative;}
.menuContainer {clear: both; display: grid; grid-row-gap: 0.5rem;}
@media screen {.menuContainer {background-image: var(--galleryImage); background-color: var(--galleryBackground);}}
.btnMenu  {position: absolute; top: 0; right: 0; z-index: 10;}

/*.subMenu {margin: 0 0 0.5rem 1rem;}*/
.subMenu h2 {color: var(--galleryYellow); margin: 10px 0 0;}
.subMenu ::marker {content: url(/images/bullet.gif);} 
.subMenu li {padding: 0 0 0 0.5rem; margin: 0 0 0 1rem;}

/*.stdMap {grid-gap: 1rem;}*/
.tp_menu {min-width: 100%; min-height: 250px;}
.btnTPMap, .btnTPMapAdd {left: -1.5rem; bottom: 0; right: auto;}

.navMap {background-repeat: no-repeat; background-size: contain; width: 100%;}
.menuPhoto {margin: auto;}
.galImg {width: 350px; border: thick inset #6B8E23; object-fit: cover;}
.menuPhotoCaption {font-size: x-small; margin: 0; text-align: center; height: 1rem;}

@media screen
{
	.menuContainer {color: var(--galleryYellow); border: thick ridge var(--borderYellow); border-radius: 7px; box-shadow: 2px 2px 4px Black; padding: 10px;}
	
	.mapList {z-index: 0; position: relative; height: 100%; list-style: none;}
	/*.mapList li {display: block;}*/
	.mapList .block {background-image: none;}
	.mapList a {position: absolute; width: 25px; height: 25px; display: block; background-image: var(--buttonMap); background-repeat: no-repeat; /*width: var(--sg_iconsize); height: var(--sg_iconsize)*/
        z-index: 10; text-indent: -3000px; overflow: hidden;}
	/*.mapList a:hover, .mapList a:active {border: none;}*/
	/*
	.star	{background-position:    0    0;}
	.foot	{background-position: calc(var(--sg_iconsize) x -1)  0;}
	.photo	{background-position: calc(var(--sg_iconsize) x -2)  0;}
	.sStar	{background-position: calc(var(--sg_iconsize) x -3)  0;}
	.rly	{background-position: calc(var(--sg_iconsize) x -4)  0;}
	.ftstar	{background-position: calc(var(--sg_iconsize) x -5)  0;}
	.zoom	{background-position: calc(var(--sg_iconsize) x -6)  0;}
	.dot	{background-position: calc(var(--sg_iconsize) x -7)  0;}
	/*.genGal	{background-position: -200px  0;}* /

	.star:hover, .star:focus, .star:active			{background-position:    					  0   calc(var(--sg_iconsize) x -1);}
	.foot:hover, .foot:focus, .foot:active			{background-position: calc(var(--sg_iconsize) x -1) calc(var(--sg_iconsize) x -1);}
	.photo:hover, .photo:focus, .photo:active		{background-position: calc(var(--sg_iconsize) x -2) calc(var(--sg_iconsize) x -1);}
	.sStar:hover, .sStar:focus, .sStar:active		{background-position: calc(var(--sg_iconsize) x -3) calc(var(--sg_iconsize) x -1);}
	.rly:hover, .rly:focus, .rly:active				{background-position: calc(var(--sg_iconsize) x -4) calc(var(--sg_iconsize) x -1);}
	.ftstar:hover, .ftstar:focus, .ftstar:active	{background-position: calc(var(--sg_iconsize) x -5) calc(var(--sg_iconsize) x -1);}
	.zoom:hover, .zoom:focus, .zoom:active			{background-position: calc(var(--sg_iconsize) x -6) calc(var(--sg_iconsize) x -1);}
	.dot:hover, .dot:focus, .dot:active				{background-position: calc(var(--sg_iconsize) x -7) calc(var(--sg_iconsize) x -1);}
	/*.genGal:hover, .genGal:focus {background-position: -200px calc(var(--sg_iconsize) x -1)px;;}*/

	/* N.B. These affect NavMaps only. Google Maps and Earth use other mechanisms */
	
	#mapList {
		--offsetYout:			0;
		--offsetYover:		-25px;
		
		--offsetXstar:			0;
		--offsetXfoot:		-25px;
		--offsetXphoto:		-50px;
		--offsetXsStar:		-75px;
		--offsetXrly:		-100px;
		--offsetXftstar:	-125px;
		--offsetXzoom:		-150px;
		--offsetXdot:		-175px;
	}
	
	.star	{background-position: var(--offsetXstar)	var(--offsetYout);}
	.foot	{background-position: var(--offsetXfoot)	var(--offsetYout);}
	.photo	{background-position: var(--offsetXphoto)	var(--offsetYout);}
	.sStar	{background-position: var(--offsetXsStar)	var(--offsetYout);}
	.rly	{background-position: var(--offsetXrly)		var(--offsetYout);}
	.ftstar	{background-position: var(--offsetXftstar)	var(--offsetYout);}
	.zoom	{background-position: var(--offsetXzoom)	var(--offsetYout);}
	.dot	{background-position: var(--offsetXdot)		var(--offsetYout);}

	.star:hover, .star:focus		{background-position: var(--offsetXstar)	var(--offsetYover);}
	.foot:hover, .foot:focus		{background-position: var(--offsetXfoot)	var(--offsetYover);}
	.photo:hover, .photo:focus		{background-position: var(--offsetXphoto)	var(--offsetYover);}
	.sStar:hover, .sStar:focus		{background-position: var(--offsetXsStar)	var(--offsetYover);}
	.rly:hover, .rly:focus			{background-position: var(--offsetXrly)		var(--offsetYover);}
	.ftstar:hover, .ftstar:focus	{background-position: var(--offsetXftstar)	var(--offsetYover);}
	.zoom:hover, .zoom:focus		{background-position: var(--offsetXzoom)	var(--offsetYover);}
	.dot:hover, .dot:focus			{background-position: var(--offsetXdot)		var(--offsetYover);}
}
@media print {
	.mapList {display: none;}
	main {color: #660000; border: thin solid var(--borderYellow);}
}

@media only screen and (max-width: 750px)
{
	#googleMap {margin: 0 auto;}
	.navMap {margin: 0 auto 0.5rem;}
	.menuContainer {/*grid-gap: 1rem*/ display: block;}
	.tp_menu {min-width: 300px;}
	.menuPhoto, .menuPhotoCaption {display: none;}
	.areaMap, .bigMap, .stdMenu {grid-gap: 1rem;}
	.areaMap .tpmapframe, .bigMap .tpmapframe {margin: 0 auto;}
	#regionalMap {position: relative; bottom: auto; right: auto; z-index: auto;}
}