html {
    height: 100%;
    overflow: hidden;
    font-family: Arial;
}

body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    min-width: 650px;
}

body.rtl {
    direction: rtl;
}

a img{
    border:none;
}

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

#container {
    width: 100%;
    /*overflow-y:scroll;*/
    position: absolute;
    top: 40px;
    left: 0;
    bottom: 0;
    width: 100%;
    z-index: 0;
    top: 55px;
}

#qf {
    display: block;
    width: 100%;
    height: 100%;
}

#header {
    font-size: 10px;
    height: 53px;
    margin: 0px;
    padding: 0px;
    position: absolute;
    width:100%;
    z-index:1;
    min-width: 650px;
}

#header.collapsed {
    overflow:hidden;
}

#header h1 {
    font-size: 13px;
    padding: 0px;
    float: left;
    font-weight: normal;
    padding-left: 27px;
    margin: 0px;
    margin-left: 0px;
    margin-top: 15px;
}

.rtl #header h1 {
    padding-left: 0px;
    padding-right: 27px;
    margin-left: 0px;
    margin-right: 0px;
    float: right;
    background-position: right;
}

#header h1 em {
    font-style: normal;
    font-weight: normal;
    padding: 0px 4px;
}

#header h1 strong {
    font-style: normal;
    font-weight: bold;
    padding: 0px 4px;
}

#header h1 a#bookName {
    display: block;
    width: 146px;
    height: 20px;
    font-size: 12px;
    padding-top: 4px;
    padding-left: 5px;
    text-align: left;
    float: left;
    text-decoration: none;
}

#header h1 a#bookName:hover {
    background-position: 0px -24px !important;
}

.rtl #header h1 a#bookName {
    padding-left: 0px;
    padding-right: 5px;
    text-align: right;

}

.arabic #header h1 a#bookName {
    font-size: 13px;
    float: right;
}

.arabic #header h1 a#bookInfoBtn {
    font-size: 13px;
    font-weight: bold;
}

#header h1 strong {
    padding: 0px;
}

#header h1 a#bookInfoBtn {
    display: block;
    width: 14px;
    height: 14px;
    background: url("/images/infoBtn.gif") no-repeat;
    float: left;
    margin-top: 5px;
    margin-left: 5px;
    cursor: default;
    padding: 0px;
}

.arabic #header h1 a#bookInfoBtn {
    float: right;
    margin-left: 0px;
    margin-right: 5px;
}

#header h1 a#bookInfoBtn:hover {
    background-position: 0px -14px;
}

#header h1 a#bookInfoBtn:active {
    background-position: 0px -28px;
}

#header #logo {
    width: 68px;
    height: 53px;
    float: left;
}

.rtl #header #logo {
    float: right;
}

#header #logo a {
    display: block;
    width: 38px;
    height: 44px;
    margin-left: 15px;
    margin-top: 4px;
}

#header #logo a:hover {
    background-position: 0px -44px;
}

#header #logo a:active {
    background-position: 0px -88px;
}

.rtl #header #logo a {
    margin-left: 0px;
    margin-right: 15px;
}

#header #share {
    position: absolute;
    left: 280px;
    top: 17px;
	xwidth: 100%;	/*fixes double line bug*/
	xbackground-color:#ff0000;
    z-index:-1;
}

.creditsMsg {
    display: block;
    padding-top: 80px;
    font-size: 13px;
    margin-bottom: 17px;
        color: #666;
    background: url("/images/creditsLogo.gif") no-repeat center 0px;
}

.rtl #header #share {
    left: auto;
    right: 280px;
}

.rtl #header #share .addthis_toolbox>a {
    float: right;
}

#header #share.onlyFBTwiG {
    /*width*/
}

#header #share.onlyFBTwiG a {
    display: none !important;
}

#header #share.onlyFBTwiG a.addthis_button_google_plusone,
#header #share.onlyFBTwiG a.addthis_button_facebook_like,
#header #share.onlyFBTwiG a.addthis_button_tweet {
    display: inherit !important;
}

#header #share.onlyFBTwi a {
    display: none !important;
}

#header #share.onlyFBTwi a.addthis_button_facebook_like,
#header #share.onlyFBTwi a.addthis_button_tweet {
    display: inherit !important;
}

#header #share.onlyFB a {
    display: none !important;
}

#header #share.onlyFB a.addthis_button_facebook_like {
    display: inherit !important;
}

#versePage #header #share {
    width: 560px;
}

#header #donateBtn {
    float: right;
    margin-right: 17px;
    margin-top: 11px;
}

.rtl #header #donateBtn {
    float: left;
    margin-right: 0px;
    margin-left: 17px;
}

#header a#donateBtn {
    display: block;
    background: url(/images/donateBtn.png) no-repeat;
    width: 67px;
    height: 22px;
    font-weight: bold;
    color: #fff;
    font-size: 12px;
    padding-left: 34px;
    padding-top: 7px;
}

#header a#donateBtn:hover {
    background-position: 0px -29px !important;
    text-decoration: none;
}

.rtl #header a#donateBtn {
    background: url(/images/donateBtnAr.png) no-repeat;
    padding-left: 0px;
    padding-right: 36px;
    padding-top: 7px;
    width: 65px;
    font-family: Tahoma;
}

.rtl #header a#donateBtn:hover {
    background-position: 0px -29px;
}

#header iframe {
    float: right;
}

#main {
    height: 100%;
    width: 100%;
}

.window {
    position: absolute;
    left: 0;
    z-index: 4;
    top: 0px;
    width: 1px;
    height: 1px;
}

#commentBox, #affiliateBox {
    display: none;
    text-align: center;
    width: 500px;
    position: absolute;
    border: none;
    height: 170px;
    background-color: transparent;
    float: left;
}

#commentBox a.drag, #affiliateBox a.drag {
    position: absolute;
    top: 7px;
    left: 10px;
}

.rtl #commentBox a.drag, .rtl #affiliateBox a.drag {
    left: auto;
    right: 10px;
}

#commentBox .titleBar, #affiliateBox .titleBar {
    font-size: 10px;
    font-weight: bold;
    color: #ddd;
    background-color: #333;
    height: 25px;
    padding-left: 20px;
    padding-top: 5px;
}

#commentBox .titleBar h3, #affiliateBox .titleBar h3 {
    display: inline;
}

#commentBox .titleBar a.drag, #affiliateBox .titleBar a.drag {
    float: left;
    margin-left: 10px;
    color: #ddd;
}

#commentBox .titleBar a.closeBtn, #affiliateBox .titeBar a.closeBtn {
    float: right;
    margin-right: 10px;
    color: #ddd;
}

#affiliateBox .header span.title {
    padding-left: 0px;
}

#affiliateBox .inner {
    height: 100px;
    font-size: 13px;
    line-height: 16px;
}

.arabic #affiliateBox .inner {
    height: 100px;
    font-size: 15px;
    line-height: 20px;
}

#translationBox .header .type {
    float: left;
}

#translationBox .header .type select {
    width: 200px;
}

#transliterationBox .arabicContent {
    width: 700px;
    margin: 0px auto;
    margin-top: 10px;
    font-size: 14px;
}

.bottomBox {
    position: absolute;
    z-index: 3;
    background-color: #ccc;
    bottom: 0px;
    height: 0;

    display: block;
    width: 910px;
    left: 50%;
    margin-left: -455px;
}

.rtl .bottomBox {
    right: 50%;
    left: auto;
    margin-left: auto;
    margin-right: -455px;
}

.bottomBox .header {
    margin: 10px;
}

.bottomBox .content {
    xwidth: 700px;
    margin: 0px auto;
    margin-top: 10px;
    font-size: 14px;
    width: auto;
}

.arabic .bottomBox .content {
    font-size: 16px;
    padding: 2px;
}

.arabic .bottomBox .arabic {
    padding: 2px;
}

#infoBox .header {
    padding: 10px;
    padding-bottom: 0px;
    margin: 0px;
    background-color: #999;
    height: 28px;
}

#infoBox .header .right {
    float: right;
}

.rtl #infoBox .header .right {
    float: left;
}

#infoBox .header .left {
    float: left;
}

.rtl #infoBox .header .left {
    float: right;
}

#infoBox .header .center {
    margin: 0px auto;
    width: 200px;
    text-align: center;
    font-weight: bold;
}

#infoBox .header .right .close {
    float: right;
    margin-right: 10px;
}

.rtl #infoBox .header .right .close {
    float: left;
    margin-right: 0px;
    margin-left: 10px;
}

#infoBox .header .right .nav {
    float: right;
    margin-right: 30px;
}

.rtl #infoBox .header .right .nav {
    float: left;
    margin-right: 0px;
    margin-left: 30px;
}

#infoBox .header .right .links {
    float: right;
    margin-right: 30px;
}

.rtl #infoBox .header .right .links {
    float: left;
    margin-right: 0px;
    margin-left: 30px;
}

#infoBox .header .tabBtns a {
    background-color: #999;
}

#infoBox .header .tabBtns a.selected {
    background-color: #ccc;
}

#infoBox .infoContent {
    overflow: auto;
}

#infoBox .infoContent > .translation {
    direction: ltr;
}

#infoBox .infoContent .aya_text {
    direction: rtl;
    display: none;
}

#infoBox .infoType select {
    width: 180px;
}

#infoBox .infoType {
    margin-top: 23px;
    width: 230px;
    float: left;
    clear: both;
}

.rtl #infoBox .infoType {
    float: right;
}

#infoBox .infoContent {
    width: 610px;
    height: 150px;
    float: left;
    margin-top: 29px;
}

.rtl #infoBox .infoContent {
    float: right;
}

.arabic #infoBox .infoContent {
    font-size: 16px;
}

#infoBox .infoContent .content {
    margin: 0px;
    line-height: 1.5em;
}

#infoBox .header .center {
    font-size: 13px;
    font-weight: bold;
}

.arabic #infoBox .header .center {
    font-size: 15px;
}

#infoBox .nav .verse {
    display: none;
}

#infoBox .header .center a.next {
    float: right;
}

#infoBox .header .center a.prev {
    float: left;
}

#infoBox .header .center {
    width: 260px;
}

#infoBox .header .center .title {
    width: 207px;
    margin-left: 28px;
}

.rtl #infoBox .header .center .title {
    margin-left: 0px;
    margin-right: 20px;
}

.arabic #infoBox .header .center .title {
    margin-top: 1px;
}

#infoBox .header .center a.next, #infoBox .header .center a.prev {
    margin-left: -4px;
}

#infoBox .header .center a.next span,
#infoBox .header .center a.prev span,
#infoBox a.listenBtn span,
#infoBox a.showArabicBtn span {
    display: block;
    width: 0px;
    height: 23px;
    overflow: hidden;
    padding-left: 24px;
}

.rtl #infoBox .header .center a.next span,
.rtl #infoBox .header .center a.prev span,
.rtl #infoBox a.listenBtn span,
.rtl #infoBox a.showArabicBtn span {
    padding-left: 0px;
    padding-right: 24px;
}

#infoBox .header .center a.next,
#infoBox .header .center a.prev,
#infoBox a.listenBtn,
#infoBox a.showArabicBtn {
    display: block;
    width: 24px;
    height: 23px;
}

#infoBox .header .right .links {
    width: 120px;
    margin-right: 0px;
}

#infoBox .header .right .links a {
    float: left;
    margin-left: 10px;
}

#infoBox .header .right a.close {
    margin-right: 0px;
}

#infoBox .arabic {
    margin-bottom: 10px;
    font-size: 18px;
    text-align: right;
    direction: rtl;
}

a.close {
    display: block;
    width: 0px;
    height: 24px;
    padding-left: 24px;
    overflow: hidden;
}

.rtl a.close {
    padding-left: 0px;
    padding-right: 24px;
}

a.close:hover {
    background-position: 0px -24px;
}

a.close:active {
    background-position: 0px -48px;
}

#infoBox .header .tabBtns {
    margin-top: -3px;
}

#infoBox .header .tabBtns a {
    font-weight: bold;
    color: #fff;
    font-size: 13px;
    text-decoration: none;
    background-color: transparent;
    display: block;
    float: left;
    padding: 8px 14px;
}

.rtl #infoBox .header .tabBtns a {
    float: right;
}

.arabic #infoBox .header .tabBtns a {
    font-size: 16px;
    font-weight: normal;
}

#infoBox .header .tabBtns a.selected {
    text-decoration: none;
}

a.tafseerComboBtn {
    display: block;
    width: 174px;
    height: 32px;
    font-size: 12px;
}

a.tafseerComboBtn:hover {
    background-position: 0px -32px;
}

a.tafseerComboBtn:active {
    background-position: 0px -64px;
}

select.tafseer {
    display: none;
}

#infoStrip {
    position: absolute;
    bottom: 0px;
    left: 50%;
    margin-left: 404px;
}

#infoStrip a {
    display: block;
    width: 50px;
    height: 17px;
}

#infoStrip a:hover {
    background-position: 0px bottom;
}

#infoStrip.shift {
    margin-left: 300px;
}

.rtl #infoStrip {
    right: 50%;
    left: auto;
    margin-left: 0px;
    margin-right: 404px;
}

.rtl #infoStrip.shift {
    margin-left: 0px;
    margin-right: 300px;
}

#versePopup {
    display: block;
    background-color: #999;
    width: 180px;
    height: 195px;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
    padding: 15px 3px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

#versePopup .inner {
    position: relative;
}

#versePopup a {
    display: block;
    text-decoration: none;
    font-size: 13px;
    xfont-weight: bold;
    color: #fff;
    padding: 4px 8px;
    background: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.rtl #versePopup a {
    font-size: 15px;
}

/*.#versePopup a {*/

#versePopup a:hover {
    color: #fff;
    background-color: #777;
}

#versePopup a#shareBtn:hover {
    color: #fff;
    /*background-color: #000;*/
}

#header #fbConnectFrame {
    border: none;
    overflow: hidden;
    margin: 8px 40px;
}

#header #fbLikeFrame {
    margin: 8px 40px;
    float: left;
}

#verseImgContainer {
    display: none;
    position: absolute;
    overflow: auto;
    direction: rtl;
    width: 300px;
    height: 300px;
    top: 0px;
    left: 0px;
    background-color: #fff;
    text-align: center;
    border: solid 1px #eee;
}

#jplayer1 {
    display: none;
    position: absolute;
}

#jp_container_1 {
    display: none;
    position: absolute;
    z-index: 3;
    border: none;
    background-color: transparent;
}

#jp_container_1 a.close {
    position: absolute;
    top: 4px;
    right: 10px;
    font-size: 14px;
    text-decoration: none;
}

.rtl #jp_container_1 a.close {
    right: auto;
    left: 10px;
}

#jp_container_1 a.drag {
    position: absolute;
    top: 7px;
    left: 10px;
}

.rtl #jp_container_1 a.drag {
    left: auto;
    right: 10px;
}

a.drag {
    display: block;
    width: 0px;
    height: 16px;
    padding-left: 16px;
    overflow: hidden;
}

.rtl a.drag {
    padding-left: 0px;
    padding-right: 16px;
}

a.drag:hover {
    background-position: 0px -16px;
}

#messageBox {
    display: none;
    position: relative;
    left: -50%;
    z-index: 10;
    margin: 0px auto;
}

#jp_container_1 .inner {
    position: relative;
    padding: 0px;
    height: 90px;
    direction: ltr;
}

#jp_container_1 .inner .jp-title {
    display: none;
}

#jp_container_1 div.jp-interface {
    background-color: transparent;
}

#jp_container_1 .header .title {
    line-height: normal;
}

#jp_container_1 .header .title ul, #jp_container_1 .header .title ul li {
    margin: 0px;
    padding: 0px;
    text-align: center;
    list-style: none;
}

.arabic #jp_container_1 .header .title ul li {
    font-size: 16px;
}

#jp_container_1 div.jp-audio div.jp-type-single div.jp-interface {
    height: auto;
}

#jp_container_1 a#reciterName {
    font-weight: bold;
    text-decoration: none;
    font-size: 11px;
    left: 20px;
    position: absolute;
    top: 69px;
}

.rtl #jp_container_1 a#reciterName {
    direction: rtl;
    left: auto;
    right: 30px;
    font-size: 14px;
}

#jp_container_1 a#reciterName:hover {
    text-decoration: underline;
}

#verseShare {
    display: block;
    width: 230px;
    height: 90px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    display: none;
    position: absolute;
    z-index: 99;
    left: 0px;
    top: 10px;
    background-color: rgba(0, 0, 0, .8);
}

#verseShare a {
    display: block;
    float: left;
    margin-left: 10px;
    margin-top: 15px;
    overflow: hidden;
    width: 64px;
    height: 64px;
    padding: 0px;
}

.rtl #verseShare {
    left: auto;
    /*right: 0px;*/
}

.rtl #verseShare a {
    float: right;
    margin-left: 0px;
    margin-right: 10px;
}

.preloader {
    left: -50%;
    position: absolute;
    width: 112px;
    height: 112px;
}

.preloader span {
    display: block;
    width: 112px;
    height: 112px;
}

.infoPreloader {
    left: 50%;
    top: 40px;
    margin-left: -450px;
    position: absolute;
    width: 900px;
    height: 187px;
    background-color: rgba(255, 255, 255, 0.4)
}

.infoPreloader span {
    display: block;
    width: 900px;
    height: 187px;
}

a#submitBookmarkBtn {
    /*color: #385e7b;*/
    font-size: 14px;
    font-weight: bold;
    margin: 0px auto;
}

a#submitBookmarkBtn:hover {
    /*color: #2884ab;*/
}

#verseShare a.fb {
    background: url("/images/facebook.png") no-repeat;
    /*clear: left;*/
}

#verseShare a.twi {
    background: url("/images/twitter.png") no-repeat;
}

#verseShare a.google {
    background: url("/images/google.png") no-repeat;
}

#verseShare a.pin {
    background: url("/images/big-p-button.png") no-repeat;
}

#bookmarkBox {
    position: relative;
    padding: 20px;
    top: 140px;
    display: none;
    margin: 0px auto;
    z-index: 5;
    background-color: transparent;
}

#bookmarkBox span.enterComment {
    font-size: 12px;
}

.arabic #bookmarkBox span.enterComment {
    font-size: 15px;
}

#bookmarkMsg {
    display: block;
    width: 224px;
    height: 67px;
    padding: 0px;
    border: none;
    position: absolute;
    z-index: 4;
    padding: 14px 24px;
    overflow: hidden;
    font-size: 13px;
}

#darkMask {
    background-color: #000;
    width: 100%;
    height: 100%;
    z-index: 1;
    position: absolute;
}

#bookmarkBox span {
    font-size: 14px;
    xfont-weight: bold;
}

#bookmarkBox textarea.message {
    /*float: left;*/
    /*height: 60px;*/
    /*width: 400px;*/
    /*padding: 4px;*/
    /*font-family: Arial;*/
}

#highlightBtn {
    margin-bottom: 5px;
    margin-left: 10px;
}

.rtl #highlightBtn {
    margin-left: 0px;
    margin-right: 10px;
}

#highlightBtn a {
    display: block;
    float: left;
    margin-left: 5px;
    width: 10px;
    height: 10px;
    border: solid 1px #666;
    overflow: hidden;
    text-indent: 999px;
    padding: 0px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}

.rtl #highlightBtn a {
    float: right
}

#highlightBtn a:hover {
    border-color: #222;
}

#highlightLabel {
    display: none;
    font-size: 9px;
}

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

.tbox {
    position: absolute;
    display: none;
    padding: 14px 17px;
    z-index: 900
}

.tinner {
    padding: 15px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: #fff url(/images/preload.gif) no-repeat 50% 50%;
    border-right: 1px solid #333;
    border-bottom: 1px solid #333
}

.tmask {
    position: absolute;
    display: none;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 100%;
    background: #000;
    z-index: 800
}

.tclose {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 30px;
    height: 30px;
    cursor: pointer;
    background: url(/images/close.png) no-repeat;
}

.tclose:hover {
    background-position: 0 -30px
}

#error {
    background: #ff6969;
    color: #fff;
    text-shadow: 1px 1px #cf5454;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 0
}

#error .tcontent {
    padding: 10px 14px 11px;
    border: 1px solid #ffb8b8;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px
}

#success {
    background: #2ea125;
    color: #fff;
    text-shadow: 1px 1px #1b6116;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 10;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0
}

#bluemask {
    background: #4195aa;
}
#blackmask {
    background: #000;
}

#frameless {
    padding: 0
}

#frameless .tclose {
    left: 6px
}

#tafseerType, #translationType {
    display: none;
}

div.spacer10 {
    display: block;
    width: 1px;
    height: 10px;
}

#fbConnectBtn {
    float: right;
    margin-top: 13px;
    margin-right: 10px;
}

.rtl #fbConnectBtn {
    float: left;
    margin-right: 0px;
    margin-left: 10px;
}

#fbConnectBtn.logout {
    margin-top: 3px;
}

#fbConnectBtn a:hover {
    background-position: 0px -27px !important;
}

#fbConnectBtn a:active {
    background-position: 0px -54px !important;
}

#fbConnectBtn.login a {
    background: url(/images/fb-login.png) no-repeat 0px 0px;
    width: 162px;
    height: 27px;
    display: block;
}

#fbConnectBtn.logout a {
    background: url(/images/fb-logout.png) no-repeat 0px 0px;
    width: 87px;
    height: 27px;
    display: block;
    float: right;
    margin-top: 4px;
}

.rtl #fbConnectBtn.logout a {
    float: left;
}

#fbConnectBtn span {
    display: none;
}

#fbConnectBtn.logout span {
    display: block;
    color: #000;
    font-size: 11px;
    background-color: #ede4cf;
    padding: 1px 4px;
}

#language {
    float: right;
    width: 75px;
    margin-top: 14px;
    text-align: center;
    margin-right: 10px;
}

.rtl #language {
    float: left;
    margin-right: 0px;
    margin-left: 10px;
}

#language .title {
    color: #782f06;
    font-size: 10px;
    font-weight: normal;
    display: none;
}

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
    font-size: 10px;
   z-index: 0;
}

.rtl #footer {
    font-size: 11px;
}

#footer #BookBake {
    margin:0px 12px;
    float: right;
    xwidth: 114px;
    margin-top: -17px;
}

body.english #footer #BookBake, body.french #footer #BookBake {
    float: left;
    margin-right:10px;
}

.rtl #footer #BookBake {
    float: left;
}

#footer #BookBake span {
    float: left;
    margin-top: 4px;
    margin-left: 5px;
}

.rtl #footer #BookBake span {
    float: right;
    margin-left: 0px;
    margin-right: 5px;
}

#footer #BookBake a {
    xbackground: url(/images/kotobee.png) no-repeat;
    xwidth: 64px;
    xheight: 13px;
    xdisplay: block;
    float: left;
    margin-left: 4px;
    margin-top: 2px;
}

.ar #footer #BookBake a {
    background: url(/images/kotobeear.png) no-repeat;
}

.rtl #footer #BookBake a {
    float: right;
    margin-left: 0px;
    margin-right: 4px;
}

#footer #Vijua {
    float: left;
    width: 120px;
    margin-top: -14px;
    margin-left: 250px;
    padding: 2px 0px 3px 2px;
}

body.english #footer #Vijua, body.french #footer #Vijua {
    margin-left: 175px;
    width: 70px;
}

body.english #footer #Vijua span, body.french #footer #Vijua span {
    display:none !important;
}

body.english #footer #NourAcademy, body.french #footer #NourAcademy {
    display:block !important;
    position:absolute;
    bottom:5px;
    right:13px;
}

.rtl #footer #Vijua {
    float: right;
    margin-left: 0px;
    margin-right: 250px;
    padding: 2px 2px 3px 0px;
}

#footer #Vijua span {
    float: left;
    margin-left: 3px;
}

.rtl #footer #Vijua span {
    float: right;
    margin-left: 0px;
    margin-right: 3px;
}

#footer #Vijua a {
    background: url(/images/Vijua.png) no-repeat;
    width: 37px;
    height: 14px;
    display: block;
    float: left;
    margin-left: 5px;
}

.rtl #footer #Vijua a {
    float: right;
    margin-right: 5px;
    margin-left: 0px;
}

#footer .social {
    padding: 2px 0px 0px 2px;
    position: absolute;
    left: 24px;
    bottom: 0px;
}

.rtl #footer .social {
    left: auto;
    right: 24px;
}

#footer .social a.fb {
    display: block;
    background: url(/images/web/fb_icon_20.png) no-repeat 0px 0px;
    width: 20px;
    height: 20px;
    xfloat: right;
	float: left;
    margin-right: 2px;
    margin-top: 10px;
}

#footer .social a.twi {
    display: block;
    background: url(/images/web/twi_icon_20.png) no-repeat 0px 0px;
    width: 20px;
    height: 20px;
    xfloat: right;
	float: left;
    margin-right: 2px;
    margin-top: 10px;
}

.booksPanel {
    width: 739px;
    height: 572px;
    position: absolute;
    z-index: 99;
    top: 15px;
    left: 95px;
}

.rtl .booksPanel {
    width: 739px;
    height: 572px;
    position: absolute;
    z-index: 99;
    top: 15px;
    left: auto;
    right: 82px;
}

.booksPanel a.title {
    padding: 0px;
    font-weight: normal;
    font-size: 12px;
    margin-left: 5px;
    margin-top: 4px;
    display: block;
}

.booksPanel a.title em {
    font-style: normal;
    font-weight: normal;
    padding: 0px 4px;
}

.booksPanel a.title strong {
    font-style: normal;
    font-weight: bold;
    padding: 0px;
}

.rtl .booksPanel a.title {
    margin-left: 0px;
    margin-right: 18px;
    margin-top: 4px;
    font-size: 13px;
}

.booksPanel a.title:hover {
    text-decoration: none;
}

.rtl .booksPanel a.title em {
    font-style: normal;
    font-weight: normal;
    padding: 0px 4px;
}

.rtl .booksPanel a.title strong {
    font-style: normal;
    font-weight: bold;
    padding: 0px;
}

.booksPanel iframe {
    clear: both;
    border: none;
    float: right;
    margin: 35px 15px 20px 10px;
}

.rtl .booksPanel iframe {
    float: right;
    margin: 35px 17px 20px 0px;
}

.booksPanel .homepageBtn {
    xmargin: 0px auto;
    xclear: both;

    margin-left: -56px;
    position: absolute;
    left: 50%;
    bottom: 30px;
}

.booksPanel #bookspanelPreloader {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 212px;
	margin-left: -106px;
	padding-top: 20px;
	margin-top: -30px;
	text-align: center;
	background: url("/images/preloadBar.gif") no-repeat;
}

/* verse popup */

#versePopup {
    padding: 0px;
    background: transparent url("/images/transparent.gif");
    width: 185px;
    height: 185px;
    height: 200px;
}

#versePopup a.contextBtn {
    display: block;
    width: 43px;
    height: 43px;
    padding: 0px;
    position: absolute;
}

#versePopup a.contextBtn:hover {
    background-position: 0px -43px;
}

#versePopup a.contextBtn:active {
    background-position: 0px -86px;
}

#versePopup a.contextBtn span.caption {
    display: none;
}

#versePopup a.contextBtn span.icon {
    display: block;
    width: 43px;
    height: 43px;
}

#versePopup a#copyBtn span.icon, #versePopup a#lastActionBtn.copy span.icon {
    background: url("/images/icons/copy.png") no-repeat center center;
}

#versePopup a#bookmarkBtn span.icon, #versePopup a#lastActionBtn.bookmark span.icon {
    background: url("/images/icons/bookmark.png") no-repeat center center;
}

#versePopup a#shareBtn span.icon, #versePopup a#lastActionBtn.share span.icon {
    background: url("/images/icons/share.png") no-repeat center center;
}

#versePopup a#tafseerBtn span.icon, #versePopup a#lastActionBtn.tafseer span.icon {
    background: url("/images/icons/tafseer.png") no-repeat center center;
}

#versePopup a#transliterationBtn span.icon, #versePopup a#lastActionBtn.transliteration span.icon {
    background: url("/images/icons/transliteration.png") no-repeat center center;
}

#versePopup a#translationBtn span.icon, #versePopup a#lastActionBtn.translation span.icon {
    background: url("/images/icons/translation.png") no-repeat center center;
}

#versePopup a#commentBtn span.icon, #versePopup a#lastActionBtn.comment span.icon {
    background: url("/images/icons/comment.png") no-repeat center center;
}

#versePopup a#listenBtn span.icon, #versePopup a#lastActionBtn.listen span.icon {
    background: url("/images/icons/listen.png") no-repeat center center;
}

#versePopup #highlightBtn {
    display: none;
    position: absolute;
    top: 170px;
    left: 50px;
    margin: 0px;
}

#highlightBtn a {
    width: 19px;
    height: 19px;
    border: none;
    background-color: transparent !important;
    position: absolute;
    margin: 0px;
}

#highlightBtn a.red {
    background: url(/images/icons/highlightRed.png) no-repeat;
}

#highlightBtn a.purple {
    background: url(/images/icons/highlightPurple.png) no-repeat;
}

#highlightBtn a.blue {
    background: url(/images/icons/highlightBlue.png) no-repeat;
}

#highlightBtn a.green {
    background: url(/images/icons/highlightGreen.png) no-repeat;
}

#highlightBtn a.yellow {
    background: url(/images/icons/highlightYellow.png) no-repeat;
}

.hint {
    display: block;
    width: 112px;
    height: 20px;
    text-align: center;
    padding-top: 5px;
    font-size: 10px;
    font-family: Arial;
    position: absolute;
    z-index: 7;
}

.arabic .hint {
    font-weight: bold;
    font-size: 13px;
    padding-top: 3px;
    height: 22px;
}

/* combo boxes */

#language .sbHolder {
    position: relative;
    width: 70px !important;
    height: 20px;
    font-size: 12px;
    margin: 3px 0px 0px 3px;
}

#language .sbHolder:hover {
    background-position: 0px -20px !important;
}

.rtl #language .sbHolder {
    margin: 3px 3px 0px 0px;
}

#language a.sbSelector {
    display: block;
    left: 0;
    font-weight: bold;
    overflow: hidden;
    top: 0;
    background-position: 0px -20px;
    color: #000;
    position: absolute;
    font-size: 11px;
    border: none;
    width: 35px !important;
    height: 17px;
    outline: none;
    text-decoration: none;
    padding: 2px 0px 2px 35px;
    text-align: left;
}

.rtl #language a.sbSelector {
    padding: 2px 35px 2px 0px;
    text-align: right;
}

#language .sbToggle {
    display: none;
}

#language .sbOptions {
    list-style: none;
    left: -1px;
    position: absolute;
    top: 30px;
    z-index: 1;
    overflow-y: auto;
	overflow-x: hidden;
    width: 67px;
    padding: 0px;
    margin: 0px;
    margin-top: 2px;
    margin-left: 2px;
    max-height: 125px;
}

#language .sbOptions a {
    font-weight: bold;
    padding: 2px 0px 2px 35px;
    display: block;
    text-align: left;
}

.rtl #language .sbOptions a {
    padding: 2px 35px 2px 0px;
    text-align: right;
}

#language .sbOptions a:link, .sbOptions a:visited {
    text-decoration: none;
}

#language .sbOptions li.last a {
    border-bottom: none;
}

#language a.English {
    background: url(/images/en.png) no-repeat;
}

#language a.Arabic {
    background: url(/images/ar.png) no-repeat;
}

#language a.French {
    background: url(/images/fr.png) no-repeat;
}

#language a.flag {
    background-position: 12px 4px;
}

.rtl #language a.flag {
    background-position: 38px 2px;
}

.infoType .sbHolder {
    position: relative;
    width: 92px !important;
    height: 30px;
    font-size: 12px;
    margin: 3px 0px 0px 3px;
}

.rtl .infoType .sbHolder {
    margin: 3px 3px 0px 0px;
    width: 174px !important;
}

.infoType a.sbSelector {
    display: block;
    left: 0;
    font-weight: bold;
    overflow: hidden;
    top: 0;
    position: absolute;
    outline: none;
    text-decoration: none;
    width: 154px !important;
    height: 23px;
    padding: 9px 0px 0px 20px;
    font-size: 12px;
    background-color: transparent !important;
}

.rtl .infoType a.sbSelector {
    font-size: 15px;
    width: 144px !important;
    padding: 9px 30px 0px 0px;
}

.infoType a.sbSelector:hover {
    background-position: right -32px;
    color: #fff;
}

.infoType .sbToggle {
    display: none;
}

.infoType .sbOptions {
    list-style: none;
    left: -1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 30px;
    z-index: 1;
    width: 170px;
    padding: 0px;
    margin: 0px;
    margin-top: 9px;
    margin-left: 2px;
    max-height: 125px;
    overflow-y: auto;
	overflow-x: hidden;
}

.infoType .sbOptions a {
    font-weight: bold;
    padding: 8px 10px;
    display: block;
}

.rtl .infoType .sbOptions a {
    font-size: 14px;
}

.infoType .sbOptions a:link, .sbOptions a:visited {
    text-decoration: none;
}

.infoType .sbOptions a:hover,
.infoType .sbOptions a:focus,
.infoType .sbOptions a.sbFocus {
    padding: 8px 10px;
}

.infoType {
    margin-left: 20px;
}

.rtl .infoType {
    margin-right: 20px;
    margin-left: 0px;
}

/* dialog */

.dialog {
    margin: 0px;
    padding: 0px;
}

.dialog .header {
    width: 100%;
    height: 32px;
    position: relative;
}

.dialog .header .left {
    height: 32px;
    display: block;
    width: 9px;
    float: left;
}

.dialog .header .right {
    height: 32px;
    display: block;
    width: 9px;
    float: right;
}

.dialog .header span.title {
    display: block;
    height: 23px;
    margin: 0px 9px;
    font-size: 14px;
    /*font-weight: bold;*/
    padding-top: 9px;
    padding-left: 17px;
}

.arabic .dialog .header span.title {
    font-size: 16px;
}

.dialog .header a.close {
    position: absolute;
    top: 5px;
    right: 7px;
}

.rtl .dialog .header a.close {
    padding-right: 24px;
    padding-left: 0px;
    right: auto;
    left: 7px;
}

.dialog .inner {
    padding: 13px 20px;
    font-size: 14px;
}

.arabic .dialog .inner {
    font-size: 18px;
}

.dialog .footer .left {
    height: 6px;
    display: block;
    width: 8px;
    float: left;
}

.dialog .footer .right {
    height: 6px;
    display: block;
    width: 8px;
    float: right;
}

.dialog .footer .center {
    display: block;
    height: 6px;
    margin: 0px 8px;
}

.dialog textarea {
    display: block;
    width: 90%;
    height: 60px;
    padding: 8px;
    border: 1px solid #cccccc;
    line-height: 130%;
    font-size: 13px;
    font-family: Arial;
    color: #666;
}

.arabic .dialog textarea {
    font-size: 15px;
}

a.btn 
{
    display: block;
    width: 113px;
    height: 25px;
    padding-top: 7px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}

a.btn:hover {
    background-position: 0px -32px;
    color: #fff;
}

a.btn:active {
    background-position: 0px -64px;
    color: #fff;
}

/*   general classes */

.centered {
    left: 50%;
}

.ltr {
    direction: ltr;
}

.textCenter {
    text-align: center;
}

:focus {
    outline: 0;
}

.clear {
    clear: both;
}

.hidden {
    display: none;
}

.invisible {
    visibility: hidden;
}

/*************************SKIN CHOOSER ADDITIONS****************************/

/*BUTTON*/
#header #skinChooseBtn
{
	display:block;
	float: right;
	width: 70px;
	height:17px;
	margin-top: 17px;
	text-align: center;
	margin-right: 20px;
	position: relative;
	/*background-image: url("/assets/skins/white/images/changeSkinBtn.png");*/
	font-size: 11px;
	font-weight: bold;
	text-decoration:none;
	padding-top: 3px;
	color:#000;
}
#header #skinChooseBtn:hover
{
	background-position: 0px -20px;
}
#header #skinChooseBtn .skinIcon
{
	display:block;
	border: none;
	background-image: url("/assets/skins/white/images/pallet.png");
	position: absolute;
	width:16px;
	height:16px;
	left: 3px;
	top: 2px;

	
}
.rtl #header #skinChooseBtn
{
	float: left;
	margin-right: 0px;
	margin-left: 20px;
	background-image: url("/assets/skins/white/images/changeSkinBtnAr.png");
}
.rtl #header #skinChooseBtn .skinIcon	
{
	left: auto;
	right: 3px;
}

/*USER INTERFACE*/
#skinSelection
{
	display: none; /*will be revealed in jQuery*/
	position: relative;
	/*margin:auto;*/
	width:748px;
	height:456px;
	background-image:url(/assets/skins/white/images/skinChooser/window.png);
}
#skinSelection .header
{
	/*font-family:Georgia, serif;*/
	position:relative;
	width:100%;
	height:54px;	
}
#skinSelection .header p
{
	position:absolute;
	font-size:24px;
	top:15px;
	left:15px;
	margin:0px;
	padding:0px;
}
.rtl #skinSelection .header p
{
	left:auto;
	right:15px;	
}
#skinSelection .header a.close
{
	position:absolute;
	right:9px;
	top:9px;
	width:9px;
	height:8px;
	background-image:url(/assets/skins/white/images/skinChooser/closebutton.png);
	background-position:0px -16px;
	padding-left: 0px;
	padding-right: 0px;	
}
.rtl #skinSelection .header a.close
{
	right:auto;
	left:9px;
	padding-left: 0px;
	padding-right: 0px;
}
#skinSelection .header a.close:hover
{
	background-position:0px -8px;
}
#skinSelection .header a.close:active
{
	background-position:0px 0px;
}
#skinSelection .main
{
	width:100%;
	height:333px;
	position:relative;

}
#skinSelection .skinList
{
	overflow:auto;
	direction:ltr;
	width:255px;
	float:left;
	margin-left:10px;
	height:100%;
}
.rtl #skinSelection .skinList
{
	direction:rtl;
	float:right;
	margin-right:10px;
}
#skinSelection .listElem
{
	display:block;
	position:relative;
	width:100%;
	height:70px;
	color:#6d6d6d;
	font-size:18px;
	/*font-family:Tahoma, Geneva, sans-serif;*/
}
#skinSelection .listElem:hover
{
	background-color:#f5f5f5;
	color:#000000;	
}
#skinSelection .listElem:active
{
	background-color:#e8e8e8;
	color:#c12a35;	
}
#skinSelection .listElem.selected
{
	background-color:#e8e8e8;
	color:#c12a35;	
}
#skinSelection .listElem img
{
	position:absolute;
	top:3px;
	left:5px;	
}
.rtl #skinSelection .listElem img
{
	left:auto;
	right:5px;
}
#skinSelection .listElem span
{
	display:block;
	position:absolute;
	left:86px;
	top:25px;
	font-size: 14px;
	
}
.rtl #skinSelection .listElem span
{
	left:auto;
	right:86px;
}
#skinSelection .skinPreview
{
	position:relative;
	width:456px;
	height:100%;
	float:right;
	margin-right:15px;
	border-color:#c9c9c9;
	border-style:solid;
	border-width:1px;
	background: url("/images/preload.gif") no-repeat center center;
}
#skinSelection .skinPreview img
{
	position:absolute;
	top:0px;
	left:0px;
	right:0px;
	bottom:0px;
}
.rtl #skinSelection .skinPreview
{
	float:left;
	margin-left:15px;
	margin-right:0px;
}
#skinSelection .btns
{
	width:100%;
	height:69px;
	position:relative;	
		
}
#skinSelection .btns a
{
	position:absolute;	
	bottom:18px;
	width:113px;
	height:25px;
	text-align:center;
	text-decoration:none;
	padding-top:7px;
	font-size:14px;
	/*font-weight:bold;*/
	/*font-family:Arial, Helvetica, sans-serif;*/

}	
#skinSelection .btns a.ok
{
	left:38px;
	/*background-image:url(/assets/skins/white/images/skinChooser/btn.png);
	color:#fff;*/
}
.rtl #skinSelection .btns a.ok
{
	left:auto;
	right:38px;
}
#skinSelection .btns a.cancel
{
	left:165px;
	/*background-image:url(/assets/skins/white/images/skinChooser/btnw.png);
	color:#000;*/
}
.rtl #skinSelection .btns a.cancel
{
	left:auto;
	right:165px;
}
#skinSelection .btns a.bright
{
	width:91px;
	text-align:left;
	padding-left:39px;
	left:auto;
	right:15px;
	background-image:url(/assets/skins/white/images/skinChooser/btnB.png);
	/*color:#000;*/
}
#skinSelection .btns a.bright span
{
	display:block;
	position:absolute;
	background-image:url(/images/Brightness.png);
	left:16px;
	top: 7px;
	width:16px;
	height:16px;
}
.rtl #skinSelection .btns a.bright
{
	text-align:right;
	padding-left:0px;
	padding-right:43px;
	left:15px;
	right:auto;
}
.rtl #skinSelection .btns a.bright span
{
	left:auto;
	right:20px;
}

#skinSelection .btns a:hover
{
	background-position:0px -32px;	
}	
#skinSelection .btns a:active
{
	background-position:0px -64px;	
}

p.skinCText
{
	display:block;
	margin:0px;
	padding:0px;
}


/*******subscribe form******/
.rtl #footer .social a.twi, .rtl #footer .social a.fb, .rtl #footer .social a.mail, .rtl #footer .social span.subsLabel
{
	float: right;
}
#footer .social a.mail {
    display: block;
    background: url(/images/web/mail_icon_20.png) no-repeat 0px 0px;
    width: 20px;
    height: 20px;
    float: left;
    margin-right: 2px;
    margin-top: 10px;
}
#footer .social span.subsLabel {
    display: block;
    background-color:#fff;
	color:#000;
	padding-top:4px;
	padding-left:2px;
	padding-right:2px;
    height: 16px;
    float: left;
    margin-right: 2px;
    margin-top: 10px;
	xopacity:0;
}

#mc_embed_signup
{
	position: absolute;
	z-index:100;
x	background:#fff; 
	clear:left; 
x	font:14px Helvetica,Arial,sans-serif;
x	width:400px;
	xheight:450px;		
x	margin-bottom: 20px;
x	display:none;
x	border-radius: 6px;
}
#mc_embed_signup #mc-embedded-subscribe-form .button
{
    display: block;
    width: 113px;
    height: 32px;
    padding: 0px;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
	clear: both;
	display: inline-block;
	margin: 0 5px 10px 0;
	vertical-align: top;
	white-space: normal;
	
}

#mc_embed_signup #mc-embedded-subscribe-form .button:hover 
{
    background-position: 0px -32px;
    color: #fff;
}
#mc_embed_signup #mc-embedded-subscribe-form .button:active 
{
    background-position: 0px -64px;
    color: #fff;
}

#mc_embed_signup form#mc-embedded-subscribe-form
{
	padding: 10px 0px 0px 3%;

}
#mc_embed_signup #mc-embedded-subscribe-form div.response 
{
	margin: 6px 0;
	padding: 0px .5em .5em 0;
}
.rtl #mc_embed_signup form#mc-embedded-subscribe-form 
{
	padding: 10px 3% 0px 0px;
	text-align: right;
}

.rtl #mc_embed_signup .indicates-required 
{
	text-align:left;
	margin-left: 4%
}
.rtl #mc_embed_signup .button {
	margin: 0 0 10px 5px;
}

.rtl #mc_embed_signup .mc-field-group .asterisk  {
	right:auto;
	left:10px;
	top: 30px;
	font-size: 180%;
}

.rtl #mc_embed_signup #mce-responses div.response
{
	float:right;
	font-size: 16px;
}
.preloading {
	width:100%;
	background: url("/images/preload.gif") no-repeat center center;
	height: 40px;
}
span.title#subsTitle
{
	text-align: center;
	font-size: 15px;
	font-weight: bold;
	padding-left: 10px;
}
#mc_embed_signup form#mc-embedded-subscribe-form  div.mce_inline_error {
	background-color: #FFFFFF;
	color: #6B0505;
	margin: 0 0 1em 0;
	font-size: 15px;
	xfont-weight: normal;
}
.rtl #mc_embed_signup form#mc-embedded-subscribe-form  div.mce_inline_error {

}