/* FONTS */
@font-face {
	font-family: "me_quran";
	src: local("me_quran"), url("../resources/me_quran.ttf");/* format ("truetype"); */
}
@font-face {
	font-family: "uthmani";
	src: url("../resources/uthmani.otf");/* format ("opentype"); */
}
@font-face {

    font-family: SolaimanLipi;

    src: local("SolaimanLipi"), url('../resources/SolaimanLipi_29-05-06.ttf') format('opentype');

}
::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}
/* GLOBALS */
	* { position: relative; z-index: 0; }
	body {
		margin: 0px;
		background-color: #DADADA;
		background-image: url(../resources/headerBG.jpg);
		background-repeat: repeat-x;
		background-position: center 0;
		height: 100%;
		width: 100%;
		position: static;
	}
	form {
		margin: 0px;
		padding: 0px;
	}
	body, form, input, select, textarea {
		font-family: arial;
		font-size: 11px;
	}
	h1 {
		font-size: 18px;
		color: #0099FF;
		margin: 0px;
		font-weight: normal;
	}
	h2 {
		font-size: 14px;
		color: #336699;
		margin: 0px 0px 10px 0px;
		font-weight: bold;
	}	
	h3 {
		font-size: 12px;
		font-weight: bold;
		margin: 0px;
	}
	h4 {
		font-size: 10px;
		font-weight: bold;
		margin: 0px;
	}
	p {
		margin: 0px;
		padding: 5px 0px 5px 0px;
	}
	
	a,object { outline: none; }
	
	label {
		cursor: pointer;
	}
	#noscript {
		width: 990px;
		margin: 0 auto;
		font-size: 14px;
		font-weight: bold;
		color: #fff;
		text-align: center;
		background-color: #990000;
		margin-bottom: 10px;
		padding: 5px 0px 5px 0px;
	}
	#error {
		font-weight: bold;
		color: #990000;
		border: 1px solid #990000;
		background-color:#FFFFCC;
		padding: 5px 10px 5px 10px;
	}
	
	.clear {
		clear: both;
	}


/* QURAN OUTPUT */
	#quranOutput {
		line-height: normal;
		padding-bottom: 5px;
	}
	#bismillah {
		float: right;
		font-family: me_quran,"traditional arabic";
		color: #666;
		padding: 0 3px 5px 0;
		z-index: 1;
	}
	
	#entireSurahCaption {
		font-size: 10px;
		color: #999;
		clear: both;
	}
	#entireSurahCaption a {
		color: #336699;
	}
	#entireSurahCaption a:hover {
		color: #0099FF;
		text-decoration: none;
	}
	
	.ayahBox1, .ayahBox2 {
		padding: 10px 5px 10px 10px;
		border-bottom: 1px dotted #D4D4D4;
	}
	
	.ayahBox1 {
		background-color:#FFFFF2;
	}
	.ayahBox2 {
		background-color:#fff;
	}
	
	.ayahBoxHeader {
		position: absolute;
		line-height: 16px;
	}

	.ayahBoxNum {
		display: block;
		background: #FEF2DA;
		text-decoration: none;
		color: #D6B169;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		font-size: 20px;
		padding: 10px 8px;
		text-align: center;
	}
	
	.ayahBoxNum:hover {
		/*color: #ce9932;*/
		background: #f1e0be;
	}
	
	.ayahBoxHeaderLinks {
		font-size: 11px;
		margin-top: 5px;
		line-height: normal;
	}
	
	.ayahBoxHeaderLinks a {
		color: #999;
		text-decoration: none;
		display: block;
		padding: 1px 0;
	}
	
	.ayahBoxHeaderLinks a:hover {
		color: #333;	
		text-decoration: underline;
	}
	
	.ayahBoxHeaderLinks a span {
		display: block;
		float: left;
		width: 11px;
		height: 11px;
		margin: 1px 4px 0 0;
		background: url(../resources/ayah_actions.png) no-repeat 0 0;
	}
		
	a.action_toTop span 		{ background-position: 0 0; }
	a.action_toTop:hover span 	{ background-position: -11px 0; }
	a.action_inSurah span		{ background-position: 0 -11px; }
	a.action_inSurah:hover span	{ background-position: -11px -11px; }
	
	.ayah {
		margin: 0px 15px 0px 80px;
		padding: 6px 0px 6px 0px;
		line-height: normal;
	}
	
	.ayah div {
		font: italic 16px/18px georgia;
		color:#6798BF;
		display:block;
	}
	
	.ayah span.highlight {
		font-weight: bold;
		color: #679e11;
	}

	.ayahSign {
		color: orange;
		font-family: Arial, Helvetica, sans-serif;

	}
	
	.ayahMore {
		display: none;
	}
	.foundin {
		margin: 0px 15px 0px 80px;
		padding: 6px 0px 6px 0px;
		line-height: normal;
		font-size: 11px;
		color: #999;
	}
	
	.foundin span {
		margin: 0 5px;
	}
	
	.foundin span.active {
		border-bottom: 1px #999 dotted;
	}
	
	.foundin span.showMore {
		color: #369;
		cursor: pointer;
		font-weight: bold;
	}
	
	.foundin span.showMore:hover {
		text-decoration: underline;
	}
		
	.pagination {
		color: #ccc;
		text-align: right;
		float: right;
		margin: 0;
		padding: 0;
	}
	.pagination li {
		list-style: none;
		float: left;
		margin-left: 8px;
	}
	.pagination a {
		color: #336699;
		text-decoration: none;
	}
	.pagination a:hover {
		color: #6CBDFF;
	}
	
	#noResults {
		color: #990000;
		font-weight: bold;
		font-size: 12px;
		text-align: center;
		padding-top:70px;
		padding-bottom: 70px;
	}

/* TOOLBAR */
	#toolbar {
		z-index: 1;
		position: absolute;
		height: 18px;
		font-size: 12px;
		font-family: Arial;
		padding-top: 3px;
		width: 100%;
		line-height: normal;
	}
	
	#toolbarLeft {
		float: left;
		padding-left: 8px;
	}
	#toolbarRight {
		color: #ACBA5A;
		float: right;
		padding-right: 8px;
	}
	#toolbarRight a {
		color: #fff;
		text-decoration: none;
		padding:0 3px;
	}
	#toolbarRight a:hover {
		color: #E1EDA9;
		text-decoration: underline;
	}
	
	#toolbarRight span {
		color: #ACBA5A;
		font-weight: bold;
		padding: 0 3px;
	}

/* HEADER */
	#header {
		height:200px;
		width: 100%;
		margin-bottom: 10px;
		background-position: center;
		background-repeat: no-repeat;
	}
	#headerBox {
		width: 990px;
		height: 200px;
		margin:0 auto;
		background-image: url(../resources/headerMain.jpg);
		background-position: center;
		background-repeat: no-repeat;	
	}
	#headerLeft {
		float: left;
		padding-left: 0px;
		font-family: "trebuchet ms";
	}
	#headerRight {
		padding-top: 5px;
		float: right;
		padding-right: 83px;
	}
	#search {
		font-size: 20px;
		width:385px;
		font-family: georgia;
		/**/background-image:url(../resources/back.jpg);
		background-repeat: no-repeat;
		background-color: #fff;
		border: 1px solid #6F7D02;
	}
	#searchTips {
		font-size: 11px;
		color: #E1EDA9;
		text-decoration: none;
	}
	#searchTips:hover {
		color: #fff;
		cursor: pointer;
	}
	
/*AJAX STATUS BOX*/
	#statusContainer {
		position: absolute;
		z-index: 2;
		width: 830px;
		top: 120px;
		margin: 0 auto;
		display: none;
	}
	#status {
		width: 215px;
		padding: 30px;
		border: 2px solid #7EA9D3;
		margin: 0 auto;
		font-size: 16px;
		color: #619AD9;
		font-weight: bold;
		background-image: url(../resources/loadingBox.jpg);
		background-repeat: no-repeat;
	}

/*POPUP BOX*/
	#searchBoxTips {
		visibility: hidden;
		z-index: 2;
	}
	#canvas {
		position: absolute;
		z-index: 1;
		width: 100%;
		background-color: #000;
		 filter:alpha(opacity=75);
		opacity: 0.75;
		-moz-opacity:0.75;
		visibility: hidden;
		cursor: pointer;
	}
	
	#popup {
		position: absolute;
		z-index: 2;
		width: 500px;
		border: 4px solid #7EA9D3;
		background-color: #fff;
		margin: 0 auto;
		left: 50%;
		margin-left: -250px;
		top: 90px;
	}
	#popupHeader {
		padding: 5px 10px 5px 10px;
		background-color: #336699;
		color: #fff;
		font-size: 18px;
		background: #5998cd url(../resources/popupHeader.jpg) repeat-x 0 4px;
	}
	#popupClose {
		margin-top: 4px;
		float: right;
		cursor: pointer;
	}
	#popupClose a {
		color: #fff;
		text-decoration: none;
	}
	#popupBody {
		padding: 10px;
	}
	#popup blockquote {
		margin: 0 20px 10px 20px;
	}
	#popup h1, #popup h2, #popup p {
		margin: 5px 0px 5px 0px;
	}
	#popup table {
		border-top: 1px solid #C4E0FF;
		border-left: 1px solid #C4E0FF;
		border-right: 1px solid #C4E0FF;				
	}
	#popup th {
		background-color:#C4E0FF;
		text-align: left;
		padding-left: 10px;
		color: #336699;
	}
	#popup td {
		color: #000;
		font-weight: bold;
		padding: 5px 0px 5px 10px;
		border-bottom: 1px solid #C4E0FF;
		background-color:#ECF5FF;
	}
/* MEDIA PLAYER */
	#player {
		width: 830px;
		position: fixed;
		left: 50%;
		bottom: 0;
		margin-left: -335px;
		height: 25px;
		background: #ccc;	
	}
	
/* LEFT COLUMN */
	#columnLeft {
		float: left;
		width: 160px;
	}
	.columnLeftSub {
		width: 150px;
	}
	.columnLeftBox {
		padding-bottom: 10px;
	}
	.columnLeftBoxSurah {
		padding-bottom: 6px;
	}
	.columnLeftSurah {
		padding: 5px 0px 5px 10px;
		background-color: #fff;
	}
	.columnLeftContent {
		padding: 5px 10px 5px 10px;
		background-color: #fff;
	}
	.columnLeftContent a {
		color: #999;
		text-decoration: none;
	}
	.columnLeftContent a:hover {
		text-decoration: underline;
	}
	.columnLeftContent ul {
		margin: 0px;
		padding: 0px;
	}
	.columnLeftContent li {
		margin-left: 12px;
		list-style-type: disc;
		color: #999;
	}
	
/* MAIN COLUMN */
	#main {
		width: 990px;
		left: 50%;
		margin-left: -495px;
		/*margin: 0 auto;*/
	}
	#columnMain {
		float: right;
		width: 830px;
		background-color:#fff;
	}
	#columnMainContent {
		padding: 5px 20px 5px 20px;
		font-size: 12px;
		line-height: 18px;
		min-height: 710px;
	}
	
	#title {
		height: 25px;
		z-index: 2;
	}
	
	#title h1 {
		float: left;
	}

	#title table {
		width: 100%;
		border-collapse: collapse;
	}

	#title tr > td {
		text-align: center;
		vertical-align: middle;
	}

	#title tr > td:first-child {
		text-align: left;
	}

	#title tr > td:last-child {
		text-align: right;
	}
	
	#subtitle h2 { 
		margin: -5px 0 0 0;;
	}
	
	.subEng {
		font-size: 14px;
		color: #69c0ff;
		font-weight: normal;
	}
	.subAr {
		font-family:me_quran,'traditional arabic';
		font-size:22px;
	}	
	
	.subtitle {
		font-size: 12px;
		font-weight: bold;
		margin: 0px;
		color: #aaa;
	}
	
	#textSize {
		text-align: right;
		float: right;
		width: 200px;
		z-index: 2;
	}
	#textSize #textDecrease, #textSize #textIncrease {
		width: 17px;
		float: right;
		cursor: pointer;
	}
	#staticPage h1 {
		margin-bottom: 10px;
	}
	#staticPage p {
		margin-top: 5px;
		line-height: 20px;
	}
	#staticPage a {
		color: #336699;
		font-weight: bold;
	}
	#staticPage a.inline { font-weight: normal; }
	#staticPage a:hover {
		text-decoration: none;
		color:#0099FF;
	}

/* BOX CURVES */
	.boxTop {
		background: url(../resources/boxTop.gif) no-repeat 0px 0px;
		background-color: #fff;
		height: 4px;
		text-align: right;
		font-size: 0px;
	}
	.boxTopRight {
		text-align: right;
	}
	.boxBottom {
		background: url(../resources/boxBottom.gif) no-repeat 0px 0px;
		background-color: #fff;
		height: 4px;
		text-align: right;
		font-size: 0px;
	}
	
	.boxInnerBottom {
		background: url(../resources/boxInnerBR.gif) no-repeat right 0px;
		height: 4px;
		font-size: 0px;
	}

/* LEFT BOX SUB */
	.leftBoxSub, .leftBoxSubSurah {
		background-color:#EDF4CA;
		padding: 1px 5px 1px 5px;
		border-left: 1px #D2D9AF solid;
		border-right: 1px #D2D9AF solid;
		color: #003399;
		width: 118px;
	}
	.leftBoxSub .languageTitle {
		height: 16px;
		font-weight: bold;
		color: #0099FF;
		cursor: pointer;
		text-decoration: underline;
	}
	.leftBoxSubSurah {
		width: 138px;
	}
	.leftBoxSubSurah select {
		cursor: pointer;
	}

	.leftBoxSub .languageCategory {
		float: left;
	}
	.leftBoxSub .languageArrow {
		float: right;
		padding-top: 5px;
	}
	.leftBoxSeperator {
		height: 10px;
	}
	
	.leftBoxSub .sep {
		border-top: 1px #cad1a5 solid;
		margin-top: 3px;
		padding-top: 1px;
	}
	.leftBoxSubTop, .leftBoxSubTopSurah {
		background: url(../resources/leftBoxSubTop.gif) no-repeat 0px 0px;
		height: 4px;
		text-align: right;
		width: 130px;
	}
	.leftBoxSubBottom, .leftBoxSubBottomSurah {
		background: url(../resources/leftBoxSubBottom.gif) no-repeat 0px 0px;
		height: 4px;
		text-align: right;
		width: 130px;
	}
	.leftBoxSubTopSurah, .leftBoxSubBottomSurah {
		width: 150px;
	}
	.leftBoxNewsTitle a {
		color: #003399;
		text-decoration: none;
	}
	.leftBoxNewsTitle a:hover {
		text-decoration: underline;
		color: #0099ff;
	}
	.leftBoxNewsDate {
		color: #999;
	}
	.leftBoxNewsNew {
		font-size: 8px;
		font-weight: bold;
		color: #ff0000;
	}
	
	.langScroll {
		height: 190px;
		overflow-y: auto;
		margin-top: 2px;
	}
	
/*	QURAN INDEX */
	#quranIndex {
		height: 580px; 
		padding: 5px 0px 0px 30px;
	}
	.surahColumn {
		float: left; 
		width: 150px; 
		line-height: 30px;
		font-size: 13px;
		font-family: "trebuchet ms", Arial, Helvetica, sans-serif;
	}
	.surahColumn a {
		text-decoration: none;
		color: #666;
	}
	.surahColumn a:hover {
		text-decoration: underline;
		color:#0099FF;
	}
	
/* MEDIA PLAYER */
	#mediaPlayer {
		width: 830px;
		height: 20px;
		position: fixed;
		z-index: 5;
		bottom: 0;
		color: #fff;
		background-image: url(../resources/headerMainBG.jpg);
		background-position: center;
		background-repeat: no-repeat;
	}
	#quranPlayer {
		padding: 5px 0 5px 0;
		min-height: 25px;
		float: left;
	}

/* FOOTER */
	#footer {
		width: 830px;
		color: #999;
		font-size: 10px;
		float: right;
		margin: 10px 0px 10px 0px;
		background-color: #EBEBEB;
	}
	#footerContent {
		padding: 10px 20px 10px 20px;
	}
	#footerSearch {
		width: 830px;
		border-bottom: 1px #ddd solid;
		padding-bottom: 10px;
		margin-left: -20px;
		text-align: center;
		margin-bottom: 10px;
	}
	
	#footerRight {
		float: right;
		width: 390px;
		text-align: right;
	}
	#footer a {
		color: #999;
		text-decoration: none;
	}
	#footer a:hover {
		color: #666;
		text-decoration: underline;
	}
	
	.footerCurveTop {
		background: url(../resources/corner_footer_tr.gif) no-repeat right 0px;
	}
	
	.footerCurveBottom {
		background: url(../resources/corner_footer_br.gif) no-repeat right 0px;
	}

	#scrolling {
		visibility: hidden;
		text-align: right;
		position: fixed;
		left: 0;
		bottom: 20px;
		width: 160px;
	}