@l-grey: #949698; @d-grey: #3f4040; @l-green: #5393ac; @l-blue: #22b3e1; @l-brown: #e5d5c1; @d-brown: #81695f; /* RESET —————————————————————————————————————————————————————— */ BODY, DIV, BLOCKQUOTE, LABEL, P, H1, H2, H3, H4, H5, H6, PRE, UL, OL, LI, DL, FORM, FIELDSET { margin: 0; padding: 0; } TBODY, TH, IMG, INPUT { border: none; } /* GLOBAL —————————————————————————————————————————————————————— */ UL.inside, OL.inside { list-style-position: inside; } UL.styleless { list-style: none; } UL.indent { margin-left: 2em; } UL.li-title LI { margin-bottom: 10px; } EM { color: #A0B4C5; } .clear { clear: both; } .clearfix::after { content: "."; display: block; height: 0; clear: both; visibility: hidden; font-size: 0; } .invisible { display: none; } .left { float: left; } .right { float: right; } .center { margin: 0 auto; } .top { vertical-align: top; } .t-left { text-align: left; } .t-right { text-align: right; } .t-center { text-align: center; } IMG.left { margin: 0px 14px 4px 0; } IMG.right { margin: 0px 0 4px 14px; } IMG.title { margin: 16px 0; } .button { position: absolute; display: block; overflow: hidden; cursor: pointer; } .disabled { cursor: default; } .more { background: url(../images/btn_sprite.png) no-repeat; display: block; width: 76px; height: 21px; } .more:hover { background-position: -76px 0; } BODY { background-color: #000; color: @l-grey; font: 10px Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif; } BODY#home { background: #000 url(../images/bg_teal.jpg) no-repeat 50% 100%; } BODY[id^="shop-"] { background: #000 url(../images/shop/bg_body.jpg) no-repeat 50% 0; } TD A { font-size: 1.3em; } TD P A { font-size: 1em; } p { font-size: 1.3em; line-height: 1.4em; margin-bottom: 8px; } .chi_14 { font-size: 14px; color: #CCCCCC; } .chi_f_14 { font-size: 14px; color: #000000; } .little { font-size: 12px; color: #FF0000; } .Tab2 { font-size: 16px; color: #FF9900; font-weight: bold; } hr { color: #666666; width: 95%; text-align: left; } H1 { font-size: 1.5em; color: #FF9900; font-weight: bold; margin: 1em 0 10px 0; } H1.bw { font-size: 2em; color: #fff; text-align: center; } H2 { font-size: 18px; font-weight: bold; color: #FF9900; margin-bottom: 6px; } .li-title { width: 60%; float: left; } .li-title SPAN.title { font-weight: bold; color: #EECE9B; font-size: 15px; } .li-title LI { border-bottom: 1px dotted @l-grey; padding-bottom: 10px; } .box-remark { width: 36%; } .box-remark UL { list-style-type: square; } H2.band { color: #fff; font-size: 1.5em; font-weight: bold; } H2.bw { color: #fff; font-size: 2.8em; text-align: center; font-weight: bold; margin: 1em auto; } H3 { font-size: 1.2em; color: #72898F; } .table { border: 1px dashed #666666; padding: 15px; } .table H1 { font-size: 1.8em; } .table H1 H1 { font-size: 1em; } .footer { font-size: 10px; color: #666666; font-family: Arial, Helvetica, sans-serif; border-top-width: 1px; border-top-style: double; border-top-color: @l-grey; line-height: 16px; } .company { font-size: 30px; font-weight: bold; color: #FFFFFF; } .name{ font-size: 14px; color: #FFFFFF; letter-spacing: 0em; font-weight: bold; line-height: 16px; } li { font-size: 13px; color: @l-grey; line-height: 20px; } A { color: #CCCCCC; text-decoration: none; font-size: 1.2em; } A:hover { color: #FF9900; text-decoration: none; } .toggleopacity img { filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=50)"; -moz-opacity: 0.6; } .toggleopacity:hover img{ filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=100)"; -moz-opacity: 1; } .toggleopacity img{ border: 0px solid #ccc; } .menu { font-size: 13px; color: #F90; letter-spacing: 0.1em; background-image: url(../image/btn_bg.jpg); } .Hi1 { font-size: 14px; font-weight: bold; color: #F90; } P.em { color: #fff; font-size: 2.8em; font-weight: bold; line-height: 2.5em; } /* TOP NAV —————————————————————————————————————————————————————— */ .main-nav { position: relative; height: 40px; } #main-nav { list-style: none; padding: 0; .level-2 { width: 180px; background-color: darken(@d-grey, 20%); padding: 10px 0 22px 0; position: absolute; top: 40px; display: none; z-index: 1; border: 1px solid @d-grey; } .level-2 li { width: 100%; float: left; list-style: none; } .level-2 a { font-size: 16px; height: 25px; line-height: 25px; text-transform: uppercase; background: none; text-indent: 0; color: @l-grey; display: inline-block; margin-left: 13px; margin-bottom: 3px; } .level-2 a:hover { height: 24px; line-height: 24px; color: #fff; border-bottom: 1px solid #fff; } } #main-nav li { float: left; } #main-nav li:hover { position: relative; } #main-nav a { display: block; overflow: hidden; text-indent: -9999px; text-decoration: none; outline: none; height: 40px; background: url(../images/bg_menubar.png) no-repeat; } #main-nav li:hover ul { display: block; } #slide { position: absolute; bottom: 0px; height: 9px; background: transparent url(../images/bg_menu.png) no-repeat 50% 100%; z-index: 10; } #mnu_index { width: 71px; } A#mnu_company { width: 96px; background-position: -71px 0; } A#mnu_courses { width: 97px; background-position: -167px 0; } A#mnu_bandroom { width: 128px; background-position: -264px 0; } A#mnu_liveband { width: 170px; background-position: -392px 0; } A#mnu_sell { width: 135px; background-position: -562px 0; } A#mnu_shop { width: 97px; background-position: -697px 0; } A#mnu_weblink { width: 64px; background-position: -794px 0; } A#mnu_contact { width: 102px; background-position: -858px 0; } #mnu_index:hover { background-position: 0 -40px; } #mnu_company:hover { background-position: -71px -40px; } #mnu_courses:hover { background-position: -167px -40px; } #mnu_bandroom:hover { background-position: -264px -40px; } #mnu_liveband:hover { background-position: -392px -40px; } #mnu_sell:hover { background-position: -562px -40px; } #mnu_shop:hover { background-position: -697px -40px; } #mnu_weblink:hover { background-position: -794px -40px; } #mnu_contact:hover { background-position: -858px -40px; } /* HOLDER —————————————————————————————————————————————————————— */ #holder { width: 960px; margin: 0 auto; } /* HEADER —————————————————————————————————————————————————————— */ #header { width: 960px; height: 174px; } #logo { width: 637px; height: 134px; overflow: hidden; float: left; } #user-bar { position: relative; float: right; width: 140px; height: 80px; margin: 40px 20px 0 0; background: url(../images/sprite.png) no-repeat; } #user-bar .lnk_facebook { position: absolute; display: block; width: 140px; height: 36px; overflow: hidden; } #sub_nav .tel { position: absolute; top: 60px; } /* CONTACT —————————————————————————————————————————————————————— */ #tbl-contact TD { font-size: 1.3em; line-height: 1.6em; } .btn_facebook { background: url("../images/sprite.png") no-repeat 0 -90px; display: block; width: 181px; height: 48px; overflow: hidden; } #btn_facebook:hover { background-position: 0 -90px; } #btn_google_maps { background: url("../images/sprite.png") no-repeat -200px 0; display: block; width: 180px; height: 55px; overflow: hidden; margin: 3px 0; } #btn_google_maps:hover { background-position: -200px -55px; } /* FOOTER —————————————————————————————————————————————————————— */ #footer { width: 960px; margin: 10px auto 0 auto; clear: both; padding-top: 10px; } #lnk-footer { position: relative; width: 100%; height: 26px; background-color: rgba(22,22,21,0.6); -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99161615,endColorstr=#99161615)"; filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#99161615,endColorstr=#99161615)"; } #lnk-footer span { color: #89765f; position: absolute; top: 6px; left: 100px; font-size: 11px; } #lnk-footer A { background-image: url(../images/btn_sprite.png); background-repeat: no-repeat; width: 29px; height: 26px; display: block; overflow: hidden; float: left; } #ico_facebook { background-position: -30px -21px; } #ico_twitter { background-position: -60px -21px; } #ico_rss { background-position: -119px -21px; } #ico_top { position: absolute; right: 0; background-position: 0 -21px; } #ico_facebook:hover { background-position: -30px -47px; } #ico_twitter:hover { background-position: -60px -47px; } #ico_rss:hover { background-position: -119px -47px; } #ico_top:hover { background-position: 0 -47px; } #copyright { text-align: center; } #copyright P { padding-top: 80px; text-transform: uppercase; color: #363636; } /* HOME —————————————————————————————————————————————————————— */ #slide3d { width: 960px; margin: 0 auto; } .box-content { position: relative; } #latest-news .box-top H2 { background: url(../images/home/btn_home.png) no-repeat -313px -616px; width: 313px; height: 35px; text-indent: -3000px; overflow: hidden; } #news-content { margin: 6px 0 0 0; background-color: #141414; border: 1px solid #1b1b1b; width: 276px; height: 118px; overflow: hidden; position: relative; padding: 12px 0 0 35px; } #news-mask { overflow: hidden; width: 240px; height: 105px; } a#news-left { position: absolute; left: 9px; top: 10px; width: 16px; height: 105px; display: block; background: url(../images/btn_sprite.png) no-repeat 0 -74px; text-decoration: none; z-index: 10000; } a#news-left:hover { background-position: -17px -74px; } a#news-left.disabled:hover { background-position: 0 -74px; } a#news-right { position: absolute; right: 9px; top: 10px; width: 16px; height: 105px; display: block; background: url(../images/btn_sprite.png) no-repeat 0 -180px; text-decoration: none; z-index: 10000; } a#news-right:hover { background-position: -17px -180px; } a#news-right.disabled:hover { background-position: 0 -180px; } .news-items { width: 1026px; height: 105px; position: relative; } .news-item { float: left; width: 242px; height: 105px; margin-right: 100px; } .news-item H3 { color: white; } .news-item .date { color: #A3927F; font-size: 12px; } .news-item P { color: #7e7566; margin-top: 10px; } .news-item .more { margin-top: 10px; } #title-courses H2 { background: url(../images/home/btn_home.png) no-repeat -313px -651px; width: 313px; height: 35px; text-indent: -3000px; overflow: hidden; } .our-mission { background: url(../images/home/btn_home.png) no-repeat 0 -616px; width: 313px; height: 93px; margin: 6px 0; position: relative; } .our-mission SPAN { position: absolute; left: 30px; top: 16px; font-size: 1.2em; padding-right: 10px; color: #987a5e; text-transform: uppercase; } #courses { width: 313px; overflow: hidden; } #courses DT { list-style: none; } #courses DD { clear: both; padding: 8px 6px 8px 15px; } #courses DT A { float: left; display: block; width: 313px; height: 77px; overflow: hidden; background-image: url(../images/home/btn_home.png); background-repeat: no-repeat; } #courses DT A IMG { float: left; margin: 3px auto auto 3px; } #courses02 { background-position: 0 -77px; } #courses03 { background-position: 0 -154px; } #courses04 { background-position: 0 -231px; } #courses05 { background-position: 0 -308px; } #courses06 { background-position: 0 -385px; } #courses07 { background-position: 0 -462px; } #courses08 { background-position: 0 -539px; } #courses01:hover { background-position: -313px 0; } #courses02:hover { background-position: -313px -77px; } #courses03:hover { background-position: -313px -154px; } #courses04:hover { background-position: -313px -231px; } #courses05:hover { background-position: -313px -308px; } #courses06:hover { background-position: -313px -385px; } #courses07:hover { background-position: -313px -462px; } #courses08:hover { background-position: -313px -539px; } #courses DT A.title { font-size: 18px; float: right; font-weight: bold; border-bottom: 1px solid #fff; margin-top: 10px; background-color: #58b7dd; color: #000; padding: 3px 10px 0 10px; } #courses DT A.title:hover { border-color: #ff9900; } #courses DD { background-color: #000; } #sections .box-content { background: url(../images/bg_section.png) no-repeat; width: 620px; height: 180px; overflow: hidden; margin-top: 13px; } #sections .first { margin-top: 0px; } .section-img-link, .section-img-overlay { margin: 11px 10px auto 10px; } .section-img-link { float: left; } .section-img-overlay { background-color: #161615; display: block; width: 323px; height: 149px; overflow: hidden; opacity: 0.75; filter:alpha(opacity=75); position: absolute; left: 0; color: #999; font-size: 12px; } .section-more { background-color: #000; width: 590px; font-size: 12px; padding: 10px 15px; height: auto; margin-bottom: 10px; } #sections .box-content H2 { color: #fff; margin-bottom: 8px; font-size: 1.25em; } #sections .box-content .desc { margin: 18px 20px 3px 0; font-size: 1.2em; } #sections .box-content .desc P { font-size: 1em; } #sections .more { position: absolute; right: 198px; bottom: 16px; } /* new #slide3d, #box3 { width: 960px; margin: 0 auto; } #box3 { margin-bottom: 30px; } #banners { width: 310px; height: 363px; overflow: hidden; float: left; .banner-group { height: 121px; list-style: none; overflow: hidden; position: relative; } img { position: absolute; } } #latest-news { display: inline; float: left; margin-left: 16px; width: 314px; overflow: hidden; H2 { background: url(../images/sprite.png) no-repeat 0 -120px; height: 35px; text-indent: -3000px; overflow: hidden; margin: 0; } #news-items { border-left: 1px solid #1C1C1C; border-right: 1px solid #1C1C1C; border-bottom: 1px solid #1C1C1C; padding: 3px 12px; background-color: rgba(22, 22, 23, 0.7); } .news-item { float: left; width: 100%; height: 106px; border-bottom: 1px dotted #474645; } .news-item.last { border: none; } img { float: left; margin: 5px 10px 0 0; } H3 { margin-top: 8px; font-size: 16px; color: darken(#fff, 10%); } .date { color: @l-blue; font-size: 12px; } P { margin-top: 4px; line-height: 1.2em; } .more { float: right; } } #featured-products { display: inline; float: left; margin-left: 10px; width: 304px; overflow: hidden; H2 { background: url(../images/sprite.png) no-repeat 0 -156px; height: 35px; text-indent: -3000px; overflow: hidden; margin: 0; } A { font-size: 13px; padding-top: 6px; color: @l-grey; border-bottom: 1px dotted @l-grey; } A:hover { color: @l-grey; border-bottom: 1px solid @l-grey; } #featured-product-items { border-left: 1px solid #1C1C1C; border-right: 1px solid #1C1C1C; border-bottom: 1px solid #1C1C1C; padding: 3px 12px; background-color: rgba(22, 22, 23, 0.7); } .featured-product { float: left; width: 100%; height: 79px; border-bottom: 1px dotted #474645; } .featured-product.last { border: none; } h3 { margin-top: 4px; } h3 A, h3 A:hover { color: darken(#fff, 10%); border-bottom: none; } img { float: left; margin: 5px 10px 0 0; } } #courses-wrapper { width: 100%; height: 295px; position: relative; overflow: hidden; li { width: 160px; list-style: none; position: absolute; } #course-box1 { left: 0; } #course-box2 { left: 179px; } #course-box3 { left: 358px; } #course-box4 { left: 537px; } li a { display: block; width: 160px; height: 293px; border: 1px solid #182023; background-color: rgba(22,22,23,0.3); -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2161615,endColorstr=#b2161615)"; filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2161615,endColorstr=#b2161615)"; } li img { margin-left: 7px; } h2 { color: @l-brown; font-size: 18px; margin: 17px 0 0 12px; line-height: 1.1em; } h3 { color: @d-brown; font-size: 14px; margin: 0 0 0 12px; } #course-desc { position: absolute; top: 94px; right: 28px; } #courses img { margin: 10px 0 0 6px; } p { font-size: 14px; padding: 8px 12px; } a:hover { color: @l-brown; } #btn-slide { background: url(../images/home/btn_slide.png) no-repeat; width: 49px; height: 49px; position: absolute; top: 100px; right: 150px; z-index: 1; } } #title-courses H2 { background: url(../images/home/btn_home.png) no-repeat -313px -651px; width: 313px; height: 35px; text-indent: -3000px; overflow: hidden; } #sections .box-content { background: url(../images/bg_section.png) no-repeat; width: 620px; height: 180px; overflow: hidden; margin-top: 13px; } #sections .first { margin-top: 0px; } .section-img-link, .section-img-overlay { margin: 11px 10px auto 10px; } .section-img-link { float: left; } .section-img-overlay { background-color: #161615; display: block; width: 323px; height: 149px; overflow: hidden; opacity: 0.75; filter:alpha(opacity=75); position: absolute; left: 0; color: @l-grey; font-size: 12px; } .section-more { background-color: #000; width: 590px; font-size: 12px; padding: 10px 15px; height: auto; margin-bottom: 10px; } #sections .box-content H2 { color: #fff; margin-bottom: 8px; font-size: 1.25em; } #sections .box-content .desc { margin: 18px 20px 3px 0; font-size: 1.2em; } #sections .box-content .desc P { font-size: 1em; } #sections .more { position: absolute; right: 198px; bottom: 16px; } */ /* COMPANY —————————————————————————————————————————————————————— */ .box3 { float: left; width: 300px; height: 560px; overflow: hidden; border: 1px solid #1c1c1c; padding: 5px; background-color: rgba(22,22,23,0.7); -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2161615,endColorstr=#b2161615)"; filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2161615,endColorstr=#b2161615)"; } .box3 IMG { margin-bottom: 16px; } #content .box3 UL { margin: 20px 0 20px 30px; } .box3 P { padding: 0 7px; } .box3-1, .box3-2 { margin-right: 12px; } /* COURSES —————————————————————————————————————————————————————— */ .tbl-fee H1 { background: url(../images/course/bg-h1.jpg) no-repeat; padding-left: 10px; font-size: 1.8em; margin-top: 4em; } .remark { font-size: 1.5em; color: #EECE9B; } .tbl-fee TFOOT { background-color: #433F3E; } .box-table-a { font-size: 13px; text-align: left; background-color: #1F1F2B; } .box-table-a H1 { background: none; margin-top: 0.5em; padding-left: 0px; font-size: 24px; } .box-table-a H3 { color: #BAC7D2; font-size: 18px; font-weight: normal; } .box-table-a TH { color: #C4B6A9; font-size: 1.1em; background: url(../images/course/bg_th.jpg) repeat-x; } .box-table-a A { color: #72898F; font-size: 14px; } .box-table-a A:hover { color: #FF9900; border: none; } .box-table-a P { font-size: 1.1em; margin-bottom: 3px; color: @l-grey; line-height: 1.2em; } .box-table-a P.cat { font-size: 1.4em; color: #829AAD; } .fee-button { text-align: right; margin: 0 20px 40px 0; } .course-title { font-size: 1.2em; } .course-title-small { font-size: 1.1em; line-height: 1.4em; } .course-box { float: left; width: 293px; height: 300px; overflow: hidden; border: 1px solid #1c1c1c; padding: 5px; margin: 0px 5px; background-color: rgba(22,22,23,0.7); -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2161615,endColorstr=#b2161615)"; filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2161615,endColorstr=#b2161615)"; } .basic { width: 100%; font-family: verdana; border: 1px solid #000; } .basic div { background-color: #000000; } .basic p { margin-bottom : 10px; border: none; text-decoration: none; margin: 0px; padding: 10px; } .basic a { cursor:pointer; display:block; padding:5px; margin-top: 0; text-decoration: none; font-weight: bold; font-size: 14px; color: #ccc; border-top: 1px solid #333; border-bottom: 1px solid #333; background: repeat-x url(../images/course/btn_bg.jpg); } .basic h2{ font-size:14px; padding: 15px 5px 0px ; } .basic a:hover { } .basic a.selected { color: #ccc; background-color: #000000; } /* RENTAL —————————————————————————————————————————————————————— */ .col3 { background: url(../images/rental/bg_col3.png) repeat-y; } .col3, .col3-left, .col3-mid, .col3-right { height: 700px; } .col3-left { float: left; width: 311px; } .col3-mid { float: left; width: 338px; } A.lnk-rental-title { width: 311px; height: 110px; display: block; overflow: hidden; } #img-link-rental, #img-link-pa { width: 311px; height: 369px; display: block; } #img-link-rental { background: url(../images/rental/instrument_rental_highlight.jpg) no-repeat; } #img-link-pa { background: url(../images/rental/pa_rental_highlight.jpg) no-repeat; } .intro { width: 338px; height: 487px; background: url(../images/rental/bg_intro.png) no-repeat; position: relative; } .intro .our-team { padding: 220px 40px 0px 50px; } .intro .our-team UL { list-style-position: outside; padding-left: 2em; } .our-team LI { color: #496265; } H2.why-us { background: url(../images/rental/bg_h2.png) no-repeat; display: block; width: 220px; height: 35px; margin: 20px 0 8px 30px; text-indent: -1000em; } .our-experience { position: absolute; top: 324px; } .our-experience P { padding: 46px 50px 0 50px; color: #797275; } .rent-experience { display: block; width: 93px; height: 33px; background: url(../images/rental/sprite.png) no-repeat -907px -66px; margin-left: 220px; } .rent-experience:hover { background-position: -907px -99px; } .rent-pricing { margin: 36px 0 0 32px; } .rent-enquiry { display: block; width: 93px; height: 33px; background: url(../images/rental/sprite.png) no-repeat -907px 0px; margin-left: 220px; } .rent-enquiry:hover { background-position: -907px -33px; } .col3-right { float: left; width: 311px; } .col3-side-block { width: 300px; height: 290px; overflow: hidden; } .rent-info { padding: 16px; } .rent-info P { color: #919191; } .rent-bottom { background: url(../images/rental/bg_bottom.png) no-repeat; width: 960px; height: 83px; text-align: center; } #rent-contact { width: 312px; overflow: hidden; } .rent-complain { padding-top: 9px; width: 312px; color: #616161; font-size: 11px; } .rent-phone { padding-top: 10px; color: #424343; font-weight: bold; font-size: 1.5em; } /* RENTAL CATEGORY ————————————————————————————————————————————————————————— */ #sidebar-nav { width: 260px; margin-top: 50px; } #cat-title-musical, #cat-title-pa { background: url(../images/instrument_sprite.png) no-repeat; width: 260px; height: 75px; text-indent: -10000em; overflow: hidden; margin-bottom: 0; } #cat-menu LI { list-style: none; } #cat-menu LI A { background-image: url(../images/instrument_sprite.png); background-repeat: no-repeat; display: block; width: 260px; height: 44px; overflow: hidden; text-indent: -9999em; } #cat_guitaramp { background-position: 0 -75px; } #cat_bassamp { background-position: 0 -119px; } #cat_keyboardamp { background-position: 0 -163px; } #cat_drumset { background-position: 0 -207px; } #cat_electronickeyboard { background-position: 0 -251px; } #cat_digitalpiano { background-position: 0 -296px; } #cat_acousticguitar { background-position: 0 -340px; } #cat_electronicguitar { background-position: 0 -384px; } #cat_bassguitar { background-position: 0 -429px; } #cat_drummicrophone { background-position: 0 -473px; } #cat_guitaramp:hover { background-position: -260px -75px; } #cat_bassamp:hover { background-position: -260px -119px; } #cat_keyboardamp:hover { background-position: -260px -163px; } #cat_drumset:hover { background-position: -260px -207px; } #cat_electronickeyboard:hover { background-position: -260px -251px; } #cat_digitalpiano:hover { background-position: -260px -296px; } #cat_acousticguitar:hover { background-position: -260px -340px; } #cat_electronicguitar:hover { background-position: -260px -384px; } #cat_bassguitar:hover { background-position: -260px -429px; } #cat_drummicrophone:hover { background-position: -260px -473px; } #cat-rent-link-pa, #cat-rent-link-instrument { display: block; width: 260px; height: 69px; overflow: hidden; text-indent: -10000em; margin-top: 23px; } #cat-rent-link-pa { background: url(../images/instrument_sprite.png) no-repeat -572px -601px; } #cat-rent-link-pa:hover { background-position: -572px -670px;} #cat-rent-link-instrument { background: url(../images/instrument_sprite.png) no-repeat -572px -739px; } #cat-rent-link-instrument:hover { background-position: -572px -808px;} #breadcrumbs { font-size: 1.6em; font-weight: bold; margin-left: 266px; vertical-align: middle; padding: 6px 0 0 18px; background: url(../images/bullet-circle.gif) no-repeat 0 100%; } #product-list { background: url(../images/rental/bg_product-list.jpg) no-repeat; margin: 0px 0 30px 17px; } #product-list, #cat-list { float: left; width: 683px; min-height: 800px; height: auto !important; height: 800px; padding-top: 50px; } #cat-list { margin: 0px 0 30px 0px; } #product-list-functions { width: 631px; height: 27px; background-color: #181C1D; margin: 0 0 0 31px; position: relative; } #thumb-view, #list-view { position: absolute; display: block; top: 5px; overflow: hidden; background-image: url(../images/instrument_sprite.png); background-repeat: no-repeat; text-indent: -10000em; } #thumb-view { width: 17px; height: 17px; right: 42px; background-position: -763px 0; } #list-view { width: 27px; height: 17px; right: 5px; background-position: -780px 0; } #thumbnail { margin: 0px 0 0 40px; } #thumbnail LI { list-style: none; float: left; margin: 16px 0 0 20px; } .img-holder-thumb { background: url(../images/instrument_sprite.png) no-repeat -572px 0; width: 179px; height: 233px; } .img-holder-thumb, .img-holder-list { position: relative; } .img-holder-thumb .product-image { position: absolute; left: 12px; top: 14px; } .img-holder-thumb .product-name { position: absolute; top: 188px; left: 10px; color: #72898f; font-variant: small-caps; line-height: 1.3em; } .img-holder-thumb .product-info { position: absolute; top: 146px; left: 12px; width: 157px; height: 31px; overflow: hidden; background-color: #0a1013; } .img-holder-thumb .product-size { position: absolute; right: 3px; top: 4px; } .img-holder-thumb .product-accessory { position: absolute; top: 5px; left: 2px; color: #616161; font-size: 11px; } .img-holder-list { background: url(../images/rental/bg_list_view.png) no-repeat; width: 590px; height: 180px; } .img-holder-list .product-image { position: absolute; left: 12px; top: 23px; } .img-holder-list .product-name { position: absolute; top: 20px; left: 200px; color: #325867; font-variant: small-caps; line-height: 1.3em; font-size: 1.5em; } .img-holder-list .product-info { position: absolute; bottom: 0px; left: 203px; width: 300px; height: 56px; overflow: hidden; } .img-holder-list .product-accessory { position: absolute; top: 24px; left: 0px; color: #616161; font-size: 11px; } /* PRODUCT BANNER ————————————————————————————————————————————————————————— */ #ani-banner{ width: 100%; height: 426px; position: relative; background: url(../images/shop/bg_ani-banner.jpg) 50% 0 no-repeat; } .ani-slide{ width: 960px; height: 100%; margin: 0 auto; position: relative; overflow: hidden; } .ani-zone{ position: absolute; width: 100%; } .ani-wrap{ position: relative; display: table-cell; } .ani-wrap img.ani-shown { display: inline !important; } #ani-banner{ .ani-zone1 { top: 22px; left: 120px; } .ani-wrap1 { width: 133px; height: 282px; } .ani-zone2 { top: 138px; left: 295px; } .ani-wrap2 { width: 410px; height: 102px; } .ani-zone3 { top: 41px; left: 390px; } .ani-wrap3 { width: 498px; height: 74px; } } /* PRODUCT ————————————————————————————————————————————————————————— */ #shop-wrapper { #sidebar-nav { margin-top: 10px; } H1 { color: #fff; font-size: 18px; font-weight: bold; line-height: 30px; margin: 0; padding-left: 18px; float: left; background: url(../images/bg_blue-dot.png) no-repeat 0 50%; } #cat-rent-link-pa, #cat-rent-link-instrument { display: block; width: 260px; height: 69px; overflow: hidden; text-indent: -10000em; margin-top: 23px; } #cat-rent-link-instrument { background: url(../images/instrument_sprite.png) no-repeat -572px -739px; } #cat-rent-link-instrument:hover { background-position: -572px -808px;} #product-list { background: none; margin: 14px 0 30px 17px; } #product-list, #cat-list { float: left; width: 683px; min-height: 800px; height: auto !important; height: 800px; padding-top: 0px; } #cat-list { margin: 0px 0 30px 0px; } #product-list-top { width: 631px; height: 30px; margin: 0 0 8px 31px; } #product-list-top a { float: right; display: block; width: 91px; height: 30px; background: url(../images/instrument_sprite.png) no-repeat -908px -133px; } #product-list-top a:hover { background-position: -908px -166px; } #product-list-functions { width: 631px; height: 27px; background-color: #181C1D; margin: 0 0 0 31px; position: relative; } #thumb-view, #list-view { position: absolute; display: block; top: 5px; overflow: hidden; background-image: url(../images/instrument_sprite.png); background-repeat: no-repeat; text-indent: -10000em; } #thumb-view { width: 17px; height: 17px; right: 42px; background-position: -763px 0; } #list-view { width: 27px; height: 17px; right: 5px; background-position: -780px 0; } #thumbnail { margin: 0 0 0 2px; } #thumbnail LI { list-style: none; float: left; margin: 26px 0 0 30px; } .img-holder-thumb { background: url(../images/instrument_sprite.png) no-repeat -572px -234px; width: 189px; height: 294px; } .img-holder-thumb, .img-holder-list { position: relative; } .img-holder-thumb .product-image { position: absolute; left: 5px; top: 82px; } .img-holder-thumb .product-brand { position: absolute; top: 32px; left: 16px; color: #fff; font-weight: bold; font-size: 18px; } .img-holder-thumb .product-name { position: absolute; top: 54px; left: 16px; color: @l-grey; line-height: 1.3em; font-size: 14px; font-variant: normal; } .img-holder-thumb .product-size { position: absolute; top: 196px; right: 7px; background: url(../images/instrument_sprite.png) no-repeat -762px -21px; width: 55px; height: 17px; color: #0e0e0f; font-size: 13px; padding: 13px 3px 0 0; text-align: right; } .img-holder-thumb .product-info { position: absolute; top: 245px; left: 12px; width: 189px; height: 50px; overflow: hidden; background-color: transparent; color: darken(@l-grey, 20%); } .img-holder-thumb .product-desc { position: absolute; left: 5px; top: 5px; width: 160px; line-height: 1.3em; } .img-holder-list { background: url(../images/rental/bg_list_view.png) no-repeat; width: 590px; height: 180px; } .img-holder-list .product-image { position: absolute; left: 12px; top: 23px; } .img-holder-list .product-brand { position: absolute; top: 32px; left: 210px; color: #fff; font-weight: bold; font-size: 18px; } .img-holder-list .product-size { position: absolute; top: 136px; left: 130px; background: url(../images/instrument_sprite.png) no-repeat -762px -21px; width: 55px; height: 17px; color: #0e0e0f; font-size: 13px; padding: 13px 3px 0 0; text-align: right; } .img-holder-list .product-name { position: absolute; top: 54px; left: 210px; color: @l-green; font-variant: small-caps; line-height: 1.3em; font-size: 16px; } .img-holder-list .product-info { position: absolute; top: 80px; left: 213px; width: 300px; height: 56px; overflow: hidden; } .img-holder-list .product-accessory { position: absolute; top: 24px; left: 0px; color: #616161; font-size: 11px; } } #cat-title-shop { background: url(../images/instrument_sprite.png) no-repeat 0 -529px; width: 260px; height: 78px; text-indent: -10000em; overflow: hidden; margin-bottom: 0; } .product-price { display: none; position: absolute; top: 8px; right: 26px; color: @l-green; font-size: 22px; } #shop-menu { LI { list-style: none; } LI#shop-pop { background: url(../images/instrument_sprite.png) no-repeat 0 -607px; display: block; width: 260px; height: 56px; cursor: pointer; } LI#shop-orchestral { background: url(../images/instrument_sprite.png) no-repeat 0 -665px; display: block; width: 260px; height: 56px; cursor: pointer; } LI#shop-percussion { background: url(../images/instrument_sprite.png) no-repeat -261px -529px; display: block; width: 260px; height: 56px; cursor: pointer; } LI#shop-chinese { background: url(../images/instrument_sprite.png) no-repeat -261px -592px; display: block; width: 260px; height: 56px; cursor: pointer; } LI A { background: url(../images/instrument_sprite.png) no-repeat 0 -777px; display: block; width: 240px; height: 44px; overflow: hidden; color: @l-grey; padding: 0 0 0 20px; line-height: 44px; } LI.last { background-position: 0 -859px; display: block; width: 240px; height: 8px; } LI A SPAN { color: @d-grey; font-variant: small-caps; padding-left: 8px; font-family: Segoe UI, Arial, sans-serif; } LI A:hover, LI A.active { background-position: 0 -729px; color: #0d242d; text-shadow: 3px 3px 2px #366670; } LI A:hover SPAN, LI A.active SPAN { text-shadow: 1px 1px 0px #366670; color: lighten(@l-grey, 30%); } } /* LIVE BAND ————————————————————————————————————————————————————————— */ #liveband-overlay { position: relative; width: 960px; z-index: -1; } #liveband-overlay IMG.map { position: relative; z-index: 100; } #liveband-overlay IMG.regionBg { left: 0px; position: absolute; top: 0px; z-index: 19; } #liveband-overlay IMG.region { display: none; left: 0px; position: absolute; top: 0px; z-index: 20; } #lb-columns { background: #000 url(../images/liveband/bg_columns.jpg) no-repeat 50% 0; width: 960px; height: 403px; position: relative; } #liveband-blocks { background: url(../images/liveband/bg_block.jpg) no-repeat; width: 960px; height: 694px; overflow: hidden; position: relative; } #lb-columns P { color: #efefef; } #lb-service-block { position: absolute; bottom: 19px; left: 58px; } #lb-experience-block { position: absolute; bottom: 19px; left: 355px; } #lb-location-block-1 { position: absolute; bottom: 19px; left: 660px; } #lb-location-block-2 { position: absolute; bottom: 19px; left: 790px; } #lb-bands-lnk, #lb-performance-lnk, #lb-stage-lnk { border-bottom: 1px solid #009fc3; font-size: 1.3em; color: #009fc3; bottom: 0px; } #lb-bands-lnk:hover, #lb-performance-lnk:hover, #lb-stage-lnk:hover { border: 0; } #lb-block-1 { position: absolute; top: 103px; left: 210px; width: 400px; } #lb-block-2 { position: absolute; top: 455px; left: 366px; width: 400px; } #lb-block-1 LI { list-style-position: outside; } /* RECRUIT ————————————————————————————————————————————————————————— */ #recruit-block { margin: 30px 0 30px 0; width: 830px; padding-top: 30px; } #recruit-block h2 { margin-bottom: 10px; } /* SLIDER —————————————————————————————————————————————————————— */ .sliding-pic { margin-top: 8px; margin-left: 25px; float: left; position: relative; } .leftTop { height: 10px; width: 10px; position: absolute; top: 0px; left: 0px; } .leftTopIn { } .leftBottom { height: 10px; width: 10px; position: absolute; bottom: 0px; left: 0px; } .rightTop { height: 10px; width: 10px; position: absolute; top: 0px; right: 0px; } .rightBottom { height: 10px; width: 10px; position: absolute; bottom: 0px; right: 0px; }