/*
submarine

	z-index
	msg				1000
	#gameScore			900
	.playarea #main_panel		800
	#situation_report		700
	.attention			600
	.slide_panel			500
	#depth_gauge			400
	#panel_buttons			400
	#give_orders			400
	.conclusionPanel		300
	#victoryConditions		200
	#chit_compass			100
	.chit_ship span			90
	.chit_dc			80
	.chit_audible			70
	.chit_smoke			60
	.chit_torpedo_spotted		50
	.chit_ship			40
	#chit_self			30
	.chit_submerged			20
	#playerGuide			10
	.chit_torpedo
*/

html
{
	height: 100%;
}

body
{

	color: #222;
	font-family: arial, sans-serif;
	height: 100%;
	opacity: 1;

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

body.fade_in
{
	opacity: 0;

	transition: none;
	-webkit-transition: none;
}

body.playarea
{
	background: #3CB7C7;
}

body.night
{
	background: #007A8A;
}

div.limited_height
{
	max-height: 600px;
	overflow: auto;
}

table
{
	margin: 0 auto 10px auto;
}

caption,
h5
{
	font-size: 1.2em;
	font-variant: small-caps;
	letter-spacing: 1px;
	padding-bottom: 3px;
}

caption span
{
	float: right;
}

th, td
{
	border: none;
	font-size: 0.8em;
	padding: 5px;
	text-align: center;
}

th
{
	background: rgba(255, 153, 0, 0.8);
	border-left: 1px solid rgba(128, 78, 0, 0.7);
	font-size: 0.9em;
}

tr.row2 th
{
	border-bottom: 1px solid #000 !important;
	font-size: 0.8em;
}

.subtle
{
	background: rgba(255, 153, 0, 0.1) !important;
}

td
{
	background: rgba(255, 153, 0, 0.2);
	border-left: 1px solid rgba(128, 78, 0, 0.7);
	border-bottom: 1px solid rgba(128, 78, 0, 0.7);
}

table.th-td-left th,
table.th-td-left td,
.left
{
	text-align: left !important;
}

table.th-center th
{
	text-align: center !important;
}

tr.ship_unavailable td
{
	background: rgba(255, 153, 0, 0.1);
}

.transparent
{
	background: transparent !important;
}

form div
{
	position: relative;
}

label.reveal_icon
{
	display: block;

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

label.reveal_icon:hover,
input[type="button"]:hover,
input[type="image"]:hover,
input[type="submit"]:hover
{
	cursor: pointer;
}

a
{
	color: #ffaa00;
}

/**********************************
***       GENERAL CLASSES       ***
**********************************/
.full_width
{
	width: 100% !important;
}

.hide
{
	display: none;
	left: -9999px;
	position: absoloute;
}

.hidden
{
	visibility: hidden !important;
}

a.info
{
	border-bottom: 1px dotted #fff;
	color: #fff;
}

a.info:hover
{
	cursor: help;
}

@keyframes fade_out
{
	from {opacity: 1; top: 20%;}
	to {opacity: 0; top: -5%;}
}

.msgstyle1,
.msgstyle3,
.msgstyle4
{
	animation-name: fade_out;
	animation-duration: 4s;
	animation-delay: 5s;
	animation-fill-mode: forwards;
}

.msgstyle1,
.msgstyle2,
.msgstyle3,
.msgstyle4
{
	left: 50%;
	position: fixed;
	top: 20%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	z-index: 1000;
}

.advice p
{
	margin-bottom: 20px;
}

.bottom_margin
{
	margin-bottom: 16px !important;
}

.central
{
	margin: 0 auto;
}

td.divider
{
	background: rgba(0, 0, 0, 0.6) !important;
}

.icon_edit
{
	border: none !important;
}

.infinity
{
	display: block;
	font-size: 2em;
	line-height: .5em;
	margin-top: 1px;
}

.showShipSpecs
{
	background: url(../files/1/cog.png) no-repeat center right;
	color: #AAE0E6;
	float: right;
	padding-right: 20px;
	text-decoration: underline;

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

.showShipSpecs:hover
{
	color: #fff;
	cursor: pointer;
}

.small_caps
{
	font-variant: small-caps;
}

.small_text
{
	font-size: 0.9em;
}

.tooFast
{
	color: #ffff00;
	text-decoration: overline;
}

.tooSlow
{
	color: #ffff00;
	text-decoration: underline;
}

.two_digit_input
{
	width: 50px;
}

#topbar
{
	padding: 20px;
}

/**********************************
***          FULLSCREEN		***
**********************************/
#fullscreen
{
	background: #444 url(../files/1/bg_fullscreen.jpg);
	background-size: cover;
	height: 100%;
	position: relative;
	width: 100%;
}

#waitEscort #fullscreen,
#lobby_choose_scenario #fullscreen
{
	background: #444 url(../files/1/bg_fullscreen_escort.jpg);
	background-size: cover;
}

body.playarea #fullscreen
{
	background: #3CB7C7;
}

body.night #fullscreen
{
	background: #007A8A;
}

#fullscreen #version
{
	background: rgba(0, 0, 0, 0.5);
	bottom: 20px;
	border-radius: 16px;
	color: #ddd;
	font-size: 0.8em;
	font-variant: small-caps;
	padding: 6px 12px;
	position: absolute;
	right: 20px;
}

/**********************************
***     PLAYER MSGS RECEIVED	***
**********************************/
#player-msgs-received
{
	background: rgba(24, 100, 146, 0.95);
	border: 5px solid #2078A6;
	border-radius: 10px;
	box-sizing: border-box;
	color: #fff;
	left: 50%;
	opacity: 1;
	overflow: auto;
	padding: 20px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: 800px;
}

#player-msgs-received p
{
	margin-bottom: 16px;
}

/**********************************
***         INTRO TITLE		***
**********************************/
#intro_title
{
	left: 50%;
	opacity: 1;
	position: absolute;
	top: 22%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);

	transition: 2.5s;
	transition-delay: 1.5s;
	-webkit-transition: 2.5s;
	-webkit-transition-delay: 1.5s;
}

#intro_title.fade_in
{
	opacity: 0;
	top: 50%;

	transition: none;
	-webkit-transition: none;
}

/**********************************
***        STANDARD BOX		***
**********************************/
.standard_box
{
	background: rgba(0, 0, 0, 0.5);
	border: 1px solid #ff8800;
	border-radius: 10px;
	box-sizing: border-box;
	color: #fff;
	left: 50%;
	opacity: 1;
	overflow: auto;
	padding: 20px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);

	transition: 2s;
	transition-delay: 3s;
	-webkit-transition: 2s;
	-webkit-transition-delay: 3s;
}

.standard_box.fade_in
{
	opacity: 0;
	top: 55%;

	transition: none;
	-webkit-transition: none;
}

.no_delay
{
	transition-delay: 0s;
	-webkit-transition-delay: 0s;
}

.standard_box form + form
{
	float: right;
}

.standard_box form h2
{
	background: rgba(255, 153, 0, 0.8);
	font-size: 1.4em;
	font-variant: small-caps;
	margin-bottom: 0px;
	padding: 10px;
	text-align: center;
}

.standard_box form h3
{
	background: rgba(255, 153, 0, 0.6);
	color: #fff;
	font-size: 1.2em;
	margin-bottom: 30px;
	padding: 10px;
	text-align: center;
}

.standard_box form h4
{
	color: #f0f0f0;
	font-size: 1.1em;
	letter-spacing: 1px;
	margin-bottom: 30px;
	text-align: center;
}

.standard_box form p
{
	margin-bottom: 15px;
}

.standard_box a
{
	transition: 0.3s;
	-webkit-transition: 0.3s;
}

.standard_box a:hover
{
	color: #fff;
}

.standard_box #polling p
{
	border: 2px solid #ff8800;
	border-radius: 50%;
	font-size: 0.9em;
	height: 90px;
	line-height: 90px;
	margin: 40px auto;
	text-align: center;
	text-transform: uppercase;
	width: 90px;
}

.standard_box #polling p.checking
{
	background: rgba(255, 136, 0, 0.3);
}

.standard_box form select
{
	display: block;
	margin-bottom: 30px;
	width: 100%;
}

.standard_box input[type="text"],
.standard_box input[type="password"]
{
	display: block;
	margin-bottom: 20px;
}

.standard_box input[type="submit"],
.standard_box input[type="button"]
{
/***
	background: linear-gradient(#f7f7f7, #ddd);
	border: 1px solid #969696;
***/
	float: left;
	font-size: .9em;
	font-variant: small-caps;
	padding: 6px 15px;
	text-align: center;
	min-width: 160px;

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

.standard_box input.float_right
{
	float: right;
	margin-left: 20px;
}

input[type="button"].cancel_game,
input[type="button"].leave_game
{
/***
	background: linear-gradient(#f7f7f7, #ddd);
	border: 1px solid #969696;
***/
	font-size: .8em;
	font-variant: small-caps;
	min-width: 110px;
	padding: 3px 12px;
	position: absolute;
	right: 10px;
	text-align: center;
	top: 10px;
}

input[type="button"].leave_game
{
	top: 40px;
}

input[type="button"].cancel_game:hover
{
	color: red;
}

/**********************************
***           HEXSHEET		***
**********************************/
#hexsheet_container
{
	height: 100%;
}

#visible_hexsheet
{
/*
	Map is 200 x 200 hexes
*/
	background: #3CB7C7 url(../files/1/bg_hexsheet.gif);
	height: 11400px;
	position: relative;
	width: 13200px;

	transition: 1s;
	-webkit-transition: 1s;
}

#visible_hexsheet.night
{
	background: #007A8A url(../files/1/bg_hexsheet_night.gif);
}

#visible_hexsheet #landNorth,
#visible_hexsheet #landSouth
{
	background: #D8C29B;
	background-size: cover;
	position: absolute;
	width: 100%;
}

#visible_hexsheet #landNorth
{
	box-shadow: 0 20px 30px rgba(210, 190, 150, 0.7);
}

#visible_hexsheet #landSouth
{
	box-shadow: 0 -20px 30px rgba(210, 190, 150, 0.7);
}

#visible_hexsheet label
{
	display: block;
	height: 100%;
	width: 100%;
}

/* #visible_hexsheet .sub_last_known_position, */
#visible_hexsheet .last_known_positions .chit_ship
{
	opacity: .5;
}

#visible_hexsheet .sub_last_known_position img
{
	margin: 34px 0 0 97px;
}

#scale_map_75pc:checked ~ div #visible_hexsheet
{
	transform: scale(.75, .75);
	-webkit-transform: scale(.75, .75);
}

#scale_map_50pc:checked ~ div #visible_hexsheet
{
	transform: scale(.5, .5);
	-webkit-transform: scale(.5, .5);
}

#scale_map_25pc:checked ~ div #visible_hexsheet
{
	transform: scale(.25, .25);
	-webkit-transform: scale(.25, .25);
}

/**********************************
***      MAP SCALE CONTROLS2	***
**********************************/
#map_scale_controls2 label
{
	border: 1px solid transparent;
	border-radius: 5px;
	font-size: .9em;
	padding: 2px 4px;

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

#map_scale_controls2 label:hover
{
	border: 1px solid #fff;
	cursor: pointer;
}

#scale_map_100pc:checked ~ div #label_scale_map_100pc_2,
#scale_map_75pc:checked ~ div #label_scale_map_75pc_2,
#scale_map_50pc:checked ~ div #label_scale_map_50pc_2,
#scale_map_25pc:checked ~ div #label_scale_map_25pc_2
{
	background: rgba(255, 153, 0, 0.2);
	border: 1px solid #ddd;
}

/**********************************
***           CHITS		***
**********************************/
#visible_hexsheet input[type="radio"]:checked + div label
/*	Included here as it's part of the target icon logic	*/
{
	background: url(../files/1/target.png) no-repeat center center;
}

.chit_ship,
.chit_torpedo
{
	height: 187px;
	position: absolute;
	width: 199px;

	transition: 1s;
	-webkit-transition: 1s;
}

.chit_torpedo::after
{
	background: transparent;
	border: 5px solid #EE0C0C;
	border-radius: 50%;
	box-shadow: 0 0 10px #000;
	height: 51px;
	left: 69px;
	position: absolute;
	top: 63px;
	width: 51px;
}

.chit_ship
{
	z-index: 40;
}

.chit_ship:hover
{
	clip-path: none;
	z-index: 85;
}

.chit_ship:hover + .chit_smoke
{
	z-index: 86;
}

.chit_dir_0
{
	clip-path: polygon(0% 39%, 17% 30%, 33% 39%, 50% 30%, 67% 39%, 67% 61%, 50% 70%, 33% 61%, 17% 70%, 0% 61%);
	-webkit-clip-path: polygon(0% 39%, 17% 30%, 33% 39%, 50% 30%, 67% 39%, 67% 61%, 50% 70%, 33% 61%, 17% 70%, 0% 61%);
}

.chit_dir_1
{
	clip-path: polygon(17% 9%, 33% 0%, 50% 9%, 50% 30%, 67% 39%, 67% 61%, 50% 70%, 33% 61%, 33% 39%, 17% 30%);
	-webkit-clip-path: polygon(17% 9%, 33% 0%, 50% 9%, 50% 30%, 67% 39%, 67% 61%, 50% 70%, 33% 61%, 33% 39%, 17% 30%);
}

.chit_dir_2
{
	clip-path: polygon(50% 9%, 67% 0%, 83% 9%, 83% 30%, 67% 39%, 67% 61%, 50% 70%, 33% 61%, 33% 39%, 50% 30%);
	-webkit-clip-path: polygon(50% 9%, 67% 0%, 83% 9%, 83% 30%, 67% 39%, 67% 61%, 50% 70%, 33% 61%, 33% 39%, 50% 30%);
}

.chit_dir_3
{
	clip-path: polygon(33% 39%, 50% 30%, 67% 39%, 83% 30%, 100% 39%, 100% 61%, 83% 70%, 67% 61%, 50% 70%, 33% 61%);
	-webkit-clip-path: polygon(33% 39%, 50% 30%, 67% 39%, 83% 30%, 100% 39%, 100% 61%, 83% 70%, 67% 61%, 50% 70%, 33% 61%);
}

.chit_dir_4
{
	clip-path: polygon(33% 39%, 50% 30%, 67% 39%, 67% 61%, 83% 70%, 83% 91%, 67% 100%, 50% 91%, 50% 70%, 33% 61%);
	-webkit-clip-path: polygon(33% 39%, 50% 30%, 67% 39%, 67% 61%, 83% 70%, 83% 91%, 67% 100%, 50% 91%, 50% 70%, 33% 61%);
}

.chit_dir_5
{
	clip-path: polygon(33% 39%, 50% 30%, 67% 39%, 67% 61%, 50% 70%, 50% 91%, 33% 100%, 17% 91%, 17% 70%, 33% 61%);
}

.chit_audible
{
	background: url(../files/1/chit_audible.png);
	height: 40px;
	left: -100000px;
	position: absolute;
	width: 40px;
	z-index: 70;
}

.chit_dc
{
	background: url(../files/1/chit_dc.png);
	height: 72px;
	left: -100000px;
	position: absolute;
	width: 55px;
	z-index: 80;

	transition: opacity .75s;
	-webkit-transition: opacity .75s;
}

.chit_dc:hover
{
	opacity: 0;
}

.chit_torpedo_spotted
{
	height: 48px;
	left: -100000px;
	position: absolute;
	width: 65px;
	z-index: 50;
}

.chit_smoke
{
	align-items: center;
	background: url(../files/1/chit_smoke.png);
	color: #fff;
	display: flex;
	height: 45px;
	position: absolute;
	width: 48px;
	z-index: 60;
}

.chit_smoke_dead_in_water
{
	background: url(../files/1/chit_smoke_dead_in_water.png);
}

.chit_smoke span
{
/*	Show damage over the smoke icon	*/
	font-size: 1.5em;
	letter-spacing: 1px;
	margin: 0 auto;
	text-shadow: 2px 2px 3px #000;
}

#chit_self,
#chit_self_ghost
{
	left: 6501px;
	top: 5587px;
}

#chit_self
{
	z-index: 30;
}

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

.chit_submerged
{
	z-index: 20 !important;
}

#chit_self_launch
{
	height: 303px;
	left: 6435px;
	opacity: 0;
	top: 5529px;
	width: 331px;
}

#chit_compass
{
	background: url(../files/1/chit_compass.png);
	height: 300px;
	left: 6452px;
	opacity: 0;
	position: absolute;
	top: 5530px;
	transform: scale(.2, .2);
	-webkit-transform: scale(.2, .2);
	width: 300px;
	z-index: 100;

	transition: 1s;
	transition-delay: .5s;
	-webkit-transition: 1s;
	-webkit-transition-delay: .5s;
}

#chit_compass:hover
{
	left: 6456px;
	opacity: 1;
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	top: 5536px;
}

#toggle_torpedo_panel:checked ~ div #chit_self_launch
{
	opacity: 1;
}

.hover_admiral + span
{
	background: url(../files/1/hover_admiral.png) no-repeat center 85%;
}

.hover_ark_royal + span
{
	background: url(../files/1/hover_ark_royal.png) no-repeat center 85%;
}

.hover_convoy + span
{
	background: url(../files/1/hover_convoy.png) no-repeat center 85%;
}

.hover_escort + span
{
	background: url(../files/1/hover_escort.png) no-repeat center 85%;
}

.hover_king_george_v + span
{
	background: url(../files/1/hover_king_george_v.png) no-repeat center 85%;
}

.hover_nelson + span
{
	background: url(../files/1/hover_nelson.png) no-repeat center 85%;
}

.hover_shokaku + span
{
	background: url(../files/1/hover_shokaku.png) no-repeat center 85%;
}

.hover_sub + span
{
	background: url(../files/1/hover_sub.png) no-repeat center 85%;
}

.hover_tanker + span
{
	background: url(../files/1/hover_tanker.png) no-repeat center 85%;
}

.hover_yamato + span
{
	background: url(../files/1/hover_yamato.png) no-repeat center 85%;
}

.chit_ship span
{
	background-color: rgba(14, 53, 58, 0.9);
	border-radius: 5px;
	color: #fff;
	cursor: default;
	font-size: .9em;
	height: 80px;
	left: 0;
	opacity: 0;
	padding: 6px;
	position: absolute;
	text-align: center;
	top: -75px;
	transform: scale(.25, .25);
	-webkit-transform: scale(.25, .25);
	visibility: hidden;
	width: 150px;
	z-index: 90;

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

.chit_ship span + span
{
	/* background-color: rgba(23, 68, 73, 0.8); */
	left: 162px;
}

.chit_ship div
{
/*	This is the bow detectable area for the hover - it's hex shaped	*/
	/* background-color: #00ff00; */
	clip-path: polygon(0 17px, 50% 0, 100% 17px, 100% 54px, 50% 100%, 0 54px);
	height: 71px;
	left: 67px;
	overflow: display;
	position: absolute;
	top: 58px;
	width: 65px;
}

.chit_ship div:hover ~ span
/* .chit_ship span:hover,
.chit_ship span:hover + span */
{
	opacity: 1;
	transform: scale(1, 1);
	-webkit-transform: scale(1, 1);
	visibility: visible;
}

.chit_ship div.hover_south ~ span
{
/*	Move the profile hover boxes down when the ship is facing south	*/
	top: 150px;
}

/* .chit_ship div.hover_south:hover ~ span
.chit_ship div.hover_south ~ span:hover,
.chit_ship div.hover_south + span:hover + span
{
	bottom: -12%;
} */

.chit_ship span:hover
{
	background-color: rgba(23, 68, 73, 0.8);
}

/**********************************
***         SLIDE PANEL	 	***
**********************************/
.slide_panel
{
	background: grey;
	border: 1px solid #ff8800;
	border-radius: 10px;
	color: #fff;
	opacity: 0;
	overflow: hidden;
	padding: 0 10px;
	position: fixed;
	visibility: hidden;
	z-index: 500;

	transition: left .75s, opacity .75s, right .75s, visibility .75s;
	-webkit-transition: left .75s, opacity .75s, right .75s, visibility .75s;
}

.slide_panel select
{
	padding: 0;
}

.slide_panel table
{
	width: 100%;
}

.slide_panel table.normal_width
{
	width: auto;
}

.slide_panel th
{
	border-bottom: 1px solid rgba(128, 78, 0, 0.7);
	text-align: left;
}

.slide_panel h2
{
	background: rgba(255, 153, 0, 0.8);
	font-size: 1.4em;
	font-variant: small-caps;
	margin-bottom: 0px;
	padding: 10px;
	text-align: center;
}

.slide_panel h3
{
	background: rgba(255, 153, 0, 0.4);
	color: #eee;
	font-size: 1.2em;
	margin-bottom: 30px;
	padding: 10px;
	text-align: center;
}

.slide_panel h4
{
	color: #f0f0f0;
	font-size: 1.4em;
	letter-spacing: 1px;
	margin-bottom: 30px;
	text-align: center;
}

.slide_panel p
{
	margin-bottom: 15px;
}

.slide_panel .panel_title
{
	background-repeat: no-repeat;
	background-position: 0px;
	display: block;
	font-size: 2em;
	font-variant: small-caps;
	height: 54px;
	letter-spacing: 1px;
	padding-top: 20px;
	text-align: center;
	text-shadow: 2px 2px 3px #222;
}

/**********************************
***	DATA PANEL
**********************************/
#data_panel
{
	background: url(../files/1/bg_log_panel.jpg);
	background-size: cover;
	left: 50%;
	overflow: visible;
	top: 50%;

	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

#toggle_data_panel:checked ~ #data_panel
{
	opacity: 1;
	visibility: visible;
}

#data_panel .panel_title
{
	background-image: url(../files/1/icon_data_escort.png);
}

#playerEscort #data_panel .panel_title
{
	background-image: url(../files/1/icon_data_sub.png);
}

#data_panel .ship_data_jacket
{
	position: relative;
}

#data_panel .ship_data_jacket a
{
	background: rgba(0,0,0,.3);
	border: 2px solid #fff;
	border-radius: 5px;
	color: #fff;
	display: block;
	font-size: .7em;
	letter-spacing: 1px;
	padding: 8px;
	position: absolute;
	right: 0;
	text-transform: uppercase;
	top: -50px;
}

#data_panel .ship_data_jacket a:hover
{
	cursor: help;
}

#data_panel .ship_data_jacket div
{
	opacity: 0;
	background: url(../files/1/bg_log_panel.jpg);
	background-size: cover;
	border: 1px solid #ff8800;
	border-radius: 10px;
	box-shadow: 0 0 40px #000;
	left: 50%;
	padding: 20px 10px 0 10px;
	position: absolute;
	top: 50%;
	visibility: hidden;

	transition: .5s;
	-webkit-transition: .5s;

	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

#data_panel .ship_data_jacket a:hover + div,
#data_panel .ship_data_jacket div:hover
{
	opacity: 1;
	visibility: visible;
}

#data_panel .ship_data_jacket div th:first-of-type
{
	text-align: left;
}

#data_panel .ship_data_jacket div td
{
	white-space: nowrap;
}

#data_panel.slide_panel th,
#data_panel.slide_panel td
{
	border: none;
}

#data_panel.slide_panel td
{
	background: rgba(0,0,0,.2);
	border-top: 1px solid #a3651e;
}

#data_panel .border_right
{
	border-right: 1px solid #a3651e !important;
}

#data_panel.slide_panel th
{
	text-align: center;
}

#playerSub #data_panel.slide_panel td:nth-of-type(1),
#playerSub #data_panel.slide_panel td:nth-of-type(2)
{
	text-align: left;
}

/**********************************
***	LOG PANEL
**********************************/
#log_panel
{
	background: url(../files/1/bg_log_panel.jpg);
	background-size: cover;
	height: 320px;
	left: -45px;
	top: 170px;
	width: 500px;
}

#toggle_log_panel:checked ~ #log_panel
{
	left: 15px;
	opacity: 1;
	visibility: visible;
}

#log_panel .panel_title
{
	background-image: url(../files/1/icon_log.png);
}

#log_panel .limited_height
{
	max-height: 200px;
}

#log_panel dl
{
	box-sizing: border-box;
	color: #666;
	display: block;
	font-family: monospace, "courier new", times, serif;
	font-size: 1em;
	overflow: auto;
}

#log_panel dt
{
	clear: both;
	float: left;
	margin-bottom: 2px;
	width: 18%;
}

#log_panel dd
{
	box-sizing: border-box;
	float: left;
	padding-right: 10px;
	width: 82%;
}

#log_panel .justNow
{
	color: #000;
}

#log_panel input[type="text"]
{
	bottom: 13px;
	position: absolute;
	width: 500px;
}

/**********************************
***       NAVIGATION PANEL	***
**********************************/
#navigation_panel
{
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid #1B565D;
/*	max-height: 70px; */
	max-height: 400px;
	right: -45px;
	top: 60px;
	min-width: 640px;
	transition: 1s;
}

#navigation_panel:hover
{
	max-height: 400px;
}

.american #navigation_panel
{
	background: rgba(0, 0, 0, 0.3) url(../files/1/panel_flag_american.jpg) no-repeat right 10px;
}

.british #navigation_panel
{
	background: rgba(0, 0, 0, 0.3) url(../files/1/panel_flag_british.jpg) no-repeat right 10px;
}

.german #navigation_panel
{
	background: rgba(0, 0, 0, 0.3) url(../files/1/panel_flag_german.jpg) no-repeat right 10px;
}

.japanese #navigation_panel
{
	background: rgba(0, 0, 0, 0.3) url(../files/1/panel_flag_japanese.jpg) no-repeat right 10px;
}

#playerSub #navigation_panel
{
	min-width: 590px;
}

#toggle_navigation_panel:checked ~ #navigation_panel
{
	opacity: 1;
	right: 15px;
	visibility: visible;
}

#navigation_panel .panel_title
{
	background-image: url(../files/1/icon_navigation.png);
}

#navigation_panel th
{
	background: rgba(60, 183, 199, 0.8);
	border-bottom: 1px solid rgba(27, 86, 93, 0.7);
	border-left: 1px solid rgba(27, 86, 93, 0.7);
}

#navigation_panel td
{
	background: rgba(60, 183, 199, 0.5);
	border-bottom: 1px solid rgba(27, 86, 93, 0.7);
	border-left: 1px solid rgba(27, 86, 93, 0.7);
}

#navigation_panel .subtle
{
	background: rgba(60, 183, 199, 0.2) !important;
}

#navigation_panel .cmd input[type="text"]
{
	margin-right: 5px;
	width: 65%;
}

#navigation_panel .cmd input[type="button"]
{
	padding: 1px 10px;
}

#navigation_panel .radiomsg input[type="text"]
{
	width: 100%;
}

#navigation_panel .same_speed
{
	font-size: .8em;
	margin-right: 5px;
	padding: 1px 3px;
}

#navigation_panel td.no-padding
{
	padding: 0 !important;
}

#navigation_panel dl
{
	height: 26px;
	line-height: 26px;
	overflow: auto;
}

#navigation_panel dd
{
	display: block;
	float: left;
	width: 25%;
}

#navigation_panel dd:nth-of-type(1)
{
	background: rgba(60, 183, 199, 0.8);
}

#navigation_panel .shipSpec
{
	max-height: 0;
	overflow: hidden;
	transition: .5s;
	-webkit-transition: .5s;
}

#navigation_panel #revealShipSpecs:checked + .shipSpec
{
	max-height: 90px;
}

/**********************************
***        SCENARIO PANEL	***
**********************************/
#scenario_panel
{
	background: url(../files/1/bg_scenario_panel.jpg);
	background-size: cover;
	bottom: 15px;
	left: -45px;
	width: 515px;
}

#toggle_scenario_panel:checked ~ #scenario_panel
{
	left: 45px;
	opacity: 1;
	visibility: visible;
}

#scenario_panel .panel_title
{
	background-image: url(../files/1/icon_scenario.png);
}

#scenario_panel #playerGuide
{
	height: 32px;
	position: absolute;
	right: 20px;
	top: 20px;
	width: 32px;
	z-index: 10;
}

#scenario_panel .limited_height
{
	max-height: 300px;
}

#scenario_panel h2
{
	font-size: 1em;
	margin-bottom: 1em;
}

#scenario_panel th
{
	text-align: center;
}

#scenario_panel .exit_buttons
{
	margin: 18px 0 10px 0;
	overflow: auto;
}

#scenario_panel .exit_buttons input[type="button"]
{
	float: left;
	font-size: .7em;
	margin-right: 6px;
	padding: 2px 5px;
	text-transform: uppercase;
}

#scenario_panel .exit_buttons input[type="button"].cancelGame,
#scenario_panel .exit_buttons input[type="button"].abandonGame
{
	float: right;
}

#scenario_panel .exit_buttons input[type="button"].cancelGame:hover,
#scenario_panel .exit_buttons input[type="button"].abandonGame:hover
{
	color: red;
}

#scenario_panel table
{
	color: #fff;
}

#scenario_panel table.joined
{
	margin: 0;
	width: 493px;
}

#scenario_panel table.joined tr th:nth-of-type(1),
#scenario_panel table.joined tr td:nth-of-type(1)
{
	width: 130px;
}

#scenario_panel table.joined tr th:nth-of-type(2),
#scenario_panel table.joined tr td:nth-of-type(2)
{
	width: 125px;
}

#scenario_panel table.joined tr th:nth-of-type(3),
#scenario_panel table.joined tr td:nth-of-type(3)
{
	width: 90px;
}

#scenario_panel table.joined tr th:nth-of-type(4),
#scenario_panel table.joined tr td:nth-of-type(4)
{
	width: 55px;
}

#scenario_panel table.joined tr th:nth-of-type(5),
#scenario_panel table.joined tr td:nth-of-type(5)
{
	width: 30px;
}

#scenario_panel table td
{
	background: rgba(255, 153, 0, 0.6);
}

#scenario_panel .participating_ships table tr.ship_sunk
{
	background: url(../files/1/sunk.jpg);
}

#scenario_panel .participating_ships table tr.ship_sunk td
{
	background: transparent;
}

/**********************************
***        TORPEDO PANEL	***
**********************************/
#torpedo_panel
{
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid #1B565D;
	bottom: 55px;
	right: -45px;
	width: 700px;
}

#toggle_torpedo_panel:checked ~ #torpedo_panel
{
	opacity: 1;
	right: 15px;
	visibility: visible;
}

#torpedo_panel .panel_title
{
	background-image: url(../files/1/icon_torpedo.png);
}


#torpedo_panel th
{
	background: rgba(60, 183, 199, 0.8);
	border-bottom: 1px solid rgba(27, 86, 93, 0.7);
	border-left: 1px solid rgba(27, 86, 93, 0.7);
}

#torpedo_panel td
{
	background: rgba(60, 183, 199, 0.5);
	border-bottom: 1px solid rgba(27, 86, 93, 0.7);
	border-left: 1px solid rgba(27, 86, 93, 0.7);
}

#torpedo_panel .subtle
{
	background: rgba(60, 183, 199, 0.2) !important;
}

/**********************************
***       PANEL BUTTONS	 	***
**********************************/
#panel_buttons
{
	height: 60px;
	position: fixed;
	right: 0;
	top: 0;
	z-index: 400;

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

#panel_buttons .reveal_icon
{
	position: absolute;
}

#panel_buttons .reveal_icon:hover
{
	opacity: 1 !important;
}

label#data_escort_panel_button
{
	background: url(../files/1/icon_data_escort.png);
	height: 28px;
	right: 471px;
	opacity: .3;
	top: 16px;
	width: 120px;
}

label#data_sub_panel_button
{
	background: url(../files/1/icon_data_sub.png);
	height: 23px;
	right: 400px;
	opacity: .3;
	top: 16px;
	width: 120px;
}

label#log_panel_button
{
	background: url(../files/1/icon_log.png);
	height: 48px;
	right: 267px;
	opacity: .3;
	top: 5px;
	width: 48px;
}

label#navigation_panel_button
{
	background: url(../files/1/icon_navigation.png);
	height: 42px;
	opacity: .3;
	right: 192px;
	top: 8px;
	width: 64px;
}

label#scenario_panel_button
{
	background: url(../files/1/icon_scenario.png);
	height: 64px;
	right: 323px;
	opacity: .3;
	top: -3px;
	width: 64px;
}

label#torpedo_panel_button
{
	background: url(../files/1/icon_torpedo.png);
	height: 60px;
	right: 394px;
	opacity: .3;
	top: 0;
	width: 60px;
}

label.conceal_content
{
	opacity: 1;
}

label.conceal_content:hover
{
	opacity: .5;
}

/**********************************
***    TORPEDO LAUNCH CONTROL	***
**********************************/
.torpedo_launch_control img
{
	margin-left: 14px;
}

.torpedo_launch_control tr:nth-of-type(1) th
{
	background: rgba(255, 153, 0, 0.8);
	font-size: 1.5em;
	text-align: center;
}

.torpedo_launch_control tr.torpedo_launch_buttons th
{
	background: rgba(0, 0, 0, 0.6);
	font-size: 1.3em;
	font-variant: small-caps;
	letter-spacing: 1px;
}

.torpedo_launch_control tr.torpedo_launch_buttons td
{
	background: rgba(0, 0, 0, 0.6);
}

.torpedo_launch_buttons td
{
	height: 32px;
}

.torpedo_launch_control input[type="text"]
{
	padding: 5px;
	text-align: center;
	width: 32px;
}

.torpedo_launch_control .torpedo_spread th
{
	background: rgba(0, 0, 0, 0.6);
	text-align: center;
}

.torpedo_launch_control .torpedo_control
{
	visibility: hidden;
}

/**********************************
***    TORPEDO LAUNCH BUTTONS	***
**********************************/
.torpedo_launch_buttons label
{
	background: url(../files/1/fire_button_red.png) no-repeat center center;
	height: 100%;
	padding-top: 5px;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, .5);
	width: 100%;
}

#torpedo_launch_f1:checked ~ div #torpedo_launch_f1_button,
#torpedo_launch_f2:checked ~ div #torpedo_launch_f2_button,
#torpedo_launch_f3:checked ~ div #torpedo_launch_f3_button,
#torpedo_launch_f4:checked ~ div #torpedo_launch_f4_button,
#torpedo_launch_f5:checked ~ div #torpedo_launch_f5_button,
#torpedo_launch_f6:checked ~ div #torpedo_launch_f6_button,
#torpedo_launch_a1:checked ~ div #torpedo_launch_a1_button,
#torpedo_launch_a2:checked ~ div #torpedo_launch_a2_button,
#torpedo_launch_a3:checked ~ div #torpedo_launch_a3_button,
#torpedo_launch_a4:checked ~ div #torpedo_launch_a4_button
{
	background: url(../files/1/chit_torpedo_up.gif) no-repeat center center;
}

#torpedo_launch_f1:checked ~ div .torpedo_control_f1,
#torpedo_launch_f2:checked ~ div .torpedo_control_f2,
#torpedo_launch_f3:checked ~ div .torpedo_control_f3,
#torpedo_launch_f4:checked ~ div .torpedo_control_f4,
#torpedo_launch_f5:checked ~ div .torpedo_control_f5,
#torpedo_launch_f6:checked ~ div .torpedo_control_f6,
#torpedo_launch_a1:checked ~ div .torpedo_control_a1,
#torpedo_launch_a2:checked ~ div .torpedo_control_a2,
#torpedo_launch_a3:checked ~ div .torpedo_control_a3,
#torpedo_launch_a4:checked ~ div .torpedo_control_a4
{
	visibility: visible;
}

.torpedo_launch_control .disabled label
{
	background: url(../files/1/fire_button_grey.png) no-repeat center center;
}

.torpedo_launch_control .disabled label:hover
{
	cursor: not-allowed;
}

/**********************************
***          DEPTH GAUGE	***
**********************************/
#depth_gauge
{
	background: #fff;
	border-radius: 5px;
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
	font-size: 8px;
	height: 420px;
	left: 12px;
	padding-bottom: 2px;
	position: fixed;
	text-align: right;
	width: 22px;
	z-index: 400;

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

#toggle_depth_gauge:checked + #depth_gauge
{
	bottom: -400px !important;
}

#depth_gauge div
{
	left: 0;
	position: absolute;
}

#gauge_torpedo_depth
{
	background: #6FD16F;
	height: 41px;
	top: 6px;
	width: 100%;
}

#gauge_depth_marker
{
	background: #000;
	height: 7px;
	left: -6px !important;
	transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	width: 7px;
}

#gauge_depth_warning
{
	background: #CD7373;
	bottom: 4px;
	width: 100%;
}

#gauge_numerals
{
	left: 4px;
	line-height: 10px;
	top: 8px;
}

#depth_gauge_button
{
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

/**********************************
***          GIVE ORDERS	***
**********************************/
#proceed,
#give_orders
{
	background: rgba(0, 0, 0, 0.3);
	border: 1px solid #1B565D;
	box-shadow: none;
	border-radius: 10px;
	color: #fff;
	font-variant: small-caps;
	letter-spacing: 2px;
	padding: 6px 10px;
	position: fixed;
	right: 15px;
	text-shadow: 1px 1px 3px #222;
	top: 16px;
	z-index: 400;

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

#proceed:hover,
#give_orders:hover
{
	background: rgba(60, 200, 132, 1);
	box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.4);
	color: #fff;
	cursor: pointer;
}

/**********************************
***      SCENARIO CREATOR	***
**********************************/
.scenario_creator #fullscreen .standard_box
{
	min-width: 830px;
}

.scenario_creator #fullscreen form div div
{
	margin-bottom: 20px;
}

.scenario_creator #fullscreen h2
{
	margin-bottom: 1em;
}

.scenario_creator #fullscreen h3
{
	font-size: 1.4em;
	margin-bottom: 10px;
}

.scenario_creator #fullscreen label
{
	background: rgba(255, 153, 0, 0.6);
	display: block;
	margin: 0;
	padding: 5px;
}

.scenario_creator #fullscreen input[type="text"]
{
	display: inline;
	margin: 0;
}

.scenario_creator #fullscreen input[type="radio"]
{
	margin: 0 5px;
}

.scenario_creator #fullscreen select
{
	display: inline;
	margin-bottom: 0;
	width: auto;
}

.scenario_creator #fullscreen table
{
	margin: 0;
}

.scenario_creator #fullscreen textarea
{
	height: 100px;
	width: 100%;
}

.scenario_creator #fullscreen .three_digit_input
{
	width: 40px;
}

#create_scenario_step1 table,
#create_scenario_step3 table
{
	width: 100%;
}

#create_scenario_step3 input[type="text"]
{
	width: 60px;
}


#create_scenario_step2 .standard_box
{
	min-width: 975px  !important;
}

#create_scenario_step2 #fullscreen form div div
{
	margin-bottom: 0;
}

#create_scenario_step2 .scenario_date
{
	float: left;
}

#create_scenario_step2 .scenario_date table
{
	margin: 24px 0;
}

#create_scenario_step2 .weaponsList
{
	float: left;
	margin-left: 20px;
}

#create_scenario_step2 .weaponsList table:first-of-type
{
	margin-bottom: 20px;
}

#create_scenario_step3 #fullscreen .standard_box
{
	min-width: 1150px;
}

/**********************************
***       PAGE OVERRIDES	***
**********************************/
.playarea #main_panel
{
	padding-bottom: 0;
	position: fixed;
	width: 400px;
	z-index: 800;
}

.playarea #main_panel h2
{
	margin-bottom: 30px;
}

.playarea #main_panel h5
{
	font-size: .7em;

	margin: 0 auto;
	text-align: center;
	width: 300px;
}

.standard_box .section
{
	box-sizing: border-box;
	float: left;
	width: 50%;
}

.standard_box .section + .section
{
	padding-left: 20px;
}

.standard_box .section td
{
	white-space: nowrap;
}

.standard_box .section h2
{
	font-size: 1em;
	margin-bottom: 2em;
}

.standard_box .section h3
{
	font-size: .9em;
	margin-bottom: 3em;
}

/**********************************
***             HOME		***
**********************************/
.home .standard_box
{
	padding: 35px 35px 10px 35px;
	width: 600px;
}

.home input[type="text"],
.home input[type="password"]
{
	background: none;
	border: none;
	border-bottom: 1px solid rgba(255, 153, 0, 0.7);
	color: #fff;
	font-size: 2em;
	outline: none;
	width: 100%;
}

.home input[type="submit"]
{
	margin-top: 35px;
}

.home a
{
	background: url(../files/1/icon_scenario.png) no-repeat center center;
	border: 1px solid transparent;
	border-radius: 10px;
	bottom: 45px;
	display: block;
	font-size: 0.9em;
	font-variant: small-caps;
	height: 48px;
	left: 215px;
	line-height: 48px;
	position: absolute;
	text-align: center;
	width: 100px;
}

.home a:hover
{
	background-color: rgba(0, 0, 0, 0.6);
	border: 1px solid #ff8800;
}

.home p
{
	clear: both;
	color: #bbb;
	font-size: .75em;
	margin: 0;
	padding: 40px 0 0 0;
	text-align: center;
}

/**********************************
***        CHECKGAMESTATUS	***
**********************************/
#checkGameStatus .standard_box
{
	width: 800px;
}

#checkGameStatus .standard_box h3
{
	background: rgba(255, 153, 0, 0.8);
	border-radius: 5px;
	color: #eee;
	font-size: 1.2em;
	margin-bottom: 30px;
	padding: 10px;
	text-align: center;
}

#checkGameStatus .half_block
{
	box-sizing: border-box;
	float: left;
	width: 50%;
}

#checkGameStatus label
{
	float: left;
	margin-left: 27px;
}

#checkGameStatus input[type="text"]
{
	float: left;
	margin: 0 15px 30px 15px;
	width: 60px;
}

#checkGameStatus .standard_box h5
{
	margin-left: 27px;
}

/**********************************
***             LOBBY		***
**********************************/
#lobby .standard_box
{
	width: 900px;
}

#lobby .standard_box h3
{
	background: rgba(255, 153, 0, 0.8);
	border-radius: 5px;
	color: #eee;
	font-size: 1.2em;
	margin-bottom: 30px;
	padding: 10px;
	text-align: center;
}

#lobby .standard_box h5
{
	font-size: .9em;
}

#lobby .joined
{
	margin: 0;
	width: 840px;
}

#lobby table.joined tr th:nth-of-type(1),
#lobby table.joined tr td:nth-of-type(1)
{
	width: 70px;
}

#lobby table.joined tr th:nth-of-type(2),
#lobby table.joined tr td:nth-of-type(2)
{
	width: 80px;
}

#lobby table.joined tr th:nth-of-type(4),
#lobby table.joined tr td:nth-of-type(4)
{
	width: 30px;
}

#lobby .limited_height
{
	max-height: 400px;
}

#lobby .gameProposal
{
	margin-right: 8px;
 	vertical-align: bottom;
}

/**********************************
***   LOBBY CREATE OR JOIN GAME	***
**********************************/
#lobby_create_or_join_game .standard_box
{
	width: 700px;
}

#lobby_create_or_join_game .standard_box h3
{
	background: rgba(255, 153, 0, 0.8);
	border-radius: 5px;
	color: #eee;
	font-size: 1.2em;
	margin-bottom: 30px;
	padding: 10px;
	text-align: center;
}

#lobby_create_or_join_game .standard_box h5
{
	font-size: .9em;
	margin: 20px 0;
	text-align: center;
}

#lobby_create_or_join_game table.joined
{
	margin: 0;
	width: 640px;
}

#lobby_create_or_join_game table.joined tr th:nth-of-type(1),
#lobby_create_or_join_game table.joined tr td:nth-of-type(1)
{
	width: 60px;
}

#lobby_create_or_join_game table.joined tr td:nth-of-type(1)
{
	vertical-align: top;
}

#lobby_create_or_join_game table.joined tr th:nth-of-type(2),
#lobby_create_or_join_game table.joined tr td:nth-of-type(2)
{
	text-align: left;
}

#lobby_create_or_join_game .limited_height
{
	max-height: 112px;
}

#lobby_create_or_join_game a.link_to_lobby
{
	background: url(../files/1/icon_navigation.png) no-repeat center center;
	border: 2px solid #555;
	border-radius: 10px;
	bottom: 10px;
	color: #ff0000;
	display: block;
	font-variant: normal;
	height: 48px;
	left: 50%;
	letter-spacing: 2px;
	position: absolute;
	text-transform: uppercase;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	width: 100px;
}

/* .new_button, */
#lobby_create_or_join_game a.active
{
	border: 2px solid #00ff00;
}

#lobby_create_or_join_game a.link_to_lobby:hover
{
	background-color: rgba(0, 0, 0, 0.6);
	border: 2px solid #ff8800;
}

/**********************************
***     LOBBY READY TO PLAY	***
**********************************/
#lobby_ready_to_play .standard_box
{
	min-width: 800px;
}

/**********************************
***     LOBBY CHOOSE COMMAND	***
**********************************/
#lobby_choose_command .standard_box
{
	min-width: 820px;
}

#lobby_choose_command .standard_box .section
{
	width: 30%;
}

#lobby_choose_command .standard_box .section:first-of-type
{
	width: 70%;
}

#lobby_choose_command p
{
	background: rgba(255, 153, 0, 0.2);
	font-size: .8em;
	margin-bottom: 15px;
	padding: 15px;
}

/**********************************
***    LOBBY CHOOSE CONDITIONS	***
**********************************/
#lobby_choose_conditions .standard_box
{
	width: 820px;
}

#lobby_choose_conditions table
{
	width: 100%;
}

#lobby_choose_conditions p
{
	background: rgba(255, 153, 0, 0.2);
	font-size: .8em;
	margin-bottom: 15px;
	padding: 15px;
}

#lobby_choose_conditions input,
#lobby_choose_conditions select
{
	margin-bottom: 0;
}

#lobby_choose_conditions table.gameStart input
{
	width: 100%;
}

#lobby_choose_conditions table.gameStart tr th,
#lobby_choose_conditions table.gameStart tr td
{
	width: 12%;
}

#lobby_choose_conditions table.gameStart tr th:nth-of-type(4),
#lobby_choose_conditions table.gameStart tr td:nth-of-type(4)
{
	width: 64%;
}

/**********************************
***    LOBBY CHOOSE SCENARIO	***
**********************************/
#lobby_choose_scenario .standard_box
{
	min-width: 1260px;
}

#lobby_choose_scenario h2,
#lobby_choose_scenario div.clear,
#lobby_choose_scenario div.limited_height
{
	margin-bottom: 16px;
}

#lobby_choose_scenario h5
{
	font-size: 1.1em;
	padding-bottom: 0;
}

#lobby_choose_scenario p
{
	color: #FFE8CD;
	margin: 0;
	padding: 3px 0 3px 20px;
}

#lobby_choose_scenario table
{
	margin: 0;
}

#lobby_choose_scenario h3 + table th
{
	border-bottom: 1px solid #222;
}

#lobby_choose_scenario table th,
#lobby_choose_scenario table td
{
	padding: 3px;
}

#lobby_choose_scenario table.joined tr th,
#lobby_choose_scenario table.joined tr td
{
	width: 50px;
}

#lobby_choose_scenario table.joined tr th:nth-of-type(1),
#lobby_choose_scenario table.joined tr td:nth-of-type(1)
{
	width: 45px;
}

#lobby_choose_scenario table.joined tr td:nth-of-type(2)
{
	font-size: 1.25em;
}

#lobby_choose_scenario table.joined tr th:nth-of-type(5),
#lobby_choose_scenario table.joined tr td:nth-of-type(5)
{
	width: 600px;
}

#lobby_choose_scenario table.joined tr th:nth-of-type(6),
#lobby_choose_scenario table.joined tr td:nth-of-type(6)
{
	width: 90px;
}

#lobby_choose_scenario table.joined tr th:nth-of-type(8),
#lobby_choose_scenario table.joined tr td:nth-of-type(8)
{
	width: 38px;
}

#lobby_choose_scenario table.joined tr th:nth-of-type(9),
#lobby_choose_scenario table.joined tr td:nth-of-type(9)
{
	width: 90px;
}

#lobby_choose_scenario table.joined tr th:nth-of-type(10),
#lobby_choose_scenario table.joined tr td:nth-of-type(10)
{
	width: 30px;
}

#lobby_choose_scenario table.joined tr th:nth-of-type(11),
#lobby_choose_scenario table.joined tr td:nth-of-type(11)
{
	width: 30px;
}

/********** max 1024 - iPad **********/
@media screen and (max-width: 1024px)
{

	#lobby_choose_scenario .standard_box
	{
		min-width: 980px;
	}

	#lobby_choose_scenario div.limited_height
	{
		max-height: 500px;
	}

}

/**********************************
***     LOBBY CHOOSE SHIP	***
**********************************/
#lobby_choose_ship input[type="text"]
{
	margin: 0 !important;
	width: 120px;
}

#lobby_choose_ship td
{
	white-space: nowrap;
}

/********** max 1024 - iPad **********/
@media screen and (max-width: 1024px)
{

	#lobby_choose_ship .standard_box
	{
		max-width: 1060px;
	}

}

/**********************************
***     LOBBY CHOOSE STATION	***
**********************************/
#lobby_choose_station #fullscreen .standard_box
{
	min-width: 1520px;
}

#lobby_choose_station #fullscreen label
{
	background: rgba(255, 153, 0, 0.3);
	display: block;
	margin: 0;
	padding: 5px;
}

#lobby_choose_station #fullscreen input[type="radio"]
{
	margin: 15px 10px;
}

#lobby_choose_station #fullscreen select
{
	display: inline;
	margin: 5px 0 0 0;
	width: 60px;
}

#lobby_choose_station .section1
{
	float: left;
	margin-right: 20px;
}

#lobby_choose_station .section2
{
	float: left;
}

#lobby_choose_station table th
{
	background: rgba(60, 183, 199, 0.8);
	border-bottom: 1px solid rgba(27, 86, 93, 0.7);
	border-left: 1px solid rgba(27, 86, 93, 0.7);
}

#lobby_choose_station table td
{
	background: #3CB7C7 url(../files/1/chit_convoy_0.gif) no-repeat 6px -63px;
	border-bottom: 1px solid rgba(27, 86, 93, 0.7);
	border-left: 1px solid rgba(27, 86, 93, 0.7);
	height: 50px;
	width: 145px;
}

#lobby_choose_station table.station_pattern th
{
	/* height: 50px; */
	width: 145px;
}

#lobby_choose_station table th.occupied
{
	background: #3CB7C7 url(../files/1/chit_escort_0.gif) no-repeat 6px -63px;
}

#lobby_choose_station #heading_graphic
{
	background: #3CB7C7 url(../files/1/chit_sub_0.gif);
	height: 187px;
	padding: 0;
	width: 199px;

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

#lobby_choose_station #heading_graphic.escort
{
	background: #3CB7C7 url(../files/1/chit_escort_0.gif);
}

/********** max 1024 - iPad **********/
@media screen and (max-width: 1024px)
{

	#lobby_choose_station .standard_box
	{
		transform: scale(.75, .75) translate(-68%, -75%);
	}

}

/**********************************
***     LOBBY CHOOSE WEAPON	***
**********************************/
#lobby_choose_weapon .standard_box
{
	min-width: 1060px;
}

#lobby_choose_weapon .section1,
#lobby_choose_weapon .section2
{
	float: left;
	margin-right: 20px;
}

#lobby_choose_weapon table
{
	float: left;
	margin: 0 20px 20px 0;
}

/**********************************
***      LOBBY JOIN GAME	***
**********************************/
#lobby_join_game .standard_box
{
	min-width: 1280px;
}

#lobby_join_game h2,
#lobby_join_game div.clear,
#lobby_join_game div.limited_height
{
	margin-bottom: 16px;
}

#lobby_join_game h5
{
	font-size: 1.1em;
	padding-bottom: 0;
}

#lobby_join_game p
{
	color: #FFE8CD;
	margin: 0;
	padding: 3px 0 3px 20px;
}

#lobby_join_game table
{
	margin: 0;
}

#lobby_join_game table th,
#lobby_join_game table td
{
	padding: 3px;
}

#lobby_join_game table.joined tr.row2 th
{
	border-bottom: none !important;
}

#lobby_join_game table.joined tr.row2 th,
#lobby_join_game table.joined tr td
{
	width: 45px;
}

#lobby_join_game table.joined tr.row2 th:nth-of-type(4),
#lobby_join_game table.joined tr td:nth-of-type(4)
{
	width: 30px;
}

#lobby_join_game table.joined tr td:nth-of-type(4)
{
	font-size: 1.25em;
}

#lobby_join_game table.joined tr.row2 th:nth-of-type(7),
#lobby_join_game table.joined tr td:nth-of-type(7)
{
	width: 90px;
}

#lobby_join_game table.joined tr.row2 th:nth-of-type(8),
#lobby_join_game table.joined tr td:nth-of-type(8)
{
	width: 620px;
}

#lobby_join_game table.joined tr.row2 th:nth-of-type(9),
#lobby_join_game table.joined tr td:nth-of-type(9)
{
	width: 90px;
}

#lobby_join_game table.joined tr.row2 th:nth-of-type(10),
#lobby_join_game table.joined tr td:nth-of-type(10)
{
	width: 50px;
}

#lobby_join_game table.joined tr.row2 th:nth-of-type(11),
#lobby_join_game table.joined tr td:nth-of-type(11)
{
	width: 30px;
}

/********** max 1024 - iPad **********/
@media screen and (max-width: 1024px)
{

	#lobby_join_game .standard_box
	{
		min-width: 980px;
	}

}

/**********************************
***      FLAG BACKGROUNDS	***
**********************************/
td.bg_flag
{
	background-image: url(../files/1/panel_flag_american.jpg);
	background-repeat: no-repeat;
	background-position: 2px center;
	background-size: 28px 20px;
	text-align: right;
}

td.bg_American
{
	background-image: url(../files/1/panel_flag_american.jpg);
}

td.bg_British
{
	background-image: url(../files/1/panel_flag_british.jpg);
}

td.bg_German
{
	background-image: url(../files/1/panel_flag_german.jpg);
}

td.bg_Japanese
{
	background-image: url(../files/1/panel_flag_japanese.jpg);
}

td.bg_flag span
{
	padding-right: 4px;
}

/**********************************
***   SHOW VICTORY CONDITIONS	***
**********************************/
#ShowVictoryConditions #fullscreen .standard_box
{
	min-width: 1150px;
}

#ShowVictoryConditions table
{
	width: 100%;
}

/**********************************
***      ALERTS & INFO BARS	***
**********************************/
.attention
{
	border: 1px solid #1B565D;
	border-bottom-right-radius: 10px;
	border-top-right-radius: 10px;
	color: #fff;
	font-size: 1.25em;
	height: 40px;
	line-height: 40px;
	left: 0;
	opacity: 0;
	padding-right: 20px;
	position: fixed;
	text-align: right;
	text-transform: uppercase;
	top: -60px;
	z-index: 600;

	transition: 1s;
	-webkit-transition: 1s;
}

#operational_alert
{
	background: rgba(0, 0, 0, 0.2) url(../files/1/alert32.png) no-repeat 4px center;
}

#operational_info
{
	background: rgba(0, 0, 0, 0.2) url(../files/1/info32.png) no-repeat 4px center;
}

#operational_warning
{
	background: rgba(255, 0, 0, 0.7) url(../files/1/alert32.png) no-repeat 4px center;
}

.attention p
{
	float: left;
	height: 100%;
	margin-left: 44px;
}

.attention div
{
	float: left;
	max-width: 0;
	opacity: 0;

	transition: 1s;
	-webkit-transition: 1s;
}

#bLookouts:checked ~ #operational_warning,
#bRadarContact:checked ~ #operational_warning,
#bSonarContact:checked ~ #operational_warning,
#bSonarWarning:checked ~ #operational_warning
{
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
	opacity: 1;
	top: 4px;
}

#bEmergencyPower:checked ~ #operational_alert,
#bMakeRepairs:checked ~ #operational_alert,
#bPerformReloads:checked ~ #operational_alert,
#bRepairsPrevented:checked ~ #operational_alert,
#bSonarHomingPrevented:checked ~ #operational_alert,
#bSonarSweepPrevented:checked ~ #operational_alert,
#bUseSchnorkel:checked ~ #operational_alert
{
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
	opacity: 1;
	top: 53px;
}

#bLastKnownPositions:checked ~ #operational_info,
#bSilentRunning:checked ~ #operational_info,
#bTubesNeedReloading:checked ~ #operational_info,
#bWeHaveSonarContact:checked ~ #operational_info
{
	box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
	opacity: 1;
	top: 102px;
}

#bEmergencyPower:checked ~ .attention #alertEmergencyPower,
#bLastKnownPositions:checked ~ .attention #infoLastKnownPositions,
#bLookouts:checked ~ .attention #alertLookouts,
#bMakeRepairs:checked ~ .attention #alertMakeRepairs,
#bPerformReloads:checked ~ .attention #alertReloadingTorpedoes,
#bRadarContact:checked ~ .attention #alertRadarContact,
#bRepairsPrevented:checked ~ .attention #alertRepairsPrevented,
#bSilentRunning:checked ~ .attention #infoSilentRunning,
#bSonarContact:checked ~ .attention #alertSonarContact,
#bSonarHomingPrevented:checked ~ .attention #alertSonarHomingPrevented,
#bSonarSweepPrevented:checked ~ .attention #alertSonarSweepPrevented,
#bSonarWarning:checked ~ .attention #operational_warning,
#bTubesNeedReloading:checked ~ .attention #infoTubesNeedReloading,
#bUseSchnorkel:checked ~ .attention #alertUseSchnorkel
{
	margin-left: 15px;
	max-width: 700px;
	opacity: 1;
}

.actionButton
{
	background: url(../files/1/cmd_available.png) no-repeat center center;
	display: block;
	height: 16px;
	margin: 0 auto;
	width: 48px;

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

.actionButton:hover
{
	cursor: pointer;
}

#bAbandonShip:checked ~ div .lblAbandonShip
{
	background: url(../files/1/cmd_given.png) no-repeat;
}

#bMakeRepairs:checked ~ div .lblMakeRepairs
{
	background: url(../files/1/cmd_given.png) no-repeat;
}

#bPerformReloads:checked ~ div .lblPerformReloads
{
	background: url(../files/1/cmd_given.png) no-repeat;
}

#bSilentRunning:checked ~ div .lblSilentRunning
{
	background: url(../files/1/cmd_given.png) no-repeat;
}

#bSurfaceGunnery:checked ~ div .lblSurfaceGunnery
{
	background: url(../files/1/cmd_given.png) no-repeat;
}

#bUseSchnorkel:checked ~ div .lblUseSchnorkel
{
	background: url(../files/1/cmd_given.png) no-repeat;
}

.cmd_disabled
{
	background-image: url(../files/1/cmd_disabled.png) !important;
}

.cmd_disabled:hover
{
	cursor: not-allowed;
}

/**********************************
***      SITUATION REPORT	***
**********************************/
@keyframes situation_report_fade_out
{
	from {opacity: 1; bottom: 15px; visibility: visible;}
	to {opacity: 0; bottom: -200px; visibility: hidden;}
}

#situation_report
{
	animation-name: situation_report_fade_out;
	animation-duration: 3s;
	animation-delay: 9s;
	animation-fill-mode: forwards;
	background: url(../files/1/bg_log_panel.jpg);
	background-size: cover;
	border: 1px solid #ff8800;
	border-radius: 10px;
	left: 50%;
	padding: 0 10px 10px 10px;
	position: fixed;
	bottom: 15px;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	width: 500px;
	z-index: 700;
}

#situation_report .panel_title
{
	color: #fff;
	display: block;
	font-size: 2em;
	font-variant: small-caps;
	height: 54px;
	letter-spacing: 1px;
	padding-top: 20px;
	text-align: center;
	text-shadow: 2px 2px 3px #222;
}

#situation_report p
{
	color: #222;
	font-family: monospace, "courier new", times, serif;
	font-size: .9em;
	margin-bottom: 8px;
	text-align: center;
}

/**********************************
***          GAME SCORE		***
**********************************/
#gameScore
{
	left: 50%;
	opacity: .3;
	outline: none;
	position: fixed;
	top: -90px;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
	width: 460px;
	z-index: 900;

	transition: 1s;
	-webkit-transition: 1s;
}

#gameScore:focus,
#gameScore:hover,
#gameScore.gameover
{
	cursor: default;
	opacity: 1;
	top: -20px;
}

#gameScore dl
{
	background: url(../files/1/bg_scenario_panel.jpg);
	border-bottom-left-radius: 20px;
	border-bottom-right-radius: 20px;
	overflow: auto;
	padding-top: 20px;
	text-shadow: 2px 2px 2px #000;

	transition: 1s;
	-webkit-transition: 1s;
}

#gameScore:focus dl,
#gameScore:hover dl
{
	box-shadow: 8px 8px 12px rgba(0,0,0,0.4);
}

#gameScore dd,
#gameScore dt
{
	color: #fff;
	float: left;
	font-family: monospace, "courier new", times, serif;
	text-align: center;
}

#gameScore dd
{
	background: transparent;
	border-color: #aaa #ccc #ccc #aaa;
	border-style: inset;
	border-width: 2px;
	box-sizing: border-box;
	font-family: "courier new", times, serif;
	font-size: 1.5em;
	height: 50px;
	line-height: 50px;
	margin: 10px 0;
	width: 15%;
}

#gameScore dt
{
	font-size: 1.75em;
	height: 70px;
	line-height: 70px;
	width: 35%;
}

#gameScore dt.AmericanFlag
{
	background: url(../files/1/flag_american.jpg);
}

#gameScore dt.BritishFlag
{
	background: url(../files/1/flag_british.jpg);
}

#gameScore dt.GermanFlag
{
	background: url(../files/1/flag_german.jpg);
}

#gameScore dt.JapaneseFlag
{
	background: url(../files/1/flag_japanese.jpg);
}

#gameScore h5
{
	background: #444;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
	color: #fff;
	clear: both;
	font-size: .8em;
	font-variant: normal;
	letter-spacing: 1px;
	margin: 0 auto;
	padding-top: 1px;
	text-align: center;
	text-transform: uppercase;
	width: 30%;
}

/**********************************
***      CONCLUSION PANEL	***
***          SUNK PANEL		***
***        VICTORY PANEL	***
**********************************/
.conclusionPanel
{
	border-radius: 10px;
	box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.4);
	box-sizing: border-box;
	color: #fff;
/*	font-family: "courier new", times, serif; */
	height: 420px;
	left: 50%;
	opacity: 1;
	overflow: auto;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%) scale(1, 1);
	-webkit-transform: translate(-50%, -50%) scale(1, 1);
	width: 570px;
	z-index: 300;

	transition: 2s;
	transition-delay: opacity 1s; scale 1s;
	-webkit-transition: 2s;
	-webkit-transition-delay: opacity 1s; scale 1s;
}

.conclusionPanel h2
{
	font-size: 2.75em;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 40px 0;
	text-align: center;
	text-decoration: underline;
	text-shadow: 4px 0 4px #000;
	text-transform: uppercase;
}

.conclusionPanel p
{
	font-size: 2em;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 0 20px 8px 20px;
	text-shadow: 3px 0 3px #000;
}

#SunkPanel.fade_in,
#VictoryPanel.fade_in
{
	opacity: 0;
	transform: translate(-50%, -50%) scale(.05, .05);
	-webkit-transform: translate(-50%, -50%) scale(.05, .05);

	transition: none;
	-webkit-transition: none;
}

#SunkPanel
{
	background: url(../files/1/sunk.jpg);
}

#SunkPanel form div
{
	text-align: center;
}

#SunkPanel form div table
{
	box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.4);
}

#SunkPanel input[type="submit"]
{
	box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.4);
}

#VictoryPanel p
{
}

#VictoryPanel input[type="button"]
{
	bottom: 40px;
	box-shadow: 5px 5px 8px rgba(0, 0, 0, 0.4);
	left: 50%;
	position: absolute;
	transform: translate(-50%, 0);
	-webkit-transform: translate(-50%, 0);
}

#VictoryPanel.victoryAmerican
{
	background: url(../files/1/flag_american_victory.jpg);
}

#VictoryPanel.victoryBritish
{
	background: url(../files/1/flag_british_victory.jpg);
}

#VictoryPanel.victoryGerman
{
	background: url(../files/1/flag_german_victory.jpg);
}

#VictoryPanel.victoryJapanese
{
	background: url(../files/1/flag_japanese_victory.jpg);
}

#VictoryPanel.victoryShared
{
	animation-name: shared_victory;
	animation-duration: 20s;
	animation-fill-mode: forwards;
	background: url(../files/1/bg_fullscreen.jpg);
}

@keyframes shared_victory
{
	from {background-position: 20% 10%; background-size: 1920px 1280px;}
	to {background-position: 60% 50%; background-size: 630px 420px;}
}

/**********************************
***         WAITING BOX		***
**********************************/
.waiting_box #pollingWait p
{
	text-align: center;
}

.waiting_box #pollingWait p select
{
	display: inline;
	margin: 0 5px;
	width: auto;
}

/**********************************
***           SUB_PDF		***
**********************************/
.sub_pdf
{
	background: url(../files/1/unterseeboot_pdf.png);
	height: 82px;
	margin: 0 auto 40px auto;
	width: 432px;
}

.sub_pdf a
{
	background: url(../files/1/pdf.png) no-repeat center 70px;
	display: block;
	height: 100%;
	width: 100%;

	transition: 1.5s;
	-webkit-transition: 1.5s;
}

.sub_pdf a:hover
{
	background: url(../files/1/pdf.png) no-repeat center center;
}

/**********************************
***	LOBBY_CHOOSE_STATION
**********************************/
@media screen and (max-width: 1550px)
{

	#lobby_choose_station #main_panel
	{
		left: -300px;
		position: absolute;
		top: -180px;

		transform: scale(.6, .6);
		-webkit-transform: scale(.6, .6);
	}

}