#cd-top-nav { float: right; margin-right: 14px; display: inline-block; width: calc(100% - 74px); height: 50px; } #cd-top-nav .rightDiv { float: right; display: inline-block; } #cd-top-nav .masLogo { float: right; width: 137px; height: 40px; background: url(../Images/masrawyLogo.webp?ver=00.00) center center no-repeat; background-size: 137px 40px; margin-top: 6px; opacity: 1; visibility: visible; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; } #cd-top-nav .rightDiv date, #cd-top-nav .rightDiv .octLogo { float: right; direction: rtl; color: #b8b8b8; font-size: 16px; margin-right: 14px; padding-right: 14px; border-right: 1px solid #474747; height: 50px; line-height: 3.4; opacity: 1; visibility: visible; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; } #cd-top-nav .rightDiv .octLogo { padding: 3px 14px 3px 0; line-height: 1 } #cd-top-nav .rightDiv .octLogo img { height: 44px; width: auto; border: none } .lateral-menu-is-open #cd-top-nav .masLogo { opacity: 0; visibility: hidden; } .lateral-menu-is-open #cd-top-nav date { opacity: 0; visibility: hidden; } #cd-top-nav > ul { float: left; margin-left: 84px; opacity: 1; -webkit-transition: all 0.5s ease-in-out 0s; transition: all 0.5s ease-in-out 0s; } .overflow-hidden #cd-top-nav > ul { opacity: 0 } #cd-top-nav > ul > li { float: right; width: 84px; height: 50px; border-left: 1px solid #474747; position: relative; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; } #cd-top-nav > ul > li:hover { background: #444; } #cd-top-nav > ul > li > a { color: #b8b8b8; font-size: 10px; display: block; text-align: center; width: 100%; height: 50px; padding-top: 5px } #cd-top-nav > ul > li:hover > a { color: #fff } #cd-top-nav > ul > li:first-child { width: 70px } /*#cd-top-nav > ul > li.thanawya{width:100px}*/ /*#cd-top-nav > ul > li.thanawya .firstLevel{width:100px}*/ /*#cd-top-nav ul li.thanawya .firstLevel .thanawyaIcon{background:url(../Images/thanawya.png) center center no-repeat;height:24px}*/ #cd-top-nav ul li .icon-newsPntr:before { content: "b"; display: block; font-size: 24px; line-height: 1; } #cd-top-nav ul li .icon-archive:before { content: "c"; display: block; font-size: 20px; line-height: 1; margin: 2px 0 } #cd-top-nav ul li .icon-prayerTms:before{content:"T";display:block;font-size:24px;line-height:1;} /*#cd-top-nav ul li .icon-prayerTms .mosqueImg { display: inline-block; width: 100%; text-align: center; } #cd-top-nav ul li .icon-prayerTms .mosqueImg img { display: inline-block; width: 24px; height: auto; border: 0; }*/ #cd-top-nav ul li .icon-currency:before { content: "d"; display: block; font-size: 24px; line-height: 1; } #cd-top-nav ul li .icon-gold:before { content: "2"; display: block; font-size: 24px; line-height: 1; } #cd-top-nav ul li .icon-vas:before { content: "I"; display: block; font-size: 24px; line-height: 1; } #cd-top-nav ul li .icon-ads:before { content: "n"; display: block; font-size: 24px; line-height: 1 } #cd-top-nav ul li > .icon-search:before { content: "f"; display: block; font-size: 22px; line-height: 1; margin: 1px 0 } /*#cd-top-nav ul li .weather.sunnyCloud{background:url(../Images/weather.png) 10px center no-repeat} #cd-top-nav ul li .weather.sunnyCloud:hover{background:url(../Images/weather.png) 10px center no-repeat #444}*/ #cd-top-nav ul li .weather > span { float: right; font-family: Arial; font-size: 20px; font-weight: bold; margin-right: 14px; line-height: 2.2; position: relative } #cd-top-nav ul li .weather > .icon-temp:before { content: "H"; font-size: 8px; position: absolute; right: -5px; top: 5px } #cd-top-nav > ul > li > a.icon-education:before { content: '6'; display: block; font-size: 24px; line-height: 1; } #cd-top-nav > ul > li > a.icon-cop:before { content: '^'; display: block; font-size: 24px; line-height: 1; } #cd-top-nav > ul > li > a.icon-market:before { content: '_'; display: block; font-size: 24px; line-height: 1; } #cd-top-nav > ul > li > a.icon-shift:before { content: 'C'; display: block; font-size: 24px; line-height: 1; color: #26ff00; } #cd-top-nav > ul > li > a.icon-masrawyTV:before { content: '|'; display: block; font-size: 24px; line-height: 1; } #cd-top-nav > ul > li > a.icon-ramadan:before { content: 'Y'; display: block; font-size: 24px; line-height: 1; } #cd-top-nav > ul > li > a.icon-Live:before { content: 'a'; display: block; font-size: 24px; line-height:1; } #cd-top-nav > ul > li > a.icon-Live:after { content: ""; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; opacity: 0.3; border-radius: 50%; background: #E03322; animation: liveFade 2s ease-in-out infinite; } #cd-top-nav > ul > li.new:after { position: absolute; top: 0; left: 0; content: "جديد"; background: #E03322; width: 25px; height: 14px; color: #fff; text-align: center; font-size: 10px; line-height: 1.4; } @keyframes liveFade { 0% { opacity: .2 } 50% { opacity: 1 } 100% { opacity: .2 } } #cd-top-nav ul li .weather .weatherIconHeader { background: transparent; background-size: 30px;display: inline-block; float: left; width: 30px; position: absolute; top: 50%; transform: translateY(-50%); left: 8px } #cd-top-nav ul li .weather .weatherIconHeader.visible.clearDay { background: url("../images/weatherSprite1.webp") 0 0 no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.clearNight { background: url(../images/weatherSprite1.webp) 0px -225px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.clouds { background: url(../images/weatherSprite1.webp) 0px -32px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.showerRain { background: url(../images/weatherSprite1.webp) 0 -130px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.rainDay { background: url(../images/weatherSprite1.webp) 0 -96px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.rainNight { background: url(../images/weatherSprite1.webp) 0 -130px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.drizzle { background: url(../images/weatherSprite1.webp) 0 -310px no-repeat; background-size: 33px; height: 25px; width: 35px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.mist { background: url(../images/weatherSprite1.webp) 0 -254px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.smoke { background: url(../images/weatherSprite1.webp) 0 -254px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.haze { background: url(../images/weatherSprite1.webp) 0 -254px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.dust { background: url(../images/weatherSprite1.webp) 0 -254px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.fog { background: url(../images/weatherSprite1.webp) 0 -254px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.sand { background: url(../images/weatherSprite1.webp) 0 -254px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.ash { background: url(../images/weatherSprite1.webp) 0 -254px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.squall { background: url(../images/weatherSprite1.webp) 0 -254px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.tornado { background: url(../images/weatherSprite1.webp) 0 -254px no-repeat; background-size: 30px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.snow { background: url(../images/weatherSprite1.webp) 0 -174px no-repeat; background-size: 33px; height: 30px; } #cd-top-nav ul li .weather .weatherIconHeader.visible.thunderstorm { background: url(../images/weatherSprite1.webp) 0 -194px no-repeat; background-size: 30px; height: 30px; } /** Sub Header Menu **/ #cd-top-nav ul > li > .subMenu { background: #444; width: 252px; height: 0; position: absolute; right: -1px; top: 50px; z-index: 999; visibility: hidden; opacity: 0; overflow: hidden; padding: 12px; -moz-transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -ms-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; transition: all 0.2s ease-in-out 0s; } #cd-top-nav ul > li:hover > .subMenu { z-index: 9999; visibility: visible; opacity: 1; transition-delay: 0s; height: 278px; overflow: visible; } #cd-top-nav ul > li:first-child > .subMenu { right: 0 } #cd-top-nav ul .subMenu .more { position: absolute; bottom: 0; left: 0; display: block; width: 100%; height: 40px; background: #333; font-size: 14px; text-align: center; color: #fff; float: right; line-height: 2.8 } #cd-top-nav ul .subMenu .icon-more:after { content: "q"; margin-right: 12px; font-size: 10px } #cd-top-nav ul .subMenu .more:hover { background: #1d1d1d } /** Thanawya Amma **/ #cd-top-nav ul > li > .subMenu.thanawya{display:none !important} #cd-top-nav ul .subMenu.thanawya .thanawyaCnts { display: inline-block; width: 100%; background: none; margin-bottom: 0; box-shadow: none } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts { display: inline-block; width: 100%; margin: 12px 0 0; font-size: 20px; color: #fff; text-align: center; } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon p { width: 100%; display: block; font-size: 26px; color: #fff; text-align: center; line-height: 2; margin-top: 30px; } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon p span { display: block; font-family: DroidKufiBold, Arial; color: #E03322; font-size: 36px } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .ttl { display: none } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .labelDiv { float: right; width: 100% } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .labelDiv label {font-size: 16px; color: #fff; direction: rtl; text-align: right; float: right; margin-bottom: 5px } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .labelDiv span { color: #E03322; float: right; margin-right: 2px; line-height: 1.5; } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber input { width: 100%; height: 40px !important; border: 1px solid #ddd; float: right; outline: none; padding: 12px; color: #666; font-size: 14px; } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .errorMsg { position: relative; float: right; right: 0; display: inline-block; font-size: 12px; color: #666; direction: rtl; text-align: right; visibility: hidden; margin-top: 5px } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber a { display: inline-block; width: 132px; background: #E03322; color: #fff; font-size: 16px; text-align: center; padding: 5px 0; margin: 5px calc((100% - 132px) / 2) 12px } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber a:hover { background: #E03322 } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .thanawyaSponsor { display: inline-block; width: 100% } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .thanawyaSponsor .cnts { display: inline-block; width: 166px; margin: 0 calc((100% - 166px) / 2); float: right; padding: 8px 0; } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .thanawyaSponsor .cnts .spnsr { float: right; margin-left: 24px; margin-top: 4px; color: #fff; font-size: 14px } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .thanawyaSponsor .cnts a { float: right; width: auto; background: none; color: none; padding: 0; margin: 0 } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.seatNumber .thanawyaSponsor .cnts img { width: auto; height: 27px; border: none } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon .thanawyaSponsor { display: inline-block; width: 100% } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon .thanawyaSponsor .cnts { display: inline-block; width: 166px; margin: 0 calc((100% - 166px) / 2); float: right; padding: 8px 0; } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon .thanawyaSponsor .cnts .spnsr { float: right; margin-left: 24px; margin-top: 4px; color: #fff; font-size: 14px } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon .thanawyaSponsor .cnts a { float: right; width: auto; background: none; color: none; padding: 0; margin: 0 } #cd-top-nav ul .subMenu.thanawya .thanawyaCnts .cnts.comingSoon .thanawyaSponsor .cnts img { width: auto; height: 27px; border: none } /** News Pointer **/ #cd-top-nav ul .subMenu.newsPntr ul { display: inline-block; width: 100%; height: 254px } #cd-top-nav ul .subMenu.newsPntr ul li { display: inline-block; width: 100%; height: 76px; border-bottom: 1px solid #555; float: right; } #cd-top-nav ul .subMenu.newsPntr ul li:last-child { border-bottom: none } #cd-top-nav ul .subMenu.newsPntr ul li .trendDiv { float: right; width: 40px; height: 60px; border: 1px solid #666; display: inline-block; margin: 8px 0 0 12px } #cd-top-nav ul .subMenu.newsPntr ul li .trendDiv .trendImg { width: 38px; height: 29px; display: block; text-align: center } #cd-top-nav ul .subMenu.newsPntr ul li .trendDiv .trendImg img { width: 18px; height: 18px; border: none; margin-top: 5px } #cd-top-nav ul .subMenu.newsPntr ul li .trendDiv .vstrs { text-align: center; background: #666; width: 38px; height: 29px; font-family: Arial; color: #1d1d1d; font-size: 12px; line-height: 2.8 } #cd-top-nav ul .subMenu.newsPntr ul li .news { float: right; display: block; color: #fff; font-size: 13px; width: calc(100% - 52px); padding: 0; text-align: right; height: 66px; overflow: hidden; margin-top: 6px; line-height: 1.6 } #cd-top-nav ul .subMenu.newsPntr ul li .news:hover { color: #666 } /** Archive **/ #cd-top-nav ul > li:hover > .subMenu.archive { height: auto } #cd-top-nav ul .subMenu.archive .ui-datepicker { width: 228px; height: auto; box-shadow: none } /** Prayer Times **/ #cd-top-nav ul .subMenu.prayerTms .cnts { display: inline-block; width: 100%; height: 254px; background: none; margin-bottom: 0; box-shadow: none } #cd-top-nav ul .subMenu.prayerTms .cnts date { display: inline-block; color: #fff; width: 100%; margin: 12px 0 0; font-size: 13px } #cd-top-nav ul .subMenu.prayerTms .cnts .location { display: inline-block; width: 100%; margin: 22px 0; color: #fff; font-size: 24px; } #cd-top-nav ul .subMenu.prayerTms .cnts .cntdwn { display: inline-block; width: 100% } #cd-top-nav ul .subMenu.prayerTms .cnts p { display: inline-block; width: 100%; color: #666; font-size: 14px; margin: 0 0 12px; text-align: center } #cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv { display: inline-block; width: 100%; } #cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv ul { display: inline-block; width: 100%; margin: 0 auto } #cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv ul li { float: left; width: 60px; height: 50px; text-align: center; color: #fff; font-family: Arial; font-size: 32px; position: relative; background: #4e4e4e; margin-right: 24px; line-height: 1.5 } #cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv ul li:last-child { margin-right: 0 } #cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv ul li:nth-child(1):after, #cd-top-nav ul .subMenu.prayerTms .cnts .timerDiv ul li:nth-child(2):after { content: ":"; background: none repeat scroll 0 0 rgba(0, 0, 0, 0); color: #fff; display: block; font-size: 28px; position: absolute; top: 3px; right: -16px } /** Weather **/ #cd-top-nav ul .subMenu.weather .wtrCnts { display: inline-block; width: 100%; height: 254px; background: none; margin-bottom: 0; box-shadow: none } #cd-top-nav ul .subMenu.weather .wtrCnts .location { display: inline-block; width: 100%; color: #fff; font-size: 24px; margin: 12px 0; text-align: right; } #cd-top-nav ul .subMenu.weather .wtrCnts .cntdwn { display: inline-block; width: 100% } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls { display: inline-block; width: 100%; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon { float: right; width: 70px; height: 70px; margin-left: 24px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .highTemp { float: right; position: relative; margin-left: 10px; width: 62px; height: 70px; text-align: center; font-family: arial; font-size: 48px; color: #fff; line-height: 1.8 } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .icon-high:before { content: "H"; font-size: 14px; position: absolute; right: -5px; top: 5px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .lowTemp { float: right; position: relative; width: 62px; height: 70px; text-align: center; font-family: arial; font-size: 32px; color: #666; line-height: 2.8 } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .icon-low:before { content: "H"; font-size: 10px; position: absolute; right: 6px; top: 18px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.clearDay { background: url("../images/weatherSprite1.webp") 0 0 no-repeat; height: 70px; margin: 2px 0 12px 24px; background-size: 70px } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.clearNight { background: url(../images/weatherSprite1.webp) 0px -429px no-repeat; height: 46px; margin: 14px 0 14px 24px; background-size: 56px } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.clouds { background: url(../images/weatherSprite1.webp) 0px -71px no-repeat; height: 46px; margin: 8px 0 18px 24px; background-size: 60px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.showerRain { background: url(../images/weatherSprite1.webp) 0 -263px no-repeat; height: 55px; margin: 8px 0 10px 24px; background-size: 60px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.rainDay { background: url(../images/weatherSprite1.webp) 0 -192px no-repeat; height: 65px; margin: 8px 0 8px 24px; background-size: 60px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.rainNight { background: url(../images/weatherSprite1.webp) 0 -263px no-repeat; height: 55px; margin: 8px 0 10px 24px; background-size: 60px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.drizzle { background: url(../images/weatherSprite1.webp) 0 -662px no-repeat; height: 46px; margin: 14px 0 14px 24px; background-size: 70px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.mist { background: url(../images/weatherSprite1.webp) 0 -600px no-repeat; height: 46px; margin: 14px 0 14px 24px; background-size: 70px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.smoke { background: url(../images/weatherSprite1.webp) 0 -600px no-repeat; height: 46px; margin: 14px 0 14px 24px; background-size: 70px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.haze { background: url(../images/weatherSprite1.webp) 0 -600px no-repeat; height: 46px; margin: 14px 0 14px 24px; background-size: 70px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.dust { background: url(../images/weatherSprite1.webp) 0 -600px no-repeat; height: 46px; margin: 14px 0 14px 24px; background-size: 70px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.fog { background: url(../images/weatherSprite1.webp) 0 -600px no-repeat; height: 46px; margin: 14px 0 14px 24px; background-size: 70px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.sand { background: url(../images/weatherSprite1.webp) 0 -600px no-repeat; height: 46px; margin: 14px 0 14px 24px; background-size: 70px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.ash { background: url(../images/weatherSprite1.webp) 0 -600px no-repeat; height: 46px; margin: 14px 0 14px 24px; background-size: 70px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.squall { background: url(../images/weatherSprite1.webp) 0 -600px no-repeat; height: 46px; margin: 14px 0 14px 24px; background-size: 70px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.tornado { background: url(../images/weatherSprite1.webp) 0 -600px no-repeat; height: 46px; margin: 14px 0 14px 24px; background-size: 70px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.snow { background: url(../images/weatherSprite1.webp) 0 -380px no-repeat; height: 58px; margin: 8px 0 8px 24px; background-size: 70px; } #cd-top-nav ul .subMenu.weather .wtrCnts .weatherDtls .weatherIcon.thunderstorm { background: url(../images/weatherSprite1.webp) 0 -390px no-repeat; height: 60px; margin: 8px 0 8px 24px; background-size: 60px; } #cd-top-nav ul .subMenu.weather .wtrCnts .windHum { display: inline-block; width: 100%; margin-top: 5px; } #cd-top-nav ul .subMenu.weather .wtrCnts .windHum > div { width: 100%; float: right; color: #666; font-size: 13px; display: inline-block } #cd-top-nav ul .subMenu.weather .wtrCnts .windHum > div span { color: #fff } #cd-top-nav ul .subMenu.weather .wtrCnts .windHum .hum { margin-bottom: 2px } #cd-top-nav ul .subMenu.weather .wtrCnts .windHum .icon-hum:before { content: "K"; float: right; margin-left: 5px; font-size: 16px } #cd-top-nav ul .subMenu.weather .wtrCnts .windHum .icon-wind:before { content: "L"; float: right; margin-left: 5px; font-size: 16px } .weatherDiv .temp .windHum { display: inline-block; width: 300px; float: left; margin-top: 30px; } .weatherDiv .temp .windHum > div { width: 100%; float: right; color: #c4d5df; font-size: 13px; display: inline-block; text-align: right } .weatherDiv .temp .windHum > div span { color: #fff } .weatherDiv .temp .windHum .hum { margin-bottom: 2px } .weatherDiv .temp .windHum .icon-hum:before { content: "K"; float: right; margin-left: 5px; font-size: 16px } .weatherDiv .temp .windHum .icon-wind:before { content: "L"; float: right; margin-left: 5px; font-size: 16px } /********** Weather Page **********/ .weatherDiv .weatherCnts { width: calc(100% - 320px); margin-left: 20px; padding: 0; background: none; box-shadow: none; margin-bottom: 0 } .weatherDiv .main { padding: 20px; background: url(../Images/weatherBg.jpg) no-repeat right center; background-size: cover } .weatherDiv .main .ttl { border-bottom: none; margin-bottom: 24px } .weatherDiv .ttl h1 { float: right; display: inline-block; padding: 0; font-family: DroidKufiBold, Arial; font-size: 20px; color: #fff; display: block; line-height: 1.6; background: none } .weatherDiv .ttl h1:after { display: none } .weatherDiv .main .location { display: inline-block; width: 100%; margin-bottom: 24px } .weatherDiv .main .cityDate { float: right; display: inline-block; margin-left: 20px; width: calc(100% - 320px) } .weatherDiv .main .cityDate .cityName { font-family: DroidKufiBold, Arial; font-size: 32px; color: #fff; direction: rtl; float: right } .weatherDiv .main .cityDate .cityName:after { content: "-"; display: inline-block; float: left; margin: 0 15px; font-size: 36px; } .weatherDiv .main .cityDate .countryName { font-family: DroidKufiBold, Arial; font-size: 32px; color: #fff; direction: rtl; float: right } .weatherDiv .main .cityDate date { float: right; display: inline-block; width: 100%; color: #fff; font-size: 16px; text-align: right; direction: rtl } /** Dropdown List **/ .weatherDiv .main .dropDownDiv { display: inline-block; float: left; width: 300px; margin-bottom: 0; padding: 0; background: none } .weatherDiv .main .wrapper-demo { display: inline-block; width: 100%; margin-bottom: 12px } .weatherDiv .main .wrapper-demo:last-child { margin-bottom: 0 } .weatherDiv .main .wrapperDropdown { position: relative; width: 100%; background: rgba(255, 255, 255, 0.3); cursor: pointer; padding: 6px 12px; border: none; z-index: 1; text-align: right; direction: rtl; font-size: 16px; color: #fff; outline: none; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out; } .weatherDiv .main .wrapper-demo:first-child .wrapperDropdown { z-index: 2 } .weatherDiv .main .icon-downArrow:before { content: "q"; position: absolute; left: 12px; line-height: 2.2; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); transform: rotate(-90deg) } .weatherDiv .main .wrapperDropdown:after { display: none } .weatherDiv .main .wrapperDropdown .dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: 0; border: 1px solid rgba(0,0,0,0.2); border-top: none; border-bottom: none; list-style: none; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; max-height: 0; overflow: hidden; } .weatherDiv .main .wrapperDropdown .dropdown li { padding: 0 10px; } .weatherDiv .main .wrapperDropdown .dropdown li a { display: block; text-decoration: none; color: #666; padding: 10px 0; transition: all 0.3s ease-out; border-bottom: 1px solid #e6e8ea; } .weatherDiv .main .wrapperDropdown .dropdown li:last-of-type a { border: none; } .weatherDiv .main .wrapperDropdown .dropdown li i { margin-right: 5px; color: inherit; vertical-align: middle; } .weatherDiv .main .wrapperDropdown .dropdown li:hover a { color: #1d1d1d; } .weatherDiv .main .wrapperDropdown.active { border-radius: 0; background: #eee; box-shadow: none; border-bottom: none; color: #1d1d1d } .weatherDiv .main .wrapperDropdown.active:after { border-color: #666 transparent; } .weatherDiv .main .wrapperDropdown.active .dropdown { border-bottom: 1px solid rgba(0,0,0,0.2); max-height: 400px; overflow: auto; } /** Temp **/ /** Weather Icons **/ .weatherDiv .main .weatherIconCnts { float: right; width: 110px; margin-left: 48px } .weatherDiv .main .weatherIcon { width: 110px; margin: 0 calc((100% - 110px) / 2) } .weatherDiv .main .weatherIcon.sunny { background: url("../images/weatherSprite.png") 0 0 no-repeat; height: 110px; margin-top: 2px } .weatherDiv .main .weatherIcon.cloudy { background: url("../images/weatherSprite.png") 0px -130px no-repeat; height: 86px; margin-top: 14px } .weatherDiv .main .weatherIcon.partlycloudy { background: url("../images/weatherSprite.png") 0 -236px no-repeat; height: 98px; margin-top: 8px } .weatherDiv .main .weatherIcon.patchylightdrizzle { background: url("../images/weatherSprite.png") 0 -354px no-repeat; height: 114px; margin-top: 0 } .weatherDiv .main .weatherIcon.lightdrizzle { background: url("../images/weatherSprite.png") 0 -488px no-repeat; height: 90px; margin-top: 12px } .weatherDiv .main .weatherIcon.lightsleetshowers { background: url("../images/weatherSprite.png") 0 -354px no-repeat; height: 114px; margin-top: 0 } .weatherDiv .main .weatherIcon.lightrainshower { background: url("../images/weatherSprite.png") 0 -354px no-repeat; height: 114px; margin-top: 0 } .weatherDiv .main .weatherIcon.patchylightrain { background: url("../images/weatherSprite.png") 0 -488px no-repeat; height: 90px; margin-top: 12px } .weatherDiv .main .weatherIcon.patchyrainnearby { background: url("../images/weatherSprite.png") 0 -354px no-repeat; height: 114px; margin-top: 0 } /** new Weather Icons **/ .weatherDiv .main .weatherIconCnts { float: right; width: 110px; margin-left: 48px } .weatherDiv .main .weatherIcon { width: 110px; margin: 0 calc((100% - 110px) / 2) } .weatherDiv .main .weatherIcon.clearDay { background: url("../images/weatherSprite1.webp") 0 0 no-repeat; height: 110px; margin-top: 2px } .weatherDiv .main .weatherIcon.clearNight { background: url("../images/weatherSprite1.webp") 0 -825px no-repeat; height: 110px; margin-top: 2px } .weatherDiv .main .weatherIcon.clouds { background: url("../images/weatherSprite1.webp") 0px -130px no-repeat; height: 86px; margin-top: 14px } .weatherDiv .main .weatherIcon.showerRain { background: url("../images/weatherSprite1.webp") 0 -475px no-repeat; height: 114px; margin-top: 0 } .weatherDiv .main .weatherIcon.rainDay { background: url("../images/weatherSprite1.webp") 0 -354px no-repeat; height: 114px; margin-top: 0 } .weatherDiv .main .weatherIcon.rainNight { background: url("../images/weatherSprite1.webp") 0 -475px no-repeat; height: 114px; margin-top: 0 } .weatherDiv .main .weatherIcon.drizzle { background: url("../images/weatherSprite1.webp") 0 -1028px no-repeat; height: 90px; margin-top: 12px } .weatherDiv .main .weatherIcon.mist { background: url("../images/weatherSprite1.webp") 0 -930px no-repeat; height: 110px; margin-top: 0 } .weatherDiv .main .weatherIcon.smoke { background: url("../images/weatherSprite1.webp") 0 -930px no-repeat; height: 110px; margin-top: 0 } .weatherDiv .main .weatherIcon.haze { background: url("../images/weatherSprite1.webp") 0 -930px no-repeat; height: 110px; margin-top: 0 } .weatherDiv .main .weatherIcon.dust { background: url("../images/weatherSprite1.webp") 0 -930px no-repeat; height: 110px; margin-top: 0 } .weatherDiv .main .weatherIcon.fog { background: url("../images/weatherSprite1.webp") 0 -930px no-repeat; height: 110px; margin-top: 0 } .weatherDiv .main .weatherIcon.sand { background: url("../images/weatherSprite1.webp") 0 -930px no-repeat; height: 110px; margin-top: 0 } .weatherDiv .main .weatherIcon.ash { background: url("../images/weatherSprite1.webp") 0 -930px no-repeat; height: 110px; margin-top: 0 } .weatherDiv .main .weatherIcon.squall { background: url("../images/weatherSprite1.webp") 0 -930px no-repeat; height: 110px; margin-top: 0 } .weatherDiv .main .weatherIcon.tornado { background: url("../images/weatherSprite1.webp") 0 -930px no-repeat; height: 110px; margin-top: 0 } .weatherDiv .main .weatherIcon.snow { background: url("../images/weatherSprite1.webp") 0 -578px no-repeat; height: 114px; margin-top: 0 } .weatherDiv .main .weatherIcon.thunderstorm { background: url("../images/weatherSprite1.webp") 0 -706px no-repeat; height: 114px; margin-top: 0 } .weatherDiv .temp { width: 100%; display: inline-block; margin-bottom: 24px } .weatherDiv .temp .icon-high { float: right; font-family: Arial; color: #fff; font-size: 82px; position: relative; padding-right: 24px; margin-left: 48px; margin-top: 10px } .weatherDiv .temp .icon-high:before { content: "H"; font-size: 24px; position: absolute; top: 0; right: 0 } .weatherDiv .temp .icon-low { float: right; font-family: Arial; color: #fff; font-size: 60px; position: relative; padding-right: 18px; opacity: 0.5; margin-top: 28px; } .weatherDiv .temp .icon-low:before { content: "H"; font-size: 18px; position: absolute; top: 0; right: 0 } /** 5 Days Weather **/ .weatherDiv .weatherTable { float: right; width: 100%; background: rgba(255,255,255,0.2) } .weatherDiv .weatherTable .title { display: inline-block; width: 100%; float: right; } .weatherDiv .weatherTable .title .name { float: right; width: calc((100% / 3) - 0.1px); font-family: DroidKufiBold, Arial; font-size: 14px; cursor: auto; color: #fff; padding: 8px 0; text-align: center; } .weatherDiv .weatherTable .title .name:last-child { border-left: none } .weatherDiv .weatherTable .title .name.active { color: #075C99 } .weatherDiv .weatherTable .title .name:nth-child(odd) { background: #005f92; } .weatherDiv .weatherTable .title .name:nth-child(even) { background: #2176a7 } .weatherDiv .weatherTable .allTimes { display: inline-block; width: 100%; float: right; } .weatherDiv .weatherTable .allTimes .dayTemp { float: right; width: calc((100% / 3) - 0.1px); height: 190px; padding: 16px 0; text-align: center; display: block; } .weatherDiv .weatherTable .allTimes .dayTemp:last-child { border-left: 0 } .weatherDiv .weatherTable .allTimes .dayTemp date { color: #1d1d1d; font-size: 14px; margin-bottom: 12px; display: inline-block } .weatherDiv .main .weatherDayIcon { width: 58px } /*.weatherDiv .main .weatherDayIcon.sunny{background: url("../images/weatherSprite.png") 0 0 no-repeat;height:58px;margin:2px calc((100% - 58px) / 2) 22px;background-size:58px} .weatherDiv .main .weatherDayIcon.cloudy{background: url("../images/weatherSprite.png") 0px -68px no-repeat;height:46px;margin:8px calc((100% - 58px) / 2) 28px;background-size:58px} .weatherDiv .main .weatherDayIcon.partlycloudy{background: url("../images/weatherSprite.png") 0 -124px no-repeat;height:52px;margin:5px calc((100% - 58px) / 2) 25px;background-size:58px} .weatherDiv .main .weatherDayIcon.patchylightdrizzle{background: url("../images/weatherSprite.png") 0 -184px no-repeat;height:62px;margin:0 calc((100% - 58px) / 2) 20px;background-size:58px} .weatherDiv .main .weatherDayIcon.lightdrizzle{background: url("../images/weatherSprite.png") 0 -256px no-repeat;height:48px;margin:7px calc((100% - 58px) / 2) 27px;background-size:58px} .weatherDiv .main .weatherDayIcon.lightsleetshowers{background: url("../images/weatherSprite.png") 0 -184px no-repeat;height:62px;margin:0 calc((100% - 58px) / 2) 20px;background-size:58px} .weatherDiv .main .weatherDayIcon.lightrainshower{background: url("../images/weatherSprite.png") 0 -184px no-repeat;height:62px;margin:0 calc((100% - 58px) / 2) 20px;background-size:58px} .weatherDiv .main .weatherDayIcon.patchylightrain{background: url("../images/weatherSprite.png") 0 -256px no-repeat;height:48px;margin:7px calc((100% - 58px) / 2) 27px;background-size:58px} .weatherDiv .main .weatherDayIcon.patchyrainnearby{background: url("../images/weatherSprite.png") 0 -184px no-repeat;height:62px;margin:0 calc((100% - 58px) / 2) 20px;background-size:58px} .weatherDiv .main .weatherDayIcon.thunderstorms{background: url("../images/weatherSprite.png") 0px -68px no-repeat;height:46px;margin:8px calc((100% - 58px) / 2) 28px;background-size:58px} */ .weatherDiv .main .weatherDayIcon.clearDay { background: url("../images/weatherSprite1.webp") 0 0 no-repeat; height: 58px; margin: 2px calc((100% - 58px) / 2) 22px; background-size: 58px } .weatherDiv .main .weatherDayIcon.clearNight { background: url(../images/weatherSprite1.webp) 0px -535px no-repeat; height: 60px; margin: 0px calc((100% - 70px) / 2) 15px; background-size: 70px; width: 70px; } .weatherDiv .main .weatherDayIcon.clouds { background: url("../images/weatherSprite1.webp") 0px -60px no-repeat; height: 62px; margin: 0px calc((100% - 58px) / 2) 15px; background-size: 58px } .weatherDiv .main .weatherDayIcon.showerRain { background: url("../images/weatherSprite1.webp") 0 -250px no-repeat; height: 62px; margin: 0px calc((100% - 58px) / 2) 15px; background-size: 58px } .weatherDiv .main .weatherDayIcon.rainDay { background: url("../images/weatherSprite1.webp") 0 -187px no-repeat; height: 62px; margin: 0px calc((100% - 58px) / 2) 15px; background-size: 58px } .weatherDiv .main .weatherDayIcon.rainNight { background: url("../images/weatherSprite1.webp") 0 -250px no-repeat; height: 62px; margin: 0px calc((100% - 58px) / 2) 15px; background-size: 58px } .weatherDiv .main .weatherDayIcon.drizzle { background: url(../images/weatherSprite1.webp) 0 -756px no-repeat; height: 52px; margin: 0 calc((100% - 80px) / 2) 24px; background-size: 80px; width: 80px; } .weatherDiv .main .weatherDayIcon.mist { background: url(../images/weatherSprite1.webp) 0 -552px no-repeat; height: 54px; margin: 0px calc((100% - 65px) / 2) 15px; background-size: 65px; width: 65px; } .weatherDiv .main .weatherDayIcon.smoke { background: url(../images/weatherSprite1.webp) 0 -552px no-repeat; height: 54px; margin: 0px calc((100% - 65px) / 2) 15px; background-size: 65px; width: 65px; } .weatherDiv .main .weatherDayIcon.haze { background: url(../images/weatherSprite1.webp) 0 -552px no-repeat; height: 54px; margin: 0px calc((100% - 65px) / 2) 15px; background-size: 65px; width: 65px; } .weatherDiv .main .weatherDayIcon.dust { background: url(../images/weatherSprite1.webp) 0 -552px no-repeat; height: 54px; margin: 0px calc((100% - 65px) / 2) 15px; background-size: 65px; width: 65px; } .weatherDiv .main .weatherDayIcon.fog { background: url(../images/weatherSprite1.webp) 0 -552px no-repeat; height: 54px; margin: 0px calc((100% - 65px) / 2) 15px; background-size: 65px; width: 65px; } .weatherDiv .main .weatherDayIcon.sand { background: url(../images/weatherSprite1.webp) 0 -552px no-repeat; height: 54px; margin: 0px calc((100% - 65px) / 2) 15px; background-size: 65px; width: 65px; } .weatherDiv .main .weatherDayIcon.ash { background: url(../images/weatherSprite1.webp) 0 -552px no-repeat; height: 54px; margin: 0px calc((100% - 65px) / 2) 15px; background-size: 65px; width: 65px; } .weatherDiv .main .weatherDayIcon.squall { background: url(../images/weatherSprite1.webp) 0 -552px no-repeat; height: 54px; margin: 0px calc((100% - 65px) / 2) 15px; background-size: 65px; width: 65px; } .weatherDiv .main .weatherDayIcon.tornado { background: url(../images/weatherSprite1.webp) 0 -552px no-repeat; height: 54px; margin: 0px calc((100% - 65px) / 2) 15px; background-size: 65px; width: 65px; } .weatherDiv .main .weatherDayIcon.snow { background: url(../images/weatherSprite1.webp) 0 -377px no-repeat; height: 58px; margin: 0px calc((100% - 70px) / 2) 15px; background-size: 70px; width: 70px } .weatherDiv .main .weatherDayIcon.thunderstorm { background: url(../images/weatherSprite1.webp) 0 -389px no-repeat; margin: 5px calc((100% - 70px) / 2) 15px; background-size: 60px; height: 62px; } .weatherDiv .dayTempDtls { display: inline-block } .weatherDiv .dayTempDtls .icon-high { float: right; font-family: Arial; color: #01699e; font-size: 36px; position: relative; margin-left: 24px; text-align: left } .weatherDiv .dayTempDtls .icon-high:before { content: "H"; font-size: 14px; position: absolute; top: -2px; right: -12px } .weatherDiv .dayTempDtls .icon-low { float: right; font-family: Arial; color: #666; font-size: 30px; position: relative; margin-top: 6px; text-align: right } .weatherDiv .dayTempDtls .icon-low:before { content: "H"; font-size: 10px; position: absolute; top: -2px; right: -10px } .weatherDiv .weatherTable .allTimes .dayTemp:nth-child(odd) { background: #f8f8f8 } .weatherDiv .weatherTable .allTimes .dayTemp:nth-child(even) { background: #fff } /*taboola*/ .tabolaaContainer{margin-bottom:0;display:inline-block;height:920px;width:100%;overflow:hidden;margin-bottom:15px} .tabolaaContainer .trc_elastic_thumbnails-a .videoCube{height:264px;background-color:#fff} .trc_rbox_container{direction:rtl} .tabolaaContainer .videoCube, .tabolaaContainer .trc_rbox_div{direction:rtl; float: right;} .tabolaaContainer .thumbnails-feed .trc_rbox_header, .tabolaaContainer .thumbnails-a .trc_rbox_header {display:inline-block ; float: left; font-family:DroidKufiBold,Arial!important;font-size:20px;margin-bottom:0 } .tabolaaContainer .trc_rbox_header_icon_div{float:left} .tabolaaContainer .trc_elastic_thumbnails-feed .videoCube{width:31.333%} .tabolaaContainer .tbl-feed-header{display:inline-block!important} .tabolaaContainer .thumbnails-a .trc_rbox_header_span::after{display:none} .tabolaaContainer .thumbnails-feed .videoCube .video-label-box .video-title, .tabolaaContainer .thumbnails-a .videoCube .video-label-box .video-title{ text-decoration:unset; font-family:DroidKufiLight, arial!important; font-size: 14px; margin-bottom: 10px; line-height: 1.5;font-weight:400 } .tabolaaContainer .videoCube a.video-cta-style .video-label-flex-cta-item{ font-family:DroidKufiLight, arial!important; font-size:16px; margin-bottom:20px } .tabolaaContainer .tbl-feed-container .videoCube .video-cta-href:not(.app-install-child) button.video-cta-button{ font-family: DroidKufiLight, arial !important; font-size: 11px; color: #000 !important; } .tabolaaContainer .videoCube a.video-cta-style .video-branding-flex-cta-item{ font-family: DroidKufiLight, arial !important; } .tabolaaContainer .thumbnails-feed .syndicatedItem .video-label-box{background-color:#fff} @media screen and (min-width: 0px) and (max-width: 480px) { .tabolaaContainer .trc_elastic_thumbnails-feed .videoCube { width: 97.99%; } } @media screen and (min-width:1360px) and (max-width:1680px){ .tabolaaContainer{height:820px} .tabolaaContainer .trc_elastic_thumbnails-a .videoCube{height:231px} } @media screen and (min-width:1280px) and (max-width:1359px){ .tabolaaContainer{height:765px} .tabolaaContainer .trc_elastic_thumbnails-a .videoCube{height:230px} } @media screen and (min-width:1024px) and (max-width:1279px){ .tabolaaContainer{height:645px} .tabolaaContainer .trc_elastic_thumbnails-a .videoCube { height: 176px; } } @media screen and (min-width:900px) and (max-width:1023px){ .tabolaaContainer{height:946px} } @media screen and (min-width:768px) and (max-width:900px){ .tabolaaContainer{height:850px} } @media screen and (min-width:320px) and (max-width:767px){ .taboolaDiv{padding:0 10px} .tabolaaContainer{ height: 2200px; width: 340px; margin: 0 calc((100% - 340px ) /2) 20px; float: right;padding: 10px 30px 0;overflow-y: auto; background: #fff;} .tabolaaContainer .trc_elastic_thumbnails-a .videoCube{height:auto} } .weatherDiv .listingMoreSer{float:left} @media screen and (min-width: 0px) and (max-width: 480px) { .tabolaaContainer .trc_elastic_thumbnails-feed .videoCube { width: 97.99%; } } @media screen and (min-width:1360px) and (max-width:1439px) { .weatherDiv .temp .windHum { width: 125px } } @media screen and (min-width:1280px) and (max-width:1359px) { .weatherDiv .temp .windHum { width: 125px } } @media screen and (min-width:1152px) and (max-width:1279px) { .weatherDiv .temp .windHum { width: 125px } } @media screen and (min-width:1024px) and (max-width:1151px) { .weatherDiv .temp .windHum { width: 100%; float: right } .weatherDiv .main .dropDownDiv { width: 100%; margin-bottom: 24px } .weatherDiv .main .cityDate { width: 100% } } @media screen and (min-width:1024px) and (max-width:1230px) { .weatherDiv .dayTempDtls .icon-high { font-size: 28px; margin-left: 16px; } .weatherDiv .dayTempDtls .icon-high:before { font-size: 12px; } .weatherDiv .dayTempDtls .icon-low { font-size: 20px } .weatherDiv .dayTempDtls .icon-low:before { font-size: 8px; } } @media screen and (min-width:1152px) and (max-width:1359px) { .weatherDiv .main .dropDownDiv { width: 100%; margin-bottom: 24px } .weatherDiv .main .cityDate { width: 100% } } @media only screen and (max-width: 1023px) { .weatherDiv .weatherCnts { width: 100%; margin-left: 0 } .tabolaaContainer .thumbnails-feed .trc_rbox_header{padding-right:10px} } @media screen and (min-width:320px) and (max-width:767px) { .weatherDiv .main { padding: 24px 10px } .weatherDiv .main .ttl { margin-bottom: 12px } .weatherDiv .main .wrapperDropdown { font-size: 13px } .weatherDiv .main .location { margin-bottom: 12px } .weatherDiv .main .cityDate .cityName { font-size: 20px } .weatherDiv .main .cityDate .cityName:after { font-size: 20px } .weatherDiv .main .cityDate .countryName { font-size: 20px } .weatherDiv .main .cityDate date { font-size: 14px } .weatherDiv .main .dropDownDiv { width: 100%; margin-bottom: 24px } .weatherDiv .main .cityDate { width: 100%; margin-left: 0 } .weatherDiv .cntdwn { width: 100%; margin: 0 0 24px 0 } .weatherDiv .mainTable .weatherTable { width: 100% } .weatherDiv .mainTable .weatherTable .title .name { font-size: 12px } .weatherDiv .mainTable .weatherTable .allTimes .time { font-size: 16px } .weatherDiv .mainTable .weatherTable .allTimes .time span { font-size: 14px } .weatherDiv .main .weatherIconCnts { margin-left: 15px } .weatherDiv .temp .icon-high { font-size: 48px; margin-left: 24px; margin-top: 30px; } .weatherDiv .temp .icon-high:before { top: -10px; font-size: 18px; right: 5px } .weatherDiv .temp .icon-low { font-size: 36px; margin-top: 40px; } .weatherDiv .temp .icon-low:before { top: -8px; font-size: 12px; right: 8px } .weatherDiv .temp .windHum { width: 100%; float: right; margin-top: 0 } .weatherDiv .temp { margin-bottom: 15px } .weatherDiv .main .weatherIcon { width: 90px; margin: 0 calc((100% - 90px) / 2); } .weatherDiv .main .weatherIcon.sunny { background: url("../images/weatherSprite.png") 0 10px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.cloudy { background: url(../images/weatherSprite.png) 0px -100px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.partlycloudy { background: url("../images/weatherSprite.png") 0 -186px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.patchylightdrizzle { background: url("../images/weatherSprite.png") 0 -284px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.lightdrizzle { background: url("../images/weatherSprite.png") 0 -390px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.lightsleetshowers { background: url("../images/weatherSprite.png") 0 -284px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.lightrainshower { background: url("../images/weatherSprite.png") 0 -284px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.patchylightrain { background: url("../images/weatherSprite.png") 0 -390px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.patchyrainnearby { background: url("../images/weatherSprite.png") 0 -284px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.clearDay { background: url("../images/weatherSprite1.webp") 0 9px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.clearNight { background: url("../images/weatherSprite1.webp") 0 -672px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.clouds { background: url("../images/weatherSprite1.webp") 0px -100px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.showerRain { background: url("../images/weatherSprite1.webp") 0 -384px no-repeat; background-size: 90px; height: 100px } .weatherDiv .main .weatherIcon.rainDay { background: url("../images/weatherSprite1.webp") 0 -282px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.rainNight { background: url("../images/weatherSprite1.webp") 0 -384px no-repeat; background-size: 90px; height: 100px } .weatherDiv .main .weatherIcon.drizzle { background: url("../images/weatherSprite1.webp") 0 -837px no-repeat; background-size: 90px; } .weatherDiv .main .weatherIcon.mist { background: url("../images/weatherSprite1.webp") 0 -761px no-repeat; background-size: 90px; height: 80px } .weatherDiv .main .weatherIcon.smoke { background: url("../images/weatherSprite1.webp") 0 -761px no-repeat; background-size: 90px; height: 80px } .weatherDiv .main .weatherIcon.haze { background: url("../images/weatherSprite1.webp") 0 -761px no-repeat; background-size: 90px; height: 80px } .weatherDiv .main .weatherIcon.dust { background: url("../images/weatherSprite1.webp") 0 -761px no-repeat; background-size: 90px; height: 80px } .weatherDiv .main .weatherIcon.fog { background: url("../images/weatherSprite1.webp") 0 -761px no-repeat; background-size: 90px; height: 80px } .weatherDiv .main .weatherIcon.sand { background: url("../images/weatherSprite1.webp") 0 -761px no-repeat; background-size: 90px; height: 80px } .weatherDiv .main .weatherIcon.ash { background: url("../images/weatherSprite1.webp") 0 -761px no-repeat; background-size: 90px; height: 80px } .weatherDiv .main .weatherIcon.squall { background: url("../images/weatherSprite1.webp") 0 -761px no-repeat; background-size: 90px; height: 80px } .weatherDiv .main .weatherIcon.tornado { background: url("../images/weatherSprite1.webp") 0 -761px no-repeat; background-size: 90px; height: 80px } .weatherDiv .main .weatherIcon.snow { background: url("../images/weatherSprite1.webp") 0 -473px no-repeat; background-size: 90px; height: 100px } .weatherDiv .main .weatherIcon.thunderstorm { background: url("../images/weatherSprite1.webp") 0 -573px no-repeat; background-size: 90px; } .weatherDiv .weatherTable .title .name { width: calc(100% / 3); font-size: 11px } .weatherDiv .weatherTable .allTimes .dayTemp date { font-size: 13px; line-height: 1.5 } .weatherDiv .weatherTable .allTimes .dayTemp { width: calc(100% / 3); padding: 10px; height: 180px } /*.weatherDiv .dayTempDtls{width:100%}*/ .weatherDiv .dayTempDtls .icon-high { font-size: 28px; float: right; margin-left: 8px; } .weatherDiv .dayTempDtls .icon-high:before { font-size: 12px; position: relative; top: -14px; right: 0 } .weatherDiv .dayTempDtls .icon-low { font-size: 18px; float: left } .weatherDiv .dayTempDtls .icon-low:before { font-size: 8px; position: relative; top: -10px; right: 0 } }