@font-face {
    font-family: urdu;
    src: url(../fonts/AlQalam_Punjabi.ttf);
}


body { margin:0; padding:0; font-family:"urdu"; font-size:20px; color:#333; background-color: #eee; }


.body{ margin:0; padding:0; color:black;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none; 

}

.input {
	font-family: urdu;
}
.divMain { padding-bottom:50px; width:100%; height:100%; position:absolute; }


* {
    box-sizing: border-box;
}


/* Create two unequal columns that floats next to each other */
.columns {
    float: right;
    padding: 10px;
	height: auto;
	margin-bottom:40px;
	overflow:hidden;
	vertical-align:middle;
	direction:rtl;
	
}
/* less than 800px */
@media (max-width: 800px) {
.columns {
	padding: 0px;
}
}

.columns p {
	font-size:24px;
	line-height:37px;
	padding:50px;
}

.left {
  width: 70%;
  text-align:right; 
  border-left: 1px solid #ccc;
   
}

.right {
  width: 30%;
  text-align:right;
   
}

/* greater than 800px */
@media (min-width: 800px) {
.rows { 
	overflow:hidden;
	padding-bottom:0px;
	padding-top:10px;
	margin-top:0px;
	text-align:center;
	background-color: #eee;
	z-index:9999;
	}
}

/* less than 800px */
@media (max-width: 800px) {
.rows { 
	overflow:hidden;
	padding-bottom:0px;
	padding-top:10px;
	margin-top:0px;
	text-align:center;
	background-color: #eee;
	z-index:9999;
	}
}

/* Clear floats after the columns */
.rows:after {
    content: "";
    display: table;
    clear: both;
}

@media (max-width: 600px) {
    .columns {
        width: 100%;
		height:auto;
		margin-bottom:10px;
		direction:rtl;
    }
}

@media (min-width:649px) {

.header { background-color: #f1f1f1; padding: 10px; text-align: center; background-image:url(../imgs/top_header_img.jpg); background-position:center; }
.logo { display:block; text-align:center; }
.logo img { width:197px; height:120px; }
}

@media (max-width:650px) {

.header { background-color: #f1f1f1; padding: 10px; text-align: center;  background-image:url(../imgs/top_header_img.jpg); background-position:center;}
.logo { display:block; text-align:center; }
.logo img { width:120px; height:73px; }

}


.section-title { display: block; width: 100%; height: 50px; font-size: 22px; margin-top: 10px; background-color: #eee; border-top: 2px solid #000; border-bottom: 1px solid #bbb; position: relative; padding:10px; }
.section-title a { display: block; transition: padding-right 0.5s ease; color: #000;}
.section-title a:hover { padding-right: 15px;}

/* greater than 800px */
@media (min-width: 800px) {

.news_wrapper { width:100%; padding-bottom:30px; direction:ltr; display: block; overflow: hidden; }

}

/* less than 800px */
@media (max-width: 800px) {

.news_wrapper { width:100%; direction:ltr; display: block; overflow: hidden;}

}
/* greater than 800px */
@media (min-width: 800px) {

.main_news { width:60%; height:auto; padding:5px; float: right; overflow:hidden; vertical-align:middle; text-align:right; direction:rtl; border-left:1px solid #ccc; }
.main_news_title { width:100%; font-size:32px; padding:10px; text-align:right; float:right; text-align: right;}
.main_news_img { width:100%; float:right; padding:10px;}
.main_news_img img { width:100%; height:auto; border:1px solid #ccc;}
.main_news a { text-decoration:none; display:block; color:#333;}
.main_news_desc { width:100%; float:right; padding:10px; font-size:22px; line-height: 1.6; text-align: right;  }

.main_sub { width:39%; height:auto; overflow:hidden; padding:5px; padding-top:0px; direction:rtl; float: left;  line-height: 1.6;}
.main_sub_child { width:100%; font-size:20px; float:right; height:105px; overflow:hidden;  margin-bottom:5px; margin-top:5px; padding-top: 0px;  border-bottom:1px solid #ccc;}
.main_sub_child_img { padding:5px; padding-top:0px;}
.main_sub_child_img img{ width:40%; height:auto; border:1px solid #ccc; float: right; margin-left:10px;}
.main_sub_child a { text-decoration:none; display:block; color:#333; overflow:hidden; height:100%; text-align: right;  transition: transform .2s ease;}
.main_sub_child a:hover { transform: scale(0.95);}
}


/* less than 800px */
@media (max-width: 800px) {

.main_news { width:100%; height:auto; padding:5px; float: right; overflow:hidden; vertical-align:middle; text-align:right; direction:rtl; }
.main_news_title { width:100%; font-size:22px; padding:5px; text-align:right; float:right; text-align: right;  }
.main_news_img { width:100%; float:right; padding:0px;}
.main_news_img img { width:100%; height:auto; border:1px solid #ccc;}
.main_news a { text-decoration:none; display:block; color:#333;}
.main_news_desc { width:100%; float:right; padding:5px; font-size:18px; line-height: 1.6; text-align: right;  }

.main_sub { width:100%; height:auto; overflow:hidden; padding:5px; padding-top:0px; direction:rtl; float: left;  line-height: 1.6;}
.main_sub_child { width:100%; font-size:20px; float:right; height:105px; overflow:hidden;  margin-bottom:5px; margin-top:5px; padding-top: 0px;  border-bottom:1px solid #ccc;}
.main_sub_child_img { padding:5px; padding-top:0px;}
.main_sub_child_img img{ width:40%; height:auto; border:1px solid #ccc; float: right; margin-left:10px;}
.main_sub_child a { text-decoration:none; display:block; color:#333; overflow:hidden; height:100%; text-align: right;  }

}

/* greater than 800px */
@media (min-width: 800px) {
.news_detail { width:100%; height:auto; color: #000; padding:5px; float: right; overflow:hidden; vertical-align:middle; text-align:right; direction:rtl; }
.news_detail_title { width:100%; font-size:32px; padding:10px; text-align:right; float:right;}
.news_detail_title2 { width:100%; font-size:22px; padding:10px; text-align:right; float:right; color: #666; border-bottom: 1px solid #bbb;}
.news_detail_date_wrapper { width:100%; float: right; text-align: right; margin-bottom:0px; padding: 10px; border-bottom: 4px solid brown;}
.news_detail_group { border-left: 1px solid #ccc; padding-left:5px; font-size: 18px; color: #666;}
.news_detail_dated { padding-right:5px; font-size: 18px; color: #666;}
.news_detail_img { width:80%; float:right; padding-top:5px;}
.news_detail_img img { width:100%; height:auto; border:1px solid #ccc;}

.social_media_pane { width:20%; height: auto; float:left; padding:0px; margin: 0px; margin-top: 3px; }
.social_media_pane a { width: 98%; display: block; float: right; margin: 3px; }
.social_media_pane img { width: 100%; height: auto; transition: opacity 0.2s ease;}
.social_media_pane img:hover { width: 100%; height: auto; opacity: 0.7; }

.news_detail_desc { width:100%; float:right; padding:10px; font-size:22px;  line-height: 1.6; text-align: right;  }

.social_media { width:100%; height: 52px; float:right; padding:0px; padding-top: 30px; margin: 0px; }
.social_media a { width: 25%; display: block; float: right; }
.social_media img { width: 100%; height: auto; transition: opacity 0.2s ease;}
.social_media img:hover { width: 100%; height: auto; opacity: 0.7; }
.social_media_mobile { display: none;}
}

/* less than 800px */
@media (max-width: 800px) {
.news_detail { width:100%; height:auto; color: #000; padding:5px; float: right; overflow:hidden; vertical-align:middle; text-align:right; direction:rtl; }
.news_detail_title { width:100%; font-size:22px; padding:10px; text-align:right; float:right;}
.news_detail_title2 { width:100%; font-size:22px; padding:10px; text-align:right; float:right; color: #666; border-bottom: 1px solid #bbb;}
.news_detail_date_wrapper { width:100%; float: right; text-align: right; margin-bottom:0px; padding: 10px; border-bottom: 4px solid brown;}
.news_detail_group { border-left: 1px solid #ccc; padding-left:5px; font-size: 18px; color: #666;}
.news_detail_dated { padding-right:5px; font-size: 18px; color: #666;}
.news_detail_img { width:100%; float:right; padding:10px;}
.news_detail_img img { width:100%; height:auto; border:1px solid #ccc;}
.news_detail_desc { width:100%; float:right; padding:10px; font-size:22px; line-height: 1.6; text-align: right;  }

.social_media_mobile { width:100%; height: 52px; float:right; padding:0px; padding-top: 10px; margin: 0px; }
.social_media_mobile a { width: 25%; display: block; float: right; overflow: hidden;}
.social_media_mobile img { width: 200%; height: auto; transition: opacity 0.2s ease; float: right; }
.social_media_mobile img:hover { width: 200%; height: auto; opacity: 0.7; }
.social_media { display: none;}
.social_media_pane { display: none;}
}



/* greater than 800px */
@media (min-width: 800px) {
.col-8-news { width:23%; font-size:20px; float:right; height:260px; overflow:hidden; margin:8px; padding-top: 0px;}
.col-8-news-title { width: 100%; padding:0px; padding-top:10px; position: relative; display: block;}
.col-8-news-img{ width:100%; height:auto; border:1px solid #ccc;}
.col-8-news img{ width:100%; height:auto; }
.col-8-news a { text-decoration:none; display:block; color:#333; overflow:hidden; height:100%; transition: transform .2s; ease;}
.col-8-news a:hover { color:#0000FF; transform: scale(0.95);}

}

/* less than 800px */
@media (max-width: 800px) {

.col-8-news { width:100%; padding:5px; padding-right:14px; font-size:20px; height:120px; direction:rtl; overflow:hidden; margin:8px; }
.col-8-news-title { width: 60%; padding:0px; padding-right:5px; position: relative; float: left; text-align: right; text-align: right;  }
.col-8-news-img { width: 40%; height:auto; float: right; border:1px solid #ddd;}
.col-8-news img{ width:100%; height:auto; }
.col-8-news a { text-decoration:none; display:block; color:#333; overflow:hidden; height:100%; }

}


/* greater than 800px */
@media (min-width: 800px) {
.col-8-cols { width:15%; font-size:20px; float:right; height:300px; overflow:hidden; margin:8px; padding-top: 0px;}
.col-8-cols-title { width: 100%; padding:0px; padding-top:10px; position: relative; display: block;}
.col-8-cols-img{ width:100%; height:auto; border:1px solid #ccc;}
.col-8-cols img{ width:100%; height:auto; }
.col-8-cols a { text-decoration:none; display:block; color:#333; overflow:hidden; height:100%; transition: transform .2s; ease;}
.col-8-cols a:hover { color:#0000FF; transform: scale(0.95);}

}

/* less than 800px */
@media (max-width: 800px) {
.col-8-cols { width:25%; font-size:20px; float:right; height:300px; overflow:hidden; margin:8px; padding-top: 0px;}
.col-8-cols-title { width: 100%; padding:0px; padding-top:10px; position: relative; display: block;}
.col-8-cols-img{ width:100%; height:auto; border:1px solid #ccc;}
.col-8-cols img{ width:100%; height:auto; }
.col-8-cols a { text-decoration:none; display:block; color:#333; overflow:hidden; height:100%; transition: transform .2s; ease;}
.col-8-cols a:hover { color:#0000FF; transform: scale(0.95);}

}

/* greater than 800px */
@media (min-width: 800px) {

.other_news { width:100%; height:auto; padding:5px; float: right; overflow:hidden; vertical-align:middle; text-align:right; direction:rtl; }
.other_news_title { width:100%; font-size:32px; padding:10px; text-align:right; float:right; text-align: right;  }
.other_news_img { width:50%; float:right; padding:10px;}
.other_news_img img { width:100%; height:auto; border:1px solid #ccc;}
.other_news a { text-decoration:none; display:block; color:#333;}
.other_news_desc { width:50%; float:left; padding:10px; font-size:21px; line-height: 1.6; text-align: right;  }
.other_news_dated { font-size: 16px; }
.other_news_group { font-size: 16px; border-left: 1px solid #ccc; padding-left:10px; }

.other_sub { width:100%; height:auto; overflow:hidden; padding:5px; padding-top:0px; direction:rtl; float: left;  line-height: 1.6;}
.other_sub_child { width:23%; font-size:20px; float:right; height:255px; overflow:hidden; margin:7px; padding-top: 0px;}
.other_sub_child_img { width:100%; padding:0px; padding-top:0px;}
.other_sub_child_img img{ width:100%; height:auto; border:1px solid #ccc; float: right; margin-left:10px;}
.other_sub_child_title { width: 100%; height:100px; overflow: hidden; position: relative; display: block; top:0; padding-top:5px; text-align: right;  }
.other_sub_child a { text-decoration:none; padding: 5px; display:block; color:#333; overflow:hidden; height:100%; transition: margin .2s ease;}
.other_sub_child a:hover { color:#0ef; margin-top: 10px;}

}

/* less than 800px */
@media (max-width: 800px) {

.other_news { width:100%; height:auto; padding:5px; float: right; overflow:hidden; vertical-align:middle; text-align:right; direction:rtl; }
.other_news_title { width:100%; font-size:22px; padding:0px; text-align:right; text-align: right;  }
.other_news_img { width:100%; margin-top:10px;}
.other_news_img img { width:100%; height:auto; border:1px solid #ccc;}
.other_news a { text-decoration:none; display:block; color:#333;}
.other_news_desc { width:100%; padding:5px; font-size:20px; line-height: 1.6; text-align: right;  }
.other_news_dated { font-size: 16px; }
.other_news_group { font-size: 16px; border-left: 1px solid #ccc; padding-left:10px;  }

.other_sub { width:100%; height:auto; overflow:hidden; padding:5px; padding-top:10px; direction:rtl; line-height: 1.6;}
.other_sub_child { width:100%; font-size:20px; float:right; height:130px; overflow:hidden; margin:0px; padding-top: 0px;}
.other_sub_child_img { width:40%; padding:0px; padding-top:0px; float: right;}
.other_sub_child_img img{ width:100%; height:auto; border:1px solid #ccc; float: right; margin-left:10px;}
.other_sub_child_title { width: 60%; padding-right:8px; float: left; margin-top:0px; top:0; padding-top:0px; text-align: right;  }
.other_sub_child a { text-decoration:none; display:block; color:#333; overflow:hidden; height:100%;}
.other_sub_child a:hover { color:#0ef;}

}





	
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
/* greater than 800px */
@media (min-width: 800px) {

.latest_video { width:100%; height:auto; text-align:center; margin-top:10px;}
.latest_video_title { display:100%; text-align:center; font-size:18px; background-color:#F96; padding:10px; margin-bottom:10px; }
.latest_video_img { width:100%; height:auto; margin-bottom:10px; }
.latest_video_img img { width:100%; height:auto;}

.latest_video a { width:48%; margin:3px; height:230px; text-decoration:none; border:1px solid #ccc; display:inline-block; padding:5px; margin-bottom:10px; color:#096; text-align:center;}
.latest_video a:hover { opacity:0.5; border:1px solid #333;}

.video_detail { width: 100%; margin-top: 8px; padding-top: 10px; padding-bottom: 20px; }
}


/* less than 800px */
@media (max-width: 800px) {

.latest_video { width:100%; height:auto; text-align:center; margin-top:10px;}
.latest_video_title { display:100%; text-align:center; font-size:18px; background-color:#F96; padding:10px; margin-bottom:10px; }
.latest_video_img { width:100%; height:auto; margin-bottom:10px; }
.latest_video_img img { width:100%; height:auto;}

.latest_video a { width:45%; margin:3px; height:230px; text-decoration:none; border:1px solid #ccc; display:inline-block; padding:5px; margin-bottom:10px; color:#096; text-align:center;}
.latest_video a:hover { opacity:0.5; border:1px solid #333;}

.video_detail { width: 100%; margin-top: 8px;  padding-top: 10px; padding-bottom: 10px; }
}


/* greater than 800px */
@media (min-width: 800px) {

.featured_news { width:100%; height:auto;direction:rtl; overflow:hidden; margin-top:10px;}
.featured_news_title { display:100%; text-align:center; font-size:20px; background-color:#F96; padding:10px; margin-bottom:10px; }

.featured_news_img { width:100%; height:auto; margin-bottom:10px; }
.featured_news_img img { width:100%; height:auto; border: 1px solid #ddd;}

.featured_news a { width:48%; height:250px; text-decoration:none; display:inline-block; padding:10px; margin:2px; margin-bottom:10px; color:#333; text-align:center; float:right; text-align:center; text-align: right;   transition: padding .2s ease;}
.featured_news a:hover { color: #e0f; padding-top: 5px;}
}

/* less than 800px */
@media (max-width: 800px) {

.featured_news { width:100%; height:auto; padding:5px; direction:rtl; overflow:hidden; margin-top:10px;}
.featured_news_title { display:100%; text-align:center; font-size:22px; background-color:#F96; padding:10px; margin-bottom:10px; }

.featured_news_img { width:100%; height:auto; margin-bottom:10px; }
.featured_news_img img { width:100%; height:auto; border: 1px solid #ddd;}

.featured_news a { width:48%; height:220px; font-size: 18px; text-decoration:none; display:inline-block; padding: 10px; margin:3px; margin-bottom:10px; color:#333; text-align:center; float:right; text-align: right;   }
.featured_news a:hover { color: #e0f;}
}

.facebook-page { width:100%; height:auto; margin-top:10px;}
.facebook-page-title { display:100%; text-align:center; font-size:18px; background-color:#F96; padding:10px; margin-bottom:10px; }


.latest_corner { width:100%; height:auto; overflow:hidden;direction:rtl; margin-top:10px;}
.latest_corner_title { display:100%; text-align:center; font-size:18px; background-color:#F96; padding:10px; margin-bottom:10px; }
.latest_corner_img { width:100%; height:auto; overflow:hidden; z-index:99; position:relative; }
.latest_corner_img img { width:100%; height:auto;}

.latest_corner a { text-decoration:none; border:1px solid #ccc; display:block; padding:5px; margin-bottom:10px; color:#096; text-align:center;}
.latest_corner a:hover { opacity:0.5; border:1px solid #333;}

/* greater than 800px */
@media (min-width: 800px) {
.famous_news { width:100%; font-size:20px; float:right; height:auto; overflow:hidden;  margin-bottom:5px; margin-top:5px; padding-top: 0px;  border-bottom:1px solid #ccc;}
.famous_news_img { padding:5px; padding-top:10px; border-bottom: 1px solid #ddd; overflow: hidden; vertical-align: top;}
.famous_news_img img{ width:30%; height:auto; border:1px solid #ccc; float: right; margin-left:10px;}
.famous_news a { text-decoration:none; display:block; color:#333; overflow:hidden; height:100%; text-align: right;  transition: transform .2s ease;}
.famous_news a:hover { transform: scale(0.95);}
.famous_news_title { padding-top: 0px; font-size: 20px;}
}

/* less than 800px */
@media (max-width: 800px) {
.famous_news { width:100%; font-size:20px; float:right; height:auto; overflow:hidden;  margin-bottom:5px; margin-top:0px; padding-top: 0px;  border-bottom:1px solid #ccc;}
.famous_news_img { width: 100%; padding:5px; padding-top:0px; overflow: hidden; vertical-align: top;}
.famous_news_img img{ width:100%; height:auto; border:1px solid #ccc; }
.famous_news a { text-decoration:none; margin-top: 10px; margin-bottom: 30px; display:block; color:#333; overflow:hidden; height:100%; text-align: right;  transition: transform .2s ease;}
.famous_news a:hover { transform: scale(0.95);}
.famous_news_title { width: 100%; padding-top: 10px; overflow: hidden; position: relative; font-size: 22px;}
}

/* greater than 800px */
@media (min-width: 800px) {
.divScroll { display: block; width:100%; margin: 0 auto; height: 58px; position: relative; border-bottom: 1px solid #ccc; overflow: hidden; text-align: right; padding-top: 5px;}
#tickerbox {float:right;width:880px; height: 46px;}
#tickerbox .label {background:none repeat scroll 0 0 black;color:white;float:right;margin:0;padding:5px 5px 14px 5px; width:75px;border-radius:0}
#tickerbox .text a {color:inherit;font-size:19px;letter-spacing:1px;right:0}
.controls { display:inline-block;float:left;margin:0px;width:60px;position:absolute;left:3px;top:10px;z-index:999;}
.controls img { background:none repeat scroll 0 0 #dedede; border:1px solid #aeaeae; border-radius:12px; cursor:pointer; padding:8px 9px; vertical-align:middle}
#tickerbox{background:none repeat scroll 0 0 #f3f3f3;border:1px solid #999;font-size:23px;margin:0 0 10px;overflow:hidden;position:relative}

#newsticker { padding: 0px; margin:0px; margin-right: 80px; margin-top: 1px; }
#newsticker li { display: inline-block; width: 100%; list-style: none; margin-right:5px; }
#newsticker a:hover { color: #2098D1; }


}

/* less than 800px */
@media (max-width: 800px) {
.divScroll { display: none;}
}

/* greater than 800px */
@media (min-width: 800px) {
.div-social { display: block; width:45%; height:34px; float: left; padding-left: 20px; padding-top:4px;}
.social { text-align: left; width: 120px;}
.social li { display: inline-block; list-style: none; margin-right:5px; }
.social li:last-child { margin-left: 3px; }
.social li img { opacity: 1; transition: opacity 0.5s ease; width: 26px; height: 26px;}
.social li img:hover { opacity: 0.3;}
.div-urdu-date { display: block; width:45%; height:34px; float: right; text-align: right; color: white; padding-right: 20px; padding-top:5px;}
}

/* less than 800px */
@media (max-width: 800px) {
.div-social { display: block; width:45%; height:34px; float: left; padding-left: 5px; padding-top:6px;}
.social { text-align: left; width: 120px;}
.social li { display: inline-block; list-style: none; margin-right:5px; }
.social li:last-child { margin-left: 3px; }
.social li img { opacity: 1; transition: opacity 0.5s ease; width: 20px; height: 20px;}
.social li img:hover { opacity: 0.3;}
.div-urdu-date { display: block; width:45%; height:34px; float: right; text-align: right; color: white; padding-right: 5px; padding-top:7px; font-size: 16px;}
}

/* greater than 800px */
@media (min-width: 800px) {
.youlink1 { display: none;} /* on mobile view */
.youlink2 { display: none; position: absolute; width: 110px; height: 46px; padding-top: 10px; z-index: 99;}
}

/* less than 800px */
@media (max-width: 800px) {
.youlink1 { display: none; position: absolute; width: auto;  height: 35px; margin-top:5px; padding-top: 5px; padding-left: 5px; padding-right: 3px; z-index: 99;}
.youlink2 { display: none;} /* on desktop view */
} 


.container { position:relative; overflow:hidden; width:100%; height:auto; border-bottom:5px solid yellow;}

.mainNews { width:95%; margin:0 auto; height:auto; text-align:center; padding-bottom:70px; margin-top:102px; padding-top:0px; margin-bottom:0px; background-color:#FFF; overflow:hidden; }


/* greater than 800px */
@media (min-width: 800px) {
.online-voting { border: 1px solid #ddd; width: 100%; display: block; overflow: hidden; margin-top: 8px; }
.online-voting-title { font-size: 26px; text-align: center; background-color: #eee; padding: 5px;}
.online-voting-img { width: 100%; height: auto; }
.online-voting-question { padding: 15px 8px 5px 8px; }
.online-voting-results { display: block; padding:0px; direction: rtl; text-align: right; }
.online-voting-answer { text-align: center; padding-right:5px; padding-bottom: 5px; }
.online-voting-control { background-color: #ddd; padding: 5px; text-align: center; }
#btnVoteCost, #btnVoteResult { padding: 5px; font-family: arabic font; font-size: 20px; border-radius: 5px; cursor: pointer; border: 1px solid #666;}
#btnVoteCost:hover, #btnVoteResult:hover { background-color: #ccc;}

}

/* less than 800px */
@media (max-width: 800px) {
.online-voting { border: 1px solid #ddd; width: 100%; display: block; overflow: hidden; }
.online-voting-title { font-size: 26px; text-align: center; background-color: #eee; padding: 5px;}
.online-voting-img { width: 100%; height: auto; padding: 0px; }
.online-voting-question { padding: 15px 8px 15px 8px; }
.online-voting-answer { text-align: center; padding:10px; }
.online-voting-control { background-color: #ddd; padding: 5px; text-align: center; }
#btnVoteCost, #btnVoteResult { padding: 5px; font-family: arabic font; font-size: 20px; border-radius: 5px; cursor: pointer; border: 1px solid #666;}
#btnVoteCost:hover, #btnVoteResult:hover { background-color: #ccc;}

}



.logout { }
.logout a { width:40px; font-size:14px; color: #000; text-decoration: none; cursor: pointer; display:block; padding:0px 10px 0px 10px; border:1px dotted #ccc; }
.logout a:hover { text-decoration: none; color:#FFF; background-color:#333; }

pre {
	font-family: arabic font;
	
	font-size: 22px; color: #000;	margin:0px; padding:0px;
	white-space: pre-wrap;    /* css-3 */
 	white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
 	white-space: -pre-wrap;      /* Opera 4-6 */
 	white-space: -o-pre-wrap;    /* Opera 7 */
 	word-wrap: break-word;       /* Internet Explorer 5.5+ */
	text-align: right;  
}


.button { padding:5px 20px 5px 20px; text-decoration:none; border-right:1px solid #CCC; border-left:1px solid #CCC; border-top:1px solid #CCC; background: rgba(255, 239, 0, 0.2); cursor:pointer; font-family:arabic font; font-size:18px;  }
.button:hover { background: rgba(255, 239, 0, 0.9); text-decoration:none;}

.cu { padding:0px 12px 4px 12px; text-decoration:none; border-right:1px solid #CCC; border-left:1px solid #CCC; border-top:1px solid #CCC; background: rgba(255, 239, 0, 0.9);}
.cu:hover { background: rgba(255, 239, 0, 0.9);}


.btn_action { font-size: 16px; padding:2px 15px 2px 15px; text-decoration:none; border:1px solid #CCC; background-color:#ddd; }
.btn_action:hover {  background-color:#ccc; text-decoration:none;}



/* greater than 800px */
@media (min-width: 800px) {

.footer { width:100%; height:120px; margin:0 auto; text-align:center; overflow:hidden;  bottom:0; display:block; margin-top:-30px; z-index:99; }
.row { width:95%; padding-top:30px; margin:0 auto; }

.contact { width:100%; margin:0 auto; background-color:#999; height:5px; margin-top:60px; }
.contact a { text-decoration:none; padding:5px 15px 5px 15px; background-color:#F00; top:-20px; position:relative;}
.contact a:hover { background-color:#FF0; color:#000; }

.contact a:first-child { border-radius:0px 20px 20px 0px;}
.contact a:last-child { border-radius:20px 0px 0px 20px;}

.left_side { width:45%; color: #333; padding:20px; font-size: 14px; float:left; text-align: left; vertical-align: top; }
.left_side a { text-decoration:none; color:#333;}
.left_side a:hover { opacity:0.5;}

.right_side { width:45%; color: #333; padding:20px; font-size: 16px; float:right; text-align: right; vertical-align: top; direction: rtl;}
.right_side a { text-decoration:none; color:#333;}
.right_side a:hover { opacity:0.5;}

}

/* less than 800px */
@media (max-width: 800px) {

.footer { width:100%; height:200px; margin:0 auto; text-align:center; font-size:15px;  overflow:hidden; bottom:0; display:block; margin-top:-100px; z-index:99;}
.row { width:95%; padding-top:110px; margin:0 auto; }

.contact { width:100%; margin:0 auto; background-color:#999; height:5px; margin-top:50px; margin-bottom:20px; }
.contact a { text-decoration:none; padding:5px 5px 3px 5px; background-color:#F00; top:-15px; position:relative;}
.contact a:hover { background-color:#FF0; color:#000; }

.contact a:first-child { border-radius:0px 20px 20px 0px;}
.contact a:last-child { border-radius:20px 0px 0px 20px;}

.left_side { width:100%; padding-bottom:10px; font-size: 11px; }
.right_side { width:100%; font-size:14px;}
.right_side img { width:80px; height:41px; }

.right_side a { text-decoration:none; color:#999;}
.right_side a:hover { opacity:0.5;}

}

.menu_footer_ul { margin:0px; padding:0px; position:relative; text-align:center; font-size:24px; margin-top:8px; font-family:"arabic font";}
.menu_footer_ul li { margin:0px; padding:0px; list-style:none; padding:0px 5px 0px 5px; display:inline-block; width:auto; height:auto; color:#999; font-size:18px;  }
.menu_footer_ul li a { text-decoration:none; margin:0px; color:#666; -moz-transition:background-color 0.4s ease; transition:background-color 0.4s ease; }
.menu_footer_ul li a:hover { color:black; border-bottom:1px solid black;}

.adSection { width:100%; height:auto; margin:0 auto; text-align:center; background-color:white; }
.adSection img { width:100%; height:auto;}

.ad { display: block; overflow: hidden; margin-top: 20px; border:1px solid #ccc; }
.ad img { width: 100%; height: auto; }
.adtitle { display: block; float:left; height:16px; position: absolute; color: #fff; background: rgba(0, 0, 0, 0.3); font-size:10px; padding: 2px; text-align: left; direction: ltr; }


/* greater than 800px */
@media (min-width: 800px) {
.bottom-wrapper { width: 100%; padding: 20px; padding-bottom:0px; padding-top: 0px; position: relative; display: block; overflow: hidden; }
.bottom { display: block; width: 100%; border-top: 1px solid #333; overflow: hidden; padding: 20px 10px 5px 10px; background-color: #64dd7e; }
div.left-div { width: 18%; float: left; border-right: 1px solid #ddd; }
div.left-div ul { margin:0; padding: 0;}
div.left-div ul li { display: block; margin:3px; padding-top: 1px; padding-bottom: 1px; list-style: none; text-align: left; text-transform: capitalize; }
div.left-div ul li a{ text-decoration: none; font-size:15px; color: #333; padding: 0px 0px 0px 15px; transition: margin 0.2s ease; }
div.left-div ul li a:hover{ margin-left: 10px; }

div.center-div { width: 15%; float: left; }
div.center-div ul { margin:0; padding: 0;}
div.center-div ul li { display: block; margin:3px; padding-top: 1px; padding-bottom: 1px; list-style: none; text-align: right;}
div.center-div ul li a{ text-decoration: none; color: #333; padding: 0px 0px 0px 15px; transition: margin 0.2s ease; }
div.center-div ul li a:hover{ margin-right: 10px; }

div.right-div { width: 66%; float: left; text-align: right; color: #333; }
div.right-div-logo { text-align: right; }
div.right-div-logo img { width: 180px; height: auto;}
div.right-div-logo-under-txt { text-align: right; padding-left: 250px; padding-top: 30px; direction: rtl;}
div.right-div ul { margin:0; padding: 0;}
div.right-div ul li { display: inline-block; margin:3px; list-style: none; }
div.right-div ul li a img{ transform: scale(1.1); width: 40px; height: 40px;}
div.right-div ul li a{ text-decoration: none; color: #333; display: block; border-radius: 100px; box-shadow: 0px 0px 3px #000; overflow: hidden; transition: opacity 0.2s ease;}
div.right-div ul li a:hover { opacity: 0.4; }

.div-contact-menu { padding-top: 70px; padding-bottom: 15px; width: 100%; overflow: hidden;}
div.right-div ul.contact-menu { margin:0; padding: 0; text-align: right; }
div.right-div ul.contact-menu li { display: inline-block; float: right; margin:3px; list-style: none; }
div.right-div ul.contact-menu li a{ text-decoration: none; padding: 5px 10px 5px 10px; display: block; border-radius: 100px; overflow: hidden; transition: transform 0.2s ease;}
div.right-div ul.contact-menu li a:hover{ transform: scale(1.1); opacity: 1; }

}


/* less than 800px */
@media (max-width: 800px) {
.bottom-wrapper { width: 100%; padding: 10px; padding-bottom:0px; position: relative; display: block; overflow: hidden; }
.bottom { display: block; width: 100%; border-top: 1px solid #333; overflow: hidden; background-color: #64dd7e; }
div.left-div { width: 100%; border-bottom: 1px solid #ddd;  padding-top: 15px;  padding-bottom: 10px; }
div.left-div ul { margin:0; padding: 0;}
div.left-div ul li { display: inline-block; margin:3px; padding-top: 1px; padding-bottom: 1px; list-style: none; text-align: left; text-transform: capitalize; border:1px solid #000;}
div.left-div ul li a{ text-decoration: none; font-size:15px; color: #333; padding: 5px; transition: color 0.2s ease; }
div.left-div ul li a:hover{ color: #000; }

div.center-div { width: 100%; border-bottom: 1px solid #ddd; padding-top: 10px;  padding-bottom: 15px;}
div.center-div ul { margin:0; padding: 0;}
div.center-div ul li { display: inline-block; margin:3px; padding-top: 1px; padding-bottom: 1px; list-style: none; text-align: right; border:1px solid #000;}
div.center-div ul li a{ text-decoration: none; color: #333; padding: 5px; transition: color 0.2s ease; }
div.center-div ul li a:hover{ color: #000; }

div.right-div { width: 100%; text-align: right; color: #333; padding-top: 30px; }
div.right-div-logo { text-align: center; }
div.right-div-logo img { width: 180px; height: auto;}
div.right-div-logo-under-txt { text-align: center; padding: 5px; padding-top: 30px; direction: rtl;}
div.right-div ul { margin:0 auto; padding: 0; text-align: center; }
div.right-div ul li { display: inline-block; margin:3px; list-style: none; }
div.right-div ul li a img{ transform: scale(1.1); width: 40px; height: 40px;}
div.right-div ul li a{ text-decoration: none; color: #333; display: block; border-radius: 100px; box-shadow: 0px 0px 3px #000; overflow: hidden; transition: opacity 0.2s ease;}
div.right-div ul li a:hover { opacity: 0.4; }

.div-contact-menu { padding-top: 30px; padding-bottom: 15px; width: 100%; overflow: hidden;}
div.right-div ul.contact-menu { margin:0; padding: 0; padding-right: 10px; }
div.right-div ul.contact-menu li { display: inline-block; float: right; margin:3px; list-style: none; }
div.right-div ul.contact-menu li a{ text-decoration: none; font-size: 20px; padding: 3px 7px 3px 7px; display: block; border-radius: 100px; overflow: hidden; transition: transform 0.2s ease;}
div.right-div ul.contact-menu li a:hover{ transform: scale(1.1); }

}


/* greater than 800px */
@media (min-width: 800px) {
.author { padding-left: 50px; padding-bottom:3px; width: 100%; padding-top: 5px; font-size: 12px; text-align: center; overflow: hidden; position: relative;}
.author a{ text-decoration: none; transition: opacity 0.2s ease; color: #333; }
.author a:hover { opacity: 0.4; }
}

/* less than 800px */
@media (max-width: 800px) {
.author { padding-bottom:10px; width: 100%; padding-top: 10px; font-size: 14px; text-align: center; overflow: hidden; position: relative;}
.author a{ text-decoration: none; transition: opacity 0.2s ease; color: #333; }
.author a:hover { opacity: 0.4; }
}

/* greater than 800px */
@media (min-width: 800px) {
.story-comments {  display: block; width: 100%; padding: 10px; margin-top: 50px;  border-top: 2px solid #333;}
.story-comments-note { display: block; width: 100%; }
.story-comments-count { display: block; width: 100%; text-align: left; direction: ltr; border-bottom: 1px solid #ddd; margin-top: 15px; }
.story-comments-box { display: block; width: 100%; border: 1px solid #ddd; padding: 10px; margin-top: 30px; }
.story-comments-buttons { display: block; width: 100%; margin-top: 10px; direction: lrt; }
.story-comments-required { display: block; width: 100%; margin-top: 10px; text-align: center; }

.comments-detail { display: block; width: 100%; margin-top: 10px; padding: 10px; border: 1px solid #ddd; text-align: left; font-size: 14px;}
.comments-person { display: block; width: 100%; direction: ltr; font-weight: bold;  }
.comments-description { display: block; width: 100%; direction: ltr; }
}

/* less than 800px */
@media (max-width: 800px) {
.story-comments {  display: block; width: 100%; padding: 10px; margin-top: 50px;  border-top: 2px solid #333;}
.story-comments-note { display: block; width: 100%; }
.story-comments-count { display: block; width: 100%; text-align: left; direction: ltr; border-bottom: 1px solid #ddd; margin-top: 15px; }
.story-comments-box { display: block; width: 100%; border: 1px solid #ddd; padding: 10px; margin-top: 30px; }
.story-comments-buttons { display: block; width: 100%; margin-top: 10px; direction: lrt; }
.story-comments-required { display: block; width: 100%; margin-top: 10px; text-align: center; font-size: 18px; }

.comments-detail { display: block; width: 100%; margin-top: 10px; padding: 10px; border: 1px solid #ddd; text-align: left; font-size: 14px;}
.comments-person { display: block; width: 100%; direction: ltr; font-weight: bold;  }
.comments-description { display: block; width: 100%; direction: ltr; }
}

.ads { position: absolute; float: right; margin-right:0px;}
.ads a { padding: 2px 10px 2px 10px; display: block; font-size: 11px; color: #fff; background: rgba(0,0,0,0.3); -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 1s ease-out;
  -o-transition: background-color 1s ease-out;
  transition: background-color 1s ease-out;}
.ads a:hover { color: #fff; background: rgba(0,0,0,0.9);}