/* BASE RESET
-------------------------------------------------------------- */
*, img {margin : 0; padding : 0; }
img, a img { border: 0;	}
body {
	margin: 0 0 20px 0; 
	padding: 0; 
	background: #606060;
	font: bold 87.5%/114.4% "Cabin", sans-serif; /*approx 14px/16px*/
	color: #fff;
	}
	
* {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	-webkit-user-select: none;
	}

img {
	-webkit-touch-callout: none;
}


/* SHARED ELEMENT STYLES 
-------------------------------------------------------------- */
a, a:visited { text-decoration: underline; color: #86260A;}
a:active { color: #277CB7; }
h2 { margin: 1.2em 0 .5em 0; }
h3 { margin: 1em 0 .25em 0; color: #4379B4;}
p { line-height: 1.3em; margin-bottom: 10px;}
small { font-size: 1.428em; display: block; }

.centered { text-align: center; }

.btn, .btn:visited {
	padding: 1px 25px 0 25px;
	background: #DEAA1A;
	-webkit-border-radius: 12px;
	border-radius: 12px;
	-webkit-box-shadow: 3px 3px 0px #AD8014;
	box-shadow: 3px 3px 0px #AD8014;
	text-align: center;
	text-decoration: none;
	color: #fff;
	font-size: 35px;
	line-height: 45px;
	display: inline-block;
	}

.btn:active {
	margin: 2px 0 -2px 3px;
	-webkit-box-shadow: 1px 1px 0px #AD8014;
	box-shadow: 1px 1px 0px #AD8014;
	color: #fff;
	}


.big, .big:visited { 
	-webkit-border-radius: 16px;
	border-radius: 16px;
	background-color: #BAD330;
	padding: 10px 22px;
	-webkit-box-shadow: 3px 3px 0px #555200;
	box-shadow: 3px 3px 0px #555200;
	color: #FEFF8C;
}

.big:active {
	margin: 1px 0 -1px 2px;
	-webkit-box-shadow: 1px 1px 0px #555200;
	box-shadow: 1px 1px 0px #555200;
	color: #FEFF8C;
}

.img-btn {
	display: block;	
	text-indent: -99999px;
	background-repeat: no-repeat;
	margin-bottom: 15px;
}

/* specific buttons */
.btn-ok { width: 222px; height: 135px; background: transparent url(../i/btn_ok_feedback.png) center -135px; }
.btn-photo { width: 453px; height: 91px; background: transparent url(../i/btn_gallery.png) center -91px; }
.btn-play { width: 444px; height: 91px; background: transparent url(../i/btn_keepplaying.png) center -91px; }
/* end specific buttons */

.img-btn:active { background-position: center 0px; }
.wf-inactive .btn { font-size: 1em; } 
.wf-loading .btn { visibility: hidden; }

.pos-absolute { position: absolute; }

.contain-bg {
	-webkit-background-size: contain;
	background-size: contain;
	}

.hidden { display: none; }

.invisible { visibility: hidden; }

.spin {
	-webkit-animation: spin 1.5s 1000 linear;
	-webkit-transform-origin: 50% 50%;
}

@-webkit-keyframes spin {
	0% { -webkit-transform: rotate(0deg); }
	8.2% { -webkit-transform: rotate(0deg); }
	8.3% { -webkit-transform: rotate(30deg); }
	16.6% { -webkit-transform: rotate(30deg); }
	16.7% { -webkit-transform: rotate(60deg); }
	24.9% { -webkit-transform: rotate(60deg); }
	25% { -webkit-transform: rotate(90deg); }
	33.2% { -webkit-transform: rotate(90deg); }
	33.3% { -webkit-transform: rotate(120deg); }
	41.6% { -webkit-transform: rotate(120deg); }
	41.7% { -webkit-transform: rotate(150deg); }
	49.9% { -webkit-transform: rotate(150deg); }
	50% { -webkit-transform: rotate(180deg); }
	58.2% { -webkit-transform: rotate(180deg); }
	58.3% { -webkit-transform: rotate(210deg); }
	66.6% { -webkit-transform: rotate(210deg); }
	66.7% { -webkit-transform: rotate(240deg); }
	74.9% { -webkit-transform: rotate(240deg); }
	75% { -webkit-transform: rotate(270deg); }
	83.2% { -webkit-transform: rotate(270deg); }
	83.3% { -webkit-transform: rotate(300deg); }
	91.6% { -webkit-transform: rotate(300deg); }
	91.7% { -webkit-transform: rotate(330deg); }
	99.9% { -webkit-transform: rotate(330deg); }
	100% { -webkit-transform: rotate(360deg); }
}

#alert {
	background-image: none;	
	background-color: rgba(0,0,0,.7);
	color: #1D2071;
	font-size: 46px !important;
	line-height: 1.1em;
	position: absolute;
	top: 0;
	left: -1000px;
	z-index: 100;
}

#alert div {
	width: 500px;
	height: 686px;
	padding: 22px 23px;
	margin: 46px auto 0 auto;
	background-color: #C3ECFE;
}

#alert p { padding-bottom: 291px; margin-bottom: 16px; } /* bottom padding to accomodate image */

#alert .img-btn {
	margin: 0 auto 20px auto;
}

.feedback p { background: transparent url(../i/ruff_feedback_positive.png) center bottom no-repeat; }
.negative p { background-image: url(../i/ruff_feedback_negative.png); }
.earned-photo p { background: transparent url(../i/ruff_feedback_win_photo.png) center bottom no-repeat; }

/* ORIENTATION CHANGE ALERT
-------------------------------------------------------------- */
#orien {
	z-index: 1500; 
	visibility: hidden;
	background: rgba(0,0,0,.7) url(../i/orient.png) no-repeat;
	background-position: center 10px;
	-webkit-background-size: 54%;
	background-size: 54%;
	}


/* HEADER
-------------------------------------------------------------- */
#top {
	display:block;
	width: 640px;
	margin: 0 auto;
	background: #E8BD33;
	height: 83px;
	}
	
#pbs, #logo { float: left; }
#home { float: right; margin: 20px 20px 0 0;}

#pbs img { width: 58px; margin: 15px 16px 0 16px; }
#logo { width: 255px; background: #DEAA1A; padding: 5px 40px 8px 45px; }
	

/* SCREEN CONTAINER
-------------------------------------------------------------- */
.screen-space {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	overflow: hidden;
	background: #606060 url(../i/bg_default.png);
	width: 640px; 
	height: 832px; 	
}

.editorial { background: #EAEFB5; color: #806647; font-weight: normal; padding-bottom: 20px; height: auto; }
.editorial h1 { font-weight:bold; margin: 1.2em 0 .7em 0; color: #161850; font-size: 2.28em; line-height: 1.1em; }
.editorial h2, .editorial h3 { font-size: 2em; color: #3D4DB8; font-weight:bold; }
.editorial h3, .editorial p, .editorial li, .editorial td  { font-size: 24px; }
.editorial p, .editorial li, .editorial td  { color: #655640; } 
.editorial .note { font-size: 1.43em; text-align: center; } 
.editorial p, 
.editorial h1, 
.editorial h2, 
.editorial h3,
.editorial ul,
.editorial ol,
.editorial table { padding: 0 20px; }
.editorial li { margin: 0 25px 7px 30px; line-height: 1.25em; }
.editorial #play-area .btn, .editorial #play-area .btn:visited { margin: 18px 0; }
.editorial #play-area .btn:active { margin: 20px 0 16px 3px; }	


/* INTRO SCREEN
-------------------------------------------------------------- */	
#intro { position: relative; z-index: 90; margin-top: 83px; } /* height of the header */

.ok { height: 89px; width: 146px; background: url(../i/btn_ok_timer.png) center -89px no-repeat; }
.ok:active { background-position: center 1px; }

#intro-area { height: 660px; background: #665933 url(../i/intro_screen_justaminute.png) center top no-repeat; }
#late #intro-area { background-image: url(../i/intro_screen_yourlate.png); }
#fetchcal #intro-area { background-image: url(../i/intro_screen_fetchcal.png); }
#snack #intro-area { background-image: url(../i/intro_screen_snackattack.png); }

#loader { position: relative; top: 180px; left: 210px; }


/* UNLOCK SCREEN
-------------------------------------------------------------- */	
#unlock-page {
	background: #DEAA1A;
}

/* Bar width sections */
.bar, .bar:visited {
	width: 404px;
	min-height: 16px;
	padding: 11px;
	margin: 28px auto 0 auto;
	overflow: auto;
	-webkit-border-radius: 17px;
	border-radius: 17px;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	}

/* Featured  */
.feature {
	min-height: 31px;
	text-align: left;
	background-color: #ebf0a1;
	padding: 8px 15px;
	}

.feature a, .feature a:visited { text-decoration: none; font-weight: bold; color: #cb353d; }
.feature a:active { color: #8f3035; }

.mobile-app-link img {
	width: 55%;
	margin: 9px auto;
	display: block;
}

.feature .label {
	float: left;
	width: 254px;
	color: #48662e;
	font-weight: bold;
	padding:  0;
	font-size: 1.75em;
	line-height: 1.18em;
	}

.feature .btn, .feature .btn:visited {
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	float: right;
	width: 112px;
	padding: 8px 10px 5px 10px;
	margin: 5px 3px 0 0; 
	border: 3px solid #004158;
	background: #3b96c5;
	-webkit-border-radius: 14px;
	border-radius: 14px;
	-moz-box-shadow: 2px 2px 0px #004158;
	-webkit-box-shadow: 2px 2px 0px #004158;
	box-shadow: 2px 2px 0px #004158;
	text-align: center;
	color: #fff;
	font-weight: bold;
	font-size: 2.1em;
	line-height: 1em;
	}
.wf-inactive .feature .btn { font-size: 1em; } 
.wf-loading .feature .btn { visibility: hidden; }

	
.feature .btn:active {
	display: block;
	background: #025f90;
	margin: 7px 0px 0 0;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	color: #fff;
	}

.feature p {
	clear: both;
	}
	
.feature .note {
	font-size: .7857em;
	color: #0b5873;
	padding-top: 3px;
	padding-bottom: 0;
	}


/* end featured button */

/* GAME SCREEN
-------------------------------------------------------------- */	
.instruc {
	background: #5EA3CF;
	width: 100%;
	padding: 17px 20px 14px;
	font-size: 24px;
	overflow: auto;
	line-height: 1.25em;
}

.txt {
	float: left;
	width: 67%;
}

.btns {
	float: right;
	width: 30%;
	margin-top: 7px;
	clear: none;	
	text-align: center;	
}

.sup-txt {
	font-size: 30px;
	color: #1E2172;
	margin-top: 11px;
	line-height: 1.15em;
	display: block;
}
/* end game screen */