/* html5doctor.com Reset Stylesheet v1.6.1 Last Updated: 2010-09-17 Author: Richard Clark - http://richclarkdesign.com */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; } body { line-height:1; } article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } nav ul { list-style:none; } blockquote, q { quotes:none; } blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; } a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent; } /* change colours to suit your needs */ ins { background-color:#ff9; color:#000; text-decoration:none; } /* change colours to suit your needs */ mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; } del { text-decoration: line-through; } abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help; } table { border-collapse:collapse; border-spacing:0; } /* change border colour to suit your needs */ hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0; } input, select { vertical-align:middle; } /*----------------------------- CSS reset---------------------------*/ @font-face { font-family: 'BTabassom'; src: url('http://bayanbox.ir/download/7006296894591433635/BTabassom.eot'); src: url('http://bayanbox.ir/download/7006296894591433635/BTabassom.eot?#iefix') format('embedded-opentype'), url('http://bayanbox.ir/download/5190183465716685711/BTabassom.woff') format('woff'), url('http://bayanbox.ir/download/3768837328233939785/BTabassom.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'yekan'; src: url('//cdn.bayan.ir/blog/templates/shared/fonts/BYekan.woff?download') format('woff'); font-weight: normal; font-style: normal; } /* @font-face { font-family: 'Yekan'; src: url('http://bayanbox.ir/download/5791012487578671631/Yekan.eot?download'); src: url('http://bayanbox.ir/download/5791012487578671631/Yekan.eot?download') format('embedded-opentype'), url('http://bayanbox.ir/download/2036923884759370043/Yekan.woff?download') format('woff'), url('http://bayanbox.ir/download/1097485728367559037/Yekan.ttf?download') format('truetype'), url('http://bayanbox.ir/download/4905926247296420709/Yekan.svg?download') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Yekan'; src: url('http://bayanbox.ir/download/5791012487578671631/Yekan.eot?-wwn5ej'); src: url('http://bayanbox.ir/download/5791012487578671631/Yekan.eot?#iefix-wwn5ej') format('embedded-opentype'), url('http://bayanbox.ir/download/2036923884759370043/Yekan.woff?-wwn5ej') format('woff'), url('http://bayanbox.ir/download/1097485728367559037/Yekan.ttf?-wwn5ej') format('truetype'), url('http://bayanbox.ir/download/4905926247296420709/Yekan.svg?-wwn5ej#icomoon') format('svg'); font-weight: normal; font-style: normal; } */ body { background: #62bc98 url("http://bayanbox.ir/download/7051273193216955915/groovepaper-1.png"); font-family: BKoodak, 'yekan', "tahoma", "arial", "Times New Roman", Times, Arial, serif, sans-serif, "Open Sans"; font-size: 14px; direction: rtl; text-align: right; } .main { width: 1000px; margin: 0 auto; } a { color: #ffffff; /*color: #2ebaae;*/ text-decoration: none; } a:hover { color: #6dc8a4; } .clear { clear: both; } .p20 { padding: 20px; } ul { list-style-type: none; } *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [class^="icon-"], [class*=" icon-"] { font-family: FontAwesome; font-weight: normal; font-style: normal; text-decoration: inherit; -webkit-font-smoothing: antialiased; } article div.post .top-post h2, article div.post .top-post h1,article div.post .top-post .like-it, a, div#mini-slider-box .entry-thumb img,div#blog-info-box img,.aside .aside-content ul li:hover a::before{ transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } /* div#mini-slider-box .entry-thumb img:hover,div#blog-info-box img:hover { ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } .icon-header-aside { float: left; margin-left: 3px; color: #0C7F76; font-size: 15px !important; } */ /*------------------- General style -----------------*/ section { background: url("http://bayanbox.ir/view/5400295388072325742/bg-section.jpg") border-box content-box fixed; background-position: 0% 0%; background-size: 100% 507px; width: 100%; min-height: 500px; max-width: 100%; min-width: 1025px; } section .title-blog-top h2 { padding: 11% 20% 0 0; } section .title-blog-top h2 a { color: #fff; font-family: BTabassom; font-size: 37px; font-weight: bold; } section .title-blog-top h2 a:hover { color: #6dc8a4; } section .description-blog { padding: 2% 20% 0 0; } section .description-blog h3 { /*background: rgba(255,255,255,0.2);*/ color: #fff; font-family: 'Yekan'; font-size: 14px; } .header-top { background: rgba(0, 0, 0, 1); height: 40px; width: 100%; min-width: 1025px; } .header-top .title-blog-bottom { float: right; margin: 0 20px 0 200px; } .header-top .title-blog-bottom a { padding: 7px 20px 7px 20px; display: inline-block; color: white; font-size: 20px; font-family: "B Yekan"; } .header-top .title-blog-bottom a:hover { color: #6dc8a4; } .header-top .menu-top { float: right; } .header-top .menu-top ul li { display: inline-block; } .header-top .menu-top ul li a { display: inline-block; padding: 8px 20px; margin-left: 4px; margin-top: 5px; font-weight: bold; } .header-top .menu-top ul li a:hover,.menu-top ul li .selected { background: #64BC99 url("http://bayanbox.ir/download/7051273193216955915/groovepaper-1.png"); color: #000000; font-weight: bold; } /* -------------------Content ------------------------- */ .content { float: right; width: 65%; margin: 25px 10px 20px 0; } article.post { background: #000; border-radius: 3px; margin: 0px 0px 35px 0; position: relative; float: right; width: 100%; } article.post:before, article.post:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width: 300px; background: #777; box-shadow: 0 15px 10px #006B40; transform: rotate(-3deg); } article.post:after { transform: rotate(3deg); right: 10px; left: auto; } article .top-post { padding: 8px 20px 0 0; float: right; } article .top-post .title-post h2 a{ color: white; font-size: 26px; font-family: "BTabassom"; } article .top-post .title-post h2 a:hover { color: #7BD8B3; } article .top-post ul.info-post { color: #c5c5c5; font-size: 10px; margin-top: 12px; } article .top-post ul.info-post .author img { width: 20px; border-radius: 4px; } article .top-post ul.info-post .author span { vertical-align: 5px; margin-right: 4px; } article .top-post ul.info-post .date { vertical-align: 5px; } article .top-post ul.info-post .rate-box { vertical-align: 4px; } article .top-post ul.info-post .rate-box .rate-counter { padding-left: 2px; } .rate-button-box.rated .fa-heart, .rate-button-box.rated .rate-counter { color: #79FFC9; } .rate-button-box.rated { font-size: 10px; } article .top-post ul.info-post .comment { vertical-align: 4px; margin-right: 11px; font-size: 10px; } article .top-post ul.info-post .comment span { padding-left: 3px; } article .top-post ul.info-post li { display: inline-block; margin-left:12px; } article .main-post { padding: 12px 20px 12px 20px; text-align: justify; color: white; line-height: 1.3em; font-size: 13px; } article .main-post img { max-width: 100%; height: inherit; } article .main-post a { color: #80FFCC; } article .main-post a:hover { color: #fff; } .footer-post { float: left; text-align: left; margin: 0 0 10px 20px; display: inline-block; } .footer-post .read-more a { font-size: 11px; } ::selection { background: rgb(110, 190, 158); color: #fff; text-shadow: none; } /*-------------- tag & category ---------------*/ .tag-in-content span a,.category-post a{ color: #fff; margin-right: 1px; padding: 2px 4px; font-size: 10px; display: inline-block; /* background: rgb(241, 241, 241) url(//bayanbox.ir/view/7091729675305810205/txr3.png); */ margin-top: 4px; margin-left: 0px; border-radius: 2px; position: relative; } .tag-in-content span a,.category-post a { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .tag-in-content span a:hover,.category-post a:hover { background: #0A9C90; color: white; } div.post .tag-post,.category-post .category { width: 57px; font-size: 10px; padding: 2px 4px; border-radius: 2px; color: white; display: inline-block; } div.post .tag-post { margin-top: 8px; } .category-post { margin-top: 40px; } .tag-post { display: inline-block; font-size: 10px; color: #fff; } .tag-in-content { margin-bottom: 10px; margin-right: 4px; } span.nq-entry-view { display: inline-block; margin-right: 14px; vertical-align: 4px; } /* -------------------- کامنت -------------------- */ .align .messages-top-page h4,.align .messages-top-main-page h4 { display: inline-block; width: 518px; margin-bottom: 20px; margin-right: 51px; margin-top: 20px; font-size: 15px; font-family: "yekan", tahoma; line-height: 1.5em; background: #009688 url(//bayanbox.ir/view/7091729675305810205/txr3.png); text-align: center; color: #fff; padding: 10px; border-radius: 19px 0; box-shadow: 0 10px 7px -8px #777; text-shadow: 0.4px 0.4px 0.4px #000000; } .align .messages-top-page h4 a,.align .messages-top-main-page h4 a { color: white; } .msg-comment { font-size: 11px; } .body-comments { margin-bottom: 25px; background: #CAF3E2; border: 1px solid rgba(171, 218, 222, 0.57); box-shadow: 0 10px 3px -8px rgba(70, 108, 111, 0.85); } .body-comments .cmt_details { color: #737373; background: #75D2AD; position: relative; padding: 3px 10px 7px 10px; } .body-comments .cmt_details img { width: 35px; border-radius: 50%; border: 1px solid rgba(105, 105, 105, 0.85); padding: 2px; float: right; } .body-comments .cmt_details .txt { display: inline-block; float: right; line-height: 38px; margin-right: 10px; } .body-comments .cmt_details .cmt_date { border-right: 1px solid #aaa; padding: 5px 8px 3px 0; display: inline-block; margin: 7px 10px 5px 0; } .body-comments .cmt_details a.website { position: absolute; top: 13px; left: 18px; font-size: 19px; } .body-comments .cmt_details li { list-style-type: none; } .body-comments .body_cmt { font-family: yekan; font-size: 12px; line-height: 20px; padding: 10px; text-align: justify; } .cmt_reply.color3 { background: #F4F4F4; border-bottom: 2px solid rgba(132, 132, 132, 0.43); border-right: 2px solid rgba(132, 132, 132, 0.45); margin: 0px 15px 10px; padding: 9px; text-align: justify; font-family: yekan; font-size: 12px; line-height: 20px; min-height: 52px; } .avatar-reply img { width: 35px; border-radius: 50%; border: 1px solid rgba(105, 105, 105, 0.85); padding: 2px; float: right; display: inline-block; } .text-reply-body { padding: 6px 45px 0 0; } .cmt_date a { color: #737373; } .cmt_date a:hover { color: #D40D00; } .body-comments .cmt_details img:hover,.avatar-reply img:hover { opacity: 0.8; } .body-comments i.fa.fa-globe { color: #737373; } .body-comments i.fa.fa-globe:hover { color: #C70E00; } img#cap_img_4583157 { width: 100px; height: 27px; vertical-align: bottom; } /*-------------- فرم ارسال نظر --------------*/ .commentForm { box-shadow: 0 10px 3px -8px #777; background: rgba(12, 157, 145, 0.67) url(http://bayanbox.ir/view/2213724396685835298/foot-otis-redding.png) center top repeat; padding: 0px 0px 8px 10px; border-radius: 3px; margin-bottom: 40px; } .commentForm input#bComSub { color: #FFFFFF; background-color: #000; box-shadow: 0 2px 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); border: none; padding: 3px 60px; vertical-align: middle; text-align: center; cursor: pointer; font-family: yekan; /* letter-spacing: 0px; */ -webkit-transition: all 0.3s ease,color 0.15s ease; transition: all 0.3s ease,color 0.15s ease; } .commentForm input#bComSub:hover { background-color: #ffffff; /* color: #73AD21; */ color: #0A9C90; box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); } /*-------------- nq pagination ---------------*/ .nq-pagination { margin-right: 40px; margin-bottom: 20px; } .nq-pagination span.current { display: inline-block; background: white; padding: 9px 13px 8px 14px; font-size: 15px; border: 1px solid; } .nq-pagination li { display: inline-block; margin: 10px 5px 0; } .nq-pagination a { display: inline-block; background: #000; padding: 9px 13px 8px 14px; font-size: 15px; border: 1px solid; } . nq-pagination a.next.icon.icon-chevron-left { padding: 10px 13px; height: 35px; } .icon-chevron-right:before { content: "\f054"; } .icon-chevron-left:before { content: "\f053"; vertical-align: -2px; } .nq-pagination ul li a.prev, .nq-pagination ul li a.next { padding: 7px 17px 8px 15px; } .nq-pagination ul li a.prev, .nq-pagination ul li a.next,.nq-pagination a, .nq-pagination span.current { transition: all .3s; -ms-transition: all .3s; -webkit-transition: all .3s; -moz-transition: all .3s; } .nq-pagination a:hover { color: white; background: #0A9C90; } /*-------------- aside ---------------*/ .aside { float: left; width: 30%; margin-left: 11px; font-size: 12px; } .aside .aside-box { background: #000; margin: 19px 0 17px 0; position: relative; box-shadow: 1px 1px 3px #999; border-radius: 11px 11px 0 0; } .aside .aside-box .aside-title { position: relative; padding: 8px 6px 8px 0; font-weight: 600; font-family: "BTabassom"; border-bottom: 1px solid #e5e5e5; color: white; font-size: 18px; background: #000; letter-spacing: 1px; cursor: context-menu; border-radius: 11px 11px 0 0; } .aside .aside-content { position: relative; } .aside .aside-content ul li { border-top: 1px solid #62BC98; } .aside .aside-content ul li a { display: block; font-size: 11px; font-family: 'yekan'; padding: 10px; transition: all 0.2s; color: #fff; } .aside .aside-content ul li a:hover { background: #64BC99; color: #000000; font-weight:bold; } .aside .aside-content ul li a::before { content: "•"; font-size: 18px; vertical-align: bottom; line-height: 10px; color: #9A9A9A; margin-left: 5px; } .aside .aside-content ul li a:hover::before { color: #000; } .icon-header-aside { float: left; margin-left: 8px; color: #FFFFFF; font-size: 16px !important; } span.nq-entry-view-in-page { display: inline-block; float: left; color: #fff; font-size: 10px; margin: 12px 0 0px 15px; } div#align--msg .messages .cnt { color: white; background: rgba(0, 0, 0, 0.34); display: inline-block; text-align: center; margin: 5px 0 10px 0; padding: 10px 20px; } div#align--msg { text-align: center; } /*--------------aside (blog info box) ---------------*/ div#blog-info-box img { width: 85%; border-radius: 15px; margin: 15px 5px 5px 5px; } div#blog-info-box { text-align: center; overflow: hidden; } div#blog-info-box .blog_description h4 { font-family: yekan; padding: 5px 15px 15px 15px; text-align: justify; line-height: 20px; color: white; } div#blog-info-box img:hover { -ms-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); } /*--------------aside (adv-box) ---------------*/ div#adv-box { text-align: center; } /*--------------aside (mini-slider-box) ---------------*/ div#mini-slider-box { position: relative; } div#mini-slider-box .aside-box { margin: 19px 0 0px 0; } div#mini-slider-box span { color: #E91E63; display: inline-block; padding: 7px 10px; font-size: 15px; line-height: 1.8em; background: #ffffff url(../images/n); border-top: 4px solid #0C9D91; font-weight: normal; text-align: center; width: 100%; } div#mini-slider-box .slide-caption { position: absolute; left: 0px; bottom: 0px; width: 100%; height: auto; min-height: 40px; background: rgba(0, 0, 0, 0.52); z-index: 200; padding: 10px 20px; text-align: center; color: #fff; } div#mini-slider-box .entry-thumb { overflow: hidden; } div#mini-slider-box .entry-thumb img { width:100% } div#mini-slider-box .slide-caption h2 a { color: white; font-family: yekan; font-size: 13px; } div#mini-slider-box .slide-caption h2 a:hover { font-size: 14px; } /*--------------aside (tag-box) ---------------*/ #tag-box .aside-content { padding: 10px; } #tag-box h4 { display: inline-block; } div.tagcloud1 h4 a { padding: 2px 5px; margin: 2px; line-height: 32px; font-family: yekan; color: white; border: 1px solid rgba(98, 188, 152, 0.49); } div.tagcloud1 h4 a:hover { background: #0A9C90; color: white; } /*--------------aside (recent_comments-post-box) ---------------*/ #recent_comments-post-box ul li { height: 58px; } #recent_comments-post-box .avatar img { display: block; float: right; margin: 6px; width: 37px; border-radius: 50px; } #recent_comments-post-box .aside-content ul li a::before { content: ""; } #recent_comments-post-box .cmt-text .date { margin-right: 4px; margin-top: 13px; font-size: 14px; color: #fff; display: inline-block; } div#recent_comments-post-box { overflow: hidden; white-space: nowrap; } #recent_comments-post-box .cmt-text a { font-size: 11px; padding: 9px 60px 0 0; } #recent_comments-post-box ul li:hover { background: #62BC98; color: #FFFFFF; } /*--------------aside (stat-box) ---------------*/ #stat-box span.StatTitle { display: inline-block; font-size: 12px; font-family: Yekan; padding: 5px; color: #fff; } #stat-box span.Value { float: left; font-size: 12px; font-family: Yekan; padding: 5px; color: #fff; } #stat_summary_div .aside-content span.StatTitle:before { content: "•"; font-size: 18px; vertical-align: bottom; line-height: 10px; color: #9A9A9A; margin-left: 5px; } #stat_summary_div .aside-content .row:hover span.StatTitle:before,#stat_summary_div .aside-content .row:hover span.Value{ color: #9BFFD7; } /*-------------- footer ---------------*/ .foot { background: #0c9d91; padding: 15px 17px; vertical-align: top; box-sizing: border-box; line-height: 1px; color: white; font-family: 'yekan'; width: 100%; min-width: 1025px; } .foot .power-by { float: right; } .foot .design-by { float: left; } .foot a { color: yellow; } .foot a:hover { color: #000000; } .foot .design-by span { color: #fff; } /* @media screen and (max-width: 1230px) { section { background-position: top left; } }*/ @media screen and (max-width: 750px){ .title-blog-bottom{ display: none; } } @media screen and (max-width: 768px){ .header-top, foot, section { min-width: initial; } } @media screen and (max-width: 568px){ /* .content, .aside{ width:100% } */ }