@charset "utf-8";

body
{
	background: url(../img/machine/bg.png) repeat 50% 50%;
}

/*************************
	wrap
*************************/

#wrap
{
	background: url(../img/machine/bg_pattern.png) repeat 50% 50%;
}

/*************************
	bg
*************************/

#bg
{
	width: 100%;
	height: 50%;
	position: absolute;
	background: url(../img/machine/bg_stripe.png) repeat 0 0;
	padding-top: 159px;
	margin: -159px 0 0 0;
	top: 50%;
	left: 0;
}

#bg img
{
	position: absolute;
	top: -375px;
	left: 50%;
	margin-left: -524px;
}

/*************************
	content
*************************/

#content
{
	width: 1148px;
	height: 958px;
	margin: -534px 0 0 -574px;
}

/*************************
	subttl
*************************/

#subttl
{
	width: 520px;
	height: 204px;
	background: url(../img/machine/subttl.png) no-repeat 0 0;
	margin: 167px 0 0 591px;
}

#subttl h2, #subttl p
{
	visibility: hidden;
}

/*************************
	bttn
*************************/

#bttn
{
	display: none;
	width: 958px;
	height: 437px;
	position: absolute;
	top: 388px;
	left: 95px;
}

body.nojs #bttn, body.on #bttn
{
	display: block;
}

#bttn li
{
	width: 240px;
	height: 220px;
	position: absolute;
}

#bttn li.mario{ top: 148px; left: 0; }
#bttn li.rosetta{ top: 0; left: 234px; }
#bttn li.wario{ top: 0; left: 484px; }
#bttn li.donkey{ top: 217px; left: 234px; }
#bttn li.peach{ top: 217px; left: 484px; }
#bttn li.mt_mario{ top: 148px; left: 718px; }

#bttn li a
{
	display: block;
	width: 240px;
	height: 220px;
	background: url(../img/machine/bttn_bg.png) no-repeat 11px 0;
	position: absolute;
	top: 0;
	left: 0;
}

body#pc #bttn li a:hover
{
	background-position: 11px -220px;
}

#bttn li a dt
{
	width: 210px;
	height: 202px;
	background: url(../img/machine/bttn.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	margin: 4px 0 0 15px;
}

#bttn li.mario a dt{ background-position: 0 0; }
#bttn li.rosetta a dt{ background-position: -210px 0; }
#bttn li.wario a dt{ background-position: -420px 0; }
#bttn li.donkey a dt{ background-position: -630px 0; }
#bttn li.peach a dt{ background-position: -840px 0; }
#bttn li.mt_mario a dt{ background-position: -1050px 0; }

body#pc #bttn li a:hover dt
{
	margin: 9px 0 0 20px;
}

#bttn li a dd
{
	width: 240px;
	height: 61px;
	position: absolute;
	top: 152px;
	left: 0;
}

/*************************
	buggy
*************************/

#buggy
{
	width: 213px;
	height: 95px;
	position: absolute;
	top: 423px;
	left: 828px;
	background: url(../img/machine/buggy_rosetta.png) no-repeat 117px 0;
}

#buggy a
{
	display: block;
	width: 213px;
	height: 46px;
	background: url(../img/machine/buggy_bttn.png) no-repeat 0 0;
	margin-top: 21px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

body#pc #buggy a:hover
{
	background-position: 0 100%;
}

#buggy img
{
	position: absolute;
	top: 0;
	right: 2px;
	pointer-events: none;
}

/*************************
	cc200
*************************/

#cc200
{
	width: 213px;
	height: 52px;
	position: absolute;
	top: 762px;
	left: 828px;
}

#cc200 a
{
	display: block;
	width: 213px;
	height: 52px;
	background: url(../img/machine/200cc_bttn.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

body#pc #cc200 a:hover
{
	background-position: 0 100%;
}

/*************************
	modal buggy
*************************/

#modal div.buggy
{
	width: 890px;
	height: 634px;
	top: 50%;
	left: 50%;
	margin: -317px 0 0 -445px;
	background: url(../img/machine/buggy_bg.png) no-repeat 0 21px;
}

#modal div.buggy h3
{
	width: 261px;
	height: 57px;
	background: url(../img/machine/buggy_ttl.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
	top: 21px;
	left: 95px;
	z-index: 13;
}

#modal div.buggy dl
{
	width: 874px;
	height: 613px;
	position: relative;
	top: 21px;
}

#modal div.buggy dl dt
{
	width: 419px;
	height: 164px;
	background: url(../img/machine/buggy_txt.png) no-repeat 0 0;
	position: absolute;
	top: 147px;
	left: 83px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	z-index: 12;
}

#modal div.buggy dl dd
{
	width: 663px;
	height: 590px;
	background: url(../img/machine/buggy_cha.png) no-repeat 0 0;
	position: absolute;
	top: 23px;
	left: 211px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	z-index: 11;
}

#modal div.movie
{
	width: 700px;
	height: 472px;
	top: 50%;
	left: 50%;
	margin: -287px 0 0 -350px;
	background: url(../img/machine/movie_frame.png) no-repeat 0 0;
}

#modal.on.disp_1 div.movie,
#modal.on.disp_2 div.movie,
#modal.on.disp_3 div.movie,
#modal.on.disp_4 div.movie,
#modal.on.disp_5 div.movie,
#modal.on.disp_6 div.movie,
#modal.on.disp_7 div.buggy,
#modal.on.disp_8 div.cc200
{
	display: block;
}

#modal img.frame_top, #modal img.frame_left, #modal img.frame_right
{
	position: absolute;
	pointer-events : none;
}

#modal img.frame_top{ top: 5px; left: 9px; }
#modal img.frame_left{ top: 13px; left: 9px; }
#modal img.frame_right{ top: 13px; left: 687px; }

/*************************
	externalSwfContainer
*************************/

#externalSwfContainer
{
	position: absolute;
	top: 5px;
	left: 9px;
}

/*************************
	modal 200cc
*************************/

#modal div.cc200
{
	width: 890px;
	height: 388px;
	top: 50%;
	left: 50%;
	margin: -227px 0 0 -445px;
	/*background: url(../img/machine/buggy_bg.png) no-repeat 0 21px;*/
}

#modal div.cc200 img.img
{
	margin: 176px 0 0 28px;
}

#plate
{
	width: 890px;
	height: 388px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../img/machine/200cc_plate.png) no-repeat 0 0;
}

#plate dl	{ display: none; }

#plate iframe
{
	width: 523px;
	height: 294px;
	position: absolute;
	top: 47px;
	left: 340px;
}

/*************************
	thumb
*************************/

#thumb
{
	width: 654px;
	height: 81px;
	padding-left: 10px;
	overflow: hidden;
	position: absolute;
	top: 383px;
	left: 18px;
}

#thumb li
{
	width: 105px;
	height: 74px;
	background: url(../img/machine/machine_br.png) no-repeat 0 81px;
	float: left;
	margin-left: -10px;
	padding: 5px 7px 2px;
}

body#pc #thumb li:hover
{
	background-position: 0 0;
}

#thumb li a
{
	display: block;
	width: 105px;
	height: 74px;
	background: no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background: url(../img/machine/thumb.png) no-repeat 0 0;
}

#thumb li.mario a{ background-position: 0 0; }
#thumb li.rosetta a{ background-position: -105px 0; }
#thumb li.wario a{ background-position: -210px 0; }
#thumb li.donkey a{ background-position: -315px 0; }
#thumb li.peach a{ background-position: -420px 0; }
#thumb li.mt_mario a{ background-position: -525px 0; }

#thumb li a span
{
	display: block;
	width: 105px;
	height: 74px;
	background: url(../img/machine/thumb_shadow.png) no-repeat 0 0;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}

body#pc #thumb li a:hover span{ background-position: 0 -74px; }
#thumb li a.select span{ background-position: 0 -148px!important; }