:root{
    --primary:#0073b1;
    --accent:#f06;
    --blue:#00a8ff;
    --green:#94d900;
}

a,body,div,form,h1,h2,h4,header,html,i,iframe,img,li,p,span,ul{
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    list-style:none;
    text-decoration:none;
}

body{
    direction:rtl;
    overflow-x:hidden;
    font-family:Vazir,Tahoma,Arial,sans-serif!important;
    line-height:1.7;
    font-size:14px;
    color:#333;
    background:#f9f9f9;
    padding:0;
}

h1,h2,h3,h4,h5,h6,p{
    font-family:Tahoma,Arial,sans-serif!important;
}

h1,h2,h4{
    font-size:13px;
}

h1{
    position:absolute;
    left:-9999px;
    overflow:hidden;
}

img{
    max-width:100%;
}

.bg{
    width:1100px;
    max-width:100%;
    margin:0 auto;
}

.main-top{
    background:#0097c9;
    overflow:hidden;
}

.main-top ul li{
    float:right;
    font:15px weblogmayekan;
    padding:3px 10px;
    margin:0 2.5px;
}

.main-top ul li a,
.sub-head h2 a{
    color:#fff;
}

.logo{
    background:url(/images/khosh.png) top right no-repeat;
    float:right;
    margin:10px;
    width:231px;
    height:66px;
}

header{
    background:#fff;
    text-align:center;
    overflow:hidden;
    padding:25px 20px;
    box-shadow:0 2px 6px #0000001a;
}

header h1{
    margin:0;
    font-family:Vazir,Tahoma,Arial,sans-serif;
    font-size:36px;
    font-weight:700;
    color:var(--primary);
    line-height:1.2;
}

header h1 a{
    color:var(--primary);
}

header h1 a:hover{
    color:var(--accent);
}

header p{
    font-family:Vazir,Tahoma,Arial,sans-serif;
    color:#555;
    font-size:16px;
    margin-top:8px;
    font-weight:400;
}

.ads{
    padding:4px;
    border:1px solid #0000001a;
    margin:15px;
    float:left;
    width:468px;
    height:60px;
}

.g-plus{
    position:fixed;
    left:15px;
    top:15px;
}

.left{
    width:285px;
    float:left;
    margin:5px;
}

.center{
    width:500px;
    float:right;
    margin:5px;
}

.right{
    width:285px;
    float:right;
    margin:5px;
}

.center-body,
.right-body{
    overflow:hidden;
    margin:5px 0;
}

.center-body .sub-head,
.right-body .sub-head{
    box-shadow:inset 0 -5px 0 -2px #0003;
    padding:4px 4px 6px;
    border-radius:0 5px 0 0;
    overflow:hidden;
}

.right-body .sub-head{
    background:var(--blue);
}

.right-body:nth-child(2n) .sub-head{
    background:var(--accent);
}

.center-body .sub-head{
    background:var(--green);
}

.sub-head h2,
.sub-head h4,
.sub-head i{
    color:#fff;
    text-shadow:2px 2px 0 #0000001a;
}

.sub-head i{
    text-align:center;
    box-shadow:inset 2px 2px 3px 0 #0003;
    float:right;
    width:35px;
    height:30px;
    padding-top:5px;
    border-radius:0 7px 7px;
    background:#0000004d;
    font-size:25px;
}

.sub-head h2,
.sub-head h4{
    float:right;
    font:15px weblogmayekan,Titillium Web;
    margin:5px;
}

.sub-head span{
    color:#fff;
    font-size:16px;
    float:left;
    margin:5px 10px;
}

.sub-head span i{
    color:#fff;
    font-size:16px;
    background:none;
    box-shadow:none;
    width:10px;
    height:10px;
}

.sub-body{
    background:#fff;
    border:1px solid #0000001a;
    border-radius:0 0 0 5px;
}

.text{
    margin:3px;
    font:15px weblogmayekan,Titillium Web;
    color:#333;
}

.middle .sub-body ul{
    margin:0;
    padding:0;
}

.middle .sub-body ul li{
    background:#0000001a;
    margin:4px;
    font-family:weblogmayekan!important;
}

.middle .sub-body ul li:nth-child(n){
    box-shadow:2px 0 0 0 var(--blue) inset;
}

.middle .sub-body ul li:nth-child(2n){
    box-shadow:2px 0 0 0 var(--accent) inset;
}

.middle .sub-body ul li:nth-child(3n){
    box-shadow:2px 0 0 0 var(--green) inset;
}

.middle .sub-body ul li a{
    display:block;
    padding:4px;
    color:#555;
    font:13px yekan;
    font-family:weblogmayekan!important;
}

.post-bottom{
    font-family:weblogmayekan!important;
    background:#f4f4f4;
    margin:15px;
    overflow:hidden;
}

.post-bottom .span{
    color:#444;
    padding:2px 5px;
    float:right;
}

.post-bottom .span i{
    font-size:16px;
    background:#79af05;
    padding:8px;
    border-radius:4px;
    color:#fff;
}

.clear{
    clear:both;
}

#loading{
    display:none;
    position:absolute;
    text-align:center;
    background:#fff;
    border:1px solid #999;
    border-radius:5px;
    box-shadow:1px 1px 3px gray,-1px -1px gray;
    padding:10px;
}

.main-content{
    padding:20px;
    max-width:1200px;
    margin:20px auto;
    background:#fff;
    border-radius:10px;
    box-shadow:0 4px 10px #0000001a;
}

p{
    color:#555;
    font-size:16px;
    line-height:1.6;
    margin-bottom:15px;
    font-family:Vazir,Arial,sans-serif;
}

a.post-link{
    font-family:Vazir,Tahoma,Arial,sans-serif;
    font-size:16px;
    font-weight:500;
    color:var(--primary);
    transition:.3s;
}

a.post-link:hover{
    color:var(--accent);
    text-decoration:underline;
    transform:translateX(3px);
}

h2.post-title a,
h3.post-title a{
    font-family:Vazir,Tahoma,Arial,sans-serif;
    font-size:20px;
    font-weight:600;
    color:#333;
    transition:color .3s;
}

h2.post-title a:hover,
h3.post-title a:hover{
    color:var(--primary);
}

.sidebar{
    background:#f4f4f4;
    padding:20px;
    width:250px;
    float:right;
    margin-left:20px;
    border-radius:8px;
}

.sidebar h3{
    font-size:22px;
    color:var(--primary);
}

.sidebar ul{
    padding:0;
}

.sidebar ul li{
    margin-bottom:10px;
}

.sidebar ul li a{
    font-family:Vazir,Arial,sans-serif;
    color:#333;
    transition:color .3s;
}

.sidebar ul li a:hover{
    color:var(--accent);
}

.widget-archive,
.widget-recent-posts{
    font-family:Vazir,Tahoma,Arial,sans-serif;
    font-size:15px;
    line-height:1.6;
    color:#333;
}

.widget-archive ul li,
.widget-recent-posts ul li{
    margin-bottom:8px;
}

.widget-archive ul li a,
.widget-recent-posts ul li a,
.widget-links a,
.widget-calendar a{
    color:var(--primary);
}

.widget-archive ul li a:hover,
.widget-recent-posts ul li a:hover,
.widget-links a:hover{
    color:var(--accent);
    text-decoration:underline;
}

.widget-calendar a{
    display:inline-block;
    font-size:14px;
    padding:3px 6px;
    transition:background .3s,color .3s;
}

.widget-calendar a:hover{
    color:#fff;
    background:var(--primary);
    border-radius:4px;
}

.widget-links a{
    font-size:15px;
    transition:color .3s;
}

footer{
    text-align:center;
    background:#333;
    color:#fff;
    padding:10px 0;
    font-size:14px;
}

footer a{
    color:#fff;
}

footer a:hover{
    color:var(--primary);
}

a:focus{
    outline:2px solid var(--primary);
    outline-offset:2px;
}

@media screen and (max-width:1110px){
    .bg{
        width:98%;
        margin:0 1%;
    }

    .left,
    .right{
        width:28%;
        margin:10px 0;
    }

    .center{
        width:42%;
        margin:10px 1%;
    }
}

@media screen and (max-width:768px){
    .sidebar{
        width:100%;
        margin-left:0;
        margin-top:20px;
        float:none;
    }

    .main-content{
        padding:15px;
        margin:10px;
    }

    header h1{
        font-size:28px;
    }

    h2.post-title a,
    h3.post-title a{
        font-size:18px;
    }

    p{
        font-size:14px;
    }
}

@media screen and (max-width:600px){
    .center,
    .left,
    .right{
        width:98%;
        margin:10px 1%;
    }
}

@media screen and (max-width:500px){
    .ads{
        width:95%;
        margin:4px 1%;
        height:auto;
    }
}