/*Determines the width and behaviour for different screen sizes*/
#boardContainer {
	width: 100%;
}
#mission {
	width: 100%;
	position: relative;
}
.missionSmall {
	width: 7vw;
    z-index: 4;
}
#missionShownContainer {
	width: 65%;
	margin: auto;
	position: relative;
}
#missionOverlay {
	position: absolute;
	top: 0vw;
}
#missionBackground {
	width: 65%;
}
@media only screen and (min-width: 900px) and (min-device-width: 900px) {
	#boardContainer {
		width: 60%;
	}
	#mission {
		width: 40%;
		position: relative;
		padding-top: 5vw;
	}
	.missionSmall {
		width: 5vw;
        z-index: 4;
	}
	#missionShownContainer {
		width: 100%;
		display: inline-block;
		margin: 200px, 0px;
		position: relative;
	}
	#missionOverlay {
		position: absolute;
		top: 5vw
    }
	#missionBackground {
		width: 100%;
	}
}

/*
Determines the size of everything in the guildboard 
*/
#guildTable {
    min-width: 600px;
}

.board {
    width: 100%;
}

#pins {
    position:absolute;
    left:0;
    pointer-events: none;
}


/*
Positioning of all little missions
*/
#boardContainer {
    position: relative;
}

#a1Container {
    position: absolute;
    bottom: 46%;
    right: 30%;
}

#a2Container {
    position: absolute;
    bottom: 42%;
    right: 15%;
}

#a3Container {
    position: absolute;
    bottom: 27%;
    right: 27%;
}

#a4Container {
    position: absolute;
    bottom: 22%;
    right: 12%;
}

#c1Container {
    position: absolute;
    bottom: 44%;
    left: 29%;
}

#c2Container {
    position: absolute;
    bottom: 28%;
    left: 36%;
}

#c3Container {
    position: absolute;
    bottom: 22%;
    left: 20%;
}

#c4Container {
    position: absolute;
    bottom: 38%;
    left: 11%;
}

#i1Container {
    position: absolute;
    top: 24%;
    left: 40%;
}

#i2Container {
    position: absolute;
    top: 17%;
    left: 24%;
}

#i3Container {
    position: absolute;
    top: 8%;
    left: 45%;
}

#i4Container {
    position: absolute;
    top: 20%;
    left: 62%;
}

#s1Container {
    position: absolute;
    top: 38%;
    right: 45%
}

#emptyContainer {
    position: absolute;
    bottom: 15%;
    right: 0%
}