@import url(https://fonts.googleapis.com/css?family=Roboto:400,700);

body{
	margin:0;
	overflow:hidden;
	font-family: 'Roboto';
	color: #FFF
}

#alertOverlay {
  position: fixed; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(51,51,51, 0.8);
	z-index:10000;
}

#alertBar {
	text-align:center;
	margin: auto;
	position: absolute;
	height:100%;
	top: 0; left: 0; bottom: 0; right: 0;
	display: block;  
	padding:5px;
	border-radius: 7px;
	border: 2px solid #000;
	background-color: #b05d05a8;
	max-width:95%;
}

#loadingOverlay {
  position: fixed; 
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(51,51,51, 0.8);
	z-index:10010;
}

#loadingBar {
  text-align:center;
  margin: auto;
  position: absolute;
  height:100%;
  top: 0; left: 0; bottom: 0; right: 0;
  display: block;  
  padding:5px;
  border-radius: 7px;
  border: 2px solid #000;
  background-color: yellow;
  max-width:95%;
}

#floatingTextFrame{
	left: 0;
    /* line-height: 200px; */
    /* margin-top: -100px; */
    position: absolute;
    text-align: center;
    top: 70px;
    width: 90%;
	margin-left: 5%;
    font-size: 30px;
    font-weight: bold;
    color: #3ab81e;
    z-index: 1000000;
}

#primary{
	background: #4FB0DF;
	background-image: url('../img/breakout/Breakout-Splash-Screen.png');
	background-size: 100% 100%;
	width: 100vw;
	height:100vh;

	-webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;  
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
}

#mainContent{
	text-align: center;
}

#finishedSub{
  padding: 4px;
  height:calc(100vh - 50px);
  overflow-y: scroll;
}

.boxStyle{
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5), -1px -1px 0 rgba(0, 0, 0, 0.5), 1px -1px 0 rgba(0, 0, 0, 0.5), -1px 1px 0 rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
	-moz-box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
	box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
}

.boxStyle.noshadow {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	}

.topBar{
	background: #005826;
	color:#FFF;
	font-weight: bold;
	text-align: center;
	font-size: 1.2em;
	padding:5px 0 5px 0;
	border-bottom: 1px solid #000;
}
.topBar span{
	white-space: nowrap;
}

#topTabs>ul{
	padding: 0;
	margin: 0;
	text-align: center;
}

#topTabs>ul>li{
	list-style: none;
	background: #005826;
	color:#FFF;
	font-size: 1.1em;
	font-weight: bold;
	display: inline-block;
	padding: 0 12px 3px 12px;
	margin:0 5px;
	
	border: solid #000;
	border-width: 0 1px 1px 1px;
	border-radius:0 0 10px 10px;
	-webkit-box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
	-moz-box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
	box-shadow: 1px 3px 14px -3px rgba(0,0,0,1);
}

.fancyButton{
	/* text */
	text-decoration: 		none;
	font-weight: 			bold;
	text-shadow: 			1px 1px 0 hsl(88, 70%, 30%),
	-1px -1px 0 hsl(88, 70%, 30%),
	1px -1px 0 hsl(88, 70%, 30%),
	-1px 1px 0 hsl(88, 70%, 30%),
	0px 1px 0 hsl(88, 70%, 30%),
	1px 0px 0 hsl(88, 70%, 30%),
	0px -1px 0 hsl(88, 70%, 30%),
	-1px 0px 0 hsl(88, 70%, 30%),rgba(255,255,255,.5) 0 1px 0;	
		
	/* layout */
	padding: .1em .4em 0 .4em;
	display: inline-block;
	border-radius: 	8px;
	/* margin-bottom: 30px; */
		
		
	/* effects */
		border-top: 		1px solid rgba(255,255,255,0.8);
		color: 				hsl(0, 0%, 100%) !important;
		
		background-color: 	hsl(88, 70%, 60%);
		-webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
								hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
								rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
		-moz-box-shadow: 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
								hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
								rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
		box-shadow:		 	inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
								hsl(88, 70%, 40%) 0 .1em 3px, hsl(88, 70%, 30%) 0 .3em 1px, /* color border */
								rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
		border: 1px solid rgba(2, 42, 19, 0.21) !important;
}

.fancyButton[data-size="medium"]{
  font-size: 1.2em;
  margin-bottom: 10px;
}
.fancyButton[data-color="red"]{
  background-color: 	hsl(0, 70%, 60%);
  box-shadow: inset rgba(255,254,254,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */          hsl(20, 70%, 40%) 0 .1em 3px, hsl(15, 70%, 30%) 0 .3em 1px, /* color border */         rgba(255,0,0,0.2) 0 .5em 5px
}

#startGPSButton {
    height: 35px;
    text-align: center;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.itemTable{
	width: calc(100% - 10px);
	margin: 5px;
	/* margin-top: 25px; */
	box-sizing: border-box;
	
	text-align: center;
	font-size: 42px;
	border-radius: 10px;
	
	/* border-collapse: collapse; */
}

.itemTable td{
	background-color: rgb(153 153 153 / 40%);
	background-repeat: no-repeat;
    background-size: contain;
	background-position: top;
	border-radius: 7px;
	/* border: 1px solid #000; */
}

.itemTable th{
	font-size: 20px;
	text-align: left;
	color: #000;
	padding-left: 5px;
}

.itemTable .keyCell{
	height: 120px;
	max-width: 25%;
	width: 25%;
	vertical-align: bottom;
	font-weight: bold;
	color: #fff;
	text-shadow: 
    -1px -1px 0 #000,  
     1px -1px 0 #000,
    -1px  1px 0 #000,
     1px  1px 0 #000; /* Set the shadow to create the outline effect */
	font-size: 16px;
}

td>img.x_img{/* Don't show X by default */
	display: none;
}
td.selected>img.x_img{/* Add X when selected */
	display: block;
}

.x_img {
    width: 100%;
}

.itemTable.shrink .keyCell, .itemTable.shrink img{
	height: 50px;
	font-size: 12px
}

/* Table Backgrounds */
.itemTable[clue-type="character"]{
	background-color: #f43939;
}
.itemTable[clue-type="location"]{
	background-color: #ffe065;
}
.itemTable[clue-type="vehicle"]{
	
	background-color: #5BCBF4;
}

/* Cell Styles */
.itemTable[clue-type="location"] td{
	border: 2px solid #b79202;
	background-color: #FFE065;
}
.itemTable[clue-type="vehicle"] td{
	border: 2px solid #256278;

}
.itemTable[clue-type="character"] td{
	border: 2px solid #973737;
}

.itemTable[clue-type="location"] td.selected{
	background-color: #cbb045;
}

.itemTable[clue-type="vehicle"] td.selected{
	background-color: #4398b7;
}

.itemTable[clue-type="character"] td.selected{
	background-color: #c99393
}



#messageBox{
	padding: 5px;
	text-align: center;
	/* Make sure messages can scroll. 648 is a total calculated based on current page height above messages */
	max-height: calc(100vh - 648px);
	background: hwb(200 31% 13% / 0.75);
	overflow: auto;
	position: absolute;
	bottom: 25px;
}

/* for when the table is shrunk above it */
#messageBox.shrink{
	max-height: calc(100vh - 220px);
}
#messageBox.shrunk{
	font-size: .7em;
}

/*Toggle Switch*/
/* https://proto.io/freebies/onoff/ */
.onoffswitch {
	position: relative; width: 90px;
	user-select: none;
	-webkit-user-select:none;
	-moz-user-select:none;
	-ms-user-select: none;
}
.onoffswitch-checkbox {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.onoffswitch-label {
	display: block; overflow: hidden; cursor: pointer;
	border: 2px solid #999999; border-radius: 20px;
}
.onoffswitch-inner {
	display: block; width: 200%; margin-left: -100%;
	transition: margin 0.1s ease-in 0s;
}
.onoffswitch-inner:before, .onoffswitch-inner:after {
	display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
	font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
	box-sizing: border-box;
}
.onoffswitch-inner:before {
	content: "Easy";
	padding-left: 20px;
	padding-right: 20px;
	background-color: #005826; color: #FFFFFF;
}
.onoffswitch-inner:after {
	content: "Hard";
	padding-right: 10px;
	background-color: #217043; color: #FFFFFF;
	text-align: right;
}
.onoffswitch-switch {
	display: block; width: 18px; margin: 6px;
	background: #FFFFFF;
	position: absolute; top: 0; bottom: 0;
	right: 56px;
	border: 2px solid #999999; border-radius: 20px;
	transition: all 0.1s ease-in 0s; 
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
	margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
	right: 0px; 
}

.fullScreenLandscapeImage{/* Make a wide image fit to a full screen landscape view */
	max-height: 100vw !important;
    max-width: 100vh !important;
    position: fixed;
    left: 0px;
    top: 0px;
    transform: rotate(90deg) translateY(-100%);
    transform-origin: top left;
}




#bottomWrapper{
	position: absolute;
	bottom:0px;
	width:100%;
	background: rgba(30, 136, 201, 1);
	color:#FFF;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
	border-top: 1px solid #000;
}

#bottomArea{
	text-align: center;
	width: 100%;
}

#bottomArea .boxStyle{
	padding: 5px;
	border-radius:10px 10px 0 0;
	/* background: #005826; */
	font-weight: bold;
	text-align: center;
	color:#FFF;
	border: solid #000;
	border-width: 1px 1px 0 1px;
	display: inline-block;
	vertical-align: bottom;
	font-size: 1.1em;
}


#mesh, #mazeMapOverlay, #mazeGPSOverlay{
	position: fixed;
	top:0;
	left:0;
	background: rgba(0, 0, 0, 0.5);
	width: 100vw;
	height: 100dvh;
	z-index: 99;
	/*display: none;*/
}

#mazeGPSOverlay{
  background: rgba(255, 255, 255, 0.95);
  color: #000;
}

#mazeMapOverlay, #mazeGPSOverlay{
  padding: 0;
}

#map_canvas{
	width:100%;
	height:100dvh;
}


#mapImg{
  max-width: 100vw;
  max-height: 100vh;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
  overflow: hidden;
}

#mapClose, #gpsClose{
  font-weight:bold;
  font-size:24px;
  right:20px;
	top:20px;
	position: fixed;
	z-index: 101;
  background: rgba(199, 199, 199, 0.8);
  border:1px solid #000;
  color: rgba(0,0,0,0.8);
  width: 25px;
  text-align: center;
}
#gpsClose{
  padding: 0;
  margin: 0;
}
#meshClose{
	right:2px;
	top:2px;
	position: absolute;
	z-index: 101;
}

#gpsClose{
  background: #FFF;
  border-radius:3px;
  border: gray solid 1px;;
  color: rgba(72, 72, 72, 0.81);
}



#overlay{
	width: calc(100vw - 28px);
	height: calc(100vh - 28px);
	margin: 14px;
	padding:15px;
	z-index: 100;
	position: fixed;
	top:0;
	left:0;
	background: #FFFDE5;
	border: 1px solid #000;
	box-sizing: border-box;
  overflow-y: scroll;
}

#advancedPuzzles{
	width: calc(100vw - 28px);
	/* height: calc(100vh - 28px); */
	height: 100vh;
 	height: -webkit-fill-available;/* In conjunction with 100vh, this accounts for changing page head */
	margin: 14px;
	padding:15px;
	z-index: 100;
	position: fixed;
	top:0;
	left:0;
	background: #fffde5db;
	border: 1px solid #000;
	box-sizing: border-box;
  	overflow-y: scroll;
}

/*Completion Page*/
.endingSmaller{
	font-size: .8em;
}

#entryForm>fieldset{
  border: none;
}

#entryForm>fieldset>input:first-child{
  border-radius: 5px 5px 0 0 ;
}

#entryForm>fieldset>input:last-child{
  border-radius: 0 0 5px 5px;
}

#entryForm input[type="text"]{
  float:left;
	font-family: 'Roboto', sans-serif;
  font-size:1em;
	border:solid 1px #939393;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.39), 0 -1px 1px #FFF, 0 1px 0 #FFF;
	padding: 0 30px 0 5px;
	box-sizing:border-box;
	outline-color: rgb(118, 118, 118);
  width:100%;
}

#entryForm input[type="checkbox"]{
  float: left;
}




@media all and (min-height: 560px) and (min-width: 350px){/*Large Phone, iPhone 6*/
	body{
		font-size:1.2em;
	}
	.pointsList>li{
		width:40px;
		height: 40px;
	}
	.pointsList>li>img{
		position: absolute;
		width: 40px;
		height:auto;
		left: 0;
		top:-10px;
	}
	.pointsList>li>img.vegIcon, .pointsList>li>img.checkmark{
		width: 40px;
	}

}

@media screen and (orientation:landscape) {
  #bottomWrapper{
    display: none;
  }
  body{
    overflow: auto;
  }
  #mesh, #primary, #mazeGPSOverlay{
    height: 100%;
  }
  #overlay{
    height: 100%;
  }
}