.modal {
	width : 480px;
	background-color : rgba( 0, 0, 0, 0.35 );
	position : absolute;
	top : 50%;
	left : 50%;
	transform : translate( -50%, -60% );
	color : #FFF;
	text-align : center;
	font-family : Verdana;
	font-weight : bold;
	user-select : none;
	border : 5px solid #1F1F1F;
}
.usernameInput {
	width : 404px;
	height : 50px;
	background-color : rgba( 255, 255, 255, 0.1 );
	color : #FFF;
	text-align : center;
	font-weight : bold;
	font-size : 25px;
	outline : none;
	border : none;
	opacity : 0.75;
	/*transition-duration : 0.1s;*/
}
.usernameInput:focus {
	opacity : 1.0;
}
/* Friends-panel header search field. The box itself is styled inline in ui.js
   (its geometry is authored in UI units and scaled by domElement's transform, so
   it has to be written where those units are known) -- ::placeholder and :focus
   cannot be set inline, so they live here. Secondary text on this panel is the
   same colour at lower opacity, never a different grey. */
.friendSearchInput::placeholder {
	color : #EEE;
	opacity : 0.38;
}
.friendSearchInput:focus {
	background-color : rgba( 255, 255, 255, 0.11 );
}
/* Home-screen party chat input — box styled inline in ui.js (in-game chatBox
   geometry). The [Party] prefix div is #EEE at the SAME 0.38 opacity as this
   placeholder — keep them in lockstep. No :focus override on purpose. */
.partyChatInput::placeholder {
	color : #EEE;
	opacity : 0.38;
}
.button {
	width : 100%;
	/*border : 2px solid #FFF;*/
	vertical-align : middle;
	color : #FFF;
	font-weight : bold;
	font-size : 17px;
	padding-top : 9px;
	padding-bottom : 12px;
	margin-left : 20px;
	margin-right : 20px;
	transform : translate( -20px, 0px );
	transition-duration : 0.1s;
	cursor : pointer;
	user-select : none;
}

.cancel {
	background-color : rgba( 221, 51, 51, 0.7 );
	border : 2px solid rgba( 255, 255, 255, 0.3 );
}
.cancel:hover {
	background-color : rgba( 221, 51, 51, 1 );
	border : 2px solid rgba( 255, 255, 255, 0.7 );
}
.cancel:active {
	transform : translate( -20px, 0px ) scale( 0.94, 0.94 );
}

.create {
	background-color : rgba( 50, 140, 220, 0.7 );
	border : 2px solid rgba( 255, 255, 255, 0.3 );
}
.create:hover {
	background-color : rgba( 50, 140, 220, 1 );
	border : 2px solid rgba( 255, 255, 255, 0.7 );
}
.create:active {
	transform : translate( -20px, 0px ) scale( 0.94, 0.94 );
}

.button2 {
	width : 100%;
	border : 2px solid #FFF;
	vertical-align : middle;
	color : #FFF;
	font-weight : bold;
	font-size : 23px;
	padding-top : 7px;
	padding-bottom : 10px;
	margin-left : 60px;
	margin-right : 20px;
	transform : translate( -60px, 0px );
	transition-duration : 0.1s;
	cursor : pointer;
	user-select : none;
}

.cancel2 {
	background-color : rgba( 221, 51, 51, 0.7 );
	border : 2px solid rgba( 255, 255, 255, 0.3 );
}
.cancel2:hover {
	background-color : rgba( 221, 51, 51, 1 );
	border : 2px solid rgba( 255, 255, 255, 0.7 );
}
.cancel2:active {
	transform : translate( -60px, 0px ) scale( 0.94, 0.94 );
}

.create2 {
	background-color : rgba( 50, 140, 220, 0.7 );
	border : 2px solid rgba( 255, 255, 255, 0.3 );
}
.create2:hover {
	background-color : rgba( 50, 140, 220, 1 );
	border : 2px solid rgba( 255, 255, 255, 0.7 );
}
.create2:active {
	transform : translate( -60px, 0px ) scale( 0.94, 0.94 );
}

.tos {
	text-decoration : none;
	color : #AAF;
	opacity : 0.8;
}
.tos:hover {
	opacity : 1;
}

.overlay {
	position : absolute;
	width : 100%;
	height : 100%;
	z-index : 999;
	background-color : #000;
	opacity : 0.8;
}