body {
  min-width: 780px;
}

nav {
  float: right;
}

#intro {
  width: 664px;
  margin: 20px auto;
}


/******************************************************************************
 * Keyboard Colors
 */

/* primary lafayette keys */
kbd .level3,
kbd .level4 {
  color: green;
  opacity: 0;
}

/* AltGr keys */
kbd .level5,
kbd .level6 {
  color: blue;
  opacity: 0;
}

/* qwerty|lafayette|altgr class switcher */
.home      kbd.qwerty,
.qwerty    kbd.qwerty,
.extra     #key_AC10,
.lafayette #key_AC10 {
  background-color: #fdd;
}
.home      kbd .level3,
.home      kbd .level4,
.lafayette kbd .level3,
.lafayette kbd .level4,
.extra     kbd .level3,
.extra     kbd .level4,
.altgr     kbd .level5,
.altgr     kbd .level6 {
  opacity: 1;
}

/* hide secondary lafayette keys by default */
.home      kbd .secondary,
.lafayette kbd .secondary {
  opacity: 0;
}

/* altgr */
.home .alt_only,
.altgr .alt_only,
.altgr #key_RALT {
  background-color: #ddf;
}
.altgr kbd span {
  opacity: 0.2;
}
.altgr kbd .level3,
.altgr kbd .level4 {
  opacity: 0;
}
.home .alt_only .level5,
.altgr kbd .level5,
.altgr kbd .level6 {
  opacity: 1;
}
.altgr #key_RALT span {
  opacity: 1;
  color: blue;
}

.home      #navHome,
.extra     #navExtra,
.lafayette #navLafayette,
.qwerty    #navQwerty,
.altgr     #navAltGr {
  background-color: #fdd !important;
}


/******************************************************************************
 * Description
 */

/* description block */

#description {
  overflow: hidden;
  position: relative;
  height: 350px;
  width: calc(100% + 40px);
  margin: 0 -20px;
}

#description div {
  position: absolute;
  top: 0;
  width: 620px;
  height: 300px;
  margin: 0 calc(50% - 330px);
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f8f8f8;
  border-radius: 15px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* description selector */

#selector {
  text-align: center;
}

#selector a {
  background-color: white;
  text-decoration: none;
  border: 1px solid brown;
  margin-left: 1px;
  padding: 4px 8px;
}

#selector a:hover {
  background-color: #fff0f0;
}

#selector a:first-child {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}

#selector a:last-child {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
}


/**
 * Transitions -- ignored by IE<10 and older browsers
 */

#keyboard kbd,
#keyboard span {
  transition-duration: 1s;
  transition-property: opacity, background-color;
}

#description div {
  transition-duration: 1s;
  transition-property: transform, opacity;
}

#description div[smil=idle] {
  opacity: 0;
  transform: scale(0.3) translate(+160%);
}

#description div[smil=active] {
  opacity: 1;
}

#description div[smil=done] {
  opacity: 0;
  transform: scale(0.3) translate(-160%);
}



/******************************************************************************
 * Download
 */

.download dd {
  padding-bottom: 10px;
}
