.fullScreen{
position:absolute;
top:0;
left:0;
display:block;
width:100%;
height:100%;
background-color:rgba(39, 39, 39, 1);
z-index:1;
}

.adminButton{
	height:50px;
    width: 50px;
    border-radius: 50%;
    border: 2px solid #f5f5f5;
    overflow: hidden;
    background: radial-gradient(circle at bottom center, #6d6fab 15px, #062b46);
    box-shadow: 0 0 3px gray;
	cursor:pointer;
}
.adminButton:hover {
    background: radial-gradient(circle at bottom center, #9596ca 15px, #0a3b5f);
}

#adminButton-save{
	position:absolute;
	top:30px;
	right:130px;
}
#adminButton-save-Icon {
	color:white;
	display:block;
	width:50%;
	height:auto;
	padding:20%;
	margin:auto;
}

#adminButton-settings{
	position:absolute;
	top:80px;
	right:50px;
}

#adminButton-settings-Icon {
	color:white;
	display:block;
	width:50%;
	height:auto;
	padding-top:26%;
	margin:auto;
}

.inventory{
	position:fixed;
	display:flex;
	background: rgb(117,117,117); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(117,117,117,1) 0%, rgba(196,196,196,1) 50%, rgba(155,155,155,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(117,117,117,1) 0%,rgba(196,196,196,1) 50%,rgba(155,155,155,1) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right, rgba(117,117,117,1) 0%,rgba(196,196,196,1) 50%,rgba(155,155,155,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	width:100%;
	height:80px;
	bottom:40px;
	left:0;
	border-top:2px solid #e1ddfd;
	justify-content:center;
	z-index: 10;
}

.inventory-bottomBar{
	width:100%;
	display:inline-block;
	background: rgb(117,117,117); /* Old browsers */
	background: -moz-linear-gradient(left, rgba(72,81,113,1) 0%, rgba(129,127,156,1) 50%, rgba(49,54,78,1) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left, rgba(72,81,113,1) 0%,rgba(129,127,156,1) 50%,rgba(49,54,78,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgb(72, 81, 113) 0%,rgb(129, 127, 156) 50%,rgb(49, 54, 78) 100%);
	height:40px;
	position:fixed;
	bottom:0;
	left:0;
}

.inventoryItem{
	display:block;
	height:60px;
	width:60px;
	margin:10px;
	background-color:#7a7a7a;
	border:2px solid #a0a0a0;
	border-radius:10%;
}

#map-zoombox{
	position:relative;
	display:block;
	height:600px;
	width:1000px;
	margin:auto;
	margin-top:5%;
}

#hexTile{
	fill:currentColor; 
	}

.hexspace{color:#719274;
	transition: 300ms;
	transition-timing-function: ease-in-out;
	-webkit-transition: 300ms;
	-webkit-transition-timing-function: ease-in-out;

}

.hexspace:hover{color:#b8e4bc}	

body{
color:white;
background-color:rgba(39, 39, 39, 1);
overflow-x:hidden;
}

#mainWrapper{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

#leftBar{
	position:relative;
	display:inline-block;
	width:15%;
	height:100%;
	float:left;
	background-color:rgba(39, 39, 39, 1);
	overflow-y: scroll;
	direction:rtl;
	-webkit-user-select: none; /* Safari */        
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
}

#middleSection{
	display:inline-block;
	width:70%;
	height:100%;
	float:left;
}

.rightBar{
	display:inline-block;
	width:15%;
	height:100%;
	float:right;
	background-color:rgba(39, 39, 39, 1);
	overflow-y: scroll;
}

#progressBar{
position:relative;
bottom:10;
left:0;
width:0%;
height:100%;
background-color: blue;
}

#progressBarOuter{
position:absolute;
bottom:220px;
width:40%;
left:30%;
height:50px;
border: 2px solid white;
}

#textScrollerBox{
	z-index:8;
	position:fixed;
	width:70%;
	height:250px;
	left:15%;
	bottom:0;
	color:white;
	background-color: #272727;
	text-align:center;
	overflow:hidden;
	text-overflow:hidden;
	font-size:2em;
}

#textScrollerOverlay{
	z-index:9;
	position:fixed;
	width:70%;
	height:250px;
	left:15%;
	bottom:0;
	background-color: rgba(39, 39, 39, 1);
    background: -webkit-linear-gradient( rgba(39, 39, 39, 0) 0%, rgba(39, 39, 39, 1) 100% );
    background: linear-gradient( rgba(39, 39, 39, 0) 0%, rgba(39, 39, 39, 1) 100% );
    filter: alpha( Opacity=0, FinishOpacity=100, Style=1, StartX=0, StartY=0, FinishX=0, FinishY=500 );
}

.scrollText {
	padding-top:10px;
    -webkit-animation: moving 8s;
    animation: fadingIn 1s, moving 8s;
	animation-delay:0s, 6s;
}
@keyframes moving {
    from {transform: translateY(0px);}
    to {transform: translateY(200px);}
}
@keyframes fadingIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

body.dragging, body.dragging * {
  cursor: move !important;
}

.dragged {
  position: absolute;
  opacity: 0.5;
  z-index: 2000;
}

.rightButtons.example li.placeholder {
  position: relative;
  /** More li styles **/
}
.rightButtons.example li.placeholder:before {
  position: absolute;
  /** Define arrowhead **/
}

.rightButtons{
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	margin:0;
	padding:15px;
}



.rightButtons li{
	display:block;
	list-style-type: none;
	width:100%;
	height:60px;
	margin: auto;
	border: 2px solid white;
	border-radius: 4px;
	background-color:black;
	background-size: 20%;
	background-position:5% 50%;
	background-repeat:no-repeat;
	text-align:right;
	line-height:60px;
	font-size: 2em;
	margin-top:6px;
	cursor: pointer;
	font-family: 'Chela One', cursive;
}

.rightButtons span {
position:relative;
bottom:0;
right:0;
padding-right:6px;
}

.leftButtons{
	display:flex;
	flex-flow:row wrap;
	justify-content:flex-start;
	margin:0;
	padding:15px;
	font-family: 'Acme', sans-serif;
	text-align:center;
}



.leftButtons li{
	display:block;
	list-style-type: none;
	width:100%;
	height:60px;
	margin: auto;
	border: 2px solid white;
	border-radius: 4px;
	background-color:#272727;
	background-size: 20%;
	background-position:5% 50%;
	background-repeat:no-repeat;
	text-align:center;
	line-height:60px;
	font-size: 1.4em;
	margin-top:6px;
	cursor: pointer;
}


#woodIcon{
background-image: url("../img/mats/wood.png");
}
#stoneIcon{
background-image: url("../img/mats/stone.png");
}
#ironIcon{
background-image: url("../img/mats/iron.png");
}
#grainIcon{
background-image: url("../img/mats/grain.png");
}
#stickIcon{
background-image: url("../img/mats/stick.png");
}






/*
 *  scrollbar
 */



 
.style-1::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: #272727;
}

.style-1::-webkit-scrollbar
{
	width: 15px;
	background-color: #272727;
}

.style-1::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #8487d6;
}

.barWrapper{
	position:fixed;
display: flex;
    width: 100%;
    background-color: red;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
	top:1000px;
}

.bar-item{
	align-self:center;
	width:100%;
}