pong.css

body { background-color: black; color: #AAA; font-size: 12pt; padding: 1em; }

#unsupported { border: 1px solid yellow; color: black; background-color: #FFFFAD; padding: 2em; margin: 1em; display: inline-block; }

#sidebar                        { width: 18em; height: 40em; float: left; font-size: 0.825em; background-color: #333; border: 1px solid white; padding: 1em;  }
#sidebar h2                     { color: white; text-align: center; margin: 0; }
#sidebar .parts                 { padding-left: 1em; list-style-type: none; margin-bottom: 2em; text-align: right; }
#sidebar .parts li a            { color: white; text-decoration: none; }
#sidebar .parts li a:visited    { color: white; }
#sidebar .parts li a:hover      { color: white; text-decoration: underline; }
#sidebar .parts li a.selected   { color: #F08010; }
#sidebar .parts li a i          { color: #AAA;    }
#sidebar .parts li a.selected i { color: #F08010; }
#sidebar .settings              { line-height: 1.2em; height: 1.2em; text-align: right; }
#sidebar .settings.size         { }
#sidebar .settings.speed        { margin-bottom: 1em; }
#sidebar .settings label        { vertical-align: middle; }
#sidebar .settings input        { vertical-align: middle; }
#sidebar .settings select       { vertical-align: middle; }
#sidebar .description           { margin-bottom: 2em; }
#sidebar .description b         { font-weight: normal; color: #FFF; }


@media screen and (min-width: 0px) {
  #sidebar { display: none; }
  #game    { display: block; width: 480px; height: 360px; margin: 0 auto; }
}

@media screen and (min-width: 800px) {
  #game    { width: 640px; height: 480px; }
}

@media screen and (min-width: 1000px) {
  #sidebar { display: block; }
  #game    { margin-left: 18em; }
}

@media screen and (min-width: 1200px) {
  #game    { width: 800px; height: 600px; }
}

@media screen and (min-width: 1600px) {
  #game    { width: 1024px; height: 768px; }
}