html, body {
	font-family:sans-serif;
	font-size:14px;
	height:100%;
	padding:0;
	margin:0;
	background-color: #FFFFFF;
	color:#9525DE;
	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */
}

.selectable {
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
}

h1 {
	font-size: 30px;
	margin:2px;
}

.leftCol {
	width: 384px;
	float:left;
	padding:8px;
}

.rightCol {
	margin-left:400px;
	padding-left:20px;
}

.offeringContainer {
	position:relative;
	margin-top:8px;
	margin-bottom:8px;
	padding:4px;
	width:600px;
	border:2px solid #9525DE;
}

.offeringContainer.hidden {
	display:none;
}

.offeringContainer.show {
	display:block;
}

.sessionLeft {
	position:absolute;
	top:0px;
	bottom:0px;
	width:40px;
	font-size: 24px;
	font-weight: bold;
	text-align: center;
}

.sessionRight {
	margin-left:48px;
}

.timestamp {
	float: right;
	margin-right:2px;
}

.scenarioContainer {
	display: none;
	padding-left: 8px;
	border:2px solid white;
}

.scenarioContainer.show {
	display: block;
}

.scenarioContainer.mine {
	display: block;
}

.scenarioContainer.active {
	border:2px solid green;
}

.inlineinfo {
	display: inline-block;
}

.smallbox {
	display: inline-block;
	background-color: #9525DE;
	color:#FFFFFF;
	margin:1px;
	padding: 0px 4px;
	text-align: center;
}

.smallbox.mine {
	color: #FFFFFF;
	background-color:#58B300;
}

.smallDescription {
	font-size: 12px;
	color: #9525DE;
}

.checkbox {
	display: inline-block;
	border:2px solid #D900AB;
	width:10px;
	height:10px;
	border-radius: 10px;
	margin-right:8px;
}

.checkbox.checked {
	background-color: #D900AB;
}

.sessioncode {
	display:inline-block;
	color: #D900AB;
	font-size:24px;
	letter-spacing: 4px;
}

.pink {
	display:inline-block;
	color: #D900AB;
}

.green {
	display:inline-block;
	color:#58B300;
}

.purple {
	display:inline-block;
	color:#9525DE;
}

.orange {
	display:inline-block;
	color:#FA9F21;
}

.blue {
	display:inline-block;
	color:#2D9BFF;
}

.titleBlock {
	position: relative;
	display:block;
	top:50%;
	text-align: center;
	-ms-transform: translateY(-50%);

	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

.titleBar {
	position:absolute;
	top:0px;
	width:100%;
	padding-top:8px;
	padding-bottom:8px;
	text-align:center;
	z-index:500;
}

.titleBar.pink {
	background-color: #D900AB;
}

.titleBar.green {
	background-color:#58B300;
}

.titleBar.purple {
	background-color:#9525DE;
}

.titleBar.orange {
	background-color:#FA9F21;
}

.titleBar.blue {
	background-color:#2D9BFF;
}

a {
	text-decoration: none;
}

form {
	display:inline-block;
	width:250px;
	text-align:right;
	font-size:14px;
	font-weight:bold;
}

input {
	border: 2px solid #9525DE;
	background-color: #FFFFFF;
	font-size:14px;
	padding:2px;
	margin:2px;
	width:152px;
}

textarea {
	border: 2px solid #9525DE;
	background-color: #FFFFFF;
	font-size:14px;
	padding:2px;
	margin:2px;
}

label {
	display:inline-block;
	width:70px;
	text-align:right;
	margin-right:6px;
	margin-top:4px;
	margin-bottom:4px;
}

#login {
	font-size:16px;
	line-height:16px;
	background-color:#9525DE;
	width:160px;
	color:white;
	border:0;
	margin-top:4px;
	padding:4px;
	cursor:pointer;
}

textarea:focus, input:focus{
    outline: none;
}

.titleArt {
	margin:4px;
}

.titleArt.flipped {
	-ms-transform: scale(-1, 1);
	-webkit-transform: scale(-1, 1);
	transform: scale(-1, 1);
}

.titleArt.small {
	margin:-4px;
	-ms-transform: scale(0.8, 0.8);
	-webkit-transform: scale(0.8, 0.8);
	transform: scale(0.8, 0.8);
}

.titleArt.small.flipped {
	-ms-transform: scale(-0.8, 0.8);
	-webkit-transform: scale(-0.8, 0.8);
	transform: scale(-0.8, 0.8);
}

.titleBoard {
}

.iconchoose {
	display:inline-block;
	background-color: #9525DE;
	margin:-20px;
	-ms-transform: scale(0.58, 0.58);
	-webkit-transform: scale(0.58, 0.58);
	transform: scale(0.58, 0.58);
}

.iconchoose.selected {
	background-color: #D900AB;
}

.icon.big {
	display:inline-block;
	margin:8px;
	margin-bottom:6px;
	-ms-transform: scale(1.2, 1.2);
	-webkit-transform: scale(1.2, 1.2);
	transform: scale(1.2, 1.2);
}

.icon.small {
	display:inline-block;
	margin:0px;
	margin-bottom:0px;
	width:60px;
	margin-top:-8px;
	margin-bottom:-8px;
}

.icon.pink {
	background-color: #D900AB;
}

.icon.green {
	background-color:#58B300;
}

.icon.purple {
	background-color:#9525DE;
}

.icon.orange {
	background-color:#FA9F21;
}

.icon.blue {
	background-color:#2D9BFF;
}

.button {
	display:inline-block;
	font-size:24px;
	line-height:24px;
	background-color:#9525DE;
	color:white;
	border:0;
	margin-top:4px;
	padding:4px;
	cursor:pointer;
}

.button.active {
	background-color:#58B300;
}

.main {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	color: #111111;
	background-color: #CCCCCC;
	text-align:center;
	padding:0;
	margin:0;
	overflow:hidden;
}

.main:-webkit-full-screen	{ width: 100% }
.main:-moz-full-screen { width: 100% }
.main:-ms-full-screen	{ width: 100% }
.main:-o-full-screen { width: 100% }
.main:full-screen	{ width: 100% }

.mainColumn {
	position:relative;
	display:block;
	width:100%;
	height:100%;
	background-color:white;
	text-align:left;
	padding:0;
	margin:0;
}

.scrollContent {
	position:absolute;
	display:inline-block;
	background-color: #ededed;
	top:32px;
	bottom:240px;
	left:0;
	right:0;
	padding:8px;
	overflow-y:scroll;
}

.scrollArrow {
	position:absolute;
	text-align: center;
	display:inline-block;
	right:4px;
	bottom:244px;
	opacity: 0;
}

.scrollArrowShow {
	opacity: 1;
}

.interaction {
	display:block;
	position:absolute;
	width:100%;
	height:240px;
	bottom:0px;
	text-align:center;
	background-color: #FFFFFF;
	color: #9525DE;
	white-space: nowrap;
}

.results {
	position:absolute;
	display:none;
	top:0;
	bottom:0;
	left:0;
	right:0;
	color:#9525DE;
	background-color:#FFFFFF;
	text-align:left;
	opacity:0;
	z-index:100;
}

.resultsShow {
	display:inline-block;
}

.resultsMessage {
	display:block;
	text-align:center;
	font-weight:bold;
	padding-top:24px;
	font-size:16px;
	margin-top:24px;
}

.resultsLetter {
	color:#2aa6f2;
	font-size:30px;
}

.playerGamePiece {
	display: inline-block;
	position:absolute;
	width:60px;
	height:72px;
	bottom:0;
	left:0;
	color:#FFFFFF;
	background-color:#6899cb;
	margin:0 4px 0 4px;
	overflow:visible !important;
	text-align: center;
	font-weight:bold;
	font-size:12px;
}

.playerGamePiece.waitingFlag {
		height: 90px;
}

.playerGamePiece.waitingPulse {
	-moz-animation-duration: 0.5s;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-moz-animation-name: waitpulse;
	-webkit-animation-name: waitpulse;
	animation-name: waitpulse;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;
}

@-moz-keyframes waitpulse {
	from {
		height: 70px; 
	}

	to {
		height: 74px; 
	}
}

@-webkit-keyframes waitpulse {
	from {
		height: 70px; 
	}

	to {
		height: 74px; 
	}
}

@keyframes waitpulse {
	from {
		height: 70px; 
	}

	to {
		height: 74px;
	}
}

.playerGamePiece.green {
	background-color:#58B300;
}

.playerGamePiece.purple {
	background-color:#9525DE;
}

.playerGamePiece.orange {
	background-color:#FA9F21;
}

.playerGamePiece.pink {
	background-color:#D900AB;
}

.playerGamePiece.blue {
	background-color:#2D9BFF;
}

.playerScoreBar {
	display: inline-block;
	position:relative;
	width:60px;
	height:50px;
	background-color:#6899cb;
	color:#FFFFFF;
	margin:120px 4px 0 4px;
	overflow:visible !important;
	text-align: center;
	font-weight:bold;
	font-size:14px;
	vertical-align: bottom;
}

.playerScoreBar.green {
	background-color:#58B300;
}

.playerScoreBar.purple {
	background-color:#9525DE;
}

.playerScoreBar.orange {
	background-color:#FA9F21;
}

.playerScoreBar.pink {
	background-color:#D900AB;
}

.playerScoreBar.blue {
	background-color:#2D9BFF;
}

.playerIcon {
	display:inline-block;
	position:absolute;
	top:-30px;
	left:5px;
	width:50px;
	height:50px;
	background-image: url("../images/playericons.png");
	background-size:300px 300px;
}

.playerThinking {
	color:white;
	display:inline-block;
	position:absolute;
	top:42px;
	left:5px;
	width:50px;
	height:50px;
}

.playerIconLarge {
	position:relative;
	width:75px;
	height:75px;
	background-size:450px 450px;
	top:0;
	left:0;
}

.scenarioTitle {
	font-size:18px;
	font-weight:bold;
	margin-bottom:20px;
}

.scenarioPrompt {
	font-weight:bold;
	margin-bottom:20px;
}

.answerContainer {
	position:relative;
	display:block;
	margin:4px 8px;
}

.answerLetterContainer {
	position:absolute;
	display:inline-block;
	margin-right:8px;
	top:0;
	bottom:0;
	left:0;
	width:20px;
}

.answerLetter {
	position:absolute;
	display:inline-block;
	top:50%;
	margin-top:-10px;
	width:20px;
	height:20px;
	line-height:20px;
	font-size:20px;
	font-weight:bold;
	text-align:center;
	border-radius:4px;
}

.answerLetterActive {
	background-color:#006CFF;
	color:white;
}

.answerChoice {
	display:inline-block;
	vertical-align:middle;
	margin:4px;
	margin-left:30px;
}

.buttonContainer {
	display:inline-block;
	position:relative;
	color: #D900AB;
	-webkit-backface-visibility: hidden;
}

.answerPrompt {
	display:inline-block;
	margin:4px;
	opacity:0;
	color:#9525DE;
	font-weight:bold;
}

.answerPromptShow {
	display:inline-block;
	margin:4px;
	opacity:1;
}

.bigOldAnswer {
	font-size: 20px;
}

.buttonSlot {
	display:inline-block;
	height:40px;
}

.buttonBase {
	display:inline-block;
	height:40px;
	line-height:40px;
	padding-left:6px;
	padding-right:6px;
	font-size:36px;
	font-weight:bold;
	background-color:#9525DE;
	color:white;
	cursor:pointer;
	left:0;
	-webkit-transform:translate(0px,0px);
	-moz-transform:translate(0px,0px);
	transform:translate(0px,0px);
	z-index:300;
}

.buttonScroll {
	display:inline-block;
	line-height:32px;
	padding-left:6px;
	padding-right:6px;
	font-size:32px;
	font-weight:bold;
	cursor:pointer;
	left:0;
	-webkit-transform:translate(0px,0px);
	-moz-transform:translate(0px,0px);
	transform:translate(0px,0px);
	z-index:300;
}

.buttonSwap {
	display:inline-block;
	color:white;
	padding:0;
	margin-left:-2px;
	margin-right:-2px;
	background-color: #9525DE;
	z-index:500;
}

.leastEthical {
	display:inline-block;
	font-size:12px;
	color:#2D9BFF;
	font-weight: bold;
	left:0;
	-webkit-transform:translate(0px,0px);
	-moz-transform:translate(0px,0px);
	transform:translate(0px,0px);
	z-index:300;
	height:20px;
}

.mostEthical {
	display:inline-block;
	font-size:12px;
	color:#58B300;
	font-weight: bold;
	left:0;
	-webkit-transform:translate(0px,0px);
	-moz-transform:translate(0px,0px);
	transform:translate(0px,0px);
	z-index:300;
	height:20px;
}

.buttonAnswer {
	font-size:40px;
	line-height:40px;
	vertical-align: 2px;
	margin-left:0px;
	margin-right:0px;
	border-spacing: 0;
}

.buttonVote {
	font-size: 12px;
	width:60px;
	line-height: 12px;
	padding: 0px;
	padding-bottom: 20px;
	margin-top:5px;
	margin-left:5px;
	margin-right:5px;
	margin-bottom:8px;
}

.buttonVote.selected {
	margin-top:0px;
	margin-left:0px;
	margin-right:0px;
	margin-bottom:3px;
}

.buttonVote.selected::before {
	position:absolute;
	display:inline-block;
	top:6px;
	left:15px;
	content: url("../images/checkmark.svg");
}

.buttonVote.selected img {
	opacity:0.5;
}

.buttonVote.green {
	background-color:#58B300;
}

.buttonVote.purple {
	background-color:#9525DE;
}

.buttonVote.orange {
	background-color:#FA9F21;
}

.buttonVote.pink {
	background-color:#D900AB;
}

.buttonVote.blue {
	background-color:#2D9BFF;
}

.buttonVote.green.selected {
	border:5px solid #58B300;
}

.buttonVote.purple.selected {
	border:5px solid #9525DE;
}

.buttonVote.orange.selected {
	border:5px solid #FA9F21;
}

.buttonVote.pink.selected {
	border:5px solid #D900AB;
}

.buttonVote.blue.selected {
	border:5px solid #2D9BFF;
}

.buttonGlow {
	-moz-animation-duration: 10s;
	-webkit-animation-duration: 10s;
	animation-duration: 10s;
	-moz-animation-name: answerpulse;
	-webkit-animation-name: answerpulse;
	animation-name: answerpulse;
	-moz-animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	/*-moz-animation-direction: alternate;
	-webkit-animation-direction: alternate;
	animation-direction: alternate;*/
}

@-moz-keyframes answerpulse {
	0%   {background-color: #1C84D5; border:2px solid #000000;}
	92%  {background-color: #1C84D5; border:2px solid #000000;}
	96%  {background-color: #2EB0FB; border:2px solid #2EB0FB;}
	100% {background-color: #1C84D5; border:2px solid #000000;}
}

@-webkit-keyframes answerpulse {
	0%   {background-color: #1C84D5; border:2px solid #000000;}
	92%  {background-color: #1C84D5; border:2px solid #000000;}
	96%  {background-color: #2EB0FB; border:2px solid #2EB0FB;}
	100% {background-color: #1C84D5; border:2px solid #000000;}
}

@keyframes answerpulse {
	0%   {background-color: #1C84D5; border:2px solid #000000;}
	92%  {background-color: #1C84D5; border:2px solid #000000;}
	96%  {background-color: #2EB0FB; border:2px solid #2EB0FB;}
	100% {background-color: #1C84D5; border:2px solid #000000;}
}

.buttonAdvocate {
	width:200px;
}

.buttonAdvocatePass {
	width:120px;
}

.buttonKeepAnswer {
	width:132px;
	font-size:24px;
}

.buttonChangeAnswer {
	width:184px;
	font-size:24px;
}

.bigLetter {
	display:inline-block;
	font-size:40px;
	vertical-align: top;
}

.advocateTimer {
	display:inline-block;
	width:280px;
	height:22px;
	line-height:22px;
	font-size:22px;
	font-weight:bold;
	margin:0px;
	background-color:#FFFFFF;
	color:white;
	border:2px solid #9525DE;
	left:0;
	-webkit-transform:translate(0px,0px);
	-moz-transform:translate(0px,0px);
	transform:translate(0px,0px);
	overflow:hidden;
}

.advocateTimerBar {
	display:inline-block;
	position:absolute;
	top:-1px;
	left:0px;
	width:280px;
	height:24px;
	background-color:#9525DE;
}

.advocateText {
	font-size: 16px;
	font-weight: bold;
	color:#9525DE;
	margin-top:4px;
	margin-bottom:-14px;
}

.buttonFlash {
	background-color: #FE7EE3;
	transition-property: background-color;
	transition-duration: 0s;
}

.buttonChosen {
	background-color:#D900AB;
	transition-property: background-color;
	transition-duration: 1s;
}

.footer {
	display:block;
	position:absolute;
	width:100%;
	height:0px;
	bottom:0;
	color:#121415;
	z-index:101;
}

.scoreAward {
	display: inline-block;
	position:absolute;
	width:60px;
	height:40px;
	bottom:200px;
	left:0;
	color:#FFFFFF;
	font-size:20px;
	font-weight:bold;
	background-color:transparent;
	text-align: center;
	opacity:0;
	-ms-transform: rotate(-35deg); /* IE 9 */
	-webkit-transform: rotate(-35deg); /* Chrome, Safari, Opera */
	transform: rotate(-35deg);
}

.scoreboard {
	text-align: center;
	font-size:30px;
	font-weight: bold;
}

.logoutButton {
	display:inline-block;
	position:absolute;
	top:0px;
	right:4px;
	font-size:20px;
	line-height:40px;
	color:white;
	font-weight:bold;
	cursor:pointer;
}

.logoutIcon {
	display:inline-block;
	position:relative;
	width:30px;
	height:30px;
	background-image: url("../images/logoutIcon.png");
	background-size: 100%;
	vertical-align:bottom;
}

.sureQuit {
	display:none;
	position:absolute;
	top:40px;
	right:4px;
	background-color:black;
	color:white;
	text-align:center;
	border-radius:4px;
	padding:4px;
}

.sureQuitShow {
	display:inline-block;
}

.sureQuitButton {
	font-size:20px;
	display:inline-block;
	position:relative;
	background-color:#1C84D5;
	border-radius:3px;
	padding:2px;
	color:white;
	margin-left:20px;
	margin-right:20px;
	margin-top:8px;
	cursor:pointer;
}

.majorityIcon {
	margin-top:-30px;
	width:274px;
	height:66px;
	background-image: url("../images/majorityicon.png");
}

.gameover {
	margin-top:60px;
	text-align:center;
	font-size:60px;
	font-weight:bold;
}

.gameoverThanks {
	font-size:18px;
	font-weight:bold;
	text-align:center;
	color:#D900AB;
}

.winnerStar {
	display:inline-block;
	position:absolute;
	left:0px;
	width:60px;
	height:60px;
  -webkit-animation:bob 3s ease-in-out infinite;
  -moz-animation:bob 3s ease-in-out infinite;
  animation:bob 3s ease-in-out infinite;
}

.winnerStarIcon {
	display:inline-block;
	width:60px;
	height:60px;
	background-image: url("../images/winnerstar.png");
  -webkit-animation:spin 2s linear infinite;
  -moz-animation:spin 2s linear infinite;
  animation:spin 2s linear infinite;
}

@-moz-keyframes spin {
	0%   {-moz-transform: rotate(0deg);}
	50%   {-moz-transform: rotate(180deg);}
	100%   {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes spin {
	0%   {-webkit-transform: rotate(0deg);}
	50%   {-webkit-transform: rotate(180deg);}
	100%   {-webkit-transform: rotate(360deg);}
}

@keyframes spin {
	0%   {-webkit-transform: rotate(0deg);}
	50%   {-webkit-transform: rotate(180deg);}
	100%   {-webkit-transform: rotate(360deg);}
}

@-moz-keyframes bob {
	0%   {top:-120px;}
	50%   {top:-80px;}
	100%   {top:-120px;}
}

@-webkit-keyframes bob {
	0%   {top:-120px;}
	50%   {top:-80px;}
	100%   {top:-120px;}
}

@keyframes bob {
	0%   {top:-120px;}
	50%   {top:-80px;}
	100%   {top:-120px;}
}

.redtext {
	color:#AF0000;
	font-size:16px;
}

.popscore {
	display:inline-block;
	color:#9525DE;
}

.popscore img {
	background-color:#9525DE;
}

.smallui .footerPlayer {
	font-size: 10px;
	width:46px;
}

.playerThinking {
	color:white;
	display:inline-block;
	position:absolute;
	font-size:12px;
	top:42px;
	left:5px;
	width:50px;
	height:50px;
}

.smallui .gameover {
	font-size:30px;
}

.smallui .gameoverThanks {
	font-size:12px;
}

.smallui .resultsMessage {
	margin-top:16px;
	font-size:12px;
}

.smallui .playerIconLarge {
	margin-top:-44px;
	margin-bottom:-44px;
	-ms-transform: scale(0.3); /* IE 9 */
	-webkit-transform: scale(0.3); /* Chrome, Safari, Opera */
	transform: scale(0.3);
}

.smallui .buttonBase {
	width:40px;
	height:40px;
	line-height:40px;
	font-size:30px;
}

.smallui .buttonSlot {
	height:40px;
	margin:4px;
}

.smallui .buttonAdvocate {
	width:160px;
}

.smallui .buttonAdvocatePass {
	width:80px;
}

.smallui .buttonKeepAnswer {
	width:80px;
	font-size:18px;
}

.smallui .buttonChangeAnswer {
	width:120px;
	font-size:18px;
}

.smallui .interaction {
	height:180px;
}

.smallui .scrollContent {
	bottom:180px;
}