/*===============================================
	For TABLET width up to 768px
===============================================*/
@media screen and (max-width: 768px){
img{
	max-width: 100%;
	height: auto;
	width /***/:auto;　
}

/* ******************************************************

	Content Layout
	
******************************************************* */

#layout-all{
	width: 100%;
	margin: 0 auto;
}
#contents{
	width:100%;
	margin:0 auto;
	padding:20px 0 30px 0;
}
#main-content{
	float:none;
	width:auto;
	margin:0 20px 40px 20px;
}
#single-content{
	width:100%;
	margin:0 0 50px 0;
}

/* ******************************************************

	Header
	
******************************************************* */
#header{
	padding:0 0 4px 0;
	width:100%;
}
#header-content{
	width:100%;
	margin:0;
	padding:0 0 0 0;
}
/* ********************************************
	Visual
********************************************* */
.bgsw{
	width:100%;
	min-width:100% !important;
	height:315px !important;
}
/* ********************************************
	Logo & Lang
********************************************* */
#header .logo{
	margin:17px 0 0 20px;
	float:left;
	width:50%;
}
#header .logo img{
	width:100%;
	height:auto;
}
#header .lang{
	margin:17px 20px 0 0;
	float:right;
}
/* ********************************************
	Menu
********************************************* */
#header #menu{
	margin:6px 0 0 20px;
}
#header #menu ul li{
	margin:0 20px 0 0;
}
#header #menu ul li a{
	font-size:1.0em;
}
#mobile{
	display:none;
}
/* ********************************************
	Bottom Image
********************************************* */
.bottom-border{
	min-width:100% !important;
}


/* ******************************************************

	Footer
	
******************************************************* */
#footer{
	min-width:100%;
}

#footer-content{
	width:100%;
	padding:25px 0 40px 0;
}
#footer-content #sitemap{
	display:none;
}
#footer-content .logo{
	font-size:1.8em;
	font-weight:200;
	line-height:1.2em;
	margin:0 20px;
}
#footer-content .logo span{
	font-size:0.8em;
}
#footer-content .logo span.thick{
	display:block;
	font-size:1em;
}
#footer .lang{
	display:none;
}
#footer-content .phone{
	font-size:1.4em;
	font-weight:200;
	line-height:1.2em;
	margin:10px 0 0 20px;
}
/* ******************************************************

	Index
	
******************************************************* */

h2.index,
#index-weekly-program h2{
	font-size:2.4em;
}
#index-news-archive{
	margin:0 0 50px 0;
	width:100%;
}

/* First News */
.news-top-box,
.news-top-box.programs{
	background:none;
	width:100%;
	height:auto;
	border-radius: 0;
	position:relative;
	overflow:visible;
	margin: 0 0 30px 0;
}
.news-top-box .thumbnail,
.news-top-box.programs .thumbnail{
	float:left;
	width:25%;
	height:auto;
}
.news-top-box .thumbnail img{
	width:100%;
	height:auto;
}
.news-top-box .top-right{
	float:left;
	width:68%;
	margin:0 3% 0 4%;
}
.news-top-box .top-right .date{
	color:#000;
	margin:0 0 0 0;
	font-size:0.7em;
}
.news-top-box .top-right .title a,
.news-top-box.programs .top-right .title a{
	color:#00b0d8;
}
.news-top-box .top-right .text{
	margin:0 0 15px 0;
}
.news-top-box .top-right .more a,
.news-top-box.programs .top-right .more a{
	color:#FFF;
	background:#00b0d8;
	position:relative;
	bottom:auto;
	left:auto;
	margin:0 0 15px 0;
}
.news-top-box .top-right .more a:hover,
.news-top-box.programs .top-right .more a:hover{
	color:#00b0d8;
	background:#e9e9e9;
}

.index-program-box .box-right .more a:hover{
	color:#00b0d8;
	background:#e9e9e9;
}

/* News second and Announcements */
.index-na-box{
	width:100%;
}
.index-na-box .thumbnail{
	float:left;
	width:25%;
	height:auto;
}
.index-na-box .thumbnail img{
	width:100%;
	height:auto;
}
.index-na-box .box-right{
	float:left;
	width:68%;
	margin:0 3% 0 4%;
}
.index-na-box .box-right .text{
	margin:0 0 15px 0;
}
.index-na-box .box-right .more a{
	position:relative;
	bottom:auto;
	left:auto;
	margin:0 0 15px 0;
}



/* Weekly Program */
#index-weekly-program{
	width:100%;
}
.index-program-box{
	width:100%;
}
.index-program-box .thumbnail{
	width:25%;
	height:auto;
}
.index-program-box .thumbnail img{
	width:100%;
	height:auto;
}
.index-program-box .box-right{
	float:left;
	width:68%;
	margin:0 3% 0 4%;
}
.index-program-box .box-right .more a{
	bottom:0px;
	left:28%;
}
/* Library */
#nav-common{
	width:100%;
	float:left;
}
#nav-common .library-item-box .thumbnail{
	float:left;
	margin:0 5% 0 0;
	width:20%;	
}
#nav-common .library-item-box .thumbnail img{
	width:100%;
	height:auto;
}
#nav-common .library-item-box .item-title{
	float:left;
	font-size:0.8em;
	line-height:110%;
	margin:0 3% 0 0;
	width:67%;
}


/* ******************************************************

	Right Navigation
	
******************************************************* */

#right-navi{
	width:auto;
	float:none;
	margin:0 20px;
}
#right-navi.index{
	margin:0 20px;
}
#right-navi .logo-halal{
	float:right;
	width:48%;
}
#right-navi .logo-halal img{
	width:100%;
}
#right-navi #page-nav{
	float:left;
	width:48%;
	height:auto;
	min-height:300px;
}

/* *****************************************
	Right Prayer Schedule
******************************************* */	
#right-navi #prayer-schedule{
	width:48%;
	float:right;	
	margin: 0 0 25px 0;
	padding:12px 0 0 0;
}
#right-navi #prayer-table,
#right-navi .prayer-table{
	width:100%;
	margin: 0 0 4px 0;
	padding:12px 0 0 0;
}
#right-navi .prayer-table #timetable,
#right-navi .prayer-table #iqamatable{
	width:100%;
}
#right-navi .prayer-table #friday-prayer{
	width:100%;
}
#right-navi .prayer-table .friday-table{
	width:100%;
}

#right-navi .prayer-table .hijra-date,
#right-navi .prayer-table .gregorian-date{
	font-size:1.3em;

}


/* *******************************************************************

	About

******************************************************************* */

#accessmap{
	max-width:768px;
	width:100%;
	height:500px;
}
#map_canvas{
	width:100%;
	height: 100%;
}

/* *******************************************************************

	Weekly Programs

******************************************************************* */

h2.prdate{
	font-size:1.5em;
	color: #00b0d8;
	margin:0 0 15px 0;
}
.program-detail{
	width:100%;
	margin:0 0 30px 0;

}
.program-detail dt{
	width:100%;
	float:none;
	font-size:1.4em;
}
.program-detail dd{
	float:none;
	font-size:1.3em;
	padding:0 0 15px 0;
}
.program-detail dd.name{
	width:100%;
	padding:0 0 10px 0;
}
.program-detail dd.place{
	width:100%;
	padding:0 0 15px 0;
	border-bottom:1px solid;
}
#single-content p.mg-top-30{
	font-size:1.3em;
} 
.program-detail.top{
	display:none;
}

/* *******************************************************************

	Library

******************************************************************* */

.video-top-box{
	width:30%;
}
.archive-see-all.video{
	margin-bottom:20px;
}



.library-archive-page{
	position:relative;
	margin-bottom:30px;
}
.library-archive-page h2{
	position:relative;
	bottom:0;
	bottom:auto;
	left:0;
}
.library-archive-page .more a{
	position:relative;
	bottom:auto;
	left:0 !important;
	right:auto;
	margin-bottom:0px !important;
	float:none;
}
/* *******************************************************************

	Prayer Schedule

******************************************************************* */

table#timetable2{
	width:100%;
}

/* *******************************************************************

	Contact

******************************************************************* */
#contact-main{
	width:100%;
}
#contact-box{
	width:100%;
}
.form-box{
	width:auto;
}

/*===============================================
	/For TABLET width up to 768px
===============================================*/
}