/* test.ibnuhazm.ly : بتاريخ ثمانية أغسطس هو أحدث ما كتب في آخر ملفات الـ سي إس إس كلها في الصفحة
   ====
style_new1.css : إسم الملف

Old history:
هو ملف الآن لـ سي إس إس الصفحة (تست) أدخلت عليه تحديثات جديدة بعد حلول عيد الأضحى إلى شهر8-2025
وهو كان ملف الـ سي إس إس الخاص بالصفحة (كوم) الذي تم تحديثه عند حلول عيد الأضحى 2025 
لأن فيه أي في:(ملف الـ سي إس إس الخاص بالصفحة (كوم)) توجد بيانات جديدة تخص (عرض أكثر/ عرض أقل)
لا توجد في الملف القديم التابع للصفحة (تست) الذي هو أقدم من فترة حلول عيد الأضحى 2025 
*/

/*جديد 2025 لأصوات محاضرة الترضي*/
    .audio-container audio {
      width: 100%;
    }

/*جديد 2025 لأوهام قدوري*/
/* <p> لو أردت عنوان على زر مستطيل رصاصي ويسدل شرح في مستطيل رصاصي لكن شرطه استعمال "تاغ بي" خاص */

        /* ____ Begin جديدة لتكبير عبارة صغيرة الحجم في خطه ____ */
		<style>
		#sname {
			/*margin-top: 10px;
			margin-bottom: 10px;
			color: rgba(1,1,1,0.7);*/
		}
		#sname a {
			/*font-weight: bold;
			font-size: 4em;*/
			transition: all 500ms;
		}
		#sname a:hover {
			font-size:20px;
			font-size-adjust: 20px;
			color:#0000cd;    /* css تغيير اللون لابد يكون من هنا لا من الكود، لو احتجت اكتب غير هذا الـ*/
		}
		</style>


    /* ____ Begin عرض أقل ثم زر عرض أكثر ثم ينزل الزر ____ */
    <style>
		.max-lines {
		display: block;/* or inline-block */
		background-color:yellow; /*#fbf9f7;*/
		text-overflow: ellipsis;
		word-wrap: break-word;
		overflow: hidden;
		max-height: 0.0em
		}
    </style>

details > summary {
  padding: 4px;
  width: 200px;
  background-color: #eeeeee;
  border: none;
  box-shadow: 1px 1px 2px #bbbbbb;
  cursor: pointer;
}

details > p {
  background-color: #eeeeee;
  padding: 4px;
  margin: 0;
  box-shadow: 1px 1px 2px #bbbbbb;
}


/*يتبع السابق لكن لو أردت عنوان على زر بدون مستطيل رصاصي ويسدل شرح ليس في مستطيل رصاصي*/
.button{
    background: #333;
    padding: 5px;
    border-radius: 10px;
    color: #fff;
    max-width: 25%;
    font-weight: 800;
    text-align: center;
    outline: none;
    
    /*remove text highlighting (easy to double click and highlight)
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently
    supported by Chrome and Opera */
}

details summary.button::-webkit-details-marker {
  display:block; /*remove the arrow of the details tag لا تشتغل في الحالتين */
}

details[open] summary{
  background: #dcdcdc;    /*change background when button is 'open'*/
}
/*---------------------------------------------------*/


	.div_image {
		text-align:center;
		margin-top:10px;
		padding-bottom:30px;
	}
/*---------------------------------------------------*/


	/*المحاضرة اللغة العربية عبد الحميد*/

        /*.ibnuhazm_______Noto Nastaliq Urdu خط أوردو */
	.ibnuhazm {
		/*Noto Nastaliq Urdu  -  'Amiri Quran'  -  Aref Ruqaa Ink*/
		font-family: 'Noto Nastaliq Urdu', 'Simplified Arabic';
		font-size: 14pt; !important;
		font-weight: 500;
		line-height: 45px;	
		color: goldenrod;
	}			

	/*.ibnuhazm2______Aref Ruqaa Ink أحمر للغة العربية*/
	.ibnuhazm2 {
		font-family: 'Aref Ruqaa Ink', 'Tahoma', 'Simplified Arabic';
		font-size: 17pt; !important;
		font-weight: 100;
		line-height: 45px;	
		color:goldenrod;
	}

	/*.Aref-Ruqaa______ أسود عادي*/
	.Aref-Ruqaa {
		font-family: 'Aref Ruqaa', Simplified Arabic;
		font-size: 14pt; /*default*/
	}
		.Aref-Ruqaa-24pt {
			font-family: 'Aref Ruqaa', serif;
			font-size: 24pt;
		}

/*---------------------------------------------------*/

/*المحاضرة اللغة العربية عبد الحميد*/

    /*Was <style> in Master*/

	.Amiri {
	  font-family: 'Amiri', Simplified Arabic;
	}
		.Amiri_Quran {   /*متوسط الباهر فيه النقط والتشكيل بالأحمر*/
		  font-family: 'Amiri Quran', Simplified Arabic;
		}

	.Marhey {
	  font-family: 'Marhey', Simplified Arabic;
	}	
	.Lateef {
	  font-family: 'Lateef', Simplified Arabic;
	}	
    /*Was <style> in Master*/

	p {
		margin-top: 20px;
	}

   	/*ol { + ul { تم حذفه بعد العيد الكبيرة 2025
      line-height: 30px; by default
	}*/

html {
  scroll-behavior: smooth;
}

	.btn_num {
		float:left;
		padding-left:40px;
		/*float:left;
		padding-right:60px;*/
		font-weight: 100px;
		font-size: 8pt;
	}

    /* margin-top
	توب بإزاحة من أعلى فقط إما بالزائد أو بالناقص
	-----------------------------------------------*/
	.top0 {
		margin-top:0px;
	}

	.top5 {
		margin-top:5px;
	}
		.top-5 {
			margin-top:-5px;
		}
	.top10 {
		margin-top:10px;
	}
		.top-10 {
			margin-top:-10px;
		}
	.top15 {
		margin-top:15px;
	}
		.top-15 {
			margin-top:-15px;
		}
	.top20 {
		margin-top:20px;
	}
		.top-20 {
			margin-top:-20px;
		}
	.top25 {
		margin-top:25px;
	}
		.top-25 {
			margin-top:-25px;
		}
	.top30 {
		margin-top:30px;
	}
		.top-30 {
			margin-top:-30px;
		}
	.top35 {
		margin-top:35px;
	}
		.top-35 {
			margin-top:-35px;
		}
	.top40 {
		margin-top:40px;
	}
		.top-40 {
			margin-top:-40px;
		}

	.top45 {
		margin-top:45px;
	}
		.top-45 {
			margin-top:-45px;
		}

    /* padding
	كلامه بإزاحة من أعلى ويمين وأسف مع ثبات الأيسر عل رقم 30 دائما
	-----------------------------------------------*/
	/*top:5px لبداية أول سطر في الكووت لفقرة: وقال أيضا*/
	.kala_5px {
		padding:5px 25px 0px 30px;
	}
	/*top:20px لببقية الأسطر في الكووت لفقرة: وقال أيضا*/
	.kala_20px {
		padding:20px 25px 0px 30px;
	}

							/* الباقي أبقيته للبرامج الأقدم من أوهام قدوري
							كلامه بإزاحة من أعلى ويمين وأسف مع ثبات الأيسر عل رقم 30 دائما
							-----------------------------------------------*/
							.kala_0px {
								padding:0px 25px 0px 0px;
							}
							.kala_10px {
								padding:10px 25px 0px 0px;		
							}
							.kala_15px {
								padding:15px 25px 0px 0px;		
							}

							.kala_25px {
								padding:25px 25px 0px 0px;
							}
							.kala_30px {
								padding:30px 25px 0px 0px;
							}
							.kala_35px {
								padding:35px 25px 0px 0px;
							}
							.kala_40px {
								padding:40px 25px 0px 0px;
							}
							.kala_45px {
								padding:45px 25px 0px 0px;
							}
                                .slideshow-containerMob {
                                    position: relative;
                                    background-color: yellow;/*#333;*/
                                    /*height:454px;*/
                                    /* background-color: rgba(90, 125, 0, 0.0); /* 0.5  */
                                }

                                /**/
                                .mySlidesMob {
                                    margin-top: -30px;
                                    padding-left: 15px;
                                    display: none;
                                    text-align: center;
                                    background-color:red; /*#fff;*/
                                }

                                /* Next & previous buttons */
                                .prevMob, .nextMob {
                                    cursor: pointer;
                                    position: absolute;
                                    top: 50%;
                                    width: auto;
                                    margin-top: -60px; /* 0px; */ /* in ibnHazm was: -30px; */
                                    padding: 16px;
                                    color: #b3b3b3; /*#ddd; #888;*/
                                    font-weight: bold;
                                    font-size: 20pt;
                                    /* border-radius: 0 3px 3px 0;*/
                                    user-select: none;
                                }

                                /* Position the "prevOrg button" to the left */
                                .prevMob {
                                    position: absolute;
                                    right: 0;
                                    border-radius: 3px 0 0 3px; /* ??????? ?????? */
                                }

                                /* Position the "next button" to the right */
                                .nextMob {
                                    position: absolute;
                                    left: 0;
                                    border-radius: 0px 3px 3px 0px;
                                }

                                    /* On hover, add a black background color with a little bit see-through */
                                    .prevMob:hover, .nextMob:hover {
                                      /*background-color: #717171;*/ /* rgba(0,0,0,0.8);  /* Was in Org: #717171; a bit gray */
                                        color: #ddd; /*#888; #fff;*/
                                    }

                                .dot_containerMob {
                                    /*text-align: center;*/
                                    /*padding: 6px;*/
                                    background-color: #fff; /*#ddd;*/
                                    height: auto; /*40px;*/
                                    line-height: 15px;
                                    width: 130px; /*240px;*/
                                    margin-left: auto;
                                    margin-right: auto;
                                }

                                /* The dots/bullets/indicators */
                                .dotMob {
                                    cursor: pointer;
                                    height: 10px; /*Was:12px*/
                                    width: 10px; /*6px;*/
                                    margin: 0 2px; /*0 2px;*/
                                    background-color: #bbb;
                                    border-radius: 50%;
                                    display: inline-block;
                                    transition: background-color 0.6s ease;
                                }
                                    /* Add a background color to the active dot/circle */
                                    .dotMob.active, .dotMob:hover {
                                        background-color: #717171; /*ORG #717171*/
                                    }


/* __________________________*/
/* style_new1 : WAS in style-general*/
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^*/

            /* #595959; /* #4d4d4d; ??? ?? ????? ???? ????? ?? ?????? ??? ?????? */
            /*color:#9e755f; /* Fis01TocOldFihrast.aspx ??? ?? ????? ??? ??? ?????? - ???? ?? ????? ???? ??????*/
            /* -------------------------------------------------------------- */
            /*color:#737373; + #8c8c8c; /* ??? ?? ????? ???? ????? ?? ?????? ??? ?????? */
            /* -------------------------------------------------------------- */
            /*color:#e90606; /* ??? ?? ????? ???? ??? ?????? */
            /*color:#006699; /* ??? ?? ????? ???? ??? ?????? */
            /*color:#3f8640; /* ??? ?? ????? ???? ??? ?????? */
            /*color:#564034; /* ??? ?? ????? ??? ?????? - ????? ????*/


                        /* _______________________________________________________________________
                        style-general.css ?????? ?? ??????? ?? ????? ??????
                        _________________________________________________________________________ */


                                                /* ??????? ?????? ?? ?????? */
                        #img6-12-70 {
                            width: 12.70%;
                            float: left;
                        }
                        /* ??????? ?????? ?? ?????? */
                        #img6-12-69 {
                            width: 12.69%;
                            float: left;
                            /* .mainbar ??? ???? ????? color:Black; */
                        }

                                            /* ??????? ??????  */
                        /*???? ???????? ??????? ?????? ???????*/
                        #masnum1, #masnum2, #masnum3 {
                            top: -50px;
                            position: relative;
                            z-index: 5;
                        }
                        /* _______________________________________________________________________
                        style-general.css ?????? ?? ??????? ?? ???
                        _________________________________________________________________________ */


	/* ?????? ????  ?? ???? ??? ?? ???? ??????? ??????? ??????? */
	/*.pagination ????? ?? ???? ??*/
	.no {
		cursor: not-allowed;
		/* by Def white : background-color:#fff;*/
		/* works when other prob chosen other than [not-allowd] , by Def coler red color #e90606;*/
		/* color: #bfbfbf;*/
	}

	/* ???? ?? ???? ?????? ?? ??? ???? ? ?????? ?? ??? ?? ?? ?????*/
											/*.ssocial-links {
												cursor: url(/images/andalus/pic1.jpg), auto;
											}*/
	/* class="ssocial-links" ???? ?????? ?? ??? ??????*/


	/*a href on hover تظهر أيقونة مكبر صوت مستخدمة في زر الشعر لكن ليس عن طريق الهوفر كما وظيفتها هنا حيث هنا تخدم مع */

	/*.url {cursor: url(/images/tip_45_45.jpg),auto;}*/   /*(/images/ico/speaker.ico)*//*lpin.cur*/



	/*قارن بين طريقة الأسفل مع طريقة في الأعلى*/
	/*compare bellow with upper: div.classname a:hover {..  & span.classname a:hover {.. */


	/* هذه صور من كلام ابن حزم يمكن تنفيذها مباشرة داخل الكود هكذا
	<span style="cursor: url(/images/ico/favicon.ico),auto;">الأبحاث*</span>
	*/

	/*
	.ssocial-links {
		cursor: url(/images/ico/favicon.ico), auto;
	}

	.maratib_ijma {
		cursor: url(/images/ico/maratib_ijma_90_128.ico), auto;
	}

	.tasaddara {
		cursor: url(/images/ico/tasaddara-128-85.ico), auto;
	}

	.da_oonya {
		cursor: url(/images/ico/da_oonya.ico), auto;
	}

	.wa_illa_fa_oodu {
		cursor: url(/images/ico/wa_illa_fa_oodu.ico), auto;
	}

	.bazilo_nafsahu {
		cursor: url(/images/ico/bazilo_nafsahu.ico), auto;
	}
	*/


	body {
		/*margin: 0px */
				/*1 document.getElementById("mySidenav").style.top = "136px" */
				/*2 document.getElementById("overlay").style.top = "137px"; */
		margin: 0px 0px 0px 0px
	  /*margin:     10px      10px */

	}




	/* WHY using (box-sizing: border-box;)
			Since the result of using the box-sizing: border-box; is so much better, many developers want all elements on their pages to work this way.
			The code below ensures that all elements are sized in this more intuitive way. Many browsers already use box-sizing: border-box; for many form elements (but not all - which is why inputs and text areas look different at width: 100%;).*/
	/* ?????? ???? ??? ??????? + ???? ??????? ?????? */
	* {
		box-sizing: border-box;
		/*^^^^^^^^^^^^^^^^^^^^^*/
	}



	/* ????? ????? ???? ???? ?? ???????? */
	#swipeme {
		width: 300px; /*100%;*/
		height: 50px; /*100%;*/
		background-color: bisque;
		color: black;
		text-align: center;
		/*padding-top: 20%;*/
		/*padding-bottom: 20%;*/
	}


	/*____________________________________________________*/
	/*بدل تلوين السهمين الأسودين بالأحمر وكتابة سطرين طويلين*/
	/*ضع صورتين لسمين ملونين ثم الغِ هاذين السطرين*/
	/*____________________________________________________*/
	#right_arr_to_show_set1, #right_arr_to_show_set2, #right_arr_to_show_set3, #right_arr_to_show_set4,
	#right_arr_to_show_set5, #right_arr_to_show_set6, #right_arr_to_show_set7, #right_arr_to_show_set8,
	#right_arr_to_show_set9, #right_arr_to_show_set10, #right_arr_to_show_set11, #right_arr_to_show_set12,
	#right_arr_to_show_set13, #right_arr_to_show_set14{
		font-size: 14pt; /*Bef Kadduri 12pt*/
		color:#e90606;
	}
	#left_arr_to_show_set2, #left_arr_to_show_set3, #left_arr_to_show_set4, #left_arr_to_show_set5,
	#left_arr_to_show_set6, #left_arr_to_show_set7, #left_arr_to_show_set8, #left_arr_to_show_set9,
	#left_arr_to_show_set10, #left_arr_to_show_set11, #left_arr_to_show_set12, #left_arr_to_show_set13,
	#left_arr_to_show_set14, #left_arr_to_show_set15 {
		font-size: 14pt; /*Bef Kadduri 12pt*/
		color: #e90606;
	}


	/* Begin ?????? ????? */
	.zoom {
		/*padding: 50px;*/
		/*background-color: green;*/
		transition: transform .2s;
		/*width: 200px;*/
		/*height: 200px;*/
		/*margin: 0 auto;*/
	}

    .zoom:hover {
        /* scale(1.5) */
        cursor: pointer;
        -ms-transform: scale(2.2); /* IE 9 */
        -webkit-transform: scale(2.2); /* Safari 3-8 */
        transform: scale(2.2);
    }
    /* End ?????? ????? */



	/* cellpadding */
	th, td {
		padding: 0px;
	}
	/* cellspacing */
	/* table { border-collapse: separate; border-spacing: 5px; } /* cellspacing="5" */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}
	/* cellspacing="0"  */
	/* valign */
	th, td {
		vertical-align: top;
	}
	/* align (center) */
	table {
		margin: 0 auto;
	}



    /* __________________________________ 1 ________________________ */

	/*_____________________ Begin anchor tag a  _________________________
    By default, a link will appear like this (in all browsers):
    An unvisited link is underlined and blue #0000EE .
                                        ^^^^
    A visited link is underlined and purple #551A8B .
                                     ^^^^^^
                           active link: red #EE0000 .
                                        ^^^ 
    ________________________*/

	a {
		text-decoration: none;
		color:#000; /*ضرورية لأنه غيابها يجعل اللينك بخط أزرق*/
	}
    
    /*___________________
	a:link {
		color:#0000ee;
	}
	_____________________ End anchor tag a  _________________________*/

	.blue_link {
		color: #0000ee; /* وهو فاقع الدرجة <a href:"...">...</a> مثاله */
	}

    /* للنص الذي داخل كووت ، وهو قاتم الدرجة */
	.blue {
		color: #0000cd; /* Medium blue أزرق جيد الدرجة - WAS #3300cc */
	}

    /*_________________________________________________________________.url {cursor: url(myBall.cur),auto;}*/

    /*cursor لو أردت هوفر مختلف عن المعتاد في البرنامج كأن يكون هوفر للشرح مع علامة الإستفهام*/
	div.classname a:hover {
		color: #0000cd; /* .highlight {color:#0000cd} أزرق فاقع قليلا وهو كلاس في سي سي إس هكذا - class="highlight" :وفي الكود هكذا*/
	  /*cursor:zoom-in;*/  /*cursor:help; مع علامة الإستفهام*/
	  /* OR tip cursor: url(/images/tip_45_45.jpg),auto;*/	
	}
	span.classname a:hover {
	  color: #0000cd; /*أزرق فاقع قليلا عن الأصل العلوي*/
	  /*cursor:zoom-in;*/  /*cursor:help; مع علامة الإستفهام*/
	}
				/* html استعماله في
				<a href="/Kutub/Poetry/Poe01Bab01.aspx?fruit=1&fruit1=poe_minal_muhtami_1">
                    <!--__________________-->
					<div class="classname" />
					الـ لينك لكن مع تكبيره بالهوفر الأزرق الفاقع باستخدام الـ كلاس
				</a>

				<!--<a style="cursor:help;">-->

				*/
	/*_________________________________________________________________*/


    /* التالي سبب بقاؤه المنظومات القديمة */
    /* <hanifa>..</hanifa> وإلا فيوجد أفضل ليس بشكل كلاس بل فقط هكذا */

    /* <class="hanifa">..</class> أما التالي فهكذا */
	.hanifa {
		color: #cc00cc; /*مور فاقع*/
	}
		.malik {
			color: #00b3b3; /*سماوي مخضر*/
		}
		.shafi {
			color: #ef9B0F; /*برتقالي بني*/
		}
		.ahmad {
			color: #964B00; /*brown  أخضر May be best on white:#00a86b;  before that Was: #149414;أخضر أبهت*/
		}
		.dawood {
			color: #bd33A4; /*مور مطفي*/
		}


    /* __________________________________ 2 ________________________ */

    /* _________________________________________________________________________________________________________*/
    /* .tip_quran a {  / .tip_hadeeth a {  / .tip_red a {  / .tip_blue a {  / .tip_black a {  مستخدة في تنصيص بألوان */
	/*<a href="#" .... مستخدمة أساس لهوفر في نصوص تاغ إى */
	/* ******************************************************************************************************** */

    .tip_hadeeth a {
        text-decoration: none;
        color:#00b3b3;  /*Now=green teal غامق, .malik*/
    }

    .tip_quran a {
        text-decoration: none;
        color:#00cc00;  /*Now= green فاقع , shafi*  /*Was #46c26c;*/
    }

    .tip_black a {
        text-decoration: none;
        color:#000; /*أسود*/
    }

    .tip_red a {
        text-decoration: none;
        color:#cc0066; /*أحمر*/
    }

    .tip_blue a {
        text-decoration: none;
        color:#408ee6; /*Medium blue  #0000cd أزرق جيد الدرجة*/
    }

    .tip_green a {
        text-decoration: none;
        color:#416a6a; /*green on light-green of midmarquee*/
    }


               /* __________________________________ 3 ________________________ */
               /*______________ التالي يمكن حذفه لكن بعد التأكد من تغيير كل  الكود المتصل به ________________*/

                    /* التالي متى يستخدم في التنصيص الكووتس 
					quotes: '\201d' '\201c';
					color:#cc0066;*/   /*أحمر*/
					/*icon: url('/images/braket1.gif');*/

                /*_______ #0000cd; في الأزرق الأصلي*/
				q { 
					color:#408ee6; /*highlight*/    /*#da8a67; brown*/
					/* margin-top:165px; لم يقبل إنزال سطر الكووت قليلا إلى أسفل*/
					/*icon: url('/images/braket1.gif');*/
				}
				q:before {
					content: open-quote; color:#cc0066; font-size: 14pt; /*quote=dark redأحمر*/
				}
				q:after  {
					content: close-quote; color:#cc0066; font-size: 14pt;
				}


                /*_______ في الأخضر*/

				 /*أخضر قاتم*/
				q_dark_green {
					quotes: '\201d' '\201c';
					color:#006600;
				}
				q_dark_green:before {
					content: open-quote; color:#cc0066; font-size: 14pt;
				}
				q_dark_green:after  {
					content: close-quote; color:#cc0066; font-size: 14pt;
				}
                    /*أخضر متوسط*/
					q_mid_green {
						quotes: '\201d' '\201c';
						color:#00a86b;
					}
					q_mid_green:before {
						content: open-quote; color:#cc0066; font-size: 14pt;
					}
					q_mid_green:after  {
						content: close-quote; color:#cc0066; font-size: 14pt;
					}
						/*أخضر هافت*/
						q_light_green {
							quotes: '\201d' '\201c';
							color:#00b3b3;
						}
						q_light_green:before {
							content: open-quote; color:#cc0066; font-size: 14pt;
						}
						q_light_green:after  {
							content: close-quote; color:#cc0066; font-size: 14pt;
						}



                /*_______ في الأحمر*/
 				/*أحمر برتقالي*/
				q_orange_red {
					quotes: '\201d' '\201c';
					color:#f86021;
				}
				q_orange_red:before {
					content: open-quote; color:#cc0066; font-size: 14pt;
				}
				q_orange_red:after  {
					content: close-quote; color:#cc0066; font-size: 14pt;
				}
					/*أحمر هافت*/ /*#f86021;*/
					q_light_red {
						quotes: '\201d' '\201c';
						color:#cc0066;
					}
					q_light_red:before {
						content: open-quote; color:#cc0066; font-size: 14pt;
					}
					q_light_red:after  {
						content: close-quote; color:#cc0066; font-size: 14pt;
					}


				/*__________Begin جديد لمقال الترضي على العلماء __________*/

				hanifa {
					color: #cc00cc; /*مور فاقع*/
				}
				malik {
					color: #33a4ab; /*سماوي مخضر*/
				}
				shafi {
					color: #ef9B0F; /*برتقالي بني*/
				}
				ahmad {
					color: #964B00; /*أخضر May be best on white:#00a86b;  before that Was: #149414;أخضر أبهت*/
				}
				dawood {
					color: #bd33A4; /*مور مطفي*/
				}
				/*__________End جديد لمقال الترضي على العلماء __________*/


				/*2 مستخدمة في محاضرة المجمع أزرق رقيق نصوص ابن حزم*/ /*تضم نص بين ظفريها*/

				/*inner text=blueأزرق*/
				ln_blue {
					/*font-family: 'amiri';*/
					color: #0000cd; /*Medium blue  #0000cd أزرق* جيد الدرجة*/   /* WAS: blue*/
					background-color:#cfc;
					/*width:100%*/
				}

                /*inner text=green*/
				ln_green {
					/*font-family: 'amiri';*/
					color:#00b3b3;
					background-color:#cfc;
					/*width:100%*/
				}

				/*هذا جيد للآيات القرآنية والحديث*/

                                   /* _______________________ */
			    /*<ln_red>..</ln_red> ومما يستخدم بأرضية مختلفة ليست بيضاء*/
				ln_red {
					/*font-family: 'amiri';*/
					color:#d07519; /*#cb6600;*/ /*#c40000;*/ /*أحمر يميل إلى البني*/
					background-color:#e1f6e1;  /*#cfc; أخضر أدكن غير جيد*/
					/*width:100%*/					
				}

				/*جديد بعد ترضي العلماء*/

                             /* _______________________ */
			    /*<red>..</red> ومما يستخدم بأرضية بيضاء*/
				red {
					color:#dc143c; /* = crimson; /*أحمر للفت الانتباه + رضي الله عنه*/
				}

			    /*<blue>..</blue> ومما يستخدم بأرضية بازيليا*/
				blue {
					color:#3300cc; /* = crimson; /*أحمر للفت الانتباه + رضي الله عنه*/
				}

				/*جديد بعد ترضي العلماء*/

				/*<hd2>..</hd2> ومما يستخدم*/
				hd2 {
					/*font-family: 'amiri';
					font-size: 14pt;*/
					font-weight: 600;
					color: goldenrod;
				}

				/*جديد بعد ترضي العلماء*/

				/*<ibnuhazm>..</ibnuhazm> ومما يستخدم*/
                /* .ibnuhazm { وهي مكرر في شكل كلاس في*/
				ibnuhazm {
					font-family: 'Noto Nastaliq Urdu', 'Simplified Arabic';
					font-size: 14pt; !important;
					font-weight: 500;
					line-height: 45px;	
					color: goldenrod;
				}

				/*جديد بعد ترضي العلماء*/

				/*<gray>..</gray> ومما يستخدم*/
				gray {
					color: #868686; /*رصاصي داكن لخفض الانتباه*/
				}

				gray_light {
					color: #f4f0ec; /*#dcdcdc;*/ /*#d3d3d3;*/ /*#bebebe;*/ /*رصاصي هافت لخفض الانتباه*/
				}

				black {
					color: #000;
				}

				highlight {
					color: #408ee6;  /*#408ee6; = highlight أزرق فاتح وهو نفسه*/
				}


    /* __________________________ */
    /* class="highlight" ومما يستخدم كلاس*/
	.highlight {
		color: highlight /*أزرق سماوي*/
	}

	.black {
		color: #000;
	}

    /*رصاصي داكن لخفض الانتباه*/
	.gray {
		color: #868686;
	}
    /*رصاصي هافت لخفض الانتباه*/
	.gray_light {
		color: #bebebe;
	}

	.poem {
		color:goldenrod;  /* .ibnuhazm ذهبي للشعر مأخوذ من لون كلاس*/
	}

                   
	/* __________________________________ 4 ________________________ */
	.hover-me-aya {
		/* padding-top:16px; */
		/* text-align:center; */
		/*font-family: Simplified Arabic;*/
		/*font-size: 15pt; /*  font-weight:900; 33pt */
	}

		.hover-me-aya a {
			text-decoration: none;
			color: #32CD32; /*lime green*/
			background-color: transparent;
		}

			.hover-me-aya a:hover {
				text-decoration: none;
				color: #000;
				background-color: transparent;
			}

	.hover-me-had {
		/* padding-top:16px; */
		/* text-align:center; */
		/*font-family: Simplified Arabic;*/
		/*font-size: 15pt; /*  font-weight:900; 33pt */
	}

		.hover-me-had a {
			text-decoration: none;
			color: #00a86b; /*#00b3b3;*/ /*#00a86b; rgb(0,168,107) jade*/
			background-color: transparent;
		}

			.hover-me-had a:hover {
				text-decoration: none;
				color: #000;
				background-color: transparent;
			}


	/* __________________________________ 5 ________________________ */

	.hover-hazm { /*أصل أزرق وعند الهوفر أسود*/ 
	}

		.hover-hazm a {
			text-decoration: none;
			color: Highlight; /*أدكن من هايلايت ومريح للعين أزرق سماوي داكن*/
			background-color: transparent;
		}

			.hover-hazm a:hover {
				text-decoration: none;
				color: #000;
				background-color: transparent;
			}


	/* __________________________________ 6 ________________________ */

	.hover-me { /*أصل رصاصي وعند الهوفر أسود*/ 
		font-family: amiri;
		font-size: 14pt;
		font-weight: 100;
	}

		.hover-me a {
			text-decoration: none;
			color: #868686; /*gray*/
			background-color: transparent;
		}

			.hover-me a:hover {
				text-decoration: none;
				color: #000;
				background-color: transparent;
			}
      
    /*hover-me-red معكوس*/
	.hover-me-gray { /*أصل أسود وعند الهوفر رصاصي*/ 
	}

		.hover-me-gray a {
			text-decoration: none;
			color: #868686; /*gray*/
			background-color: transparent;
		}

			.hover-me-gray a:hover {
				text-decoration: none;
				color: #000;
				background-color: transparent;
			}

    /* hover-me-red غيرته لأبيض بهوفر رصاصي لاستخدامه على الشاشة السوداء لصفحة مداواة النفوس في الإنتقال للصفحة الموالية*/
    .hover-me-red {
    }
 
        .hover-me-red a {
            text-decoration: none;
            color:#dc143c; /* =crimson;*/
            background-color: transparent;
        }

            .hover-me-red a:hover {
                text-decoration: none;
                color:#000;
                background-color: transparent;
            }

    .hover-mobile {
        /*font-family: Simplified Arabic;
        font-size: 14pt;
        font-weight: 100;*/
    }

        .hover-mobile a {
            text-decoration: none;
            color: #aaa;
            background-color: transparent;
        }

            .hover-mobile a:hover {
                text-decoration: none;
                color: #000;
            background-color: transparent;
        }




	/* black turns to gray */
					/* __________________________________ 7 ________________________ */
					/*Was hover-me-moor*/
					.hover-black-on-white {
	}

		.hover-black-on-white a {
			text-decoration: none;
			color: #000;
			background-color: transparent;
		}

			.hover-black-on-white a:hover {
				text-decoration: none;
				color: #686868; /* #3b3b3b; */
				background-color: transparent;
			}


	/* __________________________________ 8 ________________________ */
	.hover-white-on-black {
	}

		.hover-white-on-black a {
			text-decoration: none;
			color: #fff;
			background-color: transparent;
		}

			.hover-white-on-black a:hover {
				text-decoration: none;
				color: #e0e0e0; /* #e0e0e0;*/
				background-color: transparent;
			}


    .hover-yellow-on-white a {
        text-decoration: none;
        color: yellow;
        background-color: transparent;
    }

        .hover-yellow-on-white a:hover {
            text-decoration: none;
            color:#e0e0e0; /* #686868 */
            background-color: transparent;
        }

                    /* __________________________________________________________ */
                    /* color: ?? cancelled because of class Aya & class had */

                    /* $$   DELETE use : class="brieffihrast" INSTEAD      ????? ???? ??? ????? ????? ???? */
                    .aya {
                        background-color: #fbfbfb;
                        color: green;
                        font-family: amiri;/*Calibri;*/
                        font-size: 14pt;
                        font-weight: 500;
                    }

                    .had {
                        background-color: #fafafa; /*لون خفيف جدا يكاد لا يظهر*/ /*#f8f8f8;هذا أدكن*/
                        color: plum; /*#a6a6a6;*/
                        font-family: amiri;/*Calibri;*/
                        font-size: 14pt;
                        font-weight: 500;
                    }

                    .tip {
                        background-color: #fafafa; /*#f8f8f8;هذا أدكن*/
                        color: coral; /*#a6a6a6;*/
                        font-family: amiri;/*Calibri;*/
                        font-size: 14pt;
                        font-weight: 500;
                    }


/* __________________________________ 9-a general خط فاصل طويل في المنتصف كما في مداواة النفوس ________________________ */
.horizontal-rule {
    height: 15px;
 /* border-top: #d9d9d9 1px solid ; Was */
    border-top: #d9d9d9 1px solid; /* Was #e6e6e6 */
    margin-left: 100px;  /* 100px; */
    margin-right: 100px; /* 100px; */
    margin-top: 0px;    /* 40px; */
	//background-color:yellow;
}


/* __________________________________ 9-b special خط فاصل قصير محاداة اليمين كما سجل الزوار________________________ */
.horizontal-rule2 {
    height: 5px;
 /* border-top: #d9d9d9 1px solid ; Was */
    border-bottom: #d9d9d9 1px solid; /* Was #e6e6e6 */
    margin-left: 100px;  /* 850px;  100px; */
    margin-right: 100px;   /* 0px;    100px; */
    margin-top: 0px;    /* 10px;   40px; */
	//background-color:red;
}
/* التالي في حال احتياج خط مثل الهامش
.horizontal-rule3 {
    height: 5px; width:170px;
    border-bottom: #000 1px solid;
    margin-top: 0px;
}*/
.horizontal-rule_hidden {
    height: 15px;
    border-top: red 1px solid;
    margin-left: 100px;
    margin-right: 100px;
    margin-top: 0px;
}



/* End  */
/* ============= */

.container-faharest {
    float: left;
    height: 235px;
    cursor: pointer;
    text-align: right;
    /* ?? ???? */
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


/* =============== H3 small logo =============== */
/*    Menu #3 with 4 links on top-left */
h1 {
    position: absolute;
    
    right: 90px; /*left of menu icon on top-right*/
    /*top: -16px;*/
    /*font-size: 18pt;*/

    text-shadow: 3px 3px silver;
    font-family: amiri;
    font-weight: 900;
    color: #e90606;
}

h2 { position: relative; top: 0px; right: 0px; font-family: Simplified Arabic; font-size: 0pt; }
/*_____________________________________*/


/*     Menu #1 with main all links on top-middle*/
h3 {
    position: absolute;
    
    right: 90px; /*left of menu icon on top-right*/
    /*top: -4px;*/
    /*font-size: 18pt;*/

    text-shadow: 3px 3px silver;
    font-family: amiri;
    font-weight: 900;
}

h6 { position: relative; top: 0px; right: 0px; font-family: Simplified Arabic; font-size: 0pt; }
/*_____________________________________*/


/*   Menu #2 fake menu */
h4 {
    position: absolute;

    right: 90px; /*left of menu icon on top-right*/
    /*top: -12px;*/
    /*font-size: 18pt;*/

    text-shadow: 3px 3px silver;
    font-family: amiri;
    font-weight: 900;
    color: #e90606;
}

h5 { position: relative; top: 0px; right: 0px; font-family: Simplified Arabic; font-size: 0pt; }
/*________________________________________________


/* adjustment for anchor tag positioning with fixed header*/
.anchored_53_px:before {
    content: '';
    display: block;
    visibility: hidden;
    /*position: relative;*/
    /*width: 0;*/
    height: 53px; /* 53 Height of header - 100px; */
    margin-top: -53px;
}

/* adjustment for anchor 80px */
.anchored:before {
    content: '';
    display: block;
    visibility: hidden;
    height: 80px;
    margin-top: -80px;
}

/* adjustment for anchor 130px */
.anchored_title:before {
    content: '';
    display: block;
    visibility: hidden;
    height: 130px;
    margin-top: -130px;
}

/* adjustment for anchor 190px */
.anchored_shareet:before {
    content: '';
    display: block;
    visibility: hidden;
    height: 190px;
    margin-top: -190px;
}

/* adjustment for Goldziher library 230px */
.anchored_maktaba:before {
    content: '';
    display: block;
    visibility: hidden;
    height: 300px;
    margin-top: -300px;
}

/* .mainbar */
/*Gray;*/
.p-gray {
    color: #dc143c; /* =crimson;*/
}

.p-center {
    text-align: center;
    color: coral;
}

/*#808080;*/
.p-small {
    text-align: center;
    font-size: 14pt; /*Bef Kadduri 12pt*/
    font-weight: 500;
    color: violet;
}


/* ??? ??? ??? ??? 
     _____________________
        ??? ??? ???? ?? ?????? ?????? 
        ???? ??? ?? ?? ???? ????? ??? ?????? ??? ????? ??? ???? ????
                Master + Def ??? ?? ????? ??? ?? */
#arrow_header {
    display: table-cell;
    vertical-align: bottom;
    /* ??? ????? ?? ???? ????? width:350px; height:215px; text-align:center;
        text-align:center;*/
    /*background-color: chartreuse; /* ??????? /*antiquewhite;*/
}

/* #3 ??? ??? ??? ??? */
/* .abwab_titles ??????
        : ?????? ?? ??????? ??????
        div id="2000" class="abwab_titles" onmouseover="mouseover_fihrast('101','lbl0','2000')" onmouseout="mouseout_fihrast('101','lbl0','2000')" onclick="my_renderList_muh('div0_text', 'span0_text', 'renderList0', '120', 0, 0);">
    */
.abwab_titles {
    float: right;
    overflow: auto;
    width: 85%;
    height: 47px;
    background-color: #f8f8f8; /*رصاصي هافت*/
    color: #666;
    padding: 10px 20px 0 0;
    cursor: pointer;
    border-bottom: 2px solid #fff;
}
/* ??? ??? ??? ??? */


/*______________________________________________________________________________________________________________________________*/
/*_____________________________________________________________Begin  .mainbar _________________________________________________*/
.mainbar {
    font-family: 'amiri';
    font-size: 14pt; font-weight: 500; line-height: 40px;
    text-align: right;
    /*color: #000; في حال تكبير الخط لا يظهر مفعول كووت لنصوص ابن حزم التي ينبغي أن تكون بالأزرق*/
}

    .mainbar .strong {
        font-weight: 600;
        /*color: #000;*/
    }
    /* خاص بـاسم ابن حزم */
    .mainbar .hd {
        /*font-family: 'Simplified Arabic'; حذفت حتى تتماشى مع كل الخطوط وأحجامها
        font-size: 14pt;*/
        font-weight: 600;
        color: #910000;
    }
    /* عبارة مميزة */
    .mainbar .hd2 {
        font-family: 'amiri';
        font-size: 14pt;
        font-weight: 600;
        color: goldenrod;
    }

    /* 12pt; ????? ???? ???? */ /*used in Def page ?? ??? ? ????*/
    .mainbar .title {
        color: #aaa; /*???? ???? ??? ????? ?????*/ /*#e90606; ????*/
        font-size: 14pt; /*Bef Kadduri 12pt*/
    }
                                /*???????*/
                                .mainbar .stressred {
                                    font-family: 'amiri';
                                    font-size: 14pt;
                                    font-weight: 600;
                                    color:    yellow;
                                }
    /*???? ????*/
    .mainbar .stress {
        color:#910000;  /* WAS: #7f1734 */
    }
    /* #b00000; or  orangered or tomato*/ /*???? ???? ???? ?????? ????? ??? ???? ??*/

                                .mainbar .head {
                                    border-bottom: #a3a5a9 0px solid;
                                    height: 10px;
                                    padding-top: 3px;
                                    padding-bottom: 30px;
                                    color: aqua; /*was #000 ???? ???? ??????*/
                                    font-size: 25pt; /* 40pt */
                                }
    /* ------------------------------- */


    /* ------------------------------- */
    /* 40pt; ????? ????? ??? ?????? */
    .mainbar .head2 {
        border-bottom: #a3a5a9 0px solid;
        height: 10px;
        padding-top: 3px;
        padding-bottom: 30px;
        color: #000;
        font-family: 'amiri';
        font-size: 20pt; /* 40pt */
        font-weight: 100;
    }

    .mainbar .head2 {
        border-bottom: #a3a5a9 0px solid;
        height: 10px;
        padding-top: 3px;
        padding-bottom: 30px;
        color: #000;
        font-size: 20pt; /* 40pt */
        font-weight: 100;
    }


    /* head_zahabi أنواع */
    /*Hazmmaster.aspx لأن هذا الفونت ليس معتمد في غوغل فقد نقلت كود خاص للعمل في حالة الموبايل أو جهاز آخر غير هذا في*/
    /*function check_isMobile() في هذه الفنكشن*/

						/*_____________ font-size: 24pt; حجم كبير للعناوين ________________*/
						/*************************************************************/

						/*هل تحتاج التالي ؟؟؟*/
						.mainbar .head_zahabi {      /*40pt  goldenrod*/
							border-bottom: #a3a5a9 0px solid;
							height: 10px;
							padding-top: 3px;
							padding-bottom: 30px;
							color: goldenrod;
							font-family: 'Aldhabi', 'Marhey', Simplified Arabic;
							font-size: 24pt; /*40pt;*/
							font-weight: 100;
						}
						/*_____________________________*/
						/*******************************/


                        /*هل تحتاج التالي ؟؟؟*/
						.mainbar .head_zahabi_medium {      /*30pt  goldenrod*/
							border-bottom: #a3a5a9 0px solid;
							height: 10px;
							padding-top: 3px;
							padding-bottom: 30px;
							color: goldenrod;
							font-family: 'Aldhabi', 'Marhey', Simplified Arabic;
							font-size: 20pt; /*30pt;*/
							font-weight: 600;
						}
                        /*هل تحتاج التالي ؟؟؟*/
						.mainbar .head_zahabi_small {      /*25pt  goldenrod*/
							border-bottom: #a3a5a9 0px solid;
							height: 10px;
							padding-top: 3px;
							padding-bottom: 30px;
							color: goldenrod;
							font-family: 'Aldhabi', 'Marhey', Simplified Arabic;
							font-size: 18pt; /*25pt;*/
							font-weight: 500;
						}
						/*هل تحتاج التالي ؟؟؟*/
						.aldhabi-25pt {
							font-family: 'Aldhabi', 'Aref Ruqaa', Simplified Arabic; /* Lateef */
							color: goldenrod;
							font-size: 20pt; /*.aldhabi-18pt لو الخط ظهر صغيراً فإن الأصل أعلاه كان*/
							font-weight: 500;
							/*line-height: 60px;*/
						}

						/*هل تحتاج التالي ؟؟؟*/

						/*جيدة فقط لسطر واحد*/
						.aldhabi {
							font-family: 'Aldhabi', 'Marhey', Simplified Arabic;
							font-size: 14pt; /*22pt;*/
							font-weight: 100
						}
								/* ?? ?? ????????
								.mainbar .head2              { #000; + font-size: 40pt;
								.mainbar .head_zahabi        { #000; + font-size: 40pt;  ??????
								.mainbar .head_zahabi_medium { #000; + font-size: 30pt;
								.mainbar .head_zahabi_small  { #000; + font-size: 25pt;
								.blackonwhite                { #000
								.whiteonblack_default        { #fff 
								.center_poem                 { font-size: 22pt;
								*/


								/* no linke code
											.droid-arabic-kufi {
												font-family: 'Droid Arabic Kufi', serif;
											}

											/* no linke code
											.droid-arabic-naskh {
												font-family: 'Droid Arabic Naskh', serif;
											}
											/* no linke code
											.lateef {
												font-family: 'Lateef', serif;
											}
											*/
								/* no linke code
											.thabit {
												font-family: 'Thabit', serif;
											}
											*/

    .mainbar .hdonblack {
        /*font-family: 'Simplified Arabic';/* .mainbar ????? ??? ?? ???? ?????? ??? */
        /*font-size: 14pt;
            font-weight: 500;*/
        color: #ffcc99; /*ORG #ffcc99*/
        /*background-color: #333;*/
    }
    /* ??? ??????? ?? ???? ???? ?? ??? ??????? ????? ??? ????? ??????? */
    /* .mainbar ??????? ?? ?? ?????? ?????? ??????? ? ???? ???? ???? ??? ????
                    .hdonblack {
                        font-family: calibri;
                        font-size: 12pt;
                        font-weight: 500;
                        color: #ffcc99;
                    }*/

    /* #fff ????? ??? ???? ??? ????? ????? */
    .mainbar .abyadonblack {
        font-family: amiri;
        font-size: 14pt;
        font-weight: 600;
        color: #fff;
        background-color: #333;
    }

    /* ######################################################## */
    .mainbar .nass {
        font-family: 'amiri';
    }
/* <strong> ???? 
                                        .mainbar .stressblack {
                                            font-family: 'Simplified Arabic';
                                            font-size: 14pt;
                                            font-weight: 900;
                                            color: #000;
                                        }*/


    /*__________________________ ??????_________________________________*/
    .simplified_arabic {
    font-family: 'Simplified Arabic';
    font-size: 30pt;
    font-weight: 100
}

.traditional_arabic {
    font-family: 'Traditional Arabic';
    font-size: 30pt;
    font-weight: 100
}
/*    p {font-family:  Andalus; font-size: 14pt; line-height:30px;}*/ /*trial*/
.trad {
    font-family: Tahoma;
    font-size: 14pt;
    font-weight: 100;
}
/*______________________________________________________________________________________________________________________________*/
/*_____________________________________________________________End  mainbar ____________________________________________________*/




/*_____________________________________________________________Begin  .brief ____________________________________________________*/
.brief {
    direction: rtl;
    height: auto; /* WAS 70px; ??? ???? ??? ???? ?? ??? ?????? ?? ???? ?????? ??? ???????? */ /*  V OLD was 80px; */
    line-height: 30px; /* ???? ???? ???? ????? ?????? ?? ????? ??? ?????  */
    text-align: right;
    padding-top: 30px; /* padding-top:0px; padding-bottom:0px; in Def.aspx */
    border-bottom: #d9d9d9 1px solid; /* #d9d9d9 ???? ????? */ /* was #a3a5a9 ???? */
    color: #404040; /* ?? ???? ??? ?? */
    font-family: 'amiri';
    font-size: 14pt;
    font-weight: 900;
    /*background-color:  aquamarine;*/ /* class="brief" ???? ?????? ??????? ?? ?????? ???? ??? ???*/
}

    /*border-bottom: #a3a5a9 0px solid;*/
    /*height: 10px;*/
    /*padding-top: 3px;*/
    /*padding-bottom: 14px;*/
    /* #000; */
    /* 40pt */

    /* ######################################################## */
    /*.mainbar .head ????? ??*/
    /* .brief .head ????? ????? ????? ?????? ?? ????? ??? ??? + ????? ???? ?????? ?????? */
    .brief .head {
        border-bottom: #a3a5a9 0px solid;
        height: 10px;
        padding-top: 3px;
        padding-bottom: 30px;
        color: #000;
        font-size: 25pt; /* 40pt */
    }
                 /*New ???? ??? ?????? ????? ? ???????? ???? ?????*/  
                .brief .head-mobile {
                    border-bottom: #a3a5a9 0px solid;
                    height: 10px;
                    padding-top: 3px;
                    padding-bottom: 30px;
                    color: #000;
                    /*font-size: 15pt;*/
                }

    /* ????? ???? ???? */
    .brief .title {
        color: #e90606; /*????*/
    }

                                    /*?? ??????ɿ??????*/
                                    .brief .borderbottom {
                                        border-bottom: red 1px solid; /*#e6e6e6 - #a3a5a9*/
                                    }
    /* ____________________ */
    /* كل إى تقع ضمن كلاس بريف */
    /* ******************* */
    .brief a {
        text-decoration: none;
        color: #404040; /*<a .... مستخدمة أساس لهوفر عمود البريف بلون رصاصي غامق + كل الهوفرز الأخرى في  كل الديفولت*/
    }

        .brief a:hover {
            text-decoration: none;
            color: #808080; /*#999999; /*#595959; /* #8c8c8c; /* #808080; /* #737373 /* ??? ?? ???? ????? ??? ?????? */
            /* ??? ????? ????? > */ /* #8c8c8c/ #808080/ #737373/ #666666/ #595959/ #4d4d4d/ #404040 /#333333 */ /* < ??? ????? ?????? */
            /* =======                             ======= */
        }
/*_____________________________________________________________End  .brief ____________________________________________________*/






/*_____________________________________________________________Begin  .brieffihrast ____________________________________________________*/
/* ??? ????? ??????? ?????? */
.brieffihrast {
    font-weight: 500; /*color:#000;*/
}

    /* p ??? ????? ??????
    .brieffihrast p {
        background-color: Yellow;
        font-family:'Simplified Arabic'; font-size:12pt; font-weight:500;
    }
    */

    .brieffihrast a {
        text-decoration: none;
        color: #003399; /*#333399;/*#808080; /* HTML Gray */
    }

        .brieffihrast a:hover {
            text-decoration: none;
            color: #000; /* #595959; /* #4d4d4d; ??? ?? ????? ???? ????? ?? ?????? ??? ?????? */
            /*color:#9e755f; /* Fis01TocOldFihrast.aspx ??? ?? ????? ??? ??? ?????? - ???? ?? ????? ???? ??????*/
            /* -------------------------------------------------------------- */
            /*color:#737373; + #8c8c8c; /* ??? ?? ????? ???? ????? ?? ?????? ??? ?????? */
            /* -------------------------------------------------------------- */
            /*color:#e90606; /* ??? ?? ????? ???? ??? ?????? */
            /*color:#006699; /* ??? ?? ????? ???? ??? ?????? */
            /*color:#3f8640; /* ??? ?? ????? ???? ??? ?????? */
            /*color:#564034; /* ??? ?? ????? ??? ?????? - ????? ????*/
        }
/*_____________________________________________________________End  .brieffihrast ____________________________________________________*/




/*_____________________________________________________________Begin  .briefjump ____________________________________________________*/
/* ??? ????? ?????? */
.briefjump {
    font-size: 14pt
}

    .briefjump a {
        text-decoration: none;
        background-color: #f8f8f8;
        color: #000;
        font-weight: 600;
    }

        .briefjump a:hover {
            text-decoration: none;
            background-color: #fff;
        }

/* ?????? ?? ???? ?? ???? ?? ???? ???? ??????? ???????? ??? ????? */
.brief_no_jump {
    font-family: amiri;
    font-size: 14pt;
    font-weight: 900;
    background-color: #f8f8f8;
}
/*_____________________________________________________________End  .briefjump ____________________________________________________*/





/*_____________________________________________________________Begin .briefjuzu ____________________________________________________*/
/* ??? ????? ????? ?????? */

/* class="tab-content1 briefjuzu"> ???? ??? ??????? ??? ???????? ?? ?????? */
.briefjuzu {
    /* no need */
}

    .briefjuzu a {
        text-decoration: none;
        color: #666;
    }

        .briefjuzu a:hover {
            text-decoration: none;
            color: #e90606; /* ??? ?? ???? ??? ????? ?????? ??????? */
        }
    /* ??? ???????? ?????? ?????? ????? ??????? */
    .briefjuzu .stressjuzu {
        font-family: 'amiri';
        font-size: 10pt;
        font-weight: 900;
        color: #7f1734;
    }
/*_____________________________________________________________End .briefjuzu ____________________________________________________*/




/*_____________________________________________________________Begin .mukhtasar_ajza ____________________________________________________*/
/*  ?????? ????? ?????? ????? ??????? */
/* color:#ccc /* ??? ?? ????? ???? */
/* color:#fff;? ???? ???? */
.mukhtasar_ajza {
    /* no need */
}

    .mukhtasar_ajza a {
        text-decoration: none;
        color: #ccc; /* ??? ?? ????? ???? ????? ??????? ??? ?????? ???? ???? */
        /* #b3b3b3; ?? ??? ????? ??? ???? ????? ?? ?????? function mouseout_prev() ??? ???????? ????? ?????? ???????? ?? ??????? ??*/
    }

        .mukhtasar_ajza a:hover {
            text-decoration: none;
            color: #fff; /* ??? ?? ????? ???? ????? ??????? ??? ?????? ???? ???? */
        }
/*_____________________________________________________________Begin .mukhtasar_ajza ____________________________________________________*/




/* _________________________________________________*/
/* ?????? ?? ?????? ?????? ??? ????? ?? ??????? */
/* _________________________________________________*/
.whiteonblack-header {
    background-color: #333;
    color: #c1c1c1; /*#aaa;*/ /*#fff;*/ /*#f1f1f1;*/
    /*--------*/
    /*height: 120px;*/
    /*padding-top: 60px*/
}

/* _______________________ ??? ?????? ??? ??? ????? __________________________*/
/* ?????? ?? ?????? ?????? ??? ????? ?? ??????? */
/* _________________________________________________*/
.whiteonblack {
    background-color: #333; /*????? ?????*/
    color: #aaa; /*#f1f1f1;???? ????*/ /*#606061;???? ???*/ /*#d9d9d9;?????*/
}



/*__________________________________________________________________*/
/* ============   (3)    Begin ???? ???? ????? ?????     =============== */
/* #1b1c20 ????? ???? ????? */ /* #333 */ /* #131313 ????? ???? ????? */
/* #606061; ????? ??? ????? */


/* ______________
        Begin ???? ????? */
/*
    ??? ??????? ??? ????? ?????? 
    ?? ??????? ?? ????? ????? ??? ????? ??? ?????? ??? ?????
    ?????
    /* ?????? 3 ?????? ??? ????? */
.blackonwhite { /*?????? ???????*/
    background-color: #fff;
    color: #000;
    font-family: 'amiri';
}
/* ______________
        End ???? ????? */



/* Begin ???? ???? ????? -->
        __________________________
    ??? ??????? ??? ????? ????? 
    ??? ????? ????? ?????? ??? ???? 
    */
.whiteonblack_footer {
    background-color: #606061;
    color: #fff
}

.whiteonblack-header_default { /* ??? ????? */
    background-color: #606061; /* #d9d9d9 ???? */
    color: #fff;
    /*--------*/
    /*height: 120px; ??????? ?? ??? ???????? ????? ?????? ???? ???? ?????? ?????? ????? ?? ??????? ?? ??????? ??????? */
    padding-top: 60px
}

.whiteonblack_default {
    background-color: #606061;
    color: #fff;
    font-family: 'amiri';
    font-weight: 100;
}
/* ______________
        End ???? ????? */

/*__________________________________________________________________*/
/* ============   End ???? ???? ??????????     =============== */


/* div-ffffff-bgc ???? ???? ??? ???? */
.whiteongray {
    background-color: #f0f1f2;
    color: #f2f2f2;
}
/* div-gray-bgc ???? ???? ??? ????? */

/*????? ????? ???????? ?????? ?????*/




/*_______________________________*/
/*End style-mainbar.css ????? ??*/
/* ==========================*/

/* ???? ???? ??? ?? ????? ?? ???????? ?????? ??????? 
                    /* in style-pagination.css class="pagination_btn"  ?? ????????? ????? ?????? ?? ?????? ??????

                    /*.cursor_pointer {
                        cursor:pointer;
                    }*/

/* ???? ????? ?????? ?? ?????? ?????? ?? ????? ?????? */
/*.btn_poem {
                        cursor:pointer;
                        background-color:#333;
                        color: #fff;
                    }*/



/*__________________________________________________Begin ??? ?????? ?????? ??????? __________________________________________*/
/* Begin css for: ??? ?????? ?????? ??????? */

/* ????? ?????? ????? ????? ??? ????? ????
    ul#proList{list-style-position: inside}
    li.item{list-style:none; padding:5px;}
    */

ol#proList {
    /* list-style-position: inside; /* ?? ??????? ??? */
    /*list-style-image: url('/images/Ysquare.gif');*/
    /*padding-right:25px;*/
    /*?????      list-style-image: url('/images/plate2_13x15.jpg');  */
    list-style-type: none;
}

li.item {
    /*list-style-type: none;*/
    padding: 5px; /* ??????? ??? ???? ??????? */
}

/*?????*/
/*????? ???? ??????? ?? ??????? ?? ??? ?? ?????? ?? ???????? ???????? ?? ?????? ????? ??? ??? ??? ?????*/
li.no_num {
    list-style-type: none;
}
/*__________________________________________________Begin ??? ?????? ?????? ??????? __________________________________________*/



    /*.mainbar المحاضرة - نقلت الـ أو إل و يو إل قرب*/


/* <li> ??????? ??? ?? ????? ?? */
/*                                              التالي لو تفتحه يحدث خلط
                                                ol {
                                                    font-family: Simplified Arabic;
                                                    font-size: 14pt;
                                                }
                                                    ol li {*/
/* line-height: 30px; /* by default */
/*    } */




/*                                                
                                                dl {
                                                    font-family: Simplified Arabic;
                                                    font-size: 14pt;
                                                }
                                                    dl li {*/
/* line-height: 30px; /* by default */
/*}*/

/* ----------- others -------------- 

                                                select {
                                                    font-family: Tahoma;
                                                    font-size: 12pt
                                                }

                                                input {
                                                    font-family: Tahoma;
                                                    font-size: 12pt
                                                }

                                                br.clear {
                                                    CLEAR: both
                                                }

                                                hr {
                                                    BORDER-BOTTOM: 1px solid;
                                                    BORDER-LEFT: 1px solid;
                                                    BORDER-RIGHT: 1px solid;
                                                    BORDER-TOP: 1px solid;
                                                    HEIGHT: 1px;
                                                    PADDING-BOTTOM: 0px;
                                                    PADDING-LEFT: 0px;
                                                    PADDING-RIGHT: 0px;
                                                    PADDING-TOP: 0px
                                                }
                                                                    */
                                                    /* Begin ?????? */
                                                /* ============= */

                                                /* ??????? ?????? ?? ?????? 
                                                #img6-12-70 {
                                                    width: 12.70%;
                                                    float: left;
                                                }*/
                                                /* ??????? ?????? ?? ?????? 
                                                #img6-12-69 {
                                                    width: 12.69%;
                                                    float: left;*/
                                                /* .mainbar ??? ???? ????? color:Black;
                                                }

                                                #masnum1, #masnum2, #masnum3 {
                                                    top: -50px;
                                                    position: relative;
                                                    z-index: 5;
                                                }
 */

                    /* ------------------ */
                    /* Begin ???? ??????? ?????? ??????? */
                    /* ------------------ */

                    /* Begin css for: ??? ?????? ?????? ??????? */

                    /* ????? ?????? ????? ????? ??? ????? ????
                        ul#proList{list-style-position: inside}
                        li.item{list-style:none; padding:5px;}
                        */




/* _______________________________________________________*/
/* Begin ????? ????? ????? - ??? ???? ???? ?????? ??? */

/*(A) Begin left side*/
#poem-section-left {
    /* =======1======= */
    float: left; /* ???? ?? ??? ?? */
    width: 100%; /* WAS width:300px; */
    position: relative; /*????*/
}
    /* Begin ????? ????? ????? - ??? ???? ???? ?????? ???  +  ?????? ????? ??? ???? ??????? */
    #poem-section-left label {
        /*width: 53%;*/
        line-height: 25px;
        font-family: amiri;
        font-size: 10pt;
        font-weight: 600;
        color: #d9d9d9;
        cursor: pointer;
        /*?????? ???? ?????? ?? ???? ?????? ??????? ??????? ??????*/
        width: 100%;
        text-align: right;
        padding-top: 15px
    }
    /*approved*/
    /* background-color:#333;/*#f8f8f8;  /******** ??????? ??? ????? ????? ???? ********/

    /* ????? ??????? ??????? ??????? ????? ???? ????? ?? ??????? */
    #poem-section-left input {
        display: none;
    }

    /* ?????? ???? ??? ???? ???? ????? ?? ???????  */
    #poem-section-left label:hover {
        color: #666; /*????*/ /*#bfbfbf;????*/
    }
/*End left side*/



/*(B) Begin right side*/
#poem-section-right {
    /* =======1======= */
    float: left; /* ???? ?? ??? ?? */
    width: 100%; /* WAS width:300px; */
    position: relative; /*????*/
}
    /* Begin ????? ????? ????? - ??? ???? ???? ?????? ???  +  ?????? ????? ??? ???? ??????? */
    #poem-section-right label {
        /*width: 53%;*/
        line-height: 25px;
        font-family: amiri;
        font-size: 10pt;
        font-weight: 600;
        color: #d9d9d9;
        cursor: pointer;
        /*?????? ???? ?????? ?? ???? ?????? ??????? ??????? ??????*/
        width: 100%;
        text-align: right;
        padding-top: 15px
    }
    /*approved*/
    /* background-color:#333;/*#f8f8f8;  /******** ??????? ??? ????? ????? ???? ********/



    /* ????? ??????? ??????? ??????? ????? ???? ????? ?? ??????? */
    #poem-section-right input {
        display: none;
    }

    /* ?????? ???? ??? ???? ???? ????? ?? ???????  */
    #poem-section-right label:hover {
        color: #666; /*????*/ /*#bfbfbf;????*/
    }
/*End right side*/
/* _____________________________________________________*/
/* End ????? ????? ????? - ??? ???? ???? ?????? ??? */





/* _________________________________________________________________________*/
/* Begin ????? ????? ???????? ????? ???????? - ??? ???? ???? ?????? ??? */

/*?????? ????? ?????? ????? ????? ??????*/
/*poem-section-mobile ???? ????? ????? ???????? ?????? ????? ????????*/
/*input ????? ?? ?????? ????? ??? ??? ?????? ??? ???? ??? ???? ???????*/

    #poem-section-mobile {
        /* =======1======= */
        /*float: left;*/ /* ???? ?? ??? ?? */
        /*width: 100%;*/ /* width:300px; */
        /*position: relative;*/
        /*background-color: #e90606 red;*/
        /*display:none;*/
    }
        /* Begin ????? ????? ????? ????? - ??? ???? ???? ?????? ???  +  ?????? ????? ??? ???? ??????? */
        #poem-section-mobile label {
            float: left; /*?? ? ???? ?? ??????? ???????? ??? ????? ???? ?? ?????*/
            width: 100%;
            line-height: 20px;
            font-family: amiri;
            font-size: 14pt; /*Bef Kadduri 12pt*/
            font-weight: 600;
            color: #bbb; /*ORG #d9d9d9???? ??? ????*/
            /*cursor: pointer;*/
        }
                    /*approved*/
                    /* background-color:#333; ????*/
                    /*#f8f8f8;  /******** ??????? ??? ????? ????? ???? ********/

        #poem-section-mobile input {
            display: none;
        }
                            /*#poem-section-mobile label:hover {*/
                                /*color: #bfbfbf;*/ /*????? ????  ??? ????*/
                            /*}*/
/*_____*/
/* End*/







/* =============== ???? ??? ????? ================== */
/* 4 Begin book-link ??? ????? ??????? ???? (3) ????? ??? ????? ???? ???????? */
/* ???? ???? ??? ?????? ?????? ????? ???? ????? ????? ???? ????? */
.book-link {
    padding-top: 10px;
    text-align: center;
    font-family: amiri;
    font-size: 15pt; /*  font-weight:900; 33pt */
    color: #f2f2f2;
}

    .book-link a {
        text-decoration: none;
        color: #999999; /*ORG #f2f2f2;*/
        background-color: transparent;
    }

        .book-link a:hover {
            text-decoration: none;
            color: #f2f2f2; /*ORG #999999;*/
            background-color: transparent;
        }
/* End book-link ??? ????? ??????? ???? (3) ????? ???? ???????? */

/* ??????? ??? ????? ?????? ?????? ???? ????? */
#header {
    width: 100%;
    height: 90px;
    font-family: amiri;
    font-size: 25pt;
    font-weight: 900;
    text-align: center;
    padding-top: 40px;
}
/* NEW NEW ??????*/
.header-new {
    width: 100%;
    height: 90px;
    font-family: amiri;
    font-size: 25pt;
    font-weight: 900;
    text-align: center;
    padding-top: 40px;
}

/*?????? ????? ??????? ???????*/
#footer {
    width: 100%;
    height: 135px;
    font-family: amiri;
    font-size: 14pt; /*Bef Kadduri 12pt*/
    font-weight: 500;
    background-color: #f2f2f2; /*????? ????*/
    color: #fff; /* ??? ??? ???? ??????? ????? ??? ??? ????? */
    float: left;
    /* text-align: center; ?????? ?????? ?????? ????? ?????? ??? ??? ???????? ??? ????? ?? ?????? ??? ??????*/
    padding-right: 70px; /* */
}

/*
                        #footer                     : ???? ?? ?????? ?????? ???? ??? ?????
                        class="footer-fawasel"      : ?????? ?????? ???? ???? ???? ?? ??????   
                        id="hide-rasasi-for-poetry" : ???? ?? ?????? ??????? ????? ???? ?? ??? ???? ?????
                        Defaule.aspx                : USED in Row 2 ???? ????? ??
                    */
                    .footer-fasel {
                        width: 100%;
                        height:20px; /*?? ???? ?????? ?????? ???? ??? ????? ?????? ?? ?????*/
                        background-color: #fff;
                        float: left;
                    }

/* Begin HIDDEN Side NAV ?????? ??????? ?????? */
.sidenav {
    height: auto;
    bottom: 0px; /* ????? ?????? ?? ??????? ?????? ??????? */
    right: -63px; /* when #Overlay property right: 300px; - ???? ?????? ??????? ?????? ?????? ???? ?????? ????? */
    /* top: 136px; /* top:170px; #overlay ??? ????? ?? */
    width: 0; /*  ?????? ?? ?? ???? ??? ?????? ??????? ???? ????? ????? ????? ?? ????? ????? */
    position: fixed;
    z-index: 1;
    background-color: #f8f8f8; /*#fff;*/ /*  ????? ?????? ??????? ?????? ???? ????? */
    overflow-x: hidden;

    /*/////////////*/
    transition: 0.7s; /*ORG 0.5s;?????   -  transition: 1.0s;???? ?????? ??? ?????  -  tried 1.9s;????? ???*/
    /*/////////////*/

    padding-top: 20px; /* ???? ????? ??? ???? ?? ?????? ?????? */
    padding-right: 60px;
}

    .sidenav a {
        text-decoration: none;
        /*       top rit btm left */
        padding: 8px 8px 8px 32px; /* color: #f1f1f1; */
        font-size: 14pt; /*Bef Kadduri 12pt*/
        display: block;
        transition: 0.3s; /* #f1f1f1; */
        color: #404040;
    }

        .sidenav a:hover {
            text-decoration: none;
            color: #808080 /* #8c8c8c; */
        }


/* ?????? ??? ??? ??? ??????? ???????? ????? */
/* Begin ??????? ???????? 
@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }
        .sidenav a {
            font-size: 18pt;
        }
}
 End ??????? ???????? */


.hamish-yameen { /* ?????? ???? ???? ????? ??????? */
    padding-right: 20px;
}
/*  End HIDDEN Side NAV ?????? ??????? ?????? */




/* =============== STICKY ================== */
/* ????? */
/* 5 Begin sticky menu */
.header-sticky {
    /* background-color: #e6f2e6; /* ????? */
    /* padding: 30px; */
    /*text-align: center;*/
}
/* ?????? ??? ?????  */
.content-sticky {
    padding: 0px; /* padding: 50px; ???? ???? ?????? ??? ???? ???? */
}
/* following is a variable in the Stick Function */
.sticky {
    /* position: relative; /* relative ?? ???? ???? ???? ???? ????? ?????? */
    position: fixed; /*fixed ?? ???? ??? ???? ???? ???? ????? ???? ??????? */
    /*----------------------*/
    z-index: 1; /*???? ??? ??? ??????? ?????? ??? ?????? ??????*/
    /*----------------------*/
    top: 0;
    width: 100%;
}
    /* for sticky  */
    .sticky + .content-sticky {
        padding-top: 51px; /* ?????? ?????? ??? ?????? ??????? ?????? ???? ?? ???? ????? ???? ???? ???? ?????? ??????? */
    }
/* End sticky menu */




/* =============== OVERLAY ================== */
/* ????? ?????? ??? ???? ?????? ??????? */
#overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    /* top: 137px; /* class(.sidenav)  ???? ????? ??*/
    left: 0px;
 /* right: 358px;*/ /* when class(.sidenav) property right: -63px; */
 

    /* ____________style-new-code.css ??? ??? ______________*/
    /* A  ?? ???? ?????? ????? */
    /*right: 357px;*/ /* ById("mySidenav").style.width = "417px" ???????? ?? ??????? */
    /*^^^^^^^^^^^^ */

    /* ____________style-new-code.css ??? ??? _____________________________________________________*/
    /* B  ?? ??? ???? ???? ?? ???????? ???? ????? ??? ??? 500 ???? */
    /*right: 500px;*/  /* ById("mySidenav").style.width = "562px" ???????? ?? ??????? */
    /*^^^^^^^^^^^^ */

    bottom: 0px;
    background-color: rgba(0,0,0,0.5); /* Black background with opacity */
    z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
}
/* End OVERLAY */


















/* <link rel="stylesheet" type="text/css" href="style-logo-others.css"/> */

/* =================== ???? ???? ???? ?????? ??????? ================== */
.logo {
    line-height: 0.0; /* ?????? ????? ?????? ?? ????? ?????? ?????? */
    /*margin-top:40px; margin-bottom:50px;*/
    border-bottom: #000 1px solid;
    padding-top: 30px;
    display: inline-block;
    font-family: Arabic Transparent;
    font-size: 40pt;
    font-weight: 600;
    text-shadow: 3px 3px silver;
    color: #e90606; /* ??? ?? ?????? ?????? ???? */
    text-align: center;
}

/* =================== ???? ???? ?????? ?????? ================== */
/* (1) Begin Center ?? ????? ????? ??? ????? ????? */
.center {
    height: 85px;
    /*line-height:85px; /* ???? ???? 85 ????? ???? ????? ?????? ?????? ??? ?? ??? ????? */
    text-align: center;
}
    /* ?????? ?? ???? ???? ?? ??? ???? ???? ?? ???? ?????? ?????? */
    .center p {
        line-height: 0.0; /* ?????? ????? ?????? ?? ????? ?????? ?????? */
        margin-top: 40px;
        margin-bottom: 50px;
        display: inline-block;
        font-family: Arabic Transparent;
        font-size: 40pt;
        font-weight: 600;
        text-shadow: 3px 3px silver;
        color: #e90606; /* ??? ?? ?????? ?????? ???? */
    }
    /* End Center */


    /* 10 Begin center Menu ????? ????? ?????? ?????? ???? ????? ??? ?????? */
    .center .menu {
        line-height: 0.0; /* ?????? ????? ?????? ?? ????? ?????? ?????? */
        height: 48px; /* ????? ???? ????? ?????? */
        display: inline-block;
    }
        /* a , a:hover ??????? ?????? ?????? ???? ??? ???? ?????? */
        .center .menu a, .center .menu a:hover {
            text-decoration: none;
            color: #e90606; /*#cc0000; ??? ?? ?????? ?????? ???? */
        }
/* End center Menu ????? ????? ?????? ?????? ???? ????? ??? ?????? */


/* .center-link ??? ???? ???????? ????????? ?? 
                    .center-menu {
                        line-height:48px; /* Org:50px; - 48px; ????? ???? ????? ??????
                        height:48px; /* Org:50px; - 48px; ????? ???? ????? ??????
                    }
                    */

/* =================== ???? ???? ????? ?????? ============================= */
/* (2) Begin center-link */
.center-link {
    height: 48px; /* ????? ???? ????? ?????? */
    line-height: 48px; /* ???? ???? 48 ????? ???? ????? ????? ?????? ??? ?? ??? ????? */
    text-align: center;
    /*
            overflow-x: auto; /* ??????? ???????? ????? : ????? ???????/ ?????? ????????/ ??????? 450 ?? ???? ?? ????? ????? ????*/
    /* ------------------------ */
}
    /* ?????? ?? ???? ???? ?? ??? ???? ????-???? ?? ???? ??????? */
    .center-link p {
        line-height: 0.0; /* ?????? ?????? ?????? ?? ?????? ?????? ?????? */
        display: inline-block;
        font-family: Arabic Transparent;
        font-size: 14pt;
        font-weight: 500;
        /* over-rided with a & a:hover   color:#666; */
    }

    .center-link a {
        text-decoration: none;
        color: #666; /* #808080; /* ?? ????? ?? ??????? ????? ???? */
    }

        .center-link a:hover {
            text-decoration: none;
            color: #8c8c8c; /* ???? ????? ?? ??????? ????? ???? ???? ???? ??? ???????? */
        }
/* End ceneter Main Title ????? ?????? ?????? ??????? */



/* ================================================================================================== */
/* ???? ??????? ??? ?????? ?????? ????? ?????? ??????? ??? 4 ??? ??? ?????? ???? ??? ????? ?????? ?????? */
/* ================================================================================================== */
.center-link2 {
    text-align: center;
}

    .center-link2 a {
        text-decoration: none;
        color: #666;
    }

        .center-link2 a:hover {
            text-decoration: none;
            color: #e90606; /*??? ?? ?????? ?????? ???? */
        }


/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
/* css ????? ???? ?? ??????? ???? ?? */
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */



/* =================== هام لفوتر في ص الديفولت ============================= */
/* (3) Begin Footer  */
.footer {
    /* line-height:15px;*/
    /* ??????? ?? ??????? ??? ??????? ?????? ???? ??? ????? ??????height: 100px; */
    width: 100%;
    background-color: #fff;
    /*font-family: Arabic Transparent; font-size:12pt;*/
    /*font-weight:500;*/
    /* color: #666; /* ??? ????? ?? ?????? /* ct ??? ??? ???? */
    text-align: center;
}



/* ??????????????????????????????????????????? */
.rahaf { /* .footer .ct { */
    line-height: 3px;
    padding-top: 20px;
    font-family: Arabic Transparent;
    font-size: 10pt;
    font-weight: 100;
    color: #808080;
}
/* ??????????????????????????????????????????? */



.footer .ct {
    font-family: Arabic Transparent;
    font-size: 10pt;
    font-weight: 500;
    COLOR: #000;
}
    /* ?????? ??? ????? ?????? ?????? ?????? ?? ?????? */
    .footer .ct p {
        /*line-height:15px;*/
        font-family: Arabic Transparent;
        font-size: 10pt;
        font-weight: 500;
        color: #666;
    }

.footer a {
    text-decoration: none;
    font-family: Arabic Transparent;
    font-size: 10pt;
    font-weight: 500;
    color: #666;
}

    .footer a:hover {
        color: #8c8c8c; /* #808080;  #8c8c8c; */
    }
/*  End Footer  */
/* =================== ????? ???? ?????? ============================= */



/* =================== ???? ???? ??? ??? ??????? ============================= */
/* ?????? ?????? */
#container-title-header {
    width: 100%;
    height: 85px;
}
/* ???? ?????? ?????? ???????? 
        #container-title-header-mobile {
            width: 100%; height: 85px;
        }    
        */

/* ???? ?????? ?????? */
#container-title-footer {
    width: 100%;
    height: 85px;
}


#margine1 {
    width: 5.20%;
    height: 85px; /* width, height ??? ????????? ???? ??? ?????  */
    float: left;
}

#margine2 {
    width: 5.20%;
    height: 85px;
    float: left;
}

#title {
    width: 89.6%;
    height: 85px;
    float: left;
}



/* =================== Top Nav ???? ??????? ???????? ============================= */
/* id="container-menu"  ???? ?????? ??????? ???? ?? ??????? ???????? ?????? ?????? ???????? ??????? ?????? */
/* <h3></h3> ???? ??? */
#container-menu { /* switchVisibleMenu() */
    position: relative;
    width: 100%;
    height: 48px; /*100%;/*48px; /* ????? ?????? */
    overflow: auto; /* mobile */
    left: -1900px; /* ???? ??? ???? ?? ?????? ??? ????? */
    top: -900px;
    margin: auto;
    background-color: #fff; /*#fff; /* ????? ????? ?????? ???? ???? ?????? ?????? ???? ???? ??? ??????? */
}

/* id="container-menu2" ???? ??????2 ???? ?? ?????? ?????? ??????? ??? ?????? ?????? ??? ????? */
/* <h4></h4> ???? ??? */
#container-menu2 { /* switchVisibleMenu2() */
    position: relative;
    width: 100%;
    height: 48px; /* ????? ?????? */
    left: -1900px; /* ???? ??? ???? ?? ?????? ??? ????? */
    top: -900px;
    /* left:-900px; /* ???? ??? ???? ?? ?????? ??? ????? */
    margin: auto;
    background-color: #fff; /* background-color: Lime; /* ????? ????? ?????? ???? ???? ?????? ?????? ???? ???? ??? ??????? */
    /*                                        ?????? ??? ????? ???? ??? ?????? ????? ?????? ?????? ??????   */
}

/* id="container-menu3" ???? ??????3 ???? ?? ??????? ???????? ?????? */
/* <h4></h4> ???? ??? */
#container-menu3 { /* switchVisibleMenu3() */
    position: relative; /* fixed &b absolute; are the same */
    width: 100%; /*     width:900px; */
    height: 48px; /* left:16.1%; ????? ?????? */
    left: -1900px; /* ???? ??? ???? ?? ?????? ??? ????? */
    top: -900px;
    margin: auto;
    background-color: #fff; /*#fff; /* background-color: Fuchsia; /* ????? ????? ?????? ???? ???? ?????? ?????? ???? ???? ??? ??????? */
    /*                                        ?????? ??? ????? ???? ??? ?????? ????? ?????? ?????? ??????   */
}


/* ????????????????????????????????? */
#nass {
    width: 100%;
    height: 48px;
    display: none;
}
/* ????????????????????????????????? */


/* ???? ????? ????? ?????? ????? ?????? */
#container-juzu {
    width: 100%;
    display: none; /* by default - Muh01Toc.aspx ???? ??? ?? ???? ???? ??????? ??? ????? ??? */
}


/* =================== ?????? ???????? ??????? ??????? ???? ???? ???? ????? ======================== */

/* ???? ???????? ??????? ??????   */
#display-3-titlebar {
    width: 100%;
    height: 60px;
    text-align: center;
    display: none;
}


                                /* Mobile Two Col ???? ??? ?????? ???????? ???????? ??????? ?????? ?? 
                                #display-page-oncenter  {
                                    width:30%;
                                }                          
                                */




/*???? ????? ???????? ???? ?????*/
#hamish-mobile-left {
    /*width: 100%;
    height: 48px;*/
    float: left;
    width: 1px; /*8.2%;*/
    background-color: red;
    /*text-align: right;*/
}
#hamish-mobile-right {
    float: left;
    width: 1px; /*8.2%;*/
    background-color: blue;
}



/* SEARCH ???? ?????? ?? ????? LEFT */
#margine-link1 {
    width: 100%;
    height: 48px;
    float: left;
    text-align: right;
}
/* ?????? ?????? Mar 2021*/ /* ?? ??? ????? ?? ??? ??? ?????? ?????? */
#margine-link1-left-menu1 {
    width: 100%;
    height: 48px;
    float: left;
    text-align: right;
}

#margine-link1-left-menu2 {
    width: 100%;
    height: 48px;
    float: left;
    text-align: right;
}

#margine-link1-left-menu3 {
    width: 100%;
    height: 48px;
    float: left;
    text-align: right;
}
/* ?????? ????? ?? ????? */
#link12 {
    width: 100%;
    height: 48px;
    float: left;
}
/* ??  ?? ?????? ?????? */
#link12A {
    width: 100%;
    height: 48px;
    float: left;
}
/* New for menu 3 */
#link22A {
    width: 100%;
    height: 48px;
    float: left;
}

#link12A {
    width: 100%;
    height: 48px;
    float: left;
}

/* ?? ???? */
#link12B {
    width: 100%;
    height: 48px;
    float: left;
}
/* ?? ??????? */
#link11 {
    width: 100%;
    height: 48px;
    float: left;
}
/* ??? ???? ??? ??? ?????? ??????? ??? ??????? ???? */
#link11-child {
    /*width: 100%;*/
    height: 48px;
    float: left;
}

#link10 {
    width: 100%;
    height: 48px;
    float: left;
}

#link9 {
    width: 100%;
    height: 48px;
    float: left;
}
/*??? ????? ???????? ?????? ???? ?? ??????? ??? ??????? ?? ????? ??? ?? ???????*/
#link8 { /* Was link8_mob_browsing_btns*/
    width: 100%;
    height: 48px;
    float: left;
}

#link7 {
    width: 100%;
    height: 48px;
    float: left;
}
/* New for menu3 */
#link17 {
    width: 100%;
    height: 48px;
    float: left;
}
/* ?? ?????? ?? ??????? */
#link7-child {
    width: 100%;
    height: 48px;
    float: left;
}

#link6 {
    width: 100%;
    height: 48px;
    float: left;
}

#default_url_link_enlarger {
    height: 48px; /* width: 100%; */
    float: left;
}

#default_url_link {
    height: 48px; /* width: 100%; */
    float: left;
}

#link5 {
    width: 100%;
    height: 48px;
    float: left;
}
/* new for menu 3 */
#link15 {
    width: 100%;
    height: 48px;
    float: left;
}
/* ?? ????? ?? ??????? */
#link5-child {
    /*width: 100%;*/
    height: 48px;
    float: left;
}
/* ?? ???? */
#link4 {
    width: 100%;
    height: 48px;
    float: left;
}
/* ?? ????? ?????? */
#link3 {
    width: 100%;
    height: 48px;
    float: left;
}
/* New for menu 3 */
#link13 {
    width: 100%;
    height: 48px;
    float: left;
}
/* ?? ????? ??????? ?? ??????? */
#link3-child {
    /*width: 100%;*/
    height: 48px;
    float: left;
}

#link2B {
    width: 100%;
    height: 48px;
    float: left;
}
/* ?? ????? ?????? */
#link2A {
    width: 100%;
    height: 48px;
    float: left;
}
/* ?? ??? ?? ??? ????? ?????? ?????? ?? ??? ??? ?? ??????? */
#link2Z {
    width: 100%;
    height: 48px;
    float: left;
}
/* ?? ????? ?????? ?? ??????? */
#link2A-child {
    width: 100%;
    height: 48px;
    float: left;
}
/* <h3></h3> ?? ???? ??? */
/* <h4></h4> ????? */
#link2 {
    width: 100%;
    height: 48px;
    float: left;
    text-align: center;
}


                /* MENU #1 */
                #link1_m1 {
                    width: 100%;
                    height: 48px;
                    float: left;
                    text-align: right;
                    padding-top: 12px;
                }
                /* MENU #2 & #3 */
                #link1 {
                    width: 100%;
                    height: 48px;
                    float: left; /* ?????? ???? ????? ?????? ?? ?? ???? ??? ?? ??? */
                    text-align: right; /* ???? ?????? ???? ????? */
                    padding-top: 12px; /* middle ???? ?????? ????? ?????? ?????? */
                }


/* RIGHT ???? ?????? ???? */
#margine-link2 {
    width: 100%;
    height: 48px;
    float: left;
    text-align: left;
}

/* End Nav Title ??????? ??????? ??? ????? ??????? ???? ?????? ?????? ??????? */




/* ============ navicon.open  ????? ??? ?? ?????? ??????? =============== */
/* ?? ????? ???? ????? ???? ??? ?????? ??????? */
/* Begin ??????? ????? ????? ??? ??????1 */
/* class="navicon" ?????? ?????? ????? ?????? ????? ??? ???????? ??? ?? ?????? */
.container {
    width: 30px; /* 100%; */
    height: 130px; /* 100vh; */
    float: right; /*float: right*/
    display: flex;
    align-items: center;
    justify-content: right;
    background: teal; /* teal ??? ????? ?????? */
}

.navicon .bar {
    background: #fff; /* ??? ?????? */
    width: 2em;
    height: 0.2em;
}

.navicon.open .bar {
    transition: 0ms opacity linear 300ms, 300ms translate ease 0, rotate 300ms ease 300ms;
}

.navicon .bar:not(:first-child) {
    margin-top: 1em; /* ???? ???? ?????? ??? ??? ??? ????? ????? ?? ???? ????? */
}
/* End ??????? ????? ????? ??? ??????1 */




/* Begin ??????? ????? ????? ??? ??????2 */
/* class="navicon2" ?????? ?????? ????? ?????? ????? ??? ???????? ??? ?? ?????? */
.container2 {
    width: 30px;
    height: 30px;
    float: right;
    display: flex;
    align-items: center;
    justify-content: right;
    background: teal;
}

.navicon2 .bar {
    background: #fff;
    width: 2em;
    height: 0.2em;
}

.navicon2.open .bar {
    transition: 0ms opacity linear 300ms, 300ms translate ease 0, rotate 300ms ease 300ms;
}

.navicon2 .bar:not(:first-child) {
    margin-top: 1em;
}
/* End */


/*#fffad5;*/
/*عنوان شريط عريض يحوي نص أكثر من سطر*/
.midmarquee {
    font-family: 'Amiri';
    font-size: 14pt;
    font-weight: 100;
    line-height: 25pt; /*سماكة الشريط*/
    background-color:#f2fbfb;/*رمادي#f4f0ec;/* /*rgba(255, 246, 184, 0.4);*/
	border-right: 3px solid #c0eaea;/*#c4c3d0;رمادي*/ /*Isabelline*/
    color:#006600; /*green*/ /*رمادي#838996;*/ /*Lavender Gray*/  /*#910000;*/  /*#e9967a;*/  /*#fe6d27;*/
	padding: 10px 16px 10px 10px;
    /*padding-bottom: 2px;
    padding-left: 4px;
    padding-right: 16px;
    padding-top: 2px*/
}

/*عنوان شريط غير عريض*/
.midmarquee_hili {
	font-family: 'Aref Ruqaa';
	font-size: 14pt;
	font-weight: 100;
	line-height: 25pt; /*تباعد الأسطر*/
	height:auto;  /*سماكة الشريط*/
	background-color:#e6f6f6;/*#f4f9f9;*/ /*#ecf8f9;*/
	border-right: 5px solid #b3e5e5; /*Isabelline*/
	color: #345555; /*Lavender Gray*/
	padding: 0px 10px 10px 10px;
}

.midmarquee_font {
	font-family: 'Aref Ruqaa';
	font-size: 14pt;
	font-weight: 100;
	color: #345555; /*Lavender Gray*/
}



/*__________________________________*/
/*.hamish......Begin ?????? ???????*/
.hamish_right {
    text-align: center;
    font-family: amiri;
    font-size: 14pt; /*Bef Kadduri 12pt*/
    font-weight: 600;
    color: #ccc;
}
/* ???? */
/*.hamish_poem {text-align:center; font-family:Calibri; font-size:12pt; font-weight:600; color:#999;} /* ???? */

/* ??? ??? ????? ?? ?????? ??????? */
.center_poem {
    line-height: 45px;
    font-family: 'amiri';
    font-size: 22pt;
    font-weight: 500;
}


/* ??? ??? ????? ?? ???? ???????? ?????? ?????? */
.hamish_poem {
    text-align: center;
    font-family: 'Amiri'; /*Calibri*/
    font-size: 14pt; /*Bef Kadduri 12pt*
    font-weight: 900;
    color: #333;
}

    .hamish_poem a {
        text-decoration: none;
        color: #666;
    }

        .hamish_poem a:hover {
            text-decoration: none;
            color: #be0032; /*#e90606   ??? ?? ?????? ?????? ???? */
        }


/*لشعر الموبايل*/
.hamish_poem_mob {
    text-align: right;
			/*font-family:'Aref Ruqaa'; weight: 500-18ptصعب القراءة*/
    /*font-family:'Scheherazade';*/ /*weight: 900-22pt*/
    font-family:'Amiri'; /*BEST weight: 900-18pt*/
			/*font-family:'Jomhuria';عادي*/
			/*font-family:'Cairo';عادي*/
			/*font-family:'Tajawal';عادي*/
			/*font-family:'Almarai';NO*/
			/*font-family:'Droid Arabic Kufi';NO*/
			/*font-family:'Droid Arabic Naskh';NO*/
			/*font-family:'Lateef';NO*/
			/*font-family:'Thabit';NO*/
    /*Traditional Arabic;*//*Calibri*/
    font-size: 18pt;
    font-weight: 500;
    color:goldenrod;/*goldenrod;=#daa520*/ /*  color: #333;*/ /*rgba(218, 165, 32, 0.9);*/
}
/* مستخدم في شعر ابن حزم في الإنسدال*/
.hamish_poem_onblack {
    text-align: right;
    font-family:'Amiri';
    font-size: 14pt; line-height:45px; margin-top:0px;/*0px = must*/
    font-weight: 500;
    color:#0000cd; /*Medium blue  #0000cd أزرق جيد الدرجة*/
}

/*#999;} /* ???? */

/* ?????? ??? ??? ????? ???? ???????? ??? ???? ????? ??????? ?? ?????? ????? ?????? ?? ????? ????? ????? ?????*/
/* .hamish_poem {text-align:center; font-family:Calibri; font-size:12pt; font-weight:500; color:#333;} /*#999;} /* ???? */


.hamish_left {
    padding-left: 20px;
    padding-right: 20px;
    font-family: amiri;
    font-size: 10pt;
    font-weight: 900;
    color: #404040;
}


    /* p ??? ????? ?????? */
    .hamish_left p {
        padding-right: 20px;
        font-family: amiri;
        font-size: 10pt;
        font-weight: 900;
        color: #404040;
    }

    .hamish_left a {
        text-decoration: none;
        color: #404040; /*343434;           /* #808080; /*  ?? ??? ??? ??? ????? ???? */
        background-color: transparent;
    }

        .hamish_left a:hover {
            text-decoration: none;
            color: #737373; /* #e90606; /*???? ??? ??? ??? - ??? ?? ?????? ?????? ???? */
            background-color: transparent;
        }
/*____________________________*/
/*.hamish......?????? ???????*/







/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*  Begin ??? ?????? ???? ??? ??? ????? */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* ?? ???? ?? ?? ???? ????? ??? ????? */
/* ?? ???? ????????? ?? ?? ?? ???? ?? ???? ????? ??????? */
/*         #jaz .dropdown-div {
           /*             font-family: Arabic Transparent; font-size: 14pt;color:#910000; /*???? ??? ???? - #cc0000; ???? ??? ???? */
/* ?? ??? ????? ??? ??????? background-color: #f2f2f2; */
/*         }
                
                    /* ?? ??? ???? ?? ?? ???? ????? ??? ????? */
/*                            ******** */
.dropdown-div {
    /*font-family: Arabic Transparent; */
    /*font-size: 10pt; */
    color: #910000; /*???? ??? ???? - #cc0000; ???? ??? ???? */
    /* ?? ??? ????? ??? ??????? background-color:#f2f2f2; */
}

    .dropdown-div:hover {
        color: #dc143c; /* =crimson;*/ /* #404040; /* #fff #000; */
    }

.dropdown2 {
    position: relative;
    display: inline-block;
    /*font-family: Arabic Transparent*/
    /*font-size: 14pt*/
    color:#0000ee; /*highlight;*/
}

    .dropdown2:hover {
        font-weight:900; /*color: #404040;*/ /* #fff #000; */
    }


/* tooltip */
.dropdown2-content {
    display: none;
    position: absolute;
    	font-family: amiri; font-size: 14pt; font-weight:500;
    background-color: #fffcff; /*أرضية كتب محاضرة اللغة أو الشرح المنسدل*/
    color:#daa520;/*#cd853f;*/
    /*min-width: 300px;*/
    /*min-height:300px;*/
    box-shadow: 0px 8px 16px 0px rgba(1,1,1,1.2);
    /* padding-top:0px; padding-right:18px; */
    /* padding-bottom:0px; padding-left:5px; */
    padding: 0px 18px 0px 18px;
    /*margin-top: 0px;*/
    z-index: 1;
}

.dropdown2:hover .dropdown2-content {
    display: block;
}
/*  End*/
 

/*____________________________________________________________ */
blockquote {
	/*لو تريد حالة عامة بدون لون ولا أرضية غير في ذلك المكان وليس هنا*/	
	color:#0000cd; /*Medium blue أزرق جيد الدرجة*/
	
	background-color:#fbf9f7;
	/*#fbf9f7;الفاتح*/ /*#panel لون البانال في ص الديفولت*/ /*#f4f0ec;الاصل القاتم*/ /*#faf8f6اقل من الحالي*/
	/*#fffcff;أرضية باهتة جدا مناسبة للشعر باللون الذهبي*/ 	/*#fcf9f4;خفيف*//*#f8f3e9;أثقل*/
	
	font-family: 'amiri';
	font-size: 15pt; font-weight: 500; line-height: 35px; /*tahoma, simplified Arabic; Traditional Arabic*/
    position: relative;
    /*margin: 0.5em;*/ 	   /*يتعارض مع أضيف لتزبيط عرض وتوسيط النص*/
    /*padding: 0.5em .5em 0.5em .5em;*/
	padding: 20px 10px 10px 10px;
	
	/*____250___لا تقبل زيدة بسبب الموبايل*/
	/*أضيف لتزبيط عرض وتوسيط النص width:88%; */
	
	 margin: auto;
	 width: 95%;
	
    /*padding: 30px;  يجعل النص قريب للسطر الذي أعلاه*/
}

/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */

/*____________________________________________________________ */
blockquote:before {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 1.25em;
	color:#cc0066;	
    line-height: 1;
    top: 3px;
    right: 5px; /*left الصفر يجعل التنصيص أقصى يمين النص - ولا تستخدم هنا*/
    content: "\201D"; /*تنصيص علوي*/
}

/*____________________________________________________________ */
blockquote:after {
    font-family: Georgia, serif;
    position: absolute;
   /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    /*float:right;*/
    font-size: 1.25em;
	color:#cc0066;
    line-height: 1;
    left:5px;  /*الصفر يجعل التنصيص أقصى يسار النص*/
    bottom:0px; /*الصفر يجعل التنصيص في نفس السطر وليس تحته*/
    content: "\201C";  /*تنصيص سفلي*/
}

/*____________________________________________________________ */
blockquote footer {
    padding: 5px 0px 0px 0px;
	text-align:right;
	font-family: 'amiri';
	font-size: 9pt;  /*Bef Kadduri 12pt*/ /*1.0em;*/  /*حجم خط سطر الأوثر*/
    color:#893843;/*#c699b9;*//*#cc00cc;dark pink أبو حنيفة*/
	line-height:2.0;
}

/*____________________________________________________________ */
/* *********************************************************** */

blockquote cite:before {
    content: "\2013"; /*سطر الأوثر*/
}
    /*1. <cite> يضيف بريك لاحتمال وجود سطر ثاني بعده*/
	blockquote cite::after{
		content: "\a";
		white-space: pre;
	}

/*2. <cite_ln2> لا يضيف بريك لعدم وجود سطر بعده*/
blockquote cite_ln2:before {
    content: "\2014"; /*سطر الأوثر*/
}

/*3. <cite_ln2> في حالة احتياجك لبريك لوجود سطر ثالث بعده استخدم أولا هذه*/
/*4. <cite> ثم استخدم بعدها هذه*/

            /*جديدة لمحاضرة مجمع اللغة*/
			.majma_lugha {
				font-family: 'amiri';
				font-weight: 900; font-size: 14pt;
				color:#cc0066; /*#1c1cf0;*/
				background-color:aqua;
				width:150px;
			}

/*____________________________________________________________ */
/* 1 */
blockquote_1 {
    font-family: 'amiri';/*tahoma, simplified Arabic;*/
	font-weight: 900; font-size: 15pt;
    position: relative;
    /*margin: 0.5em;*/ 	   /*يتعارض مع أضيف لتزبيط عرض وتوسيط النص*/
    /*padding: 0.5em .5em 0.5em .5em;*/ /*0.5em 2em 0.5em 3em;*/
	padding: 25px 30px 25px 30px;
	width:90%; right:30px; left:30px;/*أضيف لتزبيط عرض وتوسيط النص*/
	margin-top:15px;  /*يجعل النص قريب للسطر الذي أعلاه*/
	color:#000;/* black*//*denim blue*/
}

/*____________________________________________________________ */
/* Thanks: http://callmenick.com/post/styling-blockquotes-with-css-pseudo-classes */
blockquote_1:before {
    font-family: Georgia, serif;
    position: absolute;
    font-size: 1.25em;
    line-height: 1;
    top: 40px;
	left: 420px;   /*عكست الرايت أصبح لفت*/
    /*right: 30px;*/   /*الصفر يجعل التنصيص أقصى يمين النص*/
	color:#cc0066;
    content: "\201D"; /*تنصيص علوي*/
}

/*____________________________________________________________ */
blockquote_1:after {
    font-family: Georgia, serif;
    position: absolute;
   /* display: block; don't use this, it raised the quote too high from the bottom - defeated line-height? */
    /*float:right;*/
    font-size: 1.25em;
    line-height: 1;
    right: 630px; /*عكست الرايت أصبح لفت*/
	color:#cc0066;
    bottom:0px; /*الصفر يجعل التنصيص في نفس السطر وليس تحته*/
    content: "\201C";  /*تنصيص سفلي*/
}

/*____________________________________________________________ */
blockquote_1 footer_1 {
    padding: 0 2em 0 0;
    text-align:right;
	font-family: 'amiri';
	font-size: 12pt; /*Bef Kadduri 12pt*//*1.0em;*/  /*حجم خط سطر الأوثر*/
    color:green;
}

/*____________________________________________________________ */
blockquote_1 cite_1:before {
    content: "\2013"; /*سطر الأوثر*/
}

            /* 2 */ 
			blockquote_2 {
				font-family: 'amiri';
				font-weight: 900; font-size: 14pt;
				position: relative;
				width:90%; right:30px; left:30px; /*أضيف لتزبيط عرض وتوسيط النص*/
				margin-top:15px; /*يجعل النص قريب للسطر الذي أعلاه*/
				color:#000;
			}
			blockquote_2:before {
				font-family: Georgia, serif;
				position: absolute;
				font-size: 1.25em;
				line-height: 1;
				margin-top: -30px; margin-right: -10px;
				color:#cc0066;
				content: "\201D"; /*تنصيص علوي*/
			}
			blockquote_2:after {
				font-family: Georgia, serif;
				position: absolute;
				font-size: 1.25em;
				line-height: 1;
				right: 710px;
				color:#cc0066;
				bottom:-10px; /*-30px;*/
				content: "\201C";  /*تنصيص سفلي*/
			}

/* ************************************************ */
/* Begin #nestle-section ?????? ????? ?????? ?? ?????? ??? ?? ?????? */
/* ************************************************ */
/*  - ????? ?????? ?????? ?? ?????? - ????? ?? ??????? - ????? ?? ?????? */

/* (1) Styling of Tab1 and Tab2 label */
#nestle-section {
    /* =======1======= */
    float: left; /* ???? ?? ??? ?? */
    width: 100%; /* width:300px; */
    position: relative;
}

/* ???? ????? ????? ?????? ??????? */
#dropdown_muktasar {
    float: left; /* ???? ?? ??? ?? */
    width: 100%;
    position: relative;
}

/* ?????? ????? ??? ???? ??????? */
#nestle-section label {
    /*              ==2== */
    float: left;
    width: 100%;
    height: 47px; /* height:47px; ????? ?????? ??? ???????? ???? ?? ??? ??? */
    background-color: #f8f8f8; /******** ??????? ??? ????? ????? ???? ********/
    color: #666; /*#444;/* ??? ??????? ??? ???? ???????? */
    padding: 5px 0;
    text-align: right;
    cursor: pointer;
    border-bottom: 2px solid #fff; /* ???? ???? ??? ????????? */
}

/* ????? ???? ????? ??????? - ??? ????? ??? ??????? ????? ???? - ???? ???? ???? */
/*                                                    =======================
                                /* function mouseover_shareet() ??? ?????? ??? ?????? ?? ?????? */
#dropdown_muktasar label {
    float: right;
    width: 100%;
    /*               _______   switch  _______ ????? ?????? ???? ?? ????????*/
    background-color: #fff; /*#f5f2f0;  */
    /*                                          ===========================  */
    color: #e90606; /* function mouseout_shareet() ??? ???? ???? ????? ??????? ?? ????? ??? ?????? ?????? ???? ?? ?????? */
    /* function showSlides_hazm(n) ??????: ?????? ???? 12 ????? ???? ?? ??????? ???? ?? ????? */
    padding: 5px 0;
    text-align: right;
    cursor: pointer;
    /*border-bottom:2px solid #fff; /* ???? ???? ??? ????????? */
}


#nestle-section .tab-content1 {
    /*              ======3====== */
    float: left;
    width: 100%;
    /***********************/
    background-color: #fff; /* ??? ????? ????? ???? ?????? ??????? ???????*/
    /***********************/
    padding: 0px; /* ????? ???? ??? ?? ?? ???? ????? ??? ??????? ??????? */
    height: 0px; /* ??? ?? ???? ?????? ??? ?????? ??????? */
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
    overflow: auto; /* overflow:hidden :  ???? ???????? ? ????? ??????? ?????? ?? */
}

/* ????? ????? ???????? ????? ??????? */
#nestle-section input:checked + label + .tab-content1 {
    /*              ================4===================== */
    /* padding-top: 0; ????? ???? ??? ??????? ??? ????? ??? ???? ??????? ?? ?????? ???? ???? ?????? */
    padding-right: 30px;
    padding-left: 30px;
    height: 0px; /* default val  */
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
}

/* ??? ????? ??????? ????? ????? ????? ??????? */
#dropdown_muktasar .tab-content1 {
    float: left;
    width: 100%;
    background-color: #606060; /* #fff ????? ????? */ /*  '#484848'  #585858;  ?? ???? ????? ????? ????? ????? ??????? */
    padding: 0px 0px; /* ????? ???? ???? 10 ????? padding:0 10px; */
    height: 0px; /* ????? ??? ???? ???????? ??? */
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
    overflow: hidden; /* overflow:hidden :  ???? ???????? ? ????? ??????? ?????? ?? */
}


#dropdown_muktasar input:checked + label + .tab-content1 {
    padding: 0px 0px; /* ????? ???? ???? 10 ????? padding:0 10px; */
    /* ??? ??? ?????? ?? ????? ???????? background-color: Green; */
    /* --------------------------- */
    /*height:0px;  /* default val ????? ???????? ?? ????? ????? ???????????  */
    /* --------------------------- */
    -moz-transition: height 1s ease;
    -webkit-transition: height 1s ease;
    -o-transition: height 1s ease;
    transition: height 1s ease;
}

#nestle-section input:checked + label {
    /*              ==========5========== */
    background-color: #f5f5f5; /******** ?????? ?????? ??????? ????? ???? ????? ********/
    color: #666; /*#333;*/
}

                                /* onmousemove onmouseout ??? ????? ??? ??????? ?????? ???? ??? ?????? 
                                #dropdown_muktasar input:checked + label{
                                    background-color:yellow;/* /******** ?????? ?????? ??????? ????? ???? ????? *******
                                } 
                                */


#nestle-section input {
    /*              ==6== */
    display: none;
}


#dropdown_muktasar input {
    display: none;
}



#nestle-section label:hover {
    /*              =====7===== */
    background-color: #f5f2f0;
    content: '\02795'; /*  ????? ?????? */
}
/* End  #nestle-section ?????? ????? ?????? ?? ?????? ??? ?? ?????? */
/* ************************************************ */

.vsmall {
    font-size: 12pt;
    font-weight: 100
}

	.xsmall {
		font-size: 10pt;
		font-weight: 100;
	}
	.8pt_small {
		font-size: 8pt;
		font-weight: 100;
	}
	.nano_small {
		font-size: 6pt;
		font-weight: 100;
	}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*  Begin container-books-header */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

/* #container-books {width:100%;} /* ????? - ??? ????  ?????? ???? ??? ?????? ??? ?? ????? ????? ????? */

/* ById("container-books-header").innerHTML = ?????? = ????? ??? ????? ??? ??????? + ??????? ??? ??? ????? ??? ????? ?????? ???? ??? ?????? ????? ??? ?????? ???????? */
#container-books-header {
    width: 100%;
}


#margin-book {
    width: 5.2%;
    float: left;
    /*background-color: Orange;*/
}
                                        /* ??? ??????? ???? ??? ?? ???? ?????? */
                                        .margin-book {
                                            width: 5.2%;
                                            float: left;
                                        }
                                        /* for mobile background-color: Lime;  */


/* ???? ?? ??? ?? ????? ?? ??? ????? ???????? ????? ?????? */
#margin2-book {
    width: 5.2%;
    float: left;
}
                                        /* ??? ??????? ???? ??? ????? ?????? */
                                        .margin2-book {
                                            width: 5.2%;
                                            float: left;
                                        }
                                        /* for mobile background-color: Lime; */



/* #header-124 { */
#header-134 {
    width: 100%;
    height: 134px;
    background-color: #333;
    color: #f2f2f2;
    font-family: amiri;
    font-size: 30pt;
    font-weight: 900; /* 33pt */
    text-align: center;
    padding-top: 80px;
}

#margin-6_92 {
    width: 6.92%;
    height: 235px; /* 22.99%; */
    float: left;
    background-color: #333333;
}

#pic_1 {
    width: 26.4%;
    height: 235px; /* 27.54% */
    float: left;
}

#space_pic_1 {
    width: 3.48%;
    height: 235px;
    float: left;
    background-color: #333333;
}

#pic_2 {
    width: 26.4%;
    height: 235px; /* 27.54% */
    float: left;
}

#space_pic_2 {
    width: 3.48%;
    height: 235px;
    float: left;
    background-color: #333333;
}

#pic_3 {
    width: 26.4%;
    height: 235px; /* 27.54% */
    float: left;
}

/* ?????? 2019               ???? ???? ????? ?????? ??? ???? ??????? ?? ???? ?????? */
/*#space-1-72 {width:1.72%; float:left; background-color: Gray;}        /*  #f0f1f2; ; */


/*_______________________________approved____________________________________*/
/*# is for mobile ????-?? ???? ?????/????? ????? ?????? ????? ????? ?????*/
#left-20-0 {
    width: 20.0%;
    float: left;
}
                                                /*__________________?????___________________*/
                                                /* ????? ???? ??? ???? ?? ???? ????? ????-?? */
                                                    .left-20-0 {
                                                    width: 20.0%;
                                                    float: left;
                                                }
#left-22-0 {
    width: 22.0%;
    float: left;
}
                                                /*__________________?????___________________*/
                                                /* ????? ???? ??? ???? ?? ???? ????? ????-?? */
                                                .left-22-0 {
                                                    width: 22.0%;
                                                    float: left;
                                                }
/*_______________________________approved____________________________________*/

/* 2% ??? ????? ? ????? ??? ????? ?????? ??????  */

/*.id_search {display: block; background-color:Blue} /* ?????? ???? ????? */



                                /* style-new-code.css ?????? ?????? ?? ???? ??? ??? ????????? ?????? ???????*/

                                #body-57-7 {

                                    width: 65.6%; /* style-new-code.css ?????? ?????? ?? - ORG 63.6% before del 2% space ??? ???? ?? ??? ??????? */

                                    /*width: 57.7%;  ??????  */

                                    float: left;
                                    /*background-color:#cc0066;*/
                                }


/* ???? ??? ??? ??????? ??????? ??? ???*/
#body-67-6 {
    width: 67.6%;
    float: left;
}


/* ???? ???? ???? */
#right-11-1 {
    width: 11.1%; /*width:10.6%; الجديدة أغسطس 2021*/
    float: left;
}
                                    /*  ??????? ????  */
                                    .right-11-1 {
                                        width: 11.1%;
                                        float: left;
                                    }
#right-11-1_a {
    width: 11.1%;
    float: left;
}
                                    /*  ??????? ????  */
                                    .right-11-1_a {
                                        width: 11.1%;
                                        float: left;
                                    }
#right-11-1_b {
    width: 11.1%;
    float: left;
}
                                    /*  ??????? ????  */
                                    .right-11-1_b {
                                        width: 11.1%;
                                        float: left;
                                    }
#right-11-1_c {
    width: 11.1%;
    float: left;
}
                                    /*  ??????? ????  */
                                    .right-11-1_c {
                                        width: 11.1%;
                                        float: left;
                                    }

/* delete later   11.1%;  */
#left-11-0 {
    width: 11.2%;
    float: left;
    background-color: Fuchsia
}

/* ???? ???? ??? ???????? 1 ? 2*/
#left-10-1 {
    width: 10.1%;
    float: left;
    background-color: Maroon;
}
                            /*  ??????? ????  */
                            .left-10-1 {
                                width: 10.1%;
                                float: left;
                            }
#left-12-1 {
    width: 12.1%;
    float: left;
}
                            /*  ??????? ????  */
                            .left-12-1 {
                                width: 12.1%;
                                float: left;
                            }



/* ???? ??? #right-space-2 {width:2%; float:left} /* ??? ???? ??? ??? ??????? */


/* for Mobile ??? ????? ?? ??? ?????? ????? ??????? ?? ??? ??????? */
#left-space-2 {
    width: 2%;
    float: left;
    background-color: #fff;
}

#mid1-space-2 {
    width: 2%;
    float: left;
}

#mid2-space-2 {
    width: 2%;
    float: left;
}

#right-space-2 {
    width: 2%;
    float: left;
    /*background-color: gold;???????*/
}
                                        /* ??? ??????? ???? ??? ????? ?????? */
                                        .right-space-2 {
                                            width: 2%;
                                            float: left;
                                        }
                                        /* for Mobile  background-color:Aqua; */

/* ????? ???? ????? ????? ?? ????? */
#rightz-space-2 {
    width: 2%;
    float: left;
}
                                        /* ??? ??????? ???? ??? ????? ?????? */
                                        .rightz-space-2 {
                                            width: 2%;
                                            float: left;
                                        }
                                        /* for Mobile  background-color:Aqua; */

#clear {
    clear: both;
}
/* =========================== */

/* ?????????? */

#space-2 {
    width: 2%;
    float: left;
    background-color: Maroon;
}

/* ?? ??? ????? - ??????? */
#body-one-margin-65-5 {
    width: 65.5%;
    float: left;
    background-color: Teal;
}

#left-hamish-10 {
    width: 10%;
    float: left;
    /*background-color: green;*/
}
/* #ffff99 ??????? */


/* No No No No No No No */
/* Remove */
#matn-67-6 {
    width: 67.6%;
    float: left;
    background-color: #e90606; /*red; logo ?????? ??????*/
}
/* #ffffcc; ??????? */



/* OTHER 1 ???? */
/* ___________________ */

/* .center-child ????? ??? 
            .title-child {
                width: 89.6%; height:85px;
                float: left;
                border-top:#a3a5a9 1px solid;
                background-color:#f1f2f2;
            }  */            
            
.center-child {
    /* class="center-child" style="background-color:#f2f2f2;" : ??? ??? ????? ?????? ????  ?? ???? ????? - ?? ??????? ???? ?????? */
    float: left;
    width: 89.6%;
    height: 85px;
    border-top: #a3a5a9 1px solid; /*#a3a5a9 ?? ???? ???? ??? ????? ?????? ???? ????? ?? ?????? ??????? */
    text-align: center;
    background-color:#fff; /*#f1f1f1*/ /*أرضية بيضاء للعنوان الرئيسي في ص الفرعية*/ /*باستثناء ص فاتحة الكتاب أرضيتها رصاصي*/
}

    .center-child p {
        line-height: 0.0; /* ?????? ????? ?????? ?? ????? ?????? ??????  */
        display: inline-block;
        font-family: Arabic Transparent;
        font-size: 18pt;
        font-weight: 900;
        padding-top: 15px;
        color: #b3b3b3; /* #666; ??? ?? ???? ?????? ???????   */
        /*background-color:Aqua;/* :#f5f5f5; */
    }

    .center-child a {
        text-decoration: none;
        color: #666;
    }

        .center-child a:hover {
            text-decoration: none;
            color: #808080;
        }

/* OTHER 2 ???? */
/* ___________________ */

/* ????  .selected {color: #910000}  /* #cc0000; ????? ??? */
/* ???? ?? ??????? ???? ???? ????? ????? ?? ???? ??? ?????? ??? ?????? ??? ??????? ?? ????? ????? */
#display-juzu-onleft {
}

/*  End container-books-header */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


#div_read_from_xml {
    height: 47px;
    color: #666;
    background-color: #f8f8f8;
    padding: 5px 0;
    text-align: right;
    cursor: pointer;
    border-bottom: 2px solid #fff;
}

    #div_read_from_xml:hover {
        background-color: #f5f2f0;
        content: '\02795'; /*  ????? ?????? */
    }



/* --TD--DIV--P------ #fe6d27 /* #fe8348 
                                td {
	                                font-family: Tahoma; font-size: 44pt;
                                }
                                */

p.fihrast {
    font-family: amiri;
    font-size: 14pt;
    font-weight: 900;
    LINE-HEIGHT: 20;
    color: Red;
}


/* ------------------- id ----------Arabic Transparent;------------- */

/* ul.b {list-style-type: square;} */

/* ====  ???? .midmarquee  .selected   .dimword   .header  #footer   .hanifa, .malik , .shafi, .dawood,  .ahmad  == */

.selected {
    color: #910000
}
/* #cc0000; ????? ??? */

/* ?? ????? ????? ???? ???? !!!!! ?????? ??? ????? ?? ??? ?? ?? ??? ??? */
/* ????? ???? ?? ??? ???? */
.dimword {
    color: #b3b3b3;
}
/* #b3b3b3;  /*  ???? 808080  /* #bfbfbf ???? */


/* style-general.css ?????? ?? 
                                        #footer {
                                            width: 100%;
                                            height: 35px;
                                            font-family: Arabic Transparent;
                                            font-size: 12pt;
                                            font-weight: 500;
                                            background-color: #f2f2f2; */
/*
                                            color: #fff;*/ /* ??? ??? ???? ??????? ????? ??? ??? ????? */
/*
                                            float: left;
                                    */
/* text-align: center; ?????? ?????? ?????? ????? ?????? ??? ??? ???????? ??? ????? ?? ?????? ??? ??????*/
/*
                                            padding-right: 70px;
                                        }
                                    */

.redvert {
    background-color: red;
    float: left;
    width: 100%;
    height: 16px
}

.redonwhite {
    background-color: red;
    float: left;
    width: 5.2%;
}

/* ?????? 3 ?????? ??? ????? */
.div-ffffff-bgc {
    background-color: #fff;
    color: #000;
}
/* ????? ????? */
.div-f0f1f2-bgc {
    background-color: #f0f1f2;
    color: #f2f2f2;
}
/*  ????? ?????? */
.div-333333-bgc {
    background-color: #333;
    color: #fff;
}
/* ????? ????? */

div.rtl {
    direction: rtl;
    unicode-bidi: bidi-override;
}

.floatright {
    float: right;
    MARGIN: 20px 20px 0px 5px
}

.floatleft {
    float: left;
    margin: 0px 5px 0px 0px
}

.floatright {
    float: right;
    margin: 0px 0px 0px 5px
}

.floatcenter {
    margin-left: 55px;
    margin-right: 55px;
}


.num_right {
    padding-left: 20px;
    font-family: Calibri;
    font-size: 14pt; /*Bef Kadduri 12pt*/
    font-weight: 500;
    color: #ccc;
    text-align: left
}

.numbold_right {
    padding-left: 20px;
    font-family: Calibri;
    font-size: 14pt; /*Bef Kadduri 12pt*/
    font-weight: 900;
    color: #ccc;
    text-align: left
}


/* ???? ???? ????? ??????? 
                                /* onmousemove onmouseout ??? ????? ??? ??????? ?????? ???? ??? ?????? 
                                #dropdown_muktasar label:hover {
                                    background-color:yellow;/*#f2f2f2; /*#ddd; /* yellow; 
                                    content: '\02795'; /*  ????? ?????? 
                                } 
                                */


/* ?????? ??? ?? ?????? ??? ??? ??? ?? ????? ?? ??? ???? 
                #dropdown_muktasar label:after {
                    background-color:green;
                }

                
                #dropdown_muktasar label.active {
                    background-color:  Aqua; /* ?? ????? ??? ??? ?? ?????? ?????  
                }
                            #nestle-section label:hover {
                                background-color:#ddd; /* on hover 
                            }
                
                /* 1 ??????? ???? ??? ????? ?????? (??? ???????) ??? ?????? 
                #nestle-section label:after {
                    content: '\02795'; /* ????? ?????? 
                    font-size: 14pt;
                    /* color: Aqua;/* #777; ?? ????? ?? 
                    float: left;
                    margin-left: 5px;
                }
                
                /* 2 ??????? ???? ??? ????? ?????? (???????) ??? ?????? 
                #nestle-section label.active:after {
                    content: '\2796'; /* ????? ?????? 
                }
                */






/* <link rel="stylesheet" type="text/css" href="style-pagination.css"/>

    /* =============== pagination ================== */
/* ?????? */

.pagination {
    /*Nass   background-color: #f1f1f1; */
    display: inline-block;
    /*.pagination a ما تكتبه هنا أوفر رايد بما مكتوب في تاغ إى الأول الذي هو التالي */
}

    .pagination a {
        color: black;
        float: right;
        height: 30px;
        font-size: 8pt;
        font-weight: 600;
        padding: 0px 8px; /*0px 16px;*/
        text-decoration: none;
        transition: background-color .3s;
    }

        .pagination a.active {
            background-color: #ec407a; /* (dark shade of red) after clicked #cf1020; */
            border-radius: 5px;
            color: #fff;
        }

        .pagination a:hover:not(.active) {
            background-color: #fbceb1; /* (light shade of red) on hover */
            border-radius: 5px;
        }








/* ============  ????  =============== */
/* $$ Begin ??? ????? ???? ??????? */
/* Begin ???? ???? ??????? */
/* A ??? */
.pagination_fusul {
    display: inline-block;
    /* ?? ???????? font-family:Arabic Transparent; font-size:8pt; */
    /* border-bottom: #99cccc 1px solid; */
    /* ?? ???????? vertical-align:middle; */
}

    .pagination_fusul a {
        color: black;
        float: right;
        height: 30px;
        font-size: 8pt;
        padding: 0px 16px;
        text-decoration: none;
        transition: background-color .3s;
    }

        .pagination_fusul a.active {
            background-color: #ec407a; /* ??????? ??? ??????? ????? ????  #cf1020; /* ?????? ??????? ???? ???? ???? */
            border-radius: 5px;
            color: #fff;
        }

        .pagination_fusul a:hover:not(.active) {
            background-color: #fbceb1; /* ?????? ???????*/
            border-radius: 5px;
        }
/* ??????? ???? ?? ???? ??? */
#no_fusul {
    cursor: not-allowed;
    background-color: #fff;
    color: #bfbfbf;
}

.ssocial-links_fusul {
    cursor: url(/images/andalus/pic1.jpg), auto;
}







/* لشعر ص ديفولت الشريط الأسود */
.pagination_btn {
    display: inline-block; /*display: inline ?? ????? ?*/
}
    /* .txt ?? ???????
    .pagination_btn .txt {
        color: #fff; /* ?? ????? ! 
    }
    */
    .pagination_btn a {
        background-color: #333; /*#131313;*/
        border-radius: 5px;
        border-style: solid;
        border-width: 1px;
        padding: 4px 10px 4px 10px; /* ??????? ??????? ?? ???? ??????? ?? ???? */
        color: #666; /*#131313; ???? ???????? ??? ?? ?????  */
        font-size: 10pt;
        text-decoration: none;
        transition: background-color .3s;
    }

        .pagination_btn a:hover {
            border-color: #fff;
            color: #fff;
        }





/* لشعر ص ديفولت عمود أيمن */
.ppagination_btn {
    display: inline-block; /*display: inline ?? ????? ?*/
}
    /* .txt ?? ???????
    .ppagination_btn .txt {
        color: #fff; /* ?? ????? ! 
    }
    */
    .ppagination_btn a {
        background-color: #fff; /*#333;*/ /*#131313;*/
        border-radius: 5px;
        border-style: solid;
        border-width: 1px;
        padding: 4px 10px 4px 10px; /* ??????? ??????? ?? ???? ??????? ?? ???? */
        color: #666; /*#131313; ???? ???????? ??? ?? ?????  */
        font-size: 10pt;
        text-decoration: none;
        transition: background-color .3s;
    }

        .ppagination_btn a:hover {
            border-color: red;/*#fff;*/
            color: red;/*#fff;*/
        }









/*_____________________________________________________________________*/
/* <link rel="stylesheet" type="text/css" href="style-slideshow.css"/> */
/*_____________________________________________________________________*/

/* //////////////////////////////////////////////////////////////// */
/* .slideshow_poems-container   ??? ????? ??????? ?? ??? ???????? */
/* //////////////////////////////////////////////////////////////// */

.slideshow_poems-container {
    position: relative;
    background-color: #666;
    ; /*#666;*/ /*#333;*/ /* #f1f1f1;*/ /* #006c6c; /* teal ???? */ /*  #f1f1f1 ????? ????  */
    line-height: 0px; /*???? ?????? ????? ???? ?????? ??????? ??? ?? ??? ??? ?? ?????? ?? ??? ????? ????? ?????*/
    height: 50px;
}

.mySlides_poems {
    display: none;
    /*padding: 15px; ?????? ????? ??? ????? ?? ??? ?????? ??????? ?? ???? ?????? */
    padding: 15px 60px 20px 60px;
    text-align: center;
    height: 50px;
    width: 100%;
}
/*
                                q_poems {
                                    font-style: italic;
                                    font-family: Calibri;
                                    font-size: larger;
                                    background-color: aqua;
                                }
                                */
/*.author_poems {
                                    font-family: 'Simplified Arabic';
                                    font-size: 24pt;
                                    color:  azure;
                                    padding-top:20px;
                                }*/
.next_poems, .prev_poems {
    cursor: pointer;
    position: absolute;
    top: 25px;
    width: auto;
    margin-top: -25px;
    padding: 25px 25px 25px 25px;
    color: #888;
    font-weight: bold;
    font-size: 20px;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.prev_poems {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px;
}

.next_poems {
    position: absolute;
    left: 0;
    border-radius: 3px 0 0 3px;
}

    .prev_poems:hover, .next_poems:hover {
        background-color: #717171; /* 0.5 ??? ???? */ /* #666666;  #717171;*/ /*????? ????*/ /*rgba(0,0,0,0.8);??? ????*/ /*rgba(0,0,0,0.5);??? ????*/ /* Black background with opacity */
        color: #fff;
    }

.dot_poems-container {
    text-align: center;
    padding: 0px; /*padding: 6px;*/ /*????? ?? ???? ???? ???? ?????? ??????*/
    background-color: #ddd;
    height: 25px; /*??????? ??? ????? ???????? ????????*/
}

.dot_poems {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 2px;
    background-color: #bbb; /* ??? ??????? ??? ?????? ????? ???? */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
    /*Was: .active, .dot_poems:hover {*/
    .dot_poems.active, .dot_poems:hover {
        background-color: #717171; /*approved hover*/ /* ????? ???? */
    }


/*#poem-section-mobile*/
/*style_new1.css*/
/*#poem-section-left*/
/*#poem-section-left*/


/*_________________Begin browsing Hazm trip______________________*/
.slideshow_fusul-container {
    position: relative;
    background-color:#555; /*#555; أرضية سوداء لعرض الرحلة*/
    /*new:( height: auto; auto is best for mobile) */   /*486px;*/ /*551px;  492px; هذا الإرتفاع مرتبط جدا بـ ديفز see: .q_fusul {*/
	/*overflow:auto;*/
	      
		  /*width: auto;*/ /*100%;*/
		  /*height: auto;*/ /*100%*/
		  object-fit: cover; /* Fills the container, cropping if necessary to maintain aspect ratio */	
}

.mySlides_fusul {
    display: none;
             /*padding-top:20px;*/ /*420px;*/ /*padding: 20px;*/ /* 80 */
    text-align: center;
    /*height:auto;new: auto is best for mobile*/		/*200px;*/
	margin:auto;/* margin-top:0px;*/
	
			/*best when image size is reasonable large
			height:100%; width:auto;*/

	/*normal way*/
	width:100%;
	
    font-size: 14pt;
    color: #ccc;
	/*padding-top: 150px;*//*350px;*/ /* هذا السطر مهم لأنه ينزل النص لأسفل*/
	/*margin-top: 10px;*/
	        /*
			object-fit:fill; background-color:green; */
}

        /*لتصغير عنوان خرائطة تجوال ابن حزم*/
		.title_fusul {
			text-align: center;
			height:35px;
			font-size:12pt;
			padding:0px;
			margin-top:0px;
			background-color:#555; color:#fff;
		}

		/* Note: in class: .slideshow_fusul-container height=495px  */
		.q_fusul {
			text-align:right;
			/*arrow slider up-down زيادة الرقم يزيد عدد الأسطر لكن الصور تتأثر عند عرضها بالدفع لأسفل فيتكون*/
			height:100; /*height:140px;  120px; best*/
			width:100%;
			/*line-height:25pt;
			overflow:auto;*/
			background-color:#555; /*Org #f1f1f1;*/ /*#f1f1f1; #fbf9f7;  #e6f6f6;*/
		}


		/* ألغي الأوثر بسبب سكرول النص قصير
		.author_fusul {
			color:cornflowerblue;
			background-color: #f1f1f1;
			line-height:21pt;
			font-size:12pt;
			height:32px;
			margin-top:0px; padding-top:0px;
		}
		*/

.next_fusul, .prev_fusul {
    cursor: pointer;
    position: absolute;
    /*top: 50%;*/
    width: auto;
    margin-top: -28px; /*-30px; لا تغير شئ*/
	padding: 0px 12px 40px 12px; /*padding: 15px; يكبر المحيط بالسهم عند الهوفر*/
    color: #b3b3b3; /*#ddd;/*#888; */
    font-weight: bold;
    font-size: 20pt;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.prev_fusul {
    position: absolute;
    right: 0;
    border-radius: 5px 0px 0px 5px; /* 3px 0 0 3px;*/
	background-color:#555;/* كان قبل المحاضرة هو وشريطه ووعاؤهما العام #333;*/
	margin-top:0px; /*margin-top:165px;*//*نزول الزر عن أعلى الشاشة*/
	height:35px;
}

.next_fusul {
    position: absolute;
    left: 0;
    border-radius: 0px 5px 5px 0px; /* 3px 0 0 3px;*/
	background-color:#555;/* كان قبل المحاضرة هو وشريطه ووعاؤهما العام #333;*/
	margin-top:0px; /*margin-top:165px;*//*نزول الزر عن أعلى الشاشة*/
	height:35px;
}

    .prev_fusul:hover, .next_fusul:hover {
        background-color:#999; /*#666;*/ /* rgba(0,0,0,0.8);أسود*/
        color: #fff;
    }

.dot_fusul-container {
    text-align: center;
	/*في أصل المثالpadding-top:8px; padding-bottom:5px;*/ /*padding: 20px;*/
    padding-top: 3px; /*padding: 6px;            /* 20px; */
    background-color: #555;/*#ccc;*/
    /*height: 30px; زيادة عن أصل المثال*/
	margin:auto; display:block; width:80%; margin-top:0px;
}

.dot_fusul {
    cursor: pointer;
    height: 9px; /*15 كان قبل محاضرة العمارة*/
    width: 9px;
    margin: 0 2px; /* 0 2px; = A paragraph with a left and right margin of 2 pixels*/
    background-color:#bbb;  /*Org #bbb; then #ffcc99;*/
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
    .dot_fusul.active, .dot_fusul:hover {
        background-color:#ffcc99;; /*Was #fff OR #717171;*/
    }

                    /*التالي استبدل بعرض شريط يحمل اسم كل مدينة في عرض الترحال*/
					/*التالي كان ضروري لمنع السكرول من تقريب النص لأعلى الديف بشكل بايخ لكنه ألغي
					.fake_top_margin {
						line-height: 10px;
						margin-top:10px;
						color:#000;
						background-color: #ccc;
						max-height:60px;
					}*/

/*_________________End browsing Hazm trip______________________*/



/*_________________Begin browsing Hazm trip / calligraphy = fusul_________________*/

.slideshow_calligraphy-container {
    position: relative;
    background-color:#555; /*#555; أرضية سوداء لعرض الرحلة*/
    /*new:( height: auto; auto is best for mobile) */   /*486px;*/ /*551px;  492px; هذا الإرتفاع مرتبط جدا بـ ديفز see: .q_fusul {*/
	/*overflow:auto;*/
	      
		  /*width: auto;*/ /*100%;*/
		  /*height: auto;*/ /*100%*/
		  object-fit: cover; /* Fills the container, cropping if necessary to maintain aspect ratio */	
}

.mySlides_calligraphy {
    display: none;
             /*padding-top:20px;*/ /*420px;*/ /*padding: 20px;*/ /* 80 */
    text-align: center;
    /*height:auto;new: auto is best for mobile*/		/*200px;*/
	margin:auto;/* margin-top:0px;*/
	
			/*best when image size is reasonable large
			height:100%; width:auto;*/

	/*normal way*/
	width:100%;
	
    font-size: 14pt;
    color: #ccc;
	/*padding-top: 150px;*//*350px;*/ /* هذا السطر مهم لأنه ينزل النص لأسفل*/
	/*margin-top: 10px;*/
	        /*
			object-fit:fill; background-color:green; */
}

        /*لتصغير عنوان خرائطة تجوال ابن حزم*/
		.title_calligraphy {
			text-align: center;
			height:35px;
			font-size:12pt;
			padding:0px;
			margin-top:0px;
			background-color:#555; color:#fff;
		}

		/* Note: in class: .slideshow_fusul-container height=495px  */
		.q_calligraphy {
			text-align:right;
			/*arrow slider up-down زيادة الرقم يزيد عدد الأسطر لكن الصور تتأثر عند عرضها بالدفع لأسفل فيتكون*/
			height:100; /*height:140px;  120px; best*/
			width:100%;
			/*line-height:25pt;
			overflow:auto;*/
			background-color:#555; /*Org #f1f1f1;*/ /*#f1f1f1; #fbf9f7;  #e6f6f6;*/
		}


		/* ألغي الأوثر بسبب سكرول النص قصير
		.author_calligraphy {
			color:cornflowerblue;
			background-color: #f1f1f1;
			line-height:21pt;
			font-size:12pt;
			height:32px;
			margin-top:0px; padding-top:0px;
		}
		*/

.next_calligraphy, .prev_calligraphy {
    cursor: pointer;
    position: absolute;
    /*top: 50%;*/
    width: auto;
    margin-top: -28px; /*-30px; لا تغير شئ*/
	padding: 0px 12px 40px 12px; /*padding: 15px; يكبر المحيط بالسهم عند الهوفر*/
    color: #b3b3b3; /*#ddd;/*#888; */
    font-weight: bold;
    font-size: 20pt;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

.prev_calligraphy {
    position: absolute;
    right: 0;
    border-radius: 5px 0px 0px 5px; /* 3px 0 0 3px;*/
	background-color:#555;/* كان قبل المحاضرة هو وشريطه ووعاؤهما العام #333;*/
	margin-top:0px; /*margin-top:165px;*//*نزول الزر عن أعلى الشاشة*/
	height:35px;
}

.next_calligraphy {
    position: absolute;
    left: 0;
    border-radius: 0px 5px 5px 0px; /* 3px 0 0 3px;*/
	background-color:#555;/* كان قبل المحاضرة هو وشريطه ووعاؤهما العام #333;*/
	margin-top:0px; /*margin-top:165px;*//*نزول الزر عن أعلى الشاشة*/
	height:35px;
}

    .prev_calligraphy:hover, .next_calligraphy:hover {
        background-color:#999; /*#666;*/ /* rgba(0,0,0,0.8);أسود*/
        color: #fff;
    }

.dot_calligraphy-container {
    text-align: center;
	/*في أصل المثالpadding-top:8px; padding-bottom:5px;*/ /*padding: 20px;*/
    padding-top: 3px; /*padding: 6px;            /* 20px; */
    background-color: #555;/*#ccc;*/
    /*height: 30px; زيادة عن أصل المثال*/
	margin:auto; display:block; width:80%; margin-top:0px;
}

.dot_calligraphy {
    cursor: pointer;
    height: 9px; /*15 كان قبل محاضرة العمارة*/
    width: 9px;
    margin: 0 2px; /* 0 2px; = A paragraph with a left and right margin of 2 pixels*/
    background-color:#bbb;  /*Org #bbb; then #ffcc99;*/
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
    .dot_calligraphy.active, .dot_calligraphy:hover {
        background-color:#ffcc99;; /*Was #fff OR #717171;*/
    }

                    /*التالي استبدل بعرض شريط يحمل اسم كل مدينة في عرض الترحال*/
					/*التالي كان ضروري لمنع السكرول من تقريب النص لأعلى الديف بشكل بايخ لكنه ألغي
					.fake_top_margin {
						line-height: 10px;
						margin-top:10px;
						color:#000;
						background-color: #ccc;
						max-height:60px;
					}*/

/*_________________End browsing Hazm trip / calligraphy = fusul_________________*/



/* ////////////////////////////////////////////////// */
/* .slideshow_hazm-container ??? ?????? ???? ?????? */
/* ////////////////////////////////////////////////// */

.slideshow_hazm-container { /* ????? ??????? ?? ??? ????? ??????? */
    background-color:#fff; /*#fff;*/ /* background-color:#333; */ /*????? ?? ???????*/
    position: relative;
    height: 150px;
}

/* Slides ??? ????? ?? ???????*/
.mySlides_hazm { /* ?????? ??? ?????? ?? ??? */
    display: block;
    padding: 5px 80px 0px 80px; /* ?????? ???? ????? 200 ????? */
    text-align: center;
    height: 100px;
    color: #b3b3b3;
    background-color: #333; /*????? ????? ??? ?????? ??????? ??? ????? ????? ?? ??? ?? ???? ??????*/
}

/* Next & previous buttons */
.next_hazm, .prev_hazm {
    cursor: pointer;
    position: absolute;
    top: 54%;
    width: auto;
    margin-top: -62px; /* ???????? ?????? */
    padding: 16px; /* ???? ????? ????? */
    color: #b3b3b3; /*#ddd more whiter1;   #888 less whiter2;  #b3b3b3 less whiter2*/    /*??? ?? ???? ?????? ???????*/
    font-weight: bold;
    font-size: 20pt;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Position the "prevSH button" to the left */
.prev_hazm {
    position: absolute;
    right: 0;
    /*       ???? ????       ???? ???? */
    border-radius: 5px 0px 0px 5px;
}

/* Position the "next_hazm button" to the right */
.next_hazm {
    position: absolute;
    left: 0;
    border-radius: 0px 5px 5px 0px;
}

    /* On hover, add a black background color with a little bit see-through */
    .prev_hazm:hover, .next_hazm:hover {
        /* show_shareet ?? ????? ???? ??? ??? ????? ?? ?????? */
        background-color: #717171;
        /* onmousemove ????? (show-shareet ??? ?????? ??? ?????? ??? ?? ????? ???????? (?? ?????? ?? ????? */
        color: #888; /*#ddd; */
    }

/* __________________________________ */

/* The dot/bullet/indicator container */
.dot_hazm-container { /* ????? ??????? ?? ??? ??????? ??????? */
    text-align: center;
    padding: 6px; /* 15px; */ /* ???? ?? ????? ??????? ??????? */
    /* ????? ?? ????? ??? ??? ??? ??? ????? background: #ddd; */
    background-color: #e8e8e8; /* #ddd;  /* ????? ???? ????? ????? ??????? */
    height: 40px; /* 57px; ????? ??? ??????? ???????? */
}

/* The dots/bullets/indicators */
.dot_hazm { /* ??? ??????? ????? */
    cursor: pointer;
    height: 30px;
    width: 30px;
    margin: 0 2px;
    background-color:  #d0d0d0; /* #bbb;  /* ??? ????? ????? ???? ??????? ??? ?????? ????? ????  */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    /* Add a background color to the active dot/circle */
    /* Was: .active, .dot_hazm:hover {  */
    .dot_hazm.active, .dot_hazm:hover {
    background-color:#717171; /*approved hover*/ /* ????? ???? */
    }

     /*أحمر أقتم من اللوغو*/  /*أحمر اللوغو#e90606;*/
    /*خاص بزر كل الأجزاء مجتمعة
	.dot_hazm_all {
		cursor: pointer;
		height: 30px;
		width: 30px;
		margin: 0 2px;
		background-color:  #d0d0d0;
		border-radius: 50%;
		display: inline-block;
		transition: background-color 0.6s ease;
		background-color:#cf1020;
	}
    .dot_hazm_all:hover {
        background-color:#717171;
    }
    */    
/*__________________________________________ */


/* Add an italic font style to all quotes */
/*
    q_hazm {
      font-style: italic; font-family:Arabic Transparent; font-size:14pt; color:#c13929;
    }
    */
/* ??? ??? ????? ???? ????? ??????? */
qSH_hazm {
    /* briefjuzu ????? ??????? ????? ?? ???? */
    /*font-style: italic;*/
    font-family: Arabic Transparent;
    font-size: 14pt;
    font-weight: 100;
    line-height: 40px;
    color: #ffcc99;
}


/* ??? ??? ?????? ??????? ??? ????? ???? */
.author_hazm {
    /*line-height: 40px;  in qSH_hazm {   حذف بسبب الأعلى  margin-top: 10px;*/
    color: #ccc; /*??? ???? ????? ?? ????? ???*/ /* .mukhtasar_ajza a:hover ???? ??????? ?? */
    font-family: Arabic Transparent;
    font-size: 14pt; /*Bef Kadduri 12pt*/
    font-weight: 100;
}










/* ///////////////////////////////////////////// */
/* // .slideshow-containerOrg   ( Kutub Rasael ) */
/* ///////////////////////////////////////////// */

.slideshow-containerOrg {
    position: relative;
    background-color: #333; /* ????? ??????? ?????? ???? ???? ??? */
    /*height:454px;*/ /* ????? ?? ????? ????? ??????? ?? ?????? ??????  */
    /* background-color: rgba(90, 125, 0, 0.0); /* 0.5 ??? ???? */
}

/* Slides ??? ????? ?? ???????*/
.mySlidesOrg { /* ?????? ??????? */
    display: none;
        /* padding: 5px; ???? ?????? ????? ???? ???????? ?? ????? */
    text-align: center;
        /*  height:60px; */
        /* ??? ?? ???? ????? ?????? ?? ????? ??????
                                                    width:93%;
                                                    margin-left:3.5%;
                                                    margin-right:3.5%;
                                                     */
}


/* Next & previous buttons */
.prevOrg, .nextOrg {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -30px; /* 0px; ????? ????? ?????? */ /* in ibnHazm was: -30px; */ /* ?? ????? ??? */
    padding: 16px;
    color: #b3b3b3; /*#ddd;/*#888; /* ??? ?? ?????? ??? ??????*/
    font-weight: bold;
    font-size: 20pt;
    /* border-radius: 0 3px 3px 0; ???? ??? ?? ?? ????? */
    user-select: none;
}

/* Position the "prevOrg button" to the left */
.prevOrg {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px; /* ??????? ?????? */
}

/* Position the "next button" to the right */
.nextOrg {
    position: absolute;
    left: 0;
    border-radius: 0px 3px 3px 0px; /* ??????? ?????? */
}

    /* On hover, add a black background color with a little bit see-through */
    .prevOrg:hover, .nextOrg:hover {
        background-color: #717171;
        color: #ddd; /*#888; */
    }

/* __________________________________ */

/* The dot/bullet/indicator container */
.dotOrg-container { /* ????? ??????? ?? ??? ??????? ??????? */
    text-align: center;
    padding: 6px; /* ???? ?? ????? ??????? ??????? */
    background-color: #ddd; /* ???? ????? ?????? ??????? */
    height: 40px; /* ????? ??? ??????? ???????? */
}

/* The dots/bullets/indicators */
.dotOrg { /* ??? ??????? ????? */
    cursor: pointer;
    height: 30px; /* was: 15px in Org */
    width: 30px;
    margin: 0 2px;
    background-color: #bbb; /* ??? ??????? ??? ?????? ????? ???? */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
    /*Was: .active, .dotOrg:hover {*/
    .dotOrg.active, .dotOrg:hover {
        background-color: #717171; /*approved hover*/ /* ????? ???? */
    }




/* ///////////////////////////////////*/
/* //   ???? ?????? ????? ???????? */
/* ///////////////////////////////////*/

.slideshow-containerOrgMagazine2 {
    position: relative;
    background-color: #333; /* ????? ??????? ?????? ???? ???? ??? */
    /*height:454px;*/ /* ????? ?? ????? ????? ??????? ?? ?????? ??????  */
    /* background-color: rgba(90, 125, 0, 0.0); /* 0.5 ??? ???? */
}

/* ???? ????? ???????? ?? ??? ???????? */
.mySlidesOrgMagazine2 {
        /*margin-top: -30px;*/ /*??? ??????? ?? ???????*/
        /*padding-left: 15px;*/ /*????? ?????? ??????? ??? ???????*/
    display: none;
    text-align: center;
        /*background-color: #fff;*/
}

/*?????? ??? ??? ???? ????? ???????? ????? ???? ?? ??????*/

/* Next & previous buttons */
.prevOrgMagazine2, .nextOrgMagazine2 {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -25px; /* -60px; ????? ????? ?????? */ /* in ibnHazm was: -30px; */ /* ?? ????? ??? */
    padding: 16px;
    color: #b3b3b3; /*#ddd;/*#888; /* ??? ?? ?????? ??? ??????*/
    font-weight: bold;
    font-size: 20pt;
    /* border-radius: 0 3px 3px 0; ???? ??? ?? ?? ????? */
    user-select: none;
}

/* Position the "prevOrg button" to the left */
.prevOrgMagazine2 {
    position: absolute;
    right: 0;
    border-radius: 3px 0 0 3px; /* ??????? ?????? */
}

/* Position the "next button" to the right */
.nextOrgMagazine2 {
    position: absolute;
    left: 0;
    border-radius: 0px 3px 3px 0px; /* ??????? ?????? */
}

                    /* On hover, add a black background color with a little bit see-through */
                    .prevOrgMagazine2:hover, .nextOrgMagazine2:hover {
                        /*background-color: #717171;*/   /* ????? ?????? ??? ?????? rgba(0,0,0,0.8);  /* Was in Org: #717171; a bit gray */
                        color: #ddd; /*#888; */ /* #fff; ??? ?????? ??? ?????? */
                    }

.dotOrg-containerMagazine2 { /* ????? ??????? ?? ??? ??????? ??????? */
    text-align: center;
    padding: 8px; /* ??? ??? ??????? ???????? ?????? ?? ??????? ??????? */
    background-color: #ddd; /*#ddd;*/ /*???? ????? ?????? ??????? */
    height:40px; /* ????? ??? ??????? ???????? */
}

/* The dots/bullets/indicators */
.dotOrgMagazine2 { /* ??? ??????? ????? */
    cursor: not-allowed; /*pointer;*/
    height: 16px; /*Was:12px*/
    width: 16px; /*6px;*/
    margin: 0 2px; /*0 2px;*/
    background-color: #bbb; /* ??? ??????? ??? ?????? ????? ???? */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
    /* Add a background color to the active dot/circle */
    /*???? ??????? ??? ??????? ??????? ?????? ?? ???? ??? ???? ????? ?????*/
    .dotOrgMagazine2.active, .dotOrgMagazine2:hover {
        background-color: #717171; /*ORG ????? ???? #717171*/
    }




/* ///////////////////////////////////////////////////// */
/* // .slideshow-containerOrgMagazine  لولا شهادة الكتب */
/* ///////////////////////////////////////////////////// */

.slideshow-containerOrgMagazine {
    position: relative;
    background-color: #fff;
    /*height:454px;*/ /* ????? ?? ????? ????? ??????? ?? ?????? ??????  */
    /* background-color: rgba(90, 125, 0, 0.0); /* 0.5 ??? ???? */
}

/* Slides ??? ????? ?? ???????*/
.mySlidesOrgMagazine { /* ?????? ??????? */
    display: none;
    text-align: center;
}





        /*?????? ??? ????? ?? ? ?????? ??? ????? ???? ?? ??? ?????*/

                /* Next & previous buttons */
                /* Position the "prevOrg button" to the left */
                /* Position the "next button" to the right */
                /* On hover, add a black background color with a little bit see-through */
                /* The dots/bullets/indicators */
                /* Add a background color to the active dot/circle */
        /*?????? ??? ??? ???? ????? ???????? ????? ???? ?? ??????*/

    /* Next & previous buttons */
    .prevOrgMagazine, .nextOrgMagazine {
        cursor: pointer;
        position: absolute;
        top: 50%;
        width: auto;
        margin-top: -60px; /* 0px; ????? ????? ?????? */ /* in ibnHazm was: -30px; */ /* ?? ????? ??? */
        padding: 16px;
        color: #b3b3b3; /*#ddd;/*#888; /* ??? ?? ?????? ??? ??????*/
        font-weight: bold;
        font-size: 20pt;
        /* border-radius: 0 3px 3px 0; ???? ??? ?? ?? ????? */
        user-select: none;
    }

    /* Position the "prevOrg button" to the left */
    .prevOrgMagazine {
        position: absolute;
        right: 0;
        border-radius: 3px 0 0 3px; /* ??????? ?????? */
    }

    /* Position the "next button" to the right */
    .nextOrgMagazine {
        position: absolute;
        left: 0;
        border-radius: 0px 3px 3px 0px; /* ??????? ?????? */
    }

        /* On hover, add a black background color with a little bit see-through */
        .prevOrgMagazine:hover, .nextOrgMagazine:hover {
            background-color: #717171; /* ????? ?????? ??? ?????? rgba(0,0,0,0.8);  /* Was in Org: #717171; a bit gray */
            color: #ddd; /*#888; */ /* #fff; ??? ?????? ??? ?????? */
        }








/* __________________________________ */
/* The dot/bullet/indicator container */
.dotOrg-containerMagazine { /* ????? ??????? ?? ??? ??????? ??????? */
    text-align: center;
    padding: 6px; /* ???? ?? ????? ??????? ??????? */
    background-color: #fff; /*  ???? ?????? ??????? */
    height: 30px; /* ????? ??? ??????? ???????? ??????? ???????? ????? ?? ??????? ???? ??????? ???? ????? ?? ??????? */
}

/* The dots/bullets/indicators */
.dotOrgMagazine { /* ??? ??????? ????? */
    cursor: pointer;
    height: 12px; /* was: 15px in Org */
    width: 12px;
    margin: 0 2px;
    background-color: #bbb; /* ??? ??????? ??? ?????? ????? ???? */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}
    /* Add a background color to the active dot/circle */
    /*???? ??????? ??? ??????? ??????? ?????? ?? ???? ??? ???? ????? ?????*/
    .dotOrgMagazine.active, .dotOrgMagazine:hover {
        background-color: #e90606; /*approved hover, red; logo ?????? ??????*/  /*ORG ????? ???? #717171*/
    }

/* Add a background color to the active dot/circle */

/*


/* ///////////////////////////////////// */
/* .slideshow_footer-container  ??? ??? */
/* ///////////////////////////////////// */
.slideshow_footer-container { /* ????? ??????? ?? ??? ????? ??????? */
    position: relative;
    height: 150px; /* .mySlides_footer, height:110px; ????? ???? ???????? ?? ???? ??????? - ???? ??? ?????? ?? ?????? ?? ??? ?? ???? ????? ?? ?????? - ??????? ????? */
}

/* Slides ??? ????? ?? ???????*/
.mySlides_footer { /* ?????? ??? ?????? ?? ??? */
    display: block;
    padding: 5px 80px 0px 80px; /* ?????? ???? ????? 200 ????? */
    text-align: center;
    height: 110px; /* .slideshow_footer-container, height:170px; ????? ???? ??? ?????? ?? ??? - ?????? ????? */
}

/* Next & previous buttons 
                                        ?? ???? ??? ????? ???
                                        .next_footer, .prev_footer {
                                          cursor: pointer;
                                          position: absolute;
                                          top: 50%;
                                          width: auto;
                                          margin:-50px 0px 0px 0px; /* ???????? ?????? 140 ????? 
                                          padding: 16px;

                                          /* color: Yellow;/*#ddd;/*#888;  /* show-shareet ?? ????? ???? ??? ??? ????? ?? ?????? 

                                          font-weight: bold;
                                          font-size: 20pt;
                                          border-radius: 0 3px 3px 0;
                                          user-select: none;
                                        }

                                        /* Position the "prevSH button" to the left 
                                         ?? ???? ??? ????? ???
                                        .prev_footer {
                                          position: absolute;
                                          right: 0;
                                          border-radius: 3px 0 0 3px;
                                        }

                                        /* Position the "next_footer button" to the right 
                                         ?? ???? ??? ????? ???
                                        .next_footer {
                                          position: absolute;
                                          left: 0;
                                          border-radius: 3px 0 0 3px;
                                        }

                                        /* On hover, add a black background color with a little bit see-through */
/*
                                        ?? ???? ??? ????? ???
                                        .prev_footer:hover, .next_footer:hover {

                                                          /* show-shareet ?? ????? ???? ??? ??? ????? ?? ?????? 
                                                        
                                                          /* background-color: Yellow; /* #d0d0d0;/*#717171; /* Was in Org: rgba(0,0,0,0.8); black 
                                                          /* color: #e90606; /*red; logo ?????? ?????? /*#fff; /* onmousemove ????? show-shareet ??? ?????? ??? ?????? ??? ?? ????? ???????? ?? ?????? ?? ????? 
                                        }
                                        */

/* The dot/bullet/indicator container */
.dot_footer-container { /* ????? ??????? ?? ??? ??????? ??????? */
    text-align: center;
    padding: 6px; /* 15px; */ /* ???? ?? ????? ??????? ??????? */
    /* ????? ?? ????? ??? ??? ??? ??? ????? background: #ddd; */
    background-color: #e8e8e8; /* #ddd;  /* ???? ????? ?????? ??????? */
    height: 40px; /* 57px; ????? ??? ??????? ???????? */
}

/* The dots/bullets/indicators */
.dot_footer { /* ??? ??????? ????? */
    cursor: pointer;
    height: 35px;
    width: 35px;
    margin: 0 2px;
    background-color: #fff;
    border-style: solid;
    border-width: 2px;
    border-color: #e90606;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

/* Add a background color to the active dot/circle */
/*
                                           ?? ???? ??? ????? ??? .active, .dot_footer:hover {
                                           ?? ???? ??? ????? ??? background-color:#fff; /* ????? ??? ?????? ???? ??? ???? ???? ?????? 
                                           ?? ???? ??? ????? ???  }
                                        */












/* ///////////////////////////////////////////////// */
/* .slideshow-container  ( ??? ??? ????? ??????? ) */
/* ///////////////////////////////////////////////// */

.mySlides {
    display: none;
}

img {
    vertical-align: middle;
}

/* Slideshow container */
.slideshow-container {
    /* max-width: 1000px;  /* ?? ?????? ????? ???? ????? ???? ???? ??? ??? ?????ɿ */
    position: relative;
    margin: auto;
    background: #f1f1f1;
}

/* Caption text */
.text {
    padding: 0px 78px; /* 58px; ???? ???? ????? ??? ???? ????? ?????? ?????? ????? ?????? */
    color: #f2f2f2;
    font-size: 15pt; /* ????? ????? ????? = ????? ?????? ?????? ?????? ??? ????? ??? ?????? ????? */
    position: absolute;
    bottom: 0px; /* ???? ??? ??????? ?????? */
    /* width: 100%; ?? ???????? ???? ?????? ???? ?? ???????*/
    text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
    padding: 0px 78px; /* 58px; ???? ???? ????? ??? ???? ????? ?????? ?????? ????? ?????? */
    color: #f2f2f2;
    font-size: 12pt;
    position: absolute;
    top: 0;
}

/* The dots/bullets/indicators */
.dot {
    height: 8px;
    width: 8px;
    margin: 0 2px;
    background-color: #bbb; /* ??? ??????? ??? ?????? ????? ???? */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 5.1s ease; /*0.6s ease ???? ????? ????????*/
}

.active {
    background-color: yellow; /* #717171;*/
}

/* Fading animation */
.fade {
    -webkit-animation-name: fade;
    -webkit-animation-duration: 5.5s; /* 1.5s */
    animation-name: fade;
    animation-duration: 5.5s; /* 1.5s */
}

@-webkit-keyframes fade {
    from {
        opacity: .6
    }

    to {
        opacity: 1
    }
}

@keyframes fade {
    from {
        opacity: .1
    }
    /* .4 */
    to {
        opacity: 1
    }
    /* 1 */
}

/* ?????? ??? ??? ??? ??????? ???????? ????? */
/* On smaller screens, decrease text size 
    @media only screen and (max-width: 300px) {
        .text {
            font-size: 11pt
        }
    }
    */




/* ////////////////////////////////////////////// */
/* .slideBrowse-container     ????? ???? ??????? */
/* ////////////////////////////////////////////// */

.slideBrowse-container {
    /*   ?????? ???? ????? ?? ????? ?? ? ??????? ?????? ??????    */
    position: absolute; /* relative; */
    background-color: #fff; /* #f1f1f1; */
    /*height: 100%; /* was 70px then 300px;*/
}

/* Slides ???? ??? ???? ?? ?????? ???? ??? ???? ?????? ????????*/
.mySlides_Browse {
    display: none;
    /* ?? ????? ?? ???? ???? ?? ?? ? ????? padding: 20px; */
    /* ?? ???? ????? ???? text-align:  right;*/
    /*???? ??? ????? height: 100%; /* height: 30px; then 290px;*/
}

/* Next & previous buttons ?????? ??????? */
.prev_Browse, .next_Browse {
    cursor: pointer;
    position: absolute;
    /*???? ??????? ????? top: 0%; */
    width: auto;
    /* ??????? ?? ???? ????????? ??????? ?? ?? ??????? ???? ?????? ?? ???? ???? ???? ?? ??????? */
    padding: 4px 6px 4px 6px; /* 16px ??? ????? ????? */
    color: #888; /* ??? ?????? ??? ?????? */
    font-weight: bold;
    font-size: 20px;
    /*border-radius: 0 3px 3px 0;*/
    user-select: none;
}
/* Next & previous buttons ?????? ??????? */
.prev_Browse {
    position: absolute;
    /*float:right;/*right: 0;*/
    margin: -2px -12px; /* -32px; : 22+10=32  */
    /*-32px ??? ?? ?????? ?????? ?? ???????*/
    border-radius: 3px 0 0 3px;
}
/* Next & previous buttons ?????? ??????? */
.next_Browse {
    position: absolute;
    /*float:left;/*left: 0;*/
    margin: -2px 10px; /* 10px;: 0+10=10  */
    border-radius: 3px 0 0 3px;
}
    /* Next & previous buttons ?????? ??????? */
    /* On hover, add a black background color with a little bit see-through */
    .prev_Browse:hover, .next_Browse:hover {
        background-color: rgba(0,0,0,0.8);
        color: #fff;
    }

/* The dot/bullet/indicator container ??????? ??????? */
.dot-Browse-container {
    text-align: center;
    /*padding-top: 0px; /* padding-top: 8px; */
    /*padding-bottom: 0px; /* padding-bottom: 5px;  */
    background-color: #fff; /* background: #ddd; */
    height: 35px; /* height:35px; ??? ?????? */
}

/* The dots/bullets/indicators ??????? */
.dot-Browse {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 12px 2px;
    background-color: #bbb; /* ??? ??????? ??? ?????? ????? ???? */
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

    /* Add a background color to the active dot/circle */
    /*Was: .active, .dot-Browse:hover {*/
    .dot-Browse.active, .dot-Browse:hover {
        background-color: #717171; /*approved hover,  ORG ????? ???? #717171*/ /* #e90606 red; logo ?????? ??????*/
    }

						/* Add a ???? color to the author  ???? ?? ????? ??? ??????  */
						/*.author-Browse {
							color: coral;
							font-size: 12pt;
						}*/
/*______________________________*/
/* End ???? ????? ???? ??????? */
/*______________________________*/