/* ====================================================================================================================== Below style for "general.html", "concerts-detail.html", "course.html", "news-detail.html", "useful-link.html", "vacancies.html" ========================================================================================================================= */ /* • common */ .purple-txt { color:#880656;} .grey-sm-txt { color:#333; font-size:10px; font-weight:bold} .general-content { width:100%; margin-top:30px;} .general-content .gc-wrapper { padding:0 0 2% 0; height:100%; overflow:auto; overflow-x:hidden; overflow-y:hidden; line-height:2} .general-content h1 { font-size:30px; color:#880656; padding-bottom:5px; line-height:normal; padding-bottom:15px} .general-content h2 { font-size:20px; color:#880656; line-height:normal; padding-bottom:10px;} .general-content .col-left { width:25%; float:left;} .general-content .col-left.mobile { width:95%; margin-bottom:40px;} .general-content .col-left li:before { content: ""} .general-content .col-right { width:75%; float:left;} .general-content .col-right.mobile { width:95%; margin-top:40px;} .general-content .col-full { width:100%; float:left;} .general-content .col-left .img-blk { width:84%; margin-bottom:20px; color:#fff} .general-content .col-left .caption { line-height:normal; position:absolute; bottom:0; background-color:#880656; padding:5%} .general-content .col-left .img-blk ul { width:90%; position:absolute; z-index:100; float:right; text-align:right; right:15px; margin-top:5px; margin-top:-10px\9;} .general-content .col-left .img-blk ul li { padding-right:2%; margin:0; width:30px; height:6px; z-index:100; display:inline-block; background-color:#ccc;; -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none} .general-content .col-left .img-blk ul li:hover { background-color:#880656; cursor:pointer;} .general-content .col-left .img-blk ul li.active { background-color:#880656;} .general-content .col-left .img-blk ul li:before { content: ""} .general-content a { color:#880656} .general-content a:hover { color:#880656; text-decoration:underline;} .general-content hr { height:1px; background-color:#e8e8e8; border:none; margin:2% 0;} .general-content .course-blk hr { background-color:#fff; } /* • table for Gerneral cotent */ .general-content table.general { text-align:left; vertical-align:top; margin:0;} .general-content table.general th { background-color:#880656; padding:1% 2%; color:#fff; text-align:left; vertical-align:top; } .general-content table.general tr.odd td { background-color:#dbdbdb; padding:1% 2%; border-bottom:1px solid #fff; text-align:left; vertical-align:top; } .general-content table.general tr.even td { background-color:#e8e8e8; padding:1% 2%; border-bottom:1px solid #fff; text-align:left; vertical-align:top; } /* • table for Gerneral cotent */ .general-content table.nude { text-align:left; vertical-align:top; margin:0;} .general-content table.nude th { background-color:#fff; padding:0%; text-align:left; vertical-align:top; } .general-content table.nude td { background-color:#fff; padding:0%; border-bottom:1px solid #fff; text-align:left; vertical-align:top; } .general-content table.nude tr { background-color:#fff; padding:0%; border-bottom:1px solid #fff; text-align:left; vertical-align:top; } /* • ul li style for Gerneral cotent */ .general-content ul { margin:0px; padding:10px 0px;} .general-content ul li { list-style: none; counter-increment:•; display: table-row;} .general-content ul li:before { content: "•"; color:#880656; display: table-cell; text-align: right; padding-right: .5em;} html body.en .general-content ul {font-size:12px; max-height:999999px} html body.tc .general-content ul {font-size:14px; max-height:999999px} html body.sc .general-content ul {font-size:14px; max-height:999999px} html body.en .general-content ul li {font-size:12px; max-height:999999px} html body.tc .general-content ul li {font-size:14px; max-height:999999px} html body.sc .general-content ul li {font-size:14px; max-height:999999px} html body.en .general-content ul li:before {font-size:12px; max-height:999999px} html body.tc .general-content ul li:before {font-size:14px; max-height:999999px} html body.sc .general-content ul li:before {font-size:14px; max-height:999999px} /* • For "concerts-detail.html" event information */ .sponsor-container {padding:4% 0; clear:both; display:table; width:100%;} .sponsor-blk { width:18%; float:left; margin-right:10px} .sponsor { line-height:1.2; margin-top:3%; color:#666; padding-bottom:10px; vertical-align: bottom;} html body.en .sponsor { font-size:10px} html body.tc .sponsor { font-size:14px} html body.sc .sponsor { font-size:14px} /* • "concerts-detail.html" content (div table) */ .concerts-detail { margin-bottom:50px} .concerts-detail-blk { border-bottom:1px dotted #e6e6e6; display:table; width:100%; padding:10px 0;} .concerts-detail-blk:last-child { border-bottom:none;} .concerts-detail-blk .cd-field { width:200px; float:left; color:#880656; clear:both} .concerts-detail-blk .cd-detail { float:left} .concerts-detail-blk .cd-field:after { content:"";} .concerts-detail-blk .cd-detail i { font-size:14px; padding-right:10px;} .concerts-detail-blk .cd-detail a { color:#333; -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none !important; } .concerts-detail-blk .cd-detail a:hover {color:#880656; text-decoration:none;} /* • "concerts-detail.html" left column info */ .cd-event-col-l { width:100%;} .cd-event-col-l .event-wrapper { width:85%; margin-bottom:20px; background-color:#e6e6e6} .promo-date-blk { padding:1% 0% 0% 0%; border-bottom:1px solid #fff; z-index:5;} .promo-date-blk .p-month { line-height:normal; color:#666; display:inline-block; font-weight:bold; padding-left:15px} .promo-date-blk .p-date { font-size:90px; line-height:1; border-bottom:4px solid #fff; color:#880656; display:inline-block; background-color:#e6e6e6; z-index:10; padding-left:5%;} /* • "left column "Save in My Calendar" & "Ticket available" btn style */ a .cd-btn { color:#fff; line-height:normal; text-decoration:none; padding:10px 15px; border-bottom:1px solid #952c6e; background-color:#880656; transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none} a .cd-btn:hover { background-color:#e8e8e8; text-decoration:none; color:#333} a .cd-btn i { padding-right:10px; font-size:14px} a .cd-btn .i-col { width:10%; float:left; vertical-align:top} a .cd-btn .btn-filed-col { width:85%; display:inline-block; vertical-align:top} /* • "Meet the Performers" style */ .meet-performers-blk { background-color:#880656; line-height:normal; overflow:hidden;} .meet-performers-blk .mp-inner { padding:40px 15px 10px 15px} .meet-performers-blk .mp-inner .title-sm { line-height:normal; color:#fff;} .meet-performers-blk .mp-inner .title-lg { font-size:25px; line-height:normal; color:#fff;} .meet-performers-blk .performer-blk { width:101%;} .meet-performers-blk .performer-blk .performer-row { border-bottom:1px solid #fff;} .meet-performers-blk .performer-blk .performer-row .mp-img-col { width:30%; float:left} .meet-performers-blk .performer-blk .performer-row .mp-detial-col { /*width:70%;*/ width:62%; float:left; padding:4%;} a .performer-row {background-color:#e8e8e8; color:#333; -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none;} a .performer-row:hover { background-color:#ccc; } .general-content .performer-blk a:hover { text-decoration:none; } .meet-performers-blk-m {display:none;} /* • For "course.html" */ .course-blk { background-color:#e8e8e8; /*use space block instead: margin-bottom:30px; */} .course-blk .c-blk-pos { padding:20px} .course-deepGrey-blk {width:100%; display:table; background-color:#ccc;} .course-deepGrey-blk .c-deepGrey-pos { padding:10px 20px; display:table;} .course-deepGrey-blk .c-deepGrey-pos ul li a { color:#333; transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none} .course-deepGrey-blk .c-deepGrey-pos ul li a:hover {color:#880656;} /* • For "news-detail.html" */ .pager { background-color:#dbdbdb; width:100%; display:table; margin-bottom:30px; z-index: 920} .pager .pager-blk { padding:5px 10px; font-size:10px; max-height:999999px; line-height:normal; color:#fff; font-weight:bold; color:#333; background-color:#eee} .tc .pager .pager-blk, .sc .pager .pager-blk { font-size:12px;} .pager .pager-blk.left { float:left } .pager .pager-blk.right { float:right} .pager .pager-blk a { color:#333; -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); -webkit-transition-property: background-color, color; transition-property: background-color, color; box-shadow: none;} .pager .pager-blk a:hover { color:#880656; text-decoration:none;} .pager .v-sep { display:inline-block; padding:0px 10px; color:#880656;} .pager .previous, .pager .next { display:inline-block;} /* • For "useful-link.html" */ .useful-link { margin-bottom:30px;} table.use-link { background-color:#e8e8e8} table.use-link ul { color:#333} table.use-link ul li a { color:#333} table.use-link ul li a:hover { text-decoration:none} table.use-link td { width:25%; border-right:1px solid #fff} /* • For "vacancies.html" */ .sub-nav-blk { display:block; background-color:#e6e6e6; width:85%;} .sub-nav-blk ul {padding:3% 5%; margin:0; list-style:none;} .sub-nav-blk ul li { display:block; border-bottom:1px solid #fff; padding-bottom:15px; margin-top:10px; margin-left:8px; line-height:1.6;} .sub-nav-blk ul li:last-child { border-bottom:none} .sub-nav-blk ul li:before {content:""} .sub-nav-blk ul li a { color:#333; text-decoration:none;} .sub-nav-blk ul li a:hover { color:#880656; text-decoration:none;} .sub-nav-blk ul li.active { color:#880656;} .sub-nav-blk-m {display:none;} /* • left column banner */ /*#bannerEffect.mobile { display:none; } .dotnav.mobile { display:none; }*/ .rslides { position:relative; list-style:none; overflow:hidden; width:100%; padding:0; margin:0} .rslides.mobile div { position:absolute; width:100%; padding:0; margin:0;} .rslides.mobile div.banner {position:relative; } .rslides.mobile div .content { position:absolute; width:92%; padding:10px 0 20px 0; bottom:0; z-index:10; background:#880656; color:#fff; cursor:pointer; line-height:1.6;} .rslides.mobile div .caption-pos { font-size:25px; width:95%; margin-left:5px; padding:15px 10px; line-height:2;} .rslides li { visibility:hidden; position:absolute; display:none; width:100%; left:0; top:0} .rslides li:first-child { position:relative; display:block; float:left} .rslides img { display:block; height:auto; float:left; width:100%; border:0} .dotnav { z-index:20; position:absolute; left:0; bottom:-30px; padding:2px 0px 5px 10px; width:100%; height:12px} .dotnav ul { list-style-type:none; margin:0; padding:0;} .dotnav ul li { float:left; width:22px; height:8px; margin-right:8px; margin-bottom:5px; background-color:#adadad; cursor:pointer;} .dotnav.mobile ul li { float:left; width:66px; height:24px; margin-right:24px; background-color:#adadad; cursor:pointer;} .dotnav ul li:hover, .dotnav.mobile ul li:hover { background-color:#3d3935;} .dotnav ul li img { width:20px; height:8px; } .dotnav.mobile ul li img { width:60px; height:24px; } .dotnav li.rslides_here , .dotnav .current, .dotnav.mobile li.rslides_here , .dotnav.mobile .current { background-color:#880656} .dotnav li.rslides_here:hover, .dotnav .current:hover, .dotnav.mobile li.rslides_here:hover, .dotnav.mobile .current:hover { background-color:#880656; cursor:default} .banner .content { position:absolute; bottom:0; z-index:10; width:92%; background:#880656; color:#fff; cursor:pointer; line-height:1.6;} .banner img.img-scale { width:92%} .caption-pos { padding:6px 4%} /* ============================================================================= = iPad Portrait Styles ============================================================================= */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){ /* • common */ .general-content .col-left { width:30%; float:left;} .general-content .col-right { width:70%; float:left;} .general-content .col-left .img-blk ul { right:15px; margin-top:-5px;} .general-content .col-left .img-blk ul li { height:6px; margin-left:2px } /* • "concerts-detail.html" left column info */ .promo-date-blk { padding:3% 0% 0% 0%;} .promo-date-blk .p-date { font-size:60px; } } /* ============================================================================= = iPad Landscape Styles ============================================================================= */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { .general-content .col-left .img-blk ul { margin-top:-10px;} .general-content .col-left .img-blk ul li { height:6px; margin-left:2px; } }