@charset "utf-8";
/* CSS Document for Pakistan Film Magazine modified on 4.1.2021 */


	@font-face {
		font-family: 'Nastaleeq';
		src:url(/web/jameel-noori-nastaleeq.ttf);
		font-style:normal;}
		
/* Desktop version */	
	html, body, div, h1, h2, h3, h4, h5, h6, img, p {
		margin:0px; padding:0px; border:0px; font-size:100%; background:transparent;}
	
	body {
		font-family:Verdana, Geneva, sans-serif, Helvetica, sans-serif; font-size:11px; font-style:normal; color:#000;}
		
	a {color:#990099; font-weight:bold; text-decoration:none;}
	a:hover, a:active {color:#F00;}
	a:visited {font-weight:none;}

		
	ul {list-style-type:square; padding-left:15px; text-align:justify;}
	ol {padding-left:5px; text-align:justify;}
	li {padding-left:0px; text-align:justify;}

	caption, h6, #menuFilmHistory, #imgPostersArea, #artIntro, #imgArtistsArea {font-family:Arial, Helvetica, sans-serif; font-style:normal;}

	h1, h3, #mainHeading, #headline {font-family:"Times New Roman", Times, serif; font-weight:bolder; padding:1px; margin-top:1px; text-shadow: 2px 2px 4px #ccc;}
	h1 {font-size:30px; padding:1px; margin-top:1px; text-shadow: 2px 2px 4px #ccc;}
	h2 {font-size:130%; color:red;}
	h3 {font-size:18px;}
	h4 {font-weight:bold; padding-top:10px;}
	h5 {font-weight:bold; color:red;}
	h6 {font-size:9px;}
	#mainHeading {font-size:8vw;}

	table, th, tr, td {vertical-align:top;}
	img {max-width:100%; text-align:center;}
	caption {caption-side:bottom; font-size:9px; color:#999;}
	
	article {font-size:12px; color:#000;}
	article p {padding:10px;}
	article li {padding-bottom:10px;}
	article a:link {font-weight:normal;}

	button {font-size:10px; background-color: #fff; margin-top:5px; padding:7px; border:1px solid #ccc; border-radius:50px;}

	::placeholder {color:#E9E9E9;}
	.inline {display:inline;}
	.no_top {margin-top:0px;}
	#more {display: none;}


	.mobileHidden {display:block;}
	.mobileSite {display:none;}
	.NotOnMobile {display:none;}
	.NotOnDesktop {display:block;}

/* Custom Scrollbar */
        ::-webkit-scrollbar {width: 10px;}
        ::-webkit-scrollbar-track {background: #000;}
       	::-webkit-scrollbar-thumb {background: red; border-radius: 10px;}

	#borderDouble {width:620px; padding:2px; border-top:1px solid #ccc; border-bottom:1px solid #ccc; font-weight:bold;}
	.borders {width:auto; height:auto; margin-left:5px; padding:5px; border:1px solid #ccc; border-radius:3px; box-shadow:0px 0px 3px #ccc;}
	.shades {margin-left:5px; padding:5px; border:1px solid #fff; box-shadow:0px 5px 10px #ccc;}
	.border {width:35px; height:44px; margin:2px; padding:2px; border:1px solid #ccc; border-radius:3px; box-shadow:0px 0px 3px #ccc; text-align:center;}
	#imgRight {float:right; max-width:100px; height:auto; margin-left:10px; padding:5px; border:1px solid #ccc; border-radius:50px; box-shadow:0px 0px 3px #ccc;}
	#imgLeft {float:left; border:1px solid #fff; border-radius: 50%;}
	.imgArt {margin-left:5px; padding:1px; border:5px solid hotpink; border-radius:2em/9em; box-shadow:0px 5px 10px #ccc;}



/* Button Styling */
        .btn {
			width:90%;
            background: linear-gradient(45deg, #00dbde, #fc00ff);
            padding: 20px 20px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 900;
            letter-spacing: 1px;
			text-align:center;
            text-transform: uppercase;
            margin-top: 10px;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
        }

        .btn:hover {
            transform: translateY(-3px);
			background: linear-gradient(45deg, #fc00ff, #00dbde);
            box-shadow: 0 8px 10px rgba(0, 0, 0, 0.4);
            letter-spacing: 1.5px;
        }




/* ---------- H E A D E R ----------- */

	#topPage {width:100%; height:auto; background-color:#000; top:0px; left:0px; display:block; position:fixed; z-index:1000; box-shadow:0px 0px 10px #ccc; clear:both;}
	#topPageHeader {width:100%; margin:0px auto; display:block; clear:both;}
	#topPageLogo {float:left;}
	#topPageRight {float:right; margin:3px; padding:3px;}
	.topPageMenu {width:auto;}
	#topMenu {width:auto; font-size:12px; padding-left:5px;}
	#topMenu a {color:#0F0;}
	#topMenu a:hover {color:red;}	
	#menuDB {float:left; width:auto; margin:1px; padding:3px; border:1px solid #ccc; border-radius:3px;}	
	.menuTop a:link {font-size:10px; font-weight:bold; text-decoration:none; color:#0F0;}



/* ---------- Main page ----------- */
	
	#mainContentPage {width:990px; margin:90px auto; display:block;}
	#mainPageContent {width:610px; margin:5px; padding:5px;}
	#mainPageColumnLeft {float:left; width:620px; margin:3px; display:block;}
	#mainPageColumnMenu {float:left; width:340px; margin:5px; padding:5px; display:block;}
	
	
	#menuFilmHistory {float:left; width:atuo; padding:2px; margin:2px; background-color:#990099; border:1px solid #fff; border-radius:10%; box-shadow:0px 0px 5px #ccc; text-align:center;}

	#menuFilmHistory a {color:#fff;}
	#menuFilmHistory a:hover, a:active {color:#F2BCFE;}
	#menuFilmHistory a:visited {font-weight:none;}

	
	
	
	
	#columnHalf {float:left; width:295px; padding:2px; margin:1px;}
	#mainHeading { font-size:500%; font-weight:bolder; color:red; padding:3; text-shadow: 2px 2px 2px #ccc;}
	#headline {font-size:300%; font-weight:bolder; color:#000; padding:3; text-shadow: 2px 2px 2px #ccc;}





/* ---------- Film page ----------- */

	.poster {width:50px; height:65px; padding:2px; text-align:center;}
	#posters {margin:2px;padding:5px;border:1px solid #ccc;clear:both;
	border-radius:3px; box-shadow:3px 3px 5px #ccc;}
	#posterIcons {float:left; width:85px; height:auto; padding:5px; text-align:center;}
	#eid {font-size:100%;color:green;font-weight:bold;}
	#film_review {width:auto;}
	#imgFilmPage {max-width:450px; text-align:center;}
	
	/* Cast info */
	#cast {width:100%; margin:1px; padding:2px;}
	#cast tr {background-color:#F4F4F4; vertical-align:top; padding-left:5px;}
	#cast td.cat {width:70px; text-align:left;}
	#film_cat {float:left; width:70px; padding:1px;}

	#filmList {padding:5px; margin:3px;	background-color:#D3FEDB; border:1px solid #61F86C; border-radius:5px; box-shadow:0px 0px 5px #ccc; clear:both;}
	
	#filmOne {float:left; width:115px; padding-top:2px;}
	#filmTwo {float:left; width:490px; margin:3px; padding:3px; border-left:1px solid #ccc;border-right:1px solid #ccc;}
	
	#boxoffice {width:auto;font-size:10px;background-color:#FFFEEE;margin:3px;padding:5px; border:1px solid #ccc; border-radius:5px; box-shadow:2px 2px 1px #ccc;}
	#circuit {font-size:95%;text-transform:uppercase;color:#666;font-stretch:wider;margin-top:5px;text-decoration:underline;}
	
	#imgFilmposterSettings {padding-left:5px; font-style: normal; font-size:9px; text-align:center;}
	#imgPostersArea {float:left; width:50px; height:100px; margin:2px; padding:2px; font-style:normal; font-size:9px; text-align:center;}	
	#posterIcons {float:left; width:85px; height:auto; padding:5px; text-align:center;}

	
		






/* ---------- Film music ----------- */

	#songlist {float:left; width:100%; background-color:#F0F0F0; padding:1px; margin:1px; clear:both;}
	#no {width:20px; vertical-align:top; text-align:right;}
	#film_genre {font-family:Tahoma, Geneva, sans-serif;font-size:90%;text-transform:uppercase;color:#666;margin-bottom:10px;letter-spacing:1px;}

	#dbTable {width:100%; border-bottom:1px solid #ccc;}
	#dbTr {width:100%;}
	#dbTd {width:20px; font-size:80%; padding-top:2px; text-align:center;}

	.list {float:left;width:100%; padding:1px; text-align:left;}
	.list th {width:auto; background-color:#666; padding-left:3px; text-align:left; color:#fff;}
	.list tr {width:auto;background-color:#f2f2f2;padding-left:3px;color:#000;text-align:left;}
	.list td {padding-left:3px;vertical-align:top;}
	.list td.first {width:100px;}	







/* ---------- Artist page ----------- */

	#pageArtists {width:600px; padding:10px;}
	#pageArtists p {padding-top:10px;}
	#pageArtists img {float:left;}

	#artTb {float:left; width:32%; margin:3px; border:1px solid #fff; border-radius:20px; box-shadow:0px 5px 10px #ccc;}
	#artNo {width:20px; padding-top:7px; text-align:center;}
	#artTd {padding-top:7px; text-align:left;}
	#artPic {float:right; width:25px; height:25px; border-radius:50%; text-align:right;}
	.artPic {float:left; width:30px; height:38px; margin-right:5px; border:3px solid #fff; border-radius:5px; box-shadow:0px 5px 10px #ccc;}

	#art {float:left; width:30%; padding:5px; margin:3px; font-weight:bold; border:1px solid #e39ef4; border-radius:50px; box-shadow:1px 3px #e39ef4;}

	#artName {float:left; padding-top:40px;}

	#artText {padding:40px 30px 10px 30px; display:block;}
	#artIntro {float:right; width:210px; margin:5px; padding:3px; border:1px solid #ccc; border-radius:5px; box-shadow:0px 5px 10px #F2F2F2;}
	#artIntro tr {width:auto; background-color:#F2F2F2; padding-left:3px;}
	#artIntro td {padding-left:3px; vertical-align:top;}
	#artIntro td.first {width:auto;}
	#artIntro ul {list-style-type:none;}
	#artIntro li {list-style-type: circle;}


	#artImage {float:left; width:60px; height:75px; margin:5px; padding:5px; margin-right:10px; border:1px solid #ccc; border-radius:5px; box-shadow:0px 02px 10px #ccc;}
	#artImages {float:left; width:40px; height:50px; margin:3px; padding:3px; margin-right:10px; border:1px solid #ccc; border-radius:5px; box-shadow:0px 02px 10px #ccc;}
	#artsImagesStyle {width:100%; text-align:center; margin:7px;}	
	#imgArtists {width:40px; height:50px; padding:3px; margin:1px;}
	#imgArtistsArea {float:left; width:60px; height:100px; margin:2px; padding:1px; font-style:normal; font-size:9px; text-align:center;}
	






/* --------- Cinema ------------ */
	.cinema {float:left; width:auto; height:auto; margin:2px; padding:2px; display:block;
	border-radius:3px; box-shadow:0 0 10px #ccc inset;}
	#cinemaImage {float:left; width:140px; margin:4px;}
	#cinemaImageIcon {float:left; width:70px; height:50px; padding:2px;}
	#cinemaDetails {float:left; width:450px;}
	






/* ---------- Film news ----------- */

	#filmnews {width:100%; padding:3px; margin:3px;}
	#filmnews p {width:100%; margin-right:10px;}
	#filmnews img {float:left; padding:3px;}





/* ---------- Video ----------- */

	#filmVideo {width:auto; height:auto; text-align:center; background:#000; border-radius:5px; z-index:-1; clear:both;}
	.yt {width:450px; height:338px;}


/*
Copyright (c) 2009, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.7.0
*/

.yui-navset .yui-content .yui-hidden {
	position: absolute;
	left: -999999px;
	visibility: hidden;
}
.yui-navset .yui-nav li, .yui-navset .yui-navset-top .yui-nav li, .yui-navset .yui-navset-bottom .yui-nav li {
	display: inline-block;
	display: -moz-inline-stack;
	vertical-align: bottom;
	cursor: pointer;
	zoom: 1;
}
.yui-navset .yui-nav li a, .yui-navset-top .yui-nav li a, .yui-navset-bottom .yui-nav li a {
	margin:0;
	padding:0;	
	display: block;
	display: inline-block;
}

.yui-skin-sam .yui-navset .yui-nav a, .yui-skin-sam .yui-navset .yui-navset-top .yui-nav a {
	padding:3px;
	margin:1px;
border:1px solid #ccc;
border-radius:3px;	
-moz-border-radius:3px;
-webkit-border-radius:3px;
-moz-box-shadow:0px 0px 3px #ccc; 
-ms-box-shadow:0px 0px 3px #ccc; 
-webkit-box-shadow:0px 0px 3px #ccc;
box-shadow:0px 0px 3px #ccc;}

.yui-skin-sam .yui-navset .yui-nav .selected a, .yui-skin-sam .yui-navset .yui-nav .selected a:focus, .yui-skin-sam .yui-navset .yui-nav .selected a:hover {

	font-weight: bolder;
	font-size:11px;
}
.yui-skin-sam .yui-navset .yui-nav .selected a, .yui-skin-sam .yui-navset .yui-nav .selected a:focus, .yui-skin-sam .yui-navset .yui-nav .selected a:visited {
	background: #9CF5B0;
	font-weight: bolder;
	font-size:11px;
}



/* ---------- Tabber ------------ */

	.tabber {width:auto; background-color:#fff;}
	.tabber ul {background:#fff; padding:3px;}
	.tabs {display:block;}
	.tabs li {float:left; display:inline; color:#69F; margin:0px 5px 4px 0px; -webkit-box-shadow:0 0 10px #ccc inset; box-shadow:0 0 10px #ccc inset;}
	.tabs li a {display:block; margin:0px -1px 0px 0px; padding:1px 5px; font-size:11px;font-weight:bold; border:1px solid #ccc; border-radius:3px; text-decoration:none;}
	.tabs li a:hover {background:#D5FDD7; color:#F00;text-decoration:none;}
	.tabs li a.selected, .tabs li a.selected:hover {background:#F8F8F8; color:#666;}
	.tabscontent {display:none; width:auto; margin:-1px 0px 0px 0px; padding:0px 10px 5px 10px; border:1px solid #ccc; box-shadow:0 0 10px #ccc inset; border-radius:3px;}
	


	

/* --------- Dynamic Search box --------------- */

	#mainSearch {float:left; width:40%; text-align:center;}
	.formFormat {width:100%;}
	.formFormat label {margin:1px; width:150px;}
	.formFormat input {width:150px; border-radius:5px;}
	.formFormat textarea {border-radius:5px;}
	/* input */
	#search input {width:300px; height:20px; padding-left:5px; margin:30px; border-radius:5px; font-weight:bolder;}
	/* fold out menu */
	#livesearch {width:auto; position:absolute; left:10px; background-color:#fff; text-align:left;}
	/* Search page */
	#SearchPage {position:absolute; width:900px; text-align:left; padding:5px; background-color:#fff; border:1px solid #000;  border-radius:5px;}
	#SearchDobbleColumn {float:left; width:600px;}
	#SearchSingleColumn {float:left; width:300px;}






/* ---------- Masood Rana menu ----------- */
	.dropbtn {float:right; background-color:#aa4436; padding:3px; border:2px solid #fff; border-radius:50%; box-shadow:0px 5px 5px #ccc; cursor:pointer; text-align:right;}
	.dropdown {float:right;}
	.dropdown-content {display:none; position:absolute; left:0px; width:600px; margin:5px; padding:5px; background-color:#FDFECD; z-index:1; box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); opacity:95%;}
	.dropdown-content a {display:block;}
	.dropdown-content a:hover {background-color:#FAFE50;}
	.dropdown:hover .dropdown-content {display:block;}
	.dropdown:hover .dropbtn {background-color:#3e8e41;}
	






/* ---------- Menu tab ----------- */
	.basictab ul{margin:0px 0px 0px -2px; padding:3px; list-style-type:none;
	text-align: left;}
	.basictab li{display:inline;}
	.tabcontainer{clear: left; width:600px;}
	.tabcontent{display:none;}
	.tabMenues {float:left; width:auto; padding:3px; margin:0px; font-size:11px; background-color:#000; border:2px solid #fff; border-radius:20px; z-index:1; box-shadow:0px 5px 5px #ccc;}
	
	
	



/* ---------- U R D U ----------- */
	
	#urduFont, .urduFont, #urduFont h1, #urduFont h2, #urduFont h3, #urduFont h4, #urduFont h5, #urduFont h6, #urduArticle, .urduArtists, #urduSingers, .urduText, urduIcons, #frontPageMenu {font-family:'Nastaleeq'; font-weight:bolder; direction:rtl;}

	#urduFont h1 {font-size:36px; color:red; text-shadow: 2px 2px 5px #ccc; word-spacing:0px;}
	#urduFont h2 {margin:10px -20px 0 0; font-size:22px; color:red; text-shadow: 2px 2px 6px #ccc;}
	#urduFont h3 {padding-top:5px; font-size:18px; font-style:none;  color:red;}
	#urduFont h4 {font-size:15px;}
	#urduFont h5, #urduArticle h6 {font-size:12px;}
	#urduArticle h6, #urduFont h6 {font-size:12px; text-align:center;}

	
	#urduArticle {width:auto; margin:0px 60px; padding:15px; font-size:18px; word-spacing:1px; text-align:justify;}

	#urduArticle p {margin-top:5px;}
	#urduArticle ul {margin:5px; padding-right:20px; text-align:justify;}
	#urduArticle li {text-align:right; text-align:justify;}
	#urduArticle caption {font-size:12px;}
	
	#urduRightColumn {float:right;width:22%;}
	#urduMainColumn {width:560px;}
	#urduMenuColumn {float:right; width:22%;}
	#urduMenuTwo {float:right; width:140px; margin:2px; padding:2px; color:red; text-align:center;}
	#urduMenuThree {float:right; width:80px; margin:2px; padding:5px; color:red; text-align:center;}

	.urduArtists {float:right; width:50px; height:auto; margin:1px; padding:2px; text-algin:center;}
	#urduSingers {width:auto; margin:5px; padding:5px; font-size:16px;}

	#sajjay, #dayen, #khabbay, #bayen, #leftside {font-size:18px; color: blue; text-shadow: 2px 2px 6px #ccc; text-align:center;}

	#leftside {float:left; width:300px; margin:0px 10px 5px -60px;}
	#sajjay {float:right; width:auto; margin:0px -65px 0px 10px;}
	#khabbay {float:left; width:200px; margin:0px 10px 5px -50px;}
	#uttay {float:left; margin:-50px 10px 0px -65px; padding-right:5px; color: blue; font-size:20px;  text-shadow: 2px 2px 6px #ccc; text-align:center;}
	#thallay {width:100%; font-size:14px; color:#000; text-align:center;}
	#bayen {float:left; width:auto; margin:0px 10px 5px -65px; padding:5px;}
	#dayen {float:right; width:auto; margin:0px -65px 0px 10px; padding:5px;}
	#venster {float:left; width:200px; margin:0px 10px 5px -50px; padding:5px; font-size:14px; text-align:justify;}
	#hojer {float:right; width:200px; margin:0px -65px 0px 10px;  padding:5px; font-size:14px; text-align:justify;}

	#firstWord {float:right; padding:0px 0px 0px 10px; margin:0px; font-size:200%; vertical-align:top;}

	.timeline {padding:10px; color:#fff; background-image:linear-gradient(green, white); border:1px solid #fff; border-radius:5px; font-size:20px; align:right; valign:top; text-align:center;}
	.timelineArt {padding:10px; color:#fff; background-image:linear-gradient(hotpink, white); border:1px solid #fff; border-radius:5px; font-size:20px; align:right; valign:top; text-align:center;}
	.timelineMusic {padding:10px; color:#fff; background-image:linear-gradient(blue, white); border:1px solid #fff; border-radius:5px; font-size:20px; align:right; valign:top; text-align:center;}

	.urduText {font-size:12px; font-weight:bold;}
	.urduFilmText {font-size:12px; color:#777;}
	.urduHeadings {font-size:18px;}
	.urduHeading {font-size:15px;}
	.urduIcons {float:right; width:50px; height:auto; margin:1px; padding:1px; text-align:center;}


	#frontPageMenu {width:600px; height:auto; padding:5px; margin:5px; border-radius:10px; font-size:16px;}


	#ranaTag a {float:right; margin:1px; padding:3px; border:2px solid #fff; border-radius:50%; box-shadow:0px 5px 5px #ccc; display:inline-block;}
	#ranaTag a:hover {color:red;}

	#columnMenu {float:left; margin-top:-25px; padding:5px; border:1px solid #ccc; border-radius:5px; box-shadow:0px 5px 10px #ccc;}
	#columnMenus {width:1020px; margin:5px auto;}
	.columnMenus {float:left; width:320px; margin:3px; padding:5px; border:1px solid #ccc; border-radius:5px; box-shadow:0px 5px 10px #ccc;}
	#urduFont, .urduFont, #urduSurkhi, urduTitle, #urduArticle, #urduText, #urduMenu, #urduHeading, #urduIcons, #urduExLinks, #hijriDate, #urduArticle li, urduDate {font-family:'Nastaleeq'; font-weight:bold; color:#000; text-align:justify; direction:rtl;}
	#urduSurkhi {font-size:20px; color:red; clear:both;}
	#urduText {margin:0 10px 0 10px; font-size:14px; word-spacing:1px;}
	#urduIcons {float:right; width:20%; height:auto; margin:5px 0 5px 0; font-size:10px; word-spacing:0px; text-align:center;}
	#urduIconSize, #urduIconRound {width:50px; height:50px; margin:2px; padding:2px;}
	.borders {margin:3px; padding:5px; border:1px solid #fff; box-shadow:0px 5px 10px #ccc;}