/* 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; }
}