/*
YUI 3.4.1 (build 4118)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
/*
	TODO will need to remove settings on HTML since we can't namespace it.
	TODO with the prefix, should I group by selector or property for weight savings?
*/
html{
	color:#000;
	background:#FFF;
}
/*
	TODO remove settings on BODY since we can't namespace it.
*/
/*
	TODO test putting a class on HEAD.
		- Fails on FF. 
*/
body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,
img {
	border:0;
}
/*
	TODO think about hanlding inheritence differently, maybe letting IE6 fail a bit...
*/
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style:normal;
	font-weight:normal;
}

ol,
ul {
	list-style:none;
}

caption,
th {
	text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,
q:after {
	content:'';
}
abbr,
acronym {
	border:0;
	font-variant:normal;
}
/* to preserve line-height and selector appearance */
sup {
	vertical-align:text-top;
}
sub {
	vertical-align:text-bottom;
}
input,
textarea,
select {
	font-family:inherit;
	font-size:inherit;
	font-weight:inherit;
}
/*to enable resizing for IE*/
input,
textarea,
select {
	*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
	color:#000;
}


html {
	font-family: "Lucida Grande","ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック",Helvetica,Verdana,sans-serif;
	background-color: #262626;
}
div#window_mask {
	position: absolute;
	top: 0;
	overflow: hidden;
	background: url('/common/images/gt5/photo/leather.png');
	width: 100%;
}
body[device='Smartphone'] div#window_mask {
	box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.65) inset;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
	div#window_mask {
		-webkit-background-size: 75px 75px;
		background-size: 75px 75px;
	}
}

div#welcome {
	text-align: center;
}
div#header {
	position: relative;
	top: 0px;
	margin: auto 25px;
	height: 50px;
}
div#header img {
	position: absolute;
	left: 0px;
	bottom: 0px;
}
div#menu {
	position: absolute;
	top: 50%;
	left: 0px;
	margin-top: -125px;
	width: 100%;
	height: 100px;
}
div#menu img.photo_stream_text {
	margin-bottom: 130px;
}
div#menu img.photo_stream_text {
	width: 240px;
	height: 50px;
}
div#menu h2 {
	color: #c4c4c4;
	font-size: 12px;
	margin-top: 2px;
}
div#menu div.photo_stream_icon{
	position: absolute;
	top: 0px;
	left: -60px;
	width: 120px;
	height: 120px;
	margin: 0 50%;
	padding: 60px 0 20px;
	background: url(/common/images/gt5/photo/photo_stream_camera_icon.png) no-repeat;
	background-position: 0 60px;
}
body.PLAYSTATION3 div#menu div.photo_stream_icon {
	z-index: 5100;
}
div#menu div.photo_stream_icon:hover {
	cursor: pointer;
	background-position: -120px 60px;
}
div#footer {
	position: absolute;
	left: 0px;
	bottom: 25px;
	margin: auto 25px;
	color: #808080;
	text-align: left;
}
p#notice {
	font-size: 10px;
	margin-bottom: 15px;
}
p.copyright {
	font-size: 9px;
	text-align: justify;
}
p#list_credits {
	color: #808080;
	padding-top: 125px;
	font-size: 6px;
	clear: both;
}
body[device='Smartphone'] p#list_credits {
	padding-top: 60px;
}

@media only screen and (max-device-width: 480px) {
	html {
		-webkit-text-size-adjust: none;
	}
	div#welcome {
		display:none;
	}
	div#header {
		height: 30px;
		margin: auto 25px;
	}
	div#header img {
		-webkit-transform-origin: 0% 0%;
		-webkit-transform: scale(0.5);
		-moz-transform-origin: 0% 0%;
		-moz-transform: scale(0.5);
	}
	div#menu img.photo_stream_text {
		width: 120px;
		height: 25px;
		margin-top: 50px;
		margin-bottom: 60px;
		margin-left: 3px;
	}
	div #menu h2 {
		font-size: 8px;
	}
	div.photo_stream_icon {
		background-position: 0 0;
		-webkit-transform: scale(0.5);
		-moz-transform: scale(0.5);
	}
	p#notice {
		font-size: 6px;
		margin-bottom: 8px;
	}
	p.copyright {
		font-size:4px;
	}
	div#footer {
		bottom: 10px;
	}
	

}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ration: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {

	div#menu div.photo_stream_icon{
		background: url(/common/images/gt5/photo/photo_stream_camera_icon_x2.png) no-repeat 0 60px;
		background-size: 240px 120px;
	}
div#menu div.photo_stream_icon:hover {
		background-position: -120px 60px;
	}
}




div#header_bar {
	position: fixed;
	top: -999px;
	left: 0px;
	width: 100%;
	height: 38px;
	background: url(/common/images/gt5/photo/header_bar.png) repeat-x;
	z-index: 900;
}
body[device='Smartphone'][os='Android'] div#header_bar,
body[specialCases='Fennec'] div#header_bar,
body.PLAYSTATION3 div#header_bar {
	position: absolute;
}
div#slideshow_button {
	display: inline-block;
	height: 38px;
	background: url(/common/images/gt5/photo/play.png) no-repeat scroll 18px 12px;
	position: relative;
	top: 0;
	color: #c0c0c0;
	font-size: 11px;
	padding: 9px 12px 0 47px;
	text-shadow: -1px -1px 1px rgba(0,0,0, 0.45);
	float: left;
}
div#header_bar div.separation {
	width: 2px;
	height: 34px;
	background: url(/common/images/gt5/photo/separation.png) repeat-y;
	float: left;
}
div#slideshow_button img.play {
	width: 18px;
	height: 10px;
	padding: 12px 11px 0 0px;
	float: left;
}
div#slideshow_button p {
	color: #c0c0c0;
	position: relative;
	display: block;
	top: 50%;
	font-size: 11px;
	margin: -11px 0 0 47px;
}
div#header_right {
	position: absolute;
	right: 0px;
	top: 0px;
}
div#header_right .logo_bar {
	display: inline;
	float: left;
}
div.social_buttons {
	margin: 8px 20px 0;
	float:left;
}
div.social_buttons div{
	float: left;
}
div.tweet {
	margin: 0 8px;
}
@media only screen and (max-device-width: 480px) {
/*  	div#header_bar {
		-webkit-transform-origin: 0 0;
		-webkit-transform: scale(0.7);
		-moz-transform-origin: 0 0;
		-moz-transform: scale(0.7);
		width: 144%;
	} */
	
	div#slideshow_button {
		background-position: 4px 12px;
		padding-left: 28px;
		padding-right: 6px;
	}
	div#slideshow_button p {
		font-size: 4px;
	}
	
	div#header_bar img.logo_bar {
		display: none;
	}
	div.fb-like {
		position: relative;
		top: -2px;
	}
}
@media only screen and (max-width: 320px) {
	div#header_bar img.logo_bar {
		display: none;
	}
	div.social_buttons {
		margin-left: 4px;
		margin-right: 8px;
	}
	div.tweet {
		margin: 0 5px;
	}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ration: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
	div#slideshow_button {
		background-image: url(/common/images/gt5/photo/play_x2.png);
		background-size: 18px 10px;
	}
	
	@media only screen and (max-device-width: 480px) {
		div#slideshow_button {
			background-position: 4px 12px;
			padding-left: 28px;
		}
	}
		
}
body[device='Smartphone'] div#header_bar img.logo_bar {
	display: none;
}
body[specialCases='iOS Standalone'] div#header_bar img.logo_bar {
	display: block;
	position: relative;
	-webkit-transform-origin: 100% 50%;
	right: -1px;
}
body[specialCases='iOS Standalone'][device='Smartphone'] div#header_bar img.logo_bar {
	-webkit-transform: scale(0.75);
	right: -7px;
}
body[specialCases='iOS Standalone'][orientation='landscape'] div#header_bar img.logo_bar {
	-webkit-transform: scale(1);
}
body[specialCases='iOS Standalone'] div#header_bar div.social_buttons {
	display: none;
}
	





.button:hover {
	cursor: pointer
}
	

div#list img.thumbnail {
	margin: 0 8px 8px 0;
	padding: 0;
	box-shadow: 2px 2px 3px rgba(0, 0, 0,0.75);
	z-index: 99;
}

body[device='Smartphone'] div#list img.thumbnail {
	width: 73px;
	height: 73px;
	margin: 0 4px 4px 0;
	box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.75);
}
body[device='Tablet'] div#list img.thumbnail {
	width: 170px;
	height: 170px;
	margin: 0 5px 5px 0;
	box-shadow: 2px 2px 2px rgba(0,0,0, 0.75);
}
.IE {
	display: block;
	float: left;
}
.thumbnail:hover {
	cursor: pointer;
}
.thumbnail_cursor{
	border: solid 1px #fff;
	z-index: 100;
}
.thumbnail_cursor:hover {
	cursor: pointer;
}

div#main_contents {
	margin: auto;
	padding:  100px 0 20px 4px;
	z-index: -10;
}
body[device='Smartphone'] div#main_contents {
	padding: 80px 0 20px 3px;
}
div#black_mask{
	position: absolute;
	top: 0;
	display: none;
	z-index: 999;
	background-color: #0b0b0b;
}
div#iOS_fill_list {
	position: absolute;
	top: 0;
	width: 100%;
	height: 50px;
	background-color: #0b0b0b;
	z-index: 101;
}
div#control_buttons {
	position: fixed;
	left: -132px;
	bottom: 50px;
	width: 264px;
	margin-left: 50%;
	text-align: center;
	z-index: 5000;
	display: none;
	-webkit-transition: opacity 0.2s ease-out 0s;
	-moz-transition: opacity 0.2s ease-out 0s;
}
body[device='Smartphone'] div#control_buttons {
	bottom: 10px;
}
body.PLAYSTATION3 div#control_buttons {
	position: absolute;
	top: 1%;
	bottom: 0;
}
div.opacity_layer div {
	position:relative;
	width: 88px;
	height: 34px;
	display: none;
	float: left;
	z-index: 5000;
	background:url(/common/images/gt5/photo/control_buttons.png) no-repeat;
}
div#control_buttons div.enable:hover {
	cursor: pointer
}
div#prev_button.enable {
	background-position: 0 0;
}
div#close_button.enable {
	background-position: -88px 0;
}
div#next_button.enable {
	background-position: -176px 0;
}
div#prev_button {
	background-position: 0 -34px;
}
div#close_button {
	background-position: -88px -34px;
}
div#next_button {
	background-position: -176px -34px;
}
div#slideshow_close_button {
	width: 113px;
	margin-left: 76px;
	background-position: 0 -68px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ration: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
	div.opacity_layer div {
		background-image: url(/common/images/gt5/photo/control_buttons_x2.png);
		background-size: 264px 102px;
	}
}




div#stage {
}

div#stage img {
}

div.photo_mask {
	overflow: hidden;
	position: fixed;
	top: 0;
	z-index: 2000;
	box-shadow: 2px 2px 4px rgba(0,0,0,0.75);
}
body.PLAYSTATION3 div.photo_mask {
	position: absolute;
}
#loading_icon {
	z-index: 1500;
}
.loading_icon_L {
	width:24px;
	height: 24px;
}
.centerize {z-index: 2000;}

div#stream_line {
	position: absolute;
	z-index: 1900;
}



body[device='Smartphone'][specialCases='Fennec'] div#stage div {
	-moz-transform: scale(0.3);
}





body[device='Smartphone'] div.photo_maskd div div {
	-moz-transform: scale(0.5);
	-webkit-transform: scale(0.5);
}