body {
	/*default*/
	background-attachment: fixed; /*Keep background fixed at its position & Keeping the background from being zoomed in, when scrolling or clicking to expand the patch note boxes*/
	background-image: url(../../main/images/background.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: white;
    font-family: Arial, Helvetica, sans-serif;
	height: 100%;
	margin: 0;
	
	/* Easter */
    /*background-image: url(../../main/images/background_easter.jpg);*/
	/* Halloween */
    /*background-image: url(../../main/images/background_halloween.jpg);*/
	/* Christmas */
    /*background-image: url(../../main/images/background_christmas.jpg);*/
}

/* //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* Skill Point Counter left side */
.TPCounter {
  background: rgba(0,0,0,0.5);
  border: 1px solid #dddddd;
  box-sizing: border-box;
  min-height: 722px; /* 722px*/
  padding: 4px;
  position: absolute;
  text-align: left;
  top: 0;
  width: 29%;
  z-index: -1;
}
/* spent TP overview */
.spentTP_overview_Defender, .spentTP_overview_Berserker, .spentTP_overview_Sorcerer, .spentTP_overview_Cleric, .spentTP_overview_Assassin, .spentTP_overview_Max, .spentTP_overview_usedTP, .spentTP_overview_remainTP {
  font-size: 14px;	
}
/* skill tree selection title */
.tree_select_title {
  font-size: 14px;	
  padding: 4px;
  text-align: center;
  width: 100%;
}
/* reset button */
.reset_btn_container {
  margin-bottom: 10px;
  margin-top: 10px;
  text-align: center;
  width: 100%;
}
.reset_btn {
  background-color: tomato;
  border: none;
  border-radius: 20px;
  color: #ffffff;
  font-size: 15px;
  height: 20px;
  outline: none;
  width: 50%;
  overflow: hidden;  /* makes text not go over the button area */
  text-overflow: ellipsis; /* replaces the cut off part of a word with ... */
}
.reset_btn:hover {
  background-color: lightgray;
  cursor: pointer;
}

/* Skill Tree Change Buttons */
.tree_select {
  text-align: center;
}
.tree_change_btn {
  border-radius: 3px;
  cursor: pointer;
}
/* Talent Description Text Field */
.talent_desc {
	font-size: 14px;
}	

/* Skill Trees ///////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
.tree_container_defender {
  height: 722px;
  margin-left: 29%;
  position: absolute;
  top: 0;
  width: 1000px;
}	
.tree_container_berserker {
  height: 722px;
  margin-left: 29%;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 1000px;
}	
.tree_container_sorcerer {
  height: 722px;
  margin-left: 29%;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 1000px;
}	
.tree_container_cleric {
  height: 722px;
  margin-left: 29%;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 1000px;
}	
.tree_container_assassin {
  height: 722px;
  margin-left: 29%;
  position: absolute;
  top: 0;
  visibility: hidden;
  width: 1000px;
}	

.def_tree, .zerk_tree, .sorc_tree, .cleric_tree, .assa_tree {
  background: rgba(0,0,0,0.5);
  border-collapse: collapse;
  display: table;
  height: 100%;
  position: absolute;
  table-layout: auto;
  top: 0;
  width: 100%;
}
/* table cells */
.talent {
  border-bottom: solid 1px #ac7918;
  border-top: solid 1px #ac7918; 
  text-align: center;
}
.mastery {
  border-bottom: solid 1px #ac7918;
  border-left: solid 2px #ac7918;
  border-right: solid 1px #ac7918;
  border-top: solid 1px #ac7918; 
  text-align: center;
}
/* talent icons */
.talent_icon_btn {
  background: transparent;
  border: none;
}
.talent_icon_btn:hover {
  cursor: pointer;
}

.talenticon_r1 {
  border-radius: 3px;
}	
.talenticon_r2, .talenticon_r3, .talenticon_r4, .talenticon_r5, .talenticon_r6, .talenticon_r7 {
  border-radius: 3px;
  filter: grayscale(100%);
}

.masteryicon_r1, .masteryicon_r2, .masteryicon_r3, .masteryicon_r4, .masteryicon_r5, .masteryicon_r6, .masteryicon_r7 {
  border-radius: 3px;
  filter: grayscale(100%);
}
.masteryicon_r1:hover, .masteryicon_r2:hover, .masteryicon_r3:hover, .masteryicon_r4:hover, .masteryicon_r5:hover, .masteryicon_r6:hover, .masteryicon_r7:hover {
  border-radius: 3px;
  cursor: pointer;
}
/* special class for Circle of Revenge & Shadow Walk Mastery */
.specialmasteryicon {
  border-radius: 3px;
  filter: grayscale(100%);
}
.specialmasteryicon:hover {
  cursor: pointer;
}

/* Arrows */
/* Defender Tree */
/* Stunning Smash -> Rapid Assault */
.arrow_1 {
  margin-left: 170px;
  margin-top: 95px;
  position: absolute;
  z-index: 1;
 }
 /* Rush -> Slam */
.arrow_2 {
  margin-left: 290px;
  margin-top: 95px;
  position: absolute;
  z-index: 1;
 }
 /* Slam -> Massive Strike */
.arrow_3 {
  margin-left: 290px;
  margin-top: 200px;
  position: absolute;
  z-index: 1;
 }
 /* Piercing Strike -> Chaotic Strike */
.arrow_4 {
  margin-left: 45px;
  margin-top: 295px;
  position: absolute;
  z-index: 1;
 }
 /* Chaotic Strike -> Cyclone Strike */
.arrow_5 {
  margin-left: 45px;
  margin-top: 405px;
  position: absolute;
  z-index: 1;
 }
 /* Rapid Assault -> Shield Slam */
.arrow_6 {
  margin-left: 170px;
  margin-top: 300px;
  position: absolute;
  z-index: 1;
 }
/* Berserker Tree */
/* Crush -> Vanquish */
.arrow_7 {
  margin-left: 45px;
  margin-top: 95px;
  position: absolute;
  z-index: 1;
 }
/* Neutralize -> Dodge Attack */
.arrow_8 {
  margin-left: 216px;
  margin-top: 25px;
  position: absolute;
  z-index: 1;
 }
/* Dodge Attack -> Armageddon Crush */
.arrow_9 {
  margin-left: 290px;
  margin-top: 95px;
  position: absolute;
  z-index: 1;
 }
/* Berserk -> Furious Dash */
.arrow_10 {
  margin-left: 417px;
  margin-top: 140px;
  position: absolute;
  z-index: 1;
 }
/* Furious Dash -> Inertia */
.arrow_11 {
  margin-left: 415px;
  margin-top: 300px;
  position: absolute;
  z-index: 1;
 }
/* Inertia -> Scamper */
.arrow_12 {
  margin-left: 415px;
  margin-top: 405px;
  position: absolute;
  z-index: 1;
 }
/* Berserk -> Tranquility */
.arrow_13 {
  margin-left: 539px;
  margin-top: 200px;
  position: absolute;
  z-index: 1;
 }
/* Tranquility -> Controlled Madness */
.arrow_14 {
  margin-left: 539px;
  margin-top: 405px;
  position: absolute;
  z-index: 1;
 }
/* Vanquish -> Upward Strike */
.arrow_15 {
  margin-left: 45px;
  margin-top: 405px;
  position: absolute;
  z-index: 1;
 }
 /* Sorcerer */
 /* Flame Arrow -> Flame Orb */
.arrow_16 {
  margin-left: 55px;
  margin-top: 95px;
  position: absolute;
  z-index: 1;
 }
 /* Rapid Blasts -> Flame Impact */
.arrow_17 {
  margin-left: 197px;
  margin-top: 90px;
  position: absolute;
  z-index: 1;
 }
 /* Ice Thorns -> Ice Barrier */
.arrow_18 {
  margin-left: 338px;
  margin-top: 95px;
  position: absolute;
  z-index: 1;
 }
 /* Ice Arrow -> Ice Orb */
.arrow_19 {
  margin-left: 480px;
  margin-top: 95px;
  position: absolute;
  z-index: 1;
 }
 /* Flame Orb -> Burning Meteor */
.arrow_20 {
  margin-left: 55px;
  margin-top: 303px;
  position: absolute;
  z-index: 1;
 }
 /* Flame Impact -> Pillar of Fire */
.arrow_21 {
  margin-left: 197px;
  margin-top: 198px;
  position: absolute;
  z-index: 1;
 }
 /* Ice Orb -> Cold Wave */
.arrow_22 {
  margin-left: 480px;
  margin-top: 303px;
  position: absolute;
  z-index: 1;
 }
 /* Meditation -> Magic Crystal */
.arrow_23 {
  margin-left: 622px;
  margin-top: 198px;
  position: absolute;
  z-index: 1;
 }
/* Cleric */
/* Hammer of Light -> Hammer of Judgment */
.arrow_24 {
  margin-left: 45px;
  margin-top: 95px;
  position: absolute;
  z-index: 1;
 }
/* Divine Punishment -> Circle of Punishment */
.arrow_25 {
  margin-left: 290px;
  margin-top: 95px;
  position: absolute;
  z-index: 1;
 }
/* Revitalize -> Circle of Healing */
.arrow_26 {
  margin-left: 415px;
  margin-top: 95px;
  position: absolute;
  z-index: 1;
 }
/* Focused Strike -> Healing Strike */
.arrow_27 {
  margin-left: 170px;
  margin-top: 198px;
  position: absolute;
  z-index: 1;
 }
/* Hammer of Judgment -> Links of Light */
.arrow_28 {
  margin-left: 45px;
  margin-top: 300px;
  position: absolute;
  z-index: 1;
 }
/* Dire Recovery -> Goddess' Blessing */
.arrow_29 {
  margin-left: 415px;
  margin-top: 405px;
  position: absolute;
  z-index: 1;
 }
/* Assassin */
/* Chaos Stinger -> Storm Blade */
.arrow_30 {
  margin-left: 46px;
  margin-top: 95px;
  position: absolute;
  z-index: 1;
 }
/* Cleave -> Cyclone Kick */
.arrow_31 {
  margin-left: 217px;
  margin-top: 29px;
  position: absolute;
  z-index: 1;
 }
/* Storm Blades -> Rising Dragon */
.arrow_32 {
  margin-left: 46px;
  margin-top: 300px;
  position: absolute;
  z-index: 1;
 }
/* Penetration Stinger -> Whirling Blade */
.arrow_33 {
  margin-left: 170px;
  margin-top: 300px;
  position: absolute;
  z-index: 1;
 }
/* Restorative Elixir -> Adrenaline Elixir */
.arrow_34 {
  margin-left: 538px;
  margin-top: 200px;
  position: absolute;
  z-index: 1;
 }
/* Adrenaline Elixir -> Fortifying Elixir */
.arrow_35 {
  margin-left: 538px;
  margin-top: 405px;
  position: absolute;
  z-index: 1;
 }
 
 /* tooltip */
 #tooltip {
   visibility: hidden;
   background: rgba(0,0,0,0.75);
   border: 1px solid #dddddd;
   position: absolute; 
   font-size: 14px;
   width: 150px;
   padding: 5px;
   z-index: 2;
}

/* Adjust certain aspects on smaller screens */
@media only screen and (max-width: 400px) {
	.reset_btn {
	  background-color: tomato;
	  border: none;
	  border-radius: 20px;
	  color: #ffffff;
	  font-size: 15px;
	  height: 20px;
	  outline: none;
	  width: 75%;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
}