/* ============ Global ============ */

* {
	font-family:Arial, Helvetica, sans-serif;
	margin: 0;
	padding: 0;
}

a {
	text-decoration:none;
}
.clear {
	clear:both;
}
a:hover, a:selected, a:active { outline:none 0; border:none 0; }
#wrap {
	margin: 0 auto;
	width: 320px;
	height:480px;
	overflow:hidden;
	position:relative;
}
.hidden {display:none;}

/* ============ Loading Page ============ */

#loading {
	width:320px;
	height:480px;
	background:url(../image/loading.jpg) #c70000;
	display:block;
	position:absolute;
	z-index:1000;
}
.logo {
	width: 101px;
	height: 101px;
	margin:95px 0px 0 109px;
	float: left;
	background:url(../image/logo.png) no-repeat;
}
.transformed {
	-webkit-transform: rotate(0deg) scale(1.25, 0.5);
	-moz-transform: rotate(0deg) scale(1.25, 0.5);
	-ms-transform: rotate(0deg) scale(1.25, 0.5);
	transform: rotate(0deg) scale(1.25, 0.5);
}

.loading_text {
	font-size:14px;
	color:#FFF;
	font-weight:bold;
	text-align:center;
	margin-top:90px;
}


/* ============ Top Bar ============ */

#top_bar {
	height:18px;
	padding-top:3px;
	background-color:#000;
	color:#CCC;
	font-size:12px;
	position:relative;
}
#top_bar a {
	color:#ccc;
}
#top_bar_left {
	position:absolute;
	left:3px;
	top:3px;
}
#clock {
	text-align:center;
	width:100%px;
}
#top_bar_right {
	position:absolute;
	right:3px;
	top:3px;
}


/* ============ Top Nav ============ */

#top_nav {
	height:42px;
	color:#eee;
	position:relative;
	border-top:#969696 solid 1px;
	border-bottom:#2b2b2b solid 1px;
	background: #969696; /* Old browsers */
	background: -moz-linear-gradient(top, #969696 0%, #2b2b2b 49%, #000000 51%, #000000 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#969696), color-stop(49%,#2b2b2b), color-stop(51%,#000000), color-stop(100%,#000000)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #969696 0%,#2b2b2b 49%,#000000 51%,#000000 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #969696 0%,#2b2b2b 49%,#000000 51%,#000000 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #969696 0%,#2b2b2b 49%,#000000 51%,#000000 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#969696', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #969696 0%,#2b2b2b 49%,#000000 51%,#000000 100%); /* W3C */
}
#top_nav a {
	color:#eee;
}
#maintitle {
	text-align:center;
	padding-top:11px;
}
.back_link {
	display:none;
	position:absolute;
	top: 8px;
	left:12px;
	font-size:12px;
	padding-top:5px;
	height:21px;
	width:44px;
	text-align:center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: rgb(99,99,99); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(166,166,166,1) 0%, rgba(75,75,75,1) 49%, rgba(38,38,38,1) 51%, rgba(38,38,38,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(166,166,166,1)), color-stop(49%,rgba(75,75,75,1)), color-stop(51%,rgba(38,38,38,1)), color-stop(100%,rgba(38,38,38,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(75,75,75,1) 49%,rgba(38,38,38,1) 51%,rgba(38,38,38,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(75,75,75,1) 49%,rgba(38,38,38,1) 51%,rgba(38,38,38,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(75,75,75,1) 49%,rgba(38,38,38,1) 51%,rgba(38,38,38,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(166,166,166,1) 0%,rgba(75,75,75,1) 49%,rgba(38,38,38,1) 51%,rgba(38,38,38,1) 100%); /* W3C */
}
#player_link {
	position:absolute;
	top: 8px;
	right:12px;
	font-size:12px;
	padding-top:5px;
	height:21px;
	width:44px;
	text-align:center;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: rgb(99,99,99); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(166,166,166,1) 0%, rgba(75,75,75,1) 49%, rgba(38,38,38,1) 51%, rgba(38,38,38,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(166,166,166,1)), color-stop(49%,rgba(75,75,75,1)), color-stop(51%,rgba(38,38,38,1)), color-stop(100%,rgba(38,38,38,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(75,75,75,1) 49%,rgba(38,38,38,1) 51%,rgba(38,38,38,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(75,75,75,1) 49%,rgba(38,38,38,1) 51%,rgba(38,38,38,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(75,75,75,1) 49%,rgba(38,38,38,1) 51%,rgba(38,38,38,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(166,166,166,1) 0%,rgba(75,75,75,1) 49%,rgba(38,38,38,1) 51%,rgba(38,38,38,1) 100%); /* W3C */
}


/* ============ Content Wrap ============ */

#content {
	height:411px;
	background:#333;
}


/* ============ DAB Page ============ */

#DAB {
	display:block;
	background:#333;
	position:relative;
}

#main { z-index:100; }

#main, .channel_box, #dab_channel_box, #proverbs_channel_box, #espanol_channel_box, #proverbios_channel_box, #kids_channel_box, #japanese_channel_box, #chinese_channel_box, #hindi_channel_box, #portuguese_channel_box, #arabic_channel_box {
	position:absolute;
	top:44px;
	left:0;
	overflow-y:scroll;
	overflow-x:hidden;
}

#main, #channel, #detail, .channel_box {
	width:320px;
	height:367px;
}

ul {
	font: normal 13px Verdana;
	margin: 0;
	padding: 0;
	list-style-type: none;
}
li a {
	display: block;
	color: black;
	text-decoration: none;
	border-bottom:#ddd solid 1px;
	height:60px;
	background:#FFF;
	font-size:16px;
	font-weight:bold;
	white-space:nowrap;
}
li a p {
	color:#aaa;
}
li a:hover {
	background-color: #eee;
}
.backcontroltitle {
	display:none;
}
.backcontrol {
	display:none;
}

li.banner {
	width: 100%;
	height:113px;
}
img.title {
	float:left;
	margin-right:10px;
}
.pubDate_list {
	float:left;
	display:block;
	width:60px;
	height:55px;
	margin-right:10px;
	text-align:center;
	padding-top:5px;
}
.month {
	font-size:13px;
	color:#aaa;
}
.day {
	font-size:30px;
	color:#aaa;
}
.pubDate {
}


/* ============ Details Page ============ */

#detail {
	background:#333;
	z-index:50;
	position:absolute;
	top:44px;
	left:0;
}

li#details {
	width: 320px;
	height:367px;
	color:#FFF;
}
li#details a {
	border-bottom: none;
	background:#333;
	color:#FFF;
	font-size:12px;
	height:auto;
}
li#details #title {
	padding:10px;
	display:block;
	font-size:14px;
}
li#details #detail_img img {
	float:left;
	margin:0 10px;
	height:68px;
	width:121px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px 10px 10px 10px;
}
li#details #author {
	margin:5px 10px 0 0;
	font-weight:bold;
	font-size:12px;
	float:left;
	display:block;
	width:169px;
}
li#details #pubDate {
	font-size:12px;
	float:left;
	display:block;
	width:169px;
}
li#details #audio_links {
	margin:10px;
	width:300px;
	display:block;
}
li#details #audio_links a {
	padding-top:4px;
	display:block;
	font-weight:normal;
	font-size:12px;
	text-align:center;
	background:#666;
	height:19px;
	background: rgb(166,166,166); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(166,166,166,1) 0%, rgba(112,112,112,1) 49%, rgba(56,56,56,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(166,166,166,1)), color-stop(49%,rgba(112,112,112,1)), color-stop(100%,rgba(56,56,56,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(112,112,112,1) 49%,rgba(56,56,56,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(112,112,112,1) 49%,rgba(56,56,56,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(112,112,112,1) 49%,rgba(56,56,56,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(166,166,166,1) 0%,rgba(112,112,112,1) 49%,rgba(56,56,56,1) 100%); /* W3C */
}
li#details #audio_links a:hover {
	background: rgb(179,179,179); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(179,179,179,1) 0%, rgba(133,133,133,1) 49%, rgba(86,86,86,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,179,179,1)), color-stop(49%,rgba(133,133,133,1)), color-stop(100%,rgba(86,86,86,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(179,179,179,1) 0%,rgba(133,133,133,1) 49%,rgba(86,86,86,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(179,179,179,1) 0%,rgba(133,133,133,1) 49%,rgba(86,86,86,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(179,179,179,1) 0%,rgba(133,133,133,1) 49%,rgba(86,86,86,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(179,179,179,1) 0%,rgba(133,133,133,1) 49%,rgba(86,86,86,1) 100%); /* W3C */
}
li#details #listen a {
	width:220px;
	float:left;
	-webkit-border-radius: 10px 0 0 10px;
	-moz-border-radius: 10px 0 0 10px;
	border-radius: 10px 0 0 10px;
}
li#details #download a {
	width:79px;
	float:left;
	-webkit-border-radius: 0 10px 10px 0;
	-moz-border-radius: 0 10px 10px 0;
	border-radius: 0 10px 10px 0;
	border-left:#333 solid 1px;
}

/* ======================= START temp for no download ==================== 
li#details #listen a {
	width:300px;
	float:left;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
li#details #download { display:none; }
/* ======================= END temp for no download ==================== */

li#details #social {
	width:320px;
	display:block;
	height:40px;
	background:url(../image/bg.jpg) #000;
	padding:10px 0;
	text-align:center;
}
li#details #facebook_box {
	float:left;
	width:70px;
	height:33px;
	margin-left:20px;
	padding-top:12px;
	display:block;
	z-index:3000;
	overflow:visible;
}
li#details #twitter_box {
	float:left;
	width:70px;
	height:33px;
	margin-left:30px;
	padding-top:12px;
	display:block;
}
li#details #google_box {
	float:right;
	width:70px;
	height:33px;
	margin-right:10px;
	padding-top:12px;
	display:block;
}
li#details #mail {
	float:left;
	width:70px;
	height:33px;
	margin-left:8px;
	padding-top:12px;
	display:block;
}
li#details #description {
	margin:10px;
	width:300px;
	display:block;
}


/* ============ Media Page ============ */

#media {
	width:320px;
	height:411px;
	background:#333;
	color:#FFF;
	padding:0 0 0 0;
	margin:0;
	display:none;
	text-align:center;
	position:absolute;
	z-index:999;
	top:21px;
}
#media .content { padding:60px 0 0 0; }


/* ============ Bible Page ============ */

#bible {
	width:320px;
	height:411px;
	background:#333;
	color:#FFF;
	padding:0 0 0 0;
	margin:0;
	display:none;
	text-align:center;
	position:absolute;
	z-index:999;
	top:21px;
}
#bible .content { padding:60px 0 0 0; }


/* ============ More Page ============ */

#more {
	width:320px;
	height:411px;
	background:#333;
	padding:0 0 0 0;
	margin:0;
	display:none;
	position:absolute;
	z-index:999;
	top:21px;
}
#more .content { padding:10px 0 0 0; }
#more .content a {
	margin:0 10px 10px 10px;
	padding-top:4px;
	display:block;
	font-weight:normal;
	font-size:12px;
	color:#FFF;
	text-align:center;
	height:19px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px 10px 10px 10px;
	background: rgb(166,166,166); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(166,166,166,1) 0%, rgba(112,112,112,1) 49%, rgba(56,56,56,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(166,166,166,1)), color-stop(49%,rgba(112,112,112,1)), color-stop(100%,rgba(56,56,56,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(112,112,112,1) 49%,rgba(56,56,56,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(112,112,112,1) 49%,rgba(56,56,56,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(166,166,166,1) 0%,rgba(112,112,112,1) 49%,rgba(56,56,56,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(166,166,166,1) 0%,rgba(112,112,112,1) 49%,rgba(56,56,56,1) 100%); /* W3C */
}
#more .content a:hover {
	background: rgb(179,179,179); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(179,179,179,1) 0%, rgba(133,133,133,1) 49%, rgba(86,86,86,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(179,179,179,1)), color-stop(49%,rgba(133,133,133,1)), color-stop(100%,rgba(86,86,86,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(179,179,179,1) 0%,rgba(133,133,133,1) 49%,rgba(86,86,86,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(179,179,179,1) 0%,rgba(133,133,133,1) 49%,rgba(86,86,86,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(179,179,179,1) 0%,rgba(133,133,133,1) 49%,rgba(86,86,86,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(179,179,179,1) 0%,rgba(133,133,133,1) 49%,rgba(86,86,86,1) 100%); /* W3C */
}


/* ============ Player Page ============ */

#player {
	width:0px;
	height:0px;
	background:#000;
	padding:0;
	margin:0;
	display:block;
	position:absolute;
	z-index:1000;
	top:20px;
	color:#ccc;
	overflow:hidden;
}
#player a, #player a:hover {
	color:#ccc;
}


/* ======= Player ======= */

a#player_close { font-size:12px; }

.jp-audio {padding:10px; border-top:#333 solid 1px; }

div.jp-interface {
	position: relative;
	width:100%;
	display:block;
	height:195px;
}


/* Play Pause */

div.jp-interface ul.jp-controls {
	list-style-type:none;
	padding:0;
	margin: 0;
}
div.jp-interface ul.jp-controls li {
	/* position: absolute; */
	display:inline;
}
div.jp-interface ul.jp-controls a {
	position: absolute;
	overflow:hidden;
	text-indent:-9999px;
}
#player a.jp-play, #player a.jp-pause, #player .jp-play a:hover, #player .jp-pause a:hover {
	width:48px;
	height:48px;
	z-index:1;
	border:none;
	background-color:transparent;
}
div.jp-audio div.jp-type-single a.jp-play,
div.jp-audio div.jp-type-single a.jp-pause {
	top:320px;
	left:126px;
}
a.jp-play {
	background: url("../image/Play.png") no-repeat;
}
a.jp-pause {
	background: url("../image/Pause.png") no-repeat;
	display: none;
}


/* Progress Bar */

div.jp-progress {
	position: absolute;
	overflow:hidden;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px 5px 5px 5px;
	border:#333 solid 1px;
}
div.jp-audio div.jp-type-single div.jp-progress {
	top:150px;
	left:0;
	width:298px;
	height:8px;
}
div.jp-seek-bar {
	background: #333 0 -202px repeat-x;
	width:0px;
	/* height:15px; */
	height:100%;
	cursor: pointer;
}
div.jp-play-bar {
	background: #ccc 0 -218px repeat-x ;
	width:0px;
	/* height:15px; */
	height:100%;
	-webkit-border-radius: 5px 0 0 5px;
	-moz-border-radius: 5px 0 0 5px;
	border-radius: 5px 0 0 5px;
}

/* Time */

div.jp-current-time,
div.jp-duration {
	position: absolute;
	font-size:.64em;
}
div.jp-duration {
	text-align: right;
}
div.jp-audio div.jp-type-single div.jp-current-time,
div.jp-audio div.jp-type-single div.jp-duration {
	top:160px;
	left:0;
	width:300px;
}


/* Information */

#player_info_title { font-weight:bold;}
#player_info_author {}
#player_info_date { font-size:12px; }


/* ============ Bottom Bar ============ */

#bottom_bar {
	height:49px;
	color:#CCC;
	border-top:#303030 solid 1px;
	background: #898989; /* Old browsers */
	background: -moz-linear-gradient(top, rgba(71,71,71,1) 0%, rgba(33,33,33,1) 49%, rgba(22,22,22,1) 51%, rgba(0,0,0,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(71,71,71,1)), color-stop(49%,rgba(33,33,33,1)), color-stop(51%,rgba(22,22,22,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(71,71,71,1) 0%,rgba(33,33,33,1) 49%,rgba(22,22,22,1) 51%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(71,71,71,1) 0%,rgba(33,33,33,1) 49%,rgba(22,22,22,1) 51%,rgba(0,0,0,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(71,71,71,1) 0%,rgba(33,33,33,1) 49%,rgba(22,22,22,1) 51%,rgba(0,0,0,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(71,71,71,1) 0%,rgba(33,33,33,1) 49%,rgba(22,22,22,1) 51%,rgba(0,0,0,1) 100%); /* W3C */
}
#bottom_bar a {
	float:left;
	display:block;
	width:70px;
	height:30px;
	color:#CCC;
	text-align:center;
	padding:9px 0 0 0;
	margin:5px 0 0 8px;
}
#bottom_bar a.selected {
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px 5px 5px 5px;
	background: rgb(99,99,99); /* Old browsers */
	background: -moz-linear-gradient(top, rgba(99,99,99,1) 0%, rgba(66,66,66,1) 49%, rgba(57,57,57,1) 51%, rgba(38,38,38,1) 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(99,99,99,1)), color-stop(49%,rgba(66,66,66,1)), color-stop(51%,rgba(57,57,57,1)), color-stop(100%,rgba(38,38,38,1))); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, rgba(99,99,99,1) 0%,rgba(66,66,66,1) 49%,rgba(57,57,57,1) 51%,rgba(38,38,38,1) 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, rgba(99,99,99,1) 0%,rgba(66,66,66,1) 49%,rgba(57,57,57,1) 51%,rgba(38,38,38,1) 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, rgba(99,99,99,1) 0%,rgba(66,66,66,1) 49%,rgba(57,57,57,1) 51%,rgba(38,38,38,1) 100%); /* IE10+ */
	background: linear-gradient(top, rgba(99,99,99,1) 0%,rgba(66,66,66,1) 49%,rgba(57,57,57,1) 51%,rgba(38,38,38,1) 100%); /* W3C */
}