/* XFighters.css */

/* Prevent the Chrome blue outline on textboxes */
textarea:focus, input:focus { outline: none; }
.btn-actionbtns .keyboard-key { top: -11px; }
.miniHeader {
	text-align: center;
	font-family: "MMX";
	margin-bottom: 15px;
}
.modal-content, .modal input, .modal select {
	background: #32353a;
}
.whiteMsgBtn {
	background: white;
	color: #333 !important;
}
.changeCharacterContainer, .gamepadDeviceChanger {
	margin: 10px auto;
	text-align: center; 
	font-family: MMX;
}
.characterChoice {
	background-size: 100% 100%;
	/* Original picture width is 64, but doing 1.5x to fit name */
	width: 96px;
	height: 96px;
	color: white !important;
	text-shadow: 1px 1px 2px black;
}
.characterChoice:hover {
	box-shadow: inset 0px 1px 7px 2px black, 0px 1px 7px 2px black; /* both inset and outset */
}
.characterChoice.active {
	box-shadow: inset 0px 1px 7px 2px white, 0px 1px 7px 2px white; /* both inset and outset */
}
.gamepadDeviceChanger .btn-group {
	float: none;
}
.keyboard-key:not(.dark) {
	color: black;
}
/* Attach to items just above #phaser-div to place them over the game div */
.gameOverlayClass {
	position: absolute;
	display: none;
	left: 0;
	right: 0;
	text-align: center;

	-webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
																	supported by Chrome and Opera */

	font-family: "MMX";
}
.selectAllOnClick, .friendLobbyUrl {
	-webkit-touch-callout: all; /* iOS Safari */
    -webkit-user-select: all; /* Safari */
     -khtml-user-select: all; /* Konqueror HTML */
       -moz-user-select: all; /* Firefox */
        -ms-user-select: all; /* Internet Explorer/Edge */
            user-select: all; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
.friendLobbyUrl {
	font-size: 11px;
	padding: 10px 0px 0px 0px;
	display: block;
	text-align: center;
}
.inLobbyMenu .menuItem {
	text-align: center;
}
.topOverlayBanner {
	position: fixed; /* Ensures the banner not hidden on edit mode */
	top: 100px;
	z-index: 100;
	display: block; /* we aren't hiding with display; we're changing transform to hide */

	/* purely for animation */
	overflow: hidden;
  transition: transform 0.3s ease-out; /* transition transform, not height */
  height: auto;
  transform: scaleY(1); /* implicit, but good to specify explicitly */
  /* transform-origin:top; keep the top of the element in the same place. this is optional. */
} 
.topOverlayBanner.squished { transform: scaleY(0); }
.topOverlayBanner a {
	color: #337ab7;
}
.topOverlayBanner .alert {
	cursor: hand;
	cursor: pointer;
	font-family: "MMX";
	/* centering */
	display: block;
	max-width: 50%;
	margin: auto;
}

@font-face {
	font-family: 'MMX';
	src: url('/x/fonts/mmxfont.ttf');
}
.ellipsize {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}
.levelName, .site-branding h1, .levelInfo h2, h2, h4 {
	font-family: "MMX";
}
.userPauseMenu { background: rgba(0, 0, 0, .8); }
.exploreLevelsMenu, .createLobbyMenu, .viewLobbiesMenu, .searchLevelsMenu {
	background: rgba(0, 0, 0, 0.87);
}
.inLobbyMenu { background: rgba(47, 43, 43, 0.6); }
.levelSearchResults {
	height: 67%; /* to enable scroll, need exact height... ugh */
	overflow-y: scroll;
	padding: 10px;
}
.gameOverlayClass input:not([type="button"]) {
	background: #32353a;
	border: 0;
	padding: 4px 13px;
}
.lobbyListings {
	margin-top: 5%;
	height: 69%;
	overflow-y: scroll;
}
.searchLevelsMenu, .lobbyListings {
	font-family: "MMX";
	font-size: 15px;
}
.phaserGameDimensions {
	margin: auto;
}
.menuItem {
	font-family: "MMX";
	font-size: 20px;
	cursor: hand;
	cursor: pointer;
	text-align: left;
	display: table; /* WEIRD but ensures items don't expand the entire screen width */
	position: relative; /* so that left/top can be with relation to center-top of game window */
}
.outlinedLetters {
	/* Really cool effect of making letters outlined! */
	text-shadow:
	  0.05em 0 white, 0 0.05em white, -0.05em 0 white,
		0 -0.05em white, -0.05em -0.05em white, -0.05em 0.05em white,
	  0.05em -0.05em white, 0.05em 0.05em white;
	color: #000;
}
.optionGroup {
	border-top: 1px #424242 solid;
	margin: auto;
	padding: 15px;
}
.optionGroup.firstEl/*.optionGroup:first-of-type DOESN'T ACTUALLY WORK*/ {
	border-top: 0px #424242 solid;
}
.optionGroup .optionItem {
	font-family: "MMX";
	font-size: 18px; /* change to 20 if Level Conquest ever fits on one line */
	padding: 0px;
	cursor: hand;
	cursor: pointer;
}
.optionItem { color: #777; }
.optionItem:hover { color: #eee; }
.optionItem.active {
	color: white;
	text-shadow: 1px 1px 1px #868686;
}
.menuItem:not(.outlinedLetters):hover {
	color: #eee;
	text-shadow: 1px 1px 1px #868686;
}
.reactionBtn:hover:not(.active) {
	color: #eee;
	text-shadow: 1px 1px 1px #868686;
}
.likeBtn.active { color: #53bf53; }
.dislikeBtn.active { color: red; }
.favoriteBtn.active { color: gold; }
.reactionBtn {
	font-size: 20px;
	cursor: hand;
	cursor: pointer;
}
/* TabbedPane CSS for X Fighters ReactTabbedPanes */ 
.xf-tabbedpane {
	font-family: "MMX";
	margin-top: 15px;
}
.xf-tabbedpane .nav > li a {
	border: 0px !important; /* border is placed on li */
}
.xf-tabbedpane .nav > li {
	/*border: 1px transparent solid; keeping prevents jitter, but 1px on sides get dropped */
	border-bottom: 1px solid #ddd;
	border-radius: 4px 4px 0 0;
	cursor: hand; cursor: pointer; /* POSSIBLY not necessary */
}
.xf-tabbedpane .nav > li.active {
	border: 1px #ddd solid;
	border-bottom: 1px transparent solid;
}
.xf-tabbedpane .nav li > a,
.xf-tabbedpane .nav li > a:hover,
.xf-tabbedpane .nav li > a:focus {
	font-size: 10px;
	background: transparent;
	color: #b7bcbe;
}
.xf-tabbedpane .nav li > a:hover { color: #eee; }
.xf-tabbedpane .nav li.active > a { color: #eee; }
.levelListItem {
	text-align: left;
	margin: 0;
}
.lobbyListItem {
	margin: 0;
}
.dropdown, .dropdown > a, .dropdown > a.dropdown-toggle {
	cursor: hand !important;
	cursor: pointer !important;
}
.xf-tabbedpane .nav-tabs { border-bottom: 0px transparent solid; }
.xf-tabbedpane .dropdown-menu { background: black; }
.xf-tabbedpane .nav .dropdown-menu li a { padding: 10px; }
.xf-tabbedpane .nav .dropdown-menu li.active { background: #333; }

.levelListItem .dropdown-menu li > a { color: #b7bcbe; }
.levelListItem .dropdown-menu li > a:hover { color: black; }
.levelListItem .dropdown-menu li > a.disabled { color: #686b6d; }
.levelListItem .dropdown-menu li > a.disabled:hover { background: inherit; color: #686b6d; }
/*.levelListItem .dropdown-menu li { cursor: none !important; } Maybe okay, cursor hard to see */

/* Place on the left side and dynamically set width on window resize */
.levelEditorControls {
	position: absolute;
	min-width: 50px;
	padding: 0px 10px;
}
.editorTile {
	cursor: hand; cursor: pointer;
}
.editorTile.active {
	box-shadow: inset 0px 1px 7px 2px white, 0px 1px 7px 2px white;
}