/***************** GENERAL CONFIG *****************/
*,
body,
html{
  margin:0;
  padding:0;
  white-space:nowrap;
  position:absolute;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  overflow:hidden;
  /* No selection */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /* No unwanted drag */
  -webkit-user-drag: none; /* Prevents dragging of images/divs etc */
  user-drag: none;
}
html,
body{
    width:100%;
    height:100%;
    background:black;
}
#whole{
  height:100%;
  width:100%;
  background:url('museumbackground.jpg');
  /*background-repeat:no-repeat;*/
  background-size:100% 100%;
}

/************************************************* ipad ***********************************************/
#ipad{
  /* Controlled in drag.js */
  /*top:10px;
  left:150px;*/
  cursor:move;
  cursor:grab;
  cursor:-moz-grab;
  cursor:-webkit-grab;
  width:600px;
  height:405px;
  background:url('white.png');
  background-size:100%;
  /*-webkit-animation: rotatipad 10s infinite alternate;
  animation: rotatipad 10s infinite alternate;*/
}
@keyframes rotatipad{
  from{left:150px;top:10px;}
  25%{left:150px;top:50px}
  50%{left:250px;top:100px;}
  to{left:250px;top:10px;}
}
@-webkit-keyframes rotatipad{
  from{left:150px;top:10px;}
  25%{left:150px;top:50px}
  50%{left:250px;top:100px;}
  to{left:250px;top:10px;}
}
#screen{
  background:url('welcome.png');
  background-position:0px 0px;
  background-size:100% !important;
  width:81%;
  margin-left:10%;
  height:91%;
  margin-top:3%;

}
/********** Questbox ***************/
.questbox{
  height:12%;
  width:100%;
  background:rgba(255,255,255,0.7);
}
.questbox h2{
  top:30%;
  left:4%;
  font-size:90%;
  width:20%;
  font-style:italic;
}
.questbox p{
  top:30%;
  left:32%;
  width:70%;
  font-size:90%;
}
.questbox .questarrow{
  opacity:0.8;
  left:17%;
  top:35%;
  width:10%;
  height:35%;
}

/************* Points box **********/
.pointscounter{
  width:30%;
  height:15%;
  top:13%;
  left:5%;
  /*background:rgba(255,255,255,0.5);*/
}
.pointscounter .bar{
  width:80%;
  top:10%;
  left:10%;
  height:30%;
  box-shadow:rgba(0,0,0,1) 0px 0px 4px;
  border:solid rgba(0,0,0,0.6) 2px ;
}
.pointscounter .liquid{
  background:rgba(120,120,210,0.7);
  width:0%;
  height:100%;
}
.pointscounter .pointsbox{
  width:80%;
  height:50%;
  left:10%;
  top:40%;
}
.pointsbox p{
  font-size:100%;
  left:20%;
  top:23%;
}
.pointsbox .points{
  left:65%;
  top:0%;
  font-size:150%;
}
/********** Focus square ***********/

.focus{
  left:65%;
  top:22%;
  width:6%;
  height:8%;
  border-radius:3px;
  -webkit-animation: fadefade 2s linear infinite alternate;
  animation: fadefade 2s linear infinite alternate;
}
@keyframes fadefade{
  from{opacity:1;}
  50%{opacity:0;}
  to{opacity:1;}
}
@-webkit-keyframes fadefade{
  from{opacity:1;}
  50%{opacity:0;}
  to{opacity:1;}
}

/*********** Map ****************/
img.map{
  opacity:0.9;
  width:15%;
  left:80%;
  top:10%;
  box-shadow:rgba(0,0,0,1) 0px 0px 5px;
  border-radius:4px;
  transition: border-radius 400ms;
}
img.map:hover{
  border-radius:50%;
  opacity:1;
  cursor:pointer;
}
/*********** Find parent ************/
.findparent{
  background:rgba(0,0,0,0.7);
  width:15%;
  height:5%;
  top:31%;
  left:80%;
  border-radius:2px;
  color:white;
  text-shadow:rgba(255,255,255,0.5) 0px 0px 1px;
}
.findparent:hover{
  cursor:pointer;
  background:rgba(0,0,0,0.85);
  text-shadow:rgba(255,255,255,1) 0px 0px 1px;
}
.findparent p{
  left:12%;
}

/********************************************** phone ********************************************/
#phone{
  /* Controlled in drag.js */
  /*top:10px;
  left:150px;*/
  cursor:move;
  cursor:grab;
  cursor:-moz-grab;
  cursor:-webkit-grab;
  width:154px;
  height:300px;
  background:url('phone.png');
  background-size:100%;
  transition:margin-left 800ms;
}

#phonescreen{
  background:url('welcomephone.png');
  width:85%;
  margin-left:8%;
  height:66%;
  margin-top:34%;
	background-size:100% 100%;
}

/********************************* Outsidetheboxes **********************************/
.outsidethebox{
  width: auto;
  height:62px;
  background:rgba(255,255,255,0.8);
  top:75%;
  border-radius:0px 5px 5px 0px;
  box-shadow:rgba(0,0,0,1) 0px 0px 5px;
  left:0;
  transition:left 200ms;
}
.outsidethebox p{
	background: rgba(150,180,200,0.8);
	box-shadow: rgba(0,0,0,.5) 0px 0px 3px;
	border-radius: 3px;
	padding: 15px 30px;
	position: relative;
	display: inline-block;
	margin: 8px 10px;
}
.outsidethebox p:hover{
  background:rgba(120,120,210,0.7);
  box-shadow:rgba(0,0,0,1) 0px 0px 5px;
  cursor:pointer;
}

.outsidethebox2{
  width: auto;
  height:62px;
  background:rgba(255,255,255,0.8);
  top:75%;
  border-radius:0px 5px 5px 0px;
  box-shadow:rgba(0,0,0,1) 0px 0px 5px;
  right:-5px;
  transition:left 200ms;
}
.outsidethebox2 p{
	background: rgba(150,180,200,0.8);
	box-shadow: rgba(0,0,0,.5) 0px 0px 3px;
	border-radius: 3px;
	padding: 15px 40px;
	position: relative;
	display: inline-block;
	margin: 8px 10px;
}
.outsidethebox2 p:hover{
  background:rgba(120,120,210,0.7);
  box-shadow:rgba(0,0,0,1) 0px 0px 5px;
  cursor:pointer;
}