@import url(/jp/global/styles/blackout.css);

@font-face {
	font-family: "MyriadPro";
	src: url(/jp/welcomescreen/itunes9/fonts/MyriadPro-Regular.otf) format("truetype");
}

body, html { width: 100%; height: 100%; overflow: hidden; -webkit-user-select: none; }

h1, h2 { font-family: MyriadPro, "Lucida Grande", Arial, Verdana, sans-serif; cursor: default;}

#nav { float: left; width: 245px; height: 100%; border-right: 1px solid #e0e0e0; background: #fff; }
#nav li a { display: block; color: #808080; background: #f1f1f1; }
#nav li a span { display: block; border-left: 1px solid transparent; border-top: 1px solid #fff; border-bottom: 1px solid #d2d2d2; padding: 0 40px 0 15px; text-shadow: #fff 0 1px 0; background: url(/jp/welcomescreen/itunes9/images/navitembg20090909.png) no-repeat; }
#nav li a:hover { color: #08c; text-decoration: none; }
#nav li a.active { border-color: #f1f1f1 #f1f1f1 #c0c0c0; color: #1a1a1a; background: #dcdcdc -webkit-gradient(linear, 0 0, 0 100%, from(#f1f1f1), to(#dcdcdc)); cursor: default; }

#view { position: relative; margin-left:246px; height: 100%; background: -webkit-gradient(linear, 0 0, 25% 100%, from(#fff), to(#fafafa)); }

.view-contents { display: none; }
#view .view-contents { display: block; position: absolute; top: 28px; left: 37px; width: 640px; }
#view .view-contents h2 { font-size: 2.1em; }

#view .welcome { top: 37px; text-align: center; }
#view .welcome a.clicktoplay { display: inline-block; position: relative; margin-top: 185px; border: 2px solid #fff; -webkit-border-radius: 20px; padding: 9px 42px 9px 28px; color: #fff; font-size: 14px; line-height: 18px; text-shadow: rgba(0,0,0,.5) 0 -1px 0; background: -webkit-gradient(linear, 0 0, 0 100%, from(#808080), to(#000)); -webkit-box-shadow: #000 0 1px 7px; opacity: .8; -webkit-transition: 250ms; }
#view .welcome a.clicktoplay:hover { opacity: .95; text-decoration: none; }
#view .welcome a.clicktoplay img { position: absolute; top: 2px; right: 2px; }
#view .welcome img.itunesstore { margin-top: -225px; margin-bottom:11px;  }
#view .welcome h1 { margin: -30px 0 -5px; font-size: 3.1em; }
#view .welcome p { margin: 0 -20px; cursor: default; }

.moviePanel { height: 400px; }
.moviePanel.movie-loading { background-image: url(/jp/global/elements/quicktime/qt_loading640x400.gif); }
.endState { height: 400px; background-image: url(/jp/global/elements/quicktime/qt_endstate640x400.jpg); }
.moviePanel video { -webkit-box-reflect: below 1px -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(0.9, transparent), to(rgba(0,0,0,0.25))); }