/* * Document : main.css * Author : Jim * Description: The main stylesheet of the template * * Structure (with shortcodes): * (#m01mls) MAIN LAYOUT * (#m02-1hds) HEADER * (#m02-2fts) FOOTER * (#m03mcs) MAIN CONTENT * (#m04bos) BOOTSTRAP OVERWRITE/EXTEND STYLES * (#m05ths) THEME * (#m06hes) HELPERS * (#m07res) RESPONSIVE * (#m08rts) RETINA * (#m09rprl) PRELOAD */ /* ================================================================= (#m01mls) MAIN ================================================================= */ span.alert-text { color: #E1645F; } span.date-text { color: #efbf3e;} /* ================================================================= (#m02-1hds) HEADER ================================================================= */ header div.xs-title-line { background: url(../img/moon_festival/xs-main/top_moon_festival.png); background-size: auto 7px; } header div.md-title-line { background: url(../img/moon_festival/md-main/top_moon_festival.png); } header div.xs-title { background: url(../img/moon_festival/xs-main/bg_moon_festival.png); } header div.xs-title img.xs-logo { width: 256px; height: auto;} header div.xs-title img.xs-logo.en { width: 256px; margin-top: 4px;} header div.xs-title div.mobile-logo{padding-right: 100px !important;} /*@media screen and (max-width: 340px){ header div.xs-title img.xs-logo { width: 105%; height: auto; margin-top: 5px;} }*/ header div.md-title { background: url(../img/moon_festival/xs-main/bg_moon_festival.png); } header div.md-title img.md-title-logo { margin-top: 0px; margin-left: -15px; } div.md-title div.zh-box a.zh-en { background: url(../img/moon_festival/md-main/en-tag_moon_festival.png); } div.md-title div.zh-box a.zh-tw { background: url(../img/moon_festival/md-main/ch-tag_moon_festival.png); } div.nav-box{margin-top: 20px;} ul.header-nav>li>img {margin: 0px 13px;} ul.header-nav.en>li>img {margin: 0px 40px;} #sidebar-alt{background-color: #e9e7fe;} .sidebar-nav>li{background: #e9e7fe;} .sidebar-nav li.nav-title { background: #595094; } .sidebar-nav li.nav-title a{ border-bottom: 1px solid #595094; } .sidebar-nav li.nav-title a:hover { background: #595094; } .sidebar-nav a { border-bottom: 1px solid #cfcdea; } .sidebar-nav a > .sidebar-nav-icon,.sidebar-nav a > .sidebar-nav-indicator {color: #595094; opacity: 1;} .sidebar-nav a:hover,.sidebar-nav a.open,.sidebar-nav li.active > a {background: #d7d2f7;} .sidebar-nav ul{background: #f5f4ff} .sidebar-nav ul a i {color: #595094;} ul.header-nav>li:hover>a { border-bottom: 5px solid #595094;} ul.header-nav>li:hover ul.header-nav2{background: #f7f6fe;} ul.header-nav2{box-shadow: 1px 1px 2px #e1e1e1;} ul.header-nav2>li a i { color: #595094; } ul.header-nav2>li a:hover,ul.header-nav2>li a.selected { color: #595094; } ul.header-nav>li>a{display:inline-block; height: 32px;} /* ================================================================= (#m02-2fts) FOOTER ================================================================= */ footer div.copy-right { background: #5a5094; } footer div.copy-right img.copy-right-icon { width:33px; height: 33px; } footer img.footer-img-xs {top: 0px;} /* ================================================================= (#m03mcs) MAIN CONTENT ================================================================= */ /*=========title-banner=========*/ div.title-banner-box { border: 5px solid #d1cde9; } div.title-banner-box .banner-title { color: #ffffff; text-shadow: 0 0 3px #403484,0 0 3px #403484,0 0 3px #403484,0 0 20px #403484; } div.title-banner-box.about { background: url(../img/moon_festival/about/banner_about_moon_festival.png) 100% no-repeat; background-size: auto 66px; background-color: #5a5094;} div.title-banner-box.news { background: url(../img/moon_festival/news/banner_news_moon_festival.png) 100% no-repeat; background-size: auto 66px; background-color: #5a5094;} div.title-banner-box.help { background: url(../img/moon_festival/help/banner_help_moon_festival.png) 100% no-repeat; background-size: auto 66px; background-color: #5a5094;} div.title-banner-box.service { background: url(../img/moon_festival/service/banner_service_moon_festival.png) 100% no-repeat; background-size: auto 66px; background-color: #5a5094;} div.title-banner-box.shop { background: url(../img/moon_festival/shop/banner_shop_moon_festival.png) 100% no-repeat; background-size: auto 66px; background-color: #5a5094;} div.title-banner-box.media { background: url(../img/moon_festival/media/banner_media_moon_festival.png) 100% no-repeat; background-size: auto 66px; background-color: #5a5094;} div.title-banner-box.contact { background: url(../img/moon_festival/contact/banner_contact_moon_festival.png) 100% no-repeat; background-size: auto 66px; background-color: #5a5094;} div.title-banner-box.sitemap { background: url(../img/moon_festival/sitemap/banner_about_moon_festival.png) 100% no-repeat; background-size: auto 66px; background-color: #5a5094;} /*=========breadcrumbs=========*/ div.breadcrumbs a:hover { color: #5a5094; } div.breadcrumbs span.path_alert { color: #5a5094; } /*=========banner-title-line=========*/ div.banner-title-line { background: url(../img/moon_festival/content-title/line-point2_moon_festival.png) repeat-x 50%; background-size: auto 2px; } /*=========left menu=========*/ ul.left-menu li+li { border-top: 1px dashed #efbf3e; } ul.left-menu li.selected a { color: #5a5094; } ul.left-menu li a:hover { color: #5a5094; } /*=========news list=========*/ h2.news-header { color: #595094; } div.news-title { border-left: 5px solid #595094; } /*========= periodical ==========*/ div.periodical-main h3 a.periodical-download { background: #595094; } /*========= contact us ==========*/ div.form-title { background: #595094; } div.ori-form { border: 1px dashed #595094; } div.ori-form div.button-area { border-top: 1px dashed #595094; } div.ori-form div.form-line { border-top: 1px dashed #595094; } div.ori-form div.row.form-table-title>div { border-top: 1px dashed #D59935; border-bottom: 1px dashed #D59935; } div.ori-form div.row.form-table-content>div+div { border-left: 1px dashed #D59935; } div.ori-form div.row.form-table-content-last>div { border-top: 1px dashed #D59935; border-bottom: 1px dashed #D59935; } div#refresh_img i { background: #D59935; } a#auth_code_audio { border: 2px solid #595094; } a#auth_code_audio:hover { border: 2px solid #595094; background: #595094; } a#auth_code_audio i { color: #595094; } /*========= donate form ==========*/ button.submit-button.donate-btn-color{ background-color: #efbf3e; } /*========= board ==========*/ a.leave-button { background: #595094; } div.board-box { background: url(../img/moon_festival/contact/bird_moon_festival.png) 10px 20px no-repeat #e4e3f4; background-size: 42px 28px; } div.board-box div.board-ask div.ask-content a.content-button { background: #e4e3f4; } /*========= detec ==========*/ div.pc-tab-box { border-bottom: 2px solid #D59935; } div.pc-tab-box a.selected { background: #D59935; color: #fff; border-color: #DA8D0D; } div.pc-tab-box a:hover { background: #D59935; color: #fff; border-color: #DA8D0D; } div.purple-line { background: url(../img/moon_festival/index/line-point2_moon_festival.png) 50% repeat-x; height: 8px; margin-bottom: 5px; } div.detec-search { background: #FBF2E2; } div.mb-tab-box select { border-color: #D59935; } span.detec-detail { background: #D59935; } button.search-button { background: #747424; } /*========= index =========*/ div#index-banner { border: 3px solid #bdb9d4; padding: 1px; margin-bottom: 60px; } div#index-banner div.owl-controls { position: absolute; right: 5px; } div#index-banner div.owl-dot.active span { background: #D59935; } div.index-row-title label.title { margin-top: 20px; color: #5a5094;} div.index-row-title h2.title { margin-top: 20px; color: #5a5094;} div.index-row-title a.more { color: #efbf3e; margin-right: 7px;} div.index-line-bottom { background: url(../img/moon_festival/index/line-point2_moon_festival.png) repeat-x 50%; background-size: 9px 2px; } div.index-airticle-area { border: 3px solid #e3c21b; background: url(../img/moon_festival/index/pic_moon_festival.png) no-repeat 97% 101% #FDFBE2; background-size: 202px 92px; padding: 50px 50px 100px 50px;} div#ad-banner div.owl { border: 5px solid #ebce3d; } div#ad-banner div.owl-nav>div.owl-prev { background: url(../img/moon_festival/index/pre_moon_festival.png); background-size: 40px 40px; } div#ad-banner div.owl-nav>div.owl-next { background: url(../img/moon_festival/index/next_moon_festival.png); background-size: 40px 40px; } div.ad-box{ background: #edce3d;} div.index-row-title img.icon.news { width: 56px; height: 46px; } div.index-row-title img.icon.publication { width: 56px; height: 46px; } div.index-row-title img.icon.clipping { width: 56px; height: 46px; } div.index-row-title img.icon.love { width: 56px; height: 46px; } div.index-airticle-area img.index-airticle-icon { width: 58px; height: 122px; top:-5px;} div#index-banner div.owl-dot span { background: #efbf3e; width: 14px; height: 14px; } div#index-banner div.owl-dot.active span { background: #5a5094; } div.periodical-main h3 i.title-icon { color: #595094; margin-top: -5px; } div.index-row-title label.publication-period-mb {color: #ffffff;} div.index-row-title label.publication-period{color: #DA251C;} div.xs-title>div>div.mobile-donate>a>img{margin-top: 13px !important;} div.index-row-title div.area-right{margin-bottom: 6px;} /*========== pagination ==========*/ ul.pagination li a { color: #595094; } ul.pagination li a:hover,ul.pagination li a:active,ul.pagination li a:focus { background: #595094; color: #fff; } ul.pagination li.hover a { background: #595094; color: #fff; } /*========== button ===========*/ button.submit-button { background: #595094; } /* ================================================================= (#m04bos) BOOTSTRAP OVERWRITE/EXTEND STYLES ================================================================= */ /* ================================================================= (#m05ths) THEME ================================================================= */ /* ================================================================= (#m06hes) HELPERS ================================================================= */ /* ================================================================= (#m07res) RESPONSIVE ================================================================= */ @media screen and (max-width: 550px) { } @media screen and (max-width: 450px) { } @media screen and (min-width: 400px) { } @media screen and (min-width: 550px) { } @media screen and (min-width: 768px) { div.title-banner-box.about { background: url(../img/moon_festival/about/banner_about_moon_festival.png) 100% no-repeat; } div.title-banner-box.news { background: url(../img/moon_festival/news/banner_news_moon_festival.png) 100% no-repeat; } div.title-banner-box.help { background: url(../img/moon_festival/help/banner_help_moon_festival.png) 100% no-repeat; } div.title-banner-box.service { background: url(../img/moon_festival/service/banner_service_moon_festival.png) 100% no-repeat; } div.title-banner-box.media { background: url(../img/moon_festival/media/banner_media_moon_festival.png) 100% no-repeat; } div.title-banner-box.shop { background: url(../img/moon_festival/shop/banner_shop_moon_festival.png) 100% no-repeat; } div.title-banner-box.contact { background: url(../img/moon_festival/contact/banner_contact_moon_festival.png) 100% no-repeat; } div.title-banner-box.sitemap { background: url(../img/moon_festival/sitemap/banner_about_moon_festival.png) 100% no-repeat; } div.index-airticle-area{padding: 50px;} div.index-airticle-area img.index-airticle-icon { top:-5px; left: -30px;} footer div.footer-imf { background: url(../img/moon_festival/footer/footer-pic.png) bottom 10px right no-repeat;} } @media screen and (min-width: 992px) { div#index-banner { width: 100%; } footer div.footer-imf { /*background: url(../img/moon_festival/footer/footer-pic.png) 100% no-repeat; */ background: url(../img/moon_festival/footer/footer-pic.png)bottom 0px right 30px no-repeat; background-position-y: -10px; } } @media screen and (min-width: 992px) and (max-width: 1200px) { header div.md-title img.md-title-logo.en { margin-top: 0px; margin-left: -12px; width:42%; height: auto; } } @media screen and (min-width: 1200px) { ul.header-nav>li>img { margin: 0px 19px; } footer div.footer-imf { background: url(../img/moon_festival/footer/footer-pic.png) 50% no-repeat; margin-bottom: 0px; } footer div.footer-imf div.container{ padding: 50px 122px; } } /* ================================================================= (#m08rts) RETINA ================================================================= */ /* ================================================================= (#m09rprl) PRELOAD ================================================================= */