/* ==================== FLASHCARDS.CSS - GENERAL STYLE SHEET - CRAMFACTS - 5/27/2015 =================== */


.container 
{
	overflow: hidden;
}	
.resource_preload 
{
	display:none;
}
.center_container
{
    clear: both;
    margin-left: auto;
    margin-right: auto;
    max-width: 320px;
}
.flash_card_holder
{


        max-width: 400px;  /* 280px */
        /* max-height: 800px; 450px */
        border:4px solid #CCCCCC;
        margin:auto;
	width: 90%; 
	height: 90%; 
        padding: 10px;
	border-radius: 15px;
   	/* Gradient */
    	background: -webkit-linear-gradient(left, rgba(50,100,255,0.25), rgba(50,100,255,1)); /* For Safari 5.1 to 6.0 */
    	background: -o-linear-gradient(right, rgba(50,100,255,0.25), rgba(250,100,255,1)); /* For Opera 11.1 to 12.0 */
    	background: -moz-linear-gradient(right, rgba(50,100,255,0.25), rgba(50,100,255,1)); /* For Firefox 3.6 to 15 */
    	background: linear-gradient(to right, rgba(50,100,255,0.25), rgba(50,100,255,1)); /* Standard syntax (must be last) */

}



/* Here we set up the display of the game states: play, menu, prize, feedback & splash */
#game_play_panel {
    	content: '.';
	clear: both;
	display: none; /* toggle: block, none */
	/* visibility: visible; */
	overflow:hidden;
}
#game_menu_panel {
    	content: '.';
	clear: both;
	display: none;
	/* visibility: visible; */
	overflow:hidden;
}
#game_prize_panel {
    	content: '.';
	clear: both;
	display: none;
	/* visibility: visible; */
	overflow:hidden;
}
#game_feedback_panel {
    	content: '.';
	clear: both;
	display: none;
	/* visibility: visible; */
	overflow:hidden;
}
#game_splash_panel {
    	content: '.';
	clear: both;
	display: block;
	/* visibility: visible; */
	overflow:hidden;
}
#show_help_panel {
    	content: '.';
	clear: both;
	display: none;
	/* visibility: visible; */
	overflow:hidden;
}
#show_disclosure_panel {
    	content: '.';
	clear: both;
	display: none;
	/* visibility: visible; */
	overflow:hidden;
}
#show_start_panel {
    	content: '.';
	clear: both;
	display: none;
	/* visibility: visible; */
	overflow:hidden;
}
#show_disclaimer_panel {
    	content: '.';
	clear: both;
	display: none;
	/* visibility: visible; */
	overflow:hidden;
}


#piechart1 {
	clear: both;
	float: none;
	display: block;
	width: 200px;
	height: 200px;
	/* border:1px solid #000000; */
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	max-width: 200px;
	max-height: 200px;
}
#legend {
	clear: both;
	float: none;
	display: block;
	width: 200px;
	/* border:1px solid #000000; */
	text-align: center;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	max-width: 200px;
	max-height: 200px;
}
#legend tr, td {
	text-align: center;
}

/* ******** A Flashing Banner Text ******** */
.flash_card_holder h1 {
	text-align: center;
	margin: auto;
	font-size: 2rem;
  	color: #fff; /* #ffff00; */
 	font-weight: bold;
	font-family: Helvetica;
  	text-transform:uppercase;
  	//animation:blur .75s ease-out infinite;
  	text-shadow:0px 0px 5px #ffff00, 0px 0px 7px #ffff00;
}


.shadow { 
	margin: 0.25rem;
        text-align:center;
	font-size: 2rem;
  	color: #fff; /* #ffff00; */
 	font-weight: bold;
	font-family: Helvetica;
	text-transform:uppercase;
  	text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);

}


.flash_card_holder h2 {
	text-align: center;
	margin: auto;
	font-size: 2.0rem;
  	color: #fff; /* #ffff00; */
 	font-weight: bold;
	font-family: Helvetica;
  	text-transform:uppercase;
}
.flash_card_holder p {
	text-align: center;
	margin: 0.25rem;
	font-size: 16px;
  	color: #fff; /* #ffff00; */
 	font-weight: bold;
	font-family: Helvetica;
}

.flash_card_holder img
{
        padding-top: 0.3125rem;
        padding-left: 0.3125rem;
        padding-right: 0.3125rem;
	float: left;
}

#card {

	margin: 0.3125rem; 
	border: 3px solid black;
	/* background-image: url("../images/paper_1.jpg"); */
	background-color: #FAF0E6;
}

#card p {
	text-align: center;
	color: blue;	
	margin: 0 0 0 0;
	font-family: Arial, Georgia, sans-serif;
	padding: 5px;
	font-size: 28px;
	font-style: italic;
}

#hint {
	padding: 10px;
	color: #ff9900;
	/* background-color: #cc9933; */
}

#hint p{
	font-size: 1.25rem;
	color: #ffff00;
	text-align: center;
}

.yellow_text p {
	font-size: 16px;
	color: #ffff00;
	text-align: center;
}
.yellow_text a:link, a:visited {
    font-weight: bold;
    color: #ffffcc;
    text-decoration:none;
}

.yellow_text a:hover, a:active {
	font-style: italic;
	text-decoration: Underline;
	/* font-size: 1.45rem; */
}

.help_text p {
	font-size: 16px;
	color: #303030;
	text-align: center;
}
.help_text a:link, a:visited {
    font-weight: bold;
    color: #ffffcc;
    text-decoration:none;
}
.help_text a:hover, a:active {
	font-style: italic;
	text-decoration: Underline;
	/* font-size: 1.45rem; */
}


/* *******Create a scrolling text ******* */
.prizeHeader {
  margin: auto;
  text-align:right;
  font-size: 1.5rem;
  line-height: 2.625rem;
  font-family: Helvetica;
  color:#ffccff;
}

.prizeHeaderVisible {

  font-weight:600;
  overflow:hidden;
  height: 2.625rem;
}
.prizeHeader ul {
  margin: auto;
  list-style:none;
  animation:6s linear 0s normal none infinite change;
  -webkit-animation:6s linear 0s normal none infinite change;
  -moz-animation:6s linear 0s normal none infinite change;
  -o-animation:6s linear 0s normal none infinite change;
}

.prizeHeader ul li {
  line-height:2.5rem;
  margin:auto;
  font-family: Helvetica;
  color:#ffccff;
}

@-webkit-keyframes opacity {
  0%   {opacity:0;}
  50%  {opacity:1;}
  100% {opacity:0;}
}
@keyframes opacity {
  0%   {opacity:0;}
  50%  {opacity:1;}
  100% {opacity:0;}
}

@-webkit-keyframes change {
  0%   {margin-top:0;}
  15%  {margin-top:0;}
  25%  {margin-top:-40px;}
  40%  {margin-top:-40px;}
  50%  {margin-top:-80px;}
  65%  {margin-top:-80px;}
  75%  {margin-top:-40px;}
  85%  {margin-top:-40px;}
  100% {margin-top:0;}
}
@keyframes change {
  0%   {margin-top:0;}
  15%  {margin-top:0;}
  25%  {margin-top:-40px;}
  40%  {margin-top:-40px;}
  50%  {margin-top:-80px;}
  65%  {margin-top:-80px;}
  75%  {margin-top:-40px;}
  85%  {margin-top:-40px;}
  100% {margin-top:0;}
}









.calculator
{
    	content: '.';
	clear: both;
    	margin-left: auto;
    	margin-right: auto;
}
.calculator h2 {

	margin: 0.25rem;
        text-align:center;
	font-size: 2rem;
  	color: #fff; /* #ffff00; */
 	font-weight: bold;
	font-family: Helvetica;
	text-transform:uppercase;
  	text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
.calculator h3 {

	margin: 0.25rem;
        text-align:center;
	font-size: 1.25rem;
  	color: #fff; /* #ffff00; */
 	font-weight: bold;
	font-family: Helvetica;
	text-transform:uppercase;
  	text-shadow: 0 1px 0 #ccc,
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);
}
.calculator td
{
        height:16.66%;
}
.calc_td_result
{
        width:20%;
        text-align:center;
	padding:0.25rem;
}
.calc_result
{
        width:100%;
        text-align: center;
	font-size:28px;
	border-radius: 15px;
	background: #ffff99;
}
.calc_td_calculs
{
        text-align:center;
}
.calc_calculs
{
        width:90%;
        text-align:left;
}
.calc_td_btn
{
        width:20%;
	padding:0.25rem;
        height:100%;
}
.calc_act_btn
{
        width:90%;
	padding:0.25rem;
        height:100%;
}
.calc_btn
{
	padding:0.25rem;
        font-size:1.25rem;
        width:100%;
	border-radius: 0.9375rem; 
	cursor: pointer;
    /* Gradient Lavender */
    background: -webkit-linear-gradient(left, rgba(250,100,250,0.25), rgba(250,100,250,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(250,100,250,0.25), rgba(250,100,250,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(250,100,250,0.25), rgba(250,100,250,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(250,100,250,0.25), rgba(250,100,250,1)); /* Standard syntax (must be last) */
@media only screen and (max-device-width: 480px) 
{
	.calc_btn { padding: 0.25rem; }
}

}
.calc_green_btn
{
	padding: 0.25rem;
        font-size:1.25rem;
        width:100%;
	border-radius: 0.9375rem; 
	cursor: pointer;
    /* Gradient GREEN */
    background: -webkit-linear-gradient(left, rgba(50,200,50,0.25), rgba(50,200,50,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(50,200,50,0.25), rgba(50,200,50,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(50,200,50,0.25), rgba(50,200,50,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(50,200,50,0.25), rgba(50,200,50,1)); /* Standard syntax (must be last) */
}
.calc_red_btn
{
	padding: 0.25rem;
        font-size:1.25rem;
        width:100%;
	border-radius: 0.9375rem; 
	cursor: pointer;
    /* Gradient RED */
    background: -webkit-linear-gradient(left, rgba(250,50,0,0.25), rgba(250,50,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(250,50,0,0.25), rgba(250,50,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(250,50,0,0.25), rgba(250,50,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(250,50,0,0.25), rgba(250,50,0,1)); /* Standard syntax (must be last) */
}
.calc_gold_btn
{
	padding: 0.25rem;
        font-size:1.25rem;
        width:100%;
	border-radius: 0.9375rem; 
	cursor: pointer;
    /* Gradient GOLD */
    background: -webkit-linear-gradient(left, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* Standard syntax (must be last) */
}


.calc_submit_btn
{
	padding: 0.25rem;
        font-size:1.25rem;
        width:100%;
	border-radius: 0.9375rem; 
	cursor: pointer;
    /* Gradient GREEN */
    background: -webkit-linear-gradient(left, rgba(50,200,50,0.25), rgba(50,200,50,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(50,200,50,0.25), rgba(50,200,50,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(50,200,50,0.25), rgba(50,200,50,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(50,200,50,0.25), rgba(50,200,50,1)); /* Standard syntax (must be last) */
}
.calc_clear_btn
{
	padding: 0.25rem;
        font-size:1.25rem;
        width:100%;
	border-radius: 0.9375rem; 
	cursor: pointer;
    /* Gradient RED */
    background: -webkit-linear-gradient(left, rgba(250,50,0,0.25), rgba(250,50,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(250,50,0,0.25), rgba(250,50,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(250,50,0,0.25), rgba(250,50,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(250,50,0,0.25), rgba(250,50,0,1)); /* Standard syntax (must be last) */
}
.calc_menu_btn
{
	padding: 0.25rem;
        font-size:1.25rem;
        width:100%;
	border-radius: 0.9375rem; 
	cursor: pointer;
    /* Gradient GOLD */
    background: -webkit-linear-gradient(left, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* Standard syntax (must be last) */
}
.calc_prize_btn
{
	padding: 0.25rem;
        font-size:1.25rem;
        width:100%;
	border-radius: 0.9375rem; 
	cursor: pointer;
    /* Gradient GOLD */
    background: -webkit-linear-gradient(left, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(right, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(right, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* For Firefox 3.6 to 15 */
    background: linear-gradient(to right, rgba(200,150,0,0.25), rgba(200,150,0,1)); /* Standard syntax (must be last) */
}


.score_card {
	;
}
.score_card h2 {
	text-align: center;
	margin: auto;
	font-size: 2.0rem;
  	color: #fff; /* #ffff00; */
 	font-weight: bold;
	font-family: Helvetica;
  	text-transform:uppercase;
   	text-shadow: -1px 1px #fe4902, 
                     -2px 2px #fe4902, 
                     -3px 3px #fe4902,
               	     -4px 4px #fe4902, 
                     -5px 5px #fe4902, 
                     -6px 6px #fe4902;
}
.score_card h3 {
	margin: 0.25rem;
        text-align:center;
	font-size: 1.25rem;
  	color: #ffff00;
 	font-weight: bold;
	font-family: Helvetica;
}
.score_card p {
	margin: 0.5rem;
	color: #000;
	text-align: center;
}
.score_card img {
  clear: both;
  float: none;
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 95%;

}

.score_window
{
        width:95%;
        text-align: center;
	font-size: 1.25rem;
	border-radius: 15px;
	background: #ffff99;
}


.feedback_card {
	;
}
.feedback_card h2 {
	font-size: 1.75rem;
	font-family: Arial;
	text-transform: none;
	color: #fff;
}

.feedback_card p {
  	text-align: center;
	font-size: 1.75rem;
	font-style: italic;
	color: #009900;
}


.feedback_card img {
  clear: both;
  float: none;
  display: block;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding: 0;
  max-width: 90%;
  border-style: inset;
  border-width: 0.625rem;

}


table.center {
    margin-left:auto; 
    margin-right:auto;
  }