> Platform : Blogger >> Category : Magazine >> Homepage : https://squeeze-template.blogspot.com >> Version : 1.0.0 >> License : Free =========================================================== */ /* ==================== >> TABLE OF CONTENTS : ======================= 🔹 Variables 🔹 Normalize 🔹 Spinner 🔹 Fonts 🔹 OwlCarousel 🔹 Main 🔹 Widths 🔹 Framework 🔹 Header 🔹 Intro 🔹 Sidebar 🔹 Footer 🔹 Widgets 🔹 Pages (Common) 🔹 Homepage 🔹 Post Page 🔹 Error Page 🔹 Redirect Page 🔹 Archive Page 🔹 Authors Page 🔹 Shortcodes 🔹 Responsive */ /*================= 🔹 Variables ===================*/ /**/ /*================= 🔹 Normalize ===================*/ html{font-family:serif;line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a:focus,a:active{outline:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{max-width:100%;border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:serif;font-size:100%;line-height:1.15;margin:0}button,input{outline:none!important;overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}iframe{border:none} *,:before,:after{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box} /*================= 🔹 Fonts ===================*/ @font-face{font-family:'Cairo';font-style:normal;font-weight:400;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v3/SLXGc1nY6HkvalIkTpu0xg.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}@font-face{font-family:'Cairo';font-style:normal;font-weight:400;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v3/SLXGc1nY6HkvalIvTpu0xg.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Cairo';font-style:normal;font-weight:400;src:local(Cairo),local(Cairo-Regular),url(https://fonts.gstatic.com/s/cairo/v3/SLXGc1nY6HkvalIhTps.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Cairo';font-style:normal;font-weight:600;src:local('Cairo SemiBold'),local(Cairo-SemiBold),url(https://fonts.gstatic.com/s/cairo/v3/SLXLc1nY6Hkvalr-ao6O59ZMaA.woff2) format("woff2");unicode-range:U+0600-06FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE80-FEFC}@font-face{font-family:'Cairo';font-style:normal;font-weight:600;src:local('Cairo SemiBold'),local(Cairo-SemiBold),url(https://fonts.gstatic.com/s/cairo/v3/SLXLc1nY6Hkvalr-ao6F59ZMaA.woff2) format("woff2");unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:'Cairo';font-style:normal;font-weight:600;src:local('Cairo SemiBold'),local(Cairo-SemiBold),url(https://fonts.gstatic.com/s/cairo/v3/SLXLc1nY6Hkvalr-ao6L59Y.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /*================= 🔹 Main ===================*/ body{font-family:'Cairo',serif;font-size:14px;line-height:1.5em;visibility:visible!important;} body::-webkit-scrollbar{background-color:$(main.back);width:10px} body::-webkit-scrollbar-thumb{background:$(keycolor)} body::-moz-selection{background:$(keycolor);color:#FFF} body[data-boxed='true'] .main-container{max-width:$(content.width)} ::-moz-selection{background:$(keycolor);color:#FFF} ::selection{background:$(keycolor);color:#FFF} ul{list-style:none;padding:0;margin:0} p{line-height:2;font-size:12px;text-align:justify} a{text-decoration:none;color:inherit} .main-container{width:100%;margin:0 auto;background-color:$(main.back);-webkit-box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);-moz-box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)} .main-container:before,.main-container:after{content:'';display:block;height:3px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color))} .middle-content{overflow:hidden} .main-wrap{padding:0 $(main.padding)} #RecentPosts{margin-bottom:$(main.margin)} .side-$startSide{margin-bottom:$(main.margin)} body.no-sidebar .side-$startSide{float:none;width:100%} body.no-sidebar aside{display:none} .tempscheme{border-color:$(keycolor) $(footer.line) $(step.color) $(footer.text);float:$startSide;text-align:$endSide;color:$(keycolor);background-color:$(step.color)} /*================= 🔹 Widths ===================*/ .side-$startSide{width:-webkit-calc(100% - $(sidebar.width) - 2%);width:-moz-calc(100% - $(sidebar.width) - 2%);width:calc(100% - $(sidebar.width) - 2%);float:$startSide} aside{float:$endSide;width:$(sidebar.width)} .wrapper{max-width:$(content.width);margin:0 auto} header .color-wrap{background-color:$(menu.back)} #footer .color-wrap{position:relative;background-color:rgba(0,0,0,0.1)} /*================= 🔹 Framework ===================*/ /* ------- Quickedit ------ */ .quickedit:after{content:'\f0ad';position:absolute;font-family:fontawesome;color:#666;top:100%;$endSide:0;font-size:18px;z-index:5;opacity:.8} .quickedit:hover:after{-webkit-animation:quickedit .3s ease-in-out;-moz-animation:quickedit .3s ease-in-out;-o-animation:quickedit .3s ease-in-out;animation:quickedit .3s ease-in-out;opacity:1} @-webkit-keyframes quickedit { 50%{-webkit-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);transform:rotate(30deg)} } @-moz-keyframes quickedit { 50%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);transform:rotate(30deg)} } @-o-keyframes quickedit { 50%{-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);-o-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} } @keyframes quickedit { 50%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} 75%{-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg);-o-transform:rotate(-30deg);transform:rotate(-30deg)} 100%{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);-o-transform:rotate(30deg);transform:rotate(30deg)} } /* ------- Headlines ------ */ .headline{margin-bottom:15px;border-bottom:2px solid $(main.line)} .main-wrap aside .headline{margin-bottom:15px;border-bottom:2px solid $(aside.line)} #footer .headline{margin-bottom:15px;border-bottom:2px solid $(footer.line)} #LinkList303 .headline h6{margin-top:0} .headline h6{display:inline-block;margin:0 0 12px;font-size:17px;position:relative} .main-wrap .headline h6{color:$(main.title)} .main-wrap aside .headline h6{color:$(aside.title)} #footer .headline h6{color:$(footer.title)} .headline h6:after{content:"";height:2px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));position:absolute;top:33px;$endSide:0;$startSide:0;bottom:0} .headline a{color:$(main.text);float:$endSide;padding:5px 12px;font-size:12px;background-color:$(main.line);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;line-height:18px} /* ------ Read More ------ */ .read-more{display:inline-block;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));padding:5px 15px;font-size:14px;font-weight:700;color:$(grad.color);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px} .read-more:hover{padding:5px 25px} /* ------ Post Share ------ */ .post-share{float:$endSide} .post-share .share-icon{z-index:1;float:$endSide;width:31px;height:31px;line-height:31px;text-align:center;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);font-size:16px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer;position:relative} .post-share .share-icon:after{opacity:0;content:"";font-family:FontAwesome;border-width:5px;border-style:solid;position:absolute;top:11px;$endSide:100%} [dir='rtl'] .post-share .share-icon:after{border-color:transparent transparent transparent $(keycolor)} [dir='ltr'] .post-share .share-icon:after{border-color:transparent $(keycolor) transparent transparent} .post-share .share-icon.arrow:after{opacity:1} .post-share .share-menu{visibility:hidden;float:$endSide;margin-top:1px;margin-bottom:0;margin-$endSide:5px} .post-share .share-menu li{float:$endSide;opacity:0;margin-$endSide:5px} [dir='rtl'] .post-share .share-menu li{-webkit-transform:translateX(-30px);-ms-transform:translateX(-30px);-moz-transform:translateX(-30px);-o-transform:translateX(-30px);transform:translateX(-30px)} [dir='ltr'] .post-share .share-menu li{-webkit-transform:translateX(30px);-ms-transform:translateX(30px);-moz-transform:translateX(30px);-o-transform:translateX(30px);transform:translateX(30px)} .post-share .share-menu li i{width:27px;height:27px;line-height:27px;margin-top:1px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;color:#FFF} .post-share .share-menu li .fa-facebook{background-color:#3b5998} .post-share .share-menu li .fa-twitter{background-color:#1da1f2} .post-share .share-menu li .fa-pinterest-p{background-color:#dd4b39} .share-open.share-menu{visibility:visible} [dir] .share-open.share-menu li{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);-moz-transform:translateX(0);-o-transform:translateX(0);transform:translateX(0)} .share-open.share-menu li:nth-of-type(1){-webkit-transition:.4s linear;-o-transition:.4s linear;-moz-transition:.4s linear;transition:.4s linear} .share-open.share-menu li:nth-of-type(2){-webkit-transition:.3s linear;-o-transition:.3s linear;-moz-transition:.3s linear;transition:.3s linear} .share-open.share-menu li:nth-of-type(3){-webkit-transition:.2s linear;-o-transition:.2s linear;-moz-transition:.2s linear;transition:.2s linear} /* ------ Image Wrap ------ */ .img-wrap{display:block;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;overflow:hidden;position:relative} .img-wrap:hover img{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);-moz-transform:scale(1.1) rotate(3deg);-o-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)} .overlay{opacity:0;width:100%;height:100%;overflow:hidden;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));position:absolute;top:0;$endSide:0}{opacity:0;width:100%;height:100%;overflow:hidden;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:rgba(0,0,0,0.6);position:absolute;top:0;$endSide:0} .img-wrap:hover .overlay{opacity:.8} .details-on-img{position:absolute;top:0;$endSide:0;$startSide:0;bottom:0} .details-on-img .author-prof,.details-on-img .post-date{padding:0 4px;background:$(main.back);font-size:10px;-webkit-border-radius:1px;-moz-border-radius:1px;border-radius:1px;position:absolute;$startSide:-100%;z-index:2;-webkit-box-shadow: -2px 2px 10px -1px rgba(0,0,0,0.3);-moz-box-shadow: -2px 2px 10px -1px rgba(0,0,0,0.3);box-shadow: -2px 2px 10px -1px rgba(0,0,0,0.3)} .details-on-img .author-prof{color:$(keycolor)} .details-on-img .post-date{color:$(step.color)} .img-wrap .author-prof{top:30px;-webkit-transition:.4s linear;-o-transition:.4s linear;-moz-transition:.4s linear;transition:.4s linear} .img-wrap .post-date{top:55px;-webkit-transition:.6s linear;-o-transition:.6s linear;-moz-transition:.6s linear;transition:.6s linear} .img-wrap:hover .author-prof,.img-wrap:hover .post-date{$startSide:0} .img-wrap img{display:none;width:100%;height:100%} .details-on-img i{margin-$endSide:5px} .caption{padding:30px;background:-webkit-gradient(linear,$endSide top, $endSide bottom,from(transparent),color-stop(rgba(0,0,0,0.7)),to(#000));background:-webkit-linear-gradient(transparent,rgba(0,0,0,0.7),#000);background:-o-linear-gradient(transparent,rgba(0,0,0,0.7),#000);background:-moz-linear-gradient(transparent,rgba(0,0,0,0.7),#000);background:linear-gradient(transparent,rgba(0,0,0,0.7),#000);color:#FFF;position:absolute;bottom:0;$startSide:0;$endSide:0} aside .img-wrap:before,aside .img-wrap:after{display:none} /* ------ Social Colors ------ */ .social{font-size:0} .social li{display:inline-block;margin:0 2px} .social li i{color:#FFF;width:28px;height:28px;line-height:28px;margin-bottom:5px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;display:inline-block;text-align:center;font-size:16px} .social-sites .social li:hover{-webkit-animation:SocIcons .2s ease-in-out;-moz-animation:SocIcons .2s ease-in-out;-o-animation:SocIcons .2s ease-in-out;animation:SocIcons .2s ease-in-out} @-webkit-keyframes SocIcons { 50%{-webkit-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);transform:cale(1.5)} } @-moz-keyframes SocIcons { 50%{-webkit-transform:scale(0.7);-moz-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);-moz-transform:cale(1.5);transform:cale(1.5)} } @-o-keyframes SocIcons { 50%{-webkit-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);-o-transform:cale(1.5);transform:cale(1.5)} } @keyframes SocIcons { 50%{-webkit-transform:scale(0.7);-moz-transform:scale(0.7);-o-transform:scale(0.7);transform:scale(0.7)} 100%{-webkit-transform:scale(1.5);-moz-transform:cale(1.5);-o-transform:cale(1.5);transform:cale(1.5)} } .social .fa-facebook {background-color:#3b5998} .social .fa-twitter {background-color:#1da1f2} .social .fa-rss {background-color:#f26522} .social .fa-dribbble {background-color:#ea4c89} .social .fa-google-plus {background-color:#dd4b39} .social .fa-pinterest {background-color:#cc2127} .social .fa-linkedin {background-color:#0976b4} .social .fa-youtube {background-color:#e52d27} .social .fa-wordpress {background-color:#1081B1} .social .fa-digg {background-color:#476BA3} .social .fa-quora {background-color:#a82400} .social .fa-spotify {background-color:#1ed760} .social .fa-reddit {background-color:#ff4500} .social .fa-snapchat {background-color:#f5d602} .social .fa-drupal {background-color:#008BCA} .social .fa-github {background-color:#000000} .social .fa-flickr {background-color:#FF0084} .social .fa-tumblr {background-color:#304E6C} .social .fa-instagram {background-color:#7c38af;background: radial-gradient(circle at 0 130%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);} .social .fa-delicious {background-color:#DEDEDF} .social .fa-behance {background-color:#009fff} .social .fa-soundcloud {background-color:#FF5419} .social .fa-telegram {background-color:#32AEE1} .social .fa-website {background-color:#444444} .social .fa-google-play {background-color:#3d9dab} .fa-google-play:before{content:'\f04b'} .fa-website:before{content:"\f0ac"} /* ------ Label-Title ------ */ .label-title{padding:0 8px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));color:$(grad.color);font-size:12px;-webkit-border-radius:1.5px;-moz-border-radius:1.5px;border-radius:1.5px;position:absolute;top:10px;$startSide:10px;z-index:2} .img-wrap:hover .label-title{$startSide:-100%} .img-wrap .label-name{float:$startSide;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));padding:2px 10px;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;font-size:12px;margin-bottom:5px;color:$(grad.color);position:relative;$startSide:0} .img-wrap:hover .label-name{$startSide:-100%} /* ------ Ribble Button ------ */ .ribble{position:relative;overflow:hidden} .ribble b{position:relative;z-index:1;-webkit-transition:.6s ease-in-out;-o-transition:.6s ease-in-out;-moz-transition:.6s ease-in-out;transition:.6s ease-in-out} .ribble:hover{padding:5px 20px} .ribble:hover b{color:$(grad.color)} .ribble:before{content:'';background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));position:absolute;top:100%;$startSide:-200%;height:200%;width:200%;display:block;z-index:1;-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;-webkit-transform:scale(0);-ms-transform:scale(0);-moz-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transition:.5s ease-in-out;-o-transition:.5s ease-in-out;-moz-transition:.5s ease-in-out;transition:.5s ease-in-out} .ribble:hover:before{top:-25px;$startSide:-50px;-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} /* ------ Other ------ */ .blog-admin,#uds-searchControl,#ContactForm93{display:none} .clear-$endSide{display:block;height:1px;clear:$endSide} .clear{height:1px;clear:both;display:block} object{max-width:100%} .hide{display:none!important} :not(.notr),:not(.notr):before,:not(.notr):after{-webkit-transition:.3s ease-in-out;-o-transition:.3s ease-in-out;-moz-transition:.3s ease-in-out;transition:.3s ease-in-out} .post-body #ContactForm93{display:block} div#Tempnec{display:none!important} /*================= 🔹 Header ===================*/ header #top-bar{padding:0 $(main.padding);height:40px;line-height:40px;color:#FFF;position:relative} #head-sec{padding:$(main.margin) $(main.padding);min-height:120px;overflow:hidden} /* ------ Header Social ------ */ header #top-bar #LinkList301{max-width:30%;margin-$endSide:15px;float:$startSide;position:relative;height:40px} #LinkList301 .social-sites{margin-top:5px} #LinkList301 .social-sites li{vertical-align:top} /* ------ Header Pages List ------ */ header #top-bar #PageList301{float:$startSide;max-width:-webkit-calc(70% - 60px);max-width:-moz-calc(70% - 60px);max-width:calc(70% - 60px);height:40px} header #top-bar .menu li{float:$startSide;margin:8px 0} header #top-bar .menu li a{-webkit-transition:none;-o-transition:none;-moz-transition:none;transition:none;background:rgba(255,255,255,0.1);margin-$endSide:7px;font-size:12px;display:block;line-height:normal;padding:0 10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;font-weight:700;color:$(menu.text);line-height:2em} header #top-bar .menu li a:hover,header #top-bar .menu li.selected a{color:$(grad.color);background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color))} header #top-bar .menu-res{display:none} header #top-bar .menu-res i{display:block;width:30px;height:30px;line-height:30px;font-size:20px;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));color:$(grad.color);text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer;position:absolute;top:5px;$startSide:$(main.padding);z-index:2;cursor:pointer} nav.menu-res-wrap ul:before{content:"";border-width:8px;border-style:solid;border-color:transparent transparent $(menu.back);position:absolute;top:-14px;$startSide:10px;z-index:2} nav.menu-res-wrap ul{width:180px;top:50px;position:absolute;background-color:$(menu.back);$startSide:10px;padding:10px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;z-index:9999} nav.menu-res-wrap ul a{display:block;border-bottom:1px dotted rgba(255,255,255,0.2);color:$(menu.text);text-align:center} nav.menu-res-wrap ul li:last-of-type a{border-bottom:none} /* ------ Search Box ------ */ header #top-bar #HTML301{direction:ltr;min-width:200px;height:30px;position:absolute;$endSide:$(main.padding);top:0} header #top-bar .search form{direction:rtl;position:relative} header #top-bar .search form span{color:$(grad.color);background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));display:block;width:30px;height:30px;line-height:29px;font-size:18px;text-align:center;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;cursor:pointer;position:absolute;top:5px;$endSide:0;z-index:2} header #top-bar .search form span.open-search:after{opacity:1;$endSide:100%} header #top-bar .search input{font-family:inherit;-webkit-border-radius:0 1px 1px 0;-moz-border-radius:0 1px 1px 0;border-radius:0 1px 1px 0;height:30px;margin:5px 0;background-color:$(menu.back);color:#FFF;font-size:12px;border:none;outline:none;position:absolute;$endSide:30px;width:0} header #top-bar .search .open-search ~ input{padding:0 15px;width:100%} /* ------ Logo & AD ------ */ #Header1{width:290px;float:$startSide} #Header1 .headone{font-weight:700;display:block;margin:0 0 10px;font-size:35px;line-height:1em;text-align:center} #Header1 p{margin:0;font-size:12px;text-align:center;line-height:1.5em} #Header1 img{width:auto;max-width:100%;margin:0 auto;display:block} #HTML302{width:728px;float:$endSide;text-align:$endSide} /* ------ Main Menu ------ */ #menu-bar{clear:both;position:relative;margin-bottom:$(main.margin);padding:0 $(main.padding)} #LinkList302{height:58px;background-color:$(menu.back);position:relative} #LinkList302:before{content:'';display:block;height:3px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));position:absolute;width:100%;bottom:0;$startSide:0} #menu-bar .menu-bar ul li{float:$startSide} #menu-bar .menu-bar ul li>a{font-weight:700;display:block;width:100%;padding:17px 15px;color:$(menu.text);position:relative} #menu-bar .menu-bar li>a:hover{background-color:rgba(0,0,0,0.2);color:#FFF} #menu-bar .menu-bar ul li.drop-menu-st >a{padding-$endSide:30px} .menu-bar ul i{font-size:18px;display:inline-block;vertical-align:middle;margin-$endSide:10px} #menu-bar .home{white-space:nowrap;overflow:hidden;height:55px;line-height:25px;background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:#FFF!important;min-width:65px;max-width:65px} #menu-bar .home:hover{max-width:100%!important;padding-$startSide:40px} #menu-bar .home b{position:relative;$startSide:50px} #menu-bar .home:hover b{$startSide:0px} .home:before{font-weight:400;content:"\f015";font-family:FontAwesome;font-size:20px;position:absolute;$startSide:23px;text-indent:0;-webkit-transform:scale(2);-ms-transform:scale(2);-moz-transform:scale(2);-o-transform:scale(2);transform:scale(2);top:16px} #menu-bar .home:hover:before{$startSide:10px;-webkit-transform:scale(1);-ms-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);transform:scale(1)} /* ------ Sub Menu ------ */ #menu-bar .menu-bar li>ul li a{padding:12px 20px} #menu-bar .menu-bar li>ul li a:hover{background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:$(grad.color);padding-$startSide:30px} #menu-bar .menu-bar .drop-menu-st{position:relative;padding-bottom:5px} #menu-bar .menu-bar .drop-menu-st:after{content:"\f078";font-family:FontAwesome;font-size:10px;color:$(menu.text);position:absolute;top:18px;$endSide:10px} #menu-bar .menu-bar .drop-menu-st ul{display:none;width:200px;height:auto;background-color:$(menu.back);position:absolute;top:58px;z-index:10;-webkit-box-shadow:0 5px 5px 0 rgba(0,0,0,0.2);-moz-box-shadow:0 5px 5px 0 rgba(0,0,0,0.2);box-shadow:0 5px 5px 0 rgba(0,0,0,0.2)} #menu-bar .menu-bar .drop-menu-st:hover ul{display:block} #menu-bar .menu-bar .drop-menu-st ul li{float:none} /* ------ Responsive Menu ------ */ .menu-bar-res{display:none} .menu-bar-res .fa-bars{cursor:pointer;float:$endSide;color:$(grad.color);background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));height:55px;width:55px;text-align:center;font-size:26px;padding-top:16px} .res-home{display:none;float:$startSide;height:55px;width:110px;text-align:center;padding-top:17px;color:$(grad.color);background:-webkit-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-o-linear-gradient(to $endSide,$(keycolor),$(step.color));background:-moz-linear-gradient(to $endSide,$(keycolor),$(step.color));background:linear-gradient(to $endSide,$(keycolor),$(step.color));font-weight:700} .res-home:before{content:"\f015";font-family:FontAwesome;font-weight:400;font-size:24px;margin-$endSide:5px;display:inline-block;vertical-align:-2px} /*================= 🔹 Sidebar ===================*/ aside .widget{margin-bottom:$(main.margin)} /* ------ Social Widget ------ */ .social-counter .social{overflow:hidden;padding:$(main.padding);border:1px solid $(aside.line)} .social-counter li{float:$startSide;width:23.5%;margin:0 1%;min-width:55px} .social-counter li:nth-child(4n+1){margin-$startSide:0} .social-counter li:nth-child(4n+4){margin-$endSide:0} .social-counter li i{text-align:center;display:block;width:55px;height:55px;line-height:55px;margin:auto;color:#FFF;font-size:24px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transform:translate(0,5px);-ms-transform:translate(0,5px)} .social-counter li:hover i{-webkit-transform:translate(0);-ms-transform:translate(0)} .social-counter li div{color:$(aside.link);padding:5px 7px;margin-bottom:15px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background-color:$(aside.line);font-size:11px;text-align:center;position:relative} .social-counter li div:after{content:"";display:block;border-width:5px;border-style:solid;border-color:transparent transparent $(aside.line);position:absolute;top:-10px;$endSide:44%} /*================= 🔹 Footer ===================*/ #footer{position:relative;background:-webkit-linear-gradient(45deg,$(footer.back1),$(footer.back2));background:-o-linear-gradient(45deg,$(footer.back1),$(footer.back2));background:-moz-linear-gradient(45deg,$(footer.back1),$(footer.back2));background:linear-gradient(45deg,$(footer.back1),$(footer.back2));border-top:3px solid $(keycolor);clear:both} #footer-sections{font-size:0;padding:$(main.margin) $(main.padding)} #footer-sections .f-sec{display:inline-block;vertical-align:top;font-size:14px;width:-webkit-calc((100% - 90px)/4);width:-moz-calc((100% - 90px)/4);width:calc((100% - 90px)/4);margin-$endSide:30px} #footer-sections .f-sec:last-of-type{margin-$endSide:0} #footer-sections .f-sec .widget{margin-bottom:$(main.margin)} #footer-sections .f-sec .widget:last-of-type{margin-bottom:0} #footer-top-section:not(.no-items){padding:$(main.margin) 0;margin:0 $(main.padding);border-bottom:1px solid $(footer.line)} #footer-bottom-section:not(.no-items){padding:$(main.margin) 0;margin:0 $(main.padding);border-top:1px solid $(footer.line)} [data-boxed='false'] #footer-top-section:not(.no-items).wrapper{margin:$(main.margin) auto 0;padding:0 $(main.padding) $(main.margin)} [data-boxed='false'] #footer-bottom-section:not(.no-items).wrapper{margin:0 auto;padding:$(main.margin) $(main.padding)} #footer-top-section:not(.no-items).wrapper{padding:$(main.margin) 0;margin:0 $(main.padding)} #footer-cop-section{padding:5px $(main.padding);overflow:hidden;position:relative} /* ------ Copyrights ------ */ #HTML303{color:$(footer.link);margin-top:5px;float:$startSide} #HTML303 > *{vertical-align:middle;display:inline-block} #HTML303 a{color:$(keycolor)} #HTML303 a:hover{color:$(step.color);text-decoration:underline} #HTML303 > b{font-family:Tahoma;color:$(keycolor);font-size:15px} #LinkList304{float:$endSide;margin-top:5px} .credits span{margin-$endSide:5px} /* ------ Footer Scroll To Top ------ */ .scroll-top{background-color:$(footer.line);width:30px;height:30px;text-align:center;border-radius:100px;color:$(footer.text);padding-top:7px;cursor:pointer;position:absolute;left:calc(50% - 15px);top:-15px;z-index:1} .scroll-top:before{display:block} .scroll-top:hover{background:$(keycolor);color:#FFF} /*================= 🔹 Widgets ===================*/ .widget{position:relative} .widget-item-control{position:absolute;$endSide:0;top:100%;z-index:2;opacity:.7} .widget-item-control:hover{opacity:1} #top-bar .widget-item-control{top:0} .item-thumbnail img{display:none} /* ------ Email Subscription ------ */ aside .subscrib-sec p{margin:0 0 10px;color:$(aside.text);text-align:$startSide} #footer .subscrib-sec p{margin:0 0 10px;color:$(footer.text);text-align:$startSide} .subscrib-sec input[name="email"]{display:block;width:100%;padding:15px;margin:auto;line-height:0;outline:0;font-size:12px;border:0;border-radius:2px;direction:ltr;text-align:left} aside .subscrib-sec input[name="email"]{background-color:$(aside.line);color:$(aside.link)} #footer .subscrib-sec input[name="email"]{background-color:$(footer.line);color:$(footer.link)} .msg-send{font-family:inherit;display:block;padding:10px 30px 10px 20px;margin:5px auto 0;outline:0;border:0;border-radius:2px;background:-webkit-gradient(linear,$endSide,from($(keycolor)),to($(step.color)));background:linear-gradient(to $endSide,$(keycolor),$(step.color));color:#FFF;font-weight:700;cursor:pointer;position:relative;overflow:hidden;width:100%;color:$(grad.color)} .msg-send:hover{-webkit-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);box-shadow:0 3px 5px 0 rgba(0,0,0,0.4)} .msg-send:before{content:"\f1d8";font-family:FontAwesome;position:absolute;top:10px;$startSide:10px;z-index:1;font-weight:normal} .msg-send:hover input[type="submit"]{color:#2c2c2c} .ltr .msg-send:before{-webkit-transform:rotateY(180deg);transform:rotateY(180deg)} .msg-send:hover:before{-webkit-animation:subs .3s ease-in-out;animation:subs .3s ease-in-out} @-webkit-keyframes subs{ from{top:37px;$startSide:38px} to{top:10px;$startSide:10px} } @keyframes subs{ from{top:37px;$startSide:38px} to{top:10px;$startSide:10px} } /* ------ LinkList & PageList Widget ------ */ .LinkList .widget-content li a, *:not(header) .PageList .widget-content li a{display:block;padding:13px 0;font-size:14px} .LinkList .widget-content li:first-child a, *:not(header) .PageList .widget-content li:first-child a{padding-top:0} aside .LinkList .widget-content li a,aside .PageList .widget-content li a{color:$(aside.link);border-bottom:1px solid $(aside.line)} footer .LinkList .widget-content li a,footer .PageList .widget-content li a{color:$(footer.link);display:block;border-bottom:1px solid $(footer.line)} aside .LinkList .widget-content li a::before, footer .LinkList .widget-content li a::before{content:"\f08b"} *:not(header) .PageList .widget-content li a::before{content:"\f0f6"} aside .LinkList .widget-content li a::before, footer .LinkList .widget-content li a::before,*:not(header) .PageList .widget-content li a::before{display:inline-block;vertical-align:top;font-family:fontawesome;margin-$endSide:10px;font-size:20px} aside .LinkList .widget-content li a::before,aside .PageList .widget-content li a::before{color:$(aside.link)} footer .LinkList li a::before,footer .PageList .widget-content li a::before{color:$(footer.line)} aside .LinkList .widget-content li a:hover,#footer .LinkList .widget-content li a:hover, *:not(header) .PageList .widget-content li a:hover{color:$(keycolor);border-bottom:1px solid $(keycolor)} aside .LinkList .widget-content li a:hover::before,#footer .LinkList .widget-content li a:hover::before{-webkit-animation:LinkIcon 0.2s linear;animation:LinkIcon 0.2s linear;color:$(keycolor)} *:not(header) .PageList .widget-content li a:hover::before{color:$(keycolor)} @-webkit-keyframes LinkIcon{100%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}} @keyframes LinkIcon{100%{-webkit-transform:translateX(-5px);transform:translateX(-5px)}} /* ------ Popular Posts ------ */ .PopularPosts article{margin-bottom:15px;padding-bottom:15px;overflow:hidden} .PopularPosts article:last-of-type{margin-bottom:0;border-bottom:none} aside .PopularPosts article{border-bottom:1px solid $(aside.line)} #footer .PopularPosts article{border-bottom:1px solid $(footer.line)} .PopularPosts .post-date{display:inline-block;background-color:$(keycolor);text-align:$startSide;font-size:10px;color:$(grad.color);padding-$startSide:5px;padding-$endSide:10px;margin-bottom:5px} .PopularPosts .post-date i{background-color:rgba(0,0,0,0.2);font-size:12px;display:inline-block;vertical-align:middle;padding:5px;color:$(grad.color);margin-$endSide:5px} .PopularPosts .item-thumbnail{display:block;overflow:hidden;float:$startSide;width:72px;height:72px;margin-$endSide:15px;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px} .PopularPosts .item-thumbnail img{height:100%} .PopularPosts .item-thumbnail:hover img{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);-moz-transform:scale(1.1) rotate(3deg);-o-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)} .PopularPosts .post-title{overflow:hidden;margin:0 0 5px;font-weight:700;font-size:16px} aside .PopularPosts .post-title a{color:$(aside.link)} #footer .PopularPosts .post-title a{color:$(footer.link)} .PopularPosts .post-title a:hover{color:$(keycolor)} .snippet-item{font-size:12px;text-align:justify;line-height:1.5em;margin:0} aside .snippet-item{color:$(aside.text)} #footer .snippet-item{color:$(footer.text)} /* ------ Featured Post ------ */ .FeaturedPost h2{margin:0 0 5px 0;line-height:1.5em;font-size:18px} .FeaturedPost .item-thumbnail,.FeaturedPost .item-thumbnail img{display:block;text-align:center;margin:0 auto;width:100%} .FeaturedPost .item-thumbnail{min-height:150px;overflow:hidden;margin-bottom:5px} aside .FeaturedPost h2{color:$(aside.link)} footer .FeaturedPost h2{color:$(footer.link)} .widget.FeaturedPost h2:hover{color:$(keycolor)} aside .FeaturedPost p{color:$(aside.text)} footer .FeaturedPost p{color:$(footer.text)} /* ------ Archive Widget ------ */ .BlogArchive select{background:transparent;width:100%;outline:none;padding:5px 20px;margin:0 auto;display:block;font-family:inherit;font-size:12px} .BlogArchive select:focus{border:1px solid $(keycolor)} aside .BlogArchive select{border:1px solid $(aside.line);color:$(aside.link)} #footer .BlogArchive select{border:1px solid $(footer.line);color:$(footer.link)} /* Flat */ .flat .archivedate .post-count{font-style:normal;float:$endSide} aside .flat .archivedate i{color:$(aside.text)} #footer .flat .archivedate i{color:$(footer.text)} .BlogArchive .flat .archivedate a{display:block;padding:7px 2px} aside .BlogArchive .flat .archivedate a{color:$(aside.link);border-bottom:1px dotted $(aside.line)} footer .BlogArchive .flat .archivedate a{color:$(footer.link);border-bottom:1px dotted $(footer.line)} .BlogArchive .flat .archivedate a::before{color:$(step.color);display:inline-block;content:"\f08d";-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);font-family:fontawesome;margin-$endSide:10px;vertical-align:middle} .BlogArchive .flat .archivedate:hover a{color:$(keycolor);border-bottom:1px dotted $(step.color)} .BlogArchive .archivedate:hover a:before{color:$(keycolor)} /* Hierarchy */ .hierarchy .hierarchy{margin-$startSide:10px} aside .hierarchy-title{background:$(aside.line);margin-bottom:5px;padding:8px 15px} #footer .hierarchy-title{background:$(footer.line);margin-bottom:5px;padding:5px 20px} aside .hierarchy .post-count-link,aside .hierarchy ul.posts a{color:$(aside.link)} #footer .post-count-link,#footer .hierarchy ul.posts a{color:$(footer.link)} .hierarchy .post-count{float:$endSide;color:#999} aside .hierarchy .post-count{color:$(aside.text)} #footer .hierarchy .post-count{color:$(footer.text)} .hierarchy ul.posts{margin-$startSide:0} .hierarchy ul.posts a{font-size:12px;display:block;padding:5px 0} .hierarchy ul.posts a:hover{border-bottom:1px solid $(step.color);color:$(keycolor);padding-$startSide:5px} aside .hierarchy ul.posts a{border-bottom:1px solid $(aside.line)} #footer .hierarchy ul.posts a{border-bottom:1px solid $(footer.line)} /* ------ Label Widget ------ */ .cloud-label-widget-content{overflow:hidden} .label-size{float:$startSide;background:-webkit-linear-gradient(45deg,$(keycolor),$(step.color));background:-o-linear-gradient(45deg,$(keycolor),$(step.color));background:-moz-linear-gradient(45deg,$(keycolor),$(step.color));background:linear-gradient(45deg,$(keycolor),$(step.color));padding:7px 15px;margin-$endSide:7px;margin-bottom:7px;-webkit-border-radius:2px;-moz-border-radius:2x;border-radius:2px;font-size:14px;color:$(grad.color);font-weight:700} .label-size a::before{content:"\f02b";font-family:fontawesome;display:inline-block;vertical-align:top;margin-$endSide:5px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;margin-top:-4px;font-size:14px;padding-top:5px;text-align:center;font-weight:400} .label-size:hover{-webkit-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);-moz-box-shadow:0 3px 5px 0 rgba(0,0,0,0.4);box-shadow:0 3px 5px 0 rgba(0,0,0,0.4)} .list-label-widget-content a{display:block;padding:5px 0} .label-size .label-count{display:none} .label-size:hover a:before{-webkit-animation:label .3s ease-in-out;-moz-animation:label .3s ease-in-out;-o-animation:label .3s ease-in-out;animation:label .3s ease-in-out} @-webkit-keyframes label { 50%{-webkit-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);transform:rotate(-60deg)} } @-moz-keyframes label { 50%{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);transform:rotate(-60deg)} } @-o-keyframes label { 50%{-webkit-transform:rotate(60deg);-o-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);-o-transform:rotate(-60deg);transform:rotate(-60deg)} } @keyframes label { 50%{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);-o-transform:rotate(60deg);transform:rotate(60deg)} 100%{-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-o-transform:rotate(-60deg);transform:rotate(-60deg)} } aside .list-label-widget-content .label-name{color:$(aside.link);border-bottom:1px dotted $(aside.line)} #footer .list-label-widget-content .label-name{color:$(footer.link);border-bottom:1px dotted $(footer.line)} .list-label-widget-content .label-name::before{content:"\f07b";font-family:fontawesome;margin-$endSide:10px;display:inline-block;vertical-align:top;-webkit-transition:.3s ease-out;-o-transition:.3s ease-out;-moz-transition:.3s ease-out;transition:.3s ease-out;width:20px;font-size:18px;text-align:$endSide} aside .list-label-widget-content .label-name::before{color:$(aside.line)} footer .list-label-widget-content .label-name::before{color:$(footer.line)} .list-label-widget-content .label-name:hover::before{content:"\f07c";color:$(keycolor)} aside .list-label-widget-content .label-count{float:$endSide;color:$(aside.text)} #footer .list-label-widget-content .label-count{float:$endSide;color:$(footer.text)} aside .list-label-widget-content .label-name:hover{color:$(keycolor);border-bottom:1px dotted $(keycolor)} #footer .list-label-widget-content .label-name:hover

إياكم والوقوع في شرك التعمق والتنطع جريده الراصد 24

بقلم / محمـــد الدكـــروري









بقلم / محمـــد الدكـــروري 










اعلموا يا عباد الله أنه يستحب للمسلم أن يأكل في عيد الفطر قبل الخروج إلى الصلاة، بخلاف عيد الأضحى، وفي حديث أنس بن مالك رضي الله عنه عن النبي صلى الله عليه وسلم أنه كان يأكل سبع تمرات يوم الفطر قبل أن يخرج إلى المصلى، وكما أنه من السنة النبوية الشريفة أنه إذا صليت العيد أن ترجع في غير الطريق لما روي أن الملائكة تقف على أفواه السكك يوم العيد فيقولون للناس اخرجوا إلى رب كريم يغفر الذنب العظيم، ويحتمل أن يكون ليلقى قوما من المسلمين ما لقيهم فيدعو لهم ويدعون له، ويحتمل أن يكون للتفاؤل بتغير الحال، كأنه خرج وعليه ذنب ورجع مغفورا له، ولا بد من الحرص على إحياء يوم العيد بالزيارة وصلة الأرحام، والتهنئة للأقارب والإتصال بمن يسكنون بعيدا من الأهل والأقارب والأصدقاء، وقد روي عن أنس بن مالك رضي الله عنه يقول جاء ثلاثة رهط إلى بيوت أزواج النبي صلى الله عليه وسلم. 


يسألون عن عبادة النبي صلى الله عليه وسلم فلما أخبروا كأنهم تقالوها فقالوا وأين نحن من النبي صلى الله عليه وسلم؟ قد غفَر الله له ما تقدم من ذنبه وما تأخر، قال أحدهم أما أنا، فإني أُصلي الليل أبدا، وقال آخر أنا أصوم الدهر ولا أفطر، وقال آخر أنا أعتزل النساء فلا أتزوج أبدا، فجاء رسول الله صلى الله عليه وسلم فقال " أنتم الذين قلتم كذا وكذا؟ أما والله إني لأخشاكم لله وأتقاكم له، لكني أصوم وأُفطر، وأُصلي وأرقد، وأتزوج النساء، فمن رغب عن سنتي فليس مني" رواه البخاري ومسلم، ومعني الرهط هم الجماعة من ثلاثة إلى عشرة، وفي رواية مسلم قيل نفر، وهم من الثلاثة إلى التسعة، ومعني تقالوها أي عدوها قليلة، والمراد بذنبه ما فرط منه خلاف الأَولى بالنسبة إلى مقامه الكريم، وهو من قبيل حسنات الأبرار سيئات المقربين، وإذا كان العتاب على قدر المحبة، فإن الذنب على قدر المنزلة، وتطلق السّنة.


ويراد بها ما سنّه رسول الله صلى الله عليه وسلم لأمته مما يقابل الفرض، وتطلق ويراد بها السيرة والطريقة، وهذا هو المراد هنا، والرغبة هنا هو العدول والإعراض، فإن كان على وجه من التأويل عُذر صاحبه، ولكنه بسبيل الوقوع في شرك التعمق والتنطع، وإن كان عن بُغض وكراهية، فالله بريء من الكافرين ورسوله، أما بعد فاتقوا الله أيها الناس وأروه منكم كل خير، واحذروا التنكب عن طريقه أو البعد عن سبيله واعلموا أنكم إليه راجعون، ثم ينبئكم بما كنتم تعلمون، فقال تعالى " يا أيها الذين آمنوا اتقوا الله ولا تموتن إلا وأنتم مسلمون " ولقد أمر الله سبحانه وتعالى بالإحسان إلى الآخرين ومدّ يد العون لهم ونصحهم وتوجيههم والبذل والتضحية من أجلهم, في إشارة مهمة بأن الإسلام دين تعاون ولحمة، وأخوة وصحبة وإيثار وخدمة، حيث قال الله تعالى " وأحسنوا إن الله يحب المحسنين " 


وقال تعالى " وإذ أخذنا ميثاق بني إسرائيل لا تعبدون إلا الله وبالوالدين إحسانا وذي القربى واليتامى والمساكين وقولوا للناس حسنا" وكما قال تعالي " وقل لعبادي يقولوا التي هي أحسن " ويقول الله عز وجل كما جاء فى سورة البقرة " ولا تكتموا الشهاده ومن يكتمها فإنه آثم قلبه" وهى بمعنى إذا كتموها وهم يعلمون عليهم إثم، ولا يجوز لهم ذلك أما إن كان عندهم شك فلا حرج عليهم، إذا كان ما عندهم ضبط لا يجوز لهم الشهادة وهم غير ضابطين، فلا يجوز لهم يجاملون لأجل أحد له حق عليهم، أو لأنه صاحبهم فالشهادة أمرها عظيم فإذا كان عندهم علم وجب عليهم الأداء وحرم عليهم الكتمان، أما أن يشهدوا لأجل صاحبهم بالشبهة أو بالشك لا ما يجوز هذا، مثل ما يفعل بعض البدو وبعض الحضر أيضا ما دام صديقا له، يقول أنت صديقي وتعرف أني صادق اشهد لى.


هذا ما يجوز، ولو أنك أخوه ولو أنك صادق، ما يشهد إلا بالأمر الواضح وإلا شهادة الزور من أقبح الكبائر نعوذ بالله، فلا بد أن يشهد الإنسان بشيء يعلمه، أما قوله أنك تعرفني، وأنا الحمد لله صدوق، وأنا وأنا وأنا اشتريت من فلان كذا أو بعته كذا اشهد لي هذا ما يجوز، ولو أنه من الصحابة ما يجوز يشهد له بغير حق.


تعليقات
ليست هناك تعليقات
إرسال تعليق

إرسال تعليق