body
{
	background-position: 0% 0%;
    padding: 0;
    margin: 0;
    font-size:12pt;
    font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Sans-Serif;
	background:#222222;
	color:#999999;
}

 h1
        {
		font-size:18pt;
		color:#ffffff;
    }
			
    h2
        {
                font-size:14pt;
				color:#ffffff;
                margin-bottom:0;
    }
			
    h3
        {
        font-size:12pt;
        margin-bottom:0;
        color:#ffffff;   
    }
			
    ol, .howto_p
        {
                font-size:10pt;
                margin-top:0; 
    }
    
	ol
        {
                margin-left:0.5em;   
    }
	
	ul 
	{
				list-style-type: none;
				margin: 0;
				padding: 0;
	}
			
	.howto_play p.howto_p
	{
		text-align: left;
		text-indent: 0.75em;
	}

a
{
	text-decoration: none;
	color: #222;
}
img
{
	border:none;
}

.floatLeft
{
	float:left;
}

.floatRight
{
	float:right;
}
			
.clear
{
clear: both;
}

.header_HeaderImg
{
    text-align:center;
    width: 75%;
    max-width: 30em;
    height: auto;
}

.header_HeaderImgWrapper
{
    text-align:center;
}

.index_reportLabels
{
	text-align:left;
	padding:0 0 0 2%;
	margin:0;
}

.index_form
{
    text-align:center;
	padding: 0 0.2em;
}
.index_question
{
	margin-top:0;
	color:#FFFFFF;
}

.index_bttnWrapper
{   
    margin-top:1em;
text-align: center;
}

.index_selectType
{
	background:none;
	background-color:#000000;
	color:#CCCCCC;
	font-size:10pt;
	width:95%;
}


.index_qPlayed
{
	position:fixed;
	bottom:0.75em;
	left:0.5em;
	color:#555;
	z-index:1;
	font-size:8pt;
}

.index_question
{
    font-size: 16pt;
	margin-top: 0.5em;
	/*border: #444 outset 0.1em;*/
	padding: 0.1em;
	-webkit-border-radius: 0.25em;
	-moz-border-radius: 0.25em;
	border-radius: 0.25em;
	background: #777777; /* Old browsers */
	
	/*background: -moz-linear-gradient(top, #555555 0%, #777777 100%); /* FF3.6+ */
	/*background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#777777)); /* Chrome,Safari4+ */
	/*background: -webkit-linear-gradient(top, #555555 0%,#777777 100%); /* Chrome10+,Safari5.1+ */
	/*background: -o-linear-gradient(top, #555555 0%,#777777 100%); /* Opera 11.10+ */
	/*background: -ms-linear-gradient(top, #555555 0%,#777777 100%); /* IE10+ */
	/*background: linear-gradient(to bottom, #555555 0%,#777777 100%); /* W3C */
	/*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#777777',GradientType=0 ); /* IE6-9 */
}

.index_type
{
    font-size:10pt;
}


.index_nextQuestionBttn
{
    margin-top:1.0em;
    width:10em;
	height:6em;	
    background:#999999
}

.index_form #container #showReport,  #play #showSuggestion
{
	margin: 0.1em 0 0 auto;
	width: 8.688em;
	height: auto;
	text-decoration: none;
	cursor: pointer;
	display: block;
}

.index_form #container #showReport img
{
	margin: 0.1em 0 0 auto;
	width: 8.688em;
	height: 3.125em;
}

.index_form #container #hideReport, #play #hideSuggestion
{
	margin: 0.1em 0 0 auto;
	width: 2.875em;
	height: 2.500em;
	text-decoration: none;
	cursor: pointer;
	display: block;
}

.index_dirty
{
}

.index_qTypeTxt
{
	text-align:left;
	font-size:9pt;
}

.adBlock
{
	margin:auto;
	width:320px;
}

.sendBttn
{
	width:35%; 
	height:auto;
	max-width:16.250em;
	min-width:8.750em;
}

.howto_play
{
	padding-top:0.5em;
	width:98%;
	height:auto;
	margin:auto;
}

.howTo_suggestion
{
	text-align:left;
}

.howto_exampleCasing
{
	width:90%;
	height:auto;
	padding-left:1em;
}

.howto_exampleCasing img
{
	width:100%;
	max-width:30.000em;
	height:auto;
	border:0.15em #666666 outset;
}

.howto_waver
{
	font-size:8pt;
	text-indent:1em;
	padding-left:1.0em;
}

.howto_card
{
	width:25%;
	max-width:6.250em;
	height:auto;
	border:0.125em #999999 outset;
}

/*
.index_form #container #showReport, .index_form #container #hideReport, #play #showSuggestion, #play #hideSuggestion
{
	margin: 0.313em auto 1.250em auto;
	width: 8.688em;
	height: 3.125em;
	text-decoration: none;
	cursor: pointer;
	display: block;
}

.index_form #container #hideReport, #play #hideSuggestion
{
	margin-top:1em;
}

.index_form #container #showReport:hover, .index_form #container #hideReport:hover, #play #showSuggestion:hover, #play #hideSuggestion:hover
{
	border: 0.125em #CCCCCC inset;
}
*/
.footer_padFixed, .footer_base
{
	height:1em;
	padding-bottom:1em;
	padding-top:0.5em;
}

.footer_padFixed
{
	height:4em;
}

.footer_base
{
	background: #dddddd; /* Old browsers */
	background: -moz-linear-gradient(top,  #dddddd 0%, #757575 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#757575)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #dddddd 0%,#757575 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #dddddd 0%,#757575 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #dddddd 0%,#757575 100%); /* IE10+ */
	background: linear-gradient(top,  #dddddd 0%,#757575 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dddddd', endColorstr='#757575',GradientType=0 ); /* IE6-9 */
	width:100%;
	position:fixed;
	bottom:0;
    text-align:center;
	color:#222222;
}

.footer_base a
{
    padding: 0 0.25em;
	text-decoration: none;
   color:#222222;
}
/*
*
*
***************** CENTER FAILS IN ANDROID CHROME ********************
*
*
*
.footer_menu_wrapper
{
	float:left;
   width:100%;
   overflow:hidden;
   position:relative;
}


.footer_menu_wrapper ul {
   clear:left;
   float:left;
   list-style:none;
   margin:0;
   padding:0;
   position:relative;
   left:55%;
   text-align:center;
   color:#222222;
}

.footer_menu_wrapper ul li {
   display:block;
   float:left;
   list-style:none;
   margin:0;
   padding:0 0.5em;
   position:relative;
   right:50%;
   color:#222222;
}

.footer_menu_wrapper ul li a {
   display:block;
   text-decoration:none;
   color:#222222;
   padding-top:0.1em;
   padding-bottom:0.2em;
}
*/

/*
.footer_base ul {
	list-style-type: none;
	margin: auto;
}

.footer_base ul li {
	float: left;
	padding-right:0.25em;
}

.footer_base ul li a
{
	text-decoration: none;
	color:#222222;
}
*/

.nBttn
{
	width:60%;
	max-width:4.375em;
	min-width:2.750em;
	padding: 0.25em 5em;
	background-color:#0feeed;
	border-radius: 0.25em;
	height:auto;
}

.rBttn
{
   width:1.25em;
   height:1.25em;
}


	figure {
	  margin: 0;
	}
    .container {
        width: 13em;
        height: 17em;
        position: relative;
        margin: 0 auto 4em;
      -webkit-perspective: 40em;
         -moz-perspective: 40em;
           -o-perspective: 40em;
              perspective: 40em;
    }

    .container > div {
      width: 100%;
      height: 100%;
      position: absolute;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform-origin: right top;
         -moz-transform-origin: right top;
           -o-transform-origin: right top;
              transform-origin: right top;
    }

    .container > div.h-flipped {
      -webkit-transform: translateX( -100% ) rotateY( -180deg );
         -moz-transform: translateX( -100% ) rotateY( -180deg );
           -o-transform: translateX( -100% ) rotateY( -180deg );
              transform: translateX( -100% ) rotateY( -180deg );
    }

    .container > div.v-flipped {
      -webkit-transform: translateY( 100% ) rotateX( -180deg );
         -moz-transform: translateY( 100% ) rotateX( -180deg );
           -o-transform: translateY( 100% ) rotateX( -180deg );
              transform: translateY( 100% ) rotateX( -180deg );
    }

    .container > div.hv-flipped{
		-webkit-transform: translateX( -26% ) translateY( 105% ) rotateY( -156deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 -moz-transform: translateX( -26% ) translateY( 105% ) rotateY( -156deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 -o-transform: translateX( -26% ) translateY( 105% ) rotateY( -156deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 transform: translateX( -26% ) translateY( 105% ) rotateY( -156deg ) rotateX( -90deg ) scale(0.5, 0.5);
    }
	
    .container > div.hv-over-flipped{
      -webkit-transform: translateX( -61% ) translateY( 104% ) rotateY( -21deg ) rotateX( 90deg ) scale(0.5, 0.5);
         -moz-transform: translateX( -61% ) translateY( 104% ) rotateY( -21deg ) rotateX( 90deg ) scale(0.5, 0.5);
           -o-transform: translateX( -61% ) translateY( 104% ) rotateY( -21deg ) rotateX( 90deg ) scale(0.5, 0.5);			  
			  transform: translateX( -61% ) translateY( 104% ) rotateY( -21deg ) rotateX( 90deg ) scale(0.5, 0.5);
    }
	

    .container > div.h-flipped.v-flipped{
      -webkit-transform: translateX( -100% ) rotateY( -180deg ) translateY( 100% ) rotateX( -180deg );
         -moz-transform: translateX( -100% ) rotateY( -180deg ) translateY( 100% ) rotateX( -180deg );
           -o-transform: translateX( -100% ) rotateY( -180deg ) translateY( 100% ) rotateX( -180deg );
              transform: translateX( -100% ) rotateY( -180deg ) translateY( 100% ) rotateX( -180deg );
    }
	
	
	.container div.rightBottom
	{
        z-index:1;
		-webkit-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 -moz-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 -o-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		
	}	
	.container div.rightTop
	{
        z-index:3;
		-webkit-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 -moz-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 -o-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		display:block
	}	
	.container div.center
	{
		
        z-index:11;
	}	
	
	.container div.leftTop
	{
        z-index:7;
      -webkit-transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);
         -moz-transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);
           -o-transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);			  
			  transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);
	}	
	.container div.leftBottom
	{
        z-index:6;
      -webkit-transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);
         -moz-transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);
           -o-transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);			  
			  transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);
	}	
	.container div.bottomHidden
	{
		display:none;
		-webkit-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 -moz-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 -o-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
	}
	
	.cardBttn, .prevCardBttn
	{
        display:block;
        z-index:10;
        width: 100%;
		height: 100%;
		position: absolute;
      -webkit-transition: -webkit-transform 1s;
         -moz-transition: -moz-transform 1s;
           -o-transition: -o-transform 1s;
              transition: transform 1s;
      -webkit-transform-style: preserve-3d;
         -moz-transform-style: preserve-3d;
           -o-transform-style: preserve-3d;
              transform-style: preserve-3d;
      -webkit-transform-origin: right top;
         -moz-transform-origin: right top;
           -o-transform-origin: right top;
              transform-origin: right top;
	}

    .cardBttn {
		-webkit-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 -moz-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 -o-transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
		 transform: translateX( -45% ) translateY( 105% ) rotateY( -160deg ) rotateX( -90deg ) scale(0.5, 0.5);
	
    }
	
	.prevCardBttn
	{
      -webkit-transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);
         -moz-transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);
           -o-transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);			  
			  transform: translateX( -55% ) translateY( 105% ) rotateY( -20deg ) rotateX( 90deg ) scale(0.5, 0.5);	
	}

    .container > div figure {
      display: block;
		position: absolute;
		height: 100%;
		width: 100%;
		color: white;
		text-align: center;
		font-weight: bold;
		font-size:16pt;
		-webkit-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-o-backface-visibility: hidden;
		backface-visibility: hidden;
		-webkit-border-radius: 0.25em;
		-moz-border-radius: 0.25em;
		-o-border-radius: 0.25em;
		border-radius: 1.15em;
		border: 0.1em solid #999;
    }

    .container > div .front {
      background: #fff;
	  color:#000;
    }

	.container > div .front span
	{
		font-size: 14pt;
		display: block;
		padding: 0.75em 0.5em 0;
		text-align: center;
	}
	
    .container > div .back {
      background: #999;
      -webkit-transform: rotateY( 180deg );
         -moz-transform: rotateY( 180deg );
           -o-transform: rotateY( 180deg );
              transform: rotateY( 180deg );
    }
	
	.cardBackImg
	{
		width:100%;
		height:auto;
		-webkit-border-radius: 0.25em;
		-moz-border-radius: 0.25em;
		-o-border-radius: 0.25em;
		border-radius: 1.15em;
		border: 0.1em solid #999;
	}