style_left.css

/* IE doesn't support var() function; therefore we add actual value before using var(). Though var() is apparently a better programming way.  */

/* css global variable declaration */
:root {
  --consoleButton-height: 2.81vw;
  --first-consoleButton-top: 15.47vw;
  --left-console-top-value: 10.7vw;
  --left-console-width: 9.6vw;
  --left-console-height: 30vw;
  --left-console-button-length: 3vw;
  --left-console-button-image-length: 2vw;
  --left-console-button-image-margin: 0.5vw;
  --level-indicator-length: 1vw;
  --selector-icon-length: 2.5vw;
}

* {
  box-sizing: border-box;
}


/**Styling for index Menu**/
#glossarymenu, #combineButton {

  color: #FFFFFF;
  cursor: pointer;
  font-family: 'Amatic SC', cursive;
  font-family: var(--button-font-family);
  font-size: var(--button-font-size);
  font-weight: bold;
  /*height: 3vw;*/
  position: absolute;
  text-align: center;
  transition-duration: 0.4s;
  -webkit-transition-duration: var(--transition-duration);
  /* Safari */
  transition-duration: var(--transition-duration);
  /*top: 7.7vw;*/
}

/**Styling for index Menu**/
#glossarymenu {
  background-image: url('./imgs/consoleTexture.png');
  background-repeat: repeat;
  border-radius: 25px;
  -webkit-border-radius: 25px;
  -moz-border-radius: 25px;
  font-size: 2.5vw;
  height: 3vw;
  left: 0.5vw;
  top: 7.4vw;
  width: 11vw;
}

#combineButton {
  background-color: rgba(50,0,0,.5);
  /*background-image: none;*/
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  font-size: 2vw;
  top: 80%;
  width: 9vw;
}

#playerAddButton {
  position: absolute;
  top:40%;
  right:58%;
}

#playerDeleteButton {
  position: absolute;
  top:40%;
  left:50%;
}

#playerResetButton {
  position: absolute;
  top:55%;
}

#glossarymenu:hover, #combineButton:hover {
  box-shadow: 0px 0px 5px 5px rgba(240, 166, 29, 0.3), 0 17px 50px 0 rgba(240, 166, 29, 0.1);
}

.fly {
  /* background-image: url(./imgs/consoleTexture.png); */
  color: #fff;
  display: none;
  font-family: 'Amatic SC', cursive;
  font-family: var(--button-font-family);
  font-size: 2.5vw;
  font-size: var(--button-font-size);
  height: auto;
  left: 40%;
  position: absolute;
  text-align: center;
  top: 30%;
  width: 12.5vw;
}

/* left console clickable buttons */
.consoleButton {
  background-color: rgba(0, 0, 0, 0.7);
  background-image: url('./imgs/consoleTexture.png');
  background-repeat: repeat;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  height: 3vw;
  height: var(--left-console-button-length);
  position: absolute;
  transition-property: left;
  width: 3vw;
  width: var(--left-console-button-length);
  /*transition-duration: var(--transition-duration);*/
  /* Safari */
  /*-webkit-transition-duration: var(--transition-duration);*/
}
.consoleButton:hover {
  box-shadow: 8px 0px 10px -4px rgba(240, 166, 29, 0.8);
}


/* painter brush tab */
#settingsTab {
  height: 3vw;
  left: 0;
  position: absolute;
  transition-duration: 0.4s;
  -webkit-transition-duration: var(--transition-duration);
  /* Safari */
  transition-duration: var(--transition-duration);
  top: 4vw;
  /*top: calc(var(--left-console-top-value) + var(--left-console-height));*/
  width: 9.6vw;
  width: var(--left-console-width);
}

/* undo button */
#undoButton {
  /*border-bottom-right-radius: 5px;*/
  border-radius: 50%;
  cursor: pointer;
  height: 3vw;
  height: var(--left-console-button-length);
  width: 3vw;
  width: var(--left-console-button-length);
  top: 4vw;
}
#undoButton:hover {
  box-shadow: 0px 0px 5px 5px rgba(240, 166, 29, 0.3), 0 17px 50px 0 rgba(240, 166, 29, 0.1);
}

#printButton{
  border-radius: 50%;
  cursor: pointer;
  height: 3vw;
  height: var(--left-console-button-length);
  width: 3vw;
  width: var(--left-console-button-length);
  left: 5vw;
  top: 0vw;
}
/* toolsButton to slide the left console */
#toolsButton {
  /*border-bottom-right-radius: 5px;*/
  top: 10.7vw;
  top: var(--left-console-top-value);
}


/* tabButtons class: container for consoleButton class */
.tabButtons, #toolsButton, #undoButton {
  left: 9.6vw;
  left: var(--left-console-width);
  position: absolute;
  transition-duration: 0.4s;
  transition-duration: var(--transition-duration);
  /* Safari */
  -webkit-transition-duration: var(--transition-duration);
}


/* needed for sliding  */
.tabButtonsRolled {
  left: -4.26vw;
  position: absolute;
  transition-duration: 0.4s;
  -webkit-transition-duration: var(--transition-duration);
  /* Safari */
  transition-duration: var(--transition-duration);
}


/* img for consoleButton class.*/
.imgSelected, .imgNotSelected, #pick {
  margin: 0.5vw;
  margin: var(--left-console-button-image-margin);
  width: 2vw;
  width: var(--left-console-button-image-length);
}


/* img for consoleButton class. button selected */
.imgSelected {
  border-right: 2px solid #F0A61D;
}


/* img for consoleButton class. button not selected */
.imgNotSelected {
  border-right: 0px;
}


/* left consoleButton, terrain button */

#terrainButton {
  border-top-right-radius: 5px;
  top: 15.47vw;
  top: var(--first-consoleButton-top);
}


/* left consoleButton, precipatation button */
#precipButton {
  top: 18.28vw;
  top: calc(var(--first-consoleButton-top) + var(--consoleButton-height));
}


/* left consoleButton, year button */
#yearButton {
  top: 21.09vw;
  top: calc(var(--first-consoleButton-top) + 2*var(--consoleButton-height));
}


/* left consoleButton, levels button */
#levelsButton {
  top: 23.9vw;
  top: calc(var(--first-consoleButton-top) + 3*var(--consoleButton-height));
}


/* left consoleButton, features button */
#featuresButton {
  top: 26.71vw;
  top: calc(var(--first-consoleButton-top) + 4*var(--consoleButton-height));
}


/* left consoleButton, yield button */
#yieldButton {
  /*border-bottom-right-radius: 5px;*/
  top: 29.52vw;
  top: calc(var(--first-consoleButton-top) + 5*var(--consoleButton-height));
}


/**left console content container**/
#leftConsole {
  background-color: rgba(0, 0, 0, 0.7);
  background-image: url('./imgs/consoleTexture.png');
  background-repeat: repeat;
  border-bottom-right-radius: 12px;
  height: 30vw;
  position: absolute;
  top: 10.7vw;
  top: var(--left-console-top-value);
  transition-duration: 0.4s;
  -webkit-transition-duration: var(--transition-duration);
  /* Safari */
  transition-duration: var(--transition-duration);
  width: 9.6vw;
  width: var(--left-console-width);
}
/**left console content container**/
/* needed for sliding  */
.leftConsole {
  left: 0;
}

.leftConsoleRolled {
  left: -9.6vw;
  left: calc( -1*var(--left-console-width));
}
/* end left console content container */


/* The content div of each tab */
.consoleTab {
  height: 100%;
  padding: 3%;
  width: 100%;
}

/*terrain selector*/
#painterTab {
  /*display: inline-block;*/
  height: 100%;
  -moz-column-count: 2;
  -webkit-column-count: 2;
  column-count: 2;
  /*-moz-column-gap: 1em;*/
  /*-webkit-column-gap: 1em;*/
  /*column-gap: 1em;*/
}

.leftcol, .rightcol {
  width: 4.8vw;
  width: calc(var(--left-console-width) / 2);
  display: block;
  position: absolute;
}

.leftcol {
  left: 0.5vw;
}

.rightcol {
  left: 5vw;
}


/**inner elements of left console**/


/* icons & iconSelected class */
.icon, .iconSelected {
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  cursor: pointer;
  float: left;
  height: 2.5vw;
  height: var(--selector-icon-length);
  width: 2.5vw;
  width: var(--selector-icon-length);
}

.icon {
  box-shadow: 0 0px 16px 0 rgba(0, 0, 0, 0.8), 0 17px 50px 0 rgba(0, 0, 0, 0.6);
}

.icon:hover {
  box-shadow: 0px 0px 5px 5px rgba(240, 166, 29, 0.3), 0 17px 50px 0 rgba(240, 166, 29, 0.1);
}

.iconSelected {
  box-shadow: 0px 0px 16px 5px rgba(64, 164, 223, 0.5), 0 17px 50px 0 rgba(14, 71, 204, 0.4);
}

.iconSelected:hover {
  box-shadow: 0px 0px 25px 0px rgba(124, 193, 233, 0.8), 0 17px 50px 0 rgba(30, 90, 224, 0.6);
}


/*terrain selector*/
.landSelectorIcon {
  margin: 0.5vw;
}


/* muti-player buttons */
.playerIcon {
  /* image inside playerButton div */
  margin: 0.5vw;
  position: relative;
}


/* levels map selector */
.levelsSelectorIcon {
  margin: 1vw 3vw 1.2vw;
}


/* physical features map selector */
.featureSelectorIcon {
  margin: 0.5vw 3vw;
}


/* yield map selector */
.yieldSelectorIcon {
  display: block;
  margin: 0.8vw;
  position: relative;
}


/* painter brush selector */
.painterIcon {
  margin: 0.5vw 1vw;
}
/* end icons */


/* multiplayerTab section */
#message {
  color: white;
  font-family: 'Amatic SC', cursive;
  font-family: var(--button-font-family);
  font-size: 2.5vw;
  font-size: var(--button-font-size);
  position: static;
  visibility: hidden;
}

#playerResetButton {
  display: none;
}

#playerResetButton:hover #message {
  top: 100%;
  right: 88%;
  visibility: visible;
}

.playerImageHidden {
  height: 100%;
  width: 100%;
}
/* end multiplayerTab section */


/* precipTab section */
#precipTab {}

#precipTitle, #yearTitle, .levelsText {
  color: #fff;
  font-size: 1vw;
  font-size: var(--font-size);
  font-weight: 900;
  font-weight: var(--title-font-weight);
  margin: 0.3vw;
  padding: 0.2vw;
  text-align: center;
}


/*precip selector*/
.styled-select {
  background: #3b3b3b;
  border-radius: 6px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  box-shadow: 0 0px 16px 0 rgba(0, 0, 0, 0.8), 0 17px 50px 0 rgba(0, 0, 0, 0.6);
  color: #fff;
  margin: 0.5vw;
  padding: 0.2vw;
  text-align: center;
}

#year0PrecipContainer {
}

select {
  font-size: 1vw;
  font-size: var(--font-size);
  margin: 5%;
}

.year-precip-select {
  height: 1.8vw;
  width: 5vw;
}

option {
  font-size: 1vw;
  font-size: var(--font-size);
}
/* end precipTab section */


/** year buttons div**/
.yearButton {
  height: 2.5vw;
  height: var(--selector-icon-length);
  margin-left: 3vw;
  margin-top: 1.2vw;
  width: 2.5vw;
  width: var(--selector-icon-length);
}

.yearButtonHidden, .yearImageHidden {
  display: none;
}

/** year buttons**/
.yearSelected {
  box-shadow: 0px 0px 16px 5px rgba(14, 71, 204, 0.5), 0 17px 50px 0 rgba(14, 71, 204, 0.4);
}

.yearNotSelected:hover {
  box-shadow: 0px 0px 5px 5px rgba(240, 166, 29, 0.3), 0 17px 50px 0 rgba(240, 166, 29, 0.1);
}

.DetailsList-title {
  color: #fff;
  font-size: 0.9vw;
  margin: 0.5vw;
}

/* detail lists */
.DetailsList, .DetailsListRolled {
  background-color: black;
  background-image: url('./imgs/consoleTexture.png');
  background-repeat: repeat;
  border-radius: 12px;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  margin: 15px 0px 0px 0px;
  position: absolute;
  top: 1.4vw;
  transition-duration: 0.4s;
  -webkit-transition-duration: var(--transition-duration);
  /* Safari */
  transition-duration: var(--transition-duration);
}

.DetailsList {
  left: 14vw;
}

.DetailsListRolled {
  left: -1000px;
}

.levelDetailsList {
  width: 8.5vw;
}

.physicalDetailsList {
  width: 14vw;
}

.yieldDetailsList {
  width: 14vw;
}
/* end detail lists */

.levelsTextDetails, .yieldtext {
  color: #fff;
  margin-left: 1.8vw;
  white-space: nowrap;
}

.featuresText {
  color: #fff;
  text-align: center;
}

#shortDetailsList {
  width: 220px;
}

table, th, td {
    border: 0.1vw solid black;
    border-collapse: collapse;
    color: white;
    font-size: 0.9vw;
}

th, td {
    padding: 0.4vw;
    text-align: center;
}

table {
    width: 100%;
    background-image: url('./imgs/consoleTexture.png');
    /*color: white;*/
    /*font-size: 6pt;*/
}

.legendColor {
  height: var(--level-indicator-length);
  margin: 5%;
  width: 1vw;
  width: var(--level-indicator-length);
}
/* end indicator size and colors on detail lists */

/* responsive web design. When the window size gets smaller than 600x400, set the fixed size or position for it */
@media screen and (max-width: 600px), screen and (max-height: 400px) {
  .icon, .iconSelected {
    height: 15px;
    width: 15px;
    margin: 2.5px;
  }
  #glossarymenu {
    font-size: 14px;
    height: 18px;
    top: 46px;
    width: 75px;
  }
  #painterTab-leftcol {
    left: 0px;
    width: 28.8px;
  }
  #painterTab-rightcol {
    left: 28.8px;
    width: 28.8px;
  }
  #leftConsole {
    height: 180px;
    top: 64px;
    width: 57.6px;
  }
  #settingsTab {
    height: 23px;
    top: 23px;
    width: 57.6px;
  }
  .consoleButton, #undoButton {
    height: 18px;
    width: 18px;
  }
  .imgSelected, .imgNotSelected {
    height: 10px;
    margin: 4px;
    width: 12px;
  }
  #pick {
    height: 10px;
    margin: 4px;
    width: 12px;
  }
  .tabButtons, #toolsButton, #undoButton {
    left: 57px;
  }
  #undoButton {
    height: 18px;
    top: 25px;
    width: 18px;
  }
  #toolsButton {
    top: 64px;
  }
  #terrainButton {
    top: 92px;
  }
  #precipButton {
    top: 110px;
  }
  #yearButton {
    top: 128px;
  }
  #levelsButton {
    top: 146px;
  }
  #featuresButton {
    top: 164px;
  }
  #yieldButton {
    top: 182px;
  }
  #precipTitle, #yearTitle {
    font-size: 6px;
    height: 8.4px;
    width: 46px;
  }
  .styled-select {
    font-size: 6px;
    height: 24px;
    width: 45px;
  }
  .year-precip-select {
    height: 10.8px;
    width: 30px;
  }
  .yearButton {
    height: 15px;
    width: 15px;
    margin-left: 17px;
    margin-top: 10px;
  }
  .levelsSelectorIcon {
    margin: 6px 18px 7.2px;
  }
  .featureSelectorIcon {
    margin: 3px 18px;
  }
  .painterIcon {
    margin: 4.8px 6px;
  }
  .levelsText, .featuresText {
    font-size: 6px;
  }
  .DetailsList {
    top: 8px;
    left: 78px;
  }
  .levelDetailsList {
    width: 51px;
  }
  .physicalDetailsList {
    width: 89px;
  }
  .yieldDetailsList {
    width: 89px;
  }
  .levelsTextDetails {
    margin-left: 9px;
    font-size: 6px;
  }
  .legendColor {
    height: 6px;
    width: 6px;
  }
}
.header h1{
  margin: 0;
}