body
{
	margin: 0;
	padding: 0;
	overflow: hidden;
	user-select: none;
}

canvas
{
    position:absolute;
    top:0;
	left:0;
	padding:0;
	margin:0;
	width: 100%;
	height: 100%;
    z-index: -1; /* render behind the menu */
}

#ping
{
	position:relative;
	float:right;
	font-family: Helvetica, Arial, sans-serif;
	font-size:medium;
	width:100%;
	text-align:center;
}

/* debug stuff*/
#fps
{
	position:absolute;
	right:0;
	top:0;
}

#modelName
{
	position:absolute;
	right:0;
	bottom:0;
    width: 30%;
}
/*end debug stuff*/

.Panel
{
    margin-top:5ex;
    background-color:#f6f6f6;

    box-shadow: 10px 10px 0px 0px rgba(0,0,0,0.71);
	z-index:2; /* to render above floaty text */
}

#lobbyUI
{
	position:fixed;
	overflow-x:hidden;
	overflow-y:auto;
	text-align:center;
	height:100%;
	width:100%;
	left:0;
	top:0;
	z-index:1;
	margin:0;
	padding:0;
}

#mainMenu
{
    position:relative;
    display:inline-block;
	float:right;
    text-align: center;
    width:30%;
    
	min-width:320px;
	margin:0;

    padding-bottom:3ex;
    font-family: Impact, Charcoal, sans-serif;
	overflow-y:auto;
	border:1px solid #333;
}

#bottomPanel
{
	position:relative;
	float:right;
	width:100%;
	height:2em;
	font-family: Helvetica, Arial, sans-serif;
	text-align:right;
	font-size:small;
	padding-top:1ex;
}

#logo
{
    position:relative;
    display:inline-block;
	margin:0;
	padding:0;
	width:100%;
}

#logoContainer
{
	position:relative;
	margin:0;
	padding:0;
	width:100%;
	height:auto;
	margin-bottom:10px;
}

#gamepadDetected
{
	position:absolute;
	bottom:0;
	font-family: Helvetica, Arial, sans-serif;
	font-size:larger;
	margin:0;
	padding:5px;
	width:90%;
	right:0;
}

.GamepadNotifierImage
{
	position:absolute;
	right:10px;
	bottom:10px;
	
	display:none;
	width:100%;
}

#playerName
{
    color:#333;
    font-size:2em;
    width:80%;
    min-width:10ex;
	padding-left:5px;
}

.Button
{
    color:#fff;
    font-size:2em;
    text-align:center;
    width: 80%;
    height: 1.3em;
    border:1px solid #161616;
	background-color:#aaa;
    position:relative;
    user-select:none;

    margin-top:5px;
    margin-left: auto;
	margin-right: auto;
}

.Button a:visited, a:link, a:hover, a:active
{
	text-decoration:none;
}

#playButton
{
    background-color:#00BC00;
}

.ProgressBar
{
    padding: 0;
    margin: 0;
    position:absolute;
    left:0;
    height:100%;
    width:0%;
    background-color:#ff5600;
    opacity: 0.7;
}

#localHealthBar
{
	background-color:#af111c;
	background-image:url("images/HealthBar.jpg");
	background-size: 805px 20px;
	width:100%;
	height:100%;
	width:100%; /* health starts at 100% */
	opacity:1.0;
}

#localBoostBar
{
  background-color:#8080ff;
	background-size: 805px 20px;
	width:100%;
	height:100%;
	width:100%; /* health starts at 100% */
	opacity:1.0;
}

.EnemyHealthBarBackground
{
	position:relative;
	margin-left:auto;
	margin-right:auto;
	height:5px;
	width:5em;
	
	border:1px solid black;
	border-radius:2px;
}

.EnemyHealthBar /* part of the nametag FloatyText */
{
	position:absolute;
	width:100%;
	height:5px;
	border-radius:2px;
	z-index:-1; /* To go behind the health bar background */
	opacity:1;
	
	background-color:#af111c;
}

.HealthBarBackground
{
	position:absolute;
	display:none;
	left:30%;
	bottom:0;
	width:40%;
	border:2px solid black;
	border-radius:3px;
	height:1.5em;
	box-sizing:border-box;
}

.BoostBarBackground
{
	position:absolute;
	display:none;
	left:35%;
	bottom:1.5em;
	width:30%;
	border:2px solid black;
	border-radius:3px;
	border-bottom:none;
	height:1em;
	box-sizing:border-box;
}

#permanentBoxBackground
{
	position:absolute;
	width:100%;
	height:100%;
	margin:0;
	padding:0;
	top:0;
	left:0;
	background-color:rgba(80, 80, 80, 0.5);
	z-index:50;
}

#permanentBoxTitle
{
	top:0;
	left:0;
	position:absolute;
	margin:0;
	padding: 2px 0;
	padding-left:2%;
	height:1em;
	width:98%;
	background-color:#ee0000;
	color:#eee;
}

#permanentMessage
{
	position:absolute;
	margin:0;
	height:85%;
	width:95%;
	top:1.5em;
	left:1em;
}

#permanentButton
{
	position:absolute;
	bottom:5px;
	left:0;
	right:0;
	margin-left: auto; 
	margin-right: auto;
	
	background-color:#00BC00;
}

.MessageBox
{
    position:absolute;
    display:inline-block;
    width:30%;
    left:35%;
    height:30%;
    top:35%;
    font-family: Helvetica, Arial, sans-serif;
    background-color:#ffaaaa;
    text-align:left;
    font-size:large;
	z-index:4;
	padding:2ex;
}

#okBoxMessage
{
    margin:2ex;
}

#okButton
{
    background-color:#00BC00;
}

.FloatyText
{
    font-size:larger;
    color:#eee;
    position:absolute;
    text-align: center;
	height:3em;
	
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

#tutorial
{
	position:relative;
	float:left;
    font-family: Impact, Charcoal, sans-serif;
	font-size:larger;
	padding-left: 1ex;
	padding-right: 1ex;
	margin:0;
	width:20%;
	min-width:250px;
	margin-top:3ex;
}

#dummy
{
	position:relative;
	float:left;
	width:50%;
	height:0px;
	margin:0;
}

#reticle
{
	background-image: url('images/reticle.png');
	background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
	pointer-events: none;

	position:absolute;
	width: 10%;
	height:10%;
	left:45%;
	top:47%;
}

@font-face
{
	font-family:"Flogged";
	src: url('fonts/flogged.woff') format('woff');
}

#largeNotification
{
	text-align:center;
	color:#222;
	font-family: Flogged, Impact, Charcoal, sans-serif;
	font-size:4.5em;
	pointer-events:none;

	text-shadow:
    -1px -1px 0 #aaa,
    1px -1px 0 #aaa,
    -1px 1px 0 #aaa,
    1px 1px 0 #aaa;
	
	position:absolute;
	top:25%;
	left:0;
	width:100%; /* needed for text-align to work */
}

#rankingsPanel
{
	display: none; /* shown in javascript when we begin the game */
	
	font-family: Helvetica, Arial, sans-serif;
	font-size:medium;
	width:27%;
	
	position:absolute;
	right:3.6ex;
	top:0;
	
	padding:1ex;
	opacity:0.4;
	z-index:0; /* render behind the menus */
}

#rankingsTable
{
	border-collapse:collapse;
}

td, th
{
	padding-left:1ex;
	padding-right:1ex;
}

.AnnouncementItem
{
	font-family: Helvetica, Arial, sans-serif;
	font-size:medium;
}

#combatLog
{
	position:absolute;
	margin:5px;
	padding:0;
	top:0;
}

.CombatLogEntry
{
	position:relative;
	
	font-family: Helvetica, Arial, sans-serif;
	font-size:large;
	color:yellow;
	
	text-shadow:
    -1px -1px 0 #333,
    1px -1px 0 #333,
    -1px 1px 0 #333,
    1px 1px 0 #333;
}

#shootButton
{
	position:absolute;
	bottom:0;
	right:0;
	margin:10px;
	width:100px;
	height:100px;
	display:none;
	
	z-index:0; /* behind the lobby */

	background: url('images/shoot_button.png');
	background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

/* the left half of the screen. Used to keep every touch from influencing the mobile joystick. */
#leftSide
{
	left:0;
	position:absolute;
	width:50%;
	height:100%;
	display:none;
	
	z-index:0; /* behind the lobby */
}

#chatWindow
{
	position:absolute;
	
	left:0;
	bottom:0;
	width:15em;
	height:17em;
	
	background-color:rgba(0,0,0, 0.65);
	border: 1px solid #333;
	border-radius:0 5px 0 0;
	color:#d9d9d9;

	display:none; /* Chat starts hidden */
}

#chatTextArea
{
	position:relative;
	width:100%;
	height:79%;
	
	overflow-wrap:break-word;
	overflow-x:none;
	overflow-y:auto;
	padding:0.5em;
	
	/* Make padding not affect height/width */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	
	font-family: Helvetica, Arial, sans-serif;
}

#chatInput
{
	position:relative;
	width:100%;
	height:10%;
	
	padding:0;
	padding-left:0.1em;
	margin:0;
	
	font-family: Helvetica, Arial, sans-serif;
	font-size:large;
	color:#050505;
	border: 1px inset #999;
	
	/* Make padding not affect height/width */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;	
}

#chatInput:focus
{ 
    background-color:#FCFF75;
}

#chatButton
{
	position:absolute;
	bottom:0;
	left:0;
	height:1em;
	width:13em;
	padding:0.3em;
	
	font-family: Helvetica, Arial, sans-serif;
	font-size:large;
	font-weight:bold;
	color:#050505;
	
	border: 1px solid #333;
	border-radius:0 5px 0 0;
	
	background-color:#ddd;
}

.ChatButtonUnread
{
	background-color: lightblue !important;
}

.TitleBar
{
	position:relative;
	padding:0.3em;
	
	/* Make padding not affect height/width */
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
  
  background-color:#1111aa;
	font-size:smaller;
  font-family: 'Orbitron', sans-serif;
	font-weight:bold;
  color:#eee;
	
	border-bottom: 1px solid #333;
}

#privateMatchTitleBar
{
  font-size:0.7em;
}

#chatTitleBar
{
	border-radius:0 5px 0 0;
	height:11%;
}

#chatX
{
	position:absolute;
	right:5px;
	width:1em;
	height:1em;
	
	background: url('images/x.png');
	background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

#skinChooserUI
{
	position:absolute;
	margin:0;
	
	top:0;
	width:20%;
	height:154px;
	left:50%;
	transform: translateX(-50%);
	
	font-family: Helvetica, Arial, sans-serif;
	box-shadow: none;
}

.BeveledColor1
{
	border-top:1px solid #1111ff;
	border-left:1px solid #1111ff;
	border-right:1px solid #111177;
	border-bottom:1px solid #111177;
}

.BeveledColor2
{
	border-top:0;
	border-left:1px solid #000092;
	border-right:1px solid #000022;
	border-bottom:1px solid #000022;
}

#skinTitleBar
{
	padding:1;
	box-sizing: border-box;
	height:15%;
	font-weight:bolder;
}

.ScrollBox
{
	background-color:#777;
	color:#eee;
	font-family: 'Orbitron', sans-serif;
	font-size:large;
	box-sizing: border-box;
	
	background: url('images/gradient.png');
	background-repeat: no-repeat;
    background-position: center;
	background-size: cover;
}

.ScrollBox::-webkit-scrollbar, .LineItemSelect::-webkit-scrollbar-track
{
	background-color:#333;
}

.ScrollBox::-webkit-scrollbar-thumb
{
	background-color:#aaa;
	
	border:1px solid #ddd;
	border:1px solid #ddd;
	border-right:1px solid #444;
	border-bottom:1px solid #444;
}

/* iogames.space ad */
#IOG_CP
{
	position:fixed;
	bottom:0;
	left:0;
}

#privateMatchButton
{
  position:relative;
  float:left;
  margin-left:5px;
  
  width:2.3em;
  height:1.7em;
  
  background-image: url('images/OpenPrivateMatch.png');
	background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}

.BeveledButton
{
	box-shadow:inset 0px 1px 3px 0px #91b8b3;
	background-color:#eee;
	border-radius:5px;
	border:1px solid #566963;
}

#privateMatchPanel
{
  width:200px;
	height:250px;
  
  position:absolute;
  display:none;
  
  border:1px solid black;
  z-index:-1; /* To render behind the mainMenu */
  margin:0;
  font-size:125%;
  font-family: 'Orbitron', sans-serif;
}

.TabSet
{
  position:absolute;
  width:70%;
  height:1.2em;
  margin:0.5em auto;
  left:0;
  right:0;
  background-color:#1111aa;
}

.Tab
{
  color:#ccc;
  position: absolute;
  width:50%;
  height:100%;
  text-align:center;
}

.SelectedTab
{
  border-bottom:3px solid #dd0000;
  color:white;
}

.MatchSubPanel
{
  position:absolute;
  bottom:0;
  width:100%;
  height:8em;
  text-align:center;
  padding-bottom:0.5em;
}

.PrivateExplanation
{
  font-size:0.7em;
  padding:1em;
  font-family:Helvetica, Arial, sans-serif;
  text-align:left;
}

#hostMatchID
{
  font-weight:bold;
  font-size:150%;
  user-select:all;
}

#joinMatchID
{
  font-size:150%;
  font-family: 'Orbitron', sans-serif;
  text-align:center;
}

#laggedLogo
{
  position:fixed;
  width:241.5px;
  height:52px;
  bottom:0;
  
  padding-left:5px;
  padding-right:5px;
  
  border:1px solid black;
  border-top-left-radius:5px;
  border-top-right-radius:5px;
  
  left: 47.5%;
  margin-left:-100px;

  background-image: url('images/lagged_logo.png');
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
  background-color:#2a6490;
}

#laggedLogo span
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;

  z-index: 1;
}

/* The email signup panel */
/* and the success/failure panel after the user clicks subscribe */
#mc_embed_signup, #mce-responses
{
	position:fixed;
	bottom:0;
	left:50%;
	transform: translateX(-50%);
	
	height:3.3em;
	width:38em;
	
	background-color:#f6f6f6 !important;
	font: 400 0.9em Arial !important;
	color:#222;
	
	border:1px solid #333;
	border-bottom:0;
}

.BeveledSignup
{
	border-radius:6px 6px 0 0;
}

#mce-responses
{
	z-index:5;
	bottom:3.3em;
	border-radius:6px 6px 0 0;
}

/* The email entry box */
#mce-EMAIL
{
	margin-left:10px;
	margin-right:10px;
	padding: 6px 10px;
	border: 1px solid #d0d0d0;
	border-radius:4px;
	box-sizing:border-box;
	font: 400 1em Arial !important;
	width:12em;
}

/* The subscribe button */
#mc-embedded-subscribe
{
	background-color:green !important;
}

/* Should match the dimensions and position of mainMenu */
#unblocked
{
	position:absolute;
	right:0;
	top:0;
	
	width:30%;
	min-width:320px;
	overflow:hidden;
}

#soundIcon
{
	position:relative;
	float:left;
	width:2.3em;
	height:1.7em;
	margin-left:5px;
	
	background-repeat: no-repeat;
    background-position: center;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

.SoundOn
{
	background-image: url('images/soundOn.png');
}

.SoundOff
{
	background-image: url('images/soundOff.png');
}

#mixerUI
{
	position:absolute;
	left:0;
	top:0;
	
	flex-direction:row;
	display:flex;
}

.ChannelUI
{
	width:8em;
	height:15em;
	border-left:1px solid #666;
}

.ChannelName
{
	font-weight:bold;
	text-align:center;
}

.VolumeSlider
{
	width:2em;
	height:12.6em;
	margin-top:1em;
	margin-bottom:1em;
	-webkit-appearance: slider-vertical;
	transform: translateX(4em);
}

.GainDisplay
{
	text-align:center;
	user-select:text;
	border-top:1px solid #666;
}

.Slider::-webkit-slider-thumb
{
	-webkit-appearance: none;
	appearance: none;
	width: 1.7em;
	height: 1.7em;
	background: #0073af;
	cursor: pointer;
	border-radius:5px;
}

.Slider::-moz-range-thumb
{
	-webkit-appearance: none;
	appearance: none;
	width: 1.7em;
	height: 1.7em;
	background: #0073af;
	cursor: pointer;
	border-radius:5px;
}

/* Fix slider track (background) height in Firefox. Strangely, the color
   re-specification is necessary for this to work */
.Slider::-moz-range-track
{
	height:1.7em !important;
	background-color:#d3d3d3;
	border-radius:5px;
}

/* Remove dotted outline when user drags slider in Firefox */
.Slider::-moz-focus-outer
{
	border: 0;
}

.Slider
{
	position:relative;
	float:left;
	margin-left:5px;
	border-radius:5px;
	
	-webkit-appearance: none;
	appearance:none;

	background: #d3d3d3;
	outline: none;
	opacity: 0.7;
	-webkit-transition: .2s;
	transition: opacity .2s;
}

.Slider:hover
{
  opacity: 1;
}