BODY, HTML {
	padding: 0;
	margin: 0;
	-webkit-user-select: none;
	 -webkit-touch-callout: none;
   /* -webkit-user-select: none; */
}

BODY {
	overflow-y: scroll;
}

/*
 * BACKGROUND
 */

.background-layer1 { z-index: 1; }

/*
 * HEADER
 */


.header {
	position: fixed;
	left:0px;
	right:0px;
	top:0px;
	z-index: 31;
}

/*
 * CARD BAR
 */

.card {
	display: inline-block;
}

.cardindicator {
	width: 100%;
	margin:0 auto;
}

.cardindicatorcontainer {
	position: absolute;
	bottom: 0px;
	width: 100%;
}

.cardcontainer {
	position: relative;
	margin:0 auto;
	height: 100%;
	width:1px;
	white-space: nowrap;
	transition:left 0.5s;
	-moz-transition: left 0.5s; /* Firefox 4 */
	-webkit-transition:left 0.5s; /* Safari and Chrome */
	-o-transition:left 0.5s; /* Opera */
	-ms-transition:left 0.5s; /* ie? */
}

/*
 * PAGE
 */

.page {
	position: relative;
	margin:0 auto;
	z-index: 12;
}

/*
 * DOCK BUTTONS
 */

.button {
	float: left;
	background-repeat: no-repeat;
}

.timer {
	float: left;
	background-repeat: no-repeat;
}

/*
 * LEFT DOCK
 */

.button-library {
	display: none;
}

.buttonsetleft {
	position: fixed;
	z-index: 21;
	left: 10px;
	bottom: 10px;
	background-repeat: no-repeat;
}

/*
 * RIGHT DOCK
 */

.buttonsetright {
	position: fixed;
	z-index: 21;
	right: 10px;
	bottom: 10px;
	background-repeat: no-repeat;
}

/*
 * SCROLL BUTTONS
 */

.buttonsetscroll {
	position: fixed;
	z-index: 21;
	right: 10px;
	background-repeat: no-repeat;
}

/*
 * FLIP BUTTONS
 */

.buttonsetflip {
	position: fixed;
	z-index: 21;
	right: 10px;
	background-repeat: no-repeat;
}


/*
 * MINI LEFT DOCK
 */

.buttonsetminileft {
	position: fixed;
	z-index: 21;
	left: 10px;
	background-repeat: no-repeat;
}

/*
 * FLASHCARD
 */

 .side {
	width: 100%;
	display: table;
 }

.cardcontent-top { width: 100% }
.cardcontent-center { width: 100% }
.cardcontent-bottom { width: 100% }


.cardcontent {
	display: table-cell;
	vertical-align: middle;
}
/*

.flashcardcontainer {
	position: relative;
   -webkit-perspective: 1000;
   -moz-perspective: 1000;
   -ms-perspective: 1000;
   -o-perspective: 1000;
}

.flashcard-flipped {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);				
}

.flashcard {
   -webkit-transform-style: preserve-3d;
   -webkit-transition: 0.5s;
   -moz-transform-style: preserve-3d;
   -moz-transition: 0.5s;
   -ms-transform-style: preserve-3d;
   -ms-transition: 0.5s;
   -o-transform-style: preserve-3d;
   -o-transition: 0.5s;
}
.face {
   position: absolute;
   -webkit-backface-visibility: hidden;
   -moz-backface-visibility: hidden;
   -ms-backface-visibility: hidden;
   -o-backface-visibility: hidden;
}
.back {
   -webkit-transform: rotateY(180deg);
   -moz-transform: rotateY(180deg);
   -ms-transform: rotateY(180deg);
   -o-transform: rotateY(180deg);
}

.face-compat {
   -webkit-transform: none;
   -moz-transform: none;
   -ms-transform: none;
   -o-transform: none;
   -webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
   -ms-backface-visibility: visible;
   -o-backface-visibility: visible;
}

.flashcard-compat {
    -webkit-transform-style: flat;
   -moz-transform-style:flat;
   -ms-transform-style: flat;
   -o-transform-style:flat;
}
*/

.face {
   position: absolute;
   -webkit-transition: 0.25s;
   -moz-transition:  0.25s;
   -ms-transition:  0.25s;
   -o-transition:  0.25s;
}

.front {
	-webkit-transition-delay:0.25s;
	-moz-transition-delay:0.25s;
	-ms-transition-delay:0.25s;
	-o-transition-delay:0.25s;
	transition-delay:0.25s;
}

.flashcard-flipped .front {
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-ms-transition-delay:0s;
	-o-transition-delay:0s;
	transition-delay:0s;
	-webkit-transform: scale(0,1);
   -moz-transform: scale(0,1);
   -ms-transform: scale(0,1);
   -o-transform: scale(0,1);
   transform: scale(0,1);
}

.back {
	-webkit-transition-delay:0s;
	-moz-transition-delay:0s;
	-ms-transition-delay:0s;
	-o-transition-delay:0s;
	transition-delay:0s;	
   -webkit-transform: scale(0,1);
   -moz-transform: scale(0,1);
   -ms-transform: scale(0,1);
   -o-transform: scale(0,1);
   transform: scale(0,1);
}

.flashcard-flipped .back {
	-webkit-transition-delay:0.25s;
	-moz-transition-delay:0.25s;
	-ms-transition-delay:0.25s;
	-o-transition-delay:0.25s;
	transition-delay:0.25s;
	-webkit-transform: scale(1,1);
   -moz-transform: scale(1,1);
   -ms-transform: scale(1,1);
   -o-transform: scale(1,1);
   transform: scale(1,1);
}

.untransformed .front, .untransformed .back {
   -webkit-transform: none;
   -moz-transform: none;
   -ms-transform: none;
   -o-transform: none;
   transform:none;
}

.face-compat {
   -webkit-transform: none;
   -moz-transform: none;
   -ms-transform: none;
   -o-transform: none;
   -webkit-backface-visibility: visible;
   -moz-backface-visibility: visible;
   -ms-backface-visibility: visible;
   -o-backface-visibility: visible;
}

.flashcard-compat {
   -webkit-transform-style: flat;
   -moz-transform-style:flat;
   -ms-transform-style: flat;
   -o-transform-style:flat;
}


/*
 * VIEWERS
 */

.cardviewer, .testviewer {
 	position: relative;
 	margin-bottom: 30px;
}

/*
 * ANIMATIONS
 */

.animated {
	transition:all 0.5s;
	-moz-transition: all 0.5s; /* Firefox 4 */
	-webkit-transition:all 0.5s; /* Safari and Chrome */
	-o-transition:all 0.5s; /* Opera */
	-ms-transition:all 0.5s; /* ie? */				
}

/*
 * MODAL
 */

.modal {
	position:fixed;
	background-color: #000;
	background-color: rgba(0,0,0,0.8);
	left: 0px;
	right:0px;
	top:0px;
	bottom:0px;
	padding:10px;
	z-index: 100;
	display: none;
	text-align: center;
	color:#ffffff;
}

.imageviewer {
	position: absolute;
	left:0px;
	right:0px;
	top:0px;
	bottom: 0px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}


/*
 * TEST
 */


.radio, .checkbox {
	width:19px;
	height:19px;
	border:1px solid #000;
	display: block;
	float: left;
	background-color: #fff;
	margin-right:10px;
}

.radio.checked {
	background-image: url('common/radioimage.png');
	background-position: center;
	background-repeat: no-repeat;
}
.checkbox.checked {
	background-image: url('common/checkimage.png');
	background-position: center;
	background-repeat: no-repeat;
}
.checkbox {
	border-radius: 5px;
}
.radio {
	border-radius: 20px;
}

.extrabox {
	max-width:200px;
	float: left;
	padding:0px 10px 10px 0px;
}

.flashcard-extrabox {
	padding-top:22px;
	text-align: center;
}

.questionimage {
	width:100%;
}

.questionvideo {
	width: 100%;
	height: 150px;
}

.videoviewer {
	width: 100%;
	height: 100%;
}

.answer INPUT {
	margin-right:10px;
	float:left;
}

.answerbox {
	clear: both;
	padding-top: 22px;
	line-height: 22px;
}

.answer {
	padding-bottom: 22px;
	clear:both;
}

.footerbox {
	clear: both;
	padding-top: 22px;
	text-align: right;
}

.nextbutton {
	width:150px;
	font-size:12px;
}

.answertextarea {
	width: 100%;
	height:100px;
}

.flashcard-extrabox .questionimagecontainer {
	margin:0 auto;
		width:200px;
}

.flashcard-extrabox .questionvideo {
		max-width:200px;
}

.flashcard-extrabox .questionlink {
	display: block;
	width:200px;
	margin:0 auto;
	font-weight: normal;
}

.videocontainer {
	position: absolute;
	left:5px;
	right:5px;
	top:5px;
	bottom:50px;
}
/*
.iconbox {
	display: inline-block;
	white-space: nowrap;
}
*/