@font-face {
  font-family: 'KnightsQuestRegular';
  src: url('fonts/knights-webfont.eot');
  src: url('fonts/knights-webfont.eot?#iefix') format('embedded-opentype'),
       url('fonts/knights-webfont.woff') format('woff'),
       url('fonts/knights-webfont.ttf') format('truetype'),
       url('fonts/knights-webfont.svg#KnightsQuestRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

body {
	background-color: black;
	color: black;
  font-family: KnightsQuestRegular;
}

h1 {
	font-family: KnightsQuestRegular;
  color: tan;
	font-size: 60px;
	font-weight: heavy;
	text-transform: uppercase;
	text-shadow: 4px 4px 5px rgba(218,165,32, 0.8)
}

h2 {
	font-family: KnightsQuestRegular;
	font-size: 20px;
  color: beige;
}

a:link {
  color: beige;
  text-decoration: underline;
}
a {
  color: beige;
  text-decoration: underline;
}

#smaller_font {
  font-size: 14px;
}

#beta_link {
  color: black;
  text-decoration: underline;
}

#game_tutorial_pic {
  position: absolute;
  z-index: 9;
  top: 0px;
  left: 0px;
}

#game_tutorial {
  position: absolute;
  z-index: 10;
  top: 175px;
  left: 295px;
  width: 340px;
  height: 260px;
}

#next_button {
  position: absolute;
  bottom: 1px;
  right: 1px;
}

/*-----CUSTOM SCROLLBAR---*/
  ::-webkit-scrollbar-button{ display: none; height: 10px; border-radius: 2px; background-color: transparent; }
  ::-webkit-scrollbar-button:hover{ background-color: #8B4513; } ::-webkit-scrollbar-thumb{ background-color: #8B4513; }
  ::-webkit-scrollbar-thumb:hover{ background-color: #8B4513; } ::-webkit-scrollbar-track{ background-color: transparent; }
  ::-webkit-scrollbar-track:hover{ background-color: transparent; } ::-webkit-scrollbar{ width: 10px; } 

/*----MOUSEOVER HINTS FOR PEASANT ASSIGNMENTS---*/
  .tutorial {
    font-size: 14px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }

  .tutorial .tuttext {
    visibility: hidden;
    width: 150px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 6;
    top: -12px;
    left: 150%;
  }

  .tutorial .tuttext:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
  }

  .tutorial:hover .tuttext {
    visibility: visible;
    opacity: 1;
  }

  .tutorial_left {
    font-size: 14px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }

  .tutorial_left .tuttext_left {
    visibility: hidden;
    width: 150px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 6;
    top: -12px;
    left: -150px;
  }

  .tutorial_left .tuttext_left:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
  }

  .tutorial_left:hover .tuttext_left {
    visibility: visible;
    opacity: 1;
  }

  .tutorial_military {
    font-size: 14px;
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }

  .tutorial_military .tuttext_military {
    visibility: hidden;
    width: 150px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -75px;
  }

  .tutorial_military .tuttext_military:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
  }

  .tutorial_military:hover .tuttext_military {
    visibility: visible;
    opacity: 1;
  }

/*---SPELL INFO---*/
  .spells_hover .spell_info_fl, .spell_info_bl, .spell_info_tog, .spell_info_dice {
    font-size: 12px;
    visibility: hidden;
    width: 175px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
  }

  .spells_hover:hover .spell_info_fl {
    visibility: visible;
  }

  .spells_hover:hover .spell_info_bl {
    visibility: visible;
  }

  .spells_hover:hover .spell_info_dice {
    visibility: visible;
  }

  .spells_hover:hover .spell_info_tog {
    visibility: visible;
  }

  .spells_hover .spell_info_fl {
    position: absolute;
    z-index: 6;
    top: 185px;
    left: 80px;
  }

  .spells_hover .spell_info_bl {
    position: absolute;
    z-index: 6;
    top: 255px;
    left: 80px;
  }

  .spells_hover .spell_info_dice {
    position: absolute;
    z-index: 6;
    top: 320px;
    left: 80px;
  }

  .spells_hover .spell_info_tog {
    position: absolute;
    z-index: 6;
    top: 390px;
    left: 80px;
  }

/*---REMOVE TABLE BORDERS ---*/
  #nostyle {
    border-collapse: collapse;
    padding: 0px;
    border: 0px;
    background-color: transparent;
    margin: 0;
  }

  #nostyle td {
    width: 120px;
  }

  table.layout {
    font-family: KnightsQuestRegular;
    border: solid 2px black;
    border-left: solid 2px black;
    border-right: solid 2px black;
    background-color: transparent;
    -moz-box-shadow: 1px 1px 3px 2px #625C54;
    -webkit-box-shadow: 1px 1px 3px 2px #625C54;
    box-shadow: 1px 1px 3px 2px #625C54;
    padding: 0px;
    text-align: center;
  }

/*-----BASE---*/
  .base {
    position: relative;
    top: 0;
    left: 0;
    z-index: 1;
  }

  #honor_progress_bar {  /*--- Max width is 477px ---*/
    position: absolute;
    top: 67px;
    left: 162px;
    height: 12px;
    width: 1px;
    min-width: 0px;
    max-width: 477px;
    z-index: 1;
  }

  #honor_perc {
    position: absolute;
    top: 63px;
    left: 390px;
    color: #fff;
    text-shadow: 2px 2px 4px #000000;
    z-index: 2;
  }

  #ritual_progress_bar {
    position: absolute;
    top: 200px;
    left: 40px;
    height: 20px;
    width: 0px;
    min-width: 0px;
    max-width: 400px;
    z-index: 2;
  }

  #ritual_perc {
    position: absolute;
    top: 200px;
    left: 235px;
    color: #000;
    text-shadow: 2px 2px 1px #D2691E;
    z-index: 3;
  }

  #reset_ritual {
    position: absolute;
    top: 385px;
    right: 10px;
  }

/*--- RIGHT-HAND SIDE MENU ---*/

  .power_bar {
    position: absolute;
    top: 10px;
    left: 803px;
    background-color: transparent;
    z-index: 2;
    margin-left: 100px;
  }

  .tab {
    position: absolute;
    top: 55px;
    left: 793px;
    background-color: transparent;
    z-index: 2;
  }

  #Workers_tabcontent, #Buildings_tabcontent, #Military_tabcontent, #Combat_tabcontent, #Ritual_tabcontent, #Setting_tabcontent {
    height: 490px;
    width: 470px;
    position: absolute;
    top: 95px;
    left: 810px;
    overflow: scroll;
    z-index: 2;
  }

  #Workers_tabcontent {
    overflow-y: hidden;
    overflow-x: hidden;
  }

  #Buildings_tabcontent {
    overflow-x: hidden;
  }

  #Military_tabcontent {
    overflow-y: hidden;
    overflow-x: hidden;
  }

  #Combat_tabcontent {
    overflow-y: hidden;
    overflow-x: hidden;
  }

  #Ritual_tabcontent {
    overflow-y: hidden;
    overflow-x: hidden;
  }


  .tab button {
    font-size: 16px;
    text-align: center;
    font-family: KnightsQuestRegular;
    border-collapse: collapse;
    padding: 0px 2px;
  }

  button {
    padding: 4px;
    font-size: 16px;
    text-align: center;
    font-family: KnightsQuestRegular;
    border-collapse: collapse;
    display: block;
    box-sizing: border-box;
    margin: 0 auto;
    background: brown; /* fallback color for old browsers */background: rgba(102, 51, 0, 0.3);
    border-radius: 8px;
    border: 2px solid #663300;
    color: black;
    text-decoration: none;
    letter-spacing: 1px;
    transition: all 0.3s ease-out;
    box-shadow: 2px 2px 1px 1px #625C54;
  }

  button:hover {
    border: 2px solid #181502;
    -moz-box-shadow: 1px 1px 3px 2px #625C54;
    -webkit-box-shadow: 1px 1px 3px 2px #625C54;
    box-shadow: 1px 1px 3px 2px #625C54;
    background: brown; /* fallback color for old browsers */background: rgba(102, 51, 0, 0.6);
  }

  input {
    font-family: KnightsQuestRegular;
    font-size: 16px;
    border: 1px solid #663300;
  }

  .tab button.active {
  }

/*--- WORKERS MENU ---*/

  #worker_multi_left {
    position: absolute;
    top: 1.5px;
    left: 90px;
    height: 60px;
    z-index: 2;
  }

  #up1, #down1 {
    position: absolute;
    top: 2px;
    left: 125px;
    height: 60px;
    z-index: 2;
  }

  #up10, #down10 {
    position: absolute;
    top: 2px;
    left: 155px;
    height: 60px;
    z-index: 2;
  }

  #up100, #down100 {
    position: absolute;
    top: 2px;
    left: 195px;
    height: 60px;
    z-index: 2;
  }

  #up1000, #down1000 {
    position: absolute;
    top: 2px;
    left: 253px;
    height: 60px;
    z-index: 2;
  }

  #worker_multi_right {
    position: absolute;
    top: 2px;
    left: 326px;
    height: 60px;
    z-index: 2;
  }

/*--- ABOUT THE GAME ---*/
  #about_game {
    position: absolute;
    text-align: center;
    vertical-align: center;
    top: 80px;
    left: 250px;
    z-index: 10;
  }

  #about_game_text {
    position: absolute;
    text-align: center;
    vertical-align: center;
    top: 20px;
    left: 60px;
    height: 500px
    width: 350px;
    z-index: 10;
}

/*--- POSITION IMAGES OVER THE GUI ---*/
  #hello_there {
    position: absolute;
    text-align: center;
    vertical-align: center;
    top: 150px;
    left: 250px;
    z-index: 3;
  }

/*--- INITIAL GREETING TO ASK FOR NAMES/GENDER ---*/
  #welcome_input1 {
    position: absolute;
    text-align: left;
    vertical-align: center;
    top: 20px;
    left: 30px;
    z-index: 4;
    line-height: 2.5;
  }

/*--- FIRST PAGE TO ADV OF EMPEROR RESET BEING READY ---*/
  #honor_reset_initial {
    position: absolute;
    text-align: center;
    vertical-align: center;
    top: 80px;
    left: 50px;
    z-index: 10;
  }

  #honor_input1 {
    position: absolute;
    text-align: left;
    vertical-align: text-top;
    top: 10px;
    left: 20px;
    padding-left: 10px;
    padding-right: 40px;
    z-index: 10;
    line-height: 1.5;
  }

/*--- EMPEROR RESET CHOICE SELECTIONS ---*/
  #honor_reset_choices {
    position: absolute;
    text-align: center;
    top: 180px;
    left: 150px;
    z-index: 10;
  }

  #honor_reset_choice_inputs {
    position: absolute;
    text-align: left;
    top: 20px;
    left: 20px;
    padding-left: 10px;
    padding-right: 10px;
    z-index: 10;
    line-height: 1.5;
  }

/*--- EMPEROR RESET CHOICE RENAMES ---*/
  #rename_reset_0 {
    position: absolute;
    text-align: center;
    top: 180px;
    left: 150px;
    z-index: 10;
  }

  #rename_reset_input0 {
    position: absolute;
    text-align: left;
    top: 20px;
    left: 20px;
    padding-left: 10px;
    padding-right: 40px;
    z-index: 10;
    line-height: 1.5;
  }

  #rename_reset_1 {
    position: absolute;
    text-align: center;
    top: 180px;
    left: 150px;
    z-index: 10;
  }

  #rename_reset_input1 {
    position: absolute;
    text-align: left;
    top: 20px;
    left: 20px;
    padding-left: 10px;
    padding-right: 40px;
    z-index: 10;
    line-height: 1.5;
  }

  #rename_reset_2 {
    position: absolute;
    text-align: center;
    top: 180px;
    left: 150px;
    z-index: 10;
  }

  #rename_reset_input2 {
    position: absolute;
    text-align: left;
    top: 20px;
    left: 20px;
    padding-left: 10px;
    padding-right: 40px;
    z-index: 10;
    line-height: 1.5;
  }

  #rename_reset_3 {
    position: absolute;
    text-align: center;
    top: 180px;
    left: 150px;
    z-index: 10;
  }

  #rename_reset_input3 {
    position: absolute;
    text-align: left;
    top: 20px;
    left: 20px;
    padding-left: 10px;
    padding-right: 40px;
    z-index: 10;
    line-height: 1.5;
  }

  #rename_reset_4 {
    position: absolute;
    text-align: center;
    top: 180px;
    left: 150px;
    z-index: 10;
  }

  #rename_reset_input4 {
    position: absolute;
    text-align: left;
    top: 20px;
    left: 20px;
    padding-left: 10px;
    padding-right: 40px;
    z-index: 10;
    line-height: 1.5;
  }

  #rename_reset_5 {
    position: absolute;
    text-align: center;
    top: 180px;
    left: 150px;
    z-index: 10;
  }

  #rename_reset_input5 {
    position: absolute;
    text-align: left;
    top: 20px;
    left: 20px;
    padding-left: 10px;
    padding-right: 40px;
    z-index: 10;
    line-height: 1.5;
  }

  #rename_reset_6 {
    position: absolute;
    text-align: center;
    top: 180px;
    left: 150px;
    z-index: 10;
  }

  #rename_reset_input6 {
    position: absolute;
    text-align: left;
    top: 20px;
    left: 20px;
    padding-left: 10px;
    padding-right: 40px;
    z-index: 10;
    line-height: 1.5;
  }

  #decide_later1_scroll {
    position: absolute;
    top: 520px;
    left: 680px;
    z-index: 10;
  }

/*--- GUI SET-UP ---*/

  /*-----RESOURCES---*/
    .ResourceBar {
      position: absolute;
      text-align: center;
      vertical-align: center;
      top: 10px;
      left: 90px;
      z-index: 2;
    }

    #banner_GM {
      position: absolute;
      top: 565px;
      left: 340px;
      height: 20px;
      width: 70px;
      z-index: 2;
    }

    #GM1 {
      position: absolute;
      top: 508px;
      left: 320px;
      max-width: 60px;
      z-index: 2;
    }

    #banner_farm {
      position: absolute;
      top: 340px;
      left: 595px;
      height: 20px;
      width: 70px;
      z-index: 2;
    }

    #farm1 {
      position: absolute;
      top: 350px;
      left: 580px;
      max-width: 100px;
      z-index: 2;
    }

    #banner_runes {
      position: absolute;
      top: 210px;
      left: 93px;
      height: 20px;
      width: 70px;
      z-index: 2;
    }

    #wizards1 {
      position: absolute;
      top: 215px;
      left: 90px;
      max-width: 90px;
      z-index: 2;
      transform: scaleX(-1);
    }

    #banner_quarry {
      position: absolute;
      top: 242px;
      left: 690px;
      height: 20px;
      width: 70px;
      z-index: 2;
    }

    #quarry1 {
      position: absolute;
      top: 250px;
      left: 650px;
      max-width: 150px;
      z-index: 2;
    }

    #banner_lumber {
      position: absolute;
      top: 195px;
      left: 605px;
      height: 20px;
      width: 70px;
      z-index: 2;
    }

    #lumber1 {
      position: absolute;
      top: 110px;
      left: 580px;
      max-width: 120px;
      z-index: 2;
    }

    #castle1 {
      position: absolute;
      top: 105px;
      left: 105px;
      max-width: 160px;
      z-index: 2;
    }

  /*-----RITUALS---*/
    #ritual_base {
      position: absolute;
      top: 323px;
      left: 126px;
      height: 18px;
      z-index: 3;
    }

    #barrier_active {
      position: absolute;
      top: 310px;
      left: 95px;
      height: 50px;
      width: 90px;
      z-index: 4;
    }

    #onslaught_active {
      position: absolute;
      top: 270px;
      left: 100px;
      height: 85px;
      width: 70px;
      z-index: 4;
    }

    #affluent_active {
      position: absolute;
      top: 314px;
      left: 96px;
      height: 35px;
      width: 90px;
      z-index: 4;
    }

    #godspeed_active {
      position: absolute;
      top: 312px;
      left: 96px;
      height: 40px;
      width: 90px;
      z-index: 4;
    }

    #expedient_active {
      position: absolute;
      top: 310px;
      left: 96px;
      height: 40px;
      width: 90px;
      z-index: 4;
    }

    #spell_active {
      position: absolute;
      top: 290px;
      left: 42px;
      height: 50px;
      width: 200px;
      z-index: 4;
      transform: scaleY(-1);
    }

  /*-----SPELLS---*/
    #Spells_Fertile {
      position: absolute;
      top: 190px;
      left: 10px;
      max-width: 58px;
      z-index: 2;
    }

    #Spells_Fertile_Active {
      position: absolute;
      top: 190px;
      left: 10px;
      max-width: 58px;
      z-index: 3;
    }

    #Spells_Bloodlust {
      position: absolute;
      top: 255px;
      left: 10px;
      max-width: 58px;
      z-index: 2;
    }

    #Spells_Bloodlust_Active {
      position: absolute;
      top: 255px;
      left: 10px;
      max-width: 58px;
      z-index: 3;
    }

    /*--- LOVE & PEACE SPELL DISABLED DUE TO NOT WORKING AS INTENDED ---*/
        #Spells_LP {
          position: absolute;
          top: 320px;
          left: 10px;
          max-width: 58px;
          z-index: 0;
        }

        #Spells_LP_Active {
          position: absolute;
          top: 320px;
          left: 10px;
          max-width: 58px;
          z-index: 0;
        }

    #Spells_Paradise {
      position: absolute;
      top: 320px;
      left: 10px;
      max-width: 58px;
      z-index: 2;
    }

    #Spells_Paradise_Inactive {
      position: absolute;
      top: 320px;
      left: 10px;
      max-width: 58px;
      z-index: 3;
    }

    #Spells_TreeofGold {
      position: absolute;
      top: 386px;
      left: 10px;
      max-width: 58px;
      z-index: 2;
    }

    #Spells_ToG_Inactive {
      position: absolute;
      top: 386px;
      left: 10px;
      max-width: 58px;
      z-index: 3;
    }

/*-- BETA 

#beta_paper {
  position: absolute;
  top: 20px;
  left: 150px;
  z-index: 3;
}

#beta_text {
  position: absolute;
  top: 20px;
  left: 20px;
  width: 580px;
  z-index: 4;
}
--*/