body {
  margin: 0;
  font-family: sans-serif;
  font-size: 100%;
  color: #fff1f4;
  background-color: black;
  background-image: url(images/qplay.jpeg);
  /* background-position: center 6px; */
  /* background-position: 0px 0px; */
  background-position: 50% 6px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/*
 * hidden
 */

.skip {
  display: none;
}

/*
 * whole page
 */

.page {
  position: absolute;
  width: 688px;
  left: 50%;
  margin-left: -344px;
  top: 10px;
}

/*
 * positions of all squares
 */

#a01 {
  background-image: url(images/q.png);
  background-repeat: no-repeat;
}

#a01 {
  background-position: 0px 0px;
}

#a01:hover {
  background-position: 0px -50px;
}

#a01, #a02, #a03, #a04, #a05, #a06, #a07, #a08, #a09, #a10, #a11, #a12 {
  top: 0px;
}

#b01, #b02, #b03, #b04, #b05, #b06, #b07, #b08, #b09, #b10, #b11, #b12 {
  top: 58px;
}

#c01, #c02, #c03, #c04, #c05, #c06, #c07, #c08, #c09, #c10, #c11, #c12 {
  top: 116px;
}

#a01, #b01, #c01 {
  left: 0px;
}

#a02, #b02, #c02 {
  left: 58px;
}

#a03, #b03, #c03 {
  left: 116px;
}

#a04, #b04, #c04 {
  left: 174px;
}

#a05, #b05, #c05 {
  left: 232px;
}

#a06, #b06, #c06 {
  left: 290px;
}

#a07, #b07, #c07 {
  left: 348px;
}

#a08, #b08, #c08 {
  left: 406px;
}

#a09, #b09, #c09 {
  left: 464px;
}

#a10, #b10, #c10 {
  left: 522px;
}

#a11, #b11, #c11 {
  left: 580px;
}

#a12, #b12, #c12 {
  left: 638px;
}

/*
 * defaults for squares
 */

.squares span.q,
.squares a.sel,
.squares a.nav {
  /* display: block; */
  position: absolute;
  border: 1px solid #e07d1f;
  width: 50px;
  height: 50px;
  text-align: center;
  color: #fff1f4;
}

/*
 * normal squares
 */

.squares span.q {
  font-family: monospace;
  font-size: 24px;
  font-weight: bold;
  color: #e8f4b0;
  text-decoration: none;
  padding-top: 12px;
  height: 38px;
}

.squares span.q:hover {
  margin-top: -3px;
  margin-left: -3px;
  padding: 13px 3px 5px 3px;
  font-size: 28px;
}

/*
 * menu list
 */

.squares ul.menu {
  list-style: none;
}

/*
 * menu links
 */

.squares a.lang,
.squares a.nav,
.squares a.sel {
  text-decoration: none;
  color: #fff1f4;
  padding-top: 19px;
  height: 31px;
  font-size: 9px;
  font-weight: normal;
}

.squares a.lang:hover,
.squares a.nav:hover,
.squares a.sel:hover {
  color: #fff1f4;
  margin-top: -3px;
  margin-left: -3px;
  padding: 20px 3px 5px 3px;
  font-size: 10px;
}

.squares a.sel {
  border: 1px solid #b0b0b0;
}

.squares a.sel:hover {
  border: 1px solid #ffffff;
}

/*
 * bottom text
 */

div.small { 
  font-size: 80%;
  margin-left: 16px;
}

div.text { 
  /* display: block; */
  margin-top: 200px;
  width: 688px;
  border: 1px solid #e07d1f;
  min-height: 200px;
}

.text a {
  text-decoration: none;
  color: #e8f4b0;
  font-weight: bold;
}

input {
  color: white;
  /* background-color: black; */
  /* background-color: transparent; */
  /* background-color: blue; */
  background-image: url(images/bg.png);
  border: 1px solid #e07d1f;
  margin: 1px;
}