* {
  box-sizing: border-box;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  margin:0;
  padding:0;
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10+ and Edge */
  user-select: none; /* Standard syntax */
  -webkit-user-drag: none;
}

#pageFrame {
  background: #0b2539;
  height: calc(var(--vh, 1vh) * 100);
  padding: calc(var(--vh, 1vh) * .9);
}

.board {
  background-image: url(resources/objects/backgroundWoodLightLarge.png);
  outline: white 2px solid;
  height: calc(var(--vh, 1vh) * 98.2);
  position:absolute;
  overflow: hidden;
  right: 1vh;
  width: calc(var(--vh, 1vh) * 107.8);
}

.trays {
  height: calc(var(--vh, 1vh) * 96);
  position: absolute;
  left: calc(var(--vh, 1vh) * .5);
  width: calc(100vw - calc(var(--vh, 1vh) * 107.8) - calc(var(--vh, 1vh) * 2.8));
}

.trayResourceCards {
  background: white;
  height:calc(var(--vh, 1vh) * 23.5);
  width: calc(100vw - calc(var(--vh, 1vh) * 107.8) - calc(var(--vh, 1vh) * 2.8) - calc(var(--vh, 1vh) * 7));
  border: black 1px solid; 
  float: left;
}

[id^="trayPlayer"] {
  overflow: auto;
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

.building-tray {
  background: white;
  float: left;
  height: calc(var(--vh, 1vh) * 7.01);
  width: calc(var(--vh, 1vh) * 7);
  border-color: black;
  border-style: solid;
  border-width: 1px 1px 0px 0px;
  position: relative;
}

.building-tray img {
  border-radius: 50%;
  height: calc(var(--vh, 1vh) * 6.5);
  position: absolute;
  width: calc(var(--vh, 1vh) * 6.5);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.road-tray {
  background: white;
  border-color: black;
  border-style: solid;
  border-width: 1px 1px 1px 0px;
  float: left;
  height: calc(var(--vh, 1vh) * 9.5);
  width: calc(var(--vh, 1vh) * 7);
  margin-bottom: calc(var(--vh, 1vh) * 1.5);
  position: relative;  
}

.road-tray:last-of-type {
  margin-bottom: 0vh;
}

.road-tray img {
  height: calc(var(--vh, 1vh) * 1.75);
  position: absolute;
  width: calc(var(--vh, 1vh) * 8);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%)  rotate(90deg);
}

#robber {
  height: 150%;
  transform: translate(10%, -50%);
  width: auto;
}

.edge-top-bottom {
  float:left; 
  height: calc(var(--vh, 1vh) * 6);
}
.edge-top-bottom img {
  margin: 0;
  position: relative;
  left: 50%;
  height: calc(var(--vh, 1vh) * 16);
  width: calc(var(--vh, 1vh) * 18.49350649);
}

.edge-top img {
  top: 37.5%;
  transform: translate(-50%, -62.5%);
}

.edge-bottom img {
  top: 62.5%;
  transform: translate(-50%, -37.5%);
}

.edge-side {
  border: black 1px solid;
  float:left; 
  width: calc(var(--vh, 1vh) * 8.103896104);
}

.edge-side img {
  margin: 0;
  position: relative;
  top:50%;
  height: calc(var(--vh, 1vh) * 16);
  width: calc(var(--vh, 1vh) * 18.49350649);
}

.edge-left img {
  left: 50%;
  transform: translate(-47%, -50%);
}

.edge-right img {
  left: 50%;
  transform: translate(-53%, -50%);
}

.edge-bottom img {
  top: 62.5%;
  transform: translate(-50%, -37.5%);
}

.row-small-half {
  float:left; 
  height: calc(var(--vh, 1vh) * 1.1);
}
.row-small {
  float:left; 
  height: calc(var(--vh, 1vh) * 2.2);
}

.row-large {
  float:left;  
  height: calc(var(--vh, 1vh) * 6.8);
}

.column {
  float:left; 
  width: calc(var(--vh, 1vh) * 3.85);
}

.column-half {
  float:left; 
  width: calc(var(--vh, 1vh) * 1.925);
}

.tile {
  position:relative;
}

.tile img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: calc(var(--vh, 1vh) * 17.8);
  width: calc(var(--vh, 1vh) * 15.4);
}

.rotated60 {
  transform: rotateZ(60deg);
 }

 .rotated120 {
  transform: rotateZ(120deg);
 }

 .rotated180 {
  transform: rotateZ(180deg);
 }

 .rotated240 {
  transform: rotateZ(240deg);
 }

 .rotated300 {
  transform: rotateZ(300deg);
 } 
 .buildingSpace {
   border-radius: 50%;
 }
 
.buildingSpace, .roadSpace {
  position:relative;
  z-index: 10;
}

.building img {
  border-radius: 50%;
  height: calc(var(--vh, 1vh) * 5);
  left: 50%;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--vh, 1vh) * 5);
  z-index:10;
}

.road-straight {
  position:relative;
}

.road-straight img {
  margin: 0;
  position: absolute;
  top: 155%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(0deg);
  height: calc(var(--vh, 1vh) * 8);;
  width: calc(var(--vh, 1vh) * 1.5);
  z-index:7;  
}

.road-forward-slash {
  position:relative;
}

.road-forward-slash img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(330deg);
  height: calc(var(--vh, 1vh) * 1.5);
  width: calc(var(--vh, 1vh) * 6.5);
  z-index: 7;  
}

.road-back-slash {
  position:relative;
}

.road-back-slash img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(30deg);
  height: calc(var(--vh, 1vh) * 1.5);
  width: calc(var(--vh, 1vh) * 6.5);
  z-index:7;  
} 

#trayDice, #trayLongestRoad, #trayLargestArmy, #trayDevelopmentCards {
  height:calc(var(--vh, 1vh) * 26.8);
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
  width:15.4vh;
}

#trayLongestRoad, #trayLargestArmy {
  bottom: 0;
  height: max-content;
  left: 0;
  top: unset;
}

#trayDevelopmentCards {
  height:calc(var(--vh, 1vh) * 28);  
  left: 0;
  text-align: left;
}

.developmentCard {
  background: white;
  background-image: url(resources/cards/cardsCatan/back.png);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  border-color: white;
  border-style: solid;
  border-radius: 2vh;
  height: calc(var(--vh, 1vh) * 20);
  position: absolute;
  width: calc(var(--vh, 1vh) * 13);
}

[id^="trayPlayer"] .developmentCard, [id^="trayPlayer"] .bonusCard {
  border-radius: 0;
  float: left;
  height: calc(var(--vh, 1vh) * 11.5);
  position: relative;
  width: calc(var(--vh, 1vh) * 7.475);
}

#trayDevelopmentCards .developmentCard p {
  display: none;
}
.developmentCard img {
  height: 100%;
  display: none;
  position: relative;
  width: 100%;
}

.mystyle img{
  display: block;
}
.developmentCard p {
  background: none;
  font-size: 3.5vh;
  left: 50%;
  line-height: 3.5vh;
  top: 79%;
  position: absolute;
  text-align: center;
  transform: translate(-50%, -50%);
  width: 6vh;
}

#deck img {
  height: auto;
  position: relative;
  width: 95%;
}

#trayLargestArmy {
  left: unset;
  right: 0;
}

#trayLongestRoad img, #trayLargestArmy img {
  height: auto;
  width: 95%;
}

#boxDeckNumber {
  left: 0vh;
  bottom: 0vh;
  font-size: 3vh;
  position: absolute;
  text-align: center;
  width: 80%;
}

#deckNumber {
  background: none;
  border: none;
  font-size: 3vh;
  text-align: center;
  width: 95%;
}

button {
  height: 5vh;  
  margin: 1px;
  margin-bottom: 6%;
  position: relative;
  left: 0;
  bottom: 0;
  width: 95%;
}

[class^="die"] {
  background-size: contain;
  background-repeat: no-repeat;
  height: 10vh;
  left: 50%;
  position: relative;
  transform: translate(-50%, 0%);
  width: 10vh;
}

#button-roll {
  font-size: 2vh;
}

.die img {
  height: 10vh;
  width: 10vh;
  }

.die1 {
  background-image: url('resources/objects/dieRoll1.png');
}

.die2 {
  background-image: url('resources/objects/dieRoll2.png');
}

.die3 {
  background-image: url('resources/objects/dieRoll3.png');
}

.die4 {
  background-image: url('resources/objects/dieRoll4.png');
}

.die5 {
  background-image: url('resources/objects/dieRoll5.png');
}

.die6 {
  background-image: url('resources/objects/dieRoll6.png');  
}


#iconNewGame:after       { content: "\27f3"; } 
#iconHelp:after      { content: "\003F"; } 
#iconRules:after { content: "\2637"; }

.tooltipText {
  color: white;
  background: #0b2539;
  font-size: 1.25vh;
  line-height: calc(var(--vh, 1vh) * 2.5);
  position: absolute;
  visibility: hidden;
  width: calc(var(--vh, 1vh) * 5);
}

#iconNewGame:hover .tooltipText, #iconHelp:hover .tooltipText, #iconRules:hover .tooltipText {
  visibility: visible;
} 

.nav {
  list-style: none;
  align-content: center;
  display: flex;
  font-size: .9vh;
  flex-wrap: wrap;
  height: calc(var(--vh, 1vh) * 5);
  justify-content: end;
  position: absolute;
  right: calc(var(--vh, 1vh) * 1);
  bottom: calc(var(--vh, 1vh) * 20);
  width: calc(var(--vh, 1vh) * 17.5);
  z-index: 1;

  height: calc(var(--vh, 1vh) * 17.5);
  width: calc(var(--vh, 1vh) * 5);
}

.nav li {
  position: relative;
  display: inline-block;
  margin-left: calc(var(--vh, 1vh) * -.8);
}

.nav a {
  display: block;
  background-color: #f7f7f7;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
  background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -moz-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -ms-linear-gradient(top, #f7f7f7, #e7e7e7); 
  background-image: -o-linear-gradient(top, #f7f7f7, #e7e7e7); 
  color: #a7a7a7;
  font-size: 3vh;
  margin: calc(var(--vh, 1vh) * 3/4);
  width: calc(var(--vh, 1vh) * 5);
  height: calc(var(--vh, 1vh) * 5);
  position: relative;
  text-align: center;
  text-decoration: none;
  line-height: calc(var(--vh, 1vh) * 5);
  
  box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
}

.nav li:before {
  content: "";
  display: block;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #fff;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  z-index: -1;
}

.nav a:before {
  content: "";
  display: block;
  background: #fff;
  border-top: 2px solid #ddd;
  position: absolute;
  top: calc(var(--vh, 1vh) * -3/8);
  left: calc(var(--vh, 1vh) * -3/8);
  bottom: calc(var(--vh, 1vh) * -3/8);
  right: calc(var(--vh, 1vh) * -3/8);
  z-index: -1;
  box-shadow: inset 0px calc(var(--vh, 1vh) * 8/144) calc(var(--vh, 1vh) * 1) #ddd;
}

#warningLandscape {
  background: #0b2539;
  color: white;
  display: none;
  font-size: 8vh;
  height: calc(var(--vh, 1vh) * 100);
  justify-content: center;
  position: absolute;
  text-align: center;
  width: 100%;
  z-index: 100;
}

#warningLandscape p {
  position: absolute;
  top: 50%;
  transform: translate(0%, -50%);
  width: 100%;
}

@media screen and (orientation:portrait) {
  #warningLandscape {
    display: block;
  }  
  html {
    background: #0b2539;
  }  
  #pageFrame {
    display: none;
  }
}

@media screen and (min-aspect-ratio: 3/2) {
  [id^="trayPlayer"] .developmentCard, [id^="trayPlayer"] .bonusCard {
    float: left;
    height: calc(var(--vh, 1vh) * 11.5 * 1.5 );
    position: relative;
    width: calc(var(--vh, 1vh) * 7.475 * 1.5 );
  }  
}