/* Copyright 2009 Palm, Inc.  All rights reserved. */

.back-tutorial .f0,
.back-tutorial .f1,
.back-tutorial .f2,
.back-tutorial .f3,
.back-tutorial .f4,
.back-tutorial .f5,
.back-tutorial .f6,
.back-tutorial .f7,
.back-tutorial .f8,
.back-tutorial .f9,
.back-tutorial .f10,
.back-tutorial .f11,
.back-tutorial .f12,
.back-tutorial .f13,
.back-tutorial .f14,
.back-tutorial .f15,
.back-tutorial .f16,
.back-tutorial .f17,
.back-tutorial .f18,
.back-tutorial .f19,
.back-tutorial .f20,
.back-tutorial .f21,
.back-tutorial .f22,
.back-tutorial .f23,
.back-tutorial .f24,
.back-tutorial .f25,
.back-tutorial .f26,
.back-tutorial .f27,
.back-tutorial .f28,
.back-tutorial .f29,
.back-tutorial .f30,
.back-tutorial .f31,
.back-tutorial .f32,
.back-tutorial .f33,
.back-tutorial .f34,
.back-tutorial .f35,
.back-tutorial .f36,
.back-tutorial .f37,
.back-tutorial .f38,
.back-tutorial .f39 {
	display: none;
}
 
.back-tutorial .frame-0  .f0,
.back-tutorial .frame-1  .f1,
.back-tutorial .frame-2  .f2,
.back-tutorial .frame-3  .f3,
.back-tutorial .frame-4  .f4,
.back-tutorial .frame-5  .f5,
.back-tutorial .frame-6  .f6,
.back-tutorial .frame-7  .f7,
.back-tutorial .frame-8  .f8,
.back-tutorial .frame-9  .f9,
.back-tutorial .frame-10 .f10,
.back-tutorial .frame-11 .f11,
.back-tutorial .frame-12 .f12,
.back-tutorial .frame-13 .f13,
.back-tutorial .frame-14 .f14,
.back-tutorial .frame-15 .f15,
.back-tutorial .frame-16 .f16,
.back-tutorial .frame-17 .f17,
.back-tutorial .frame-18 .f18,
.back-tutorial .frame-19 .f19,
.back-tutorial .frame-20 .f20,
.back-tutorial .frame-21 .f21,
.back-tutorial .frame-22 .f22,
.back-tutorial .frame-23 .f23,
.back-tutorial .frame-24 .f24,
.back-tutorial .frame-25 .f25,
.back-tutorial .frame-26 .f26,
.back-tutorial .frame-27 .f27,
.back-tutorial .frame-28 .f28,
.back-tutorial .frame-29 .f29,
.back-tutorial .frame-30 .f30,
.back-tutorial .frame-31 .f31,
.back-tutorial .frame-32 .f32,
.back-tutorial .frame-33 .f33,
.back-tutorial .frame-34 .f34,
.back-tutorial .frame-35 .f35,
.back-tutorial .frame-36 .f36,
.back-tutorial .frame-37 .f37,
.back-tutorial .frame-38 .f38,
.back-tutorial .frame-39 .f39 {
	display: block;
}

.back-tutorial {
	background: rgb(0, 0, 0);
	position:fixed;
	top:0px;
	height:100%;
	width:100%;
	font-size:18px;
}

.back-tutorial #tutorialframe {
	position:relative;
	top:0px;
	left:0px;
	right:0px;
	height:432px;
}

.back-tutorial .black {
	position:fixed;
	width:100%;
	height:100%;
	background-color: #000;
}

.back-tutorial .back-gesture-training-view {
	position:fixed;
	width:100%;
	height:100%;
	min-height:480px;	
	background:url(../images/tutorial/landscape_00000.png) top center no-repeat;
}

.back-tutorial .description {
	position:fixed;
	left:0px;
	right:0px;
	bottom: 24px;
	margin-left: 20px;
	margin-right: 20px;
	padding-bottom: 78px;
	text-align:center;
	line-height: 24px;
	font-size: 20px;
	color: #EEE;   
}
.on-device-demo .back-tutorial .description {
	bottom:0px;
}

.back-tutorial .back-gesture-training-view #buttons.up {
	bottom:24px;
}
.on-device-demo .back-tutorial .back-gesture-training-view #buttons.up {
	bottom:0px;
}
.back-tutorial .back-gesture-training-view #buttons.down {
	bottom:-300px;
}

.back-tutorial .back-gesture-training-view .buttons {
	position:fixed;
	left: 0px;
	right: 0px;
}

.back-tutorial .back-gesture-training-view .gesture-area-small {
	position:fixed;
	top: 118px;
	left: -4px;
	width:100%;
	height:97px;
	display: none;
	z-index: 50;
}

.back-tutorial .back-gesture-training-view .gesture-area-big {
	position:fixed;
	top: 148px;
	left: -6px;
	width:100%;
	height:97px;
	display: none;
	z-index: 50;
}

.back-tutorial .back-gesture-training-view .finger-div {
	position: absolute;
	top: 480px;
	left: 92px;
	width:100%;
	height: 382px;
	display: none;
	z-index: 50;
}

.back-tutorial .back-gesture-training-view .ripple-div {
	position:fixed;
	width:100%;
	height:350px;
	display: none;
	overflow: hidden;
	z-index: 40;
}

.back-tutorial .back-gesture-training-view .swipe-div {
	position:absolute;
	top:150px;
	left: 92px;
	width:100%;
	height:326px;
	display: none;
	z-index: 45;
}
	
.back-tutorial .back-gesture-training-view .orb-div {
	position:absolute;
	top:162px;
	left:111px;
	width:100%;
	height:350px;
	display: none;
	overflow: hidden;
	z-index: 50;
}

.back-tutorial .back-gesture-training-view .glow-div {
	position:fixed;
	width:100%;
	height:100%;
	min-height:480px;	
	display: none;
	z-index: 100;
}

.back-tutorial #instructions.up {
	-webkit-transition: bottom .5s ease-in-out;
	bottom:24px;
}
.on-device-demo .back-tutorial #instructions.up {
	bottom:0px;
}
.back-tutorial #instructions.down {
	-webkit-transition: bottom .5s ease-in-out;
	bottom:-300px;
}
.back-tutorial #instructions.down > div {
	visibility:hidden;
}

.back-tutorial .instructions {
	background: url(../images/tutorial/ODD_BG_screens_16.png); /*pre-load*/
	background-position: 0px -36px;
	position:fixed;
	padding-top: 20px;	/* Need padding to accomodate the height of the rounded corners */
	left:0px;
	right:0px;
}

.back-tutorial .instruction {
	font-size: 18px;
	color: #EEE;   
	padding: 10px 20px;
	line-height: 20px;
}

.back-tutorial .instruction .centered {
	text-align: center;
	padding: 10px 40px;
}
/* for localization */
.back-tutorial #second-try-text { 
	padding:10px;
}

.back-tutorial .subtitle {
	font-size:14px;
	padding: 10px 20px;
}

.back-tutorial .palm-button {
	margin:0px 10px 10px;
}

.back-tutorial .photos-1-hierarchy-1,
.back-tutorial .photos-1-hierarchy-2,
.back-tutorial .photos-1-hierarchy-3,
.back-tutorial .photos-2-hierarchy-1,
.back-tutorial .photos-2-hierarchy-2,
.back-tutorial .photos-2-hierarchy-3 {
	float:right;
	height: 82px;
	width: 90px;
	background:url(../images/tutorial/ODD_BG_screens_10.png) center center no-repeat;
}
.back-tutorial .photos-1-hierarchy-2 {
	background:url(../images/tutorial/ODD_BG_screens_11.png) center center no-repeat;
}
.back-tutorial .photos-1-hierarchy-3 {
	background:url(../images/tutorial/ODD_BG_screens_12.png) center center no-repeat;
}
.back-tutorial .photos-2-hierarchy-1 {
	background:url(../images/tutorial/ODD_BG_screens_13.png) center center no-repeat;
}
.back-tutorial .photos-2-hierarchy-2 {
	background:url(../images/tutorial/ODD_BG_screens_14.png) center center no-repeat;
}
.back-tutorial .photos-2-hierarchy-3 {
	background:url(../images/tutorial/ODD_BG_screens_15.png) center center no-repeat;
}

.back-tutorial.palm-dark .palm-popup-content .title {
	font-size: 20px;
}

.back-tutorial .photo-albums-view {
	background:url(../images/tutorial/ODD_BG_screens_01.png) top center no-repeat;
}

.back-tutorial .photo-albums-view .album-text {
	position:absolute;
	left:15px;
	font-size:20px;
	color:white;
}
.back-tutorial .frame-10 .photo-albums-view .album-text.all-images,
.back-tutorial .frame-10 .photo-albums-view .album-text.messaging,
.back-tutorial .frame-10 .photo-albums-view .album-text.wallpapers,
.back-tutorial .frame-16 .photo-albums-view .album-text.all-images,
.back-tutorial .frame-16 .photo-albums-view .album-text.messaging,
.back-tutorial .frame-16 .photo-albums-view .album-text.vacations {
	color:#555;
}
.back-tutorial .photo-albums-view .album-text.all-images {
	top:28px;                                
}                                            
.back-tutorial .photo-albums-view .album-text.messaging {
	top:113px;                               
}                                            
.back-tutorial .photo-albums-view .album-text.vacations {
	top:198px;                               
}                                            
.back-tutorial .photo-albums-view .album-text.wallpapers {
	top:282px;
}

.back-tutorial .photo-albums-default,
.back-tutorial .photo-albums-1-highlighted,
.back-tutorial .photo-album-1-default,
.back-tutorial .photo-album-1-highlighted,
.back-tutorial .photo-album-1-photo-2,
.back-tutorial .photo-albums-2-highlighted,
.back-tutorial .photo-album-2-default,
.back-tutorial .photo-album-2-highlighted,
.back-tutorial .photo-album-2-photo-4 {
	position:fixed;
	width:100%;
	height:100%;
	min-height:480px;	
	
	background:url(../images/tutorial/ODD_BG_screens_02.png) top center no-repeat;
	background:url(../images/tutorial/ODD_BG_screens_03.png) top center no-repeat;
	background:url(../images/tutorial/ODD_BG_screens_04.png) top center no-repeat;
	background:url(../images/tutorial/ODD_BG_screens_05.png) top center no-repeat;
	background:url(../images/tutorial/ODD_BG_screens_06.png) top center no-repeat;
	background:url(../images/tutorial/ODD_BG_screens_07.png) top center no-repeat;
	background:url(../images/tutorial/ODD_BG_screens_08.png) top center no-repeat;
	background:url(../images/tutorial/ODD_BG_screens_09.png) top center no-repeat;
	background:url(../images/tutorial/ODD_BG_screens_01.png) top center no-repeat;
}

.back-tutorial .photo-albums-1-highlighted {
	background:url(../images/tutorial/ODD_BG_screens_02.png) top center no-repeat;
}

.back-tutorial .photo-album-1-default {
	background:url(../images/tutorial/ODD_BG_screens_03.png) top center no-repeat;
}

.back-tutorial .photo-album-1-highlighted {
	background:url(../images/tutorial/ODD_BG_screens_04.png) top center no-repeat;
}

.back-tutorial .photo-album-1-photo-2 {
	background:url(../images/tutorial/ODD_BG_screens_05.png) top center no-repeat;
}

.back-tutorial .photo-albums-2-highlighted {
	background:url(../images/tutorial/ODD_BG_screens_06.png) top center no-repeat;
}

.back-tutorial .photo-album-2-default {
	background:url(../images/tutorial/ODD_BG_screens_07.png) top center no-repeat;
}

.back-tutorial .photo-album-2-highlighted {
	background:url(../images/tutorial/ODD_BG_screens_08.png) top center no-repeat;
}

.back-tutorial .photo-album-2-photo-4 {
	background:url(../images/tutorial/ODD_BG_screens_09.png) top center no-repeat;
}

.back-tutorial .album-row {
	position: fixed;
	left: 0px;
	width: 100%;
	height: 85px;
	z-index:1;
}

.back-tutorial .album-row.album-1-highlighted {
	top: 168px;
}

.back-tutorial .album-row.album-2-highlighted {
	top: 252px;
}

.back-tutorial .photo {
	position: fixed;
	width: 90px;
	height: 90px;
}

.back-tutorial .photo.album-1-highlighted {
	left: 114px;
	top: 8px;
}

.back-tutorial .photo.album-2-highlighted {
	left: 8px;
	top: 110px;
}

.back-tutorial .final-view {
	position:fixed;
	width:100%;
	height:100%;
	min-height:480px;	
	background:url(../images/tutorial/wallpaper_with_transparency_flat.png) top center no-repeat;
}

.back-tutorial .final-view .description {
	padding-bottom: 172px;
}

.back-tutorial #gesture_arrows_animation {
	height:66px;
	width:100%;
	position:relative;
	margin-top:-34px;
	bottom:-34px;
	z-index:100003;
	-webkit-palm-mouse-target: ignore;
	background:url(../images/tutorial/swipe-arrows/swipe-arrows-1.png);
	background:url(../images/tutorial/swipe-arrows/swipe-arrows-2.png);
	background:url(../images/tutorial/swipe-arrows/swipe-arrows-3.png);
	background:url(../images/tutorial/swipe-arrows/swipe-arrows-4.png);
	background:none;
}

.back-tutorial #gesture_arrows_animation.arrows-1 {
	background:url(../images/tutorial/swipe-arrows/swipe-arrows-1.png) center center no-repeat;
}
.back-tutorial #gesture_arrows_animation.arrows-2 {
	background:url(../images/tutorial/swipe-arrows/swipe-arrows-2.png) center center no-repeat;
}
.back-tutorial #gesture_arrows_animation.arrows-3 {
	background:url(../images/tutorial/swipe-arrows/swipe-arrows-3.png) center center no-repeat;
}
.back-tutorial #gesture_arrows_animation.arrows-4 {
	background:url(../images/tutorial/swipe-arrows/swipe-arrows-4.png) center center no-repeat;
}