@CHARSET "UTF-8";

@font-face {
	font-family: UthmanTaha;
	src: url('UthmanTaha.otf');
}

.taha
{
		font-family: UthmanTaha;
		color: black;
}

body {
	background-image: url("../images/bg.png");
	background-attachment: fixed;
 	background-position: left 0px top 0px; 
	background-repeat: no-repeat;
	direction: rtl;
 	background-color: #edf4fa;
}

#right_menu {
	right: 40px;
	height: 600px;
	position: fixed;
	border-radius: 5px;
}

#quran {
	direction: rtl;
	position: absolute;
	margin-right: 450px;
	background-color: #144378;
	border: 1px solid;
	border-radius: 5px;
}

.ayah {
	cursor: pointer;
}

#tooltip {
	position: absolute;
	background: #FFFFCC;
	padding: 2px 5px;
	color: #333;
	padding: 10px;
	opacity: 0.9;
	direction: rtl;
	max-width: 300px;
	border-radius: 5px;
	display: none;
	font-family: times new roman;
/* 	src: url('UthmanTaha.otf'); */
}



#context {
	background-color: #37475e;
	clear: both;
	border: 1px solid;
	margin-top: 10px;
	margin-left: 10px;
	border-color: #144378;
	width: 380px;
	height: 450px;
	direction: rtl;
	border-radius: 10px;
}

#context_head {
	font-family: UthmanTaha;
	background-color: #46c0f6;
	color: black;
	clear: both;
	text-align: center;
	border: 1px solid;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-color: #144378;
	width: 360px;
	height: 30px;
	border-radius: 10px;
}

#title {
	font-family: UthmanTaha;
	background-color: white;
	color: #287ccc;
	clear: both;
	text-align: center;
	border: 1px solid;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-color: #144378;
	width: 360px;
	height: 30px;
	border-radius: 10px;
}

option {
	font-family: UthmanTaha;
	text-align: center;
}

td {
	font-family: UthmanTaha;
	text-align: center;
	border-radius: 25px;
}

#context_body {
	font-family: UthmanTaha;
	background-color: white;
	clear: both;
	/* 	border: 1px solid; */
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-color: #144378;
	width: 350px;
	height: 330px;
	padding: 5px;
	overflow: auto;
	border-radius: 5px;
}

#select_quran {
	clear: both;
	text-align: center;
	color: #144378;
	/* 	border: 1px solid; */
	margin-top: 10px;
	margin-left: 10px;
	border-color: #144378;
	width: 380px;
	border-radius: 5px;
}

.result {
	clear: both;
	border: 1px solid;
	margin-top: 10px;
	margin-left: 10px;
	border-color: #144378;
	width: 580px;
	/* 	height: 250px; */
	border-radius: 5px;
}

.result_head {
	font-family: UthmanTaha;
	background-color: #287ccc;
	color: white;
	clear: both;
	text-align: center;
	border: 1px solid;
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	border-color: #144378;
	width: 560px;
	height: 30px;
	border-radius: 10px;
}

.result_body {
	font-family: UthmanTaha;
	clear: both;
	/* 	border: 1px solid; */
	margin-top: 10px;
	margin-left: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
	border-color: #144378;
	background-color: white;
	width: 550px;
	/* 	height: 180px; */
	padding: 5px;
	direction: rtl;
	border-radius: 5px;
}

.progressbar {
  position: relative;
  float: left;
  background-color: white;
  width: 50px;
  border-radius: 2px; /* (height of inner div) / 2 + padding */
  padding: 2px;
  height: 12px;
  margin: 7px;
  
}

.progressbar > div {
   position: relative;
   float: left;
   background-color: orange;
   height: 12px;
   border-radius: 2px;
   color:black;
   font-size: 10px;
   direction: ltr;
}