/* Global */

html, body { width: 100%; height: 100%; margin: 0px; }


/* Index */

body.about { background-image: url('banner.jpg'); background-position: center; background-size: cover; }

div.content { position: absolute; left: 0px;  bottom: 0px; padding: 36px 48px; max-width: 500px; }
div.play    { position: absolute; right: 0px; bottom: 0px; padding: 50px 64px; max-width: 120px; }

div.content { font-family: Arial, sans-serif; color: white; text-shadow: 1px 1px 2px black; }

div.content h1 { font-size: 2.0em; margin: 0px; }
div.content h2 { font-size: 1.2em; margin: 0px; margin-left: 24px; margin-bottom: 24px; }
div.content p  { font-size: 1.0em; }
div.content a  { color: white; }

div.play a { font-size: 4em; text-decoration: none; color: #eeeeee; text-shadow: 1px 1px 2px black; }
div.play a:visited { color: #eeeeee; }
div.play a:hover { color: #ffffff; }


/* Play Menu */

div.menu { position: fixed; top: 0px; left: 0px; height: 100%; width: 200px; }
div.menu { background-image: url('banner.jpg'); background-position: 24%; background-size: cover; border-right: 1px solid #345083; }

div.menu ul { margin: 0px; padding: 18px; }

div.menu div.links { font-family: Arial, sans-serif; font-weight: 700; text-shadow: 1px 1px 1px #c5d1e8; }
div.menu div.links li { list-style-type: none; margin: 4px; }

div.menu a { text-decoration: none; color: #345083; }
div.menu a:visited { color: #345083; }
div.menu a:hover   { color: #233558; }


/* Play Content */

#gameport { position: absolute; top: 0px; left: 200px; bottom: 0px; right: 0px; }


/* Duck Punch */

body.play .GridWindow { background-color: #4a4a4f; color: #f4f4f4; padding: 8px 16px 8px 16px; }

body.play .BufferWindow { padding: 6px 10px 6px 20px; }


/* Mobile Styles */

@media screen and (max-device-width: 480px)
{
	div.content { top: 0px; padding: 18px 24px; }
	div.play { left: 0px; padding: 36px; }
	
	#gameport { left: 0px; width: auto; }
	
	body.play .BufferWindow { padding: 6px 10px 6px 10px; }
}