@charset "UTF-8";

/* ===================================

	File Name   : top.css

====================================== */

/*========== Style Contents ==========

	1. Contents
	2. MainVisual
	3. TopInfo
	4. TileMenu
	
====================================== */






/*===== ■1. Contents =====*/

#Contents {
	clear: both;
}






/*===== ■2. MainVisual =====*/

.MainVisualWrap {
	width: 100%;
	overflow: hidden;
	background-color: #000;
}
.MainVisual {
	position: relative;
	width: 900px;
	height: 300px;
	margin: 0px auto;
}
.MainVisual h1 {
	position: absolute;
	top: 0px;
	left: -150px;
}
.MainVisual p {
	position: absolute;
	top: 0px;
	right: -30px;
	width: 426px;
	height: 260px;
}
.MainVisual p a {
	display: block;
	width: 272px;
	height: 260px;
	margin-left: 76px;
	overflow: hidden;
	-o-transform: skew(-31deg);
	-ms-transform: skew(-31deg);
	-webkit-transform: skew(-31deg);
	-moz-transform: skew(-31deg);
	transform: skew(-31deg);
}
.ie8 .MainVisual p a {
	overflow: visible;
}
.MainVisual p a span {
	display: block;
	position: relative !important;
	width: 504px !important;
	height: inherit !important;
	margin-left: -76px;
	overflow: hidden;
	text-indent: 504px;
	white-space: nowrap;
	background: url(../img/main_bnr.png);
	background-position: left top;
	background-repeat: no-repeat;
	-o-transform: skew(31deg);
	-ms-transform: skew(31deg);
	-webkit-transform: skew(31deg);
	-moz-transform: skew(31deg);
	transform: skew(31deg);
}
.MainVisual p a:hover span {
	background-position: 0px -260px;
}
.ie8 .MainVisual p a:hover span {
	background-position: left top;
}




/*===== ■3. TopInfo =====*/

#TopInfo {
	clear: both;
	position: relative;
	margin-top: 20px;
	margin-bottom: 20px;
}

#TopInfo h2 {
	position: relative;
	width: 900px;
	height: 34px;
	text-indent: -9999px;
	background: url(../img/whatsnew.png) no-repeat;
}

#TopInfo > a {
	display: block;
	position: absolute;
	top: 0px;
	right: 0px;
	width: 130px;
	height: 34px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: url(../img/whatsnew_more.png) no-repeat;
	cursor: pointer;
}
#TopInfo > a:hover {
	background-position: 0px -34px;
}
#TopInfo > a.open {
	background-position: 0px -102px;
}
#TopInfo > a.open:hover {
	background-position: 0px -102px;
}

#TopInfo .TopInfoList {
	padding: 5px 20px 12px;
	border: 1px solid #e62e8b;
	border-top: none;
}

#TopInfo .TopInfoList ul {
	overflow: auto;
}
#TopInfo .TopInfoList ul li {
	padding: 7px 4px;
	overflow: auto;
	border-bottom: 1px solid #cdcdcd;
}
#TopInfo .TopInfoList ul li span {
	display: block;
	float: left;
	width: 12%;
	margin-right: 1%;
	font-weight: bold;
	line-height: 1.5em;
	color: #333333;
}
#TopInfo .TopInfoList ul li p {
	float: left;
	width: 87%;
	line-height: 1.5em;
	color: #d9227f;
}
#TopInfo .TopInfoList ul li p img {
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px;
}
#TopInfo .TopInfoList ul li p:after {
	clear: both;
	display: block;
	content: "";
}

#TopInfo .TopInfoList ul li span.languageIcons {
	float: right;
	width: 85.5%;
	padding: 0px;
	margin-right: 0px;
}
#TopInfo .TopInfoList ul li span.languageIcons a {
	display: block;
}
#TopInfo .TopInfoList ul li span.languageIcons a:hover{
	opacity: 0.75;
}
#TopInfo .TopInfoList ul li span.languageIcons img {
	float: left;
	margin-left: -9px;
	margin-top: 7px;
}

#TopInfo .TopInfoList a {
	color: #d9227f;
}
#TopInfo .TopInfoList a:hover {
	color: #d9227f;
}
#TopInfo .TopInfoList ul.hyde {
	display: none;
}
#TopInfo .TopInfoList ul.hyde li {
	overflow: auto;
}




/*===== ■4. TileMenu  =====*/

#TileMenu {
	padding: 20px 0px;
	background: url(../common/img/bg_gray.png) center top repeat;
}

#TileMenu ul {
	width: 904px;
	margin: 0px auto;
}
#TileMenu ul:after{
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
* html #TileMenu ul { zoom: 1; } /* IE6 */
*:first-child+html #TileMenu ul { zoom: 1; } /* IE7 */

#TileMenu ul li {
	float: left;
	margin: 2px;
	height: 190px;
}
#TileMenu ul li.Tile2,
#TileMenu ul li.Tile2 a {
	width: 448px;
}
#TileMenu ul li.Tile4,
#TileMenu ul li.Tile4 a {
	width: 222px;
}

#TileMenu ul li a,
#TileMenu ul li span {
	display: block;
	height: 190px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}

#TileMenu ul li.exhibit a {
	background: url(../img/menu_exhibit.png);
}
#TileMenu ul li.area a {
	background: url(../img/menu_area.png);
}
#TileMenu ul li.indie_games a {
	background: url(../img/menu_indie_games.png);
}
#TileMenu ul li.sense_of a {
	background: url(../img/menu_sense.png);
}
#TileMenu ul li.indie_games span {
	background: url(../img/menu_indie_games_cs.png);
}
#TileMenu ul li.sense_of span {
	background: url(../img/menu_sense_cs.png);
}
#TileMenu ul li.sponsor a {
	background: url(../img/menu_sponsor.png);
}
#TileMenu ul li.rule a {
	background: url(../img/menu_rule.png);
}
#TileMenu ul li.support a {
	background: url(../img/menu_support.png);
}
#TileMenu ul li.download a {
	background: url(../img/menu_download.png);
}
#TileMenu ul li.report a {
	background: url(../img/menu_report.png);
}
#TileMenu ul li.press a {
	background: url(../img/menu_press.png);
}
#TileMenu ul li.preview a {
	background: url(../img/menu_preview.png);
}
#TileMenu ul li.contact a {
	background: url(../img/menu_contact.png);
}
#TileMenu ul li.cesa a {
	background: url(../img/menu_cesa.png);
}
#TileMenu ul li.awardsA a {
	background: url(../img/menu_awardsA.png);
}
#TileMenu ul li.awardsY a {
	background: url(../img/menu_awardsY.png);
}
#TileMenu ul li.awardsA span {
	background: url(../img/menu_awardsA_cs.png);
}
#TileMenu ul li.awardsY span {
	background: url(../img/menu_awardsY_cs.png);
}

#TileMenu ul li a:hover {
	background-position: left -190px;
}