canvas.board {
	position: absolute;
	left: 5px;
	top: 5px;
	font-family: sans-serif;
}

canvas.bonusWheel {
	width: 250px;
	height: 100px;
	font-family: sans-serif;
}

button.notification {
	float: right;
	border: 2px solid #000;
	border-radius: 5px;
	font-size: 18px;
	vertical-align: center;
	overflow-y: hidden;
	font-family: sans-serif;
}

div.notifications {
	position: fixed;
	top: 3px;
	right: 3px;
	font-family: sans-serif;
}

td.rightUI {
	font-family: sans-serif;
}

div.menuPadding {
	height: 5px;
	clear: both;
}

div.bonusWheel {
	clear: both;
}

div.upgradesContainer, div.upgradesSubContainer, div.statsContainer, div.optionsContainer {
	border-radius: 15px;
	clear: both;
	padding: 5px;
	font-family: sans-serif;
	margin: 2.5px;
}

div.upgradesContainer, div.upgradesSubContainer {
	border: 2px solid #080;
	vertical-align: top;
}

div.upgradesContainerLight, div.upgradesSubContainerLight {
	background: #CFC;
}

div.upgradesContainerDark, div.upgradesSubContainerDark {
	background: #030;
}

div.upgradesSubContainer {
	clear: none;
	display: inline-block;
}

div.statsContainerLight {
	border: 2px solid #008;
	background: #CCF;
}

div.statsContainerDark {
	border: 2px solid #008;
	background: #003;
}

div.optionsContainerLight {
	border: 2px solid #808;
	background: #FCF;
}

div.optionsContainerDark {
	border: 2px solid #808;
	background: #303;
}

span.upgradeHeaderNew {
	font-family: sans-serif;
	color: #F00;
}

button.upgradesHeader, button.upgradesSubHeader, button.statsHeader, button.optionsHeader {
	width: 100%;
	border: none;
	text-align: center;
	outline: none;
	font-weight: bold;
	font-family: sans-serif;
}

button.upgradesHeader, button.statsHeader, button.optionsHeader {
	font-size: 20px;
}

button.upgradesSubHeader {
	font-size: 16px;
}

button.upgradesHeaderLight, button.upgradesSubHeaderLight {
	background: #CFC;
	color: #000;
}

button.upgradesHeaderDark, button.upgradesSubHeaderDark {
	background: #030;
	color: #FFF;
}

button.statsHeaderLight {
	background: #CCF;
	color: #000;
}

button.statsHeaderDark {
	background: #003;
	color: #FFF;
}

button.optionsHeaderLight {
	background: #FCF;
	color: #000;
}

button.optionsHeaderDark {
	background: #303;
	color: #FFF;
}

div.upgradesContents, div.statsContents, div.optionsContents {
	line-height: 16px;
	font-family: sans-serif;
	font-size: 14px;
	overflow: hidden;
}

div.upgradeButtonWrapper {
	display: inline-block;
	margin: 2.5px;
}

button.upgradeButton, button.rubyUpgradeButton, button.sapphireUpgradeButton, button.emeraldUpgradeButton, button.topazUpgradeButton, button.turquoiseUpgradeButton, button.amethystUpgradeButton, button.opalUpgradeButton, button.eightBallUpgradeButton, button.beachBallUpgradeButton {
	border: 1px solid #000;
	border-radius: 10px;
	font-family: sans-serif;
	font-size: 14px;
	padding: 5px;
	transition-duration: 250ms;
}

button.upgradeButtonLight {
	background: #8C8;
	color: #000;
}

button.upgradeButtonDark {
	background: #383;
	color: #FFF;
}

button.upgradeButtonLight:disabled {
	background: #888;
	color: #000;
}

button.upgradeButtonDark:disabled {
	background: #555;
	color: #FFF;
}

button.rubyUpgradeButtonLight {
	background: #F88;
	color: #000;
}

button.rubyUpgradeButtonDark {
	background: #833;
	color: #FFF;
}

button.rubyUpgradeButtonLight:disabled {
	background: #A77;
	color: #000;
}

button.rubyUpgradeButtonDark:disabled {
	background: #300;
	color: #FFF;
}

button.sapphireUpgradeButtonLight {
	background: #88F;
	color: #000;
}

button.sapphireUpgradeButtonDark {
	background: #338;
	color: #FFF;
}

button.sapphireUpgradeButtonLight:disabled {
	background: #77A;
	color: #000;
}

button.sapphireUpgradeButtonDark:disabled {
	background: #003;
	color: #FFF;
}

button.emeraldUpgradeButtonLight {
	background: #8F8;
	color: #000;
}

button.emeraldUpgradeButtonDark {
	background: #383;
	color: #FFF;
}

button.emeraldUpgradeButtonLight:disabled {
	background: #7A7;
	color: #000;
}

button.emeraldUpgradeButtonDark:disabled {
	background: #030;
	color: #FFF;
}

button.topazUpgradeButtonLight {
	background: #FF8;
	color: #000;
}

button.topazUpgradeButtonDark {
	background: #883;
	color: #FFF;
}

button.topazUpgradeButtonLight:disabled {
	background: #AA7;
	color: #000;
}

button.topazUpgradeButtonDark:disabled {
	background: #330;
	color: #FFF;
}

button.turquoiseUpgradeButtonLight {
	background: #8FF;
	color: #000;
}

button.turquoiseUpgradeButtonDark {
	background: #388;
	color: #FFF;
}

button.turquoiseUpgradeButtonLight:disabled {
	background: #7AA;
	color: #000;
}

button.turquoiseUpgradeButtonDark:disabled {
	background: #033;
	color: #FFF;
}

button.amethystUpgradeButtonLight {
	background: #F8F;
	color: #000;
}

button.amethystUpgradeButtonDark {
	background: #838;
	color: #FFF;
}

button.amethystUpgradeButtonLight:disabled {
	background: #A7A;
	color: #000;
}

button.amethystUpgradeButtonDark:disabled {
	background: #303;
	color: #FFF;
}

button.eightBallUpgradeButton {
	background: #000;
	color: #FFF;
}

button.eightBallUpgradeButtonLight:disabled {
	background: #888;
	color: #FFF;
}

button.eightBallUpgradeButtonDark:disabled {
	background: #555;
	color: #FFF;
}

@-webkit-keyframes opalUpgradeButtonLightColor {  
  0% { background: #F88; }
  17% { background: #FF8; }
  33% { background: #8F8; }
  50% { background: #8FF; }
  67% { background: #88F; }
  83% { background: #F8F; }
  100% { background: #F88; }
}

@-webkit-keyframes opalUpgradeButtonDarkColor {  
  0% { background: #833; }
  17% { background: #883; }
  33% { background: #383; }
  50% { background: #388; }
  67% { background: #338; }
  83% { background: #838; }
  100% { background: #833; }
}

@-webkit-keyframes opalUpgradeButtonLightDisabledColor {  
  0% { background: #A77; }
  17% { background: #AA7; }
  33% { background: #7A7; }
  50% { background: #7AA; }
  67% { background: #77A; }
  83% { background: #A7A; }
  100% { background: #A77; }
}

@-webkit-keyframes opalUpgradeButtonDarkDisabledColor {  
  0% { background: #300; }
  17% { background: #330; }
  33% { background: #030; }
  50% { background: #033; }
  67% { background: #003; }
  83% { background: #303; }
  100% { background: #300; }
}

button.opalUpgradeButtonLight {
    background: white;
	color: #000;
    -webkit-animation-name: opalUpgradeButtonLightColor;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-duration: 2s; 
}

button.opalUpgradeButtonDark {
    background: black;
	color: #FFF;
    -webkit-animation-name: opalUpgradeButtonDarkColor;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-duration: 2s; 
}

button.opalUpgradeButtonLight:disabled {
    background: #AAA;
	color: #000;
    -webkit-animation-name: opalUpgradeButtonLightDisabledColor;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-duration: 2s; 
}

button.opalUpgradeButtonDark:disabled {
    background: #333;
	color: #FFF;
    -webkit-animation-name: opalUpgradeButtonDarkDisabledColor;  
    -webkit-animation-iteration-count: infinite;  
    -webkit-animation-duration: 2s; 
}

button.beachBallUpgradeButtonLight {
	background: repeating-linear-gradient(
	  45deg,
	  #F88,
	  #F88 10px,
	  #FF8 10px,
	  #FF8 20px,
	  #8F8 20px,
	  #8F8 30px,
	  #8FF 30px,
	  #8FF 40px,
	  #88F 40px,
	  #88F 50px,
	  #F8F 50px,
	  #F8F 60px
	);
	color: #000;
}

button.beachBallUpgradeButtonLight:disabled {
	background: repeating-linear-gradient(
	  45deg,
	  #A77,
	  #A77 10px,
	  #AA7 10px,
	  #AA7 20px,
	  #7A7 20px,
	  #7A7 30px,
	  #7AA 30px,
	  #7AA 40px,
	  #77A 40px,
	  #77A 50px,
	  #A7A 50px,
	  #A7A 60px
	);
	color: #000;
}

button.beachBallUpgradeButtonDark {
	background: repeating-linear-gradient(
	  45deg,
	  #A33,
	  #A33 10px,
	  #AA3 10px,
	  #AA3 20px,
	  #3A3 20px,
	  #3A3 30px,
	  #3AA 30px,
	  #3AA 40px,
	  #33A 40px,
	  #33A 50px,
	  #A3A 50px,
	  #A3A 60px
	);
	color: #FFF;
}

button.beachBallUpgradeButtonDark:disabled {
	background: repeating-linear-gradient(
	  45deg,
	  #300,
	  #300 10px,
	  #330 10px,
	  #330 20px,
	  #030 20px,
	  #030 30px,
	  #033 30px,
	  #033 40px,
	  #003 40px,
	  #003 50px,
	  #303 50px,
	  #303 60px
	);
	color: #FFF;
}

button.optionButton, button.optionButtonRed {
	border: 1px solid #000;
	border-radius: 20px;
	font-family: sans-serif;
	font-size: 14px;
	margin-top: 2.5px;
	margin-bottom: 2.5px;
}

button.optionButtonLight {
	background: #C8C;
	color: #000;
}

button.optionButtonDark {
	background: #838;
	color: #FFF;
}

button.optionButtonRedLight {
	background: #F88;
	color: #000;
}

button.optionButtonRedDark {
	background: #833;
	color: #FFF;
}

div.messageBox {
	display: block;
	font-family: sans-serif;
}

div.messageBoxLight {
	color: #000;
}

div.messageBoxDark {
	color: #FFF;
}

span.messageBoxLarge {
	font-size: 30px;
	font-weight: bolder;
}

button.dropZone {
	border: 0px;
	position: absolute;
	background: #0F0;
	opacity: 0.25;
	transition-duration: 200ms;
	font-family: sans-serif;
}

button.dropZone:disabled {
	background: #F00;
	transition-duration: 200ms;
}

.tooltip {
	width: 200px;
	background-color: #555;
	color: #fff;
	text-align: center;
	border-radius: 5px;
	padding: 5px;
	position: fixed;
	z-index: 100;
	font-family: sans-serif;
	font-size: 14px;
}

.modal {
	display: none;
	position: fixed;
	z-index: 255;
	left: 0px;
	top: 0px;
	overflow: auto;
	background-color: rgba(0,0,0,0.3);
}

.modalContent {
	font-family: sans-serif;
	background-color: #fff;
	border-radius: 20px;
	border: 1px solid #888;
}

.modalCloseButton {
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.modalCloseButton:hover,
.modalCloseButton:focus {
	color: black;
	text-decoration: none;
	cursor: pointer;
}

textarea.exportedSave {
	padding: 5px;
	background-color: #fff;
	color: #000;
	border: 1px solid #000;
	font-family: monospace;
	overflow-wrap: break-word;
}