@import url('https://fonts.googleapis.com/css?family=Caveat|Poppins|Open+Sans&display=swap');

html
{
	height: 100vh;
	scroll-behavior: smooth;
}

body
{
	background: #444 url(../files/image/bg_body.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	font-family: "Poppins", "verdana", sans-serif;
	font-size: 14px;
	height: 100vh;
	margin: 0;
	padding: 0;
}

h1
{
	background-color: rgba(0,0,0,0.5);
	color: #fff;
	font-size: 175%;
	letter-spacing: 1px;
	padding: 3px 0;
}

h2
{
	font-size: 150%;
}

h3
{
	font-size: 150%;
}

label:hover
{
	cursor: pointer;
}

.continue /* don't like this, rename */
{
	clear: both;
	padding-top: 20px;
}

.game_envelope
{
	height: 100%;
	margin: 0 auto;
	/* max-height: 1000px; */
	max-width: 1890px;
	position: relative;
}

.game_envelope > div
{
	left: 50%;
	position: absolute;
	width: 100%;

	transform: translate(-50%); /* left top */
	-webkit-transform: translate(-50%);

	transition: .3s;
	-webkit-transition: .3s;
}

#tutorial
{
	display: none;
	left: -9999px;
	position: absolute;
}

.instructions p
{
	background-color: #F5FAFF;
	border: 1px solid #008cff;
	border-radius: 5px;
	box-shadow: 0 0 12px rgba(0,0,0,0.4);
	display:inline-block;
	margin: 10px 0;
	padding: 5px 10px;
}

.no_instructions p
{
	margin: 10px 0;
	padding: 7px;
}

.page
{
	height: 100%;
	opacity: 0;
	text-align: center;
	visibility: hidden;
}

.standard
{
	opacity: 0;
	text-align: center;
	visibility: hidden;
}

.panel
{
	background-color: #fff;
	/* border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px; */
	border-radius: 8px;
	box-shadow: 0 0 15px rgba(0,0,0,0.6);
	margin: 0 auto;
	overflow: auto;
	padding: 20px;
}

.panelCover
{
	background-color: transparent;
	/* background-color: rgba(0,0,0,0.5); */
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 4;
}

#guide h1
{
	text-align: center;
}

#guide .panel
{
	margin-top: 57px;
	overflow: hidden;
	width: 700px;
}

#guide .panel div
{
	height: 800px;
	overflow: auto;
	padding: 0 20px;
}

#guide .panel h2
{
	/* background: linear-gradient(to right, rgba(176, 142, 40, 1),rgba(176, 142, 40, 0)); */
	background: #B08E28 url(../files/image/bg_body.jpg);
	background-position: 0 500px;
	color: #fff;
	font-size: 200%;
	margin: 40px 0 10px 0;
	padding-left: 10px;
}

#guide .panel h2:nth-of-type(2)
{
	background-position: 0 360px;
}

#guide .panel h2:nth-of-type(3)
{
	background-position: 0 100px;
}

#guide .panel h3
{
	padding: 12px 0 4px 0;
}

#guide .panel p
{
	margin-bottom: 14px;
}

.help
{
	background-color: #f4f4f4;
	border-radius: 5px;
	bottom: 30px;
	display: none;
	height: 0;
	left: 30px;
	max-width: 500px;
	overflow: hidden;
	position: absolute;
	text-align: left;

	transition: .3s;
	-webkit-transition: .3s;
}

.help:hover
{
	cursor: pointer;
}

.help div
{
	border: 2px solid #9BF311;
	padding: 36px 20px 20px 20px;
}

.help p
{
	margin-bottom: 16px;
}

#tutorial:checked ~ .help
{
	display: block;
}

/***********************************************/
#intro
/***********************************************/
{
	/* align-items: center; */
	background-image: url(../files/image/horseless_carriage_art.jpg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	border-radius: 8px;
	box-shadow: 8px 8px 15px rgba(0,0,0,0.4);
	color: #fff;
	/* display: flex; */
	/* flex-direction: column; */
	height: 900px;
	/* justify-content: center; */
	margin: 0 auto;
	top: 50%;
	width: 637px;

	transform: translate(-50%, -50%); /* left top */
	-webkit-transform: translate(-50%, -50%);
}

#intro h1
{
	background-color: transparent;
}

#intro .box
{
	background-color: rgba(0,0,0,0.6);
	border: 2px solid #eee;
	box-shadow: 7px 7px 7px 7px rgba(0,0,0,0.3); /* horiz vert blur size color 'inset' */;
	margin: 250px auto 30px auto;
	max-width: 500px;
	padding: 5vh 30px;
	text-align: center;
}

#intro .box h2
{
	font-size: 125%;
	padding-top: 1vh;
}

#intro .box p
{
	padding-top: 2vh;
}

#intro .button_box
{
	height: 270px;
	margin: 0 70px;
	overflow: auto;
	position: relative;
}

#intro .button_box label
{
	/* background-image: url(../files/image/box_empty.gif); */
	background-repeat:  no-repeat;
	background-position:  5px 5px;
	border: 1px solid #666;
	border-radius: 5px;
	display: inline-block;
	margin-right: 8px;
	padding: 5px 10px 5px 36px;

	transition: .2s;
	-webkit-transition: .2s;
}

#intro .button_box label:hover
{
	border: 1px solid #9BF311;
}

#tutorial:checked ~ #intro .button_box label
{
	background-image: url(../files/image/box_tick.png);
	border: 1px solid #9BF311;
}

#intro .button_box input[type="button"]
{
	width: 120px;
}

#intro .button_box #guide_button
{
	top: 0;
	right:0;
	position: absolute;
}

#intro .button_box #auto_button
{
	bottom: 0;
	display: none;
	left:0;
	position: absolute;
}

#intro section
{
	background-color: rgba(0, 0, 0, 0.3);
	border-radius: 5px;
	bottom: 30px;
	color: #888;
	padding: 2px 10px;
	position: absolute;
	left: 50%;

	transform: translate(-50%); /* left top */
	-webkit-transform: translate(-50%);
}

/***********************************************/
#market_board
/***********************************************/
{
	background-color: #fff;
	border-radius: 5px;
	box-shadow: 0 0 25px rgba(0,0,0,0.4);
	margin: 0 auto;
	overflow: auto;
	padding: 0 20px 60px 55px;
	top: 100px;
	width: 1440px;
}

#market_board h3
{
	font-size: 175%;
	padding: 10px 0 5px 0;
}

#market_board .button_and_info
{
	float: right;
	height: 220px;
	position: relative;
	width: 630px;
}

#market_board #player_using_market_board
{
	text-align: left;
}

#market_board #card_played
{
	bottom: 5px;
	height: 190px;
	left: 30px;
	opacity: 0;
	position: absolute;
	visibility: hidden;
	width: 135px;

	-webkit-filter: drop-shadow(5px 5px 5px #666);
	filter: drop-shadow(5px 5px 5px #666);
}

#market_board #advisory
{
	background-color: #F5FAFF;
	border: 1px solid #008cff;
	border-radius: 5px;
	box-shadow: 0 0 12px rgba(0,0,0,0.4);
	opacity: 0;
	padding: 12px 10px;
	position: absolute;
	right: 0;
	text-align: left;
	top: 80px;
	visibility: hidden;
	max-width: 420px;

	transition: .3s;
	-webkit-transition: .3s;
}

#market_board #advisory p:nth-of-type(2),
#market_board #advisory p:nth-of-type(3)
{
	padding-top: 8px;
}

#market_board .button_and_info #active_player
{
	border: 1px solid #ccc;
	border-radius: 50%;
	box-shadow: 2px 3px 6px 3px rgba(0, 0, 0, 0.3);
	margin-top: 70px;
}

#market_board .button_and_info #next
{
	right: 0;
	opacity: 0;
	position: absolute;
	top: 20px;
	visibility: hidden;
}

#market_board .button_and_info #pass
{
	bottom: 0;
	opacity: 0;
	position: absolute;
	right: 0;
	visibility: hidden;
}

#market_board .button_and_info #autofill
{
	bottom: 0;
	left: 0;
	position: absolute;
}

#market_board .button_and_info #finished
{
	bottom: 0;
	position: absolute;
	right: 0;
}

#market_board .vertical_strip
{
	background-color: #444;
	height: 700px;
	left: 235px;
	position: absolute;
	top: 58px;
	width: 3px;
}

#market_board .vertical_strip:nth-of-type(2)
{
	left: 583px;
}

#market_board .vertical_strip:nth-of-type(3)
{
	left: 408px;
	width: 5px;
}

#market_board .horizontal_strip
{
	background-color: #444;
	height: 3px;
	left: 60px;
	position: absolute;
	top: 232px;
	width: 700px;
}

#market_board .horizontal_strip:nth-of-type(5)
{
	top: 581px;
}

#market_board .horizontal_strip:nth-of-type(6)
{
	height: 5px;
	top: 405px;
}

#market_board #bottom_track
{
	height: 35px;
	left: 60px;
	position: absolute;
	top: 764px;
	width: 702px;
}

#market_board #side_track
{
	height: 702px;
	left: 20px;
	position: absolute;
	top: 57px;
	width: 35px;
}

#market_board #bottom_track div
{
	background-image: url(../files/image/bar_horizontal.png);
	height: 100%;
}

#market_board #side_track div
{
	background-image: url(../files/image/bar_vertical.png);
	background-position: 0 -347px;
	height: 100%;
}

#market_board .track1
{
	background-color: #52345C;
}

#market_board .track2
{
	background-color: #526A35;
}

#market_board .track3
{
	background-color: #3275A6;
}

#market_board .track4
{
	background-color: #E6A237;
}

#market_board .track5
{
	background-color: #B13128;
}

#market_board #bottom_track .offset_h1
{
	background-position: -174px 0;
}

#market_board #bottom_track .offset_h2
{
	background-position: -347px 0;
}

#market_board #side_track .offset_v1
{
	background-position: 0 -174px;
}

#market_board #side_track .offset_v2
{
	background-position: 0 0;
}

/***********************************************/
#market_board #window_bars
/***********************************************/
{
	height: 705px;
	left: 58px;
	overflow: hidden;
	position: absolute;
	top: 55px;
	width: 705px;
}

#bar_horizontal_1,
#bar_horizontal_2
{
	height: 10px;
	position: absolute;
}

#bar_vertical_1,
#bar_vertical_2
{
	position: absolute;
	width: 10px;
}

/***********************************************/
#market_board #track_pointer
/***********************************************/
{
	border-radius: 50%;
	bottom: 20px;
	height: 35px;
	left: 20px;
	overflow: hidden;
	position: absolute;
	width: 35px;
}

/***********************************************/
#market_grid
/***********************************************/
{
	border: 3px solid #444;
	float: left;
	margin: 5px 0 0 5px;
	padding: 0 5px 5px 0;
}

#market_grid .inner > div
{
	background: url(../files/image/niche_light.jpg);
	float: left;
	height: 80px;
	margin-left: 5px;
	margin-top: 5px;
	position: relative;
	width: 80px;
}

#market_grid .inner .niche_dark
{
	background: url(../files/image/niche_dark.jpg);
}

#market_grid .inner > div:nth-of-type(9),
#market_grid .inner > div:nth-of-type(17),
#market_grid .inner > div:nth-of-type(25),
#market_grid .inner > div:nth-of-type(33),
#market_grid .inner > div:nth-of-type(41),
#market_grid .inner > div:nth-of-type(49),
#market_grid .inner > div:nth-of-type(57)
{
	clear:both;
}

#market_grid .inner > div:nth-of-type(3),
#market_grid .inner > div:nth-of-type(7),
#market_grid .inner > div:nth-of-type(11),
#market_grid .inner > div:nth-of-type(15),
#market_grid .inner > div:nth-of-type(19),
#market_grid .inner > div:nth-of-type(23),
#market_grid .inner > div:nth-of-type(27),
#market_grid .inner > div:nth-of-type(31),
#market_grid .inner > div:nth-of-type(35),
#market_grid .inner > div:nth-of-type(39),
#market_grid .inner > div:nth-of-type(43),
#market_grid .inner > div:nth-of-type(47),
#market_grid .inner > div:nth-of-type(51),
#market_grid .inner > div:nth-of-type(55),
#market_grid .inner > div:nth-of-type(59),
#market_grid .inner > div:nth-of-type(63)
{
	margin-left: 8px;
}

#market_grid .inner > div:nth-of-type(5),
#market_grid .inner > div:nth-of-type(13),
#market_grid .inner > div:nth-of-type(21),
#market_grid .inner > div:nth-of-type(29),
#market_grid .inner > div:nth-of-type(37),
#market_grid .inner > div:nth-of-type(45),
#market_grid .inner > div:nth-of-type(53),
#market_grid .inner > div:nth-of-type(61)
{
	margin-left: 10px;
}

#market_grid .inner > div:nth-of-type(17),
#market_grid .inner > div:nth-of-type(18),
#market_grid .inner > div:nth-of-type(19),
#market_grid .inner > div:nth-of-type(20),
#market_grid .inner > div:nth-of-type(21),
#market_grid .inner > div:nth-of-type(22),
#market_grid .inner > div:nth-of-type(23),
#market_grid .inner > div:nth-of-type(24),
#market_grid .inner > div:nth-of-type(49),
#market_grid .inner > div:nth-of-type(50),
#market_grid .inner > div:nth-of-type(51),
#market_grid .inner > div:nth-of-type(52),
#market_grid .inner > div:nth-of-type(53),
#market_grid .inner > div:nth-of-type(54),
#market_grid .inner > div:nth-of-type(55),
#market_grid .inner > div:nth-of-type(56)
{
	margin-top: 8px;
}

#market_grid .inner > div:nth-of-type(33),
#market_grid .inner > div:nth-of-type(34),
#market_grid .inner > div:nth-of-type(35),
#market_grid .inner > div:nth-of-type(36),
#market_grid .inner > div:nth-of-type(37),
#market_grid .inner > div:nth-of-type(38),
#market_grid .inner > div:nth-of-type(39),
#market_grid .inner > div:nth-of-type(40)
{
	margin-top: 10px;
}

#market_grid p
{
	float: left;
	font-size: 16px;
	height: 18px;
	line-height: 18px;
	position: relative;
	width: 33.33%;
	z-index: 2;
}

#market_grid .cars img
{
	vertical-align: bottom;
}

#market_grid .filler
{
	float: left;
	font-size: 12px;
	height: 6px;
	width: 100%;
}

#market_grid input[type="radio"]
{
	display: none;
	left: -9999px;
	position: absolute;
}

#market_grid label,
#market_grid section
{
	display: block;
	height: 80px;
	left: 0;
	position: absolute;
	top: 0;
	width: 80px;
	z-index: 3;

	transition: .3s;
	-webkit-transition: .3s;
}

#market_grid .inner > div section
{
	z-index: 1;
}

#market_grid .quadrant1 div:nth-of-type(33) section,
#market_grid .quadrant1 div:nth-of-type(34) section,
#market_grid .quadrant1 div:nth-of-type(35) section,
#market_grid .quadrant1 div:nth-of-type(36) section,
#market_grid .quadrant1 div:nth-of-type(41) section,
#market_grid .quadrant1 div:nth-of-type(42) section,
#market_grid .quadrant1 div:nth-of-type(43) section,
#market_grid .quadrant1 div:nth-of-type(44) section,
#market_grid .quadrant1 div:nth-of-type(49) section,
#market_grid .quadrant1 div:nth-of-type(50) section,
#market_grid .quadrant1 div:nth-of-type(51) section,
#market_grid .quadrant1 div:nth-of-type(52) section,
#market_grid .quadrant1 div:nth-of-type(57) section,
#market_grid .quadrant1 div:nth-of-type(58) section,
#market_grid .quadrant1 div:nth-of-type(59) section,
#market_grid .quadrant1 div:nth-of-type(60) section
{
	background-color: rgba(255, 128, 0, 0.3);
}

#market_grid .quadrant2 div:nth-of-type(37) section,
#market_grid .quadrant2 div:nth-of-type(38) section,
#market_grid .quadrant2 div:nth-of-type(39) section,
#market_grid .quadrant2 div:nth-of-type(40) section,
#market_grid .quadrant2 div:nth-of-type(45) section,
#market_grid .quadrant2 div:nth-of-type(46) section,
#market_grid .quadrant2 div:nth-of-type(47) section,
#market_grid .quadrant2 div:nth-of-type(48) section,
#market_grid .quadrant2 div:nth-of-type(53) section,
#market_grid .quadrant2 div:nth-of-type(54) section,
#market_grid .quadrant2 div:nth-of-type(55) section,
#market_grid .quadrant2 div:nth-of-type(56) section,
#market_grid .quadrant2 div:nth-of-type(61) section,
#market_grid .quadrant2 div:nth-of-type(62) section,
#market_grid .quadrant2 div:nth-of-type(63) section,
#market_grid .quadrant2 div:nth-of-type(64) section
{
	background-color: rgba(255, 128, 0, 0.3);
}

#market_grid .quadrant3 div:nth-of-type(1) section,
#market_grid .quadrant3 div:nth-of-type(2) section,
#market_grid .quadrant3 div:nth-of-type(3) section,
#market_grid .quadrant3 div:nth-of-type(4) section,
#market_grid .quadrant3 div:nth-of-type(9) section,
#market_grid .quadrant3 div:nth-of-type(10) section,
#market_grid .quadrant3 div:nth-of-type(11) section,
#market_grid .quadrant3 div:nth-of-type(12) section,
#market_grid .quadrant3 div:nth-of-type(17) section,
#market_grid .quadrant3 div:nth-of-type(18) section,
#market_grid .quadrant3 div:nth-of-type(19) section,
#market_grid .quadrant3 div:nth-of-type(20) section,
#market_grid .quadrant3 div:nth-of-type(25) section,
#market_grid .quadrant3 div:nth-of-type(26) section,
#market_grid .quadrant3 div:nth-of-type(27) section,
#market_grid .quadrant3 div:nth-of-type(28) section
{
	background-color: rgba(255, 128, 0, 0.3);
}

#market_grid .quadrant4 div:nth-of-type(5) section,
#market_grid .quadrant4 div:nth-of-type(6) section,
#market_grid .quadrant4 div:nth-of-type(7) section,
#market_grid .quadrant4 div:nth-of-type(8) section,
#market_grid .quadrant4 div:nth-of-type(13) section,
#market_grid .quadrant4 div:nth-of-type(14) section,
#market_grid .quadrant4 div:nth-of-type(15) section,
#market_grid .quadrant4 div:nth-of-type(16) section,
#market_grid .quadrant4 div:nth-of-type(21) section,
#market_grid .quadrant4 div:nth-of-type(22) section,
#market_grid .quadrant4 div:nth-of-type(23) section,
#market_grid .quadrant4 div:nth-of-type(24) section,
#market_grid .quadrant4 div:nth-of-type(29) section,
#market_grid .quadrant4 div:nth-of-type(30) section,
#market_grid .quadrant4 div:nth-of-type(31) section,
#market_grid .quadrant4 div:nth-of-type(32) section
{
	background-color: rgba(255, 128, 0, 0.3);
}

#market_grid input:checked ~ label,
#market_grid label:hover
{
	background: rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.dealer_color1
{
	background-color: rgba(219, 58, 48, .6);
}

.dealer_color2
{
	background-color: rgba(59, 83, 114, .6);
}

.dealer_color3
{
	background-color: rgba(144, 106, 157, .6);
}

.dealer_color4
{
	background-color: rgba(119, 179,105, .6);
}

.dealer_color5
{
	background-color: rgba(239, 202, 62, .6);
}

/***********************************************/
#niche_input_box
/***********************************************/
{
	background-color: #fff;
	border: 2px solid #888;
	border-radius: 5px;
	box-shadow: 0 0 10px rgba(0,0,0,0.4);
	float: right;
	margin-top: 5px;
	position: relative;
	width: 630px;

	transition: .3s;
	-webkit-transition: .3s;
}

#niche_input_box h2
{
	padding-top: 10px;
}

#niche_input_box .control_group
{
	overflow: auto;
	padding: 30px 0;
	position: relative;
	z-index: 7;
}

#niche_input_box #sparks_controls
{
	display: none;
}

#niche_input_box .control_container
{
	float: left;
	width: 33.33%;
}

#niche_input_box .control_container:nth-of-type(2)
{
	padding: 0 10px;
}

#niche_input_box .control_container p
{
	float: left;
	font-size: 42px;
	width: 33.33%;
}

#niche_input_box .control_container p:nth-of-type(1)
{
	text-align: right;
}

#niche_input_box .control_container p:nth-of-type(2)
{
	padding-top: 4px;
}

#niche_input_box .control_container p:nth-of-type(3)
{
	text-align: left;
}

#niche_input_box .control_container p input
{
	font-size: 36px;
	padding: 0;
	width: 45px;
}

#niche_input_box .control_cover
{
	background-color: #fff;
	height: 0;
	left: 0;
	position: absolute;
	top: 50px;
	width: 100%;
	z-index: 8;

	transition: .2s;
	-webkit-transition: .2s;
}

#niche_input_box #sparks_control_cover
{
	height: 200px;
	top: 250px;
}

/*********************************************/
#phase1_research
/**********************************************/
{
	display: inline-block;
	position: relative;
}

#phase1_research img
{
	border: 1px solid #ccc;
	border-radius: 50%;
	box-shadow: 2px 3px 6px 3px rgba(0, 0, 0, 0.3);
	margin: 20px;
}

#phase1_research p
{
	font-size: 175%;
	margin-bottom: 30px;
}

.research_checklist
{
	border: 2px solid #888;
	border-radius: 5px;
	float: left;
	font-size: 18px;
	margin: 0 auto;
	overflow: auto;
	padding: 20px 20px 0 20px;
	text-align: left;
	vertical-align: baseline;
	width: 360px;
}

.research_checklist:nth-of-type(2)
{
	margin: 0 20px;
	width: 120px;
}

.research_checklist:nth-of-type(3)
{
	width: 120px;
}

.research_checklist label
{
	border-radius: 5px;
	color: #fff;
	display: block;
	height: 50px;
	line-height: 36px;
	margin-bottom: 20px;
	padding: 9px 0 0 10px;
	position: relative;
	width: 100%;
}

#phase1_research .research_checklist label img
{
	left: -2px;
	margin: 0;
	position: absolute;
	scale: .5;
	top: -16px;
}

.research_checklist label input
{
	float: left;
	height: 30px;
	margin: 2px 20px 0 0;
	width: 30px;
}

.research_checklist:nth-of-type(2) label,
.research_checklist:nth-of-type(3) label
{
	padding-left: 0;
	text-align: center;
}

.research_checklist:nth-of-type(2) label input,
.research_checklist:nth-of-type(3) label input
{
	float: none;
	margin: 0 auto;
}

.research_checklist label:nth-of-type(1)
{
	background-color: #999;
}

.research_checklist:nth-of-type(2) label:nth-of-type(1),
.research_checklist:nth-of-type(3) label:nth-of-type(1)
{
	background-color: transparent;
}

.research_checklist label:nth-of-type(2)
{
	background-color: #52345C;
}

.research_checklist label:nth-of-type(3)
{
	background-color: #526A35;
}

.research_checklist label:nth-of-type(4)
{
	background-color: #3275A6;
}

.research_checklist label:nth-of-type(5)
{
	background-color: #E6A237;
}

.research_checklist label:nth-of-type(6)
{
	background-color: #B13128;
}

#research_continue
{
	opacity: 0;
	visibility: hidden;

	transition: .2s;
	-webkit-transition: .2s;
}

/**********************************************/
#phase2_focus,
#phase2a_focus
/**********************************************/
{
	display: inline-block;
	position: relative;
}

#phase2_focus img,
#phase2a_focus img
{
	border: 1px solid #ccc;
	border-radius: 50%;
	box-shadow: 2px 3px 6px 3px rgba(0, 0, 0, 0.3);
	margin: 20px;
}

#phase2_focus p,
#phase2a_focus p
{
	font-size: 125%;
	margin-bottom: 30px;
}

#phase2_focus #focus_table,
#phase2a_focus #focus_table
{
	background: url(../files/image/bg_focus_track.jpg);
	height: 204px;
	width: 306px;
}

#phase2_focus #focus_table .new_focus,
#phase2a_focus #focus_table .new_focus
{
	align-items: center;
	display: flex;
	float: left;
	height: 102px;
	justify-content: center;
	width: 33%;
}

#phase2_focus #focus_table .new_focus label
{
	display: block;
	height: 100%;
	width: 100%;

	transition: .3s;
	-webkit-transition: .3s;
}

#phase2_focus #focus_table .new_focus input
{
	display: none;
	left: -9999px;
	position: absolute;
}

#phase2_focus #focus_table .new_focus label:hover,
#phase2_focus #focus_table .new_focus input:checked ~ label
{
	background-color: rgba(0,0,0,0.3);
	cursor: pointer;
}

#phase2_focus #focus_table .historic_focus
{
	align-items: center;
	display: flex;
	float: left;
	height: 102px;
	justify-content: center;
	width: 33%;
}

#phase2_focus #hopsFocusChoice
{
	background-color: #F5FAFF;
	border: 1px solid #008cff;
	border-radius: 5px;
	height: 40px;
	line-height: 40px;
	margin: 20px 0 0 0;
}

#phase2 #fix_gantt_button
{
	margin: -20px auto 15px auto;
	position: relative;
	z-index: 5;
}

#phase2 #fix_gantt_dummy
{
	height: 48px;
}

#phase2fixGantt
{
	opacity: 0;
	visibility: hidden;
}

#fix_container
{
	background-color: #fff;
	border-radius: 5px;
	display: inline-block;
	margin: 0 auto;
	overflow: auto;
	padding: 20px;
	width: auto;
}

#fix_container img
{
	border: 1px solid #ccc;
	border-radius: 50%;
	box-shadow: 2px 3px 6px 3px rgba(0, 0, 0, 0.3);
}

#fix_container div
{
	float: left;
	width: 80px;
}

#fix_container div:nth-of-type(2),
#fix_container div:nth-of-type(5)
{
	margin: 0 20px;
}

#fix_container div:nth-of-type(4)
{
	clear: both;
}

#fix_container div:nth-of-type(4),
#fix_container div:nth-of-type(5),
#fix_container div:nth-of-type(6)
{
	margin-top: 20px;
}

/*********************************************/
#phase3
/**********************************************/
{
	height: 100vh;
}

#phase3_build_factory
{
	padding: 0;
	position: relative;
}

#phase3_build_factory #confirmPhase3continue
{
	display: none;
	left: -9999px;
	position: absolute;
}

#phase3_build_factory #confirmPhase3continueBox
{
	background-repeat:  no-repeat;
	background-position:  15px 8px;
	background-color: #f0f0f0;
	border: 1px solid #666;
	border-radius: 5px;
	bottom: 100px;
	display: inline-block;
	padding: 10px 0;
	position: absolute;
	right: 35px;
	text-align: center;
	width: 160px;
	z-index: 5;

	transition: .2s;
	-webkit-transition: .2s;
}

#phase3_build_factory #confirmPhase3continueBox:hover
{
	border-color: #008cff;
	color: #008cff;
}

#phase3_build_factory #confirmPhase3continue:checked ~ #confirmPhase3continueBox
{
	background-image: url(../files/image/blue_tick.png);
	border-color: #008cff;
	color: #008cff;
}

#phase3_build_factory #continue_build
{
	bottom: 32px;
	position: absolute;
	right: 35px;
	width: 160px;
	z-index: 5;
}

#phase3_build_factory img#factory_builder
{
	border: 1px solid #ccc;
	border-radius: 50%;
	box-shadow: 2px 3px 6px 3px rgba(0, 0, 0, 0.3);
	margin: 20px 0 -40px 0;
}

#phase3_build_factory .control_group
{
	overflow: auto;
	padding: 0 0 20px 0;
}

#phase3_build_factory .control_container
{
	float: left;
	width: 210px;
}

#phase3_build_factory .icon_container
{
	align-items: end;
	display: flex;
	justify-content: center;
	height: 160px;
	padding-bottom: 10px;
}

#phase3_build_factory .icon_container img
{
	border-radius: 8px;
	box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.5);
}

#phase3_build_factory .control_container p
{
	float: left;
	font-size: 42px;
}

#phase3_build_factory .control_container p.HOPS_acquired
{
	background-color: #9E0000;
	border-radius: 50%;
	color: #fff;
}

#phase3_build_factory .control_container p:nth-of-type(1)
{
	/* background-color: #888; */
	text-align: right;
	width: 70px;
}

#phase3_build_factory .control_container p:nth-of-type(2)
{
	/* background-color: #aaa; */
	align-items: center;
	display: flex;
	height: 50px;
	justify-content: center;
	margin: 10px 10px 0 10px;
	width: 50px;
}

#phase3_build_factory .control_container p:nth-of-type(3)
{
	/* background-color: #ccc; */
	text-align: left;
	width: 70px;
}

#phase3_build_factory .control_container p input
{
	font-size: 36px;
	padding: 0;
	width: 45px;
}

/*********************************************/
#phase4_brochures
/**********************************************/
{
	display: inline-block;
	width: 900px;
}

#phase4_brochures .dealers
{
	font-size: 125%;
	margin: 40px 0;
}

#phase4_brochures .dealers dl
{
	height: 80px;
	line-height: 80px;
}

#phase4_brochures .dealers dl:nth-of-type(2)
{
	margin: 100px 0;
}

#phase4_brochures .dealers dt
{
	clear: both;
	float: left;
	text-align: left;
	width: 240px;
}

#phase4_brochures .dealers dd
{
	float: left;
	max-width: 600px;
}

#phase4_brochures .dealers dd .cube
{
	box-shadow: 5px 2px 5px 2px rgba(0, 0, 0, 0.2);
	float: left;
	height: 40px;
	margin: 20px 20px 0 0;
	rotate: 10deg;
	width: 40px;
}

#phase4_brochures .dealers dd .Design
{
	background-color: #52345C;
}

#phase4_brochures .dealers dd .Range
{
	background-color: #526A35;
}

#phase4_brochures .dealers dd .Reliability
{
	background-color: #3275A6;
}

#phase4_brochures .dealers dd .Safety
{
	background-color: #E6A237;
}

#phase4_brochures .dealers dd .Speed
{
	background-color: #B13128;
}

#phase4_brochures .continue
{
	clear: both;
	padding-top: 40px;
}

#phase4_brochures .min_spec_fail
{
	clear: both;
}

/*********************************************/
#phase7_advance_expectations
/**********************************************/
{
	display: inline-block;
	width: 620px;
	z-index: 10;
}

#research_track_changes
{
	padding: 50px 0 20px 0;
	text-align: center;
}

#research_track_changes div
{
	border: 2px solid #444;
	border-radius: 5px;
	color: #fff;
	height: 50px;
	line-height: 50px;
	margin: 20px auto;
	width: 360px;
}

#research_track_changes .track1
{
	background-color: #52345C;
}

#research_track_changes .track2
{
	background-color: #526A35;
}

#research_track_changes .track3
{
	background-color: #3275A6;
}

#research_track_changes .track4
{
	background-color: #E6A237;
}

#research_track_changes .track5
{
	background-color: #B13128;
}

/**********************************************/
#setupColours
/**********************************************/
{
}

#setupColours .choose_player_colours
{
	max-width: 1060px;
}

#setupColours .choose_player_colours .player_colour
{
	float: left;
	margin: 10px;
	padding-bottom: 20px;
	width: 180px;
}

#setupColours .choose_player_colours img
{
	border: 1px solid #ccc;
	border-radius: 50%;
	box-shadow: 2px 3px 6px 3px rgba(0, 0, 0, 0.3);
}

#setupColours .choose_player_colours img,
#setupColours .choose_player_colours select
{
	display: block;
	margin: 20px auto;
}

#setupColours .choose_player_colours select
{
	font-size: 150%;
}

#setupColours .choose_player_colours label
{
	border: 1px solid #aaa;
	border-radius: 5px;
	font-size: 150%;
	display: inline-block;
	padding: 9px 15px;
	vertical-align: bottom;

	transition: .3s;
	-webkit-transition: .3s;
}

#setupColours .choose_player_colours label:hover
{
	background-color: #f4f4f4;
}

#setupColours .choose_player_colours label input
{
	display: block;
	float: left;
	height: 30px;
	margin-right: 20px;
	width: 30px;
}

#setupColours .HOPS_skill_container h2
{
	clear: both;
	margin-bottom: -20px;
	padding-top: 30px;
}

/***********************************************/
#setupResearchTracks .identify_research_tracks
/***********************************************/
{
	max-width: 1120px;
	padding: 20px 0;
}

#setupResearchTracks .identify_research_tracks .researchTrack
{
	border: 2px solid #eee;
	border-radius: 5px;
	float: left;
	height: 110px;
	margin: 10px;
	padding: 10px;
}

#setupResearchTracks .identify_research_tracks input[type="checkbox"]
{
	display: none;
	left: -9999px;
	position: absolute;
}

#setupResearchTracks .identify_research_tracks .researchTrack label
{
	border: 2px solid #444;
	border-radius: 5px;
	color: #fff;
	display: block;
	font-size: 150%;
	height: 50px;
	line-height: 50px;
	width: 180px;
}

#setupResearchTracks .identify_research_tracks .researchTrack p
{
	color: #000;
	font-size: 200%;
	line-height: 50px;
}

#setupResearchTracks .research_tracks .researchTrack:nth-of-type(1) label
{
	background-color: #52345C;
}

#setupResearchTracks .research_tracks .researchTrack:nth-of-type(2) label
{
	background-color: #526A35;
}

#setupResearchTracks .research_tracks .researchTrack:nth-of-type(3) label
{
	background-color: #3275A6;
}

#setupResearchTracks .research_tracks .researchTrack:nth-of-type(4) label
{
	background-color: #E6A237;
}

#setupResearchTracks .research_tracks .researchTrack:nth-of-type(5) label
{
	background-color: #B13128;
}

#setupResearchTracks #identify_research_tracks_continue
{
	opacity: 0;
	visibility: hidden;

	transition: .3s;
	-webkit-transition: .3s;
}

/***********************************************/
#hops_station_info
/***********************************************/
{
	background-color: #fff;
	border: 2px solid #222;
	border-radius: 5px;
	box-shadow: 0 0 15px 20px rgba(0, 0, 0, 0.4);
	height: 900px;
	left: 50%;
	/* max-width: 1100px; */
	opacity: 0;
	overflow: auto;
	padding: 20px;
	position: absolute;
	text-align: center;
	top: 50%;
	visibility: hidden;
	width: auto;
	z-index: 20;

	transition: .3s;
	-webkit-transition: .3s;

	transform: translate(-50%, -50%); /* left top */
	-webkit-transform: translate(-50%, -50%);
}

#hops_station_info table.main
{
	margin-top: 20px;
}

#hops_station_info table.testing
{
	min-width: 1100px;
}

#hops_station_info h2
{
	margin-top: 20px;
}

#hops_station_info th
{
	font-size: 125%;
	width: 150px;
	white-space: nowrap;
}

#hops_station_info .main th
#hops_station_info .trackprog th
{
	padding: 5px 0;
}

#hops_station_info th img
{
	border: 1px solid #ccc;
	border-radius: 50%;
	box-shadow: 2px 3px 6px 3px rgba(0, 0, 0, 0.3);
	scale: .75;
}

#hops_station_info th.hops_column
{
	background-color: #f4f4f4;
}

#hops_station_info td
{
	font-size: 125%;
	height: 80px;
	width: 150px;
}

#hops_station_info td
{
	overflow: hidden;
	position: relative;
}

#hops_station_info td.smlImg
{
	width: 120px;
}

#hops_station_info td.smlImg img
{
	position: absolute;
	right: 0;
	top: 50%;

	transform: translate(0, -50%); /* left top */
	-webkit-transform: translate(0, -50%);
}

#hops_station_info p
{
	color: #ddd;
	padding-top: 50px
}

#hops_station_info a
{
	color: #ddd;

	transition: .2s;
	-webkit-transition: .2s;

}

#hops_station_info a:hover
{
	color: #888;
}

#hops_station_info .cubegen,
#hops_station_info .trackprog
{
	margin-top: 50px;
}

#hops_station_info .cubegen td
{
	padding-bottom: 20px;
}

#hops_station_info .trackprog td
{
	color: #fff;
}

#hops_station_info .trackprog tr:nth-of-type(2) td
{
	background-color: #52345C;
}

#hops_station_info .trackprog tr:nth-of-type(3) td
{
	background-color: #526A35;
}

#hops_station_info .trackprog tr:nth-of-type(4) td
{
	background-color: #3275A6;
}

#hops_station_info .trackprog tr:nth-of-type(5) td
{
	background-color: #E6A237;
}

#hops_station_info .trackprog tr:nth-of-type(6) td
{
	background-color: #B13128;
}
#hops_station_info #debug_info
{
	margin-top: 40px;
}

/***********************************************/

.game_envelope div .reveal_hops_station_info
{
	padding: 3px 0;
	position: absolute;
	right: 20px;
	top: 9px;
	width: 110px;;
}

.game_envelope #show_year
{
	color: #fff;
	font-size: 110%;
	height: 30px;
	left:auto;
	position: absolute;
	right: 170px;
	top: 11px;
	width: auto;
	z-index: 100;

	transform: translate(0, 0); /* left top */
	-webkit-transform: translate(0, 0);
}