.example-container {
    border: 1px solid black;
    color: black;
    padding: 4px;
    border-radius: 7px;
    margin: 3px;
    display: block;
}

.response {
    border: 1px solid blue;
    color: black;
    display: block;
    background-color: antiquewhite;
    padding: 4px;
    border-radius: 7px;
    margin: 3px;
    overflow: scroll;
    scrollbar-width: auto
}

#counter {
    background-color: lightblue;
}

.heading {
    font-size: 1.5em;
    display: block;
    clear:both;
}

.notice {
    background-color: lightyellow;
    border: 1px solid black;
    color: black;
    padding: 4px;
    margin: 5px;
    border-radius: 7px;
    opacity: .95;
    display:block;
}

.literal {
  background-color: white;    
}

#intro-region { line-height: 1.6; }
#innermost { line-height: 1.2; }
.boxed {border: 2px solid red;}
.flip { transform: rotate(180deg); }

#phrase-completion-textarea { float:left; }
#phrase-completion-submit-button { float:left; }
#logged-in-status { background-color: #05ffd1; }
#gone-away-status { background-color: #23ccad; }
#answered-status  { background-color: #2978f0; }
#voted-status     { background-color: #4f92f7; }
#want-back-status { background-color: #bdb5b5; }


.hidden {display: none; }
a { color: Red; }
a:hover { color: OrangeRed; }
input[type=submit],button {background-color:#a6aaf5; margin:5px;}
#bg {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-repeat: repeat-y;
}    
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
.notify {
    background-color: #aaaaaa;
    border: 1px solid black;
    color: black;
    padding: 4px;
    margin: 5px;
    border-radius: 7px;
    opacity: .95;
    display:block;
}


.hjtip { color: #59955C }
.hjtip a { color: #59955C }
.show_hide {
    padding-left:20px;
}
.plus:after {
    content:" +"; width:1em; display:inline-block;
}
.minus:after {
    content:" -"; width:1em; display:inline-block;
}
.ask-radio { 
    display : inline-block; padding:1%; margin-top:10px;
}

.explanation {
    cursor : pointer;
    background-color: #a0a0a0;
    border: 1px solid black;
    color: #0000ff;
    padding: 4px;
    border-radius: 7px;
    opacity: .95;
    max-width: 45em;
    font-size: 0.9em;
}

.question {
    cursor : pointer;
    display : inline-block;
    background-color: #a0a0a0;
    border: 1px solid black;
    color: #0000ff;
    padding: 4px;
    border-radius: 7px;
    opacity: .95;
    max-width: 20em;
    font-size: 0.9em;
}
.questionValue    { margin:6px; padding: 6px; background-color:#aaaaaa  }
.questionCategory { margin:6px; padding: 6px; background-color:#bbbbbb  }
.questionBody     { margin:6px; padding: 6px; background-color:#f0f0f0  }
.questionNumber   { margin:6px; padding: 6px; }
.questionWrap     { padding: 8px; }
.questionAsked    { background-color:#eeeeee; }
.answersRemaining {
    background-color:#e0e0e0; display:inline-block; height:20px;
    padding: 5px; margin:2px; border: 1px solid black;}


.custom-file-upload {
    font-size: 0.9em;
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px;
    cursor: pointer;
    background-color: #e0e0e0;
}

#chatText { width:95%; }

#actions,#selectMoc {
    font-size: 0.9em;
    border: 1px solid #ccc;
    display: inline-block;
    cursor: pointer;
    background-color:#a6aaf5;
    clear:both;
    width: 20%;
}		  
#tooltip {
        position: absolute;
        z-index: 3000;
        background-color: #a0a0a0;
        border: 1px solid black;
        color: #0000ff;
        padding: 4px;
        border-radius: 7px;
        opacity: .95;
        max-width: 20em;
        font-size: 0.9em;

}
#tooltip h3 {
        font-size: 0.9em;
        margin: 0;
        padding: 0 3px;
        text-align: center !important;
}
#tooltip p {
        font-size: 0.9em;
        margin: 5px 0 0 5px;
        text-align: left;
}
.active {background-color:blue;}
.error {padding:10px; color:red;  width:100%; font-size: 5em; text-align:center;}
.alert {padding:10px; font-size:200%; color:red; }
.important { color:red; }
.instructions {padding:10px;width:80%;}
.moc-info  {color:blue; padding:10px; width:45%; display:inline-block;}
.team-info {color:green; padding:10px; width:45%; display:inline-block;}
.small-button { 
  height:2em;
  width:2em;
  padding:4px;
}
button:disabled { opacity:.7; }

b {font-weight: bold; }
i {font-style:italic; }


.video-div { width:170; text-align: center; float: left; }

.score-answer {background-color:lightgray;}
.score-line { clear:left; }
.score-table { margin-bottom: 30px; padding: 10px; clear:left;}
.score-pid  
{padding:2px; width:50px; text-align:left; float:left;  box-shadow: 0 0 1px black; }
.score-name  
{padding:2px; width:12em; text-align:left;  float:left;  box-shadow: 0 0 1px black; }
.score-value 
{padding:2px; width:20px; text-align:right; float:left; box-shadow: 0 0 1px black; }
#panic {clear:left; float:left; text-align:center; height:auto; }
.summary-value  {width:20%; background-color:#eeeeee; border:2px;}

#team-question-for-moc  { overflow:auto; height:200px; 
                          background-color:#eeeeee; border:2px; }

#their-trash { overflow:auto; height:200px; 
               background-color:#eeeeee; border:2px; }

.team-answer {background-color:#cccccc; font-size:150%;  padding: 10px;}
.questionText { font-size:200%; line-height:120%; }
.answerText { background-color:#eeeeee; width: 60%; }
.page-wrap {
  position: relative; width: 90%; height: 80%; 
  margin: 20px auto; padding: 20px; overflow: auto;
  background: rgba(255,255,255,.7); 
  box-shadow: 0 0 20px black; 
  box-shadow: 0 0 20px black; box-shadow: 0 0 20px black; }

.left  {text-align:left;}
.right {text-align:right;}
.center {text-align:center;}
.centered {margin:auto; float:none;}

.question-for-these-answers { font-size:200%;  padding: 10px; }
.answer-for-these-answers { background-color:#eeeeee; font-size:150%; padding: 10px; }

.answerForMoc { font-size:75%;  }

.unAnswered      {background-color:grey;    }
.lightlyAnswered {background-color:red;     }
.mostlyAnswered  {background-color:yellow;  }
.fullyAnswered   {background-color:green;   }

.rounded {
    border: 1px solid;
    border-radius: 4px;
    padding:1px; }

.off {margin-right:3px; background-color: lightcoral;}
.on  {margin-right:3px; background-color: lightgreen;}

.correct   {background-color: green;}
.incorrect {background-color: red;}
.partiallyCorrect {background-color: yellow;}

.unanswered {}
.framed { border-style: ridge; border-width:5px; border-color: grey; margin:5px;}
.answeredBy {}
.answeredMenu { position:absolute; display:none; font-size: 50%; }
.questionButton {clear:left; display:block; }
.questionForTeam {float:left;}
.questionValue {clear:left;}
/* create an arrow that points up */
div.arrow-up {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;  /* left arrow slant */
	border-right: 5px solid transparent; /* right arrow slant */
	border-bottom: 5px solid #2f2f2f; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
}

/* create an arrow that points down */
div.arrow-down {
	width: 0; 
	height: 0; 
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #2f2f2f;
	font-size: 0;
	line-height: 0;
}
/* create an arrow that points left */
div.arrow-left {
	width: 0; 
	height: 0; 
	border-bottom: 5px solid transparent;  /* left arrow slant */
	border-top: 5px solid transparent; /* right arrow slant */
	border-right: 5px solid #2f2f2f; /* bottom, add background color here */
	font-size: 0;
	line-height: 0;
}

/* create an arrow that points right */
div.arrow-right {
	width: 0; 
	height: 0; 
	border-bottom: 5px solid transparent;  /* left arrow slant */
	border-top: 5px solid transparent; /* right arrow slant */
	border-left: 5px solid #2f2f2f; /* bottom, add background color here */
	font-size: 0;
	line-height: 0; }

/* ids for regions */	

#moc-region   { }
#team-region  { }
#score-board-region-region {float:left;}
#moc-panic-region {color:red;  font-size:200%; line-height:120%;}
#summary-region {padding:10px; clear:both; }
#trash-region         
  { float:left;  padding:5px; margin:5px; width:45%; 
    clear:both; }
#team-questions-region 
  { float:right; padding:10px; width:45%;}
#grade-region { border:2px solid green; background-color:#cccccc }
#available-commands-region
  { float:left; background-color:skyblue; padding: 5px; width: 30%; }
#command-response-region
  { float:left; background-color:skyblue; margin: 5px; width: 30%; }
#command-input-region {clear:both; padding:5px; margin:5px; }
#questions-region { clear:both; }
#questions-answered-region 
  { color:black; font-size:200%; line-height:200%; padding:5px; }
#questions-asked-region, #questions-show-answer-region { overflow-x: scroll; }

#contestant-region {clear:left;}
#questions-asked-region {float:left;}
#contestant-timer-region {float:left;}
#questions-show-answer-region {clear:left;}
#moc-questions-region {float:left;}
#moc-timer-region {float:left;}
#die-region {clear:both; font-size:150%; padding:20px; margin:10px; background-color:linen;}
#contestant-welcome {font-size:150%;}
.timer {height: 60px; width: 60px; padding: 8px; margin: 8px; float: left; }

#progress { width: 100px; }
.progress-yellow {
    color: white;
    background-color: #7f7f00;
    background-image: linear-gradient(to left, #7f7f00 1%, #ffff00 100%);
}
.progress-red {
    color: white;
    background-color: #7f0000;
    background-image: linear-gradient(to left, #7f0000 1%, #ff0000 100%);
}
.progress-green {
    color: white;
    background-color: #007f00;
    background-image: linear-gradient(to left, #007f00 1%, #00ff00 100%);
}
#receive-region {background-color: #dddddd;}
#chat-input-region   {
    padding: 2px;
    width: 90%;
    border: 1px solid black;
    clear: left; }    
#chat-display-region {
    height: 200px;
    width: 90%;
    overflow-y: auto;    
    padding: 2px;
    border: 1px solid black;
    clear: left;
    overflow: auto;}    
#chatText { width: 98% }

.hhl-video {
  margin: 2px;
  border: 1px solid black;
  box-shadow: 2px 2px 3px black;
  width:160px;
  height:120px;
  display:inline-block;
}

#video-canvas {
  display:none;
}

#video-startbutton {
  clear:both;
  display:block;
}

.video-contentarea {
  font-size: 16px;
  width: 760px;
}

#other-players {
  width: 600px;
}

#photo-names {
    float:left;
}    

.photo-names {
    width:500px;
}    

#photo-images {
    float: left;
}

.photo-image {
    margin: 2px;
    border: 1px solid black;
    box-shadow: 2px 2px 3px black;
    width: 160px;
}    

.for-debug {
    margin: 2px;
    border: 1px solid red;
    box-shadow: 2px 2px 3px red;
}
.video-photo {
    padding:2px; width:50px; text-align:left; float:left;  box-shadow: 0 0 1px black;
}
    
.photo-table {
    float:left;
    display:inline;
}

#starter-authenticate-response {
    margin: 10px;
}
		
#get-questions { clear:both; }
#question-list-region { clear:both; }
#noVideo {clear:left; }
#test-region {clear:both;}
.cleared {clear:both;}

label {display:inline; padding-left:5px;}

.first-name { text-transform:capitalize; }

.inset {margin:40px;}

.statementOption {color:white;}
.entry-error {background: red;}

.Blue		{background: blue;}
.Red            {background: red;}
.Green		{background: green;}
.Yellow		{background: yellow;}
/*
.blue		{background: linear-gradient(blue, white)}
.red            {background: linear-gradient(red, white)}
.green		{background: linear-gradient(green, white)}
.yellow		{background: linear-gradient(yellow, white)}
*/

.white		{background-color:white;}
.error		{padding:10px; color:Red; background-color:Blue}

.font1		{font-size:100%; line-height: 100%;}
.font2		{font-size:150%; line-height: 120%;}
.font3		{font-size:200%; line-height: 150%;}
.font4		{font-size:120%; line-height: 120%;}


#nextButton-region { width:300px; padding:5px}
#throbber-region { height:60px ; width:60px; ; margin-top:30px; }
#spiral { margin-left:50px; margin-bottom:50px; }
#spiral-image {  height:150px ; width:150px ; border-radius:75px; }
#redNextButton { height:150px; width:300px; }

#current-category-text      
  { color:DarkMagenta;}

#categories-available-region
{ height:300px; }

#team-color
  {padding: 5px; border-radius: 20px; width:330px}
#surround-buttons
  {padding: 10px; border-radius: 20px; width:310px}
.centeredLarge	{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    width: 90%
}

#inside {
/*  background-image: url(/static/images/texturedWhite400.jpg); */
  border-radius: 30px;
}


#statement-appear-region {
    background-color: #cccccc;
    border: 1px solid black;
    padding: 4px;
    margin: 5px;
    border-radius: 7px;
    opacity: .95;
    display:block;
    width: 30em;
    color: blue;
}

#statement-completion-textarea{
    background-color: white;
    border: 1px solid black;
    color: black;
    padding: 4px;
    margin: 5px;
    border-radius: 7px;
    opacity: .95;
    display:block;
    width: 30em;
    
}

#statement-completion-validity {
    background-color: white;
    border: 1px solid black;
    color: blue;
    padding: 4px;
    margin: 5px;
    border-radius: 7px;
    opacity: .95;
    display:block;
    width: 30em;
    
}

.centered	{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
.left		{ clear: none; float:left; }
.right		{ clear: none; float:right; }

.clear          { clear: both; }
.category       { white-space:nowrap; float:left; padding-left:5px; padding-right:5px;}

.teamScore { margin-left: 20px; float: left;  border-radius: 20px; }
.scoreText { padding: 10px; margin-top: 20px; }

.flash{

  -moz-animation: flash 1s ease-out;
  -moz-animation-iteration-count: 1;

  -webkit-animation: flash 1s ease-out;
  -webkit-animation-iteration-count: 1;

  -ms-animation: flash 1s ease-out;
  -ms-animation-iteration-count: 1;

}

.faded  {
 opacity: 0.2;
 filter: alpha(opacity=20); /* For IE8 and earlier */
}

@-webkit-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#cccccc;}        
    100% {background-color:none;}
}

@-moz-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#cccccc;}        
    100% {background-color:none;}
}

@-ms-keyframes flash {
    0% { background-color:none;}
    50% { background-color:#cccccc;}        
    100% {background-color:none;}
}

.top-button {
  font: bold 20px Arial,sans-serif;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
  display: inline-block;
  outline: none;
  cursor: pointer;
  padding: 0.4em 2em 0.5em;
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  border-radius: 0.3em;
  border: 1px solid;
  border-color: #bbbbbb #a2a2a2 #888888;
  background-color: #eee;
  background-image: -moz-linear-gradient(#eeeeee, #d4d4d4);
  background-image: -webkit-linear-gradient(#eeeeee, #d4d4d4);
  background-image: linear-gradient(#eeeeee, #d4d4d4);
  -moz-box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.1), 0 0.1em 0.2em rgba(0, 0, 0, 0.3), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
  -webkit-box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.1), 0 0.1em 0.2em rgba(0, 0, 0, 0.3), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
  box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.1), 0 0.1em 0.2em rgba(0, 0, 0, 0.3), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
  -moz-transition: all 100ms;
  -o-transition: all 100ms;
  -webkit-transition: all 100ms;
  transition: all 100ms;
}
.top-button:hover {
  -moz-box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4), 0 0.1em 0.2em rgba(0, 0, 0, 0.4), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
  -webkit-box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4), 0 0.1em 0.2em rgba(0, 0, 0, 0.4), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
  box-shadow: 0 0.1em 0.5em rgba(0, 0, 0, 0.4), 0 0.1em 0.2em rgba(0, 0, 0, 0.4), 0 -0.1em 0.07em rgba(0, 0, 0, 0.3) inset, 0 0.1em 0.07em rgba(255, 255, 255, 0.2) inset;
}
.top-button:active {
  padding: 0.4em 2em 0.4em;
  margin-top: 0.1em;
  border-color: #a2a2a2 #bbbbbb #eee;
  background-image: -moz-linear-gradient(#e1e1e1, #eeeeee);
  background-image: -webkit-linear-gradient(#e1e1e1, #eeeeee);
  background-image: linear-gradient(#e1e1e1, #eeeeee);
  -moz-box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.1) inset, 0 0.1em 0.1em rgba(0, 0, 0, 0.2) inset, 0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset, -0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset;
  -webkit-box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.1) inset, 0 0.1em 0.1em rgba(0, 0, 0, 0.2) inset, 0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset, -0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset;
  box-shadow: 0 0.1em 0.2em rgba(0, 0, 0, 0.1) inset, 0 0.1em 0.1em rgba(0, 0, 0, 0.2) inset, 0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset, -0.05em 0 0.07em rgba(0, 0, 0, 0.2) inset;
  -moz-transition: all 10ms;
  -o-transition: all 10ms;
  -webkit-transition: all 10ms;
  transition: all 10ms;
}