/*

Dark Vibrant: #663013;
Vibrant: #d66528; - used for anchors
Light Vibrant: #eaaf8f;

Dark Muted: #523b2b;
Muted: #497894; - used for Selected items
Light Muted: #b09778; - used for NavBar


Need to update background as it appears white underneath and doesnt scale.
The links in the nav bar seem to be above their text.

*/

body, html {
	height: 100%; /* Need to extend this down otherwise the immage gets covered as the body ends */
	margin: 0;
	background-color: #523b2b; /* Defult for when pic doesnt load */
}

a {
	color: #d66528;
}

#navBar {
	background-color: #b09778; /* was lightgrey */
	padding: 1%;
	font-size: 1.7em;
	border: solid black 0.1em;
	vertical-align: middle;
}

#navText a {
	padding-left: 0.5em;
	padding-right: 0.5em;
	display: inline-block;
	position: relative;
}

.drop {
	position: relative;
	display: inline-block;
}

.dropStart {
	cursor: pointer;
}

.dropCont {
	display: none;
	position: absolute;
	width: 170%;
	z-index: 3;
	background-color: #b09778;
	border: solid black 1px;
	border-top: none;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	text-align: left;
	font-size: 0.85em;
	padding-left: 1em;
	padding-right: 1em;
}

.indentGame {
	padding-left: 1em;
}

.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

#sel {
	color:  #497894;
}

.main {
	z-index: 2;
	position: absolute;
	top: 5%;
	/* background-color: rgba(0,0,0, 0.4); */
	padding-left: 7%;
	padding-right: 7%;
	padding-top: 5%;
  color: white;
}

.dropCont .dropSub {
	color: darkred;
	font-size: 1.05em;
}

.bigHeading {
	font-size: 2em;
}

.footer {
	margin-top: 10%;
}


/* Images */

#tavernBackground {
	/* Here be problems - height and width seem wrong? */
	height: 100%;
	width: 100%;
	filter: blur(3px);
    background: url(Images/tavernBackground.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.navIcon {
	width: 1.7em;
	vertical-align: middle;
}

.navIconScroll {
	width: 2em;
	vertical-align: middle;
}

.navIconMic {
	width: 1.4em;
	vertical-align: middle;
	opacity: 70%;
}