@font-face {
  font-family: 'KFGQPC Uthman Taha Naskh';
  src: url('fonts/KFGQPCUthmanTahaNaskh.eot');
  src: url('fonts/KFGQPCUthmanTahaNaskh.eot?#iefix') format('embedded-opentype'),
  url('fonts/KFGQPCUthmanTahaNaskh.woff2') format('woff2'),
  url('fonts/KFGQPCUthmanTahaNaskh.woff') format('woff'),
  url('fonts/KFGQPCUthmanTahaNaskh.svg#webfont') format('svg');
  font-weight: normal;
  font-style: normal;
}
html, body {
	margin:0;
	padding:0;
	height:100%;
}
body {
	font:normal 16px 'Lato', sans-serif;
	line-height:1.6em;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
  color:#000;
  padding-top:50px;
}
header {
  position:fixed;
  top:0px;
  left:0px;
  right:0px;
  z-index:100;
}
nav {
  background:#333;
  color:#fff;
  height:50px;
  font-size:12px;
  text-align:center;
}
nav > div > a {
  position:absolute;
  top:6px;
  color:#81bd00;
  font-size:24px;
}
nav a.prev {
  left:0px;
}
nav a.next {
  right:0px;
}
nav > div > div {
  display:inline-block;
  line-height:40px;
  background:#81bd00;
  padding-right:10px;
}
nav > div > div > a {
  display:inline-block;
  text-transform:uppercase;
  text-decoration:none;
  color:#000;
  padding-left:12px;
}
nav form {
  display:none;
  line-height:40px;
}
nav div.active {
  background:#ccc;
}
nav div.active a {
  padding-right:12px;
}
nav div.active form {
  display:inline-block;
}
nav input.text {
  width:40px;
}
.progress {
  height:10px;
  background:#ccc;
}
.progress div {
  display:block;
  background:#81bd00;
  height:100%;
}
footer {
  position:fixed;
  bottom:0px;
  left:0px;
  right:0px;
}

.width {
  max-width:880px;
  margin-left:auto;
  margin-right:auto;
  position:relative;
}
h1 {
  text-align:center;
  direction:rtl;
  font-weight:normal;
  font:normal 48px 'KFGQPC Uthman Taha Naskh';
}
.aya {
  font:normal 36px 'KFGQPC Uthman Taha Naskh';
  line-height:1.5em;
  direction:rtl;
  list-style:none;
  padding:0;
  padding-bottom:60px;
}
.aya li {
  position:relative;
  margin-left:0;
  margin-right:0;
  margin-bottom:10px;
  padding-right:40px;
}
.aya li:hover {
  background:#ccc;
}
.aya li.bismillah {
  margin-bottom:30px;
}
.num {
  position:absolute;
  right:10px;
  top:4px;
  font-size:18px;
  color:#666;
}
.juz {
  border-top:1px dashed #ccc;
  padding-top:10px;
}
#juz_1 {
  border-top:none;
  padding-top:0;
}
.sign {
  color:#FB7600;
}