/*body {direction: rtl;line-height: 200%; margin: 1cm 2cm 0pt; text-align: justify;}*/

/* br {border:1px solid;}

br {border:1px solid; color: red; margin:50px; padding: 5px}--عمده مارجین است که عمل میکند

var x = document.createElement("BR");

/*body:before {content:'پیشنهاد خود را اینجا مطرح کنید: www.amafhhjm/wp/'} 

سلکتور خصوصیت کارآیی دارد: a[href*="q-tfs-000-000-00000.html"]



*/

body
{
	background: #f9fff2;
	color: #000000;
	font: 12pt tahoma;
	margin: 5px 10px 10px 10px;
	padding: 0px;
        direction: rtl; text-align: justify; margin: 2%;
}
a {text-decoration: none;}
a:link, body_alink
{
	color: #22229C;
}
a:visited, body_avisited
{
	color: #22229C;
}
a:hover, a:active, body_ahover
{
	color: #FF4400;
}
.page
{
	background: #FFFFFF;
	color: #000000;
}


a[href*="q-tfs-000-000-00000.html"]
{
	background: #20ffa0;
	border: 0px solid #fea;
}

a[href*="q-tfs-000-000-00000.html#"]
{
	background: #C0C0C0;
	border: 0px solid #fea;
}

a[href*="q-tfs-000-000-00000.html#"]::after
{
        content: "  - -همین صفحه";
       	background: #FFFFFF;
	color: #FF0000;
	border: 0px solid #fea;
}



a[href*="index.html"]
{
	background: #ffffd0;
	border: 0px solid #fea;
}



a[href*="reference-00000.html"]
{
	background: #d0ffff;
	border: 0px solid #fea;
}



h1.ctl {
  border: 1px solid black;
  margin: 5px;
}





a[href*="q-tfs-050-000-bahth-00000"]
{
	background: #00ffff;
	border: 0px solid #fea;
}

/*

h1.ctl, h2.ctl, h3.ctl {background: #00ffff;}

h1.ctl {background: #d0ffff;}

.free-learn {
 background-color:#4169E1;
 text-align:center;
 font-size:20px;
 padding:10px;
 color:#fff;
}


رنگ سبز کم رنگ:
c9ffc7

 	  #ccffcc
 	  #c9ffc7
 	  #c7ffc2
 	  #c4ffbd
 	  #c2ffb8
 	  #bfffb2
 	  #bdffad
 	  #baffa8
 	  #b8ffa3
 	  #b5ff9e
 	  #b2ff99
 	  #b0ff94
 	  #adff8f
 	  #abff8a
 	  #a8ff85
 	  #a6ff80
 	  #a3ff7a
 	  #a1ff75
 	  #9eff70
 	  #9cff6b
	  #99ff66





a[href^="#"]::after
{
        content: "  - -همین صفحه";
       	background: #FFFFFF;
	color: #FF0000;
	border: 0px solid #fea;
}

*/

.ayaf
{
       margin: 3em;
	/*padding: 2%;
	border: 3%;
	margin: 3%;*/
}

.qurannoor {  display: none;  }
.qurancorpus {  display: none;  }

almobin { float: right;  display: inline-block; margin-right: 5px;   padding: 6px 10px;   background: gold;   border: 0px solid #AAA; }

fadak { position: relative;  top: 0; left: 0;  background: white;  right: 0;  bottom: 0;  padding: 20px;  border: 1px solid #ccc;  overflow: auto; max-height: 200px; }

.almobin1, .almobin2, .almobin3, .almobin4, .almobin5, .almobin6, .almobin7, .almobin8, .almobin9, .almobin0 {  cursor: pointer; }

.fadak1, .fadak2, .fadak3, .fadak4, .fadak5, .fadak6, .fadak7, .fadak8, .fadak9 {  display: none; clear: both; }
.fadak0 { display: block; clear: both; }

.almobin0:focus ~ fadak.fadak0 {  display: block; }
.almobin1:focus ~ fadak.fadak0 {  display: none;  }
.almobin1:focus ~ fadak.fadak1 {  display: block; }
.almobin2:focus ~ fadak.fadak0 {  display: none;  }
.almobin2:focus ~ fadak.fadak2 {  display: block; }
.almobin3:focus ~ fadak.fadak0 {  display: none;  }
.almobin3:focus ~ fadak.fadak3 {  display: block; }
.almobin4:focus ~ fadak.fadak0 {  display: none;  }
.almobin4:focus ~ fadak.fadak4 {  display: block; }
.almobin5:focus ~ fadak.fadak0 {  display: none;  }
.almobin5:focus ~ fadak.fadak5 {  display: block; }
.almobin6:focus ~ fadak.fadak0 {  display: none;  }
.almobin6:focus ~ fadak.fadak6 {  display: block; }
.almobin7:focus ~ fadak.fadak0 {  display: none;  }
.almobin7:focus ~ fadak.fadak7 {  display: block; }
.almobin8:focus ~ fadak.fadak0 {  display: none;  }
.almobin8:focus ~ fadak.fadak8 {  display: block; }
.almobin9:focus ~ fadak.fadak0 {  display: none;  }
.almobin9:focus ~ fadak.fadak9 {  display: block; }



#hmmh {font: 50pt tahoma; background: rgba(255,0,0,0.25); color: #22229C;}
/* این کلاس میتواند بخشی را پنهان کند و با کد آشکار شود */
.penhan{
   display:none;}

.hmclass{background-color: #ebebeb; line-height: 200%; margin: 1cm 1cm 0pt; padding: 1cm; text-align: justify; direction: rtl;}


.jalasah0{
	background: #C0C0C0;
	border: 0px solid #fea;
}
.jl-hd1{
    margin-right: 1em;
}

.jl-hd2{
    margin-right: 2em;
}



.matn1 {}
.matn2 {display: none;}
.matn3 {display: none;}
.matn1:focus .matn2 {  display: inline; }
.matn1:focus .matn3 {  display: block; }
  



.matn1:focus .matn3 {  display: inline; }
.matn2:focus .matn3 {  display: none; }


.matn1:hover .matn2 {  display: block; }
.matn1:active .matn3 {  display: block; }
.matn1:visited .matn3 {  display: block; }
  


/*
سلکتور المنتی که به دنبال المنت قبلی میآید، مثلا هر لیستی که به دنبال پاراگراف میآید:

element1 ~ element2 	p ~ ul 	Selects every <ul> element that are preceded by a <p> element
این کد پایین را نگاه کنید:(به بخش سلکتورهای سی اس اس مراجعه کنید)
*/

hm1 {float: right;  display: inline-block; margin-right: 5px;   padding: 6px 10px;   background: gold;   border: 0px solid #AAA; }
.tab1, .tab2, .tab3, .tab4 {  cursor: pointer;}
.tab11 {display: none; clear: both;}
.tab22 {display: none; clear: both;}
.tab33 {display: none; clear: both;}
.tab44 {display: none; clear: both;}
.tab1:focus ~ hm2.tab11 {  display: block; }
.tab2:focus ~ hm2.tab22 {  display: block; }
.tab3:focus ~ hm2.tab33 {  display: block; }
.tab4:focus ~ hm2.tab44 {  display: block; }




.ul1:focus .ul2 {  display: block; }
.ul2:focus ul.ul3 {  display: block; }
.ul3:focus .ul4 {  display: block; }




.ul1
.ul2 {display: none;}
.ul3 {display: none;}
.ul4 {display: none;}
.ul1:focus ~ ul.ul2 {  display: block; }
.ul2:focus ~ ul.ul1 {  display: block; }
.ul2:focus ~ ul.ul3 {  display: block; }
.ul3:focus ~ ul.ul4 {  display: block; }
.ul4:focus ~ ul.ul4 {  display: block; }


/*

<br>
<style>

aتمام-آیة {}

.aتمام-آیة {}

[aتمام-آیة] {}

[aمکان-نزول-آیة~=
مکه] {background: #20ffa0;}
[aمکان-نزول-آیة~=
مدینه] {background: #FF4400;}

[aمکان-نزول-آیة="مکه"]::after { content: "پس"; background: #ff00ff;}
[aمکان-نزول-آیة="مکه"]::before { content: "پیش"; background: #ff00af;}

aمحل {background: #20ffa0;}

ayah {	background: #20ffa0;}

.wayah { border: 10px solid #fea;}

#hm {padding: 6px 10px;}

[wayah~=besm]{color:white;}

[data-text~=light]{color:white;background: #20ffa0;} [data-text~=bold]{font-weight:bolder;}

</style>

<ayah class="wayah" id="hm" wayah="besm">بسم الله</ayah><br><br>

<p data-text = "light bold"> something </p>

<aمحل>
 محلمحلمحلمحل </aمحل>
  <br>
 <br>
<aتمام-آیة 
aمکان-نزول-آیة=
"مکه"
class="wayah">
الحمد لله-آیه مکی </aتمام-آیة>
<br>
<br>
<aتمام-آیة
aمکان-نزول-آیة=
"مدینه">
الحمد لله-آیه مدنی </aتمام-آیة>
<br><br><br><br>

*/

/*    */


.level-1 {
    margin: 0em;
}

.level-2 {
    margin: 1em;
}

.level-3 {
    margin: 2em;
}

.level-4 {
    margin: 3em;
}

.level-5 {
    margin: 4em;
}

.level-6 {
    margin: 5em;
}


.level-7 {
    margin: 6em;
}


.level-8 {
    margin: 7em;
}

.level-9 {
    margin: 8em;
}

.level-10 {
    margin: 9em;
}


/*    */



.tabs {
  position: relative;   
  min-height: 200px; /* This part sucks */
  clear: both;
  margin: 25px 0;
}
.tab {
  float: right;
}
.tab label {
  display: inline-block;
  background: #eee; 
  padding: 10px; 
  border: 1px solid #ccc; 
  margin-left: -1px; 
  position: relative;
  left: 1px; 
}
.tab [type=radio] {
  display: none;   
}
.content {
  position: absolute;
  top: 28px;
  left: 0;
  background: white;
  right: 0;
  bottom: 0;
  padding: 20px;
  border: 1px solid #ccc;
  overflow: auto;
}
[type=radio]:checked ~ label {
  background: white;
  border-bottom: 1px solid white;
  z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
  z-index: 1;
}



/*    */




/*
پنجره مودال توسط فایل اس سی سی W3.CSS عمل میکند:
*/

.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}

.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}

.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}

.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}


.w3-button:hover{color:#000!important;background-color:#ccc!important}

.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}


.w3-button:hover{color:#000!important;background-color:#ccc!important}

.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}


.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}


@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}









nav {
  padding: 0;
  margin: 0;
  border: 0;
  text-align: right;
 }

nav ul, nav li {
  list-style: none;
  margin: 0;
  padding: 0; }

nav ul {
  position: relative;
  z-index: 597;
  float: right; }

nav ul li {
  float: right;
  min-height: 1px;
  line-height: 1.5em;
  vertical-align: middle; }

nav ul li.hover,
nav ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default; }

nav ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 598;
  width: 100%; }

nav ul ul li {
  float: none; }

nav ul ul, nav ul ul ul {
  top: -1px;
  right: 99%; }

nav ul li:hover > ul {
  visibility: visible; }

nav ul li {
  float: none; }

nav a {
  display: block; }


nav {
  font-family: 'Segoe UI', Arial, sans-serif;
  font-size: 11px; }
  nav:after, nav ul:after {
    content: '';
    display: block;
    clear: both; }
  nav ul {
    background: #F0EFEA;

    /*border: 1px solid #AAAAAA;*/
    padding: 4px;
    width: 100px; }
    nav ul li {
      color: #000;
	border-top: 1px solid #6b727c;
	/*border-bottom: 1px solid #575f6a;*/
      position: relative; }
      nav ul li.hover, nav ul li:hover {
        background: #407a1e;        color: #FFF; }
        nav ul li.hover > a, nav ul li:hover > a {
          color: #FFF;
          /*border: 1px solid #327E04;*/ }
    nav ul ul {
      width: 80px; }
  nav a {
    /*border: 1px solid transparent;*/
    padding: 3px 10px; }
    nav a:link, nav a:visited {
      color: #000;
      text-decoration: none; }
    nav a:hover {
      background: #4b8e23;      color: #FFF; }
    nav a:active {
      color: #ffa500; }
  nav .has-sub:hover > a:after, nav .has-sub.hover > a:after {
    border-color: transparent transparent transparent #FFF; }
  nav .has-sub > a:after {
    content: '';
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 4px 0 4px 4px;
    border-color: transparent transparent transparent #808080;
    position: absolute;
    top: 50%;
    left: 5%;
    margin-top: -4px;
    -webkit-transform: rotate(360deg); }