.card { 
  margin: 10px;  
  padding: 0px;
  box-sizing:border-box;
  overflow: hidden;
  position: relative;
}

.card.imagecard.done {
}

.card .front {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
.card .front .image { 
  width: 100%;
  height: 100%;
}

.card { 
  background: white;
  cursor: pointer;
}

.card .back {
  display: none;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.card .back .content { 
  display: block;
  box-sizing:border-box;
  width: 100%;
  height: 100%;
  text-align: center;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -webkit-justify-content: flex-start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}


.card .back .content .centered { 
  display: block;
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    align-self: center;
}

.card.flipped .front, .card.done .front {
  display: none;
}

.card.flipped .back, .card.done .back { 
  display: block;
}

.card.done {
  cursor: auto;
}

.card.shadow { 
  opacity: 0.1
}

.alldone .card.done, .alldone .card.shadow { 
  opacity: 1;
}
.cardtable {
  position: absolute;
}

.cardtable td { 
  margin: 0px;
  padding: 0px;
}

#reward {
	display: none;
	position: absolute;
	text-align: center;
	padding: 10px 30px 10px 30px;
	cursor: pointer;
	z-index: 200;
}

.card.done.pair_0 {
  background: none;
  background-color: #7D9EC0; // sgi lightblue
}
.card.done.pair_1 {
  background: none;
  background-color: #71C671; // sgi chartreuse = lightgreen
}
.card.done.pair_2 {
  background: none;
  background-color: #8E8E38; // sgi olivedrab
}
.card.done.pair_3 {
  background: none;
  background-color: #C5C1AA; // sgi brightgray
}
.card.done.pair_4 {
  background: none;
  background-color: #7171C6;
}
.card.done.pair_5 {
  background: none;
  background-color: #388E8E; // sgi teal
}
.card.done.pair_6 {
  background: none;
  background-color: #E3A869; // melon
}
.card.done.pair_7 {
  background: none;
  background-color: #D3B887; // burlywood
}
.card.done.pair_8 {
  background: none;
  background-color: #DAA520; // goldenrod
}
.card.done.pair_9 {
  background: none;
  background-color: #B4CDCD; // lightcyan3
}
.card.done.pair_10 {
  background: none;
  background-color: #CD96CD; // plum 3
}
.card.done.pair_11 {
  background: none;
  background-color: #8FBC8F; // darkseagreen
}
.card.done.pair_12 {
  background: none;
  background-color: #EEE685; // khaki 2
}
.card.done.pair_13 {
  background: none;
  background-color: #FFE7BA; // wheat 1
}
.card.done.pair_14 {
  background: none;
  background-color: #E0EEE0; // honeydew 2
}
.card.done.pair_15 {
  background: none;
  background-color: #B0E2FF; // lightskyblue 1
}
.card.done.pair_16 {
  background: none;
  background-color: #9D9ED0;
}
.card.done.pair_17 {
  background: none;
  background-color: #71C691;
}
.card.done.pair_18 {
  background: none;
  background-color: #8E8E58;
}
.card.done.pair_19 {
  background: none;
  background-color: #C5A1AA;
}
.card.done.pair_20 {
  background: none;
  background-color: #9171C6;
}
.card.done.pair_21 {
  background: none;
  background-color: #588E8E;
}
.card.done.pair_22 {
  background: none;
  background-color: #E3A889;
}
.card.done.pair_23 {
  background: none;
  background-color: #D3B8A7;
}
.card.done.pair_24 {
  background: none;
  background-color: #DAA540;
}
.card.done.pair_25 {
  background: none;
  background-color: #B4CDAD;
}
.card.done.pair_26 {
  background: none;
  background-color: #AD96CD;
}
.card.done.pair_27 {
  background: none;
  background-color: #8FBCAF;
}
.card.done.pair_28 {
  background: none;
  background-color: #EEC685;
}
.card.done.pair_29 {
  background: none;
  background-color: #DFE7BA;
}

.symbol { 
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 40px;
  height: 40px;
}

@media only screen and (max-height: 500px) {

  html:not(.ibw-platform-osx-ibooks) .card { 
    margin: 2px;  
    padding: 0px;
    box-sizing:border-box;
    overflow: hidden;
    position: relative;
  }

  html:not(.ibw-platform-osx-ibooks) .symbol { 
    width: 30px;
    height: 30px;
  }
}

@media only screen and (orientation: portrait) {

  html:not(.ibw-platform-osx-ibooks) .card { 
    margin: 2px;  
    padding: 0px;
    box-sizing:border-box;
    overflow: hidden;
    position: relative;
  }
}