@font-face {font-family: "quran";src: local("quran"), url("quran.ttf") format('truetype');}
@font-face {font-family: 'urdufont';font-style: normal;font-weight: 400;src: local("urdufont"), url("mehr-nastaliq-web-1p1.ttf") format('truetype');}

body {
	font-family: "urdufont", tahoma;
	font-size: 14px;
	margin:0;
	background-color:#DDD;
}

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

a:hover {
	color:navy;
}


form {
	direction:rtl;
}

div, td, p {
	box-sizing:border-box;
}

header {
	background: #283c86;
	background: -webkit-linear-gradient(to right, #45a247, #283c86);
	background: linear-gradient(to right, #45a247, #283c86);
	position:fixed;
	top:0;
	width:100%;
	height:48px;
	text-align:center;
	display:flex;
	justify-content:center;
}

header #menuicon {
	width:44%;
	max-width:480px;
	text-align:left;
}

header #logo {
	width:44%;
	max-width:480px;
	text-align:right;
}

main {
	width:100%;
	max-width:1000px;
	min-height:100vh;
	margin:50px auto 50px auto;
	direction:rtl;
	text-align:center;
}

h1 {
	margin:2px 0;
	padding:12px;
	font-weight:normal;
	font-family:Tahoma;
	font-size:1.9em;
	line-height:1.3em;
	color:PALEGREEN;
	background: #C04848;
	background: -webkit-linear-gradient(to left, #480048, #C04848);
	background: linear-gradient(to left, #480048, #C04848);
}

h1 span {
	font-size:.8em;
	padding:0 5px 0 5px;
	font-family:tahoma;
	color:white;
}

h2 {
	background-color:#70a970;
	color:white;
	font-family:quran;
	padding-bottom:12px;
	font-weight:normal;
	margin:0;
	padding-top:3px;
	font-size:1.5em;
	line-height:1.8em;
}

main div  {
	direction: rtl;
	font-family: "quran",Traditional Arabic,Arial;
	font-size: 1.7em;
	line-height:1.9em;
	word-spacing:.2em;
	margin-top:5px;
	padding:7px 15px 7px 15px;
	color:DarkGreen;
	background-color:#FFF;
}

main div b {
	font-size:.8em;
	font-family:Tahoma;
	font-weight:normal;
}

main div > a {
	color:blue;
	font-size:1em;
}

main div em {
    font-style:normal;
    font-size:1em;
    vertical-align:super;
}

main p {
	direction: rtl;
	color:#222;
	font-family: urdufont;
	font-size:1.4em;
	line-height:1.7em;
	margin:0;
	padding:15px 15px 7px 15px;
	background-color:#f2f2f2;
}

#top-link {
	display:none;
	position:fixed;
	bottom:20px;
	right:20px;
}

#top-link a {
	background-color:#CCC;
	color:blue;
	font-size:1.5em;
	padding:0 8px 0 8px;
	text-align:center;
	border-radius:50%;
}

.msg-error {
	padding:50px;
	font-family:tahoma;
	font-size:1em;
	color:red;
}

footer {
	background: linear-gradient(to right, #7AA1D2, #DBD4B4, #CC95C0);
	color:navy;
	font-family:Verdana;
	direction:rtl;
	padding:10px 5px 10px 5px;
	text-align:center;
}

footer a {
	color:navy;
}

#banner img {
	border-top:2px solid #FFF;
	width:100%;
	display:block;
}

#fehrist-surah {
	margin:0 auto;
	width:100%;
	font-family:Arial;
	font-size:1.4em;
	line-height:1.5em;
	text-align:center;
	border-collapse:collapse;
	background-color:#FFF;
}

#fehrist-surah tr:nth-child(even) {
	background:#ecf9f2;
}

#fehrist-surah td {
	border:1px solid white;
	vertical-align:middle;
}

#fehrist-surah td:nth-of-type(1),
#fehrist-surah td:nth-of-type(4)
{
	font-size:.8em;
}

#fehrist-surah th {
	background-color:#70a970;
	color:#FFF;
	padding:5px 0 5px 0;
	border:1px solid white;
}

.alter-text {
	color:Chocolate;
}

#search {
	background:Bisque;
	border-top:2px solid #FFF;
	font-size:1.3em;
	padding:7px 0 7px 0;
	text-align:center;
}

#search input {
	padding:3px 5px 3px 5px;
	margin-left:10px;
	max-width:80%;
	width:220px;
}

#lookup{
	background:#c4e3ed;
	font-size:1.3em;
	line-height:2em;
	text-align:center;
	border-top:2px solid #FFF;
}

#lookup input {
	font-family: tahoma;
	width:50px;
	text-align:center;
	margin:0 7px 0 13px;
}

button {
	padding:2px 7px 2px 7px;
	border-radius:5px;
	font-size:.9em;
	cursor:pointer;
}

#buttons {
	line-height:1.1em;
	padding:12px;
	background-color:#FFF;
	display:flex;
	justify-content:center;
	font-family:urdufont;
}

#buttons a {
	font-size:1.2em;
}

.prev {
	background-color:SteelBlue;
	color:#FFF;
	padding:13px 20px 5px 10px;
	border-top-right-radius:20px;
	border-bottom-right-radius:20px;
	margin-left:5px;

}

.next {
	background-color:SteelBlue;
	color:#FFF;
	padding:13px 10px 5px 20px;
	border-top-left-radius:20px;
	border-bottom-left-radius:20px;
	margin-right:5px;
}

.prev:hover,
.next:hover,
.full:hover  {
	background-color:dodgerblue;
	color:white;
}

.full {
	background-color:SteelBlue;
	color:#FFF;
	padding:13px 10px 5px 10px;
}

#counter {	
	padding:20px 0 20px 0;
	text-align:center;
	font-size:.7em;
	color:#777;
	font-family:Arial;
	background-color:#dfecdf;
}

#counter img {
	max-width:300px;
}

@media print {

	body {
		background:none;
	}

	
	h1 {
	    border:2px solid #000;
	    margin:0;
	    padding:0;
	    font-family:urdufont;
	    font-size:3em;
	    line-height:2em;
	}
	
	h1 span {
	    font-family:urdufont;
	    font-size:.5em;
	}
	
	h2 {
	    border:1px solid #000;
	}
	
	main {
		border:none;
		margin:0;
		min-height:auto;
	}
	
	main div {
    	line-height:1.7em;
    	word-spacing:.4em;
    	margin:5px 0;
    	padding:0;
    	color:#000;
	}

    main p {
    	color:#000;
    	font-size:1.4em;
    	line-height:1.5em;
    	margin:5px 0 5px 0;
    	padding:7px 5px 0 5px;
    	background-color:#FFF;
    	border:1px solid #000;
    }

	h1,
	h1 span,
	h2,
	main div,
	main p
	{
		color:#000 !important;
		background-color:white;
	}
	
	
	header,
	footer,
	#buttons,
	#lookup-table,
	main section,
	main div a,
	#counter,
	#top-link
	{
		display:none !important;
	}

}