/*Overall CSS for each Horizontal Accordion. Most settings should be kept as it. Customize each Accordion by styling each Accordion's ID attribute instead. */ #hc1 li{ position:relative; margin:0 2px 0 0; /*Spacing between each LI container*/ } #hc1 li a.click_top_banner{ width:720px; height:300px; text-indent:-9999px; display:block; position:absolute; z-index:1000;} #hc1 li a{} #hc1 li .hpanel{ position:absolute; z-index:600; padding: 5px; /*Padding inside each content*/ cursor: hand; cursor: pointer; } #content_top ul{ margin:0px; padding:0px;} .haccordion{ padding: 0; } div#content_top div#hc1 ul{ margin: 0; padding: 0; height:auto; list-style: none; overflow: hidden; /*leave as is*/ } .haccordion li{ margin: 0; padding: 0; display: block; /*leave as is*/ width: 100%; /*For users with JS disabled: Width of each content*/ height: 200px; /*For users with JS disabled: Height of each content*/ overflow: hidden; /*leave as is*/ float: left; /*leave as is*/ } .haccordion li .hpanel{ width: 100%; /*For users with JS disabled: Width of each content*/ height: 200px; /*For users with JS disabled: Height of each content*/ } /*******************/ #content_top #hc1 li .hpanel{ color: #FFF; font: 15px/25px Arial, Helvetica, sans-serif, "Adobe 黑体 Std R", "新細明體"; height: 240px; } .hpanel .transparentbg { background: url(../images/transparent_bg.png) repeat; padding: 10px 20px 10px 10px; margin: 20px auto 20px 70px; width: 280px; } #content_top .point { background: url(../images/point.png) no-repeat 0px 8px; margin: 0px; padding: 0px; text-decoration: none; left: 20px; } #content_top #hc1 ul li .hpanel p { color: #FFF; text-decoration: none; margin: 0px; padding: 0px 0px 5px 20px; } #hc1 ul #top1 { background: url(../../../images/AboutUs/images/aboutus_top_01.jpg) no-repeat;} #hc1 ul #top2 { background: url(../../../images/AboutUs/images/aboutus_top_02.jpg) no-repeat;} #hc1 ul #top3 { background: url(../../../images/AboutUs/images/aboutus_top_03.jpg) no-repeat;} #hc1 ul #top4 { background: url(../../../images/AboutUs/images/aboutus_top_04.jpg) no-repeat;} #top_banner {border:1px solid #CCC; height:300px; margin:0 10px 10px; padding:0; width:948px; padding:0;} /* About Us*/ #content_top #hc1 ul #top1 { background: url(../../../images/AboutUs/images/aboutus_top_01.jpg) no-repeat;} #content_top #hc1 ul #top2 { background: url(../../../images/AboutUs/images/aboutus_top_02.jpg) no-repeat;} #content_top #hc1 ul #top3 { background: url(../../../images/AboutUs/images/aboutus_top_03.jpg) no-repeat;} #content_top #hc1 ul #top4 { background: url(../../../images/AboutUs/images/aboutus_top_04.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top1 { background: url(../../../images/AboutUs/images/eng/aboutus_top_01.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top2 { background: url(../../../images/AboutUs/images/eng/aboutus_top_02.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top3 { background: url(../../../images/AboutUs/images/eng/aboutus_top_03.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top4 { background: url(../../../images/AboutUs/images/eng/aboutus_top_04.jpg) no-repeat;} /* Famine */ #content_top #hc1 ul #top1_Famine { background: url(../../../images/Famine/images/home_img_01.jpg) no-repeat;} #content_top #hc1 ul #top2_Famine { background: url(../../../images/Famine/images/home_img_02.jpg) no-repeat;} #content_top #hc1 ul #top3_Famine { background: url(../../../images/Famine/images/home_img_03.jpg) no-repeat;} #content_top #hc1 ul #top4_Famine { background: url(../../../images/Famine/images/home_img_04.jpg) no-repeat;} #content_top #hc1 ul #top5_Famine { background: url(../../../images/Famine/images/home_img_05.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top1_Famine { background: url(../../../images/Famine/images/eng/home_img_01.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top2_Famine { background: url(../../../images/Famine/images/eng/home_img_02.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top3_Famine { background: url(../../../images/Famine/images/eng/home_img_03.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top4_Famine { background: url(../../../images/Famine/images/eng/home_img_04.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top5_Famine { background: url(../../../images/Famine/images/eng/home_img_05.jpg) no-repeat;} /* Donation */ #content_top #hc1 ul #top1_Donation { background: url(../../../images/Donation/images/home_img_01.jpg) no-repeat;} #content_top #hc1 ul #top2_Donation { background: url(../../../images/Donation/images/home_img_02.jpg) no-repeat;} #content_top #hc1 ul #top3_Donation { background: url(../../../images/Donation/images/home_img_03.jpg) no-repeat;} #content_top #hc1 ul #top4_Donation { background: url(../../../images/Donation/images/home_img_04.jpg) no-repeat;} #content_top #hc1 ul #top5_Donation { background: url(../../../images/Donation/images/home_img_05.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top1_Donation { background: url(../../../images/Donation/images/eng/home_img_01.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top2_Donation { background: url(../../../images/Donation/images/eng/home_img_02.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top3_Donation { background: url(../../../images/Donation/images/eng/home_img_03.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top4_Donation { background: url(../../../images/Donation/images/eng/home_img_04.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top5_Donation { background: url(../../../images/Donation/images/eng/home_img_05.jpg) no-repeat;} /* Learn */ #content_top #hc1 ul #top1-calendar { background: url(../../../images/Learn/images/learn_calendar_img_30hf.jpg) no-repeat;} #content_top #hc1 ul #top2-calendar { background: url(../../../images/Learn/images/learn_calendar_img_rp.jpg) no-repeat;} #content_top #hc1 ul #top3-calendar { background: url(../../../images/Learn/images/learn_calendar_img_usedbook.jpg) no-repeat;} #content_top #hc1 ul #top4-calendar { background: url(../../../images/Learn/images/learn_calendar_img_sf.jpg) no-repeat;} #content_top #hc1 ul #top5-calendar { background: url(../../../images/Learn/images/learn_calendar_img_bfw.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top1-calendar { background: url(../../../images/Learn/images/eng/learn_calendar_img_30hf.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top2-calendar { background: url(../../../images/Learn/images/eng/learn_calendar_img_rp.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top3-calendar { background: url(../../../images/Learn/images/eng/learn_calendar_img_usedbook.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top4-calendar { background: url(../../../images/Learn/images/eng/learn_calendar_img_sf.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top5-calendar { background: url(../../../images/Learn/images/eng/learn_calendar_img_bfw.jpg) no-repeat;} /* GetInvolved */ #content_top #hc1 ul #top1_GetInvolved { background: url(../../../images/GetInvolved/images/calendar_img_30hf.jpg) no-repeat;} #content_top #hc1 ul #top2_GetInvolved { background: url(../../../images/GetInvolved/images/calendar_img_sam.jpg) no-repeat;} #content_top #hc1 ul #top3_GetInvolved { background: url(../../../images/GetInvolved/images/calendar_img_usedbook.jpg) no-repeat;} #content_top #hc1 ul #top4_GetInvolved { background: url(../../../images/GetInvolved/images/calendar_img_elderly.jpg) no-repeat;} #content_top #hc1 ul #top5_GetInvolved { background: url(../../../images/GetInvolved/images/calendar_img_bfw.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top1_GetInvolved { background: url(../../../images/GetInvolved/images/eng/calendar_img_30hf.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top2_GetInvolved { background: url(../../../images/GetInvolved/images/eng/calendar_img_sam.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top3_GetInvolved { background: url(../../../images/GetInvolved/images/eng/calendar_img_usedbook.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top4_GetInvolved { background: url(../../../images/GetInvolved/images/eng/calendar_img_elderly.jpg) no-repeat;} .en-gb #content_top #hc1 ul #top5_GetInvolved { background: url(../../../images/GetInvolved/images/eng/calendar_img_bfw.jpg) no-repeat;} /* Church */ #content_top #hc1 ul #top1-church { background: url(../../../images/Church/images/church_calendar_img_30hf.jpg) no-repeat;} #content_top #hc1 ul #top2-church { background: url(../../../images/Church/images/church_calendar_img_sam.jpg) no-repeat;} #content_top #hc1 ul #top3-church { background: url(../../../images/Church/images/church_calendar_img_usedbook.jpg) no-repeat;} #content_top #hc1 ul #top4-church { background: url(../../../images/Church/images/church_calendar_img_elderly.jpg) no-repeat;} #content_top #hc1 ul #top5-church { background: url(../../../images/Church/images/church_calendar_img_bfw.jpg) no-repeat;} /* Button CN */ #content_top ul {margin: 240px 0 0 0;padding: 0px; height: 30px; list-style: none;} #content_top ul.promobox li {width: 85px; padding: 0 0 0 20px; margin: 0px; float: left;} #content_top ul.promobox li a {cursor: pointer; display: block; height: 30px; width: 85px; margin: 0px;} #content_top ul.promobox li a:hover {cursor: pointer;display: block;height: 30px; width: 85px; margin: 0px;} /* Button 即時捐款 */ #content_top ul .btn_donation a {background:url(../images/PromoBox/buttons/btn_donation.jpg);} #content_top ul .btn_donation a:hover { background: transparent url(../images/PromoBox/buttons/btn_donation-hover.jpg);} .en-gb #content_top ul .btn_donation a {background:url(../images/eng/PromoBox/buttons/btn_donatenow.jpg);} .en-gb #content_top ul .btn_donation a:hover { background: transparent url(../images/eng/PromoBox/buttons/btn_donatenow-hover.jpg);} /* Button 參與活動 */ #content_top ul .btn_getinvolved a {background:url(../images/PromoBox/buttons/btn_getinvolved.jpg);} #content_top ul .btn_getinvolved a:hover { background: transparent url(../images/PromoBox/buttons/btn_getinvolved-hover.jpg);} .en-gb #content_top ul .btn_getinvolved a {background:url(../images/eng/PromoBox/buttons/btn_getinvolved.jpg);} .en-gb #content_top ul .btn_getinvolved a:hover { background: transparent url(../images/eng/PromoBox/buttons/btn_getinvolved-hover.jpg);} /* Button 列印表格 */ #content_top ul .btn_print a {background:url(../images/PromoBox/buttons/btn_print.jpg);} #content_top ul .btn_print a:hover {background: transparent url(../images/PromoBox/buttons/btn_print-hover.jpg);} .en-gb #content_top ul .btn_print a {background:url(../images/eng/PromoBox/buttons/btn_print.jpg);} .en-gb #content_top ul .btn_print a:hover {background: transparent url(../images/eng/PromoBox/buttons/btn_print-hover.jpg);} /* Button 其他捐款方法 */ #content_top ul .btn_dontationmethods a {background:url(../images/PromoBox/buttons/btn_dontationmethods.jpg);} #content_top ul .btn_dontationmethods a:hover {background: transparent url(../images/PromoBox/buttons/btn_dontationmethods-hover.jpg);} .en-gb #content_top ul .btn_dontationmethods a {background:url(../images/eng/PromoBox/buttons/btn_dontationmethods.jpg);} .en-gb #content_top ul .btn_dontationmethods a:hover {background: transparent url(../images/eng/PromoBox/buttons/btn_dontationmethods-hover.jpg);} /* Button 登記電郵 */ #content_top ul .btn_email a {background:url(../images/PromoBox/buttons/btn_email.jpg);} #content_top ul .btn_email a:hover {background: transparent url(../images/PromoBox/buttons/btn_email-hover.jpg);} .en-gb #content_top ul .btn_email a {background:url(../images/eng/PromoBox/buttons/btn_email.jpg);} .en-gb #content_top ul .btn_email a:hover {background: transparent url(../images/eng/PromoBox/buttons/btn_email-hover.jpg);} /* Button 即時助養 */ #content_top ul .btn_cs_online a {background:url(../images/PromoBox/buttons/btn_cs_online.jpg);} #content_top ul .btn_cs_online a:hover {background: transparent url(../images/PromoBox/buttons/btn_cs_online-hover.jpg);} .en-gb #content_top ul .btn_cs_online a {background:url(../images/eng/PromoBox/buttons/btn_cs_online.jpg);} .en-gb #content_top ul .btn_cs_online a:hover {background: transparent url(../images/eng/PromoBox/buttons/btn_cs_online-hover.jpg);} /* Button 即時助養 */ #content_top ul .btn_cs_online a {background:url(../images/PromoBox/buttons/btn_cs_online.jpg);} #content_top ul .btn_cs_online a:hover {background: transparent url(../images/PromoBox/buttons/btn_cs_online-hover.jpg);} .en-gb #content_top ul .btn_cs_online a {background:url(../images/eng/PromoBox/buttons/btn_cs_online.jpg);} .en-gb #content_top ul .btn_cs_online a:hover {background: transparent url(../images/eng/PromoBox/buttons/btn_cs_online-hover.jpg);} /* Button RSS訂閱 */ #content_top ul .btn_rss a {background:url(../images/PromoBox/buttons/btn_rss.jpg);} #content_top ul .btn_rss a:hover {background: transparent url(../images/PromoBox/buttons/btn_rss-hover.jpg);} .en-gb #content_top ul .btn_rss a {background:url(../images/eng/PromoBox/buttons/btn_rss.jpg);} .en-gb #content_top ul .btn_rss a:hover {background: transparent url(../images/eng/PromoBox/buttons/btn_rss-hover.jpg);} /* Button 關注我們 */ #content_top ul .btn_followus a {background:url(../images/PromoBox/buttons/btn_followus.jpg);} #content_top ul .btn_followus a:hover {background: transparent url(../images/PromoBox/buttons/btn_followus-hover.jpg);} .en-gb #content_top ul .btn_followus a {background:url(../images/eng/PromoBox/buttons/btn_followus.jpg);} .en-gb #content_top ul .btn_followus a:hover {background: transparent url(../images/eng/PromoBox/buttons/btn_followus-hover.jpg);} /* Button 禱告支持 */ #content_top ul .btn_prayer a {background:url(../images/PromoBox/buttons/btn_prayer.jpg);} #content_top ul .btn_prayer a:hover {background: transparent url(../images/PromoBox/buttons/btn_prayer-hover.jpg);} .en-gb #content_top ul .btn_prayer a {background:url(../images/eng/PromoBox/buttons/btn_prayer.jpg);} .en-gb #content_top ul .btn_prayer a:hover {background: transparent url(../images/eng/PromoBox/buttons/btn_prayer-hover.jpg);} /* Button 立即報名 (變營任務) */ #content_top ul .btn_register a {background:url(../images/PromoBox/buttons/btn_register.jpg);} #content_top ul .btn_register a:hover {background: transparent url(../images/PromoBox/buttons/btn_register-hover.jpg);} .en-gb #content_top ul .btn_register a {background:url(../images/eng/PromoBox/buttons/btn_register.jpg);} .en-gb #content_top ul .btn_register a:hover {background: transparent url(../images/eng/PromoBox/buttons/btn_register-hover.jpg);} /* Start Top Banner */ #content_top .content_top { margin:0; padding:0; height:300px; width:230px; float:left;border-width:0px;} #content_top .banner_ourwork { background: url(../images/PromoBox/ourwork_promo_box.jpg) no-repeat;} #content_top .banner_relief { background: url(../images/PromoBox/relief_promo_box.jpg) no-repeat;} #content_top .banner_advocacy { background: url(../images/PromoBox/advocacy_promo_box.jpg) no-repeat;} #content_top .banner_aids { background: url(../images/PromoBox/aids_promo_box.jpg) no-repeat;} #content_top .banner_cp { background: url(../images/PromoBox/cp_promo_box.jpg) no-repeat;} #content_top .banner_cs { background: url(../images/PromoBox/cs_promo_box.jpg) no-repeat;} #content_top .banner_getinvolved { background: url(../images/PromoBox/getinvolved_promo_box.jpg) no-repeat;} #content_top .banner_learn { background: url(../images/PromoBox/learn_promo_box.jpg) no-repeat;} #content_top .banner_change { background: url(../../../images/Learn/images/change_promo_box.jpg) no-repeat;} #content_top .banner_news { background: url(../images/PromoBox/news_promo_box.jpg) no-repeat;} #content_top .banner_church { background: url(../images/PromoBox/church_promo_box.jpg) no-repeat;} #content_top .banner_macau { background: url(../images/PromoBox/macau_promo_box.jpg) no-repeat;} #content_top .banner_visionfund { background: url(../images/PromoBox/vf_promo_box.jpg) no-repeat;} #content_top .banner_nutrition { background: url(../images/PromoBox/nutrition_promo_box.jpg) no-repeat;} #content_top .banner_wvp { background: url(../images/PromoBox/wvp_promo_box.jpg) no-repeat;} /* Start.en-gb English */ .en-gb #content_top .banner_ourwork { background: url(../images/eng/PromoBox/ourwork_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_relief { background: url(../images/eng/PromoBox/relief_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_advocacy { background: url(../images/eng/PromoBox/advocacy_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_aids { background: url(../images/eng/PromoBox/aids_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_cp { background: url(../images/eng/PromoBox/cp_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_cs { background: url(../images/eng/PromoBox/cs_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_getinvolved { background: url(../images/eng/PromoBox/getinvolved_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_learn { background: url(../images/eng/PromoBox/learn_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_change { background: url(../../../images/Learn/images/change_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_news { background: url(../images/eng/PromoBox/news_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_church { background: url(../images/eng/PromoBox/church_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_macau { background: url(../images/eng/PromoBox/macau_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_visionfund { background: url(../images/eng/PromoBox/vf_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_nutrition { background: url(../images/eng/PromoBox/nutrition_promo_box.jpg) no-repeat;} .en-gb #content_top .banner_wvp { background: url(../images/eng/PromoBox/wvp_promo_box.jpg) no-repeat;}