/****** Core ******/ body, header, footer, section, article, h1, h3, h4, div, p{ padding:0; margin:0; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block} html{background:#FFF; } body{background:url(../img/bg.jpg) center top no-repeat fixed; color:#294044; font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;} body#home {background:url(../img/bg_home.jpg) center top no-repeat;} @media only screen and (min-width:1500px){ body{background:url(../img/bg_1500px.jpg) center top no-repeat fixed; } } ul, ol, dl{ list-style:none; padding:0; margin:0} li{ display:list-item; zoom:normal; padding:0; margin:0} h1{ margin:0 auto;padding:50px 0 0 340px} h2{ text-align:right; display:block; padding:5px 0 10px 0; margin:0} h3{ margin:0 auto; padding:0 0 10px 0} h1 img, h2 img, h3 img, h4 img, h5 img, .subtitle img { width:100%; } hr {border-top: dashed 2px rgba(153,234,218,.8); border-bottom: none; border-left: none; border-right: none; margin: 24px auto;} a:link,body a:visited{color:#e535cd} body a:link img,body a:visited img{border:0} a:hover{text-decoration:none} .br-sp{display:none} .image_pc{display:inline} .image_sp{display:none} .img_right{float:right} /*Pulse*/ .heart{padding:0;margin:0} .pulse{-webkit-animation:pulse 3s linear infinite;-moz-animation:pulse 3s linear infinite;-ms-animation:pulse 3s linear infinite;animation:pulse 3s linear infinite} @keyframes pulse { 0%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} 50%{-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-o-transform:scale(0.9);-ms-transform:scale(0.9);transform:scale(0.9)} 100%{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-ms-transform:scale(1);transform:scale(1)} } /*.container { margin: 0 auto; max-width:1200px;}*/ .container { width: 1030px; margin: 0 auto; max-width:1200px;} .releasedate { font-size: 2em; letter-spacing:3px; text-transform:uppercase; font-weight:bold; } .subtitle{text-align:center} .clearfix{ zoom:1}.clearfix:after{ display:block; content:""; clear:both} /****** Unsorted Styles ******/ .info_link{text-align:right;padding-right:135px} .info_link img:hover{opacity:.7} #product{width:1040px;margin:0 auto} #bnr_top{text-align:right;padding-right:180px} #bnr_top img{padding-left:10px;margin-bottom:5px} .movie_content{text-align:center} .dlc_link{text-align:center} .read{margin:0 5px 20px!important; text-align:left;} .small{margin:0 5px;font-size:80%} .read strong.subtitle{margin-bottom:5px;color:#0F6755} .photoCon{display:inline-block;margin:5px} .photoConCap{display:inline-block;margin:5px;text-align:center;padding-bottom:20px;font-size:90%;color:#017A62;font-weight:700} /*removed inline block to allow text to center properly*/ .photoConCap2{margin:5px;text-align:center;padding-bottom:20px;font-size:90%;color:#017A62;font-weight:700} .photoCon2{text-align:center} .photoCon2 img {margin: 5px;} .photoCon4{display:inline-block;padding-right:20px;padding-left:5px;padding-bottom:15px} .content02a,.content02b,.content03a,.content03b{ display:inline-block;} .content02a .subContent,.content03a .subContent{z-index:98;width:364px;background:url(../img/about/con02a_bt.png) no-repeat;background-position:bottom;margin-right:5px} .content02b .subContent,.content03b .subContent{z-index:98;width:364px;background:url(../img/about/con02b_bt.png) no-repeat;background-position:bottom} .content04 .subContent{z-index:98;min-height:299px;width:734px;background:url(../img/about/con04_bt.png) no-repeat} .content04 .subContentlong{z-index:98;min-height:299px;width:734px;background:url(../img/about/con04_bt.png) left bottom no-repeat;overflow:hidden} .content02a .subContent,.content02b .subContent,.content03a .subContent,.content03b .subContent{padding:15px;width:334px} .content02a_bg,.content03a_bg{background:url(../img/about/con02a_bg.png) repeat-y} .content02b_bg,.content03b_bg{background:url(../img/about/con02b_bg.png) repeat-y} .content04_bg{background:url(../img/about/con04_bg.png) repeat-y} .content04 .content04_bg .subContent div{padding:0 15px} .content04 .content04_bg .subContentlong div{padding:0 15px 25px;overflow:hidden} .note{clear:both;border:3px solid #FFF;width:95%;margin:0 auto;font-size:85%;color:#0F6755;padding:10px!important;background:rgba(255,255,255,0.6);overflow:hidden} .randamList{clear:both;border:2px dashed #4caaa2;margin:0 auto 16px;font-size:90%;color:#0F6755;background:#f2fcf9;overflow:hidden;padding:20px 16px 0!important} .randamContent{clear:both;margin:0 auto;color:#0F6755;padding:20px 10px!important;overflow:hidden} .dlc_content{clear:both;border:2px dashed #4caaa2;margin:0 auto 16px;font-size:90%;color:#0F6755;background:#f2fcf9;overflow:hidden;padding:16px} .dlc_title{margin-bottom:4px} .dlc_note{color:#0F6755; margin: 10px 0;} .randam_title{padding:0 0 8px!important;font-size:105%} /****** Scroll to Top ******/ #scrollup{width:90px;height:90px;position:fixed;bottom:10px;right:20px;display:none;text-indent:-9999px;cursor:pointer;opacity:.8;z-index:2} #scrollup:hover{opacity:1} #scrollup img{display:block; width:100%;} /****** Filter ******/ #filtercontainer .mix { display: none; } /****** Header ******/ header { padding-top:10px; } header nav { background:url(../img/nav_bg_c.png) left top no-repeat; height:56px; width:1030px; float:none; padding:11px 0 10px 20px; margin:0 auto; } header nav ul li { float:left; } .hamburger {display: none;} .hamburger a { text-decoration:none; color: #FFF; font-weight:bold; font-size:40px; } .hamburger a span { font-weight: normal; vertical-align: middle; margin-left: 10px;} /****** Main Navigation ******/ span.overlay{display:block; width:100%; height:100%; position:absolute; text-align:left; text-indent:100%; white-space:nowrap; overflow:hidden; opacity:0; -webkit-transition:opacity .1s linear; -moz-transition:opacity .1s linear; -o-transition:opacity .1s linear; transition:opacity .1s linear; filter:alpha(opacity=0)} span.overlay:hover{ opacity:1; filter:alpha(opacity=100)} /*Home*/ a#gnav_home{text-indent:-9999px; background:url(../img/nav_home.png) left top no-repeat; width:144px; height:45px; position:relative; display:block} a#gnav_home span.overlay{background:url(../img/nav_home_on.png) left top no-repeat} #home a#gnav_home{background:url(../img/nav_home_on.png) left top no-repeat} /*About*/ a#gnav_about{text-indent:-9999px; background:url(../img/nav_about.png) left top no-repeat; width:144px; height:45px; position:relative; display:block} a#gnav_about span.overlay{background:url(../img/nav_about_on.png) left top no-repeat} #about a#gnav_about, #about_mainmenu a#gnav_about {background:url(../img/nav_about_on.png) left top no-repeat} /*Songs*/ a#gnav_song{text-indent:-9999px; background:url(../img/nav_song.png) left top no-repeat; width:144px; height:45px; position:relative; display:block} a#gnav_song span.overlay{background:url(../img/nav_song_on.png) left top no-repeat} #song a#gnav_song{background:url(../img/nav_song_on.png) left top no-repeat} /*Modules*/ a#gnav_module{text-indent:-9999px; background:url(../img/nav_module.png) left top no-repeat; width:144px; height:45px; position:relative; display:block} a#gnav_module span.overlay{background:url(../img/nav_module_on.png) left top no-repeat} #module a#gnav_module{background:url(../img/nav_module_on.png) left top no-repeat} /*Media*/ a#gnav_movie{text-indent:-9999px; background:url(../img/nav_movie.png) left top no-repeat; width:144px; height:45px; position:relative; display:block} a#gnav_movie span.overlay{background:url(../img/nav_movie_on.png) left top no-repeat} #movie a#gnav_movie{background:url(../img/nav_movie_on.png) left top no-repeat} /*DLC*/ a#gnav_dlc{text-indent:-9999px; background:url(../img/nav_dlc.png) left top no-repeat; width:144px; height:45px; position:relative; display:block} a#gnav_dlc span.overlay{background:url(../img/nav_dlc_on.png) left top no-repeat} #dlc a#gnav_dlc{background:url(../img/nav_dlc_on.png) left top no-repeat} /*Purchase*/ a#gnav_purchase{text-indent:-9999px; background:url(../img/nav_purchase.png) left top no-repeat; width:144px; height:45px; position:relative; display:block} a#gnav_purchase span.overlay{background:url(../img/nav_purchase_on.png) left top no-repeat} #purchase a#gnav_purchase{background:url(../img/nav_purchase_on.png) left top no-repeat} /*Coming Soon*/ a#gnav_comingsoon{text-indent:-9999px; background:url(../img/nav_comingsoon.png) left top no-repeat; width:144px; height:45px; position:relative; display:block; cursor: default;} /****** Side Navigation ******/ #side_nav .more { display:none;} /*About*/ a#nav_about_top{text-indent:-9999px; background:url(../img/about/nav_about.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_about_top span.overlay{background:url(../img/about/nav_about_on.png) left top no-repeat} #about_top a#nav_about_top{background:url(../img/about/nav_about_on.png) left top no-repeat} #about_top a#nav_about_top span.overlay{display:none} a#nav_about_mainmenu{text-indent:-9999px; background:url(../img/about/nav_main.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_about_mainmenu span.overlay{background:url(../img/about/nav_main_on.png) left top no-repeat} #about_mainmenu a#nav_about_mainmenu{background:url(../img/about/nav_main_on.png) left top no-repeat} #about_mainmenu a#nav_about_mainmenu span.overlay{display:none} #about_mainmenu a#nav_about_top{background:url(../img/about/nav_about.png); } #about_mainmenu a#nav_about_top:hover{background:url(../img/about/nav_about_on.png); } a#nav_about_manual{text-indent:-9999px; background:url(../img/about/nav_manual.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_about_manual span.overlay{background:url(../img/about/nav_manual_on.png) left top no-repeat} #about_manual a#nav_about_manual{background:url(../img/about/nav_manual_on.png) left top no-repeat} #about_manual a#nav_about_manual span.overlay{display:none} /*Modules*/ a#nav_module_all{text-indent:-9999px; background:url(../img/modules/nav_module_ft.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_module_all span.overlay{background:url(../img/modules/nav_module_ft_on.png) left top no-repeat} #module_all a#nav_module_all{background:url(../img/modules/nav_module_ft_on.png) left top no-repeat} #module_all a#nav_module_all span.overlay{display:none} a#nav_module_fs{text-indent:-9999px; background:url(../img/modules/nav_module_fs.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_module_fs span.overlay{background:url(../img/modules/nav_module_fs_on.png) left top no-repeat} #fs a#nav_module_fs{background:url(../img/modules/nav_module_fs_on.png) left top no-repeat} #fs a#nav_module_fs span.overlay{display:none} a#nav_module_ct{text-indent:-9999px; background:url(../img/modules/nav_module_ct.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_module_ct span.overlay{background:url(../img/modules/nav_module_ct_on.png) left top no-repeat} #ct a#nav_module_ct{background:url(../img/modules/nav_module_ct_on.png) left top no-repeat} #ct a#nav_module_ct span.overlay{display:none} a#nav_module_pre{text-indent:-9999px; background:url(../img/modules/nav_module_prelude.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_module_pre span.overlay{background:url(../img/modules/nav_module_prelude_on.png) left top no-repeat} #pre a#nav_module_pre{background:url(../img/modules/nav_module_prelude_on.png) left top no-repeat} #pre a#nav_module_pre span.overlay{display:none} a#nav_module_dlc{text-indent:-9999px; background:url(../img/modules/nav_module_dlc.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_module_dlc span.overlay{background:url(../img/modules/nav_module_dlc_on.png) left top no-repeat} #dlc a#nav_module_dlc{background:url(../img/modules/nav_module_dlc_on.png) left top no-repeat} #dlc a#nav_module_dlc span.overlay{display:none} /*Songs*/ a#nav_song_all{text-indent:-9999px; background:url(../img/songs/nav_song_fs_ct.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_song_all span.overlay{background:url(../img/songs/nav_song_fs_ct_on.png) left top no-repeat} a#nav_song_all.active { background:url(../img/songs/nav_song_fs_ct_on.png) left top no-repeat } #song_all a#nav_song_all{background:url(../img/songs/nav_song_fs_ct_on.png) left top no-repeat} #song_all a#nav_song_all span.overlay{display:none} a#nav_song_fs{text-indent:-9999px; background:url(../img/songs/nav_song_fs.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_song_fs span.overlay{background:url(../img/songs/nav_song_fs_on.png) left top no-repeat} a#nav_song_fs.active{background:url(../img/songs/nav_song_fs_on.png) left top no-repeat} #fs a#nav_song_fs{background:url(../img/songs/nav_song_fs_on.png) left top no-repeat} #fs a#nav_song_fs span.overlay{display:none} a#nav_song_ct{text-indent:-9999px; background:url(../img/songs/nav_song_ct.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_song_ct span.overlay{background:url(../img/songs/nav_song_ct_on.png) left top no-repeat} a#nav_song_ct.active{background:url(../img/songs/nav_song_ct_on.png) left top no-repeat} #ct a#nav_song_ct{background:url(../img/songs/nav_song_ct_on.png) left top no-repeat} #ct a#nav_song_ct span.overlay{display:none} a#nav_song_pre{text-indent:-9999px; background:url(../img/songs/nav_song_pre.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_song_pre span.overlay{background:url(../img/songs/nav_song_pre_on.png) left top no-repeat} a#nav_song_pre.active{background:url(../img/songs/nav_song_pre_on.png) left top no-repeat} #pre a#nav_song_pre{background:url(../img/songs/nav_song_pre_on.png) left top no-repeat} #pre a#nav_song_pre span.overlay{display:none} a#nav_song_dlc{text-indent:-9999px; background:url(../img/songs/nav_song_dlc.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} a#nav_song_dlc span.overlay{background:url(../img/songs/nav_song_dlc_on.png) left top no-repeat} a#nav_song_dlc.active{background:url(../img/songs/nav_song_dlc_on.png) left top no-repeat} #dlc a#nav_song_dlc{background:url(../img/songs/nav_song_dlc_on.png) left top no-repeat} #dlc a#nav_song_dlc span.overlay{display:none} /*DLC*/ #dlc_top a#nav_dlc_seasonpass{text-indent:-9999px; background:url(../img/dlc/nav_dlc_seasonpass.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} #dlc_top a#nav_dlc_seasonpass span.overlay{background:url(../img/dlc/nav_dlc_seasonpass_on.png) left top no-repeat} #dlc_top a#nav_dlc_1{text-indent:-9999px; background:url(../img/dlc/nav_dlc_1.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} #dlc_top a#nav_dlc_1 span.overlay{background:url(../img/dlc/nav_dlc_1_on.png) left top no-repeat} #dlc_top a#nav_dlc_2{text-indent:-9999px; background:url(../img/dlc/nav_dlc_2.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} #dlc_top a#nav_dlc_2 span.overlay{background:url(../img/dlc/nav_dlc_2_on.png) left top no-repeat} #dlc_top a#nav_dlc_3{text-indent:-9999px; background:url(../img/dlc/nav_dlc_3.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} #dlc_top a#nav_dlc_3 span.overlay{background:url(../img/dlc/nav_dlc_3_on.png) left top no-repeat} #dlc_top a#nav_dlc_4{text-indent:-9999px; background:url(../img/dlc/nav_dlc_4.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} #dlc_top a#nav_dlc_4 span.overlay{background:url(../img/dlc/nav_dlc_4_on.png) left top no-repeat} #dlc_top a#nav_unlock{text-indent:-9999px; background:url(../img/dlc/nav_dlc_unlock.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} sidenav_top a#nav_unlock span.overlay{background:url(../img/dlc/nav_dlc_unlock_on.png) left top no-repeat} #dlc_top a#nav_patch{text-indent:-9999px; background:url(../img/dlc/nav_dlc_patch.png) left top no-repeat; width:230px; height:70px; position:relative; display:block} #dlc_top a#nav_patch span.overlay{background:url(../img/dlc/nav_dlc_patch_on.png) left top no-repeat} /****** Home ******/ #homecontent { text-align:right;} #platform {} #platform img { margin-top:10px; } #logo {} #logo img { width: 100%; max-width: 700px; } #trailer { text-align: center; margin-left: 340px; margin-bottom: 20px; } #trailer iframe { width: 430px; min-height: 250px; } #summary{ width:60%; text-align: center; background:url(../img/bg-info.png) center top repeat-y; padding:20px; display:inline-block; } #summary_content { padding: 5px 60px; font-weight: bold; width:80%; } #purchaselink { width:60%; margin-top: 2%; text-align:center; display:inline-block; } #purchaselink img { } #purchaselink img:hover {opacity:0.7} #specs{width:900px;background:rgba(255,255,255,.9);margin:10px auto; margin-bottom:30px; text-align:left; /*margin-top: 260px;*/ } #specs_content{color:#000;font-size:11px;letter-spacing:1px;line-height:280%;padding:10px;} .specs_t{color:#FFF; background:#489d96; padding:5px; margin:0px 5px 5px 0px;} .specs_div{color:#01adc0} /****** Content ******/ #mainContainer{width:76%; display: inline-block; border: 3px solid #fafcf7; padding: 3px; position: relative; left: 22.5%; } #side_nav{width:22%; display:inline-block; vertical-align: top; position:fixed;top: 90px } #side_nav_group {position: absolute; width: 100%;} .mainContent{ background:rgba(250,252,247,.9); padding:20px; } #info .mainContent{padding:15px 0 10px 0} .subContainer{ padding:0 0 10px 0} .subContainer p{margin:0; /*display:inline-block;*/} /*About*/ .info_note{clear:both; border:2px solid #4caaa2; margin:0 auto 16px auto; font-size:90%; color:#0F6755; padding-top:16px; padding-right:16px; padding-left:16px; background:#f2fcf9; overflow:hidden} .date{ font-size:90%; text-align:right; padding:0 40px 20px 0; color:#017475; margin-top:-12px} .contentV { color:#000; padding: 5px; background:#FFF; margin-bottom: 20px; /*display: inline-block;*/ border-radius:6px; } .contentV_inner { display:inline-block; padding: 10px; text-align:center; } .contentV_inner {border:3px solid #93e1d1;border-radius:6px;background:#93e1d1;background-image:url(../img/pattern.png),linear-gradient(#FFF,#d7fff6)} .contentV h4{background:url('../img/h4bg.png') no-repeat;background-size: contain; padding: 20px;line-height: 0px; margin:0 auto;color:#FFF;text-align:center;/*width:80%;padding:5px;background:#20f6cb;border:3px solid #22e3be;*/margin-top:-30px;margin-bottom:10px;text-shadow:1px 1px 5px #08977a} .contentV2{color:#000; padding: 5px; background:#FFF; margin-bottom: 20px; /*display: inline-block;*/ border-radius:6px;} .contentV2_inner { display:inline-block; padding: 10px; text-align:center; width: 100%; max-width: 707px; } .contentV2_inner {border:3px solid #93e1d1;border-radius:6px;background:#93e1d1;background-image:url(../img/pattern.png),linear-gradient(#FFF,#d7fff6)} .contentV2 .subContent{ background:url(../img/about/con05_bt.png) left bottom no-repeat;} .contentV2 h4{ text-indent:-9999px; height:55px; margin-top:-28px; } #mainmenu01{margin-top:20px} #mainmenu01 h4{ background:url(../img/about-mainmenu/mainmenu_01.png) top center no-repeat} #mainmenu02 h4{ background:url(../img/about-mainmenu/mainmenu_02.png) top center no-repeat} #mainmenu03 h4{ background:url(../img/about-mainmenu/mainmenu_03.png) top center no-repeat} #mainmenu04 h4{ background:url(../img/about-mainmenu/mainmenu_04.png) top center no-repeat} #mainmenu05 h4{ background:url(../img/about-mainmenu/mainmenu_05.png) top center no-repeat} #mainmenu06 h4{ background:url(../img/about-mainmenu/mainmenu_06.png) top center no-repeat} .content02a h4{margin-top:12px; text-indent:-9999px; width:364px; height:135px; background:url(../img/about/con02a_tp.png) no-repeat}.content02b h4{margin-top:12px; text-indent:-9999px; width:364px; height:135px; background:url(../img/about/con02b_tp.png) no-repeat}.content03a h4{margin-top:12px; text-indent:-9999px; width:364px; height:50px; background:url(../img/about/con03a_tp.png) no-repeat}.content03b h4{margin-top:12px; text-indent:-9999px; width:364px; height:50px; background:url(../img/about/con03b_tp.png) no-repeat} .content04 h4{ width:734px; text-indent:-9999px; height:50px; background:url(../img/about/con04_tp.png) no-repeat} #hairStyle{margin-bottom:24px} /*Songs*/ .songlist { padding: 5px; background:#FFF; margin-bottom: 20px; /*display: inline-block;*/ border-radius:6px; box-shadow: 0px 5px #CCC; font-size:12px; } .songlist h4 { margin-bottom: 10px; } .songlist h4 img { width:100%;} .songlist_fs, .songlist_ct, .songlist_pre{ display:inline-block; color:#FFF; padding: 10px; } .songlist_fs{border:3px solid #6cc8fe;border-radius:6px;background:#daecff;background-image:url(../img/pattern.png),linear-gradient(#FFF,#daecff)} .songlist_ct{border:3px solid #ffc97e;border-radius:6px;background:#fff1da;background-image:url(../img/pattern.png),linear-gradient(#FFF,#fff1da)} .songlist_pre{border:3px solid #7fe0d8;border-radius:6px;background:#feffff;background-image:url(../img/pattern.png),linear-gradient(#FFF,#feffff)} .song_image img{ width:100%; border:#fff solid 3px} .song_content_l{ float:left;} .song_listen{ display:inline-block; } .pv_watch{ display:inline-block; } .song_link_1 a:hover, .song_link_2 a:hover, .dlc_link a:hover{opacity:0.7} #sakuin{width:100%;overflow:hidden;margin:0 auto;padding:0 0 15px;margin-top:-15px} #sakuin ul { text-align: center; } #sakuin ul li{display: inline-block; padding-top:12px} #sakuin ul li a:hover{opacity:.5} .level{float:right; } .level img { width:100%;} .level_extra{float:right; clear:right; margin:0 0px 5px 0} .music{background:url(../img/songs/artist_music_bg.png) no-repeat; width:190px; height:27px; padding:6px 0px 0px 98px; float:right; clear:right; } .lyrics{background:url(../img/songs/artist_lyrics_bg.png) no-repeat; width:190px; height:27px; padding:6px 0px 0px 98px; float:right; clear:right; } .arranger{background:url(../img/songs/artist_arrange_bg.png) no-repeat; width:190px; height:27px; padding:6px 0px 0px 98px; float:right; clear:right; } .manipulator{background:url(../img/songs/artist_manipulator_bg.png) no-repeat; width:190px; height:27px; padding:6px 0px 0px 98px; float:right; clear:right;} .pv{background:url(../img/songs/artist_pv_bg.png) no-repeat; width:190px; height:27px; padding:6px 0px 0px 98px; float:right; clear:right; } .guitarplayer{background:url(../img/songs/artist_guiter_bg.png) no-repeat; width:190px; height:27px; padding:6px 0px 0px 98px; float:right; clear:right; } .illustrator{background:url(../img/songs/artist_illustrator_bg.png) no-repeat; width:190px; height:27px; padding:6px 0px 0px 98px; float:right; clear:right; } .notes{width:272px; background:#005B69; float:right; clear:right; border:solid #00B8B6 3px; padding:4px; margin-right:5px} .smallercredit { font-size: 10px; line-height: 16px; } /*Modules*/ #sakuin_module{width:595px; overflow:hidden; margin:0 auto; padding:0 0 15px 0; margin-top:-15px} /*#sakuin_module.fsct{width:510px; overflow:hidden; margin:0 auto; padding:0 0 15px 0; margin-top:-15px}*/ #sakuin_module ul li{float:left; padding-top:12px} #sakuin_module ul li a:hover{opacity:0.5} .moduleList{margin:0px; overflow:hidden} ul.moduleList li{width:234px; float:left; padding:5px} /*DLC*/ #dlcpurchase{text-indent:-9999px; background:url(../img/nav_purchase.png) left top no-repeat; width:144px; height:50px; display:block; margin: 0 auto;} #dlcpurchase:hover {background:url(../img/nav_purchase_on.png) left top no-repeat} /****** Footer ******/ footer {background:#000;padding:20px;margin-top:50px; /*width:100%;*/} #footerContent{} #footerContent .footer-cell {display:inline-block;margin-right:15px;vertical-align:top; margin-bottom:10px;} #footerContent .esrblogo { height:79px;} #footerContent .segalogo { height: 40px;} #footerContent .mikulogo { height: 50px;} #footerContent img#piapro {float:none;height:12px;width:auto} #footerContent .footer-legal { width: 65%; color:#FFF;font-size:9px;} @media only screen and (max-width:900px){ /****** Core ******/ html{background-color:#FFF} body{background:url(../img/bg_sp.jpg) center top no-repeat fixed; } body#home {background:url(../img/bg_home_sp.jpg) center top no-repeat;} .container { width: 90%; } .br-sp{display:block} .image_sp{display:block; width:100%; margin: 0 auto;} .image_pc{display:none} .photoCon img, .photoCon2 img { width: 90%; height:auto;} .ghostMiku img { width:212px!important; height: 430px!important;} .celebrationMiku img { width:300px!important; height: 280px!important;} /****** Scroll to Top ******/ #scrollup{width:70px;} /****** Header ******/ header { padding:0px; } /****** Main Navigation ******/ header nav { background:rgba(0,0,0,.3); position:relative; z-index:2; width:100%; float:left; padding:0px; } header nav a { width:100% !important; text-decoration:none; color:#FFF; width:100%; height:inherit !important; font-weight:bold; font-size:21px; } header nav a:hover { background: rgba(0,0,0,0.2) !important; box-shadow: inset 0 -1px rgba(0,0,0,0); color:#FFF !important; } header nav ul li { float: none; display:none; } .hamburger { display:inline-block} .responsive li { display:inline !important; } span.overlay{display:block; width:100%; height:100%; position:inherit; text-align:center; text-indent:inherit; white-space:nowrap; overflow: inherit; opacity:1; padding: 20px 0px; } /*Home*/ a#gnav_home{background:none; text-indent:inherit; } a#gnav_home span.overlay{background: inherit; } #home a#gnav_home{background:rgba(0,0,0,0.1); border-left:5px solid #0dcfb6;} /*About*/ a#gnav_about{background:none; text-indent:inherit; } a#gnav_about span.overlay{background: inherit;} #about a#gnav_about, #about_mainmenu a#gnav_about {background:rgba(0,0,0,0.1); border-left:5px solid #e1d728;} /*Songs*/ a#gnav_song{background:none; text-indent:inherit; } a#gnav_song span.overlay{background: inherit;} #song a#gnav_song{background:rgba(0,0,0,0.1); border-left:5px solid #ecaf2e;} /*Modules*/ a#gnav_module{background:none; text-indent:inherit; } a#gnav_module span.overlay{background: inherit;} #module a#gnav_module{background:rgba(0,0,0,0.1); border-left:5px solid #fd69f1;} /*Media*/ a#gnav_movie{background:none; text-indent:inherit; } a#gnav_movie span.overlay{background: inherit;} #movie a#gnav_movie{background:rgba(0,0,0,0.1); border-left:5px solid #9fbdbb;} /*DLC*/ a#gnav_dlc{background:none; text-indent:inherit; } a#gnav_dlc span.overlay{background: inherit;} #dlc a#gnav_dlc{background:rgba(0,0,0,0.1); border-left:5px solid #4a9fd9;} /*Purchase*/ a#gnav_purchase{background:none; text-indent:inherit; } a#gnav_purchase span.overlay{background: inherit;} #purchase a#gnav_purchase{background:rgba(0,0,0,0.1); border-left:5px solid #f45f5f;} /*Coming Soon*/ a#gnav_comingsoon{ display: none !important; } a#gnav_comingsoon span.overlay{ display: none !important;} #gnav_comingsoon { display: none !important; } /****** Side Navigation ******/ .side_logo { display: none; } #side_nav nav ul li a { text-indent:0px; background:none !important; width:inherit; height:inherit; position:inherit; text-decoration: none; color: #FFF; font-weight: bold; font-size: 18px;} #side_nav nav ul li a:hover { background: rgba(0,0,0,0.2) !important; box-shadow: inset 0 -1px rgba(0,0,0,0); } #side_nav nav ul li a span.overlay { background:none; display:block !important; } /****** Home ******/ #homecontent { text-align:center; } #platform { text-align: right; } #platform img { } #logo {margin:0px; margin-top:60%; } #logo img {} #trailer { display:none; } #summary { width:inherit; margin-top: 60%; } #summary_content { width:100%; padding:0px; margin:0px; } .releasedate { margin:0px auto; } #purchaselink { width:100%; max-width:350px; margin: 10px 0px; } #purchaselink img { width:100%; height:auto; } #purchaselink img:hover {} #specs{ width:100%; margin-top:0px; } #specs_content{padding:16px} .specs_t{} .specs_div{display:none} /****** Content ******/ #mainContainer{width:100%; position:static; } .mainContent { padding: 0px; text-align: center; } .contentV2_inner { width:90%;} .contentV h4{width:80%;background:#20f6cb;border:3px solid #22e3be;} /*Songs*/ #song_all { text-align:center; } #song_all li { display: inline-block; } /*Modules*/ #sakuin_module { width:100%; text-align:center; } #sakuin_module ul li { display:inline-block; float:inherit; } ul.moduleList li { width: inherit; float:inherit; } /****** Footer ******/ footer { padding-bottom: 100px; } #footerContent {} #footerContent .footer-cell {width:100%; text-align:center;} #footerContent .esrblogo { } #footerContent .segalogo { } #footerContent .mikulogo { } #footerContent img#piapro {} #footerContent .footer-legal { font-size:12px; width:100%;} } /*RESPONSIVE FIXES*/ @media screen and (min-width: 900px) and (max-width: 1100px) { body{overflow-x: hidden;} header nav {background-size: 100%;width: 97%;} .container { width: auto; margin: 0 auto; max-width:1200px;} /* navigation*/ #c-menu--slide-left .c-menu__items {width: 95%; margin-left: 1.5%;} #c-menu--slide-left .c-menu__item {float: none; display: inline-block; margin-right: 3.5%;width: 10%;} #home a#gnav_home, a#gnav_home, #about a#gnav_about, a#gnav_about, #song a#gnav_song, a#gnav_song, #module a#gnav_module, a#gnav_module, #dlc a#gnav_dlc, a#gnav_dlc, #movie a#gnav_movie, a#gnav_movie, #purchase a#gnav_purchase, a#gnav_purchase {background-size: 100%; width: 135%;} a#gnav_home span.overlay, a#gnav_about span.overlay, a#gnav_song span.overlay, a#gnav_module span.overlay, a#gnav_dlc span.overlay, a#gnav_movie span.overlay, a#gnav_purchase span.overlay {background-size: 100%;} /* side navigation */ #c-menu--slide-right {width: 100%;} #side_nav #dlc_top {width: 100%;} .side_logo img { width: 100%;height: auto;} #dlc_top a#nav_dlc_seasonpass, #dlc_top a#nav_dlc_1, #dlc_top a#nav_dlc_2, #dlc_top a#nav_dlc_3, #dlc_top a#nav_dlc_4, #dlc_top a#nav_unlock, #dlc_top a#nav_patch, #dlc_top a#nav_dlc_seasonpass span.overlay, #dlc_top a#nav_dlc_1 span.overlay, #dlc_top a#nav_dlc_2 span.overlay, #dlc_top a#nav_dlc_3 span.overlay, #dlc_top a#nav_dlc_4 span.overlay, #dlc_top a#nav_unlock span.overlay, #dlc_top a#nav_patch span.overlay, #about_top a#nav_about_top, #about_top a#nav_about_top span.overlay, a#nav_about_mainmenu, a#nav_about_mainmenu span.overlay, a#nav_about_manual, a#nav_about_manual span.overlay, a#nav_song_all, a#nav_song_all, a#nav_song_all span.overlay, a#nav_song_pre, a#nav_song_pre span.overlay, a#nav_song_fs, a#nav_song_fs span.overlay, a#nav_song_ct, a#nav_song_ct span.overlay, #about_mainmenu a#nav_about_mainmenu, #about_mainmenu a#nav_about_top:hover, a#nav_song_all.active, a#nav_song_pre.active, a#nav_song_fs.active, a#nav_song_ct.active, #pre a#nav_module_pre, #pre a#nav_module_pre span.overlay, a#nav_module_fs, a#nav_module_fs span.overlay, a#nav_module_ct, a#nav_module_ct span.overlay, a#nav_module_all, a#nav_module_all span.overlay, a#nav_module_pre span.overlay, a#nav_module_pre, #fs a#nav_module_fs, #fs a#nav_module_fs span.overlay, #ct a#nav_module_ct, #ct a#nav_module_ct span.overlay, #module_all a#nav_module_all, #module_all a#nav_module_all span.overlay {width: 100%; background-size: 100% 100%; } /* boxed materials*/ .subContainer .read {width: 100%!important;} #dlc .read {width: 46%!important;} .contentV_inner img {text-align:center;} /* about page */ .content02a, .content02b { width: 300px; } .content02a h4, .content02b h4 {background-size: 82% 100%;} .content02a .subContent, .content02b .subContent {background-size: 82% 100%; background-position: left bottom;} .content02a_bg, .content02b_bg {background: none;} .content02a_bg .read, .content02b_bg .read {width: 82%!important;} .content02a_bg .photoCon2, .content02b_bg .photoCon2 {text-align: left;} .content02a_bg .photoCon2 img, .content02b_bg .photoCon2 img {width: 265px!important;} .subContainer {text-align: center;} /* song page*/ .song_content_l {width: 49%;} /* module page*/ .moduleList { text-align: center;} ul.moduleList li {float: none; display: inline-block;} } .centered {text-align: center;} .privacyPolicy {color: white; text-shadow: none; font-size: 12px;cursor: pointer;text-decoration:none; display: inline-block;margin: 10px 15px 0;}