@font-face
{
	font-family: "Inconsolata";
	src: url(Fonts/Inconsolata/Inconsolata-VariableFont_wdth,wght.ttf) format('truetype');
}




:root
{
	--raindropFallHeight: 90;


	/*--background: #303841;*/
	--background: black;
	--panel: #2D2D2D;
	--panel2: #363636;
	--accent: blue;
	--accent2: yellow;
	--rollResults: #EBEDEF;
	--rollResultsBorder: #72787E;
	--dividerLines: #72787E;
	--pipBase1: #72787E;
	--pipBase2: darkgray;

	--mainTextColor: white;
	--secondaryTextColor: white;

	--hoverTextColor: black;
	--hoverBackground: #EBEDEF;

	--attackNotesColor: #72787E;

/*

	--background: #33401C;
	--panel: #222B13;
	--panel2: #2B3618;
	--panel3: #795548;

	--accent: #4460A7;

	--accent2: #FDFF70;
	--rollResults: #E9F18A;
	--rollResultsBorder: #E9F18A;
	--dividerLines: #C79C66;
	--pipBase1: #E9F18A;
	--pipBase2: #C79C66;




	--background: #33401C;
	--panel: #222B13;
	--panel2: #2B3618;
	--panel3: #795548;

	--accent: #4460A7;
	--accent2: #FDFF70;
	--rollResults: #EFD89A;
	--rollResultsBorder: #EFD89A;
	--dividerLines: #CDA169;
	--pipBase1: #EFD89A;
	--pipBase2: #CDA169;


	--background: #33401C;
	--panel: #222B13;
	--panel2: #2B3618;
	--panel3: #795548;

	--accent: #4460A7;
	--accent2: #FDFF70;
	--rollResults: white;
	--rollResultsBorder: white;
	--dividerLines: #CDA169;
	--pipBase1: #EFD89A;
	--pipBase2: #CDA169;



	--background: #33401C;
	--panel: #222B13;
	--panel2: #2B3618;
	--panel3: #795548;

	--accent: #4460A7;
	--accent2: #FDFF70;
	--rollResults: white;
	--rollResultsBorder: #78866B;
	--dividerLines: #78866B;
	--pipBase1: #78866B;
	--pipBase2: #A9BA9D;

*/


	/* background-color: #213343; */
	/* background-color: darkolivegreen; */

	background-color: var(--background);

	color: var(--mainTextColor);

	font-size: 16px;
	/*font-family: "Consolas","Arial", sans-serif;*/

	/*font-family: "Consolas","Courier New","Monaco", "Lucida Console","monospace","Arial", sans-serif;*/
	font-family: "Inconsolata", serif;
	font-stretch: 112%;
	font-weight: 435;
	line-height: 1.16;

	/* zoom: 0.8; */
}

/*html {
  position: relative;
}*/

#skillBlock
{
	position: relative;
    /*top: 8%;*/
    top: 10%;

    /*left: 70%;*/

    width: 275px;
    display: inline-block;
    font-size: 13px;
    position: fixed;
}

#skillList
{
    position: absolute;
    top: 0%;
    left: 0%;
}

#skillAmounts
{
    position: absolute;
    top: 0%;
    left: 60%;
}

#skillAmounts2
{
	/* position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 88%;
    position: fixed; */

    position: absolute;
    top: 0%;
    left: 58%;
}

#skillTotals
{
	/* position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 92%;
    position: fixed; */

    position: absolute;
    top: 0%;
    left: 80%;
}

#skillPips
{
	position: absolute;
    top: 0%;
    left: 95%;
}

#bar1
{
	/* width: 5px;
	height: 600px;
	background-color: #72787E;
	position: absolute;
	top: 6%;
	left: 86%;	
	position: fixed; */

	width: 5px;
	/*height: 555px;*/
	height: 497px;
	background-color: var(--dividerLines); /*#72787E;*/
	position: absolute;
	top: 0%;
	left: 52.5%;	
}

#bar2
{
	/* width: 5px;
	height: 600px;
	background-color: #72787E;
	position: absolute;
	top: 6%;
	left: 90%;	
	position: fixed; */

	width: 5px;
	height: 497px;
	background-color: var(--dividerLines); /*#72787E;*/
	position: absolute;
	top: 0%;
	left: 72%;	
}

.skillBarHeight
{
	height: 100%;
}

#stats
{
	position: absolute;
    transform: translate(-50%,-50%);
    top: 22%;
    left: 50%;
    width: 500px;
    display: inline-block;
    position: fixed;
}

#rollResults
{
	position: absolute;
    transform: translate(-50%,-50%);
    top: 70%;
    left: 50%;

    /* width: 20%;
    height: 55%; */

    width: 255px;
    height: 375px;


    border: solid;
    border-width: 2px;
    /* border-radius: 15px; */


    border-color: var(--rollResultsBorder); /*#72787E;*/
    background-color: var(--rollResults);    /*#EBEDEF;*/
    color: black;
    display: inline-block;
    position: fixed;

    padding-top: 10px;
}

#loadIndicator_0
{
	visibility: visible;
}


.rollResultsMenu
{
	position: relative;
	left: 5px;
	position: fixed;
}

.mouseHover
{
	color: var(--hoverTextColor);
	background-color: var(--hoverBackground);
}

.mouseHover2
{
	color: black;
	background-color: #EBEDEF;
}

.fixed
{
	position: fixed;
}

.hidden
{
	display: none;
}

.visible
{
	display: inline-block;
}


#backgroundPic
{
	display: block;
    margin-left: auto;
    margin-right: auto;
	height: 50%;
	width: auto;
}

.creationSelector
{
	display: block;
    margin-left: auto;
    margin-right: auto;
}

#backgroundFlavortext
{
	margin: 0 auto;
	width: 50%;
}

#leftSidebar_characterCreation
{
	width: 10%;
	height: 100%;
	/* background-color: #72787E; */
	background-color: var(--panel);
	position: absolute;
	top: 0%;
	left: 0%;	
	position: fixed;
}

#rightSidebar_characterCreation
{
	width: 10%;
	height: 100%;
	/* background-color: #72787E; */
	background-color: var(--panel);
	position: absolute;
	top: 0%;
	left: 90%;	
	position: fixed;
}

.divLine
{
	width: 50%;
}

.centerText
{
	margin: 0 auto;
	text-align: center;
	width: 50%;
}

.centerBox
{
	/*margin: 0 auto;*/
	margin: auto;
	width: 50%;
}

.leftText
{
	margin: 0 auto;
	text-align: left;
	width: 50%;
}

#spellDetailDisplay
{
	/* position: relative;
    top: 5%;
    left: 50%;
    width: 45%;
    position: fixed;
    font-size: 14;
    background-color: var(--panel);
    border-style: solid;
    border-color: white;
    border-width: 2px;
    height: 90%;*/
    position: relative;
    top: 0%;
    left: 3%;
    width: 95%;
}

#spellDetailBox
{
	position: relative;
    /*transform: translate(-50%,-50%);*/
    top: 5%;
    left: 50%;
    width: 600px;
    /*width: 45%;*/
    position: fixed;
    font-size: 13px;
    background-color: var(--panel);
    border-style: solid;
    border-color: white;
    border-width: 2px;
    height: 90%;
    /*height: 600px;*/
    color: var(--secondaryTextColor);
}

#line1
{
	width: 100%;
	font-size: 5px;
}

#topHeader
{
	position: absolute;
	top: 0%;
	left: 0%;
	background-color: var(--panel);
	position: fixed;
	color: var(--secondaryTextColor);
}

.attackMenuBox
{
	background-color: var(--panel);
	/*height: 80px;*/
	height: 108px;
	width:  416px;
	padding-top: 5px;
}

.attackMenuBox2
{
	/*background-color: #3B3B3B;*/
	/*background-color: #404040;*/
	/*background-color: #363636;*/
	background-color: var(--panel2);
	height: 108px;
	width:  416px;
	padding-top: 5px;
}

.skillPip
{
	width: 15px;
	height: 15px;
	background-color: #72787E;
}
.skillPip2
{
	width: 15px;
	height: 15px;
	background-color: darkgray;
}

.statDisplay
{
	position: relative;
	display: inline;
	left: 180px;
}

.statMenuDisplay
{
	position: relative;
	display: inline;
	left: 360px;
	position: fixed;
}

#topHeader2
{
	/*position: relative;
	top: 0%;
	left: 50%;*/
	background-color: var(--panel);
	/*position: fixed;*/
	display: inline-block;
	color: var(--secondaryTextColor);
}

#topHeader3
{
	position: relative;
	top: 0%;
	left: 50%;
	background-color: var(--panel);
	position: fixed;
	color: var(--secondaryTextColor);
}

#line2
{
	width: 100%;
	font-size: 5px;
}
.line2
{
	width: 100%;
	font-size: 5px;
}

#statDivider
{
	width: 5px;
	height: 100%;

	background-color: var(--dividerLines); /*#72787E;*/

	/*background-color: var(--panel2);*/

	/*background-color: var(--panel3);*/

	position: absolute;
	top: 0%;
	left: 59.25%;	
	position: fixed;	
}

.perkText
{
	font-size: 15px;
}

.lowlighted
{
	background-color: var(--panel);
}

.lowlighted2
{
	background-color: var(--panel2);
}


#spareHealth
{
	width: 33px;
}

.spellTitle
{
	display: inline-block;
	/*background-color: #EBEDEF;
	color: #303841;*/
	background-color: var(--panel);
}

.spellTitle2
{
	display: inline-block;
	/*background-color: #EBEDEF;
	color: #303841;*/
	background-color: var(--panel2);
}

.spellSlotCounter
{
	width: 15px;
}

.spellImage
{
	width: 30%;
	height: auto;
}

.inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}

/*.inputfile + label {
    font-size: 1.25em;
    font-weight: 700;
    color: white;
    background-color: black;
    display: inline-block;
}*/

.mainMenuButton
{
	display: inline-block;
	margin: 0 auto;
	/*width: 100%;*/
	text-align: center;
}

#mainMenuOptions
{
	text-align: center;
	background-color: var(--panel);
	/*width: 800px; OLD FOR "THREADLINKERS" TITLE*/
	width: 1200px;
	left: 25%;
	margin: auto;
	border-style: solid;
	border-width: 2px;
	border-color: white;
}

#title 
{
	font-size: 80px;
	height: 100px;
}













/* Dropdown Button */
.dropbtn {
  background-color: #FFFFFF;
  color: black;
  padding: 2px;
  border-style: solid;
  border-color: #767676;
  border-width: 1px;
  text-align: left;
  width: 162px;
  font-size: 13px;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  font-size: 14px;
  display: none;
  position: absolute;
  /*background-color: #f1f1f1;*/
  border-style: solid;
  border-color: #767676;
  border-width: 1px;

  background-color: #FFFFFF;
  min-width: 160px;
  /*box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);*/
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content div {
	font: 15px Arial, sans-serif;
  font-size: 14px;
  color: black;
  padding: 1px 2px;
  text-align: left;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content div:hover {background-color: #1E90FF; color: white;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #DDDDDD;} .downArrow {ontent: url("Down_Arrow_2.png");}

.downArrow
{
  width: 15px;
  height: auto;
  position: absolute;
  right: 2%;
}


.thinSpacer
{
	height: 5px; 
	font-size: 5pt;
}

@keyframes highlightFade
{
	0% {
		background: #EBEDEF;
		/*color: black;*/
	}
	100% {
		background: none;
		/*color: #EBEDEF;*/
	}
}

.fade 
{
	animation: highlightFade 0.2s;
}

/*background-color: #303841;
	color: #EBEDEF;

	color: darkolivegreen;
	background-color: white;*/

.statInput
{
	display: inline-block;
	width: 50px;
	/*height: 20px;*/
	position: absolute;
	left: 125px;
}

.xButton
{
	width: 20px;
	height: auto;
}

#xButton1
{
	position: absolute;
	top: 6px;
	right: 6px;
}

.xButton:hover{
  filter: brightness(50%);
}

button:hover{
	filter: brightness(90%);
}

.underline
{
	width: 100%;
	font-size: 5px;
}

#showSkillsButton
{
	position: absolute;
	transform: translate(-50%,-50%);
	top: 95%;
	right: 165px;
}

#mainMenuOptions
{
	color: var(--secondaryTextColor);

}