/* ==========================================================================
   Create
   ========================================================================== */
   
/* ==========================================================================
   Create /Index
   ========================================================================== */
body.createIndex  {
	background-image: url(../images/common/bg-green.png);
	background-repeat: repeat;
}

	body.createIndex #MainContent{
		height: 394px;
	}
	
		body.createIndex #MainContent .image{
			position: absolute;
			top: 10px;
			right: 10px;
			z-index: 1;
		}

		body.createIndex #MainContent .inner {
			background-image: url(../images/create/bg-panel.png);
			background-repeat: no-repeat;
			background-size: 300px 394px;
			width: 280px;
			height: 370px;
			margin: 0 auto;
			padding-left: 20px;
			padding-top: 23px;
			position: relative;	
		}
		
			body.createIndex #MainContent .inner h1 {
					background-image: url(../images/create/title-create.png);
					background-repeat: no-repeat;
					background-size: 93px 57px;
					width: 93px;
					height: 57px;
					margin: 0;
					text-indent: -9999px;
				}
		
			body.createIndex #MainContent .inner .description {
				background-image: url(../images/create/text-description.png);
				background-repeat: no-repeat;
				background-size: 226px 54px;
				width: 226px;
				height: 54px;
				margin-top: 237px;
				text-indent: -9999px;
			}
		
		body.createIndex #MainContent #MainVideo {
			background-image: url(../images/create/image-gamepad.png);
			background-repeat: no-repeat;
			background-size: 423px 223px;
			background-position: center top;
			height: 223px;
			margin: -306px auto 0;
			position: relative;	
			z-index: 0;
		}
	
			body.createIndex #MainContent #MainVideo .inner {
				background-image: none;
			}
			
			body.createIndex #MainContent #MainVideo .inner .ytVideo {
				position: absolute;
				z-index: 10;
				margin: 28px 0 0 21px;
				width: 216px;
				height: 122px;
				
			}

/* ==========================================================================
   Create Navi
   ========================================================================== */

#CreateNavi {
	overflow: visible;
	width: 303px;
	height: 48px;
	margin: 8px auto 6px;
	padding-left: 1px;
}

body.createIndex div#CreateNavi,
body.createShare div#CreateNavi,
body.createArrange div#CreateNavi {
	margin-bottom: 16px;
}

#CreateNavi .main {
	display: none;
}

#CreateNavi .main li {
	position:absolute;
	margin-bottom: 3px;
}

#CreateNavi .main {
	position: absolute;
	width: 191px;
	height: 34px;
	float:left;
	overflow: visible;
	margin-right: 5px;
}
#CreateNavi li a {
	background-repeat: no-repeat;
	background-image: url(../images/create/navi.png);
	background-size: 573px 251px;
	text-indent: -9999px;
	display: block;
	overflow: hidden;
	width: 191px;
	height: 34px;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

body.ds3 #CreateNavi li a,
body.newds3 #CreateNavi li a,
body.android #CreateNavi li a {
	background-image: url(../images/create/navi-android.png);
}

#CreateNavi .create { margin-top: 0px; z-index: 15 }
#CreateNavi .combi	{ margin-top: 37px; z-index: 14 }
#CreateNavi .stage	{ margin-top: 74px; z-index: 13 }
#CreateNavi .series	{ margin-top: 111px; z-index: 12 }
#CreateNavi .sound	{ margin-top: 148px; z-index: 11 }

#CreateNavi .create	a { background-position: 0px 0px; }
#CreateNavi .combi	a { background-position: 0px -34px; }
#CreateNavi .stage	a { background-position: 0px -68px; }
#CreateNavi .series	a { background-position: 0px -102px; }
#CreateNavi .sound	a { background-position: 0px -136px; }

#CreateNavi .create	a:active { background-position: -191px 0px; }
#CreateNavi .combi	a:active { background-position: -191px -34px; }
#CreateNavi .stage	a:active { background-position: -191px -68px; }
#CreateNavi .series	a:active { background-position: -191px -102px; }
#CreateNavi .sound	a:active { background-position: -191px -136px; }

/* ページによって切り替え　*/

body.createIndex #CreateNavi.open .create a	{ background-position: -382px 0px; }

body.createCombi #CreateNavi.open .combi a		{ background-position: -382px -34px; }
body.createCombi #CreateNavi.close .create a { background-position: 0px -34px; }
body.createCombi #CreateNavi.close .create a:hover { background-position: -191px -34px; }

body.createStage #CreateNavi.open .stage a		{ background-position: -382px -68px; }
body.createStage #CreateNavi.close .create a { background-position: 0px -68px; }
body.createStage #CreateNavi.close .create a:hover { background-position: -191px -68px; }

body.createSeries #CreateNavi.open .series a	{ background-position: -382px -102px; }
body.createSeries #CreateNavi.close .create a { background-position: -0px -102px; }
body.createSeries #CreateNavi.close .create a:hover { background-position: -191px -102px }

body.createSound #CreateNavi.open .sound a	{ background-position: -382px -136px; }
body.createSound #CreateNavi.close .create a { background-position: -0px -136px; }
body.createSound #CreateNavi.close .create a:hover { background-position: -191px -136px }

/* -------------------- */


#CreateNavi .icon {
	display: block;
	position: absolute;
	background-repeat: no-repeat;
	background-image: url(../images/create/navi.png);
	background-size: 573px 251px;
	background-position: -152px -213px;
	text-indent: -9999px;
	display: block;
	overflow: hidden;
	-moz-transform: rotateZ(180deg);
	-webkit-transform: rotateZ(180deg);
	transform: rotateZ(180deg);
	width: 15px;
	height: 15px;
	margin-left: 166px;
	margin-top: 9px;
}

body.ds3 #CreateNavi .icon,
body.newds3 #CreateNavi .icon,
body.android #CreateNavi .icon {
	background-image: url(../images/create/navi-android.png);
}

#CreateNavi .create a:active .icon {
	margin-left: 169px;
	margin-top: 12px;
}

#CreateNavi .sub {
	position: absolute;
	display: block;
	margin-left: 197px;
	width: 107px;
	height: 43px;
}

#CreateNavi .sub li {
	display: block;
	float: left;
	width: 51px;
	height: 43px;
}

#CreateNavi .sub li a {
	direction: block;
	width: 51px;
	height: 43px;
}

#CreateNavi .arrange {
	margin-left: 5px;
}

#CreateNavi .share a { background-position: 0px -170px; }
#CreateNavi .share a:active {background-position: -51px -170px;}
#CreateNavi .arrange a { background-position: -153px -170px; }
#CreateNavi .arrange a:active {background-position: -204px -170px;}

body.createShare #CreateNavi .share a {background-position: -102px -170px;}
body.createArrange #CreateNavi .arrange a {background-position: -255px -170px;}


/* ==========================================================================
   Prev / Next button
   ========================================================================== */
#PageNavi {
	height: 0;
	margin: auto;
	overflow: visible;
}
#PageNavi #PrevButton {
	display: block;
	position: absolute;
	left: 10px;
	width: 38px;
	height: 38px;
	background-image: url(../images/create/navi.png);
	background-size: 573px 251px;
	background-position: 0px -213px;
	text-indent: -9999px;
	margin-top: 25px;
}

body.ds3 #PageNavi #PrevButton,
body.newds3 #PageNavi #PrevButton,
body.android #PageNavi #PrevButton {
	background-image: url(../images/create/navi-android.png);
}

#PageNavi #PrevButton:active {
	background-position: -38px -213px;
}

#PageNavi #NextButton {
	display: block;
	position: absolute;
	right: 10px;
	width: 38px;
	height: 38px;
	background-image: url(../images/create/navi.png);
	background-size: 573px 251px;
	background-position: -76px -213px;
	text-indent: -9999px;
	margin-top: 25px;
}

body.ds3 #PageNavi #NextButton,
body.newds3 #PageNavi #NextButton,
body.android #PageNavi #NextButton {
	background-image: url(../images/create/navi-android.png);
}

#PageNavi #NextButton:active {
	background-position: -114px -213px;
}
/* ==========================================================================
   Create / Share
   ========================================================================== */

body.createShare {
	background-image: url(../images/common/bg-pink-light.png);
	background-repeat: repeat;
}


body.createShare #MainContent .description {
	background-image: url(../images/create/share/bg-main.png);
	background-size: 300px 499px;
	background-repeat: no-repeat;
	width: 300px;
	height: 471px;
	margin: 0 auto;
	padding-top: 28px;
}

body.createShare #MainContent h1 {
	background-image: url(../images/create/share/title-share.png);
	background-repeat: no-repeat; 
	background-size: 259px 97px;
	width: 259px;
	height: 97px;
	margin: 0 auto 20px;
	text-indent: -9999px;
}

body.createShare #MainContent h2 {
	background-image: url(../images/create/share/title-sub.png);
	background-size: 150px 23px;
	background-repeat: no-repeat; 
	width: 150px;
	height: 23px;
	margin: 0 auto 17px;
	text-indent: -9999px;
}

body.createShare #MainContent p {
	background-image: url(../images/create/share/text-description.png);
	background-size: 259px 147px;
	width: 259px;
	height: 147px;
	margin: 0 auto;
	text-indent: -9999px;
}

   
/* ==========================================================================
   Create / Arrange
   ========================================================================== */
   
body.createArrange {
	background-image: url(../images/common/bg-pink-light.png);
	background-repeat: repeat;
}  

body.createArrange #MainContent .description {
	background-image: url(../images/create/arrange/bg-main.png);
	background-repeat: no-repeat; 
	background-size: 300px 289px;
	width: 300px;
	height: 261px;
	margin: 0 auto;
	padding-top: 28px;
} 

body.createArrange #MainContent h1 {
	background-image: url(../images/create/arrange/title-arrange.png);
	background-repeat: no-repeat; 
	background-size: 220px 96px;
	width: 220px;
	height: 96px;
	margin: 0 auto 23px;
	text-indent: -9999px;
}

body.createArrange #MainContent p {
	background-image: url(../images/create/arrange/text-description.png);
	background-repeat: no-repeat;
	background-size: 271px 116px;
	width: 271px;
	height: 116px;
	margin: 0 auto; 
	text-indent: -9999px;	
}

/* ==========================================================================
   Create / Series
   ========================================================================== */
   
body.createSeries {
	background-image: url(../images/common/bg-green.png);
	background-repeat: repeat;
}  

body.createSeries #MainContent {
	height: auto;
}

body.createSeries #MainContent .description {
	position: relative;
	overflow-x: hidden;
	background-image: url(../images/create/series/bg-panel.png);
	background-repeat: no-repeat; 
	background-size: 300px 449px;
	background-position: center 10px;
	width: 320px;
	height: 431px;
	margin: 0 auto;
	padding-top: 33px;
}


body.createSeries #MainContent h1 {
	background-image: url(../images/create/series/title-series.png);
	background-repeat: no-repeat; 
	background-size: 174px 57px;
	width: 174px;
	height: 57px;
	margin: 0 0 15px 30px;
	text-indent: -9999px;
}

body.createSeries #MainContent .capVisual {
	display: block;
	height: 258px;
	width: 294px;
	margin: 0 auto 15px auto;
	
	background: url(../images/create/series/image-main.jpg);
	background-size: 294px 258px;
}

body.createSeries #MainContent .description p {
	background-image: url(../images/create/series/text-description.png);
	background-repeat: no-repeat;
	background-size: 245px 56px;
	background-position: center top;
	width: 245px;
	height: 56px;
	margin: 0 0 0 30px; 
	text-indent: -9999px;	
}

body.createSeries #MainContent .mario {
	display: block;
	position: absolute;
	background-image: url(../images/create/series/image-mario.png);
	background-size: 336px 106px;
	background-position: -0px 0px;
	width: 84px;
	height: 106px;
	right: 18px;
	top: 0;
	z-index: 1;
}

/* ==========================================================================
   Create / Stage
   ========================================================================== */
   
body.createStage {
	background-image: url(../images/common/bg-green.png);
	background-repeat: repeat;
}  

body.createStage #MainContent {
	height: auto;
}

body.createStage #MainContent .description {
	position: relative;
	overflow-x: hidden;
	background-image: url(../images/create/stage/bg-panel.png);
	background-repeat: no-repeat; 
	background-size: 300px 430px;
	background-position: center 10px;
	width: 320px;
	height: 430px;
	margin: 0 auto;
	padding-top: 33px;
} 

body.createStage #MainContent .description .marioImg {
	display: block;
	position: absolute;
	right: -22px;
	top: 0px;
	z-index: 1;
}

body.createStage #MainContent h1 {
	background-image: url(../images/create/stage/title-stage.png);
	background-repeat: no-repeat; 
	background-size: 125px 87px;
	width: 220px;
	height: 96px;
	margin: 0 auto 10px 30px;
	text-indent: -9999px;
}

body.createStage #MainContent .description p {
	background-image: url(../images/create/stage/text-description.png);
	background-repeat: no-repeat;
	background-size: 244px 54px;
	background-position: center top;
	width: 244px;
	height: 54px;
	margin: 0 0 0 30px; 
	text-indent: -9999px;	
}

body.createStage #MainContent .description img {
	display: block;
	position: absolute;
}

@keyframes cloudmove {
	0% {background-position: 0 0;}
	100% {background-position: -4272px 0;}
}

@-webkit-keyframes cloudmove {
	0% {background-position: 0 0;}
	100% {background-position: -4272px 0;}
}

body.createStage #MainContent #LoopContainer {
	display: block;
	height: 200px;
	width: 294px;
	margin: 0 auto 20px auto;
	
	background: url(../images/create/stage/image-stages.png);
	background-repeat: repeat-x;
	background-size: 2136px 200px;
	
	animation: cloudmove 55s linear infinite;
	-webkit-animation: cloudmove 55s linear infinite;
}

/* ==========================================================================
   Create / Combi
   ========================================================================== */
   
body.createCombi {
	background-image: url(../images/common/bg-green.png);
	background-repeat: repeat;
}  

body.createCombi #MainContent .description {
	position: relative;
	overflow-x: hidden;
	background-image: url(../images/create/combi/bg-panel.png);
	background-repeat: no-repeat; 
	background-size: 300px 475px;
	background-position: center 10px; 
	width: 320px;
	height: 475px;
	margin: 0 auto;
	padding-top: 28px;
} 

	body.createCombi #MainContent .description p {
		background-image: url(../images/create/combi/text-description.png);
		background-repeat: no-repeat;
		background-size: 237px 76px;
		width: 237px;
		height: 76px;
		margin: 0 0 0 30px; 
		text-indent: -9999px;	
	}


body.createCombi #MainContent h1 {
	background-image: url(../images/create/combi/title-combi.png);
	background-repeat: no-repeat; 
	background-size: 201px 57px;
	width: 201px;
	height: 57px;
	margin: 3px auto 18px 30px;
	text-indent: -9999px;
}

body.createCombi #MainContent .description .marioImg {
	display: block;
	position: absolute;
	right: -52px;
	top: 30px;
}

body.createCombi #MainContent #SlotContainer {
	background-image: url(../images/create/combi/bg-mainimg.jpg);
	background-repeat: no-repeat;
	background-size: 294px	265px;
	width: 294px;
	height: 190px;
	margin: 0 auto 14px;
	padding-top: 75px;
}

body.createCombi #MainContent #SlotContainer .slot {
	background-image: url(../images/create/combi/bg-main.png);
	background-size: 9px 9px;
	width: 294px;
	height: 117px;
}

body.createCombi #MainContent .right .slot > .inner {
	margin: auto;
}
body.createCombi #MainContent .slot img {
	display: block;
	float: left;
}

body.createCombi #MainContent .slot .part1 {
	margin-top: 30px;
	margin-left: 13px;
}

body.createCombi #MainContent .slot .plus {
	margin-top: 45px;
	margin-left: 5px;
}

body.createCombi #MainContent .slot .part2 {
	margin-top: 30px;
	margin-left: 5px;
}

body.createCombi #MainContent .slot .equal {
	margin-top: 45px;
	margin-left: 5px;
}

body.createCombi #MainContent .slot .part1,
body.createCombi #MainContent .slot .part2 {
	float: left;
	width: 59px;
	height: 59px;
	background-image: url(../images/create/combi/image-combi.png);
	background-size: 59px 59px;
}

body.createCombi #MainContent .slot .part1 .inner {
	width: 56px;
	height: 56px;
	background-image: url(../images/create/combi/image-combi1.png);
	background-size: 59px 1239px;
}

body.createCombi #MainContent .slot .part2 .inner {
	width: 56px;
	height: 56px;
	background-image: url(../images/create/combi/image-combi2.png);
	background-size: 59px 1239px;
}

body.createCombi #MainContent .slot .combined {
	float: left;
	width: 115px;
	height: 115px;
	margin-left: -15px;
	margin-top: 2px;
	overflow: hidden;
}

body.createCombi #MainContent .slot .combined .inner {
	width: 115px;
	height: 115px;
	background-image: url(../images/create/combi/image-combi3.png);
	background-repeat: no-repeat;
	background-position: 115px 0px;
	background-size: 805px 115px;
}

/* ==========================================================================
   Create / Sound
   ========================================================================== */
   
body.createSound {
	background-image: url(../images/common/bg-green.png);
	background-repeat: repeat;
}  

body.createSound #MainContent .inner {
	position: relative;
	overflow-x: hidden;
	background-image: url(../images/create/sound/bg-panel.png);
	background-repeat: no-repeat; 
	background-size: 300px 190px;
	background-position: center 10px; 
	width: 320px;
	height: 180px;
	margin: 0 auto;
	padding-top: 28px;
} 

body.createSound #MainContent .inner p {
	text-indent: -9999px;
	display: none;
}

body.createSound #MainContent .inner .image{
	position: absolute;
	top: 0px;
	right: 3px;
	z-index: 1;
}

body.createSound #MainContent h1 {
	background-image: url(../images/create/sound/title-sound.png);
	background-repeat: no-repeat; 
	background-size: 261px 150px;
	width: 261px;
	height: 150px;
	margin: 0 auto 20px 30px;
	text-indent: -9999px;
}

body.createSound #MainContent h2 {
	margin: 10px 0 15px 0;
	text-align: center;
}

body.createSound #MainContent #Movies iframe {
	width: 288px;
	height: 288px;
}

body.createSound #MainContent #Movies .tutorial iframe {
	width: 288px;
	height: 164px;
}

body.createSound #MainContent #Movies li.tutorial {
	width: 288px;
	height: 164px;
	margin: 0 auto 15px;
	position: relative;
}

body.createSound #MainContent #Movies li {
	width: 288px;
	height: 288px;
	margin: 0 auto 15px;
	position: relative;
}

body.createSound #MainContent #Movies li img {
	position: absolute;
	top: 0;
	left: 0;
}

body.createSound #MainContent #Movies p {
	padding-top: 60px;
}