/* General Screen Setup----------------------------------------------------*/
	
	@font-face {
		font-family: 'Orbitron';
		src: url('fonts/ORBITRON-MEDIUM.OTF')  format('opentype');
	}
	@font-face {
		font-family: 'Exo2';
		src: url('fonts/Exo2-Medium.otf')  format('opentype');
		font-weight: 500;
	}
	@font-face {
		font-family: 'Exo2';
		src: url('fonts/Exo2-Light.otf')  format('opentype');
		font-weight: 400;
	}
	@font-face {
		font-family: 'Exo2';
		src: url('fonts/Exo2-ExtraLight.otf')  format('opentype');
		font-weight: 300;
	}
	@font-face {
		font-family: 'Exo2';
		src: url('fonts/Exo2-Thin.otf')  format('opentype');
		font-weight: 200;
	}
	
	html{
		height: 100%;
		margin: 0;
		padding: 0px;
		overflow: hidden;
	}
	
	body{
		background: url('img/background-1.png')  no-repeat #333333;
		background-size: 100% 100%;
		color: #ffffff;
		margin: 0px;
		padding: 0px;
		font-family: 'Exo2';
		font-weight: 400;
		height: 100%;
	}

	
/* Backgrounds-----------------------------------------------------------*/

	#background-2{
		height: 100%;
		position: fixed;
		right: 20%;
		z-index: -2;
	}
	
	#background-3{
		height: 100%;
		position: fixed;
		right: 40%;
		z-index: -2;
	}
	
	#background-4{
		height: 100%;
		position: fixed;
		right: 5%;
		z-index: -2;
	}
	
	
/* Layout-----------------------------------------------------------*/	
	.row{
		z-index: 2;
		border: 0px solid #ff9900;
		display: flex;
		flex-direction: row;
	}

	
	
/* Text Elements-----------------------------------------------------------*/
	
	#title{
		font-size: 50px;
		font-family: 'Orbitron';
		position: absolute;
		top: 50px;
		left: 10%;
	}
	
	
/* Links-----------------------------------------------------------*/	 
	a{
		text-decoration: none;
	}
	
	
/* Buttons---------------------------------------------------------*/	
	
	
	/*Generic button for menus*/
	.menu-button{
		background-color: rgba(0,0,0,0.5);
		border: 1px solid #777777;
		color: #ffffff;
		font-size: 25px;
		padding: 0px;
		margin: 10px 0px;
	}
	
	.menu-button:hover{
		background-color: #ffffff;
		color: #333333;
		box-shadow: 2px 2px 5px 0px rgba(0,0,0,1.0);
	}
	
	.menu-button:active{
		background-color: #ffffff;
		color: #333333;
		box-shadow: 2px 2px 5px 0px rgba(0,0,0,1.0) inset;
	}
	
	
	/*icon for use in sub-menus*/
	.menu-icon{
		margin: 0px 5px 0px 0px;
		vertical-align: middle;
		height: 40px;
	}
	
	
	/*MAIN MENU=====*/
	#main-menu{
		margin-left: 20%;
		margin-right: 0%;
		margin-bottom: 100px;
		font-family: 'Orbitron';
		
	}
		/*Large Button for Main Menu*/
		#main-menu .menu-button{
			
			font-size: 80px;
			padding: 30px 10px;
			text-align: center;
			perspective: 600px;
		}
		
		
		
	/*Menu Buttons with boxed-out numbers with subtext, on the right*/
	.button-stats-stacked{
		font-family: 'Orbitron';
		display: inline-block;
		background-color: #555555;
		color: #000000;
		text-align: center;
		float: right;
		padding:  0px 10px;
		line-height: 25px;
	}	
		.button-stats-stacked span{
			display: block;
			font-size: 12px;
		}
	
	/*Menu buttons with boxed-out numbers only, no text, on the right*/
	.button-stats-unstacked{
		font-family: 'Orbitron';
		display: inline-block;
		text-align: center;
		float: right;
		padding:  0px 10px;
		line-height: 50px;
	}
	

	
	
	/*SUB-MENU=====*/
	#sub-menu{
		margin-left: 20%;
		margin-right: 0%;
	}
		
		/*Small button for menus below the main menu*/
		#sub-menu .menu-button{
			font-size: 30px;
			vertical-align: middle;
			height: 50px;
			line-height: 40px;
		}
		
		#sub-menu .menu-icon{
			margin-left: 5px;
			
		}
	

	/*LOADOUT=====*/	
	#loadout-menu{
		margin-left: 20%;
		margin-right: 0%;
		margin-bottom: 100px;
		font-family: 'Orbitron';
	}
	.loadout-button{
		margin: 10px 0px;
		font-size: 50px;
		padding: 30px 10px;
		text-align: center;
		height: 150px;
	}
		.loadout-button-secondary{
			font-size: 25px;
			text-align: center;
			display: inline-block;
			width: 49%;
			height: 150px;
			line-height: 100px;
		}

		
	/*Xbox controller button representation*/
	.pad-button{
		width:30px;
		height: 30px;
		display: inline-block;
		margin: 0px 10px;
		border-radius: 50px;
		background-color: #ffffff;
		color: #333333;
		font-size: 20px;
		text-align: center;
		line-height: 25px;
		vertical-align: middle;
	}
	
	.pad-button:hover{
		background-color: rgba(0,0,0,1.0);
		color: #ffffff;
	}
	
	/*Information panel button e.g. Player profile containing Name, icon and controller button icon*/
	.panel-button{
		background-color: rgba(0,0,0,1.0);
		font-size: 20px;
		padding: 0px 25px 0px 0px;
		display: inline-block;
		margin-right: 50px;
		position:relative;
	}
		.panel-button .icon{
			margin: 0px 5px 0px 0px;
			vertical-align: middle;
			height: 50px;
		}
		.panel-button .pad-button{
			position: absolute;
			right: -25px;
			top: 10px;
				
		}
	
	
	/*SKILL PANEL=====*/
	#skill-icons{
		float: right;
	}
	
		#skill-icons .icon{
			width: 60px;
			height: 60px;
			display: block;
			margin: 3px 0px;
			margin-right: 10px;
		}
	
	
	/*Bottom Row Left - controller button guide*/
	#button-panel-1{
		margin-left: 10%;
	}
		
	/*Bottom Row Right - player profile, friends status*/
	#button-panel-2{
		float:right;
		margin-right: 50px;
		
	}
	
	
	/*PLAYER-DATA===== Info on a player,either self or other*/
	#player-data{
		height: 100%;
	}
	
		#player-data h1{
			font-family: 'Orbitron';
		}
		
		#player-data .panel{
			background-color: rgba(0,0,0,0.5);
			margin: 5px;
			position: relative;
		}
		#player-data .small{
			width: 30%;
			height: 30%;
			display: inline-block;
		}
		#player-data .simulator-stats{
			width: 94%;
			height: 55%;
			display: block;
		}
		
		#player-data .simulator-stats h1{
			font-family: 'Orbitron';
			background-color: rgba(0,0,0,0.5);
			padding: 5px 10px;
			font-size: 20px;
			text-align: left;
		}
		
		#player-data .simulator-stats .simulator-stats-content{
			margin-top: 50px;
			color: #444;
			font-size: 50px;
			text-align: center;
			
		}
		
		#player-data .panel .title-top{
			vertical-align: top;
			text-decoration: underline;
			color: #999999;
			text-align: center;
		}
		
		#player-data .panel .title-bottom{
			vertical-align: bottom;
			color: #999999;
			text-align: center;
		}
		
		.badge{
			width: 180px; 
			height: 180px; 
			margin: 20px auto; 
			background-color: #555555; 
			border-radius: 200px; 
			border: 1px solid #111111;
			text-align: center;
		}
			.badge-inner{
				width: 160px; 
				height: 160px; 
				margin: 10px auto; 
				background-color: #111111; 
				border-radius: 200px;
			}
			
			.badge .upper{
				height: 50%; 
				border-bottom: 1px solid #333333
			}
			
			.badge .lower{
				height: 50%; 
				font-size: 40px; 
				font-family: 'Orbitron'
			}
		
		#clan .badge{
			background-color: rgba(0,0,0,0) !important;
			border: 0px;
		}
		
		#clan .badge-inner{
			background-color: rgba(0,0,0,0) !important;
			padding-top:30px;
		}
		
		#clan h3{
			text-decoration: underline;
		}
		
		
	/*LOBBY=====*/
	#lobby-list{
		
	}
	
		#lobby-list .team{	
			margin-bottom: 10px;
		}
		
			#lobby-list .team  table{
				border-collapse: separate;
				border-spacing: 0 5px;
			}
		
		#lobby-list  th{
			font-size: 175%;
			text-align: left;
			padding-top: 10px;
			font-family: 'Orbitron';
		}
		
			#lobby-list  th img{
				width: 50px;
				height: 50px;
				margin: 5px;
			}
		
		#team-1 th{
			background-color: #601C6F;
			
		}
		
		#team-2 th{
			background-color: #C89F30;
		}
		
		#lobby-list  tr{
			background-color: rgba(0,0,0,0.5);
		}
			#lobby-list  tr:hover{
			background-color: rgba(255,255,255,1.0);
			color: #333333;
		}
		
		#lobby-list  td{
			font-size: 125%;
			text-align: left;border: 1px 0px 1px 0px solid #333333;
		}
	/*LEADERBOARD=====*/
	
	.leaderboard-tabs{
		margin: 10%;
	}
		.leaderboard-tabs ul{
			font-size: 45px;
			font-family: 'Orbitron';
			display: inline-block;
			margin-left: -25px;
		}

		
			.leaderboard-tabs ul li{
				margin-left: 20px; 
				color: #999999;
				margin-right: 20px; 
				display: inline-block;
			}
			
			
			.leaderboard-tabs .selected{
				text-decoration: underline;
				color: #ffffff;
			}
			
			.leaderboard-tabs ul li:active{
				text-decoration: underline;
				color: #ffffff;
			}
			
			.leaderboard-tabs ul li:hover{
				text-decoration: underline;
				color: #ffffff;
			}
		
		.leaderboard-tabs img:hover{
				
		}
		
		
	.leaderboard-table{
		margin: 20px;
	}
		.leaderboard-table table{
			border-collapse: separate;
			border-spacing: 0 20px;
			
		}	
			.leaderboard-table table img{
					height: 50px;
					width: 50px;
					
			}	
			.leaderboard-table  table tr{
				background-color: rgba(0,0,0,0.5);
				border-left: 4px solid rgba(80,255,80,1.0);
			}
				.leaderboard-table table tr:hover{
				background-color: rgba(255,255,255,1.0);
				color: #333333;
			}
			
			.leaderboard-table  table td{
				font-size: 30px;
				padding: 5px;
				text-align: left;
				border: 1px 0px 1px 0px solid #333333;
			}
	
	/*PROFILE CHARACTER=============*/
	#profile-character{
		margin-top: -100px;
		
		
	}
	#profile-character img{
		max-width:100%;
		max-height:100%;
	}