html 
{ 
	height: 100%;
}


body
{
	background-color:#000000;
	width: 100%;
	height: 100%;
	margin: 0px;
	padding: 0px;
}


#topBar 
{
	position: relative;
	width: 100%;
	margin: 0 auto;
	z-index: 100;
    text-align: center;
}

#topBarBG
{
	background-color:#5F6738;
	position: relative;
	width: 100%;
	height: 100%;
    padding-bottom: 0px;
}

#titleText{
    margin-top: auto;
    display: inline-block;
    font-family: 'Baloo Paaji', sans-serif;
	font-size: 4vmin; 
    color:#FFCC33;
    text-align: right
    user-select: none;
    -webkit-user-select: none; 
    text-shadow: rgb(0, 0, 0) 0px 2px 4px;
}

.byLogoText{
    color:white;
    text-shadow: rgb(0, 0, 0) 0px 0px 0px;
	font-size: 2vmin; 
}

.logo_header_white{
    width:12%;
    vertical-align: bottom;
    padding-bottom: 17px;
}


#questionPanel{
	background-color:#CBCBA3;
	position: relative;
	width: 100%;
	margin: 0 auto;
	height: 70px;
	box-shadow: 2px 2px 5px #000000;
    z-index: 85;
	transition: top 0.4s ease-in-out;
}

#questionText{
    font-family: 'Open Sans', sans-serif;
	font-size: 22px;
    font-weight:700;
    text-align: center;
    padding-top: 8px;
    user-select: none;
}

#questionCountTracker{
    text-align: center;
}

.questionDotClass{
    display: inline-block;
    position: relative;
    border-radius: 50%;
    background-color:#5F6738;
    margin-top:5px;
    width:10px;
    height:10px;
	border-style: solid;
	border-width: 2px;
	border-color: #5F6738;
}


#mapDiv 
{
	background-color:#ccc;
	position: relative;
	width: 100%;
	height: 80%;
	margin: 0 auto;
}

.mapSectImage
{
	width: 100%;
}


#mapHolder
{
	background-color:#fff;
	position: relative;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
}

#canvasLineHolder{
	position: absolute;
	width: 95%;
	height: 95%;
    z-index: 9839;
}

#mapParts
{
	position: absolute;
	width: 100%;
	height: 100%;
	margin-left: auto;
	margin-right: auto;
	z-index: 1;
}

.mapSectDiv
{
	position: relative;
}

#mapSect2 {	top:-4px; }
#mapSect3 {	top:-8px; }
#mapSect4 {	top:-12px; }



.pinClass /*applying the pinClass*/
{
	position: absolute;
    top:250px;
    left:200px;
    z-index: 200;
    transform: rotate(220deg);
    visibility: hidden;
}


#pinCirc 
{
	border-radius: 50%;
	top: -13px;
	left: 34px;
	width: 20px;
	height: 20px;
	position: absolute;
	background: #FFCC33;
	border-style: solid;
	border-width: 2px;
	border-color: black;
    box-shadow: 2px 2px 5px #000000;

}

#pinHit 
{
	border-radius: 50%;
	top: -17px;
	left: 10px;
	position: absolute;
	background: rgba(255, 0, 0, 0);
	width: 55px;
	height: 35px;
}

#pinDot 
{
	border-radius: 50%;
	position: absolute;
	background: rgb(0, 0, 0);
	width: 8px;
	height: 8px;
	left:-4px;
	top:-4px;
}

#pinLine 
{
	position: absolute;
	background: rgb(0,0,0);
	width: 35px;
	height: 4px;
	top:-2px;
}

#trueLocDot{
	border-radius: 50%;
	position: absolute;
	background: blue;
	border-style: solid;
	border-width: 1px;
	border-color: blue;
	width: 8px;
	height: 8px;
	left:7px;
	top:7px;
    z-index: 9;
    visibility:hidden;
}


#scorePanel{
    position:absolute;
    width: 100%;
    height:50px;
    top=400px;
    z-index:10;
    text-align:center;
    visibility:hidden;
}

#scoreBox{
    display:inline;
    font-family: 'Open Sans', sans-serif;
	font-size: 1em;
    font-weight:700;
    color: #FFCC33;
    position:relative;
    border-radius: 10px;
    width: 100px;
    height: 30px;
    top: 6px;
    padding:8px;
    padding-top:40px;
    background-color: #5F6738;
	margin: 0 auto;
    vertical-align: bottom;
}

#mainAlert{
    position:absolute;
    border-radius: 10px;
    width:300px;
    top: 60px;
    left: 40px;
    text-align: center;
    padding:10px;
	z-index: 95000;
    cursor:default;
}

#alertSignature{
    padding-left:100px;
    font-family: 'Open Sans', sans-serif;
	font-size: .95em;
    font-weight:800;
}

#mainAlertText{
    position: relative;
    font-family: 'Open Sans', sans-serif;
	font-size: 1.2em;
    font-weight:200;
    color: #f7f2df;
    text-align: left;
    padding: 8px;
    line-height: 1.3;
}

#mainAlertBtn1{
    display: inline-block;
    position: relative;
    border-radius: 6px;
    font-family: 'Open Sans', sans-serif;
	font-size: 1em;
    font-weight:700;
    text-align: center;
    background: #FFCC33;
    margin:0;
    line-height: 1;
    padding: 6px;
    margin-top:8px;
    cursor:pointer;
}


#alertBGInteractionBlocker{
    position: absolute;
    background: rgba(222,222,222,0);
    top:0px;
    left:0px;
    width:100%;
    height:100%;
	z-index: 94999;
}

#scorePop{
    position:absolute;
    border-radius: 10px;
    width:200px;
    text-align: center;
    padding:10px;
    background: #5F6738;
	box-shadow: 2px 2px 5px #000000;
    box-shadow: 1px 3px 12px 2px #000000;
	z-index: 100;
    cursor:default;
    visibility: hidden;
}

#scorePopMessage{
    position: relative;
    font-family: 'Open Sans', sans-serif;
	font-size: 19px;
    font-weight:200;
    color: #f7f2df;
    text-align: center;
    padding-top: 8px;
    line-height: 1;
}

#scorePopMessage2{
    position: relative;
    font-family: 'Open Sans', sans-serif;
	font-size: 19px;
    font-weight:700;
    color: #f7f2df;
    padding-top: 16px;
    line-height: 1;
}


#scorePopMessageEnd{
    position: relative;
    font-family: 'Baloo Paaji', sans-serif;
	font-size: 19px;
    font-weight:700;
    color: #f7f2df;
    padding-top: 16px;
    line-height: 1;
    color:#FFCC33;
    user-select: none;
    text-shadow: rgb(0, 0, 0) 0px 2px 4px;
}


#scorePopBtn{
    display: inline-block;
    position: relative;
    border-radius: 6px;
    font-family: 'Open Sans', sans-serif;
	font-size: 16px;
    font-weight:700;
    text-align: center;
    background: #FFCC33;
    margin:0;
    line-height: 1;
    padding: 6px;
    margin-top:8px;
    cursor:pointer;
}

#scoreDivider{
    position: relative;
    background: #FFCC33;
    width: 100px;
    height: 1px;
    margin: 0 auto;
    visibility: hidden;
}

#bottomBar 
{
	position: absolute;
	background-color: #CBCBA3;
	width: 100%;
	height: 70px;
    bottom:0;
	box-shadow: 2px -2px 5px #000000;
    font-family: 'Open Sans', sans-serif;
	font-size: 1.25em;
    font-weight:700;
    text-align: center;
	z-index: 10000;
}

#versionNum{
    position: absolute;
    color: #5F6738;
    font-family: 'Open Sans', sans-serif;
	font-size: .6em;
    margin-bottom: 3px;
    padding: 2px;
    display:none;
}


#displayConsole{
    font-family: 'Open Sans', sans-serif;
	font-size: 30px; 
    position:absolute;
    top: 40px;
    left: 40px;
    width: 550px;
    padding: 10px;
    background-color: #FFCC33;
    z-index: 9999
}


/* responsive elements -------------------------------*/
@media screen and (min-width: 980px) /* Desktop */ {

}

@media screen  and (max-width: 979px) /* Tablet */ {
}

@media screen and (max-width: 800px) /* Mobile */ {
    #scorePop{
        width:120px;
        padding:7px;
    }

    #scorePopMessage{
        font-size:12px;
        padding-top: 5px;
        line-height: .9;
    }

    #scorePopMessage2{
        font-size:12px;
        padding-top: 10px;
        line-height: .9;
    }


    #scorePopMessageEnd{
        font-size:12px;
        line-height: .9;
    }

    #scorePopBtn{
        font-size:10px;
        padding: 4px;
        margin-top:8px;
    }
    
    #questionText{
        font-size:16px;
    }

    #mainAlertImg{
        width:300px;
        height:304px;
    }
}