@font-face {font-family:'nastaleeqfont';font-style:normal;font-weight:400;src:url(mehr-nastaliq-web-1p1.ttf) format('truetype');}
@font-face {font-family:'nafeeswebfont';font-style:normal;font-weight:400;src:url(nafeesweb.ttf) format('truetype');}
@font-face {font-family:'naskhfont';font-style:normal;font-weight:400;src:url(alqalam-quran-regular.ttf) format('truetype');}

body {
	font-family: "nastaleeqfont", tahoma;
	font-size:20px;
	background:url(../images/bg.png) bottom center white;
	margin:0;
}

h1, h2, h3, h4, h5, h6, p {font-weight:normal;font-size:100%;margin:0;padding:0;}
header, main, footer, section, div, td {box-sizing:border-box;direction:rtl;}
a {text-decoration:none;color:darkblue;}
a:visited {color:purple;}
a:hover {color:blue;}
img {max-width:100%;}

/* ------------------------ HEADER ---------------------------- */
header {
	background-color:#39AAE6;
	margin:0;
	padding:15px 20px 0 20px;
	border-top:2px solid #000;
	box-shadow: 0 4px 5px #BBB;
}

header img {
	max-width:90%;
}

header section {
	direction:ltr;
	max-width:90%;
	width:1000px;
	margin:0 auto;
	display:flex;
	flex-direction:row;
	flex-basis:100%; /* to available space if there are other elements */
	gap:1em;
}

header a,
header a:visited,
header a:hover {
	color:white;
}

header section div {
	display:grid; /* used just for placing primary labels/images vertically in the middle */
	place-items:center;
}

header section nav {
	position:relative;
}

header section nav ul {
  display:none;
  position:absolute;
  z-index:50; 
  padding:0;
  margin:0;
  min-width:150px;
  background-color:pink;
  border:10px solid #004d4d;
} 
	
header section nav:hover ul {
  display:block;    
}    
  
header section nav ul li {
	padding:0 10px 0 10px;
	list-style-type:none;
	white-space: nowrap;
	color:deepskyblue;
	background-color:#004d4d;
	border-bottom:1px solid deepskyblue;
	cursor:pointer;
}    

header section nav ul li:last-child {
	border:none;
}

header section nav ul li:hover {
	background-color:deepskyblue;
	border:1px solid #004d4d;
	color:white;
}
			
/* ------------------------ MAIN ---------------------------- */

main {
	width:1140px;
	max-width:90%;
	min-height:500px;
	margin:35px auto 40px auto;
	background-color:white;
	padding:20px;
	border-top:6px #39AAE6 solid;
	border-bottom:6px #39AAE6 solid;
	border-right:10px #39AAE6 solid;
	border-left:10px #39AAE6 solid;
	border-radius:30px;
	/* box-shadow: 0 0 10px #777; */
}

/* ------------------------ FOOTER ---------------------------- */

footer {
	direction:ltr;
	display:flex;
	border-top:2px solid deepskyblue;
	border-bottom:1px solid deepskyblue;
	background-color:white;
	padding:20px;
	text-align:center;
}

footer a:visited {color:blue;}


/* ------------------------ HOME PAGE ---------------------------- */

#home-banner {
	height:265px;
	background:url(../images/banner.png) top center no-repeat rgb(34,134,194);
	border-top:1px solid #000;
	box-shadow: 0 7px 10px #777;
}

#home-book-listing {
	background-color:#DCEFFB;
	width:100%;
	text-align:center;
	border-collapse:collapse;
	font-size:120%;
}

#home-book-listing th {
	border:2px solid #FFF;
	border-top-right-radius:14px;
	border-top-left-radius:14px;
	font-weight:normal;
	background-color:#39AAE6;
	color:white;
	font-size:90%;
	padding:5px 5px 0 5px;
}

#home-book-listing td {
	border:2px solid #FFF;
	vertical-align:center;
}

#home-book-listing .title-td {
	text-align:right;
	padding:5px 20px 0 20px;
}

#home-book-listing .img-td {
	width:100px;
	height:100px;
	background-size:cover !important;
}

#home-book-listing .tick-td {
	font-size:80%;
}

/* ------------------------ BOOK INTRO PAGE ---------------------------- */

.book-banner {
	position:relative;
	height:200px;
	border-radius:20px;
	background-size:100% !important;
}

.book-banner div { /* transparent layer over image */
	border-radius:20px;
	background: linear-gradient(to right, #020, #200);
	background-color:black;
	height:100%;
	opacity:.7;
}

.book-banner h3 {
	width:100%;
	color:white;
	text-align:center;
	font-size:300%;
	line-height:140%;
	position:absolute;
	top:50%;
	left:50%;
	z-index:10;
	transform:translate(-50%, -50%);
	border:none;
}

.book-title {
	border:1px solid deepskyblue;
	color:deepskyblue;
	border-radius:12px;
	text-align:center;
	font-size:200%;
	line-height:140%;
	padding-top:15px;
	margin-bottom:20px;
}

.book-intro {
    display:flex;
    justify-content:space-around;
	padding:20px;
}

.book-intro-content,
.book-intro-image {
    width:48%;
}

.book-intro-content p {
    text-indent: 25px;
    margin: 10px;
  	text-align:justify;
}

.book-intro-image img {
	box-shadow: 5px 5px 20px #777;
	max-width:100%;
}

.index-title {
	font-size:130%;
	background-color:deepskyblue;
	padding-top:10px;
	text-align:center;
	color:white;
}

.index-current-row {
	background-color:white !important;
}

.book-title a, .book-title a:hover, .book-title a:visited {color:deepskyblue;}


/* ------------------------ TOPIC PAGE ---------------------------- */

.topic-title {
	margin:20px 10px 10px 10px;
	font-size:115%;
	text-align:center;
	font-family: "nafeeswebfont", tahoma;
}

.topic-content {
	text-align:justify;
	padding:20px;
	background-color:#F7F7F7;
	font-size:110%;
}

.topic-content h1 {margin:5px 0 5px 0;font-family: "naskhfont", tahoma;font-size:150%;}
.topic-content h2 {margin:5px 0 5px 0;font-family: "naskhfont", tahoma;font-size:140%;text-indent:25px;color:maroon;}
.topic-content h3 {margin:5px 0 5px 0;font-family: "naskhfont", tahoma;font-size:130%;text-indent:25px;color:navy;}
.topic-content h4 {margin:5px 0 5px 0;font-family: "naskhfont", tahoma;font-size:120%;text-indent:25px;color:deepskyblue;}
.topic-content h5 {
	margin: 5px auto 5px auto;
	font-family: "naskhfont", tahoma;
	font-size: 130%;
	text-indent: 25px;
	color: maroon;
	width: 90%;
}

.topic-content p {text-indent:25px;}
.topic-content blockquote {
	text-indent:25px;
	font-size:110%;
	color:maroon;
	width:90%;
	margin:5px auto 5px auto;
}

.topic-content .arabic-text {font-family: "naskhfont", tahoma;width:90%;margin:5px auto 5px auto;color:#007777;}
.topic-content .urdu-trans {width:90%;margin:5px auto 5px auto;color:#007777;}

.topic-content span {font-family: "naskhfont", tahoma;padding:0 3px 0 3px;}
.topic-content em {font-family: "nastaleeqfont", tahoma;padding:0 3px 0 3px;font-style:normal;}

.heading {
	padding-top:7px;
	border-top:2px solid #FFF;
	background-color:#E1F7F7;
}
.heading-level0 {
  text-align: center;
  background-color: #c5f2ea;
  font-family: nafeeswebfont;
  font-size: 150%;
  padding-bottom: 7px;
}
.heading-level1 {
    padding-right:10px;
    color: red;
    font-family: nafeeswebfont;    
}
.heading-level2 {padding-right:40px;}
.heading-level3 {padding-right:70px;}
.heading-level4 {padding-right:100px;}


/* ------------------------ PAGER ---------------------------- */

#pager {
	width:100%;
	margin:20px auto 20px auto;
	text-align:center;
}

#pager td.right,
#pager td.left
{
	width:35%;
	padding:8px 10px 0 10px;
	background-color:#E1F7F7;
}

#pager td.right {border-top-right-radius:50px;border-bottom-right-radius:50px;}
#pager td.left {border-top-left-radius:50px;border-bottom-left-radius:50px;}

#pager td.middle {
	width:30%;
	color:#999;
	border-radius:15px;
	font-size:80%;
	padding:0 20px 0 20px;
}

#pager td span {
	font-family:arial black;
	color:red;
	font-weight:900;
}


/* ------------------------ REGULAR PAGE ---------------------------- */

.page-title {
	color:deepskyblue;
	border-radius:12px;
	text-align:center;
	font-size:200%;
	line-height:140%;
	padding-top:15px;
	margin-bottom:20px;
	background-color:POWDERBLUE;
}


/* ------------------------ CONTACT PAGE ---------------------------- */

#name, #email, #subject, #message {
	padding:5px;
	width:90%;
}

#message {
	height:180px;
}







@media only screen and (max-width: 700px) {

	body {
		font-size:15px;
	}

	main {
		padding:7px;
		border:none;
		width:100%;
		max-width:100%;
		box-shadow:none;
		margin:0;
		border-radius:0;

	}

	#home-banner {
		height:180px;
		background-size:1350px 180px;
	}

	#home-book-listing .img-td {
		width:80px;
		height:80px;
		background-size: 80px 80px;
	}
    
    .book-intro {
        display:block;
    }
    
    .book-intro-content,
    .book-intro-image {
        width:100%;
    }
	
	.heading-level1 {padding-right:5px;}
	.heading-level2 {padding-right:20px;}
	.heading-level3 {padding-right:30px;}
	.heading-level4 {padding-right:40px;}
	
	footer {
		padding-bottom:30px;
	}

}