﻿@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: url(../images/course/wallpaper4.jpg) repeat-x;
	background-position: center top;
	color: @l-grey;
	font: 10px Arial, "微軟正黑體", "Microsoft JhengHei", sans-serif;
}
BODY#home {
	background: url(../images/course/wallpaper4.jpg) repeat-x;
	background-position: center top;
}
BODY[id^="shop-"] {
	background: url(../images/course/wallpaper4.jpg) repeat-x;
	background-position: center top;
}

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-family: "微軟正黑體";
	font-size: medium;
	color: #FFF;
	font-weight: bold;
}
H1.bw {
	font-size: 2em;
	color: #fff;
	text-align: center;
}
H2 {
	font-family: "微軟正黑體";
	font-size: small;
	color: #000;
}
.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;
}

H2.bw {
	color: #fff;
	font-size: 2.8em;
	text-align: center;
	margin: 1em auto;
}
H3 {
	font-family: "微軟正黑體";
	font-size: large;
	font-weight: bold;
	color: #000;
}
H4 {
	font-family: "微軟正黑體";
	font-size: small;
	color: #000;
}
H5 {
	font-family: "微軟正黑體";
	font-size: large;
	font-weight: bold;
	color: #666;
}
.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: #000000;
	text-decoration: none;
	font-size: small;
}
A:hover {
	color: #0000ff;
	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: 76px; }
A#mnu_company {
	width: 101px;
	background-position: -76px 0;
}
A#mnu_courses {
	width: 109px;
	background-position: -177px 0;
}
A#mnu_bandroom {
	width: 111px;
	background-position: -286px 0;
}
A#mnu_liveband {
	width: 145px;
	background-position: -397px 0;
}
A#mnu_sell {
	width: 112px;
	background-position: -542px 0;
}
A#mnu_shop {
	width: 107px;
	background-position: -654px 0;
}
A#mnu_weblink {
	width: 100px;
	background-position: -761px 0;
}
A#mnu_contact {
	width: 99px;
	background-position: -861px 0;
}
	  
#mnu_index:hover { background-position: 0 -40px; }
#mnu_company:hover { background-position: -76px -40px; }
#mnu_courses:hover { background-position: -177px -40px; }
#mnu_bandroom:hover {	background-position: -286px -40px; }
#mnu_liveband:hover {	background-position: -397px -40px; }
#mnu_sell:hover {	background-position: -542px -40px; }
#mnu_shop:hover { background-position: -654px -40px; }
#mnu_weblink:hover { background-position: -761px -40px; }
#mnu_contact:hover { background-position: -861px -40px; }

/* HOLDER
—————————————————————————————————————————————————————— */
#holder {
	width: 960px;
	margin: 0 auto;
}

/* HEADER
—————————————————————————————————————————————————————— */
#header {
	width: 960px;
	height: 174px;
	background: #000
}

#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;
    background: url(http://www.naturaleducationltd.com/MUSIC/images/courseindex/backwood_natural2.jpg);
}
#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;
	background: #FFF;
}

.box-content {
	position: relative;
}

#latest-news .box-top H2 {
	background: url(../images/news_title.png) no-repeat 0px 0px;
	width: 313px;
	height: 35px;
	text-indent: -3000px;
	overflow: hidden;
	margin-bottom:15px;
}

#news-content {
	margin: 6px 0 0 0;
	background: url(../images/newsbg.png);
	border: 1px solid #1b1b1b;
	width: 276px;
	height: 200px;
	overflow: hidden;
	position: relative;
	padding: 10px 0 0 35px;
}
#news-mask {
	overflow: hidden;
	width: 240px;
	height: 500px;
}

a#news-left {
	position: absolute;
	left: 9px;
	top: 40px;
	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: 40px;
	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: 500px;
	position: relative;
}

.news-item {
	float: left;
	width: 242px;
	height: 500px;
	margin-right: 100px;
}

.news-item a {
	font-size:10px;
}

.news-item H3 {
	color: white;
}
.news-item .date {
	color: #A3927F;
	font-size: 12px;
}
.news-item P {
	color: #c6b198;
	margin-top: 10px;
}

.news-item .more {
	margin-top: 10px;
}

#title-courses H2 {
	background: url(../images/course_title.png) no-repeat 0px 0px;
	width: 313px;
	height: 35px;
	text-indent: -3000px;
	overflow: hidden;
	margin-bottom:15px;
}

.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: 78px;
	overflow: hidden;
	background-image: url(../images/course_item.png);
	background-repeat: no-repeat;
}
#courses DT A IMG {
	float: left;
	margin: 3px auto auto 3px;
}
#courses02 { background-position: 0 -78px; }
#courses03 { background-position: 0 -157px; }
#courses04 { background-position: 0 -235px; }
#courses05 { background-position: 0 -313px; }
#courses06 { background-position: 0 -391px; }
#courses07 { background-position: 0 -470px; }
#courses08 { background-position: 0 -548px; }

#courses01:hover { background-position: 0px 0; }
#courses02:hover { background-position: 0px -78px; }
#courses03:hover { background-position: 0px -157px; }
#courses04:hover { background-position: 0px -235px; }
#courses05:hover { background-position: 0px -313px; }
#courses06:hover { background-position: 0px -391px; }
#courses07:hover { background-position: 0px -470px; }
#courses08:hover { background-position: 0px -548px; }

#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: 16px;
}

#sections .box-content .desc {
	margin: 18px 20px 3px 0;
	font-size: 1.2em;
}
#sections .box-content .desc P {
	font-size: 13px;
}

#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;
}

maintitle {
	font-family: "微軟正黑體";
	font-size: x-large;
	text-align: center;
	color: #CCC;
	font-weight: bold;
}
subtitle {
	font-family: "微軟正黑體";
	font-size: medium;
	color: #FFF;
	font-weight: bold;
}
maintitle2 {
	font-family: "微軟正黑體";
	font-size: medium;
	color: #FFF;
}
subtitle2 {
	font-family: "微軟正黑體";
	font-size: small;
	color: #000;
}
superpoint {
	font-family: "微軟正黑體";
	font-size: large;
	font-weight: bold;
	color: #666;
}
indent {
	font-family: "微軟正黑體";
	font-size: medium;
	color: #000;
}
coursedata {
	font-family: "微軟正黑體";
	font-size: small;
	color: #000;
}
coursetitle {
	font-family: "微軟正黑體";
	font-size: large;
	font-weight: bold;
	color: #000;
}