body
{
	text-align: center;
	background-image: url("../images/beach.jpg");
	background-repeat: no-repeat;
	background-size: 100% 100%;
}

#left::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
#left::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

.dropdown:hover .dropdown-menu 
{
    display: block;
    margin-top: 0;
 }

#brand
{
	color: white;
}

#navi
{
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

#WordArea
{
	position: relative;
	top: 20pt;
	font-size: 2.2vw;
	font-family: Impact;
	text-shadow: 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff;
}

#LevelArea
{
	position: relative;
	top: 6pt;
	font-size: 4vw;
	font-family: "Arial Black";
	text-shadow: 1px 0 0 #fff, 0 -1px 0 #fff, 0 1px 0 #fff, -1px 0 0 #fff;
}

#genre
{
	position: relative;
	top: 9pt;
	font-size: 2.3vw;
	font-family: "Arial Black";
	text-shadow: 1px 0 0 rgb(220,220,220), 0 -1px 0 rgb(220,220,220), 0 1px 0 rgb(220,220,220), -1px 0 0 rgb(220,220,220);
}

#correctArea
{
	position: relative;
	top: 32pt;
	font-size: 2.6vw;
	font-family: "Arial Black";
	margin-bottom: -30pt;
}

#hint
{
	font-size: 10pt;
	font-family: "Arial";
}

#content
{
	width: 100%;
	height: 100%;
}
#left
{
	width: 16vw;
	height: 80vh;
	float: left;
	background-color: white;
	border: black solid .5vw;
	margin-left: 3vw;
	margin-top: 2vh;
	border-radius: 2px;
	overflow-y: scroll;
}
#right
{
	margin-left: 16vw;
	position: relative;
	left: -3vw;
	height: 100%;
}


#instructions
{
	font-size: 1.8vw;
}

ul
{
	list-style-type: disc;
	position: relative;
	left: -10pt;
	font-family:"Comic Sans MS";
	font-size: 1vw;
}

#hintDiv
{
	margin:0 auto;
	width: 30vw;
	position: relative;
	left: 2.3vw;
	top: 25pt;
	background-color: #FFE4B5;
	border:#000000 solid 2pt;
	border-radius: 20px;
	transition: transform 0.4s ease;
	transform: rotate(0deg);
	opacity: .90;
}

#answerBox
{
	position: relative;
	top: 20pt;
	border-radius: 8px;
	font-size: 2vw;
	width: 24vw;
	text-align:center;
	visibility: visible;
}

#welcomeArea
{
    font-family:Courier;
    font-size: 2vw;
    display: inherit;
}

#previousHigh
{
	font-family:Courier;
    font-size: 1.3vw;
    display: none;
}

#currentDifficulty
{
	font-family:Courier;
    font-size: 1.3vw;
    display: none;
}

#hintArea
{
	font-family: Tahoma;
	font-size: 1.4vw;
	display: inherit;
}

#hint
{
	font-family: Tahoma;
	font-size: 1.0vw;
	display: inherit;
	opacity: .94;
}

#spinClick
{
	cursor:pointer;
	font-family:Courier;
    font-size: 1.3vw;
    opacity: .94;
}

#splashScreen
{
	display: inherit;
	position: absolute;
	top: 10vh;
	left: 2.5vw;
	width: 95vw;
	height: 80vh;
	opacity: .94;
	background-color: rgb(245, 245, 245);
	border: black 1px solid;
	border-radius: 20px;
}

#container
{
	margin-top: 20vh;
}

#selectingMsg
{
	font-family: "Arial Black";
	font-size: 2.4vw;
	position: relative;
	top: 4vh;
}

#option
{
	font-family: "Arial Black";
	font-size: 1.2vw;
}

#playButton
{
	background-color: rgb(210, 210, 210);
	font-family: "Arial Black";
	font-size: 1.4vw;
	border-radius: 10px;
	position: relative;
	top: 15pt;
}

#pauseButton
{
	margin-top: -1pt;
	width: 3.5vw;
	cursor: pointer;
}

#diff
{
	position: relative;
	top: 15pt;
}