h1 { color: black; font-family:"Cinzel Decorative", serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 24px; }
h2 { color: black; font-family:"Cinzel Decorative", serif; font-style: normal; font-weight: bold; text-decoration: none; font-size: 14px; }
.p, p { color: black; font-family:Play; font-style: normal; font-weight: normal; text-decoration: none; font-size: 12px; margin: 0px;}
.s1 { color: #00A3D7; font-family:Play; font-style: normal; font-weight: normal; text-decoration: none; font-size: 12px; }
h3 { color: black; font-family:Play; font-style: normal; font-weight: bold; text-decoration: none; font-size: 12px; margin-top: 10px;}
.s3 { color: #B51A00; font-family:Play; font-style: normal; font-weight: bold; text-decoration: none; font-size: 12px; }
.s4 { color: #B51A00; font-family:Play; font-style: normal; font-weight: normal; text-decoration: none; font-size: 12px; }
li {display: block; }
#l1 {padding-left: 0px; }
#l1> li:before {content: "• "; color: black; font-family:Play; font-style: normal; font-weight: normal; text-decoration: none; font-size: 12px; }
li {display: block; }
#l2 {padding-left: 0px;counter-reset: d1 0; }
li:before {counter-increment: d1; content: counter(d1, decimal)") "; color: black; font-family:Play; font-style: normal; font-weight: bold; text-decoration: none; font-size: 12px; }
#l3 {padding-left: 0px; }
li:before {content: "• "; color: black; font-family:Play; font-style: normal; font-weight: bold; text-decoration: none; font-size: 12px; }

#game-canvas-div {
	float: left;
	position: fixed;
	height: 100%;
	width: 100%;
}

#gameCanvas {
	width: 100%;
	height: 100%;
	position:fixed;
	top:0;
	left:0;
}

#game-interface-div {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 0.0;
	pointer-events: none;
	border-radius: 0;
}

.color-menu {
	position: absolute;
	background-size: 1040px 375px;
}

.menu-title {
	position: absolute;
	top: 5px;
	left: 0px;
	height: 26px;
	padding: 0px;
	font-size: 15px;
	font-family: 'Cinzel Decorative', cursive;
	font-weight: 700;
	text-align: center;
	color: black;
}

#resources-menu-title {
	width: 386px;
}

#structures-menu-title {
	width: 388px;
}

#agents-menu-title {
	width: 244px;
}

#trade-menu-title {
	width: 270px;
}

#your-turn-div, #confirm-action-div, #include-smuggler-div {
	opacity: 0;
	position: fixed;
	left: 50%;
	width: 800px;
	margin-left: -400px;
}

#confirm-action-div, #include-smuggler-div {
	top: 38%;
}

#your-turn-div {
	top: 28%;
	pointer-events: none;
}

#pending-action-div, #your-turn-message-div, #your-action-message-div, #include-smuggler-message-div {
	display: table;
	position: relative;
	margin: 0 auto;
	padding: 10px;
	color: white;
	text-align: center;
}

#your-turn-message-div, #your-action-message-div, #include-smuggler-message-div, #pending-action-div {
	background: rgba(0, 0, 0, .7);
	border-radius: 10px;
}

#illegal-menu-div {
	position: fixed;
	font-size: 20px;
	top: 60px;
	left: 50%;
	width: 600px;
	margin-left: -300px;
	pointer-events: auto;
	font-weight: bold;
	text-align: center;
	color: black;
	background: rgba(254, 193, 43, 0.9);
	border-radius: 10px;
}

#illegal-menu-div:hover {
	background: rgba(254, 193, 43, 1);
	cursor: pointer;
}

#your-turn-message-div {
	font-size: 40px;
}

#pending-action-div {
	top: 70px;
	font-size: 15px;
}

#phase-explain-div {
	position: absolute;
	padding: 10px;
	width: 300px;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 10px;
	cursor: pointer;
}

#your-action-message-div, #include-smuggler-message-div {
	font-size: 30px;
}

#done-button {
	position: absolute;
	width: 100px;
	height: 40px;
	right: 11px;
	top: 15px;
	font-weight: bold;
	font-size: 18px;
	background-size: 300px 120px;
	background-color: transparent;
	padding-bottom: 3px;
	pointer-events: auto;
	color: black;
}

.end-turn-button { background-position: 0px 0px; }
.end-turn-button:hover { background-position: -100px 0px; }
.end-turn-button:active { background-position: -200px 0px; }
.cancel-action-button { background-position: 0px -40px; }
.cancel-action-button:hover { background-position: -100px -40px; }
.cancel-action-button:active { background-position: -200px -40px; }
.inactive-button { background-position: 0px -80px; }

#round-menu-div {
	position: absolute;
	right: 5px;
	bottom: 160px;
	width: 124px; 
	height: 226px;
	background-position: -671px -149px;
}

#round-table {
	height: 144px;
	table-layout: fixed;
}

#round-div {
	position: absolute;
	top: 65px;
	left: 13px;
	width: 100px;
	height: 144px;
	padding: 2px;	
}

#round-td, .phase-td {
	height: 23px;
	color: white;
	padding-left: 0px;
}

.phase-td-current {
	color: black;
	background: rgba(255, 255, 100, 0.5);
}

#missions-phase-div, #resource-phase-div, #upkeep-phase-div, #agent-retire-div, #action-div {
	position: absolute;
}

#agent-retire-div {
	top: 50%;
	left: 50%;
	margin-left: -192px;
	margin-top: -80px;
}

#action-div, #agent-retire-div {
	width: 384px;
	height: 160px;
	top: 30%;
	left: 50%;
	margin-left: -192px;
	margin-top: -80px;
}

#missions-phase-div {
	width: 424px;
	height: 160px;
	top: 110px;
	left: 50%;
	margin-left: -192px;
}

#mission-div {
	position: absolute;
	width: 384px;
	height: 160px;
	top: 0px;
	left: 20px;
	background-size: 384px 640px;
}

.mission-div-p0 { background-position: 0 0; }
.mission-div-p1 { background-position: 0 -160px; }
.mission-div-p2 { background-position: 0 -320px; }
.mission-div-p3 { background-position: 0 -480px; }

.mission-arrow {
	position: absolute;
	top: 0px;
	width: 20px;
	height: 160px;
	background-size: 60px 320px;
	pointer-events: auto;
}

.mission-arrow:hover {
	cursor: pointer;
}

#mission-prev-button {
	left: 0px;
}

#mission-prev-button:hover {
	background-position: -20px 0;
}

#mission-prev-button:active {
	background-position: -40px 0;
}

#mission-next-button {
	left: 404px;
	background-position: 0 -160px;
}

#mission-next-button:hover {
	background-position: -20px -160px;
}

#mission-next-button:active {
	background-position: -40px -160px;
}

.action-menu {
	width: 384px;
	height: 160px;
	background-size: 384px 640px;
}

.action-div-p0 { background-position: 0 0; }
.action-div-p1 { background-position: 0 -160px; }
.action-div-p2 { background-position: 0 -320px; }
.action-div-p3 { background-position: 0 -480px; }

.action-name {
	position: absolute;
	top: 10px;
	left: 0px;
	height: 26px;
	width: 384px;
	padding: 0px;
	font-size: 15px;
	font-family: 'Cinzel Decorative', cursive;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: normal;
	line-height: 90%;
	color: black;
}

.action-location, .action-text {
	position: absolute;
	left: 120px;
	width: 257px;
	font-size: 14px;
	font-weight: bold;
	vertical-align: middle;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: normal;
	line-height: 110%;
	color: white;
}

.action-label {
	position: absolute;
	left: 120px;
	width: 257px;
	top: 61px;
	vertical-align: middle;
	overflow-wrap: break-word;
	padding: 0px;
	font-family: 'Cinzel Decorative', cursive;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	word-wrap: break-word;
	word-break: normal;
	line-height: 110%;
	color: black;
}

.action-location {
	top: 36px;
	padding: 0px;
	font-weight: bold;
	height: 25px;
	text-align: center;
}

.action-text {
	top: 80px;
	padding: 5px;
	font-weight: normal;
	height: 40px;
	text-align: left;
}

.action-button {
	position: absolute;
	width: 124px;
	height: 24px;
	top: 126px;
	font-weight: bold;
	background-size: 496px 72px;
	background-color: transparent;
	pointer-events: auto;
}

.button-1 { left: 7px; }
.button-2 { left: 131px; }
.button-3 { left: 255px; }

.button-yellow {background-position: 0 0; }
.button-yellow:hover { background-position: -124px 0; }
.button-yellow:active { background-position: -248px 0; }

.button-red { background-position: 0 -24px; }
.button-red:hover { background-position: -124px -24px; }
.button-red:active { background-position: -248px -24px; }

.button-blue { background-position: 0 -48px; }
.button-blue:hover { background-position:  -124px -48px; }
.button-blue:active { background-position: -248px -48px; }

.gray {
	background-position: -372px 0px;
	pointer-events: none;
}

.actor-pic {
	position: absolute;
	top: 30px;
	left: 11px;
	width: 102px;
	height: 89px;
	background-size: 102px 1157px;
}

.actor-struct-1 { background-position: 0 0; }
.actor-struct-2 { background-position: 0 -89px; }
.actor-struct-3 { background-position: 0 -178px; }
.actor-struct-4 { background-position: 0 -267px; }
.actor-struct-5 { background-position: 0 -356px; }
.actor-agent-1 { background-position: 0 -445px; }
.actor-agent-2 { background-position: 0 -534px; }
.actor-agent-3 { background-position: 0 -623px; }
.actor-agent-4 { background-position: 0 -712px; }
.actor-agent-5 { background-position: 0 -801px; }
.actor-agent-6 { background-position: 0 -890px; }
.actor-agent-7 { background-position: 0 -979px; }
.actor-agent-8 { background-position: 0 -1068px; }

#info-pic {
	position: absolute;
	top: 29px;
	left: 10px;
	width: 154px;
	height: 132px;
	background-size: 154px 1716px;
}

#info-points {
	position: absolute;
	top: -8px;
	right: 5px;
	width: 30px;
	height: 30px;
	background-size: 30px 30px;
	padding-top: 2px;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	font-size: 18px;
	color: black;
}

#info-defense {
	position: absolute;
	top: -7px;
	right: 40px;
	width: 30px;
	height: 30px;
	background-size: 30px 30px;
	text-align: center;
	vertical-align: middle;
	font-weight: bold;
	font-size: 14px;
	color: black;
}

#info-title, #build-title, #upkeep-title{
	position: absolute;
	top: 5px;
	left: 0px;
	height: 26px;
	padding: 0px;
	font-size: 15px;
	font-family: 'Cinzel Decorative', cursive;
	font-weight: 700;
	text-align: center;
	color: black;
}

#info-title {
	width: 400px;
}

#build-title {
	left: 173px;
	top: 108px;
	width: 156px;
	font-size: 12px;
	text-align: left;
}

#upkeep-title {
	left: 335px;
	top: 108px;
	width: 50px;
	font-size: 12px;
}

#info-text {
	position: absolute;
	padding: 5px;
	left: 173px;
	top: 30px;
	width: 214px;
	height: 72px;
	font-size: 12px;
	color: white;
}

#info-build {
	position: absolute;
	top: 132px;
	left: 175px;
	height: 25px;
	width: 150px;
	padding: 0px;
}

#info-require-text {
	position: absolute;
	top: 132px;
	left: 175px;
	height: 25px;
	width: 150px;
	padding: 0px;
	vertical-align: middle;
	text-align: center;
	color: white;
	font-weight: bold;
	font-family: 'Play';
}

#info-upkeep {
	position: absolute;
	top: 132px;
	left: 350px;
	height: 25px;
	width: 25px;
	padding: 0px;
}

#resource-phase-div, #upkeep-phase-div {
	width: 100px;
	height: 25px;
	right: 115px;
	text-align: right;
	background: rgba(0, 0, 0, 0.0);
}

#resource-phase-div {
	bottom: 248px;
}

#upkeep-phase-div {
	bottom: 223px;
}

#missions-spy-menu {
	position: absolute;
	width: 200px;
	height: 50px;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: 100px;
	background: rgba(255, 255, 255, 0.9);
}

.msg-action-div {

}

.msg-action-p0 {
	color: #FF4848;
}

.msg-action-p1 {
	color: #33C3FF;
}

.msg-action-p2 {
	color: #00FF00;
}

.msg-action-p3 {
	color: #FFF011;
}

#action-confirm-button-wrapper, #include-smuggler-button-wrapper {
	height: 70px;
	width: 120px;
	pointer-events: auto;
    margin: 0 auto;
}

#players-wrapper-div {
	position: absolute;
	top: 0px;
	left: 50%;
	height: 43px;
}

.player-div {
	position: absolute;
	top: 0px;
	width: 250px;
	height: 35px;
	background-size: 250px 140px;
	color: black;
}

#player-div1{ background-position: 0 -35px; }
#player-div2{ background-position: 0 -70px; }
#player-div3{ background-position: 0 -105px; }

.player-id-div {
	position: relative;
	display: table-cell;
	top: 4px;
	left: 30px;
	height: 26px;
	width: 115px;
	padding: 0px;
	font-size: 13px;
	font-family: 'Cinzel Decorative', cursive;
	font-weight: 700;
	text-align: center;
	vertical-align: middle;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: normal;
	line-height: 90%;
	color: black;
}

.player-stats-div {
	position: absolute;
	top: 3px;
	right: 5px;
	width: 100px;
	height: 25px;
	padding: 0px;
}

.player-stat-flags-div {
	position: absolute;
	top: 9px;
	left: 26px;
	width: 222px;
	height: 48px;
}

.trade-flag-on {
	top: 33px;
}

.player-trade-request-div {
	position: absolute;
	width: 222px;
	height: 24px;
	top: 0px;
	left: 0px;
	padding-left: 15px;
	font-weight: bold;
}

.player-trade-request-div:hover {
	background-position: -222px 0;
	cursor: pointer;
}

.pending-action-stat-div {
	position: absolute;
	width: 199px;
	height: 24px;
	right: 0px;
	top: 24px;
	padding-left: 25px;
	font-weight: normal;
	cursor: pointer;
}

.pending-action-stat-div, .player-trade-request-div {
	padding-top: 1px;
	text-align: center;
	vertical-align: middle;
	pointer-events: auto;
}

.res-icon, .metal-icon, .water-icon, .fuel-icon, .food-icon, .points-icon {
	width: 25px;
	height: 25px;
	font-size: 17px; 
	padding: 0px;
	text-align: center;
	vertical-align: middle;
	color: white;
	background-size: 50px 100px;
	background-color: transparent;
}

.metal-icon { background-position: 0px 0px; }
.water-icon { background-position: 0px -25px; }
.fuel-icon { background-position: 0px -50px; }
.food-icon { background-position: 0px -75px; }
.no-icon { background-position: 0px -100px; }

.metal-icon-button:hover { background-position: -25px 0px; }
.water-icon-button:hover { background-position: -25px -25px; }
.fuel-icon-button:hover { background-position: -25px -50px; }
.food-icon-button:hover { background-position: -25px -75px; }



.player-points-div {
	position: absolute;
	top: 2px;
	left: 3px;
	width: 29px;
	height: 25px;
	font-size: 19px;
	font-weight: bold;
	padding: 0px;
	text-align: center;
	vertical-align: middle;
}

.player-start-icon {
	position: absolute;
	top: 21px;
	left: 21px;
	width: 31px;
	height: 31px;
}

.points-icon {
	color: black;
	margin-left: 10px;
	font-weight: bold;
}

#game-messages-wrapper-div {
	position: absolute;
	width: 320px;
	height: 160px;
	bottom: 143px;
	left: 2px;
	pointer-events: auto;
}

#game-messages-div, #game-chat-input {
	position: relative;
	width: 100%;
	background: rgba(0, 0, 0, 0.6);
	margin: 2px;
	font-size: 10pt;
}

#game-messages-div {
	vertical-align: bottom;
	height: 120px;
	overflow-y: auto;
	overflow-x: hidden;
	pointer-events: auto;
}

#game-chat-input {
	text-align: center;
	height: 25px;
	color: rgba(255, 255, 255, .9);
	pointer-events: auto;
}

.confirm-button, .cancel-button {
	position: relative;
	float: left;
	height: 50px;
	width: 50px;
	top: 10px;
	margin: 3px;
	background-size: 150px 100px;
	font-size: 30px;
	font-weight: bold;
	background-color: transparent;
	color: black;
}

.confirm-button { background-position: 0px 0px; }
.confirm-button:hover {	background-position: -50px 0px; }
.confirm-button:active { background-position: -100px 0px; }
.cancel-button { background-position: 0px -50px; }
.cancel-button:hover { background-position: -50px -50px; }
.cancel-button:active { background-position: -100px -50px; }

#bottom-bar-div {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
	height: 162px;
	pointer-events: none;
}

#points-remaining {
	position: absolute;
	right: 0px;
	top: 50px;
	width: 84px;
	height: 142px;
}

#points-remaining-explore, #points-remaining-envoy, #points-remaining-destroy {
	position: absolute;
	width: 35px;
	height: 30px;
	right: 3px;
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

#points-remaining-explore {
	top: 13px;
}

#points-remaining-envoy {
	top: 58px;
}

#points-remaining-destroy {
	top: 103px;
}

#resources-menu-div, #structures-menu-div, #agents-menu-div {
	position: absolute;
	pointer-events: auto;
	bottom: 0px;
}

#resources-menu-div {
	left: 0px;
	width: 386px;
	height: 148px;
	background-position: 0px 0px;
}

#structures-menu-div {
	right: 244px;
	width: 388px;
	height: 136px;
	background-position: -386px -12px;
}

#agents-menu-div {
	right: 0px;
	width: 244px;
	height: 157px;
	background-position: -795px 0px;
}

.resource-div {
	position: absolute;
	float: left;
	left: 6px;
	height: 27px;
	width: 372px;
}

#resource-div0 {
	top: 35px;
}

#resource-div1 {
	top: 60px;
}

#resource-div2 {
	top: 85px;
}

#resource-div3 {
	top: 110px;
}

.fourtoone-menu {
	position: absolute;
	display: none;
	float: left;
	left: 235px;
	height: 25px;
	width: 75px;
}

.gain-div, .loss-div {
	position: absolute;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
	top: 2px;
	height: 25px;
	width: 25px;
}

.gain-div {
	left: 6px;
	color: #008ebc;
}

.loss-div {
	left: 31px;
	color: #ff5656;
}

.resource-table {
	position: absolute;
	table-layout: fixed;
	top: 0px;
	left: 60px;
	height: 25px;
	width: 250px;
}

.fourtoone-button {
	position: absolute;
	top: 1px;
	right: 0px;
	width: 55px;
	height: 25px;
	color: black;
	font-weight: bold;
	background-color: transparent;
}

.fourtoone-button:hover {
	background-position: -55px 0;
}

.trade-request {
	position: absolute;
	width: 222px;
	height: 24px;
}

.trade-request:hover {
	background-position: -222px 0;
}

#trade-button {
	position: absolute;
	right: 7px;
	top: 5px;
	font-weight: bold;
	width: 55px;
	height: 27px;
	color: black;
	background-color: transparent;
}

#trade-button:hover {
	background-position: -55px 0;
}

#trade-menu-div {
	opacity: 0;
	position: fixed;
	top: 38%;
	left: 50%;
	width: 269px;
	height: 191px;
	margin-left: -134px;
	pointer-events: auto;
	background-position: -401px -149px;
}

#player-trade-div, #opponent-trade-div{
	position: absolute;
	top: 67px;
	width: 100px;
	height: 57px;
}

.trade-arrow-up, .trade-arrow-down {
	width: 25px;
	height: 16px;
	background-size: 75px 32px;
	cursor: pointer;
}

.trade-arrow-down {
	background-position: 0 -16px;
}

.trade-arrow-up:hover {
	background-position: -25px 0;
}

.trade-arrow-down:hover {
	background-position: -25px -16px;
}

.trade-arrow-up:active {
	background-position: -50px 0;
}

.trade-arrow-down:active {
	background-position: -50px -16px;
}

#player-trade-div {
	left: 21px;
}

#opponent-trade-div {
	right: 21px;
}

#trade-offers-div {
	position: absolute;
	top: 130px;
	left: 175px;
	width: 75px;
	height: 25px;
}

#trade-radio-table {
	table-layout: fixed;
}

.trade-radio-button {
	width: 25px;
	height: 25px;
	background-repeat: no-repeat;
	background-size: 100px 100px;
	pointer-events: auto;
	cursor: pointer;
}

#trade-radio-button0.radio-on { background-position: 0 0; }
#trade-radio-button0.radio-on:hover { background-position: -25px 0; }
#trade-radio-button0.radio-off { background-position: -50px 0; }
#trade-radio-button0.radio-off:hover { background-position: -75px 0; }

#trade-radio-button1.radio-on { background-position: 0 -25px; }
#trade-radio-button1.radio-on:hover { background-position: -25px -25px; }
#trade-radio-button1.radio-off { background-position: -50px -25px; }
#trade-radio-button1.radio-off:hover { background-position: -75px -25px; }

#trade-radio-button2.radio-on { background-position: 0 -50px; }
#trade-radio-button2.radio-on:hover { background-position: -25px -50px; }
#trade-radio-button2.radio-off { background-position: -50px -50px; }
#trade-radio-button2.radio-off:hover { background-position: -75px -50px; }

#trade-radio-button3.radio-on { background-position: 0 -75px; }
#trade-radio-button3.radio-on:hover { background-position: -25px -75px; }
#trade-radio-button3.radio-off { background-position: -50px -75px; }
#trade-radio-button3.radio-off:hover { background-position: -75px -75px; }

#trade-button-yes, #trade-button-no {
	position: absolute;
	top: 157px;
	width: 124px;
	height: 24px;
	font-weight: bold;
	background-repeat: no-repeat;
	background-size: 496px 72px;
	pointer-events: auto;
}

#trade-button-yes {
	left: 11px;
}

#trade-button-no {
	right: 11px;
	background-position: 0 -24px;
}

#trade-button-yes:hover, #trade-button-no:hover {
	background-position: -124px 0;
}

#trade-button-no:hover {
	background-position: -124px -24px;
}

#trade-button-yes:active {
	background-position: -248px 0;
}

#trade-button-no:active {
	background-position: -248px -24px;
}

#info-div {
	bottom: 150px;
	right: 100px;
	width: 400px;
	height: 174px;
	background-position: 0 -149px;
}

#struct-mines-div, #struct-fleets-div, #struct-factories-div, #struct-embassies-div, #struct-base-div {
	position: absolute;
}

#struct-mines-div {
	top: 36px;
	left: 27px;
	width: 136px;
	height: 34px;
}

#struct-fleets-div {
	top: 36px;
	left: 170px;
	width: 126px;
	height: 34px;
}

#struct-factories-div {
	top: 72px;
	left: 13px;
	width: 108px;
	height: 50px;
}

#struct-embassies-div {
	top: 72px;
	left: 120px;
	width: 185px;
	height: 50px;
}

#struct-base-div {
	top: 40px;
	left: 304px;
	width: 70px;
	height: 70px;
}

.struct-table {
	width: 100%;
	height: 100%;
}

.struct-button {
	background-color: transparent;
	background-size: 584px 84px;
}

.struct-mine-button {
	width: 34px;
	height: 34px;
	background-position: -140px -50px;
}

.struct-mine-button:hover {
	background-position: -174px -50px;
}

.struct-mine-button:active {
	background-position: -466px -50px;
}

.struct-factory-button {
	width: 34px;
	height: 50px;
	background-position: -140px 0;
}

.struct-factory-button:hover {
	background-position: -174px 0;
}

.struct-factory-button:active {
	background-position: -466px 0;
}

.struct-embassy-button {
	width: 37px;
	height: 50px;
	background-position: -208px 0;
}

.struct-embassy-button:hover {
	background-position: -245px 0;
}

.struct-embassy-button:active {
	background-position: -537px 0;
}

.struct-fleet-button {
	width: 42px;
	height: 34px;
	background-position: -208px -50px;
}

.struct-fleet-button:hover {
	background-position: -250px -50px;
}

.struct-fleet-button:active {
	background-position: -542px -50px;
}

.struct-base-button {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 70px;
	height: 70px;
	background-position: 0 0;
}

.struct-base-button:hover {
	background-position: -70px 0;
}

.struct-base-button:active {
	background-position: -362px 0;
}

.mine-button-used, .mine-button-used:hover, .mine-button-used:active {
	background-position: -432px -50px;
}

.factory-button-used, .factory-button-used:hover, .factory-button-used:active {
	background-position: -432px 0px;
}

.embassy-button-used, .embassy-button-used:hover, .embassy-button-used:active {
	background-position: -500px 0;
}

.fleet-button-used, .fleet-button-used:hover, .fleet-button-used:active {
	background-position: -500px -50px;
}

.base-button-used, .base-button-used:hover, .base-button-used:active {
	background-position: -292px 0px;
}

#agents-table {
	position: absolute;
	top: 32px;
	left: 12px;
	width: 216px;
	height: 108px;
}

.agent-button {
	width: 54px;
	height: 54px;
	background-size: 216px 432px;
	color: white;
	text-align: center;
	vertical-align: bottom;
	table-layout: fixed;
	margin-right: 1px;
	margin-bottom: 1px;
	padding: 0;
}

/* I bet we can set all this css in a javascript for loop */ 
#agent-button-explorer { background-position: 0px 0px; }
#agent-button-explorer:hover { background-position: -54px 0px; }
#agent-button-explorer:active { background-position: -162px 0px; }
#agent-button-explorer.agent-off, #agent-button-explorer.agent-off:hover, #agent-button-explorer.agent-off:active {
	background-position: -108px 0px;
}

#agent-button-miner { background-position: 0px -54px; }
#agent-button-miner:hover { background-position: -54px -54px; }
#agent-button-miner:active { background-position: -162px -54px; }
#agent-button-miner.agent-off, #agent-button-miner.agent-off:hover, #agent-button-miner.agent-off:active {
	background-position: -108px -54px;
}

#agent-button-surveyor { background-position: 0px -108px; }
#agent-button-surveyor:hover { background-position: -54px -108px; }
#agent-button-surveyor:active { background-position: -162px -108px; }
#agent-button-surveyor.agent-off, #agent-button-surveyor.agent-off:hover, #agent-button-surveyor.agent-off:active {
	background-position: -108px -108px;
}

#agent-button-ambassador { background-position: 0px -162px; }
#agent-button-ambassador:hover { background-position: -54px -162px; }
#agent-button-ambassador:active { background-position: -162px -162px; }
#agent-button-ambassador.agent-off, #agent-button-ambassador.agent-off:hover, #agent-button-ambassador.agent-off:active {
	background-position: -108px -162px;
}

#agent-button-envoy { background-position: 0px -216px; }
#agent-button-envoy:hover { background-position: -54px -216px; }
#agent-button-envoy:active { background-position: -162px -216px; }
#agent-button-envoy.agent-off, #agent-button-envoy.agent-off:hover, #agent-button-envoy.agent-off:active {
	background-position: -108px -216px;
}

#agent-button-spy { background-position: 0px -270px; }
#agent-button-spy:hover { background-position: -54px -270px; }
#agent-button-spy:active { background-position: -162px -270px; }
#agent-button-spy.agent-off, #agent-button-spy.agent-off:hover, #agent-button-spy.agent-off:active {
	background-position: -108px -270px;
}

#agent-button-smuggler { background-position: 0px -324px; }
#agent-button-smuggler:hover { background-position: -54px -324px; }
#agent-button-smuggler:active { background-position: -162px -324px; }
#agent-button-smuggler.agent-off, #agent-button-smuggler.agent-off:hover, #agent-button-smuggler.agent-off:active {
	background-position: -108px -324px;
}

#agent-button-sabateur { background-position: 0px -378px; }
#agent-button-sabateur:hover { background-position: -54px -378px; }
#agent-button-sabateur:active { background-position: -162px -378px; }
#agent-button-sabateur.agent-off, #agent-button-sabateur.agent-off:hover, #agent-button-sabateur.agent-off:active {
	background-position: -108px -378px;
}

#resourcepackages-div {
	position: absolute;
	bottom: 0px;
	left: 391px;
	height: 150px;
	width: 0px;
}

.respkg-div {
	position: absolute;
	width: 68px;
	height: 150px;
	pointer-events: auto;
	cursor: pointer;
}

.respkg-div:hover {
	background-position: -68px 0;
}

.respkg-notification-div {
	position: absolute;
	left: 0px;
	top: -75px;
	width: 68px;
	height: 70px;
}

.respkg-message-div {
	position: absolute;
	bottom: 40px;
	left: 0px;
	width: 68px;
	height: 36px;
	color: #fff094;
	font-size: 10pt;
	font-weight: bold;
	text-align: center;
}

.respkg-arrow-div {
	position: absolute;
	left: 16px;
	bottom: 0px;
	width: 33px;
	height: 40px;
}

.respkg-clickable-div {
	width: 68px;
	height: 150px;
}

.respkg-title-div {
	position: absolute;
	top: 8px;
	width: 68px;
	color: black;
	text-align: center;
	font-size: 11pt;
	font-weight: bold;
}

.respkg-resources-div {
	position: absolute;
	left: 7px;
	top: 38px;
	width: 52px;
	height: 105px;
	color: black;
}

.respkg-resources-table {
	width: 53px;
	height: 100px;
}

.respkg-num-td {
	color: white;
	font-size: 13pt;
	text-align: center;
	font-weight: bold;
}

.respkg-collect-td {
	color: #8ae0fa;
}

.respkg-upkeep-td {
	color: #ff9191;
}

.res-change {
	position: absolute;
	text-align: center;
	font-size: 13pt;
	font-weight: bold;
	width: 25px;
	height: 25px;
	left: 60px;
	top: 0px;
}

.res-change-up {
	color: #8ae0fa;
}

.res-change-down {
	color: #ff9191;
}

#game-end-div {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: transparent;
}

.dark-screen {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	margin: 0px;
	position: fixed;
	border-radius: 0px;
	background: rgba(0, 0, 0, .7);
}

#settings-div {
	position: absolute;
	width: 35px;
	height: 175px;
	top: 50px;
	left: 10px;
	background: transparent;
	pointer-events: auto;
}

.settings-button {
	width: 35px;
	height: 35px;
	padding: 0px;
	background-color: transparent;
	background-size: 105px 245px;
	cursor: pointer;
}

.rules-button { background-position: 0px 0px; }
.rules-button:hover { background-position: -35px 0px; }
.rules-button:active { background-position: -70px 0px; }
.zoomin-button { background-position: 0px -35px; }
.zoomin-button:hover { background-position: -35px -35px; }
.zoomin-button:active { background-position: -70px -35px; }
.zoomout-button { background-position: 0px -70px; }
.zoomout-button:hover { background-position: -35px -70px; }
.zoomout-button:active { background-position: -70px -70px; }
.sound-button-on { background-position: 0px -105px; }
.sound-button-on:hover { background-position: -35px -105px; }
.sound-button-on:active { background-position: -70px -105px; }
.music-button-on { background-position: 0px -140px; }
.music-button-on:hover { background-position: -35px -140px; }
.music-button-on:active { background-position: -70px -140px; }
.sound-button-off { background-position: 0px -175px; }
.sound-button-off:hover { background-position: -35px -175px; }
.sound-button-off:active { background-position: -70px -175px; }
.music-button-off { background-position: 0px -210px; }
.music-button-off:hover { background-position: -35px -210px; }
.music-button-off:active { background-position: -70px -210px; }

#rules-div {
	padding: 10px;
	position: absolute;
	width: 400px;
	height: 500px;
	left: 55px;
	top: 50px;
	border-radius: 20px;
	pointer-events: auto;
	background: rgba(255, 255, 255, 0.8);
}

#rules-div:hover {
	background: rgba(255, 255, 255, 0.95);
}

#rules-iframe {
	position: relative;
	width: 380px;
	height: 480px;
	top: 0px;
	left: 0px;
	cursor: pointer;
}

#game-end-menu {
	position: absolute;
	width: 608px;
	height: 437px;
	left: 50%;
	margin-left: -304px;
	top: 40%;
	margin-top: -215px;
}

#winner-div {
	top: 45px;
	width: 608px;
	font-size: 23px;
}

#end-game-graph {
	position: absolute;
	left: 13px;
	top: 30px;
	width: 580px;
	height: 365px;
}

#end-game-lobby-button {
	position: absolute;
	right: 14px;
	top: 403px;
}

#game-chat-input::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    rgba(255, 255, 255, 0.5);
}
#game-chat-input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    rgba(255, 255, 255, 0.5);
   opacity:  1;
}
#game-chat-input::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    rgba(255, 255, 255, 0.5);
   opacity:  1;
}
#game-chat-input:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    rgba(255, 255, 255, 0.5);
}