/*
This file contains all fonts and color styles in ParaTracker that
are not contained in the skin files. The Dynamic Tracker page, RCon
page and Param page styles are here.
Edit it however you see fit.

If you are looking for the tracker configuration,
you will find it in ParaConfig.php
*/



/*
PARATRACKER DYNAMIC SETUP PAGE CLASSES
PARATRACKER DYNAMIC SETUP PAGE CLASSES
*/

/* This class configures the iframe for analytics */
.analyticsFrame
{
width: 95vw;
min-width: 1050px;
min-height: 200px;
border-radius: 10px;
border: 1px solid #999;
box-shadow: 0px 0px 20px #999, inset 0px 0px 10px #999;
display: flex;
flex: 1 1 auto;
flex-direction: column;
}

/* This class configures the iframe for the log viewer */
.logViewerDiv
{
width: 95vw;
display: flex;
flex: 1 1 auto;
flex-direction: column;
}

/* This class configures the iframe for admin info */
.adminInfoFrame
{
width: 95vw;
min-width: 1000px;
min-height: 200px;
border-radius: 10px;
border: 1px solid #999;
box-shadow: 0px 0px 20px #999, inset 0px 0px 10px #999;
display: flex;
flex: 1 1 auto;
flex-direction: column;
}

/* This class configures the iframe for the log viewer */
.logViewerFrame
{
min-width: 1000px;
min-height: 200px;
border-radius: 10px;
border: 1px solid #999;
box-shadow: 0px 0px 20px #999, inset 0px 0px 10px #999;
flex: 1 1 auto;
flex-direction: column;
}

/* This class configures the log viewer */
.logViewerPage
{
font-family: monospace;
background-color: #222;
color: #EEE;
font-size: 10pt;
}

/* This class is for the log viewer's path table */
.logPathTable
{
width: 800px;
margin: 0 auto;
}

/* This class is for the first cell in the log viewer's path table */
.logViewerPathTable
{
width: 75%;
padding: 5px;
color: #EEE;
font-size: 12pt;
}

/* This class is for the log viewer's path table */
.logViewerPathTable:hover
{
background-color: #504911;
}

/* This class is for the log viewer's line numbers */
.logViewerNumber
{
user-select: none;
background-color: #228;
padding: 5px;
color: #EEE;
font-size: 11pt;
font-weight: bold;
text-align: right;
}

/* This class is for the log viewer's text */
.logViewerText
{
width: 100%;
padding: 5px;
color: #EEE;
font-size: 10pt;
}

/* This class is for the hover effect on the log viewer's text */
.logViewerText:hover
{
background-color: #504911;
}

/* This class is used for the title at the top of the log viewer */
.logTitle
{
text-align: center;
}

/* This class is used for the total number of lines in the log, just below the file name */
.logSize
{
text-align: center;
}

/* The following classes are used for links in the log viewer */
.logLink
{
color: #BBE;
font-size: 12pt;
}

.logLink:hover
{
color: #E44;
}

/* The following classes are used for file sizes */
.bytes {
	color: #AFA;
}

.kilobytes {
	color: #FD8;
}

.megabytes {
	color: #FAA;
}

/* This class is for the admin info page */
.adminInfo
{
font-family: monospace;
font-size: 12pt;
}

/* This class controls the hover text for the test message link */
.testMessage:hover
{
color: #39D;
}

/* This class controls the text for the test message link */
.testMessage
{
color: #28C;
}

/* This class is the text color when the test message successfully sent */
.messageSuccess
{
color: #0C0;
}

/* This class is the text color when the test message failed to send */
.messageFailed
{
color: #C00;
}

/* This class is for the server list on the admin info page */
.serverListHeading
{
margin-bottom:0px;
padding-bottom:0px;
color:#CCEEEE;
font-size:16pt;
font-weight: bold;
}


/* This class sets the width of the page */
.dynamicPageWidth
{
min-width: 1050px;
display: inline-block;
}

/* This class aligns the text to the center of the page */
.dynamicPageContainer
{
width: 100%;
text-align: center;
}

/* This class is used for the page formatting in ParaTrackerDynamic.php */
.dynamicConfigPage
{
margin: 0;
text-align: center;
background-color: #111111;
display: flex;
flex-direction: column;
left: 0px;
right: 0px;
top: 0px;
width: 100%;
height: 100vh;
align-items: center;
}

/* This class is used for the top row of the utilities page */
.utilitiesTopRow
{

}

/* This class is used for the button row on the utilities page */
.utilitiesButtonRow
{

}

/* This class is used for the bottom row of the utilities page */
.utilitiesBottomRow
{
display: flex;
flex: 1 1 auto;
flex-direction: column;
}

/* This class is used for the expanding iframes on the utilities page */
.utilitiesIframe
{
display: flex;
width: 95vw;
}

/* This class is used for the page formatting in ParaTrackerDynamic.php */
.dynamicConfigPageStyle
{
text-align: center;
font-size: 11pt;
font-family: monospace;
color: #EEEEEE;
}

/* This class is used for the utilities page formatting in ParaTrackerDynamic.php */
.utilitiesPageStyle
{
font-size: 12pt;
font-family: monospace;
color: #FFE;
background: linear-gradient(to right, #300, #211, #300, #211, #300, #211, #300, #211, #300, #211, #300, #211, #300);
}

/* This class sets up the toplayerfade element for the mapreq message in case of missing levelshots */
.mapreqTextPlacement
{
text-align: center;
}

.mapReqFrame
{
margin: 0 auto;
width: 1050px;
min-height: 200px;
display: flex;
flex: 1 1 auto;
border: none;
border-top: 2px solid #F40;
border-bottom: 2px solid #F40;
}

/* This class is used for the levelshot request page */
.mapReqPageStyle {
min-width: 1000px;
min-height: 200px;
border-radius: 10px;

display: flex;
flex: 1 1 auto;
flex-direction: column;
   justify-content: center;
   align-items: center;
   margin: 0px;
   font-size: 12pt;
   font-family: monospace;
   color: #EEEEEE;
}

/* This class is used for the levelshot request page */
.mapreqDiv
{
display: flex;
flex: 1 1 auto;
flex-direction: column;
}

/* This class is for the buttons on ParaTrackerDynamic.php */
.dynamicFormButtonsStyle
{
margin: 10px;
background-color: #292929;
cursor: pointer;
color: #EEEEEE;
font-family: inherit;
font-size: 12pt;
border: 1px solid #369;
user-select: none;
text-shadow: -1px 1px #000000;
}

/* This class is for the buttons on ParaTrackerDynamic.php */
.dynamicFormButtonsStyle:hover
{
color: #F63;
background: linear-gradient(to bottom, #990, #DD0, #990);
text-shadow: -1px 1px #000000;
border: 1px solid #900;
}

/* This class is for the buttons on ParaTrackerDynamic.php */
.activeButton
{
background-color: #295656;
font-weight: bold;
text-shadow: -2px 2px #000000;
}

/* This class is used to center the list of supported games on ParaTrackerDynamic.php */
.centerTable
{
margin-left: auto;
margin-right: auto;
text-align: center;
width: 80%;
}

/* This class is for the buttons on ParaTrackerDynamic.php */
.dynamicFormButtons
{
padding: 10px 10px;
cursor: pointer;
}

/* This class is used for the subscripts underneath the Color input boxes on the dynamic setup page */
.smallText
{
font-size: 8pt;
}

/* This class makes the focus on a text field much more obvious */
input:focus, select:focus, textarea.focus
{
box-shadow: 0px 0px 20px #44F, inset 0px 0px 10px #44F;
}

/* This class is used to put a border around the color selections */
.colorSelections
{
margin: 0 auto;
margin-top: 30px;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 0px 0px 20px #44F, inset 0px 0px 10px #44F;
border: 2px solid #44F;
width: 600px;
}

/* This class is used for the border on the levelshot setup div  */
.levelshotBorder
{
margin: 0 auto;
margin-top: 30px;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 0px 0px 20px #499, inset 0px 0px 10px #499;
border: 2px solid #499;
width: 500px;
}

/* This class is used to put a border around the Bit Value Calculator */
.bitValueCalculator
{
margin: 0 auto;
text-align: center;
box-shadow: 0px 0px 20px #FF4, inset 0px 0px 10px #FF4;
border: 2px solid #FF4;
width: 600px;
}

/* This class is used for the test frame on ParaTrackerDynamic.php */
.paraTrackerTestFrame
{
background-color: #FFFFFF;
width: 1050px;
margin: 0 auto;
text-align: center;
}

/* This class is used for the background gradient on the dynamic setup page */
.paraTrackerTestFrameGradient
{
background-size: 150%;
background: linear-gradient(to right, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333);
animation: paraTrackerTestFrameGradientAnimation 5s linear infinite;
}

/* This class animates the background gradient */
@keyframes paraTrackerTestFrameGradientAnimation
{
    0% {background-position: 0px 0px;}
    100% {background-position: -175px 0px;}
}

/* These two animations are used for switching between the utilities page and the setup page */
@keyframes openPage
{
    0% {opacity: 0;}
    100% {opacity: 1;}
}
@keyframes closePage
{
    0% {opacity: 1;}
    100% {opacity: 0;}
}

/* This class is used for the background gradient on the dynamic setup page */
.paraTrackerTestFrameTexture
{
background-image: url("../images/tracker/backgroundTest.jpg");
animation: paraTrackerTestFrameTextureAnimation 20s linear infinite;
}

.paraTrackerTestFrameTexturePreload
{
background-image: url("../images/tracker/backgroundTest.jpg");
display: none;
}

/* This class animates the background gradient */
@keyframes paraTrackerTestFrameTextureAnimation
{
    0% {background-position: 0px 0px;}
    100% {background-position: -1024px 256px;}
}

/* This class makes the test frame and color selections visible on ParaTrackerDynamic.php */
.expandedFrame
{
}

/* This class hides the test frame and color selections on ParaTrackerDynamic.php */
.collapsedFrame
{
display: none;
}

.skinDownloadLink
{
color: #BBE;
}

.skinDownloadLink:hover
{
color: #E44;
}

.customSkinSelections
{
margin: 0 auto;
margin-top: 30px;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 0px 0px 20px #4F4, inset 0px 0px 10px #4F4;
border: 2px solid #4F4;
width: 600px;
}

.transitionListSelections
{
margin: 0 auto;
margin-top: 30px;
margin-bottom: 10px;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 0px 0px 20px #F92, inset 0px 0px 10px #F92;
border: 2px solid #F92;
width: 450px;
}

.levelshotSample
{
margin: 0 auto;
font-size: 14pt;
font-weight: bold;
color: #000;
font-family: monospace;
text-align: center;
border: 1px solid #000;
position: relative;
width: 100px;
height: 76px;
overflow: hidden;
user-select: none;
}

.transitionButtonContainer
{
font-size: 10pt;
margin-top: 20px;
margin-bottom: 20px;
width:200px;
display:inline-block;
}

.transitionSampleContainer
{
font-size: 10pt;
margin-top: 20px;
margin-bottom: 20px;
width:140px;
display:inline-block;
}

.sampleOne
{
animation-duration: 2s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
margin: 0 auto;
background-color: #00F;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
position: absolute;
width: 100px;
height: 76px;
background: linear-gradient(45deg, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333, #FFFF33, #33FF33, #33FFFF, #3333FF, #FF33FF, #FF3333);}

.sampleTwo
{
/* Looks better without this. */
overflow: hidden;
background-color: #F00;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
position: absolute;
width: 100px;
height: 76px;
background-image: url("../images/tracker/backgroundTest.jpg");
background-size: 75%;
/* */
}

.skinDownloadSelections
{
margin: 0 auto;
margin-top: 30px;
text-align: center;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 0px 0px 20px #F22, inset 0px 0px 10px #F22;
border: 2px solid #F22;
width: 400px;
background-size: 100%;
}


/* The following values are used for colorizing the list of supported games. */
.gameColor0
/* Black (Gray is used for readability)
Default is #6F6F6F */
{
color: #6F6F6F;
font-weight: bold;
}

.gameColor1
/* Red
Default is #FF0000 */
{
color: #FF0000;
font-weight: bold;
}

.gameColor2
/* Green
Default is #00FF00 */
{
color: #00FF00;
font-weight: bold;
}

.gameColor3
/* Yellow
Default is #FFFF00 */
{
color: #FFFF00;
font-weight: bold;
}

.gameColor4
/* Blue
Default is #2222FF */
{
color: #2222FF;
font-weight: bold;
}

.gameColor5
/* Cyan
Default is #00FFFF */
{
color: #00FFFF;
font-weight: bold;
}

.gameColor6
/* Pink/Purple
Default is #FF00FF */
{
color: #FF00FF;
font-weight: bold;
}

.gameColor7
/* White
Default is #FFFFFF */
{
color: #FFFFFF;
font-weight: bold;
}

.gameColor8
/* Orange
Default is #FF4400 */
{
color: #FF4400;
font-weight: bold;
}

.gameColor9
/* Gray
Default is #8A8A8A */
{
color: #8A8A8A;
font-weight: bold;
}


/*
BITVALUE CALCULATOR CLASSES
BITVALUE CALCULATOR CLASSES
*/


#bitflags_top {
 	width: 940px;
	height: 640px;
	display: flex;
	flex-direction: column;
	color: #CCC;
	margin-bottom: 20px;
}

#bitflags_tabdisplay {
	flex: 0 0 auto;
	display: flex;
	flex-direction: row;
	padding: 2px 4px 0px 4px;
	font-size: 12px;
	background: linear-gradient(#000, #000, #333);
}

#bitflags_bitselect {
	flex: 0 0 auto;
	height: 32px;
	font-size: 14pt;
	font-weight: bold;
	background-color: #533;
	border: 2px solid #666;
	border-left: none;
	border-right: none;
	padding-right: 7px;
	padding-left: 7px;
	outline: none;
	color: inherit;
	cursor: pointer;
	color: #FFF;
	text-shadow: -1px 1px #000000;
}

#bitflags_bitselect:hover {
    background-color: #983;
}

.bitselect_background {
    background-color: #333;
}

#bitflags_tabregion {
	flex: 1 1 auto;
	background-color: #282828;
	display: flex;
	flex-direction: column;
}

.game_tab {
	flex: 0 1 auto;
	margin: 2px 2px 0px 2px;
/*	overflow: hidden;	*/
	padding-left: 1px;
	padding-right: 1px;
	padding-top: 4px;
	padding-bottom: 4px;
	line-height: 11pt;
	vertical-align: middle;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	color: #FFF;
    font-weight: bold;
	text-shadow: -1px 1px #000000;
	font-size: 8pt;
	user-select: none;
	cursor: pointer;
	opacity: .75;
}

.game_tab:hover {
	opacity: 1;
    background: none;
	background: linear-gradient(to right, #A90, #DD0, #A90);
}

.game_tab_selected {
	opacity: 1;
    color: #FFF;
	font-size: 9pt;
}

.game_tab_selected:hover {
	opacity: 1;
}

.bitflags_container {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	overflow: auto;
}

.bitflags_container_top {
	flex: 1 1 auto;
	height: 0px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	padding: 4px;
	background: linear-gradient(to right, #2C2C2C, #272727);
}

.bitflags_container_bottom {
	flex: 0 0 auto;
	height: 70px;
	align-items: center;
	justify-content: center;
	background: linear-gradient(#262626, #161616, #060606, #000, #444);
}

.bitflags_container_flagcont {
	display: flex;
	flex-direction: row;
	height: 20px;
	background-color: #111;
	padding: 4px;
	margin: 4px;
	font-size: 12px;
	align-items: center;
	cursor: pointer;
	color: #FFF;
	text-shadow: -1px 1px #000000;
}

.bitflags_container_flagcont:hover {
	background-color: #1C1C1C;
	background: linear-gradient(to right, #650, #980);
}

.bitflags_container_flagcont_selected {
	background-color: #333;
	background: linear-gradient(to right, #404040, #555);
}

.bitflags_container_flagcont_selected:hover {
	background-color: #383838;
}

.bitflags_container_flag {
	flex: 1 1 auto;
}

.bitflags_container_cb {
	flex: 0 0 auto;
	border: 2px solid #666;
	outline: none;
	cursor: pointer;
}

.bitflags_container_bitvalue {
	height: 24px;
	width: 160px;
	background-color: #111;
	border: 2px solid #333;
	outline: none;
	color: inherit;
	text-align: center;
	font-size: 12pt;
	font-weight: bold;
	margin-left: 30px;
	margin-right: 30px;
}

.leftContainer
{
    width: 35%;
    display: inline-block;
}

.rightContainer
{
    text-align: right;
    display: inline-block;
    width: 35%;
}

.bitflags_container_bitvalue_label {
    width: 100%;
    height: 30px;
    line-height: 30px;
	color: #CCC;
	font-weight: bold;
	cursor: pointer;
	font-size: 14pt;
}

.bottomContainer
{
    text-align: center;
    width: 100%;
    user-select: none;
}

.bitflags_container_bitvalue_label:hover {
	color: #FFF;
	font-weight: bold;
	font-size: 15pt;
}

.game_jediacademy
{
	background: linear-gradient(to right, #063, #6F9, #063);
	border: 1px solid #080;
	border-bottom-width: 0px;
}

.game_jedioutcast
{
	background: linear-gradient(to right, #000666, #38C, #000666);
	border: 1px solid #038;
	border-bottom-width: 0px;
}

.game_medalofhonoralliedassault
{
	background: linear-gradient(to right, #696, #ACA, #696);
	border: 1px solid #038;
	border-bottom-width: 0px;
}

.game_medalofhonorpacificassault
{
	background: linear-gradient(to right, #669, #AAC, #669);
	border: 1px solid #038;
	border-bottom-width: 0px;
}

.game_openarena
{
	background: linear-gradient(to right, #544, #F77, #544);
	border: 1px solid #888;
	border-bottom-width: 0px;
}

.game_quake
{
	background: linear-gradient(to right, #530, #D80, #530);
	border: 1px solid #600;
	border-bottom-width: 0px;
}

.game_quakeiiiarena
{
	background: linear-gradient(to right, #300, #F60, #300);
	border: 1px solid #600;
	border-bottom-width: 0px;
}

.game_returntocastlewolfenstein
{
	background: linear-gradient(to right, #820, #A94, #820);
	border: 1px solid #CA0;
	border-bottom-width: 0px;
}

.game_tremulous
{
	background: linear-gradient(to right, #060, #3F6, #060);
	border: 1px solid #090;
	border-bottom-width: 0px;
}

.game_urbanterror
{
	background: linear-gradient(to right, #090999, #4CD, #090999);
	border: 1px solid #038;
	border-bottom-width: 0px;
}

.game_warsow
{
	background: linear-gradient(to right, #420, #FA0, #420);
	border: 1px solid #A0A;
	border-bottom-width: 0px;
}

.game_wolfensteinenemyterritory
{
	background: linear-gradient(to right, #422, #F62, #422);
	border: 1px solid #888;
	border-bottom-width: 0px;
}

.game_worldofpadman
{
	background: linear-gradient(to right, #44F, #3C3, #44F);
	border: 1px solid #F66;
	border-bottom-width: 0px;
}

.alphabetizeLabel
{
    display: inline-block;
    font-family: monospace;
    font-size: 8pt;
}

.alphabetizeCheckbox
{
    vertical-align: middle;
    margin: 9px;
}

.invertSelectionButton
{
    border: 1px solid #000;
    border-radius: 6px;
    font-size: 8pt;
    color: #FFF;
	text-shadow: -1px 1px #000000;
    background-color: #242;
    border: none;
    padding: 6px;
    margin-left: 6px;
    cursor: pointer;
}

.invertSelectionButton:hover
{
    color: #FFF;
    background-color: #2A2;
}

.clearButton
{
    border: 1px solid #000;
    border-radius: 6px;
    font-size: 8pt;
    color: #FFF;
	text-shadow: -1px 1px #000000;
    background-color: #422;
    border: none;
    padding: 6px;
    margin-left: 6px;
    cursor: pointer;
}

.clearButton:hover
{
    color: #FFF;
    background-color: #A22;
}

.selectAllButton
{
    border: 1px solid #000;
    border-radius: 6px;
    font-size: 8pt;
    color: #FFF;
	text-shadow: -1px 1px #000000;
    background-color: #224;
    border: none;
    padding: 6px;
    margin-left: 6px;
    cursor: pointer;
}

.selectAllButton:hover
{
    color: #FFF;
    background-color: #22A;
}


/*
THE FOLLOWING CLASSES ARE FOR THE SUPPORTED GAMES LIST
THE FOLLOWING CLASSES ARE FOR THE SUPPORTED GAMES LIST
*/


.fiftyPercentWidth:hover
{
	text-shadow: -1px 1px 1px #999;
}

.fiftyPercentWidth
{
    width: 50%;
	font-size: 10pt;
}

.callofduty
{
	color: #DDC;
	font-weight: bold;
}

.callofduty2
{
	color: #EEC;
	font-weight: bold;
}

.callofduty4modernwarfare
{
	color: #9C9;
	font-weight: bold;
}

.callofdutyworldatwar
{
	color: #CB8;
	font-weight: bold;
}

.jediacademy
{
	color: #6F9;
	font-weight: bold;
}

.jedioutcast
{
	color: #58D;
	font-weight: bold;
}

.medalofhonoralliedassault
{
	color: #ACA;
	font-weight: bold;
}

.medalofhonorpacificassault
{
	color: #AAC;
	font-weight: bold;
}

.nexuizclassic
{
	color: #7AC;
	font-weight: bold;
}

.openarena
{
	color: #FA9;
	font-weight: bold;
}

.quake
{
	color: #D80;
	font-weight: bold;
}

.quakeiiiarena
{
	color: #F00;
	font-weight: bold;
}

.returntocastlewolfenstein
{
	color: #EA3;
}

.soldieroffortuneiidoublehelix
{
	color: #ACA;
	font-weight: bold;
}

.tremulous
{
	color: #0F0;
	font-weight: bold;
}

.urbanterror
{
	color: #4ED;
	font-weight: bold;
}

.warsow
{
	color: #FA0;
	font-weight: bold;
}

.wolfensteinenemyterritory
{
	color: #F73;
}

.worldofpadman
{
	color: #66F;
}

.xonotic
{
	color: #0CF;
	font-weight: bold;
}

.unrecognizedgame
{
	color: #F40;
	font-weight: bold;
}


/*
GENERAL FORMATTING - SOME CLASSES MAY NOT BE USED
GENERAL FORMATTING - SOME CLASSES MAY NOT BE USED
*/


/* No idea */
.heading
{
color:#EFEFEF;
font-size:18pt;
font-weight:bold;
}

/* When an error message is displayed, this is the class used. Most error messages use the <h3> tag as well. */
.errorMessage
{
font-weight: bold;
font-size: 14pt;
}

/* This class removes link formatting from anchor tags */
a
{
color: inherit;
text-decoration: none;
}

/* Used for div tables, but I don't think it is used anywhere */
.clear
{
clear: both;
}

/* No idea if this is used any more */
.info
{
color:#EFEFEF;
font-size:9pt;
font-family:monospace;
line-height:90%;
}


/*
MAPREQ CLASSES
MAPREQ CLASSES
*/


.reqforminfo {
    display: inline-block;
    font-weight: bold;
    color: #F08;
    margin-bottom: 10px;
}

.reqformshowhide {
    font-size: 12px;
    font-weight: bold;
    color: #F08;
}

#reqform {
	display: inline-flex;
	flex-direction: column;
	width: 45%;
    min-width: 450px;
    background-color: #222;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #90B;
    box-shadow: 0px 0px 20px #90B, inset 0px 0px 10px #90B;
    margin-top: 20px;
}

#reqform > * {
	margin: 5px 0px;
}

.reqformrow {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
	justify-content: center;
}

.reqformlabel {
    flex: 0 0 auto;
    font-weight: bold;
    font-size: 12px;
    margin-right: 5px;
}

.reqformtextentry {
    flex: 1 1 auto;
}

.reqformsubmit {
    background-color: #333;
    border: 1px solid #555;
    border-radius: 5px;
    outline: none;
    color: #CCC;
    font-weight: bold;
}

.reqformsubmit:hover {
    color: #000;
    background-color: #90B;
}

.entrytop {
    flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	width: 90%;
	min-width: 960px;
	background-color: #444;
	text-align: left;
	overflow: hidden;
    border-radius: 10px;
    border: 2px solid #FC0;
    box-shadow: 0px 0px 40px #F20;
    min-height: 100px;
    margin-bottom: 25px;
}

.entryheader {
	flex: 0 0 auto;
	height: 40px;
	background-color: #181818;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0px 5px;
}

.entrybody {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	overflow: auto;
}

.entrycont {
	flex: 1 1 auto;
	min-height: fit-content;
	min-height: 25px;
	max-height: 30px;
	padding: 0px 5px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.entrycont_dbg {
	background-color: #222;
}

.entrycont_lbg {
	background-color: #282828;
}

.entryheaderfield {
	font-weight: bold;
}

.entryfield {
	min-width: 0px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 0px 5px;
}

.entrydeletefield {
	flex: 0 0 auto;
	width: 20px;
	text-align: center;
}

.entrydeletebutton {
	display: inline-block;
	width: 20px;
	background-color: #C00;
	margin: 0;
	padding: 2px;
	border: 1px solid #400;
	outline: none;
	border-radius: 5px;
}

.entrydeletebutton:hover {
	background-color: #F00;
}

.entrygamefield {
	flex: 0 0 auto;
	width: 250px;
}

.entrybspfield {
	flex: 0 0 auto;
	min-width: 370px;
}

.entrydatefield {
	flex: 0 0 auto;
	width: 180px;
}

.entrylinkfield {
	flex: 1 1 auto;
}

#adminlogin {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 43px;
	background-color: #282828;
	padding: 3px;
}

/*
This doesn't seem necessary. Commenting it out
#adminlogin > *:not(:first-child) {
	margin-left: 3px;
}
*/

.loginRow
{
height: 20px;
}

.adminentry {
	flex: 1 1 auto;
	min-width: 0px;
	background-color: #222;
	color: #CCC;
	border: 2px solid #111;
	outline: none;
	cursor: pointer;
}

.loginText
{
    font-size: 12px;
    height: 20px;
    line-height: 20px;
    color: #EEE;
}

.notificationText {
    font-weight: bold;
    color: #000;
    font-size: 12px;
    padding-left: 8px;
    padding-right: 8px;
}

.notificationSuccess {
    height: 18px;
    line-height: 18px;
    border: 1px inset #090;
    background-color: #0F0;
    padding-left: 8px;
    padding-right: 8px;
}

.notificationFail {
    height: 18px;
    line-height: 18px;
    border: 1px inset #900;
    background-color: #F00;
    padding-left: 8px;
    padding-right: 8px;
}

.notificationInfo {
    height: 18px;
    line-height: 18px;
    border: 1px inset #059;
    background-color: #08F;
    padding-left: 8px;
    padding-right: 8px;
}


/*
ANALYTICS CLASSES
ANALYTICS CLASSES
*/


.centerPage
{
text-align: center;
}

.centerElement
{
text-align: center;
margin-left: auto;
margin-right: auto;
}

/* This class is used for the IP address and port inputs on the analytics page */
.analyticsAddressForm
{
font-size: 14pt;
padding: 6px;
margin: 12px 12px auto;
}

.analyticsAddressPage
{
background-color: rgba(30, 30, 30, .65);
}

.fullHeightAndWidth
{
margin: 0px;
padding: 0px;
height: 100vh;
width: 100%;
}

#analyticsContainingFrame
{
height: 100%;
width: 100%;
}

#analyticsWrapper
{
height: 100%;
width: 100%;
min-width: 1000px;
text-align: center;

margin-left: auto;
margin-right: auto;
overflow: hidden;

display: flex;
flex-direction: column;
}

/* This class is used to display a loading screen while analytics is working */
.loadingDiv
{
position: absolute;
top: 50%;
left: 50%;
padding: 20px;
background: linear-gradient(-20deg, #897, #788868, #897, #788868, #897, #788868);
border: 1px outset #555;
border-radius: 14px;
opacity: .95;
z-index: 10;
color: #EEE;
font-family: monospace;
font-size: 18pt;
text-shadow: -2px 2px #000000;
transform: translate(-50%, -50%);
}

#analyticsDataFrame
{
width: 100%;
min-width: 950px;
min-height: 550px;
text-align: center;
position: relative;
margin-left: auto;
margin-right: auto;
overflow: hidden;
flex: 1 1 auto;
}

/* This class is used for the info div, which displays when the user clicks on an analytics element */
#infoDiv
{
max-width: 300px;
position: absolute;
padding: 10px;
background: linear-gradient(-20deg, #897, #788868, #897, #788868, #897, #788868);
z-index: 3;
opacity: .95;
border: 1px outset #555;
border-radius: 14px;

/* These properties apply to all text inside the infoDiv */
font-family: monospace;
color: #EEE;
font-size: 10pt;
text-shadow: -1px 1px #000000;
}

/* This class is used for the header on the info div */
.infoDivHeader
{
font-family: monospace;
color: #FFF;
font-size: 14pt;
font-weight: bold;
text-shadow: -1px 1px #000;
}

/* This class is used for the info inside the info div */
.infoDivInfo
{
font-size: 12pt;
font-weight: bold;
}

/* This class is used for the date inside the info div */
.infoDivDate
{
font-size: 10pt;
}

/* This class is used for the infoDiv's close button */
.infoDivCloseButton:hover
{
color: #FF0;
}

/* This class is used for the infoDiv's close button */
.infoDivCloseButton
{
padding: 10px;
cursor: pointer;
font-family: monospace;
font-size: 14pt;
font-weight: bold;
text-shadow: -1px 1px #555;
text-align: right;
color: #FFF;
}

/* This class is used for the the X on the infoDiv's close button */
.infoDivCloseButtonX:hover
{
background: linear-gradient(-10deg, #900, #800);
border: 1px inset #FFF;
}

/* This class is used for the the X on the infoDiv's close button */
.infoDivCloseButtonX
{
padding-left: 7px;
padding-right: 7px;
padding-top: 3px;
padding-bottom: 3px;
margin: 10px;
overflow: hidden;
border: 1px outset #FFF;
border-radius: 5px;
background: linear-gradient(-10deg, #F33, #E22);
cursor: pointer;
font-family: monospace;
font-size: 14pt;
font-weight: bold;
text-shadow: -1px 1px #000;
text-align: right;
}

/* This class the colored container for the levelshots in the info div. */
.infoDivLevelshotContainer
{
width: 180px;
height: 135px;
margin: 0 auto;
padding: 20px;
text-align: center;
}

/* This class is for the levelshots in the info div. */
.infoDivLevelshot
{
width: 180px;
height: 135px;
background-size: 100% 100%;
margin: 0 auto;
padding: 0;
opacity: 1;
}

/* This class is used to hide the info div on page load, and to hide the checkbox div. */
.hiddenStuff
{
display: none;
}

/* This class is used for the button row, below the radio buttons */
.buttonRow
{
display: inline-flex;
}

/* This class is for the show/hide button for the checkboxes */
#showHideButton:hover
{
background-color: #BB0;
border: 1px solid #F00;
color: #F00;
}

/* This class is for the show/hide button for the checkboxes */
#showHideButton
{
text-align: right;
border: 1px solid #444;
background-color: #000;
cursor: pointer;
padding: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-top: 0px;
}

/* This class is the container for the check boxes */
#hiddenCheckboxes
{
padding: 10px;
margin-left: 700px;
position: absolute;
transform: translate(-25%, -100%);
border: 1px inset #555;
background-color: #3D3D3D;
z-index: 5;
}

/* This class is used to control the text labels on the control frame */
#analyticsControlsFrame
{
padding-top: 5px;
font-family: monospace;
font-size: 10pt;
color: #EEE;
text-shadow: -1px 1px #000;
background: linear-gradient(0deg, #222222, #212121, #222, #212121);
background-size: 600px 8px;
}

/* This class controls the parent of the top row of flex boxes */
.topRowFlex
{
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}

.topRowFlex > *
{
	margin-left: 5px;
	margin-right: 5px;
}

/* These are the children in the top row of flex boxes */
.topControlBarRow
{
display: flex;
flex: 1 1 auto;
flex-direction: column;
text-align: left;
}

/* This class controls the parent of the bottom row of flex boxes */
.bottomRowFlex
{
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
}

/* These are the children in the bottom row of flex boxes */
.bottomControlBarRow
{
width: 100%;
margin-left: 4px;
margin-right: 4px;
}

.timezoneDisclaimer
{
position: absolute;
top: 100%;
left: 2%;
color: #FFF;
font-family: monospace;
font-size: 11pt;
text-shadow: 1px 1px #000000;
transform: translate(0%, 150%);
}

#gridBackground
{
position: absolute;
height: 100%;
width: 100%;
background: linear-gradient(0deg, #233, #122, #011, #011, #000, #000, #011, #122);
}

.analyticsErrorMessage
{
font-family: monospace;
font-size: 18pt;
color: #DDD;
text-shadow: 1px 1px #000000;
}

.gridLineHorizontal:hover
{
background: linear-gradient(-0.25deg, #39F 1px, #222 20px);
opacity: 0.7;
}

.gridLineHorizontal
{
position: absolute;
height: 0.05%;
width: 100%;
min-height: 2px;
background: linear-gradient(-0.25deg, #0F0 1px, #222 20px);
opacity: 0.4;
cursor: pointer;
}

.gridLineVertical:hover
{
background: linear-gradient(89.5deg, #39F 1px, #222 20px);
opacity: 0.7;
}

.gridLineVertical
{
position: absolute;
height: 100%;
width: 0.05%;
min-width: 2px;
background: linear-gradient(89.5deg, #0F0 1px, #222 20px);
opacity: 0.4;
cursor: pointer;
}

.gridNode:hover
{
border: 8px solid;
border-color: #F55;
border-style: ridge;
opacity: 1;
z-index: 2;
}

.gridNode
{
position: absolute;
background-color: #FFF;
border: 6px solid;
border-radius: 10px;
border-style: ridge;
opacity: 0.75;
cursor: pointer;

/* This next line centers the nodes. */
transform: translate(-50%, -50%);
}

.gridBlockPoint:hover
{
opacity: .45;
}

.gridBlockPoint
{
border: none;
position: absolute;
opacity: 0.3;
cursor: pointer;
}

/* This class is for the labels for the horizontal grid lines. */
.gridLabelHorizontal
{
position: absolute;
color: #FFF;
font-size: 10pt;
font-family: monospace;
transform: translate(0, -50%);
cursor: pointer;
text-shadow: 1px 1px #000000, 2px 2px #000000;
z-index: 1;
}

/* This class is for the labels for the vertical grid lines. */
.gridLabelVertical
{
position: absolute;
color: #FFF;
font-size: 8pt;
font-family: monospace;
cursor: pointer;
text-shadow: 1px 1px #000000, 2px 2px #000000;
opacity: 0.8;
white-space: nowrap;
overflow: hidden;
z-index: 1;
}

/* This class is for the labels for the vertical grid lines. */
.gridLabelVerticalOffset1
{
transform: translate(-50%, -250%);
}

/* This class is for the labels for the vertical grid lines. */
.gridLabelVerticalOffset2
{
transform: translate(-50%, -125%);
}

/* This class is for the labels for the horizontal grid lines. */
.gridLabelZero
{
transform: translate(0, -100%);
}

/* This class is for the labels for the horizontal grid lines. */
.gridLabelTop
{
transform: translate(0, 0);
}

/* This color is used for the server online status */
.analyticsColor1
{
border-color: #A33;
background-color: #A33;
}

/* This class is used to make the status blocks more obvious */
.offlineBlinker:hover
{
opacity: .8;
}

/* This class is used to blink the blocks that identify if the server is offline */
.offlineBlinker
{
opacity: .6;
animation: redBlinker 1.75s linear infinite;
}

/* This class is used for the server address input fields */
.serverAddressFields
{
padding: 4px;
border: 1px inset #444;
background-color: #000;
font-family: monospace;
font-size: 11pt;
color: #FFF;
}

/* This class is used for the time fields */
.timeField
{
padding: 4px;
border: 1px inset #444;
background-color: #000;
font-family: monospace;
font-size: 11pt;
color: #FFF;
}

/* This class resizes the reset button */
.resetTimeFieldSize
{
flex: 0 0 auto;
}

/* This class is for the show/hide button for the checkboxes */
.resetTimeFields:hover
{
background-color: #BB0;
border: 1px solid #F00;
color: #F00;
}

/* This class is used for the reset button for the time fields */
.resetTimeFields
{
text-align: right;
border: 1px solid #444;
background-color: #000;
cursor: pointer;
padding: 10px;
color: #FFF;
font-family: monospace;
font-size: 11pt;
flex: 0 0 auto;
}

/* This class is used for the ParaTracker Analytics text at the bottom of the page */
.radioButton
{
border: 1px inset #444;
background-color: #000;
font-family: monospace;
font-size: 11pt;
color: #FFF;
}

/* This class is used for the ParaTracker Analytics text at the bottom of the page */
.analyticsLogo
{
font-family: monospace;
font-size: 22pt;
font-weight: bold;
padding-right: 350px;
}

/* This class is used for the "Track" link on the admin server list */
.adminTrackLink:hover
{
color: #7CF;
}

/* This class is used for the "Track" link on the admin server list */
.adminTrackLink
{
color: #29F;
}

/* This class is used to prevent the "Track" text from being selectable */
.noSelect
{
user-select: none;
}


@keyframes redBlinker
{
    0% {background-color: #D33;}
    49% {background-color: #D33;}
    50% {background-color: #933;}
    100% {background-color: #933;}
}

/* This color is used for the game name */
.analyticsColor2
{
border-color: #FFF;
background-color: #FFF;
}

/* This color is used for the mod name */
.analyticsColor3
{
border-color: #F93;
background-color: #F93;
}

/* This color is used for the server name (sv_hostname) */
.analyticsColor4
{
border-color: #39F;
background-color: #39F;
}

/* This color is used for the map name. This color is only used when map-specific colors are turned off. */
.analyticsColor5
{
border-color: #F3F;
background-color: #F3F;
}

/* This color is used for the gametype */
.analyticsColor6
{
border-color: #9F3;
background-color: #9F3;
}

/* This color is used for the player count */
.analyticsColor7
{
border-color: #33F;
background-color: #33F;
}


/*
COLORIZER CLASSES
COLORIZER CLASSES

The following values are used for colorizing map names and server names in analytics
*/


.infoDivColor0
/* Black (Gray is used for readability)
Default is #141414 */
{
color: #141414;
text-shadow: -1px 1px #444;
}

.infoDivColor1
/* Red
Default is #FF0000 */
{
color: #FF0000;
}

.infoDivColor2
/* Green
Default is #00FF00 */
{
color: #00FF00;
}

.infoDivColor3
/* Yellow
Default is #FFFF00 */
{
color: #FFFF00;
}

.infoDivColor4
/* Blue
Default is #2222FF */
{
color: #2222FF;
font-weight: bold;
}

.infoDivColor5
/* Cyan
Default is #00FFFF */
{
color: #00FFFF;
}

.infoDivColor6
/* Pink/Purple
Default is #FF00FF */
{
color: #FF00FF;
}

.infoDivColor7
/* White
Default is #FFFFFF */
{
color: #FFFFFF;
}

.infoDivColor8
/* Orange
Default is #FF6605 */
{
color: #FF6605;
}

.infoDivColor9
/* Gray
Default is #5E5E5E */
{
color: #5E5E5E;
}