/*===============================================
	For Smartphones width below 640px
===============================================*/
@media screen and (max-width:640px){
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{
	width:auto;
	float:none;
	margin:0 20px;

/*	background:#CF9;*/
}

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

	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%;
	height:205px !important;
}
/* ********************************************
	Logo & Lang
********************************************* */
#header .logo{
	margin:17px 0 0 3%;
	float:left;
	width:80%;
}
#header .logo img{
	width:100%;
	height:auto;
}
#header .lang{
	display:none;
}

/* ********************************************
	Menu
********************************************* */

ul#menu-headnav{
	position:relative;
}
ul.menu li{
	float:left;
	position:relative;
}
ul.menu li a{
	cursor:pointer;
	display:block;
	padding:40px 15px 40px 15px;
}
ul#menu-headnav{
	zoom: 100%;	
}
ul#menu-headnav:after{
	height:0;
	visibility:hidden;
	content:".";
	display:block;
	clear:both;
}
.head-nav{
	display:none;	
}
#mobile{
	display: block;
	position: relative;
	width:12%;
	float:right;
	margin:3% 2% 0 0;
}
#mobile a{
	display: block;
	position: relative;
	padding: 12px 0 0 0;
	color:#00b0d8;
	text-align: center;
	text-decoration: none;
}
#mobile a img{
	width:100%;
	height:auto;
}

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

	Footer
	
******************************************************* */


#footer .lang{
	display:block;
	margin:0 0 0 20px;
}



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

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

h2.index,
#index-weekly-program h2{
	font-size:2em;
}
#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:none;
	width:100%;
	height:170px;
	overflow:hidden;
}
.news-top-box .thumbnail img,
.news-top-box.programs .thumbnail img{
	width:100%;
	height:auto;
}
.news-top-box .top-right,
.news-top-box.programs .top-right{
	float:none;
	width:100%;
	margin:0 0 0 0;
	position:relative;
	top:-26px;
}
.news-top-box.programs .top-right{
	top:0px;
}
.news-top-box .top-right .date{
	color:#000;
	margin:0 0 0 0;
	font-size:0.9em;
	background:#00b0d8;
	width:auto;
	padding:3px 0 3px 5px;
}
.news-top-box .top-right .title{
	color:#00b0d8;
	padding:15px 0 0 0;
}
.news-top-box .top-right .title a{
	color:#00b0d8;
}
.news-top-box .top-right .text{
	margin:0 0 15px 0;
}
.news-top-box .top-right .more a,
.archive-see-all{
	display:none;
}
.news-top-box.programs .top-right .more a{
	display:block;
}


/* News second and Announcements */
.index-na-box{
	width:100%;
}
.index-na-box .thumbnail{
	float:none;
	width:100%;
	height:170px;
	overflow:hidden;
}
.index-na-box .thumbnail img{
	width:100%;
	height:auto;
	position:relative;
	top:-20%;
}
.index-na-box .box-right{
	float:none;
	width:100%;
	margin:0 0 0 0;
	position:relative;
	top:-20px;
}
.index-na-box .box-right .date{
	color:#000;
	margin:0 0 0 0;
	font-size:0.9em;
	background:#00b0d8;
	width:auto;
	padding:3px 0 3px 5px;
}
.index-na-box .box-right .title{
	color:#00b0d8;
	padding:15px 0 0 0;
}
.index-na-box .box-right .text{
	margin:0 0 15px 0;
}
.index-na-box .box-right .more a{
	display:none;
}



/* Weekly Program */
#index-weekly-program{
	width:100%;
	background:none;
	height:auto;
	border-radius: 0;
	position:relative;
	overflow:visible;
	margin: 0 0 30px 0;
}
#index-weekly-program h2{
	color:#00b0d8;
	font-size:2em;
	padding:0px 0 20px 0;
}
.index-program-box{
	width:100%;
	margin: 0 0 0 0px;
}
.index-program-box .thumbnail{
	float:none;
	width:100%;
	height:170px;
	overflow:hidden;
}
.index-program-box .thumbnail img{
	width:100%;
	height:auto;
}
.index-program-box .box-right{
	float:none;
	width:100%;
	margin:15px 0 0 0;
}
.index-program-box .box-right .title a{
	color:#00b0d8;
}
.index-program-box .box-right .more a{
	display:none;
}
/* Library */
#index-library{
	width:100%;
	float:none;
}
#index-library .library-item-box .thumbnail{
	float:left;
	margin:0 5% 0 0;
	width:20%;	
}
#index-library .library-item-box .thumbnail img{
	width:100%;
	height:auto;
}
#index-library .library-item-box .item-title{
	float:left;
	font-size:0.8em;
	line-height:110%;
	margin:0 3% 0 0;
	width:67%;
}


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

	Library

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

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



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

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

#right-navi{
	width:auto;
	float:none;
	margin:0 20px 0 20px;
}

#right-navi.index{
	margin:0 20px;
}

#right-navi .logo-halal{
	float:none;
	width:100%;
}
#right-navi .logo-halal img{
	width:100%;
}

#right-navi #page-nav{
	float:none;
	width:100%;
	height:auto;
	min-height:20px;
}

#nav-common{
	width:100%;
	font-size:1.5em;
}

/* *****************************************
	Right Prayer Schedule
******************************************* */	
#right-navi #prayer-schedule{
	width:100%;
	float:right;	
	margin: 0 0 25px 0;
	padding:12px 0 0 0;
	font-size:1.5em;
}
#right-navi #prayer-table{
	width:100%;
	margin: 0 0 25px 0;
	padding:12px 0 0 0;
}
#right-navi #prayer-table #timetable{
	width:90%;
	margin:8px 0 0 12px;
}
#right-navi #prayer-table #friday-prayer{
	width:100%;
	text-align: -webkit-center;
}
#right-navi #prayer-table #friday-prayer p{
	margin:0 0 5px 14px;
	width:90%;
	text-align:left;
}
#right-navi #prayer-table .friday-table{
	width:90%;
	margin:0 0 0 12px;
}




/*===============================================
	/For Smartphones width below 640px
===============================================*/}