/* 
    Created on : 03.10.2022, 17:11:23
    Author     : Kamran Zolfaghari
*/

*{box-sizing: border-box;}  /* از افزایش پهنا و بلندی جعبه ها یا دیوها بدلیل وجود فاصله از لبه داخلی یا همان پدینک بشود.  */

.row::after {content: ""; clear: both;display: table;} /* ستون های داخل یک ردیف همگی به سمت چپ شناور هستند و بنابراین از جریان صفحه. */
                                                      /* خارج می شوند و عناصر دیگر طوری قرار می گیرند که گویی ستون ها وجود ندارند. */
                                                      /* برای جلوگیری از این امر یک سبک اضافه می کنیم که جریان را پاک می کند. */

[class*="col-"]{float: left;padding: 15px;} /* برای اینکه ستونها در سمت چپ هم بیایند و یک کناره پانزده پیکسل داشته باشند. */
/*For mobile phones:*/ 
/*[class*="col-"] { width: 100%;}     این پهنای تمامی اجزا را از پهنای پرده نمایشگر در نظر میگیرد .    */

@media only screen and (min-width: 600px) { /* با کمتر شدن پهنای پرده که مشابه پرده برای موبایل است تنظیم برای موبایل صورت میگیرد.   */
    /* For tablets: */
    .col-m-1 {width: 8.33%;}
    .col-m-2 {width: 16.66%;}
    .col-m-3 {width: 25%;}
    .col-m-4 {width: 33.33%;}
    .col-m-5 {width: 41.66%;}
    .col-m-6 {width: 50%;}
    .col-m-7 {width: 58.33%;}
    .col-m-8 {width: 66.66%;}
    .col-m-9 {width: 75%;}
    .col-m-10 {width: 83.33%;}
    .col-m-11 {width: 91.66%;}
    .col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) { /*چنانچه پهنای وسیله کمتر از این مقدار باشد تنظیم برای تبلت صورت میگیرد که البته این تنظیم تا حد پهنای موبایل صورت میگیرد.  */
    /* For desktop: */
    .col-1 {width: 8.33%;}
    .col-2 {width: 16.66%;}
    .col-3 {width: 25%;}
    .col-4 {width: 33.33%;}
    .col-5 {width: 41.66%;}
    .col-6 {width: 50%;}
    .col-7 {width: 58.33%;}
    .col-8 {width: 66.66%;}
    .col-9 {width: 75%;}
    .col-10 {width: 83.33%;}
    .col-11 {width: 91.66%;}
    .col-12 {width: 100%;}
}
@media only screen and (min-width: 1250px) { /* کمترین پهنایی هست که این تنظیمهابرای نمایشگر بکار برده می شود.  */
    /* For desktop: */
    .col-cs-1 {width: 8.33%;}
    .col-cs-2 {width: 16.66%;}
    .col-cs-3 {width: 25%;}
    .col-cs-4 {width: 33.33%;}
    .col-cs-5 {width: 41.66%;}
    .col-cs-6 {width: 50%;}
    .col-cs-7 {width: 58.33%;}
    .col-cs-8 {width: 66.66%;}
    .col-cs-9 {width: 75%;}
    .col-cs-10 {width: 83.33%;}
    .col-cs-11 {width: 91.66%;}
    .col-cs-12 {width: 100%;}
}
@media only screen and (min-width: 1366px) { /*این کمترین پهنایی هست که برای آن تا اینجا نمایشگر تنظیم می شود.  */
    /* For desktop: */
    .col-cm-1 {width: 8.33%;}
    .col-cm-2 {width: 16.66%;}
    .col-cm-3 {width: 25%;}
    .col-cm-4 {width: 33.33%;}
    .col-cm-5 {width: 41.66%;}
    .col-cm-6 {width: 50%;}
    .col-cm-7 {width: 58.33%;}
    .col-cm-8 {width: 66.66%;}
    .col-cm-9 {width: 75%;}
    .col-cm-10 {width: 83.33%;}
    .col-cm-11 {width: 91.66%;}
    .col-cm-12 {width: 100%;}
}

.header {background-color: #9933cc;color: #ffffff;padding: 15px;}
.menu ul {list-style-type: none; margin: 0; padding: 0;}
.menu li {padding: 8px; margin-bottom: 7px; background-color: #33b5e5; color: #ffffff; font-size: 1.25em;
          box-shadow: 0 1px 3px rgba(0,0,0,0.12), 01px 2px rgba(0,0,0,.24);}
.menu li:hover {background-color: #0099cc;}


table td{background: #33b5e5; color: #ffffff; padding: 5px;}

/*.parsiR{color: #33b5e5; text-align: right;float: left;}*/
.parsi{text-align: right;float: left;}

.floatL{float: left;}
.floatT{float: top;}
.floatR{float: right;}

.colorfff{color: #ffffff;}
.color33b5e5{color: #33b5e5;}
.textR{text-align: right;}


.alphabet{width:20px;font-size: x-large;font-weight: bolder;border: 1px lightgray dashed;}

.sarJam{width: 100px;font-size: x-large;font-weight: bolder;border: 1px #9933cc dashed;}

.left{width: 150px;float: left;border: 1px #9933cc dashed;}
.floatL{float: left;}
.w150{width: 150px;}
.borderDash{border: 1px #9933cc dashed;}

.fromRight{float: right;border: 1px aqua dotted;text-align: right;}
.floatR{float: outside;}
.borderDot{border: 1px aqua dotted;}

.arroundRow{padding: 4px;border: 2px #9933cc groove;}
.backgroundOP{background: #fff1ff;}
.backgroundOB{background: #e9f4ff;}
.crimson{color: crimson;}

/* ------------- About Mouse ----------------- */
.pointer {cursor: pointer;}


/* --------------- For testing ------------------ */
#show{width: 300px; height: 80px; border: 1px red dotted;}
#show1, #show3, #show5{width: 300px; height: 50px; border: 3px green dotted;}
#show2, #show4, #show6{width: 300px; height: 50px; border: 1px blue dotted;}