html {
  scroll-behavior: smooth;
  /*overflow-x: hidden;*/

}

/* ///////////////////////////////////////////////////////////////////////////////////////// */
/* Site background */
body {
	/*default*/
    background-image: url(../../main/images/background.jpg);
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	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*/
	height: 100%;
	
	/* 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);*/
	
}

/* ///////////////////////////////////////////////////////////////////////////////////////// */
/* Style the header */
.header {
  /*background-color: rgb(0, 0, 0);*/
  background: rgba(0,0,0,0.85);
  background-size: 100%;
  background-position: center;
  padding: 20px;
  text-align: center;
  border: 2px solid white;
  width: 100%;
  box-sizing: border-box;  /* to prevent overflow-y */
  font-family: Arial, Helvetica, sans-serif;
}
/* nav list */
nav ul {
  margin:0;
  padding: 0;
  list-style-type: none;
  position: relative;
}
nav li {
  display: inline-block;
  margin-right: 20px;
}
nav form {
  display: inline-block;
  margin-right: 20px;
}
/* nav buttons */
.navbtn:hover {
    background-color: #e15b00;
    color: white;
}
.navbtn {
    background-color: rgb(65, 63, 63);
    text-align: center;
    padding: 10px 32px;
    font-size: 16px;
    transition: 0.3s;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 5px;
}
/* active Patch Notes button */
.navbtn_pn {
    background-color: #e15b00;
    text-align: center;
    padding: 10px 32px;
    font-size: 16px;
    transition: 0.3s;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 5px;
}

/* Talent Calculator Button */
.navbtn_talentcalculator {
    background-color: rgb(65, 63, 63);
    text-align: center;
    padding: 10px 32px;
    font-size: 16px;
    transition: 0.3s;
    cursor: pointer;
    border: 2px solid white;
    border-radius: 5px;
}
.navbtn_talentcalculator:hover {
    background-color: #e15b00;
    color: white;
}
/* talentcalculator popup main div */
.talentcalculator_popup {
  visibility: hidden;
  width: 300px;
  background-color: white;
  background-size: 100%;
  /*text-align: left;*/
  border-radius: 6px;
  padding: 3px;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}
/* make talentcalculator_popup change visible on hovering */
.navbtn_talentcalculator:hover .talentcalculator_popup {
  visibility: visible;
}
.talentcalclinkcontainer {
  text-align: center;
}
.talentcalclistentry {
  padding-top: 3px;
  padding-left: 3px;
}
.talentcalclistentry:hover {
  background-color: lightgray;
}
.linktype {
  width: 70%;
  float: right;
  margin-top: 2.5px;
  margin-right: 10px;
  text-align: center;
  padding: 2px;
  color: black;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* /////////////////////////////////////////////////////////////////////////////////////////////// */

/* test collapse boxes */
.collapsiblebutton {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  background: rgba(0,0,0,0.5);
  width: 100%;
  box-sizing: border-box;
  margin-top: 30px;
  border: 1px solid white;
  border-radius: 6px;
  height: 50px;
  font-size: 16px;
}
.content {
  display: none;
  overflow: hidden;
  background: rgba(0,0,0,0.5);
  width: 100%;
  box-sizing: border-box;
  border: 1px solid white;
  border-radius: 6px;
}
.active, .collapsiblebutton:hover {
  background-color: #e15b00;
  cursor: pointer;
}

/* Main Text Template */
.main_text_panel {
  color: white;
  font-family: Arial, Helvetica, sans-serif;
  margin-left: 12.5%;
  margin-top: 3%;
  margin-bottom: 3%;
  width: 75%;
  box-sizing: border-box;
  border-radius: 6px;
}
/* divider */
.divider {
  color: white;
  margin-top: 3%;
  width: 75%;
  box-sizing: border-box;
  border-radius: 6px;
}
/* preview frame + main frame */
.sub_text_panel {
  background: rgba(0,0,0,0.5);
  width: 100%;
  box-sizing: border-box;
  margin-top: 30px;
  border: 1px solid white;
  border-radius: 6px;
}
/* Main title divs (icon + title) */
.main_titlediv {
  width: 100%;
  height: 59px;
  border: 2px solid white;
  border-radius: 6px;
  box-sizing: border-box;
  text-align: center;
}
/* title icon */
.maintexticon {
  margin-top: 3px;
  margin-left: 3px;
  border-radius: 3px;
  float: left;
}
/* title of the preview box*/
.boxtitle_preview {
  float: right;
  width: auto;
  margin-top: 18px;
  margin-right: 370px;
  text-align: center;
}
/* title of the text paragraph*/
.boxtitle {
  float: right;
  width: auto;
  margin-top: 18px;
  margin-right: 470px;
  text-align: center;
}
/* main description text paragraph*/
.maintext {
  margin-left: 8px;
  margin-right: 8px;
}

/* Screen Width < 1000px*/
@media only screen and (max-width: 1000px) {
  .boxtitle_preview {
    float: none;
    width: auto;
    margin-right: 0;
    margin-top: 18px;
    text-align: center;
  }	
  .boxtitle {
    float: none;
    width: auto;
    margin-right: 0;
    margin-top: 18px;
    text-align: center;
  }

  .divider {
	color: white;
	margin-top: 6%;
	width: 75%;
	box-sizing: border-box;
	border-radius: 6px;
  }
}