/*********/
/* Cards */
/*********/

#cards {
  text-align:center;
}

#cards .page {
  border: solid 2px #7d0000;
  background-color: white;
  width: 700px;
  margin: 20px auto 20px auto;
  position: relative;
  height: 500px;
  display: none;
  overflow: hidden;
}

#cards .page h2 {
  background-color: #7d0000;
  padding: 5px;
  text-align: center;
  color: white;
  margin: 0px 0px 15px 0px;
}

#cards .page a {
  margin: 15px;
  display: inline-block;
  font-variant: small-caps;
  color: white;
  font-weight: bold;
  font-size: 32px;
  text-decoration: none;
}

#cards .page a:hover {
  color: yellow;
}

#cards .page a.nextPageButton {
  position: absolute;
  right: 15px;
  bottom: 15px;
  width: 150px;
  height: 80px;
  line-height: 80px;
  background-image: url('../images/orange-150x80.png');
}

#cards .page a.prevPageButton {
  position: absolute;
  left: 15px;
  bottom: 15px;
  width: 150px;
  height: 80px;
  line-height: 80px;
  background-image: url('../images/orange-150x80.png');
}

#cards .page a.startButton {
  position: absolute;
  right: 15px;
  bottom: 15px;
  width: 150px;
  height: 80px;
  line-height: 80px;
  background-image: url('../images/green-150x80.png');
}

#cards .page a.stopButton {
  margin: 0px;
  font-weight: bold;
  font-size: 14px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  background-image: url('../images/red-80x30.png');
  text-align: center;
  position: absolute;
  right: 15px;
  top: 15px;
}

#cards .page a.okAndNextButton {
  width: 200px;
  height: 80px;
  line-height: 80px;
  background-image: url('../images/green-200x80.png');
  margin: 0px;
}

#cards .page a.failAndNextButton {
  width: 200px;
  height: 80px;
  line-height: 80px;
  background-image: url('../images/red-200x80.png');
  margin: 0px;
}

#cards .page a.dropAndNextButton {
  display: table;
  width: 200px;
  height: 80px;
  background-image: url('../images/blue-200x80.png');
  margin: 0px auto;
}

#cards .page a.dropAndNextButton .label {
  display: table-cell;
  vertical-align: middle;
  line-height: normal;
  width: 200px;
}

#cards .page a.dropAndNextButton .sub {
  line-height: normal;
  font-size: 12px;
  font-variant: normal;
}

#cards .page a.turnCardButton {
}

#cards #practice {
  position: relative;
}

#cards #practice table.layout {
  table-layout: fixed;
  width: 670px;
  height: 470px;
  margin: 15px;
}

#cards #practice table.layout td.status {
  height: 30px;
}

#cards #practice table.layout td.card {
  height: 320px;
  vertical-align: middle;
}

#cards #practice table.layout td.info {
  font-size: 12px;
  color: #7d0000;
  font-weight: bold;
  height: 30px;
}

#cards #practice table.layout td.button1 {
  vertical-align: middle;
}

#cards #practice table.layout td.button2 {
  vertical-align: middle;
}

#cards #practice table.layout td.button3 {
  vertical-align: middle;
}

/* status */

#cards table.status {
  width: 570px;
  border-collapse: separate;
  border-spacing: 3px;
  table-layout: fixed;
  float: left;
}

#cards table.status td {
  font-weight: bold;
  font-size: 10px;
  color: #7d0000;
  text-align: left;
  padding: 3px 6px;
  border: solid 1px #7d0000;
  width: 120px;
}

#cards table.status td {
}

#cards table.status tr {
  position: absolute;
  left: 15px;
  top: 15px;
}

#cards table.status td.data {
  text-align: right;
  border: none;
}


/* card */

#cards table.card {
  position: absolute;
  top: 55px;
  left: 100px;
  width: 500px;
  height: 300px;
  border-left: solid 1px #dddddd;
  border-top: solid 1px #dddddd;
  border-right: solid 1px #000000;
  border-bottom: solid 1px #000000;
  margin: auto;
  table-layout: fixed;
  z-index: 101;
  background-color: white;
}

#cardFront {
}

#cardBack {
  display: none;
  background-color: #faf4bb;
}

#cardBack td {
  background-color: #faf4bb;
}

#cards table.card td {
  border: dashed 1px #bbbbbb;
  font-size: 18px;
}

#cards table.card td.sourceText {
  height: 100px;
  font-size: 36px;
  font-family: Simsun, sans-serif;
}

#cards table.card td.sourceAltText {
  height: 100px;
}

#cards table.card td.targetText {
  height: 100px;
}

#cards table.sample td.sourceText {
  font-size: 18px;
  font-family: Tahoma, sans-serif;
}

#cards table.sample td.sourceAltText {
}

#cards table.sample td.targetText {
}

#cards table.card td.question {
  background-image: url('../images/questionmark.png');
  background-position: center center;
  background-repeat: no-repeat;
  text-indent: -5000px;
}

#cards table.card .pronunciation {
  width: 100px;
}

#cards table.card .pronunciation a {
  width: 72px;
  height: 72px;
  background-image: url('../images/play.png');
  background-repeat: no-repeat;
}

#cards table.card .disabled a {
  background-image: url('../images/play_disabled.png');
  background-repeat: no-repeat;
}

#cards table.card td.question a {
  display: none;
}

#cards a.reverseButton {
  width: 64px;
  height: 64px;
  background-image: url('../images/reverse.png');
  background-repeat: no-repeat;
  position: absolute;
  right: 5px;
  top: 173px;
}

/* Option 1 */

#option1 div.optionList {
  width: 640px;
  height: 330px;
  margin: 20px auto;
  overflow-x: hide;
  overflow-y: scroll;
  text-align: left;
  border: solid 1px #aaaaaa;
}

#option1 div.optionList p.heading {
  font-weight: bold;
  color: black;
  font-size: 12px;
  padding: 2px 5px 2px 5px;
}

#option1 div.optionList p.option {
  font-weight: normal;
  color: black;
  font-size: 12px;
  padding: 2px 5px 2px 25px;
  cursor: pointer;
  margin: 0;
}

#option1 div.optionList p:hover.option {
  background-color: #ffddaa;
}

#option1 div.optionList p.selected {
  background-image: url('../images/tick.png');
  background-repeat: no-repeat;
  background-position: 5px 1px;
}

/* Option 2 */

#option2 a.option {
  width: 400px;
  height: 50px;
  line-height: 50px;
  background-image: url('../images/blue-400x50.png');
  margin: 30px 0px 20px 0px;
  font-size: 18px;
}

#option2 a.selected {
  background-image: url('../images/red-400x50.png');
}


/* Option 3 */

#option3 table.card td {
  cursor: pointer;
}

#option3 table.card td:hover {
  background-color: #ffddaa;
}

/* Loading data */

#loadingData {
  line-height: 500px;
  text-align: center;
  background-image: url('../images/loading.gif');
  background-repeat: no-repeat;
  background-position: center 100px;
  font-size: 32px;
  color: #aaaaaa;
}


/* Option 4 */

#option4 a.option {
  width: 400px;
  height: 50px;
  line-height: 50px;
  background-image: url('../images/blue-400x50.png');
  margin: 20px 0px 20px 0px;
  font-size: 18px;
}

#option4 a.selected {
  background-image: url('../images/red-400x50.png');
}

#option4 a input {
  width: 60px;
  border: solid 1px black;
  font-size: 18px;
  margin: 0px 5px 0px 5px;
  text-align: center;
}

#option4note {
  margin: 0px 150px 0px 150px;
  text-align: center;
  font-size: 12px;
  height: 50px;
}


/* Stats */

#stats table.stats {
  width: 550px;
  margin: 20px auto 20px auto;
  border-collapse: collapse;
  font-size: 18px;
  font-weight: bold;
  color: #7d0000;
}

#stats table.stats tr {
  border: solid 1px #aaaaaa;
}

#stats table.stats td {
  padding: 7px 10px;
}

#stats table.stats td.label {
  text-align: left;
}

#stats table.stats td.data {
  text-align: right;
  width: 100px;
}

#stats a.repeatPracticeButton {
  width: 400px;
  height: 50px;
  line-height: 50px;
  background-image: url('../images/blue-400x50.png');
  margin: 10px 0px 10px 0px;
  font-size: 18px;
}

#stats a.newPracticeButton {
  width: 400px;
  height: 50px;
  line-height: 50px;
  background-image: url('../images/green-400x50.png');
  margin: 10px 0px 0px 0px;
  font-size: 18px;
}