@charset "utf-8";
/* CSS Document */
body { -webkit-user-select: none; }
input { -webkit-user-select: auto; }

canvas{
	margin: 0 auto 0 auto;
	padding:0px;
}

#ActivityHdrBar, #ActivityWrapper, .hiddenObject_unfound, .revealImage_init, #Counter, #CluePanel, #CP_PicClips, .CP_picLabel, #CP_NameClips, .CP_nameLabel, #ZoomBtn, #HintBtn, #HintOverlay{
	/*start everything off with reduced opacity until we get the dimensions/positioning values in from our data file*/
	opacity:0.01;
}

#ActivityWrapper{
position: relative;
padding: 0px;
background: #00AEEF;
background-position: left top;
overflow: hidden;
}

/**********INTRO SCREEN****************/
#IntroScreenTxt img{
	position:relative;
	margin-left:142px; /* will vary across game types */
}

/**********OUTTRO SCREEN****************/
#OutroScreen{
	position:absolute;
	top:0px;
	left:0px;
  right: 0;
	background:none;
	z-index:180;
}
#OutroScreenBackshade{
	position:absolute;
	top:0px;
	width:100%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  background-color: rgba(0,174,255, 0.85);
}


#OutroScreenTxt{
	position:relative;
	margin:75px auto 0px auto;
	text-align:center;
  font-family: 'Museo Sans W03';
  color: white;
  font-weight: 500;
  font-size: 32px;
}
#OutroScreenTxt p{
	position:relative;
	margin:35px auto 0px auto;
	width:342px;
  font-family: 'GrilledCheeseBtn';
  color: white;
  font-size: 72px;
}
#foxImgBottom {
  display: block;
  width: 200px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.outro_fb_win{
	color:#000;
}
.outro_fb_loss{
	color:#FFF;
}

#OutroScreenRibbon{
	position:absolute;
	top:140px;
	width:629px;
	height:269px;
	background:url(../../images_common/WWUSA_minigame_ribbon-ylw.png) no-repeat;
	text-align:center;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

#BackToRaceBtn{
	position:absolute;
	top:328px;
	width:211px;
	height:79px;
	cursor:pointer;
	background:url(../../images_common/WWUSA_backToRaceBtn.png) no-repeat;
	z-index:100;
  left: 0;
  right: 0;
  margin: 0 auto;
}
@media (max-width: 600px) {
  #OutroScreenRibbon {
    width: 400px;
    left: -10px;
    background-size: contain;
  }
  #OutroScreenTxt p {
    margin-top: 25px;
    font-size: 50px;
  }
  #BackToRaceBtn {
    top: 250px;
  }

}
@media (max-width: 600px) {
  #OutroScreenRibbon {
    width: 300px;
    left: 0px;
    background-size: contain;
  }
  #OutroScreenTxt p {
    font-size: 35px;
    margin-left: -20px;
  }

}

/********************************************/

#MainImage{
	/*position:absolute;*/
	position:relative;
	z-index:10;
	padding:0px;
	margin-top:2px;
}

#SpotMask{
	margin: 0px;
	padding:0px;
	position:absolute;
	top:0px;
	left:0px;
	overflow:hidden;
	z-index:-1;
}

.hiddenObject_unfound {
	position:absolute;
	cursor:pointer;
	/*opacity:.5;*/
}
.hiddenObject_trans {
	opacity:0;
}
.hiddenObject_found {
	position:absolute;
	/*cursor:default; this can be awkward for overlapping hotspot (bounding boxes) */
	opacity:1;
}
.mainImage_bw {
	cursor:pointer;/**/
}
.mainImage_col {
	cursor:default;
}
.revealImage_init {
	z-index:110;
}

#Hotspots{
	margin: 0px;
	padding:0px;
	position:relative;
	overflow:hidden;
}

#CluePanel{
	position:relative;
	z-index:1;
	float:right;
/*background:url(../images/HPI_cluePanel_startBG.png) no-repeat;*/
	background-position: left top;
	margin-top:-30px;
}
#CP_Toggle{
font: 18px 'Syntax W01 Roman', Tahoma, sans-serif;
letter-spacing: 2px;
padding: 30px 10px 5px 10px;
color: #FFF;
}
fieldset {
	border: 0;
	padding: 0px;
	margin: 0px;
}
label {
	display: block;
	/**/
	padding: 0px;
	margin: 0px;
	text-shadow: 0 -1px 0 rgba(0,0,0,.2);
}

.label_check input {
	position: absolute;
	left: -9999px;
}
.label_check {
	cursor: pointer;
	width:100px;
	padding-left: 25px;
	background: url(../images/HPI_checkbox-off.png) no-repeat;
	background-position:0px 2px;
}
label.c_on {
	background: url(../images/HPI_checkbox-on.png) no-repeat;
	background-position:0px 2px;
}

#CP_StartTxt{
width: 320px;
font: 15px/1.5 'Syntax W01 Bold', Tahoma, sans-serif;
letter-spacing: 1px;
padding: 6px 0px 0 12px;
color: #FFF;
margin-bottom: 1em;
}

#CP_PicClips{
	position:relative;
	/*z-index:-1;*/
}
.CP_picClip, .CP_picClip_hilited{
	position:relative;
	float:left;
	text-align:center;
	cursor:pointer;
}
.CP_picClip{
	background: url(../images/HPI_CP_picClip_BG.png) no-repeat;
}
.CP_picClip_hilited{
	background: url(../images/HPI_CP_picClip_selected_BG.png) no-repeat;
}
.CP_picLabel{
	position:absolute;
	font: 12px/12px 'Syntax W01 Roman', Tahoma, sans-serif;
	letter-spacing:1px;
	color:#FFF;
}

.CP_checkmark{
	position:absolute;
	width:20px;
	height:20px;
	background: url(../images/HPI_checkmark.png) no-repeat;
}

#CP_NameClips{
	position:relative;
	z-index:-1;
	padding-top: 1.5em;
}
.CP_nameClip{
	display:block;
	text-align:left;
	padding-left:20px;
	height:20px;/**/
	background: url(../images/HPI_namesCheckbox-off.png) no-repeat;
	cursor:pointer;
}
.CP_nameLabel{
	position:absolute;
	font: 12px/12px 'Syntax W01 Roman', Tahoma, sans-serif;
	letter-spacing:1px;
	color:#FFF;
	cursor:pointer;
	padding-left: .5em;
}
.CP_name_hilited{
	color:#FFE511;
}

#HintOverlay{
position: relative;
/* padding:10px; */
/* color: #009900; */
font: 36px/12px 'Syntax W01 Roman', Tahoma, sans-serif;
background: #fff;
border: solid;
border-width: 2px;
border-color: #00AEEF;
margin-right: 10px;
cursor: pointer;
z-index: -1;
}
.CP_overlayLabel{
	position:absolute;
	font: 22px/20px 'Syntax W01 Roman', Tahoma, sans-serif;
	letter-spacing:1px;
	color:#FFF;
	text-align:center;
}
.CP_overlayLabel_sub{
	font: 17px/20px 'Syntax W01 Roman', Tahoma, sans-serif;
}

/***** GLOBAL ELEMENTS *******/

#ActivityHdrBar{
	position:relative;
	z-index:0;
	display:block;
	margin:0px;
	padding:0px;

	height:50px;
	/*background:url(../images/HPI_hdr_bg.png) no-repeat;
	background-position: left top; */
}

#Timer, #QuitBtn, #HintBtn, #ZoomBtn, #Counter{
	top:0;
}

#Timer{
	position:absolute;
	margin:0px;
	padding:0px;
	left: 370px;
	width: 97px;
	height: 43px;
	background: url(../../images_common/WWUSA_timer_bg.png) no-repeat;
}
#Timer_time{
	text-align:center;
	padding: 0px;
	margin: 10px 0px 0px 0px;
	font: 24px 'Syntax W01 Bold', Tahoma, sans-serif ;
	line-height:1;
	color:#fff;
}

#QuitBtn{
	position:absolute;
	z-index:50;
	left:9px;
	width:98px;
	height:43px;
	cursor:pointer;
	background: url(../../images_common/WWUSA_quitBtn.png) no-repeat;
}

.Hdr_btns{
	cursor:pointer;
}

#HintBtn{
position: absolute;
z-index: 50;
/* left: 536px; */
width: 120px;
height: 48px;
text-align: center;
cursor: pointer;
background: url(../../images_common/WWUSA_hintBtn.png) no-repeat;
}

#ZoomBtn{
	position:absolute;
	z-index:70;
	left:723px;
width: 43px;
height: 43px;
text-align: center;
cursor: pointer;
top: 7px;
}

.zoomedIn{
	background: url(../../images_common/WWUSA_zoomBtn_out.png) no-repeat;
}
.zoomedOut{
	background: url(../../images_common/WWUSA_zoomBtn_in.png) no-repeat;
}

#Counter{
	position:absolute;
	left: 129px;
	width: 220px;
	height: 43px;
	text-align:left;
	white-space:nowrap;
	background:url(../../images_common/WWUSA_counter_bg.png) no-repeat;
	z-index:20;
	top: .25em;
}
.ctr_found{
	margin-left:15px;
}
.ctr_found, .ctr_of{
	color:#fff;
	font-size:14px;
	text-transform:uppercase;
}
.ctr_numFound{
	margin-left:20px;
}
.ctr_numFound, .ctr_total{
	color:#face3d;
	font-size:30px;
	vertical-align:middle;
}
.ctr_found, .ctr_numFound, .ctr_of, .ctr_total{
	font-family: Trebuchet, sans-serif;
	padding-right:4px;

	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

#SFX{
	visibility:hidden;/**/
}