/*================================================== L A D Y B I R D M A I N S T Y L E S * Last Updated : 2009/01/30 * Author : Jerome Senaillat (remka) for UltraSuperNew.com * Color Key : * Bright pink : #eb008b * Bright blue : #6fd1ff * Pink text : #ffccea // for footer ==================================================*/ @import 'lib/reset.css'; @import 'lib/utilities.css'; /*================================================== L A Y O U T Basic page layout ==================================================*/ body { background: #000 url(/pc/images/main/bg.jpg) repeat-x center top; font: 10px/160% "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W6", "Helvetica Neue","Helvetica","Arial Bold", sans-serif; text-align: center; color: #333; border-top: 5px solid #eb008b; } #page { text-align: left; width:960px; margin:0 auto; zoom: 1; } #header {height:130px; background: url(/pc/images/main/header.png) no-repeat 0 0; } #navigation {height:50px; background: #000;} #contents {background: #fff url(/pc/images/main/contents-bg.jpg) no-repeat right 0; } #fader {position: relative; height:400px; zoom: 1;} #cont-left {display:inline; float:left; width:600px; margin-left:20px; position:relative; padding-bottom:20px;} #cont-right {display:inline; float:right; width:300px; margin-right:20px; position:relative; padding-bottom:20px;} /*================================================== C O M M O N E L E M E N T S Main HTML elements ==================================================*/ #contents h1 {} #contents h2 {} #contents h3 {} #contents li, p, td, th, dd, dt, label, legend { } #contents p {} #contents a:link { color: #eb008b; text-decoration: none;} #contents a:visited {color: #eb008b; text-decoration: none;} #contents a:hover { text-decoration: underline; } #contents a:active {color: #eb008b; text-decoration: none; } #contents img.alignleft {float:left; margin: 0 10px 10px 0;} #contents img.centered {display:block; margin: 10px auto;} #contents img.qrcode {margin: 0 20px 10px 0;} /*================================================== H E A D E R ==================================================*/ #header h1 {padding-top:80px;} #header h1 a {text-indent: -999em; display:block; width:450px; height:40px; } #header p#tagline {text-indent: -999em;} /*================================================== N A V I G A T I O N ==================================================*/ #navigation ul#nav-list li {display:inline;} #navigation ul#nav-list li a {display:inline; float:left; height:50px; text-indent: -999em;} #navigation ul#nav-list li.nav-home a{width:100px; background: url(/pc/images/main/nav-home.gif) no-repeat 0 0;} #navigation ul#nav-list li.nav-home a:hover {background: url(/pc/images/main/nav-home.gif) no-repeat 0 -50px;} .nav-home #navigation ul#nav-list li.nav-home a, .nav-home #navigation ul#nav-list li.nav-home a:hover{background: url(/pc/images/main/nav-home.gif) no-repeat 0 -100px; cursor:default;} #navigation ul#nav-list li.nav-bio a{width:150px; background: url(/pc/images/main/nav-bio.gif) no-repeat 0 0;} #navigation ul#nav-list li.nav-bio a:hover{background: url(/pc/images/main/nav-bio.gif) no-repeat 0 -50px;} .nav-bio #navigation ul#nav-list li.nav-bio a, .nav-bio #navigation ul#nav-list li.nav-bio a:hover{background: url(/pc/images/main/nav-bio.gif) no-repeat 0 -100px; cursor:default;} #navigation ul#nav-list li.nav-disco a{width:170px; background: url(/pc/images/main/nav-disco.gif) no-repeat 0 0;} #navigation ul#nav-list li.nav-disco a:hover{background: url(/pc/images/main/nav-disco.gif) no-repeat 0 -50px;} .nav-disco #navigation ul#nav-list li.nav-disco a, .nav-disco #navigation ul#nav-list li.nav-disco a:hover{background: url(/pc/images/main/nav-disco.gif) no-repeat 0 -100px; cursor:default;} #navigation ul#nav-list li.nav-live a{width:80px; background: url(/pc/images/main/nav-live.gif) no-repeat 0 0;} #navigation ul#nav-list li.nav-live a:hover{background: url(/pc/images/main/nav-live.gif) no-repeat 0 -50px;} .nav-live #navigation ul#nav-list li.nav-live a, .nav-live #navigation ul#nav-list li.nav-live a:hover{background: url(/pc/images/main/nav-live.gif) no-repeat 0 -100px; cursor:default;} #navigation ul#nav-list li.nav-blog a{width:85px; background: url(/pc/images/main/nav-blog.gif) no-repeat 0 0;} #navigation ul#nav-list li.nav-blog a:hover{background: url(/pc/images/main/nav-blog.gif) no-repeat 0 -50px;} .nav-blog #navigation ul#nav-list li.nav-blog a, .nav-blog #navigation ul#nav-list li.nav-blog a:hover{background: url(/pc/images/main/nav-blog.gif) no-repeat 0 -100px; cursor:default;} #navigation ul#nav-list li.nav-media a{width:155px; background: url(/pc/images/main/nav-media.gif) no-repeat 0 0;} #navigation ul#nav-list li.nav-media a:hover{background: url(/pc/images/main/nav-media.gif) no-repeat 0 -50px;} .nav-media #navigation ul#nav-list li.nav-media a, .nav-media #navigation ul#nav-list li.nav-media a:hover{background: url(/pc/images/main/nav-media.gif) no-repeat 0 -100px; cursor:default;} #navigation ul#nav-list li.nav-movie a{width:95px; background: url(/pc/images/main/nav-movie.gif) no-repeat 0 0;} #navigation ul#nav-list li.nav-movie a:hover{background: url(/pc/images/main/nav-movie.gif) no-repeat 0 -50px;} .nav-movie #navigation ul#nav-list li.nav-movie a, .nav-movie #navigation ul#nav-list li.nav-movie a:hover{background: url(/pc/images/main/nav-movie.gif) no-repeat 0 -100px; cursor:default;} #navigation ul#nav-list li.nav-dlinfo a{width:125px; background: url(/pc/images/main/nav-dlinfo.gif) no-repeat 0 0;} #navigation ul#nav-list li.nav-dlinfo a:hover{background: url(/pc/images/main/nav-dlinfo.gif) no-repeat 0 -50px;} .nav-dlinfo #navigation ul#nav-list li.nav-dlinfo a, .nav-dlinfo #navigation ul#nav-list li.nav-dlinfo a:hover{background: url(/pc/images/main/nav-dlinfo.gif) no-repeat 0 -100px; cursor:default;} /*================================================== C O N T E N T S (left) ==================================================*/ /* generic elements */ #contents h2.contents-h2 {background: url(/pc/images/main/contents-h2-bg.gif) no-repeat 0 50%;} #contents h2.contents-h2 span {display:block; height:100px; text-indent:-999em;} #contents p {font-size:1.4em; line-height: 1.5em; margin-top:10px;} #contents h3.h3-generic {font-size:2.4em; font-weight: bold; margin:15px 0; background: url(/pc/images/main/icon-ladybird.gif) no-repeat 0 50%; padding:10px 0 10px 40px; color: #000; line-height: 1.2em; display:block;} #contents p.important {color:#ff3000; font-weight: bold;} /* replaced titles */ #contents h2#h2-news span {background: url(/pc/images/home/h2-news.gif) no-repeat 0 0;} /* image fader */ #fader {} #fader div#new-album-infos {position: absolute; z-index: 2; top:194px; right:0px; background: #000; width:320px; zoom: 1;} #fader div#new-album-infos h2.album-title {text-indent: -999em; height:25px; background: url(/pc/images/home/title-ladybird-yula.gif) no-repeat 0 0; margin:10px 0 10px 10px;} #fader div#new-album-infos img.album-cover {float:left; border:2px solid #7c7c7c; margin:0 10px 10px 10px;} #fader div#new-album-infos h3 {font-size:1.9em; color:#eb008b; margin:20px 10px 10px 10px; font-weight: bold;} #fader div#new-album-infos p.album-release {font-size: 1.4em; font-weight: bold; color:#fff; line-height: 1.5em;} #fader div#new-album-infos p.album-infos {font-size: 1em; color:#c7c7c7; clear:left; margin:0 10px 10px 10px;} #splash-hold {height:400px;} #splash-hold img#splash-02 {display:none;} /* breadcrumb */ #breadcrumb {margin:20px 0; font-size:1.2em;} #breadcrumb a, #breadcrumb strong {font-weight:bold} #breadcrumb span.spacer {padding: 0 5px; color:#666;} /* blue block on index */ #contents div#head-news {background: #7c7c7c url(/pc/images/main/gray-ice-bg.jpg) no-repeat 0 0; color:#fff; font-size:1.2em; padding:10px; position: relative; top:-20px; border:5px solid #7c7c7c; font-weight: bold; line-height: 1.5em; text-align:center;} /* news */ #contents div.news-item {margin-bottom:20px;} #contents div.news-item h3 {font-size:2.4em; font-weight: bold; margin-bottom:15px;} #contents div.news-item h3 a {background: url(/pc/images/main/icon-ladybird.gif) no-repeat 0 50%; padding:3px 0 3px 40px; line-height: 1.2em; display:block;} #contents div.news-item span.news-date {background: #7c7c7c; color:#000; padding:2px 4px;} #contents div.news-item div.news-body {font-size:1.4em; line-height: 1.5em; margin-top:10px;} #contents div.news-item a.link-readmore {text-indent: -999em; float:right; height:57px; width:110px; background: url(/pc/images/main/btn-readmore.gif) no-repeat 0 0;} #contents div.news-item a.link-readmore:hover {background: url(/pc/images/main/btn-readmore.gif) no-repeat 0 -57px;} /* pagination */ #contents div#news-pagination {} #contents div#news-pagination a.nav-prev {background: #eb008b url(/pc/images/main/page-prv-off.gif) no-repeat 0 0; color:#fff; padding:1px 5px 1px 12px; height:7px; font-weight: bold;} #contents div#news-pagination a.nav-prev:hover {background: #000 url(/pc/images/main/page-prv-on.gif) no-repeat 0 0; text-decoration: none;} #contents div#news-pagination a.nav-next {background: #eb008b url(/pc/images/main/page-nxt-off.gif) no-repeat right 0 ; color:#fff; padding:1px 12px 1px 5px; height:7px; font-weight: bold;} #contents div#news-pagination a.nav-next:hover {background: #000 url(/pc/images/main/page-nxt-on.gif) no-repeat right 0; text-decoration: none;} #contents div#news-pagination span.next-inactive {background: #a9a9a9 url(/pc/images/main/page-nxt-no.gif) no-repeat right 0; color:#fff; padding:1px 12px 1px 5px; height:7px; font-weight: bold;} #contents div#news-pagination span.prev-inactive {background: #a9a9a9 url(/pc/images/main/page-prv-no.gif) no-repeat 0 0; color:#fff; padding:1px 5px 1px 12px; height:7px; font-weight: bold;} /* discography */ #contents div.disco-item {margin-bottom:20px; clear:left;} #contents div.disco-item div.disco-album {float:left; width:202px; height:202px; background: #fff url(/pc/images/main/bg-album.gif) no-repeat 0 0;} #contents div.disco-item div.disco-album img {display:block; padding:0 1px 2px 1px;} #contents div.disco-item h3 {font-size:1.8em; font-weight: bold; margin:10px 0 15px 212px; color:#000; border-bottom:2px solid #ccc; padding-bottom:10px; line-height:1.2em;} #contents div.disco-item div.disco-release, #contents div.disco-item div.disco-ref, #contents div.disco-item div.disco-price {display:block; font-size:1.2em; margin:0 0 5px 212px;} #contents div.disco-item div.disco-special {display:block; font-size:1.2em; font-weight:bold; margin:0 0 5px 212px;} #contents div.disco-item div.disco-special img {display:block; margin-top:10px;} #contents div.disco-item div.disco-tracklist {font-size:1.2em; margin:15px 0 5px 212px;} #contents div.disco-item div.disco-tracklist a.disco-showtracks {background: url(/pc/images/main/icon-trackclosed.gif) no-repeat 0 50%; padding-left:12px;} #contents div.disco-item div.disco-tracklist a.open {background: url(/pc/images/main/icon-trackopened.gif) no-repeat 0 50%;} #contents div.disco-item div.disco-tracklist ul.disco-tracks {display:none; padding:10px 0 0 0;} #contents div.disco-item div.disco-tracklist ul.disco-tracks li { padding: 5px 0; background: #fff url(/pc/images/main/dotted-02.gif) repeat-x 0 0;} #contents div.disco-item span.iemargin {display:block; margin-bottom:-20px;} #contents div.margin-bot p {padding-bottom:30px;} /* schedule */ #contents div.event-item {margin-bottom:20px; padding-bottom:20px; background: #fff url(/pc/images/main/dotted-02.gif) repeat-x 0 bottom;} #contents div.event-item span.event-date {float:left; width:100px; font-size:1.2em;} #contents div.event-item div.event-title {margin-left:120px; font-size:1.4em; font-weight:bold;} #contents div.event-item div.event-content {margin-left:120px; font-size:1.4em; line-height:1.4em; padding-top:10px; position:relative;} #contents div.event-item div.event-content img.loader {position:absolute; top:-15px; right:0;} #contents div.event-item div.event-content div.event-link {margin-top:10px; font-weight: bold;} /* video */ #contents div.video-list {} #contents div.video-item {float:left; width:50%; margin-bottom:20px;} #contents div.video-item div.video-screenshot {float:left; width:130px; height:100px;} #contents div.video-item div.video-screenshot a img{display:block; padding:5px; background: url(/pc/images/main/bg-vidthumb.gif) no-repeat 0 0; width:120px; height:90px; margin-bottom:20px;} #contents div.video-item div.video-title {margin:0 20px 0 140px; font-size:1.4em; font-weight: bold; line-height: 1.5em;} #contents div.video-item div.video-duration {margin:0 20px 10px 140px; font-size:1.2em; line-height: 1.5em;} #movie-modal {text-align:center; vertical-align: middle; border-top:12px solid #fff;} #movie-modal object {display:block; margin:0 auto;} /* contact */ #contents form {} #contents form div {padding:5px 0;} #contents form div.text label, #contents form div span.fakeLabel, #contents form div.textarea label {display:inline; float:left; width:100px; font-size:1.2em; text-align: right; font-weight: bold; padding-top: 5px;} #contents form div.text input, #contents form div.textarea textarea {font-family:arial; padding:5px; display:block; margin-left:110px; font-size:1.2em; line-height: 1.5em; width:300px; border:0; background: #d9f3ff; border-top:1px solid #5fb3db; border-left:1px solid #5fb3db;} #contents form div.textarea textarea {height:100px;} #contents form div div.rightCol, #contents form div.button input {display:block; margin-left:110px; font-size:1.2em; line-height: 1.5em;} #contents form div.button {margin-left:110px;} #contents form div.button input {margin-left:0; display:inline; background: #eb008b; border:0; color:#fff; font-weight: bold; padding:7px 8px; border-bottom:1px solid #7f004b; border-right:1px solid #7f004b;font-size:1.6em;} #contents form div div.error {background: #ffff99 url(/pc/images/main/icon-alert.gif) no-repeat 7px 50%;; margin-left:110px; padding:5px 7px 5px 23px;; width:280px; margin-top:5px; font-size:1.2em; color:#ff3000;} #contents div#contact-confirm {margin-bottom:10px;} #contents div#contact-confirm div.recap-element {padding:5px 0; } #contents div#contact-confirm div.recap-element p.elem-name {clear:left; display:inline; float:left; width:100px; font-size:1.2em; text-align: right; font-weight: bold;line-height: 1.5em;} #contents div#contact-confirm div.recap-element p.elem-cont {display:block; margin-left:110px; font-size:1.2em; line-height: 1.5em;} /* Mail mag */ #contents form.mail-magazine {margin-top:20px;} #contents form.mail-magazine label {font-size:1.2em; font-weight: bold;} #contents form.mail-magazine input#magazine-email {font-family:arial; padding:5px; font-size:1.2em; line-height: 1.5em; width:150px; border:0; background: #d9f3ff; border-top:1px solid #5fb3db; border-left:1px solid #5fb3db; border-right:1px solid #fff; border-bottom:1px solid #fff;margin-left:10px;} #contents form.mail-magazine input#send-but {font-family:arial; padding:5px; font-size:1.2em; line-height: 1.5em; border:0; background: #eb008b; border-bottom:1px solid #7f004b; border-right:1px solid #7f004b; border-top:1px solid #fff; border-left:1px solid #fff; color:#fff; font-weight: bold; margin-left:10px;} #contents form.mail-magazine div.error {background: #ffff99 url(/pc/images/main/icon-alert.gif) no-repeat 7px 50%;; margin-left:118px; padding:5px 7px 5px 23px;; width:230px; margin-top:5px; font-size:1.2em; color:#ff3000;} /* dl info */ #contents div.qr-block {margin-bottom:10px; background: #fff url(/pc/images/main/dotted-02.gif) repeat-x 0 0; padding-top:20px;} #contents div.qr-block img.qrcode {float:left; width:111px; height:111px; margin:0 20px 20px 0;} #contents div.qr-block img.logo, #contents div.qr-block p {display:block; margin-left:131px;} /* blog banners */ #contents a.blogbanner img {display:block; margin:0 auto; margin-bottom:20px;} /*================================================== N A V B A R (right) ==================================================*/ #cont-right {} /* schedule */ #cont-right div#sched-container {background: #fff url(/pc/images/main/bg-news.gif) no-repeat 0 0; margin-bottom:20px;} /* minischedule is higher on home page */ .nav-home #cont-right div#sched-container {position: relative; top:-20px;} .nav-bio #cont-right div#sched-container, .nav-disco #cont-right div#sched-container, .nav-live #cont-right div#sched-container, .nav-blog #cont-right div#sched-container, .nav-media #cont-right div#sched-container, .nav-movie #cont-right div#sched-container, .nav-dlinfo #cont-right div#sched-container, .nav-news #cont-right div#sched-container, .nav-contact #cont-right div#sched-container, .nav-magazine #cont-right div#sched-container {position:inherit; margin-top:20px;} #cont-right div#sched-container h2 {text-indent: -999em; height:90px;} #cont-right div#sched-container div.sched-item {margin:0 10px 10px 10px; padding-bottom:10px; background: url(/pc/images/main/dotted-01.gif) repeat-x 0 bottom;} #cont-right div#sched-container div.sched-item span.sched-date {font-size:1.2em; line-height: 1.5em; font-weight: bold;} #cont-right div#sched-container div.sched-item span.sched-date a {background: url(/pc/images/main/icon-schedule.gif) no-repeat 0 50%; padding-left:12px;} #cont-right div#sched-container div.sched-item div.sched-body {font-size:1.2em; line-height: 1.5em;} #cont-right div#sched-container a.sched-full-link {float:right; height:30px; width:120px; text-indent: -999em; background: url(/pc/images/main/btn-allevents.gif) no-repeat 0 -30px;} #cont-right div#sched-container a.sched-full-link:hover {background: url(/pc/images/main/btn-allevents.gif) no-repeat 0 0;} #cont-right div#sched-container a.mail-full-link {float:right; height:30px; width:150px; text-indent: -999em; background: url(/pc/images/main/btn-mailmagazine.gif) no-repeat 0 -30px; margin-right:10px;} #cont-right div#sched-container a.mail-full-link:hover {background: url(/pc/images/main/btn-mailmagazine.gif) no-repeat 0 0; } /* mini video */ #cont-right div#video-container {background: url(/pc/images/main/bg-video.gif) no-repeat 0 0; margin-bottom:20px;} #cont-right div#video-container h2 {text-indent: -999em; height:60px;} #cont-right div#video-container div.video-holder{padding:10px; background:#6fd1ff; margin-bottom:10px;} #cont-right div#video-container a.video-full-link {float:right; height:30px; width:120px; text-indent: -999em; background: url(/pc/images/main/btn-allvideos.gif) no-repeat 0 -30px;} #cont-right div#video-container a.video-full-link:hover {background: url(/pc/images/main/btn-allvideos.gif) no-repeat 0 0;} /* banners */ #cont-right #banner-block {margin-bottom:20px;} #cont-right #banner-block img.banner300{display:block; border:0; margin-bottom:10px;} /* new head image slideshow */ ul#image-fader {position:relative; width:960px; height:400px; overflow:hidden;} ul#image-fader li img {position:absolute; width:960px; height:400px; display:block;} /*================================================== F O O T E R ==================================================*/ #footer {height:80px; background: #000 url(/pc/images/main/bg-footer.gif) no-repeat 0 0; padding-bottom:40px; color:#ffccea;} #footer p#footer-copy {float:left; margin:10px 0 0 20px; line-height: 1.5em;} #footer p#footer-copy a {color: #fff;} #footer p#footer-copy span.spacer {padding:0 5px; color:#ff9fd8;} #footer p#footer-logos {float:right; margin:10px 20px 0 0;} #footer p#footer-logos img {float:left; margin-left:20px; vertical-align: middle;} #footer p#footer-logos img.logo-nsv {padding-top:10px;} #footer p#footer-logos img.logo-bmg {padding-top:5px;}