/*
*
*	Forest Symphony Common CSS
*	2013 Coded by Takehisa Mashimo
*
*/

@charset 'UTF-8';
@import url("fonts.css");	/* Loading Fonts by Facetype */

/* Base styles */
* {
	margin: 0px;
	padding: 0px;
	list-style: none;
	text-decoration: none;
	font-weight: normal;
	border: 0px solid #eeeeee;
}

/*----------------------------------------*/
/*	 Font specific styles	*/
/*----------------------------------------*/
/* Font size specifics */
.f28 { display:inline-block; font-size: 28px; line-height: 1.75em; }
.f24 { display:inline-block; font-size: 24px; line-height: 1.75em; }
.f20 { display:inline-block; font-size: 20px; line-height: 1.75em; }
.f19 { display:inline-block; font-size: 19px; line-height: 1.75em; }
.f15 { display:inline-block; font-size: 15px; line-height: 1.75em; }
.f14 { display:inline-block; font-size: 14px; line-height: 1.75em; }
.f13 { display:inline-block; font-size: 13px; line-height: 1.75em; }
.f12 { display:inline-block; font-size: 12px; line-height: 1.75em; }
.f11 { display:inline-block; font-size: 11px; line-height: 1.75em; }
.f10 { display:inline-block; font-size: 10px; line-height: 1.75em; }
.f9 { display:inline-block; font-size: 9px; line-height: 1.75em; }

/* Tracking, the unit of tracking is 1/1000em, so, if we hope to set tracking 100, it is equal to 0.1em */
.t100 { letter-spacing: 0.1em; }
.t80 { letter-spacing: 0.08em; }
.t0 { letter-spacing: 0px; }
.t-140 { letter-spacing: -0.14em; }
.t-160 { letter-spacing: -0.16em; }
.t-180 { letter-spacing: -0.18em; }
.t-300 { letter-spacing: -0.3em; }
.t-500 { letter-spacing: -0.5em; }
.t-600 { letter-spacing: -0.6em; }

.scale95 { 
	-moz-transform: scale(0.95, 1.0) translate(-10px); /* Firefox */
	-webkit-transform: scale(0.95, 1.0) translate(-15px);  /* Chrome,Safari */
	-o-transform: scale(0.95, 1.0) translate(-15px);  /* Opera */
	-ms-transform: scale(0.95, 1.0) translate(-15px);  /* IE */
	transform: scale(0.95, 1.0) translate(-15px);  /* CSS3 */
}

/* Alignment */
.alignR { width: 100%; text-align: right; }

/* Direct margin */
.padding20 { padding: 20px; }

/* Font family specifics */
/* MonoType Grotesque, the name of font-family of webfonts is 'GrotesqueMTW01-Condense', and direct loading font name 'GrotesqueMT-Condensed' as defined in fonts.css */
.GrotesqueMTCondensed { font-family: 'GrotesqueMTW01-Condense', 'GrotesqueMT-Condensed';  line-height: 1.75em; }
.GrotesqueMTLightCondensed { font-family: 'GrotesqueMTW01-LightCn', 'GrotesqueMT-LightCondensed';  line-height: 1.75em; }

/* TsukuGoPro, the name of font-family of webfonts is 'TsukuGoPro-D', and direct loading font name as 'FOT-TsukuGoPro-D' defined in fonts.css */
.TsukuGoProD { font-family: 'TsukuGoPro-D', 'FOT-TsukuGoPro-D';  line-height: 1.75em; }
.TsukuGoProE { font-family: 'TsukuGoPro-E', 'FOT-TsukuGoPro-E';  line-height: 1.75em; }

/* AtlasGrotesk is loading font name as 'GrotesqueMT-Condensed' defined in fonts.css */
.AtlasGroteskRegular { font-family: 'AtlasGrotesk-Regular';  line-height: 1.75em; }
.AtlasGroteskMedium { font-family: 'AtlasGrotesk-Medium'; line-height: 1.75em; }

/*----------------------------------------*/
/*	 Tag based specific styles	*/
/*----------------------------------------*/
html {
	margin: 0px;
	padding: 0px;
	color: black;
	background-color: white;
}

body {
	min-width: 960px;
	margin: 0px 0px 0px 0px;
}

h1, h2 {
	display: inline-block;
}

a {
	display: inline-block;
	color: gray;
}

a:hover {
	/*color: black;*/
	color: #333333;
}

a[selected] {
	color: #cc0000;
}

a.link:hover {
	color: #ffffff;
}

/*----------------------------------------*/
/*	 Class based specific styles	*/
/*----------------------------------------*/
.slidable {
	width: 280px;
	min-height: 500px;
	margin: 0px 0px 0px 0px;
	vertical-align: top;
}

#section_preload {
	margin-left: 20px;
	margin-top: 20px;
}

#section_main {
	visibility: hidden;
}

/*----------------------------------------*/
/*	 Title Section	*/
/*----------------------------------------*/
/* Subsections in the navi section */
#section_title {
	margin-left: 20px;
	margin-top: 20px;
}

#header_main {
	width: 310px;
	line-height: 50px;
	vertical-align: middle;
}

#header_credit {
	width: 455px;
	line-height: 50px;
	vertical-align: middle;
}

#header_ycam {
	display: inline-block;
	width: 155px;
	text-align: right;
}

/* Image */
#img_ycam {
	width: 153px;
	height: 45px;
	vertical-align: middle;
}

/*----------------------------------------*/
/*	 Navigation Section	*/
/*----------------------------------------*/
#section_navi {
	display: inline-block;
	height: 20px;
	margin-top: 50px;
	margin-left: 335px;		/* 315px blank + 20px margin */
	vertical-align: top;
	visibility: hidden;
}

li {
	display: inline-block;
	line-height: 15px;
}

.en {
	display: none;
}

#menu_en {
	display: none;
}

#navi_main {
	display: inline-block;
	width: 520px;
	height: 30px;
	line-height: 30px;
	vertical-align: middle;
}

#navi_locale {
	display: inline-block;
	width: 95px;
	height: 30px;
	line-height: 30px;
	text-align: right;
	vertical-align: top;
	font-size: 11px;
	font-family: 'GrotesqueMT-LightCondensed', sans-serif; 
}

/*----------------------------------------*/
/*	 Contents Section	*/
/*----------------------------------------*/
.article {
	color: white;
	width: 270px;
	padding: 20px 10px 50px 10px;
	line-height: 1.75em;
	text-align: left;
	background-color: rgba(0,0,0,0.7);
	
	/* IE Transparent Background. *Color is #AARRGGBB */
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#B3000000',EndColorStr='#B3000000');	}

/* Participants special layout */
.participants {
	width: 290px;
	padding: 20px 0px 50px 0px;
}

td {
	font-size: 10px;
	line-height: 1.2em;
	text-align: left;
	vertical-align: bottom;
	padding-right: 5px;
	padding-bottom: 20px;
}

#contents_grid {
}

#contents_area {
	position: relative;	/* Position relative for arranging bg-images and contents in this box */
	height: 1277px;
	overflow: hidden;
	margin-top: 20px;
	background-repeat: repeat; 
	background-position: 4px 140px;
	background-image: url("../images/cross.png");
	visibility: hidden;
}

#img_tree_mono_box {
	display: inherit;
	position: absolute;	/* Arrange position by relative parent box left-top position */
	width: 100%;
	height: 100%;
	z-index: -998;
	background-position: 0px 0px;
	background-size: cover;
	background-clip: border-box;
	background-image: url("../images/tree_mono.jpg");
}

#img_tree_color_box {
	display: inherit;		/* The firstly, display none, and when scrolling mask mono, will show by script. */
	position: absolute;	/* Arrange position by relative parent box left-top position */
	width: 100%;
	height: 100%;
	z-index: -999;
	background-position: 0px 0px;
	background-size: cover;
	background-clip: border-box;
	background-image: url("../images/tree_color.jpg");
}

#img_tree_mono {
	display: inherit;
	position: absolute;	/* Arrange position by relative parent box left-top position */
	width: 100%;
	min-width: 960px;
	z-index: -998;
}

#img_tree_color {
	display: none;
	position: absolute;/* Arrange position by relative parent box left-top position */
	width: 100%;
	z-index: -999;
}

#img_shiseido_rogo {
	width: 55px;
	height: 10px;
}

/* Contents */
#contents {
	display: none;
	width: 960px;
	height: 800px;
	overflow: hidden;
}


/*----------------------------------------*/
/*	 Footer section	*/
/*----------------------------------------*/
#section_footer {
	width: 960px;
	height: 64px;
	line-height: 64px;
	vertical-align: middle;
	margin-bottom: 0px;
	color: black;
	font-size: 9px;
	background-color: #ffffff;
}

#p_photo_credit {
	display: inline-block;
	width: 300px;
	margin-left: 30px;
	border: 0px solid black;
}

#p_copyright {
	display: inline-block;
	width: 610px;
	text-align: right;
	border: 0px solid black;
}