/* MSX emulator pages */
#leftCol                { position: absolute; top: 98px; left: 0; background-color: #303030; width: 288px; min-height: 534px; height: calc(100vh - 98px) }
#leftCol.searchWrapper	{ position: fixed; width: 100%; height: 50px; display: inline-block }
#leftCol label          { position: fixed; display: inline-block; left: 15px; top: 108px }
#tfhSearch              { position: fixed; display: inline-block; padding: 0 0 0 40px; width: 240px; height: auto; left: 5px; top: 108px; background-color: transparent; outline: none; border: 0 }
#clearSearch            { position: fixed; display: none; left: 262px; top: 108px; width: 20px; height: 20px; color: red; background-color: #404040; border: 1px solid #383838; border-radius: 5px; cursor: pointer }
#clearSearch:hover      { box-shadow: 0 0 3px 0px #fff }
#content                { position: relative; left: 289px; top: 108px; width: calc(100vw - 314px); margin: 0 }

#gamesList           	{ position: relative; overflow-x: hidden; top: 40px; overflow-y: auto; min-height: 534px; height: calc(100vh - 138px) }
#gamesList li     		{ padding: 3px; margin: 0 0 6px 4px }
#gamesList li a 		{ display: inline-block; width: 256px; box-shadow: 0 0 5px 0 #666; border-radius: 10px; transition: all ease 0.4s }
#gamesList li a:hover	{ box-shadow: 0 0 5px 0 #eee }  
#gamesList li a img   	{ width: 256px; height: auto; border-radius: 0 0 10px 10px; max-height: 212px }
#gamesList li div		{ display: inline-block; _position: absolute; z-index: 10; width: 256px; padding: 3px 19px 3px 24px; border-radius: 10px 10px 0 0; background-color: #222; color: #fff; text-align: center }
#gamesList li figure 	{ display: inline-block; position: absolute; z-index: 100; left: 243px; width: 15px; color: gold; margin-top: -2px; transition: all ease 0.4s; transform-origin: 50% 50% }
#gamesList li figure:hover 			{ transform: scale(1.6) }
#gamesList li figure.trophy			{ left: 8px; margin-top: 0px }
#gamesList li figure.trophy::after 	{ content: '🏆' }
#gamesList li figure::after 		{ content: '☆'; font-size: 150% }
#gamesList li figure.set::after 	{ content: '★'; font-size: 150% }

#wmsx                   { position: relative; top: 10px; text-align: center }
#wmsx-screen            { position: static; border: 0; box-shadow: 0 0 10px 0 #000e }
#wmsx-description       { position: absolute; width: 100%; text-align: center }

.text-center-bold       { text-align: center }

#content .text-center-bold,
#wmsx-description 		{ line-height: 1rem; font-size: 0px; animation: 0.5s letterSpacing 1s ease 1 forwards }
@keyframes letterSpacing { 	  0%	{ font-size: 0px}
							100%	{ font-size: 15px } }


/* Override Chrome autofill layout */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active	{ transition: background-color 0s 6000s; -webkit-text-fill-color: #fff }

/* Light-theme overrides */
body.lightMode					{ background-color: #eee }
body.lightMode #tfhSearch		{ color: #fff }
body.lightMode a				{ color: #00a990 }
