html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, menu, nav, section { display: block; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } * { direction: rtl; border: 0; } @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; } a { text-decoration: none; color: #555; } a:hover { text-decoration: none; color:#FA5B40 ; } img:hover { opacity: 0.6; transition-duration: 0.5s; } .clearfix { clear: both; } body { background: #f3f3f3; margin: 0; } .main { width: 900px; margin: 0 auto; position: relative; } .topmain { width: 900px; margin: 25px auto; position: relative; } .line { border-bottom: 1px solid #dfdfdf; width: 100%; } hr { border-bottom : 1px dashed #dfdfdf; } /* ---------- Header TopMenu ---------- */ header .topmenu { width: 900px; height: 35px; margin: 10px auto; border-radius: 5px; background-color:#FA5B40 ; } #header .topmenu .menu { float: right; margin: 4px; } #header .topmenu .menu ul li { display: inline; } #header .topmenu .menu ul li a { font-size: 13px; font-family: Yekan; color: #fff; padding: 0 7px; } #header .topmenu .menu ul li a:hover { background-color: #fff; color: #FA5B40 ; border-radius: 3px; } #header .topmenu .now { float: left; margin: 5px; font-size: 13px; font-family: Yekan; color: #fff; } /* ---------- Header Image ---------- */ #header .headerimage { width: 900px; height: 190px; margin: 0 auto; position: relative; text-align: center; overflow: hidden; background: url(//bayanbox.ir/view/7734261942005688638/header1.jpg) no-repeat scroll; background-size: cover; border-radius: 5px; } #header .headerimage h2 { margin: 0 0 20px; padding: 60px 0 0; line-height: 1.5em; } #header .headerimage h2 a { color: #fff; background: rgba(0, 0, 0, 0.2); padding: 0 25px 9px; margin: 0; font-size: 25px; font-family: Yekan; border-radius: 3px; } #header .headerimage h3 { color: #fff; font-family: Yekan; padding: 0 15px 2px; font-size: 13px; } /* ---------- ContentBar ---------- */ #contentbar { width: 680px; float: right; margin-top: 10px; } #contentbar .contentbarblock { margin-bottom: 10px; background-color: #fff; border: 1px solid #dfdfdf; box-sizing: border-box; border-radius: 5px; } #contentbar .contentbarblock .contentbarblockhead { position: relative; box-sizing: border-box; color: #fff; background-color:#FA5B40 ; padding: 2px; border-radius: 3px 3px 0 0; } #contentbar .contentbarblock .contentbarblockhead .contentbarblocktitle h2 { color: #fff; font-size: 12px; font-family: Yekan; margin: 2px; } #contentbar .contentbarblock .contentbarblockhead .contentbarblocktitle h2 a{ color: #fff; font-size: 12px; font-family: Yekan; margin: 3px; } #contentbar .contentbarblock .contentbarblocktitle a.contentbarblockposttitle:hover { color: #fff; padding-right:10px; } #contentbar .contentbarblock .contentbarblockinfo { float: right; padding: 6px; } #contentbar .contentbarblock .contentbarblockinfo li { display: inline-block; font-size: 11px; font-family: tahoma; color: #777; padding :1px 3px 0 5px; border-left : 1px solid rgba(0, 0, 0, 0.1); } #contentbar .contentbarblock .contentbarblockinfo li:last-child { border-left :none; } #contentbar .contentbarblock .contentbarblockinfo li a { color: #777; } #contentbar .contentbarblock .contentbarblockinfo li a:hover { color:#FA5B40 ; } #contentbar .contentbarblock .contentbarcontent { padding: 10px; border-bottom: 1px solid #dfdfdf; } #contentbar .contentbarblock .contentbarcontent img { margin: 10px; padding: 3px; max-width: 98%; } #contentbar .contentbarblock .contentbarcontent { color: #555; font-size: 11px; font-family: Tahoma; line-height: 1.9; text-align: justify; } #contentbar .contentbarblock .contentbarinfo .rating a:hover { color: #fff; background:#FA5B40 ; } #contentbar .contentbarblock .contentbarinfo { height: 35px; background-color: #F6F6F6; border-radius: 0 0 3px 3px ; } #contentbar .contentbarblock .contentbarinfo .rating .rate-button-box.rated { font-weight: bold; } #contentbar .contentbarblock .contentbarinfo .rating .rate-up, span.rateup { color: #090; } #contentbar .contentbarblock .contentbarinfo .rating .rate-down, span.ratedn { color: #A00; padding: 5px; } #contentbar .contentbarblock .contentbarinfo a.button { background-color: #eaeaea; color: #555; display: block; float: left; font-size: 11px; font-family: tahoma; margin-left: 6px; margin-top: 6px; padding: 5px 10px; border-radius: 3px; } #contentbar .contentbarblock .contentbarinfo a.button:hover { background-color:#FA5B40 ; color: #fff; } #contentbar .contentbarblock .contentbarinfo a.rate-button { background-color: #eaeaea; color: #555; display: block; float: left; font-size: 11px; font-family: tahoma; margin-left: 6px; margin-top: 6px; padding: 5px 10px; border-radius: 3px; } #contentbar .contentbarblock .contentbarinfo a.rate-button:hover { background-color: #FA5B40; color: #fff; } /* ---------- NextPage ---------- */ #contentbar .contentbarblock .contentbarcontent .nexpage { text-align: center; } #contentbar .contentbarblock .contentbarcontent .nexpage a { font-size: 11px; font-family: Tahoma; border: #dfdfdf solid 1px; padding: 3px 6px; color: #555; } #contentbar .contentbarblock .contentbarcontent .nexpage a:hover { border: #FA5B40 solid 1px; color: #FA5B40 ; } /* ---------- CommentCounter ---------- */ #contentbar .contentbarblock .commentcounter { color: #555; font-size: 11px; font-family: tahoma; text-align: center; padding: 10px; } /* ---------- SendComment ---------- */ #contentbar .contentbarblock .sendcomment { color: #555; font-size: 11px; font-family: tahoma; padding: 10px; } /* ---------- Comment ---------- */ #contentbar .contentbarcommenttitle { position: relative; padding: 10px; background-color: #fbfbfb; border-bottom: 1px solid #dfdfdf; box-sizing: border-box; } #contentbar .contentbarcommenttitle .contentbarcommentavatar img { float: right; margin-left: 10px; width: 15px; } #contentbar .contentbarcommenttitle .contentbarcommentuser { float: right; display: inline-block; } #contentbar .contentbarcommenttitle .contentbarcommentuser a { color:#FA5B40 ; font-size: 11px; font-family: Tahoma; } #contentbar .contentbarcommenttitle .contentbarcommentdate { margin-right: 5px; display: inline-block; border-right: 1px solid #ccc; padding-right: 5px; color: #888; font-size: 11px; font-family: Tahoma; } #contentbar .contentbarcommenttitle .contentbarcommentuser a:hover { color: #999; } #contentbar .contentbarcommenttitle .contentbarcommentuser span { color: #555; font-size: 11px; font-family: tahoma; } #contentbar .contentbarcommenttitle .contentbarcommentinfo { position: absolute; top: 10px; left: 5px; font-size: 11px; font-family: Tahoma; margin-left: 5px; } #contentbar .contentbarcontent .commentreplyavatar img { border: none; width: 25px; float: left; margin: 1px; } #contentbar .contentbarcontent .commentreply { margin: 5px 0 1px 35px; background: #efefef; border-radius: 3px; } #contentbar .contentbarcontent .commentreplycontent { font-size: 11px; font-family: tahoma; color:#FA5B40 ; padding: 4px; border-radius: 3px; } /* ---------- SideBar Public ---------- */ #sidebar { float: left; width: 210px; margin-top: 10px; } #sidebar .sidebarblock { background-color: #fff; border: 1px solid #dfdfdf; margin-bottom: 10px; border-radius: 3px; box-shadow: 0 3px 0 0 rgba(226, 228, 231, 0.75); } #sidebar .sidebarblock .sidebarblocktext { font-size: 11px; font-family: tahoma; color: #555; padding: 5px; } #sidebar .sidebarblock .sidebarblockhead { position: relative; background-color:#FA5B40 ; padding: 1px; border-radius: 3px 3px 0 0; } #sidebar .sidebarblock .sidebarblockhead .sidebarblocktitle { margin-right: 5px; } #sidebar .sidebarblock .sidebarblockhead .sidebarblocktitle h3 { color: #fff; font-size: 12px; font-family: Yekan; margin: 3px; cursor: default; } #sidebar .sidebarblockcontentads { margin: 5px; } #sidebar .sidebarblockcontent li { border-bottom: 1px solid #eee; } #sidebar .sidebarblockcontent li:last-child { border: none; } #sidebar .sidebarblockcontent li a { display: block; font-size: 11px; font-family: tahoma; padding: 8px; } #sidebar .sidebarblockcontent li a:hover { background: #f7f7f7; color:#FA5B40 ; } #sidebar .sidebarblockcontent li a::before { content: "::"; color: #999; margin-left: 5px; } #sidebar .sidebarblock .sidebarblocktag { padding: 5px; } #sidebar .sidebarblock .sidebarblocktag li { display: inline-block; } #sidebar .sidebarblock .sidebarblocktag li a { color: #fff; background:#FA5B40 ; font-size: 11px; font-family: tahoma; padding: 4px 5px; display: inline-block; margin: 2px 0; border-radius: 4px; } #sidebar .sidebarblock .sidebarblocktag li a:hover { opacity: 0.4; } #sidebar .sidebarblock .sidebarblockcomment { font-size: 11px; font-family: tahoma; color: #555; white-space: nowrap; overflow: hidden; } #sidebar .sidebarblock .sidebarblockcomment ul li { border-bottom: 1px solid #eee; padding: 5px; } #sidebar .sidebarblock .sidebarblockcomment ul li:hover { background: #f7f7f7; } #sidebar .sidebarblock .sidebarblockcomment ul li:last-child { border: none; } #sidebar .sidebarblock .sidebarblockcomment .lastcomentavatar { float: right; margin: 4px; width: 20px; } #sidebar .sidebarblock .sidebarblockcomment .lastcomentname p { margin-top: 2px; color:#FA5B40 ; } #sidebar .sidebarblock .sidebarblockcomment .lastcomentname a { color: #555; } #sidebar .sidebarblockcontent li .statetitle { display: inline-block; font-size: 11px; font-family: tahoma; color: #555; padding: 8px; text-align: right; } #sidebar .sidebarblockcontent li .statetitle::before { content: "::"; color: #999; margin-left: 5px; } #sidebar .sidebarblockcontent li .value { float: left; display: inline-block; font-size: 11px; font-family: tahoma; color:#FA5B40 ; padding: 8px; } #sidebar .sidebarblock .sidebarblockcontent img.designerlogo { margin: 5px; vertical-align: middle; } #sidebar .sidebarblock h4{ font-size: 11px; font-family: tahoma; color: #555; line-height: 1.8; padding: 5px; text-align: justify; } #sidebar .sidebarblock .blogimage { text-align: center; margin-top: 5px; } #sidebar .sidebarblock .blogimage img { padding: 5px; text-align: center; max-width: 85%; height: auto; } /* ---------- Footer ---------- */ #footer { width: 100%; height: 40px; min-width: 1000px; position: relative; background-color:#FA5B40 ; } #footer .copyright { float: right; font-size: 11px; font-family: tahoma; color: #fff; padding: 13px; } #footer .copyright a { color: #fff; } #footer .copyright a:hover { text-decoration: underline; } #footer a.designer { float : left; background : #fff; font-size: 11px; font-family: tahoma; padding : 5px 10px; border-radius : 3px; margin: 9px; color:#555; } #footer a.designer:hover { background : #eaeaea; } @media screen and (max-width: 768px) { .body { width: 100%; } .main { width: 98%; margin: 0 auto; } #header .topmenu { width: 98%; margin: 5px auto; } #header .headerimage { width: 98%; } #contentbar { width: 100%; margin: 10px auto; } #contentbar .contentbarblock .contentbarcontent img { margin: 10px; padding: 3px; max-width: 98%; height: auto; } #sidebar { width: 100%; margin: 0px auto; } #footer { min-width: 100%; margin: 0px auto; } } @media screen and (max-width: 400px) { #header .topmenu .now { display: none; } #header .headerimage h2 a{ font-size: 15px; } #header .headerimage h3 { display: none; } #contentbar .contentbarblock .contentbarblockinfo li { display: block; } #contentbar .contentbarblock .contentbarinfo { height: 70px; } #contentbar .contentbarblock .contentbarblockinfo li { border: none; } #footer .copyright { display: none; } #footer a.designer { float: right; vertical-align: middle; } }