* {
    margin: 0px;
    padding: 0px;
    outline: 0px;
}

body {
    line-height: normal;
    /*font-family: Arial, Helvetica, sans-serif;*/

}

p {
    margin: 0.5em 0px 1em;
}

ul {
    margin: 0.5em 0px 1em;
}

ol {
    margin: 0.5em 0px 1em;
}

ul {
    padding-left: 3em;
}

ol {
    padding-left: 3em;
}

img {
    border: currentColor;
}

a {
    color: blue;
    text-decoration: none;
}

a:hover {
    color: blue;
}

select {

    font-size: 11px;
    vertical-align: middle;
    background-color: rgb(228 238 220);
}

button {
    font-family: Tahoma;
    font-size: 11px;
    vertical-align: middle;
    background-color: white;
}

input {
    font-family: Tahoma;
    font-size: 11px;
    vertical-align: middle;
    background-color: white;
}

label {
    vertical-align: middle;
    display: inline-block;
}

input[type=checkbox] {
    margin: 0px 6px 0px 1px;
    height: 13px;
}

input[type=radio] {
    margin: 0px 6px 0px 1px;
    height: 13px;
}

.floatStart {
    float: left;
}

.floatEnd {
    float: right;
}

.icon {
    background-image: url("../img/icons.png");
}

.icon-btn {
    border: 0px currentColor;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
}

.button {
    background: url("../img/bg.png") repeat-x 0px -78px;
    margin: 0px 0.1em;
    padding: 0.2em;
    border-radius: 2px;
    border: 1px solid rgb(136, 136, 153);
    text-align: center;
    vertical-align: middle;
    display: inline-block;
    cursor: pointer;
}

.button:hover {
    background-position: 0px -140px;
    border-color: rgb(125, 152, 184);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

#container {
    margin: 0px auto;
    padding: 0px;
    display: block;
}

#body-content {
    background: url("../img/content-bg.png") repeat-y white;
    width: 768px;
}

#side-content {
    background: rgb(255, 255, 255);
    border-width: 0px 1px 0px 0px;
    border-style: solid;
    border-color: rgb(255, 255, 255);
    padding: 0px 8px 20px 4px;
    width: 188px;
    height: 100%;
    color: rgb(51, 51, 51);
    overflow: hidden;
    display: block;
}

#main-content {
    background: white;
    width: 565px;
    height: 100%;
    padding-bottom: 40px;
    position: relative;
}

#footer-content {
    background: rgb(244, 244, 245);
    /*background: rgb(244, 244, 245);;阴影白色;*/
    font: 10px/normal "Traditional Arabic", "_PDMS_IslamicFont";;
    padding: 3.5px;
    text-align: center;
    border-top-color: silver;
    border-bottom-color: silver;
    border-top-width: 0px;
    border-bottom-width: 0px;
    border-top-style: solid;
    border-bottom-style: solid;
    font-size-adjust: none;
    font-stretch: normal;
}

#player-pad {
    display: none;
}

#player-loading div {
    border: currentColor;
    height: 21px;
    text-align: center;
}

#top-content {
    background: url("../img/tanzil-4.png") no-repeat rgb(19, 65, 101);
    height: 72px;
    border-bottom-color: rgb(29, 57, 76);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

#top-content a:hover {

}

.top-menu {
    background: url("../img/bg.png") repeat-x 0px -1px rgb(16, 49, 69);
    height: 19px;
}

.top-menu ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
}

.top-menu li {
    float: left;
    display: block;
}

.top-menu a {
    padding: 0px 9px;
    height: 19px;
    color: rgb(195, 200, 203);
    line-height: 16px;
    font-family: Verdana;
    font-size: 12px;
    float: left;
    display: block;
}

.top-menu a:hover {
    background: url("../img/bg.png") repeat-x 0px -40px rgb(136, 153, 134);
    color: rgb(255, 255, 254);
}

.embed.top-menu {
    height: 27px;
    line-height: 26px;
}

.embed.top-menu a {
    height: 27px;
    line-height: 26px;
}

.embed .embed-title a:hover {
    background-position: 0px -1px;
}

.sub-menu {
    background: rgb(244, 244, 245);
    /*background: rgb(244, 244, 245);;阴影白色;*/
    margin: 7px 0px 0px;
    text-align: left;

    font-size: 11px;
    box-shadow: 0px 1px 1px #eee;
    text-shadow: 0px 1px 0px #fff;
    /*text-shadow: 0px 1px 0px #fff;字加阴影;*/
    -moz-box-shadow: 0px 1px 1px #eee;
    -webkit-box-shadow: 0 1px 1px #eee;
}

.menu-top {
    background: url("../img/menu-top.png") repeat-x 0px 0px;
    padding: 4px 7px;
    color: rgb(70, 130, 180);
    font-family: Verdana;
    font-size: 10px;
    font-weight: bold;
    border-bottom-color: rgb(208, 208, 191);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    cursor: pointer;
    border-radius: 5px 5px 0 0;
    border: solid #d0d0bf 1px;
}

.menu-top:before {
    background: url("../img/menu-top.png") no-repeat -32px 0;
    width: 10px;
    height: 32px;
    display: block;
}

.menu-top:hover {
    color: blue;
}

.menu-content {
    display: none;
}

.menu-body {
    display: none;
}

.small-button {
    margin: 0px 0px 0px 2px;
    padding: 0px;
    width: 22px;
    height: 22px;
}

.menu-setting-icon {
    top: -21px;
    width: 20px;
    right: -1px;
    position: absolute;
}

.menu-body {
    border-width: 0px 1px 1px;
    border-style: none solid solid;
    border-color: currentColor rgb(208, 208, 191) rgb(208, 208, 191);
    padding: 8px 0px;
    border-radius: 0px 0px 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
}

.menu-body .menu-row {
    margin: 0px;
    padding: 2px 5px 2px 5px;
    position: relative;
}

.menu-body a {
    font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial;
}

.menu-body label {
    font-size: 11px;
}

.menu-body label.small {
    width: 17%;
    text-align: center;
    font-size: 12px;
}

.menu-body select {
    padding: 1px;
    border: 1px solid rgb(189, 199, 216);
    width: 76%;
    height: 19px;
}

.menu-body select.long {
    width: 168px;
}

.menu-body option {
    padding: 1px 3px;
}

.menu-body input[type=text] {
    padding: 2px 3px;
    border: 1px solid rgb(189, 199, 216);
    background-color: white;
}

.menu-body input.small {
    width: 64px;
}

.menu-top span {
    background-position: -2px -35px;
    width: 15px;
    height: 10px;
    margin-top: 2px;
    vertical-align: text-top;
    display: inline-block;
}

.collapsed .menu-top span {
    background-position: -18px -35px;
}

.menu-body .vspace {
    height: 5px;
    display: block;
}

#searchText {
    padding: 3px;
    width: 132px;
    direction: rtl;
}

#gotoText {
    padding: 3px;
    width: 132px;
    direction: rtl;
}

#gotoText {
    direction: ltr;
}

.search-tab .button {
    padding: 1px 3px;
    border-radius: 2px;
    border: 1px solid rgb(48, 121, 237);
    top: 3px;
    width: 16px;
    height: 16px;
    right: 5px;
    position: absolute;
    background-image: none;
    background-color: rgb(77, 144, 254);
}

.search-tab .button:hover {
    border: 1px solid rgb(47, 91, 183);
    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.1);
    background-image: none;
    background-color: rgb(53, 122, 232);
}

.menu-body .comment-row {
    margin: 0px 8px -4px;
    text-align: right;
    font-size: 10px;
}

.menu-body .icon {
    width: 16px;
    height: 16px;
    display: inline-block;
    cursor: pointer;
}

.info-mark {
    left: 1px;
    top: -4px;
    color: blue;
    font-size: 11px;
    position: relative;
    cursor: pointer;
}

#rootMenu {
    margin: 0px;
    width: 140px;
    height: 21px;
    direction: rtl;
}

#charList {
    background: rgb(246, 246, 250);
    margin: 5px 7px;
    padding: 2px 3px;
    text-align: center;
    color: gray;
    border-top-color: rgb(238, 238, 238);
    border-bottom-color: rgb(238, 238, 238);
    border-top-width: 1px;
    border-bottom-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    cursor: pointer;
    direction: rtl;
}

#charList a {
    color: rgb(119, 119, 187);
    line-height: 1.5em;
    font-family: Tahoma;
}

#charList a:hover {
    background: rgb(221, 221, 255);
    color: blue;
}

.current-char {
    background: rgb(221, 221, 255);
    color: green;
}

.trans-row .icon {
    background-position: -32px -16px;
    margin-left: -3px;
    display: none;
}

.trans-row .active.icon {
    background-position: -48px 0px;
}

.reciter select.reciteMenu {
    width: 78%;
}

.reciter select.repeatMenu {
    width: 45px;
    display: none;
}

.repeatCount {
    width: 20%;
    text-align: center;
    display: inline-block;
    cursor: pointer;
}
.repeatCount:before{
    content: '循环';
    display: inline-block;
    color: #FF0000;
    font-size: 11px;
}

.edit select.reciteMenu {
    width: 120px;
}

.edit select.repeatMenu {
    display: inline-block;
}

.edit .repeatCount {
    display: none;
}

.reciter .icon-close {
    margin: 0px 2px;
}

.icon-setting {
    background-position: -64px -16px;
}

.icon-setting:hover {
    background-position: -64px 0px;
}

.icon-close {
    background-position: -96px -16px;
}

.icon-close:hover {
    background-position: -96px 0px;
}

.icon-search {
    background-position: -96px -48px;
}

.sound-options {
    background: rgb(241, 254, 240);
    /*background: rgb(242, 244, 236);;阿语阴影色;*/
    padding: 8px 0px 5px;
    border-bottom-color: rgb(221, 221, 221);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

#search-tab {
    margin: 25px 32px 100px;
    width: 500px;
}

.searchHeader {
    padding: 5px 3px;
    color: rgb(51, 51, 51);
    font-family: Arial;
    font-size: 14px;
    font-weight: normal;
}

.searchOffset {
    padding: 0px;
    width: 15px;
    height: 1em;
    text-align: center;
    line-height: 1.1em;
    font-family: Arial;
    font-size: 12px;
}

.searchFrame {
    background: rgb(245, 255, 235);
    border: 4px solid rgb(212, 221, 204);
    overflow: auto;
    font-size: 16px;
    direction: ltr;
    max-height: 450px;
}

.searchResults {
    padding: 0px;
    line-height: 1.5em;
    font-family: "Traditional Arabic", "_PDMS_IslamicFont";
    direction: rtl;
}

.result {
    border-bottom-color: rgb(212, 221, 204);
    border-bottom-width: 1px;
    border-bottom-style: solid;
    cursor: pointer;
}

.result div {
    padding: 5px 10px;
}

.result div:hover {
    background: rgb(228, 238, 220);
}

.result .row-0 {
    background: rgb(245, 255, 235);
}

.result .row-1 {
    background: rgb(238, 248, 229);
}

.searchResults .spec {
    color: green;
    font-family: "Traditional Arabic", "_PDMS_IslamicFont";
    font-size: 20px;
    white-space: nowrap;
}

.searchResults .number {
    color: green;
    font-family: "Traditional Arabic", "_PDMS_IslamicFont";
    font-size:20px;
    white-space: nowrap;
}

.searchResults .highlight {
    color: blue;
    font-size: 95%;
    font-weight: bold;
}

#searchPattern {
    background: rgb(243, 243, 255);
    font-family: Tahoma, "Traditional Arabic";
    direction: rtl;
}

.dbox-wrapper {
    background: url("../img/dbox-bg.png") 0px 0px;
    padding: 10px;
    left: 500px;
    top: 125px;
    width: 400px;
    font-family: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
    display: none;
    position: absolute;
    z-index: 10000;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
}

.dbox-loading {
    padding: 10px;
    border: 1px solid rgb(96, 96, 96);
    color: rgb(51, 51, 51);
    font-size: 24px;
    background-color: rgb(242, 242, 242);
}

.dbox {

}

.dbox-title {
    border-width: 1px 1px 0px;
    border-style: solid;
    border-color: rgb(57, 101, 101);
    margin: 0px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    background-color: rgb(50, 144, 149);
}

.dbox-title span {
    padding: 5px 10px;
    display: inline-block;
}

a.dbox-close {
    padding: 5px 7px;
    color: rgb(255, 255, 254);
    font-family: arial, helvetica, tahoma, verdana, sans-serif;
    font-weight: bold;
    text-decoration: none;
    float: right;
    display: inline-block;
}

a.dbox-close:hover {
    text-decoration: underline;
}

.dbox-body {
    background: rgb(255, 255, 255);
    border-width: 1px;
    border-style: solid;
    border-color: rgb(50, 144, 149) rgb(85, 85, 85) rgb(85, 85, 85);
}

.dbox-content {
    padding: 0px;
    overflow: auto;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.dbox-footer {
    background: rgb(242, 242, 242);
    padding: 8px 10px;
    text-align: right;
    color: rgb(51, 51, 51);
    font-weight: bold;
}

.dbox-footer .button {
    padding: 5px 9px;
    font-family: Arial, sans-serif;
    font-size: 13px;
    margin-left: 6px;
}

.dbox-footer .button:hover {
    color: black;
}

.dbox-content h2 {
    margin: 0.5em 0px;
    font-size: 13px;
}

.dbox-content h3 {
    margin: 0.5em 0px;
    font-size: 12px;
}

.dbox-content li {
    margin-bottom: 0.2em;
}

.dbox-content a {
    color: rgb(59, 89, 152);
    text-decoration: none;
}

.dbox-content a:hover {
    text-decoration: underline;
}

#about {
    padding: 10px;
}

#resources {
    padding: 10px;
}

.tip {
    z-index: 1000;
}

.tip-wrapper {
    border: 1px solid rgb(153, 153, 153);
    color: rgb(69, 69, 69);
    font-family: Tahoma, Arial;
    font-size: 12px;
}

.tip-title {
    padding: 2px 4px;
    font-weight: bold;
    background-color: rgb(225, 225, 225);
}

.tip-content {
    padding: 2px 4px;
    background-color: rgb(255, 255, 255);
}

a.tip-close {
    color: rgb(153, 153, 153);
    font-family: arial, helvetica, tahoma, verdana, sans-serif;
    font-size: 12px;
    text-decoration: none;
    float: right;
    display: inline-block;
}

a.tbox-close {
    color: rgb(153, 153, 153);
    font-family: arial, helvetica, tahoma, verdana, sans-serif;
    font-size: 12px;
    text-decoration: none;
    float: right;
    display: inline-block;
}

a.tip-close:hover {
    text-decoration: underline;
}

a.tbox-close:hover {
    text-decoration: underline;
}

.tip-shadow {
    background-color: rgba(200, 200, 200, 0.6);
}

.tip-shadow2 {
    box-shadow: 3px 3px 4px #aaa;
    -moz-box-shadow: 3px 3px 4px #aaa;
    -webkit-box-shadow: 3px 3px 4px #aaa;
}

.transTip .tip-wrapper {
    border: 2px solid rgb(136, 204, 187);
    font-size: 13px;
}

.transTip .tip-title {
    padding: 7px 10px;
    color: rgb(51, 51, 51);
    font-family: Tahoma, Arial;
    font-size: 12px;
    font-weight: bold;
    background-color: rgb(226, 242, 232);
}

.transTip .tip-content {
    padding: 7px 10px 10px;
    color: rgb(64, 64, 64);
    background-color: rgb(255, 255, 255);
}

.tbox {
    padding-right: 10px;
    display: none;
    position: absolute;
    z-index: 100;
}

.tbox-wrapper {
    width: 250px;
    font-family: Tahoma, Arial;
    font-size: 13px;
    background-color: rgb(255, 255, 255);
}

.tbox-wrapper {
    border-radius: 3px;
    border: 3px solid rgb(183, 216, 177);
    position: relative;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.tbox-title {
    padding: 8px 7px;
    color: rgb(51, 51, 51);
    font-size: 12px;
    font-weight: bold;
    background-color: rgb(228, 238, 220);
}

.tbox-content {
    padding: 7px 7px 9px;
    color: rgb(64, 64, 64);
    background-color: rgb(255, 255, 255);
}

.tbox-title {
    text-align: left;
    direction: ltr;
}

.tip-title {
    text-align: left;
    direction: ltr;
}

.rtl.tbox-title {
    text-align: right;
}

.rtl.tip-title {
    text-align: right;
}

.rtl a.tbox-close {
    float: left;
}

.rtl a.tip-close {
    float: left;
}

.console {
    background: white;
    left: 0px;
    top: 0px;
    width: 250px;
    position: absolute;
    z-index: 1000;
}

.modal .tbox {
    visibility: hidden;
}

.modal .tip {
    visibility: hidden;
}

.modal .qtip {
    visibility: hidden;
}

.tipsy {
    padding: 5px;
    font-family: "Helvetica Neue", Helvetica, Tahoma, Arial;
    font-size: 12px;
    position: absolute;
    z-index: 100000;
}

.tipsy-inner {
    padding: 3px 8px;
    text-align: center;
    color: rgb(238, 238, 238);
    max-width: 200px;
    background-color: black;
}

.tipsy-inner {
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

.tipsy-arrow {
    background: url("../img/tipsy.gif") no-repeat left top;
    width: 9px;
    height: 5px;
    position: absolute;
}

.tipsy-n .tipsy-arrow {
    left: 50%;
    top: 0px;
    margin-left: -4px;
}

.tipsy-nw .tipsy-arrow {
    left: 10px;
    top: 0px;
}

.tipsy-ne .tipsy-arrow {
    top: 0px;
    right: 10px;
}

.tipsy-s .tipsy-arrow {
    background-position: left bottom;
    left: 50%;
    bottom: 0px;
    margin-left: -4px;
}

.tipsy-sw .tipsy-arrow {
    background-position: left bottom;
    left: 10px;
    bottom: 0px;
}

.tipsy-se .tipsy-arrow {
    background-position: left bottom;
    right: 10px;
    bottom: 0px;
}

.tipsy-e .tipsy-arrow {
    background-position: right top;
    top: 50%;
    width: 5px;
    height: 9px;
    right: 0px;
    margin-top: -4px;
}

.tipsy-w .tipsy-arrow {
    left: 0px;
    top: 50%;
    width: 5px;
    height: 9px;
    margin-top: -4px;
}

.font-tester {
    left: -10000px;
    font-size: 19px;
    display: none;
    position: absolute;
}

#loadingImage {
    top: 5px;
    right: 5px;
    position: absolute;
}

#jplayer-box {
    width: 0px;
    hieght: 0;
}

#loading-font {
    padding: 3px 9px 0px 0px;
    display: none;
}

.ui-tab {
    margin: 0px;
    padding: 0.2em 0.2em 0px;
}

.ui-tab li {
    list-style: none;
    margin: 0px 0.2em 1px 0px;
    padding: 0px;
    top: 1px;
    border-bottom-color: currentColor !important;
    border-bottom-width: 0px !important;
    border-bottom-style: none !important;
    float: left;
    white-space: nowrap;
    position: relative;
}

.ui-tab a {
    padding: 0.5em 1em;
    text-decoration: none;
    float: left;
    cursor: pointer;
}

.ui-tab .selected {
    padding-bottom: 1px;
    margin-bottom: 0px;
}

.ui-tab .selected a {
    cursor: text;
}

.ui-tab a:active {

}

#menu-tab ul {
    background: rgb(235, 238, 243);
    border-width: 0px 1px 1px;
    border-style: none solid solid;
    border-color: currentColor rgb(255, 255, 255) rgb(255, 255, 255);
    padding: 4px 2px 0px;
}

#menu-tab li {
    background: rgb(255, 255, 255);
    margin: 0px 0px 0px 2px;
    border: 1px solid rgb(255, 255, 255);
}

#menu-tab a {
    background: rgb(236, 239, 240);
    padding: 1px 4px 2px;
    color: rgb(153, 153, 153);
    font-family: Verdana;
    font-size: 9px;
}

#menu-tab a:hover {
    background: rgb(255, 255, 255);
    color: blue;
}

#menu-tab .selected a {
    background: rgb(255, 255, 255);
    color: rgb(70, 130, 180);
}

#menu-tab .selected a:hover {
    background: rgb(255, 255, 255);
    color: rgb(70, 130, 180);
}

#page-tab {
    position: relative;
}

#page-tab ul {
    background: rgb(228, 238, 220);
    padding: 7px 12px 0px;
    border-bottom-color: rgb(255, 255, 255);
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

#page-tab li {
    background: white;
    margin: 0px 4px 0px 2px;
    border: 1px solid rgb(255, 255, 255);
}

#page-tab a {
    background: rgb(236, 239, 240);
    padding: 2px 6px;
    color: rgb(119, 119, 119);
    font-family: Verdana;
    font-size: 11px;
}

#page-tab a:hover {
    background: rgb(255, 255, 255);
    color: rgb(70, 130, 180);
}

#page-tab .selected a {
    background: white;
    color: blue;
}

#page-tab .selected a:hover {
    background: white;
    color: blue;
}

.ui-helper-clearfix::after {
    height: 0px;
    clear: both;
    display: block;
    visibility: hidden;
    content: ".";
}

.ui-helper-clearfix {
    display: inline-block;
}

* html .ui-helper-clearfix {
    height: 1%;
}

.ui-helper-clearfix {
    display: block;
}

.ui-hidden {
    display: none;
}

.no-hover:hover {
    background-color: white;
}

.top-ad {
    margin: 16px 32px -4px;
    padding: 8px;
    border: 1px solid rgb(226, 200, 34);
    color: rgb(34, 34, 34);
    font-family: "lucida grande", tahoma, arial;
    font-size: 12px;
    display: none;
    position: relative;
    background-color: rgb(255, 249, 215);
}

.quran {
    margin: 4px 32px;
    width: 500px;
    padding-top: 20px;
    font-family: "_PDMS_IslamicFont";
    direction: ltr;
}

.qFrameTop {
    background: url("../img/frame.png") no-repeat rgb(247, 252, 227);
    height: 23px;
}

.qFrameMiddle {
    background: url("../img/frame.png") repeat-y -500px 0px rgb(247, 252, 227);
    line-height: 2.35em;
    font-family: "Traditional Arabic", Scheherazade, "_PDMS_IslamicFont";
}

.qFrameBottom {
    background: url("../img/frame.png") no-repeat 0px bottom rgb(247, 252, 227);
    height: 23px;
}

.suraHeaderFrame {
    background: url("../img/sura-frame.png") no-repeat center;
    margin: 3px 0px 7px;
}

.suraHeaderText {
    width: 412px;
    text-align: center;
    line-height: 49px;
    font-family: "_PDMS_IslamicFont";
    font-size: 16px;
    font-weight: bold;
}

.quranPageHeader {
    padding: 5px;
    text-align: center;
    color: rgb(51, 51, 51);
    font-family: "_PDMS_IslamicFont";
    font-size: 16px;
    font-weight: bold;
    direction: ltr;
}

.quranPageFooter {
    padding: 5px;
    text-align: center;
    color: rgb(51, 51, 51);
    font-family: "_PDMS_IslamicFont";
    font-size: 16px;
    font-weight: bold;
    direction: ltr;
}

.quranText {
    margin: 0px 30px;
    padding: 16px 14px;
    width: 412px;
    text-align: right;
    color: black;
    font-size: 1.15em;
    direction: rtl;
}

.aya {
    background-color: rgb(247, 252, 227);
}

.hover.aya {
    background-color: rgb(228, 238, 220);
}

.selected.aya {
    background-color: rgb(196, 236, 189);
}

.highlight.aya {
    background-color: rgb(196, 236, 189);
}

.ayaNumber {
    color: rgb(0, 85, 0);
    font-size: 0.85em;
    white-space: nowrap;
    cursor: pointer;
}

.ayaNumber a {
    color: rgb(0, 85, 0);
}

.highlight.aya .sign {
    color: black;
}

.highlight.aya span.highlight {
    color: blue;
}

.besm {
    text-align: center;
}

.sign {
    color: rgb(251, 118, 0);
    font-family: "_PDMS_IslamicFont";
    font-size: 0.95em;
}

.internal-sign {
    color: green;
    font-family: "_PDMS_IslamicFont";
    font-size: 0.85em;
}

.juz-sign {
    background-position: 0px -48px;
    width: 16px;
    height: 16px;
    margin-top: 3px;
    vertical-align: middle;
    display: inline-block;
}

.arrow-link {
    color: rgb(170, 170, 170);
    font-family: "_PDMS_IslamicFont";
    font-size: 0.95em;
    text-decoration: none;
}

.arrow-link:hover {
    color: rgb(102, 102, 102);
    text-decoration: none;
}

.transText {
    margin: 0px 44px;
    padding: 16px 0px;
    width: 412px;
    text-align: justify;
    color: black;
    line-height: 1.5em;
    font-family: Tahoma, Arial, "_PDMS_IslamicFont", Sans-Serif;
    font-size: 0.95em;
    direction: rtl;
}

.transText .selected.aya {

}

.transText .selected.aya .ayaNumber {

}

.transText .ayaNumber {
    font-weight: bold;
}

.quranText .ayaNumber {
    font-family: "Traditional Arabic", "_PDMS_IslamicFont";
}

.jp-interface .icon {
    width: 20px;
    height: 26px;
}

.icon-play {

}

.icon-play:hover {
    background-position: -35px 1px;
}

.icon-pause {
    background-position: -35px 1px;
}



.icon-volume {
    background-position: -35px 1px;
}

.mute.jp-volume-toggle .icon {
    background-position: -35px 1px;
}

.jp-interface div {
    margin: 0px;
    padding: 0px;
    overflow: hidden;
}

div.jp-interface {
    background: url("../img/bg.png") repeat-x 0px -150px rgb(240, 240, 240);
    border-width: 0.3px;
    border-style: solid;
    border-color: rgb(238, 238, 238) rgb(187, 187, 187) rgb(171, 171, 171);
    margin: 3px 0px 0px;
    height: 19px;
    vertical-align: middle;
    position: relative;
    direction: ltr;
}

div.jp-interface1 {
    background:rgb(63 81 181 / 13%);
    border-width: 0.3px;
    border-style: solid;
    border-color: rgb(238, 238, 238) rgb(187, 187, 187) rgb(171, 171, 171);
    height: 19px;
    vertical-align: middle;
    position: relative;
    direction: ltr;
}

div.jp-play-pause {
    padding: 1px 4px 1px 1px;
    left: 0px;
    height: 16px;
    border-right-color: rgb(255, 255, 255);
    border-right-width: 1px;
    border-right-style: solid;
    position: absolute;
    cursor: pointer;
}

div.jp-progress {
    left: 25px;
    top: 6px;
    width: 85%;
    height: 7px;
    position: absolute;
}

div.jp-seek-bar {
    width: 85%;
    height: 12px;
    cursor: pointer;
    background-color: rgb(171, 172, 211);
}

div.jp-play-bar {
    width: 85%;
    height: 12px;
    background-color: rgb(0, 0, 153);
}

div.jp-volume-toggle {
    padding: 1px 0px;
    left: 120px;
    height: 16px;
    border-left-color: rgb(255, 255, 255);
    border-left-width: 1px;
    border-left-style: solid;
    position: absolute;
    cursor: pointer;
}

div.jp-volume-mute-pad {
    left: 120px;
    width: 42px;
    height: 18px;
    display: none;
    position: absolute;
    cursor: pointer;
}

div.jp-volume-max {
    left: 160px;
    top: 1px;
    width: 4px;
    height: 16px;
    position: absolute;
    cursor: pointer;
}

div.jp-volume-bar {
    left: 135px;
    top: 1px;
    width: 25px;
    height: 16px;
    position: absolute;
    cursor: pointer;
}

div.jp-volume-bar-wrapper {
    height: 4px;
    margin-top: 6px;
    background-color: rgb(255, 255, 255);
}

div.jp-volume-bar-value {
    width: 0px;
    height: 4px;
    background-color: rgb(0, 17, 170);
}