@import url(maps.css);
@import url(menu.css);
:root
{
	--workshopImage: url(/workshop/images/workshop_css.png);
}
#displayBoard {margin: 0; padding: 0; display: grid; grid-gap: 0 1rem;}

#workshop {grid-area: workshop;}
#workshop li a {display: block; border: none;}
#rightPanel {grid-area: right;}
#bottomPanel {grid-area: bottom; position: relative; align-self: end; margin: 0.5rem 0 0;}

#rightPanel h2 {font-size: medium; text-align: center; margin: 0 0 5px 0;}
#bottomPanel > p {font-size: small; margin: 0 0 1rem;}
#rightPanel a {font-weight: bold;}
#bottomPanel .chest {box-shadow: 2px 2px 4px Black;/* margin: 0;*/}
#bottomPanel .btnMenu {/*position: absolute; */bottom: 10px; left: 0; top: auto; right: auto;}
#lowerhalf {margin: 1rem 0 0;}

.thumbwork {width: 100%; margin: 0 auto 1rem;}
.thumbwork figure {margin: 0 auto; padding: 0;  display: flex; flex-direction: column;}
.thumbwork figcaption {font-size: x-small; font-weight:500; color:var(--fontBrown); margin: 0; text-align: center;}
.thumbwork img {margin: 0 auto; cursor: pointer; border: medium inset var(--borderThumbnail);}

@media screen
{
	#workshop {padding: 0; margin: 0; width: 370px; height: 433px; z-index: 1; background: var(--workshopImage) 0 0 no-repeat;	position: relative;}
	#workshop li {position: absolute; display: block; text-indent: -3000px; overflow: hidden;}
	#workshop li:focus-within {outline: var(--outlineGeneral); outline-offset: 1px;}
	
}
@media print 
{
	#workshop, #bottomPanel .chest {display: none;}
}

#lowerhalf {clear: both; border-top: #630 thin solid; margin-bottom: 10px;}

/* mobile device */
@media (pointer: coarse)
{
	#displayBoard {grid-template-areas: 'workshop' 'right' 'bottom';}
	.thumbwork {display: none;}
	#workshop li a:hover, #workshop li a:focus {background: inherit;}
	
	#workshop {width: 281px; height: 275px;	background: var(--workshopImage) -370px   -0px  no-repeat; margin: 0 auto;}
	#workshop_photoshop {left:  63px; top: 149px; width:  87px; height:  69px;}
	#workshop_computer 	{left: 174px; top: 149px; width:  66px; height:  36px;}
	#workshop_lobby 	{left: 174px; top: 228px; width:  90px; height:  42px;}
	#workshop_website	{left:  46px; top:   1px; width:  51px; height: 117px;}
	#workshop_library	{left: 211px; top:   1px; width:  69px; height: 117px;}
	#workshop_office   	{left:   1px; top: 118px; width:  62px; height:  64px;}
	#workshop_shop   	{left: 174px; top: 187px; width: 106px; height:  41px;}
	#workshop_maproom 	{left:  97px; top:  32px; width: 113px; height:  86px;}
	
	#workshop a {display: inline-block; cursor: grab;}
	#workshop_photoshop	a {width:  87px; height:  69px;}
	#workshop_computer	a {width:  66px; height:  36px;}
	#workshop_lobby 	a {width:  90px; height:  42px;}
	#workshop_website	a {width:  51px; height: 117px;}
	#workshop_library  	a {width:  69px; height: 117px;}
	#workshop_office   	a {width:  62px; height:  64px;}
	#workshop_shop    	a {width: 106px; height:  41px;}
	#workshop_maproom	a {width: 113px; height:  86px;}
		
	#bottomPanel .chest {margin:  0 auto; max-width: 21rem;}
}
/* touch desktop */
@media (pointer: fine) and (any-pointer: coarse)
{
	#displayBoard {grid-template-areas: 'workshop right' 'bottom bottom'; grid-gap: 1rem} /* Not working */
}
/*@media only screen and (max-width: 750px) {} @media only screen and (max-width: 520px) {}*/
/* desktop */
@media (pointer: fine), (pointer: none)
{
	#displayBoard {grid-template-areas: 'workshop right' 'workshop bottom';}
	#workshop li a:hover, #workshop li a:focus {background-image: var(--workshopImage); background-repeat: no-repeat;}

	#workshop_photoshop {left:  90px; top: 200px; width: 102px; height: 105px;}
	#workshop_computer 	{left: 248px; top: 200px; width:  82px; height:  69px;}
	#workshop_lobby 	{left: 248px; top: 380px; width:  93px; height:  52px;}
	#workshop_website	{left:  48px; top:   1px; width:  70px; height: 159px;}
	#workshop_library	{left: 286px; top:   1px; width:  83px; height: 160px;}
	#workshop_office   	{left:   1px; top: 161px; width:  89px; height:  88px;}
	#workshop_shop   	{left: 248px; top: 269px; width: 121px; height: 111px;}
	#workshop_maproom 	{left: 118px; top:  33px; width: 168px; height: 129px;}
	
	#workshop_photoshop	a {width: 102px; height: 105px;}
	#workshop_computer	a {width:  82px; height:  69px;}
	#workshop_lobby 	a {width:  93px; height:  52px;}
	#workshop_website	a {width:  70px; height: 159px;}
	#workshop_library  	a {width:  83px; height: 160px;}
	#workshop_office   	a {width:  89px; height:  88px;}
	#workshop_shop    	a {width: 121px; height: 111px;}
	#workshop_maproom 	a {width: 168px; height: 128px;}
	
	#workshop_photoshop	a:hover, #workshop_photoshop	a:focus {background-position:  -90px -632px;}
	#workshop_computer	a:hover, #workshop_computer		a:focus {background-position: -248px -632px;}
	#workshop_lobby 	a:hover, #workshop_lobby 		a:focus {background-position: -248px -812px;}
	#workshop_website	a:hover, #workshop_website		a:focus {background-position:  -48px -433px;}
	#workshop_library	a:hover, #workshop_library	  	a:focus {background-position: -286px -433px;}
	#workshop_office	a:hover, #workshop_office	   	a:focus {background-position:   -1px -593px;}
	#workshop_shop 	    a:hover, #workshop_shop 	   	a:focus {background-position: -248px -701px;}
	#workshop_maproom 	a:hover, #workshop_maproom 	 	a:focus {background-position: -118px -465px;}
}