/* CSS for DCT web app / game / map */

p, a, h1, h2{
font-family:Arial,Helvetica,sans-serif; 
}

#map { position:fixed !important; top:0; left:0; width:100%; height:100%; margin:0; padding:0; background-color:#f7f7f3 !important; }

.geoBtn{
position:fixed; 
bottom:5px; 
right:15px; 
width:30px; 
height:30px;
background-size:30px auto; background-position: 0 -30px; background-repeat:no-repeat;
background-image:url(images/geoIcon.png);
z-index:800;
}

.game_intro {
color:#b0b0b0;
position: fixed;
height:50%;
width:100%;
left:0;
margin:0;
border:solid 1px #000;
padding:0;
z-index:9;
background-color: rgba(0,0,0,0.6);
overflow-y:scroll;
}

.game_intro:hover {
background-color: rgba(0,0,0,0.8);
color:#fff;
}

.game_intro_container {
padding:2% auto 40px auto;
margin:0 30px;

text-align:center;

}

.game_intro h1 {
 font-family:"Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-weight: bold;
}


#game1 {
top:0;
}

#game2 {
bottom:0;
}

.startBtn{ 
margin:20px auto;
width:200px;
height:35px;
color:white;
font-size:14px;
font-weight:bold;
text-decoration:none;
display:block;
cursor:pointer;
line-height:32px;
text-align:left;
text-shadow: 1px 1px 0 #000;
background-image:url(images/playIcon.png);
background-position: 99% 50%; 
background-size:15px auto;
background-repeat:no-repeat; 
}

#startBtn1 {background-color:#002a4f;   
}

#startBtn2, #exitBtn { background-color:#b2003c; 
 }
 
#startBtn3 { background-color:#850157; 
 }
 
 #nextBtn { background-color:#015462; 
 }
 
.startBtn:hover {line-height:35px; background-position: 99% 60%;}

#activity_window {
text-align:center;
position:fixed;
width:100%;
height: 100%;
border:solid 1px #ccc;
margin:0;
bottom:0;
left:0;
background-color:rgba(245,245,245,0.8);
display:none;
z-index:100;
transition:height 1s;
-webkit-transition:height 1s; /* Safari */
overflow-y:scroll;

}

#activity_container {
max-width: 600px;
margin: 20px auto;
 }

#activity_text {
margin-left -20px; 
background-color:rgb(255,255,255);
border:solid 1px #ccc;
max-width: 600px;
padding:15px;
}

#activity_image {
margin-left -20px; 
width:100%;
height: auto;
}

#activity_window.minimised {
 height:40px;
 }
 
 #activity_window.success {
background-color:#99FF99;
 }

#activity_container {
padding:5px 0 0 20px;
color: #000;
visibility:visible;
}

#activity_container.hidden {
 visibility:hidden;
 }

#minimise{
position:absolute;
width:100%;
height:45px;
top: 0px;
left:0px;
cursor:pointer !important;
background-color:transparent;
padding:0;
background-position: 15px 15px; 
background-size:20px auto;
background-repeat:no-repeat; 
border-bottom:1px solid #aaa;
}

#minimise.open{
background-image:url(images/closeIcon.png);
}

#minimise.closed{
background-image:url(images/openIcon.png);
}


/* Small Tablet and Smaller */


@media all and (max-width:820px) {

p, a {
font-size: 80%;
}

h1, h2, h3 {
font-size: 14px;
}

}