*
{
  margin: 0;
	padding: 0;
}

body
{
	overflow: hidden;
	user-select: none;
}

/* unvisited link */
a:link
{
  color:#5555ee;
}

/* visited link */
a:visited
{
  color:#8227d3;
}

@font-face
{
	font-family:"Outrun";
	src: url('Outrun future.otf');
}

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

/* debug stuff*/
#fps
{
	position:absolute;
	left:50%;
	top:0;
  
  color:white;
  font-family: Helvetica, Arial, sans-serif;
	font-size:medium;
}
/*end debug stuff*/

#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:50%;
	top:50%;
	transform: translateX(-50%) translateY(-50%);
  z-index:-2;
}

#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;
}

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

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

#localHealthBar
{
	background-color:#af111c;
	background-image:url("images/HealthBar.jpg");
	background-size: 805px 20px;
	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 !important;
	
	background-color:#dd111c !important;
  border-right: 2px solid black;
}

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

.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;
}

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

.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;
}

#largeNotification
{
  font-family: Outrun, Impact, Charcoal, sans-serif;
	font-size:4.5em;
  line-height:110%;
  text-align:center;
  pointer-events:none;
  
  text-shadow:
    -1px -1px 0 #ddd,
    1px -1px 0  #ddd,
    -1px 1px 0  #ddd,
    1px 1px 0   #ddd;
    
  text-transform:uppercase;
}

#largeNotificationSubtitle
{
  font-family: Orbitron, Charcoal, sans-serif;
  font-size:300%;
  text-align:center;
  width:100%;
  
  color:#9AF0FF;
  text-shadow: 0 0 5px #9AF0FF, 0 0 10px #9AF0FF;
  
  padding-top:0.3em;
  
  color:#333;
}

#largeNotificationContainer
{
	color:#222;
	pointer-events:none;

	position:absolute;
	top:25%;
	left:0;
	width:100%; /* needed for text-align to work */
}

#modelScrollBox
{
  position:fixed;
  right:0;
  width:15em !important;
  opacity:0.7;
  overflow-y:auto;
}

.ButtonRow
{
  position:relative;
  margin-bottom:0.5em;
  height:36px;
}

#socialButtonRow
{
  max-width:250px;
  margin-left:auto;
  margin-right:auto;
}

#garageButtonRow
{
  font-family: Orbitron, Charcoal, sans-serif;
  height: 6.3vh;
  display:flex;
  width:80%;
  margin-left:10%;
}

.LinkSocialButton
{
  position:relative;
  height:36px;
  width:120px;
  line-height:1.4em;
  color:#eee;
  font-family: Helvetica, Arial, sans-serif;
	font-size:medium;
  text-align:right;
  text-shadow:none;
  cursor:pointer;
}

#GoogleSignOutButton
{
  /* Mimic the style of the sign-in button (g-signin2) */
  background-color:#fff;
  border-radius:1px;
  box-shadow:0 2px 4px 0 rgba(0,0,0,.25);
  color:#757575;
  text-align:center;
  
  position:absolute;
  left:0;
  top:0;
  font-family: Roboto,arial,sans-serif;
  font-size: 13px;
  line-height: 34px;
}

#facebookButton
{
  position:absolute;
  right:0;
  top:0;
  
  background-color:#4267B2;
  color:#eee;
}

#facebookSignInText
{
  line-height:36px;
}

.LinkSocialIcon
{
  position:absolute;
  height:1.2em;
  width:1.2em;
  left:0.5em;
  top:50%;
  margin-top:-0.6em;
  background-size:contain;
}

#facebookIcon
{
  background-image: url(images/Facebook.png);
}

#googleIcon
{
  background-image: url(images/GooglePlus.svg);
}

#xpWindow
{
  position:fixed;
  top:1em;
  left:1em;

  width:10em;
  height:2.5em;
}

.XPBarContainer
{
  position:relative;
  width:100%;
  height:1em;
  border:1px solid #222;
  background-color:rgba(100, 100, 200, 0.5);
  border-radius:3px;
  box-sizing: border-box;
}

#xpBar, #xpBarProvisional
{
  opacity:1;
  width:0;
}

#xpBar
{
  background-image:url("images/XPBar.jpg");
	background-size: 805px 20px;
  background-color:#600560;
  z-index:-1;
}

#xpBarProvisional
{
  background-color:green;
  z-index:-2;
}

#xpCallout
{
  position:absolute;
  top:0;
  left:105%;
  white-space: nowrap;
  
  font-weight:bold;
  font-family: Orbitron, Charcoal, sans-serif;
  
  text-shadow:
   -1px -1px 0 #aaa,  
    1px -1px 0 #aaa,
    -1px 1px 0 #aaa,
     1px 1px 0 #aaa;
  
  color:#600560;
  opacity:1;
}

#xpCallout.animate
{
  -webkit-transition: 2s;
  -moz-transition: 2s;
  -ms-transition: 2s;
  -o-transition: 2s;
  transition: 2s;
  margin-left: 40% !important;
  opacity:0.3;
}

#levelUpFanfare
{
  position:absolute;
  width:100%;
  bottom:2em;
  
  font-family: Orbitron, Charcoal, sans-serif;
  font-size:2em;
  text-align:center;
  color:#eee;
  
  pointer-events:none;
  opacity:0;
  
  text-shadow:
   -1px -1px 0 #0000ff,  
    1px -1px 0 #0000ff,
    -1px 1px 0 #0000ff,
     1px 1px 0 #0000ff;
}

#playerLevel
{
  position:relative;
  width:100%;
  
  font-weight:bold;
  font-family: Orbitron, Charcoal, sans-serif;
  text-align:center;
  
  text-shadow:
   -1px -1px 0 #222,  
    1px -1px 0 #222,
    -1px 1px 0 #222,
     1px 1px 0 #222;
  
  color:#eee;
}

#minimapContainer
{
	position:fixed;
	bottom:0;
	right:0;
	width:256px;
	height:256px;
	border:3px solid #c0c0c0;
	display:none;
}

.MinimapDot
{
	position:absolute;
	width:15px;
	height:15px;

	background-image: url('images/minimapDot.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;
}

.MinimapLocalPlayerDot
{
	background-image: url('images/minimapPlayerDot.png');
	width:20px;
	height:20px;
}

#tutorialLink
{
	font-size:medium;
}