/* Spin CSS Document */

html{
	margin:0;
	padding:0;
  	height: 100%; 
	
}

body{
	margin:0;
	padding:	;
	height: 100%;
	line-height:1.4;
	text-align:center;
	background-image:url(../img/page_bg.jpg);
	background-repeat:repeat-x;
	background-position:bottom;
	background-attachment: fixed;
	background-color:#ffffff;
	font:12px Tahoma;
	
}

#page_outer{
	position: relative;
	width:100%;
	min-height: 100%;
	background-image:url(../img/bottom_bg_790.jpg);
	background-position: bottom center;
	background-repeat:no-repeat;
	z-index:100;
}

* html #page_outer{
	height: 100%;
}

#page{
	position: relative;
	margin-right:auto;
	margin-left:auto;
	width: 790px;
	min-height: 100%;
	z-index:100;

}

* html #page{
	height: 100%;
}

#wrapper{
	padding:0;
	text-align:left;
	z-index:100;
}

p{
	margin:0 0 10px 0;
	padding:0;
}
#top_grad_bg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:360px;
	background-image:url(../img/body_bg.jpg);
	background-repeat:repeat-x;
	z-index:0;
}
	
#top_bg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:301px;
	background-image:url(../img/top_bg.jpg);
	background-position: top center;
	background-repeat:no-repeat;
	z-index:1;
	overflow:hidden;
	}
	* html #top_bg{
		z-index:1;
	}

#bottom_bg{
	position:absolute;
	bottom:0;
	left:0;
	width:960px;
	height:350px;
	margin:0 0 0 -90px;

	z-index:-1;
	
	}
	* html #bottom_bg{
		z-index:-1;
	}
	
/*-----------------------------------START ADMIN------------------------------ */

.control_panel{
	position:absolute;
	top:90px;
	left:0;
	background-color:#FFFFFF;
	width:100%;
	height:40px;
	z-index:3000;
}

.control_panel_header{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:90px;
	z-index:3000;
	background-color:#000099;
	height:38px;
	padding-top:52px;
	background-image:url(../../admin/editor/assets/img/header_bg.gif);
}

.control_panel_header a, a:visited, a:active{
	color:#000099;
}

.control_panel_header a:hover{
	text-decoration:none;
}

.control_panel_header a.on{
	display:block;
	float:left;
	background-image:url(../../admin/editor/assets/img/btn_tab_on_bg.gif);
	padding-top: 10px;
	color:#000099;
	/*font-weight:bold;*/
	width:93px;
	height:28px;
	text-decoration:none;
	text-align:center;
	font-size:12px;
	margin-left:2px;
}

.control_panel_header a.off{
	display:block;
	float:left;
	background-image:url(../../admin/editor/assets/img/btn_tab_off_bg.gif);
	padding-top: 10px;
	color:#fff;
	/*font-weight:bold;*/
	width:93px;
	height:28px;
	text-decoration:none;
	text-align:center;
	font-size:12px;
	margin-left:2px;
}
/*------------------------------------END ADMIN------------------------------- */	
	
/*--------------------------------------HEADER-------------------------------- */

#header{
	width:790px;
	height:190px;
	background-image:url(../img/header_bg.jpg);
	background-repeat:no-repeat;
	}
	#header #logo{
		position:absolute;
		top:25px;
		left:325px;
	}
	#header #logo img{
		border:none;
	}
	#header #ad_space{
		position:absolute;
		top:77px;
		left:177px;
		width:468px;
		height:60px;
		border:1px solid #cccccc;
		color:#ccc;
	}
	#header #on_air{
		position:absolute;
		top:25px;
		left:645px;
		color:#000099;
		text-align:center;
		}
		#header #on_air div{
			width:126px;
			height:39px;
			background-repeat:no-repeat;
			margin:5px 0 0 5px;
			padding:5px 0 0 0; 
			/*font-weight:bold;*/
		}
		#header #on_air div a{
			color:#000099;
			text-decoration:none;
		}
		#header #on_air div a:hover{
			text-decoration:underline;
		}
		#header #on_air div span{
			font-size:11px;
			color:#000099;
		}
		#header #on_air  a.listen{
			display:block;
			color:#000099;
			background-image:url(../img/btn_listen_pink.gif);
			background-repeat:no-repeat;
			padding-left:25px;
			width:88px;
			height:20px;
			/*font-weight:bold;*/
			text-decoration:none;
			margin:5px 0 0 23px;
			text-align:left;
		}
		#header #on_air  a:hover.listen{
			text-decoration:underline;
		}
	

/*-----------------------------------NAVIGATION------------------------------- */

	#header #navigation{
		position:absolute;
		top:150px;
		left:19px;
		width:754px;
		height:40px;
		background-image:url(../img/navigation_bg.gif);
		background-repeat:no-repeat;
		padding-left: 203px;
	}

	#header #navigation span {
		display: block;
		width: 0;
		height: 0;
		overflow: hidden;
		line-height:0;
	}


	#header #navigation #nav_1{
		height: 40px; width: 74px; overflow: hidden; display: block; float:left;
		background: url(../img/nav_1.gif) top left no-repeat;
	}
	
	#header #navigation #nav_2{
		height: 40px; width: 74px; overflow: hidden; display: block; float:left;
		background: url(../img/nav_2.gif) top left no-repeat;
	}
	
	#header #navigation #nav_3{
		height: 40px; width: 74px; overflow: hidden; display: block; float:left;
		background: url(../img/nav_3.gif) top left no-repeat;
	}
	
	#header #navigation #nav_4{
		height: 40px; width: 74px; overflow: hidden; display: block; float:left;
		background: url(../img/nav_4.gif) top left no-repeat;
	}
	
	#header #navigation #nav_5{
		height: 40px; width: 74px; overflow: hidden; display: block; float:left;
		background: url(../img/nav_5.gif) top left no-repeat;
	}
	
	#header #navigation #nav_6{
		height: 40px; width: 74px; overflow: hidden; display: block; float:left;
		background: url(../img/nav_6.gif) top left no-repeat;
	}
	
	#header #navigation #nav_7{
		height: 40px; width: 64px; overflow: hidden; display: block; float:left;
		background: url(../img/nav_7.gif) top left no-repeat;
	}
	
	#header #navigation #nav_8{
		height: 40px; width: 58px; overflow: hidden; display: block; float:left;
		background: url(../img/nav_8.gif) top left no-repeat;
	}
	
	#header #navigation #nav_9{
		height: 40px; width: 74px; overflow: hidden; display: block; float:left;
		background: url(../img/nav_9.gif) top left no-repeat;
	}
	
	
 
	#header #navigation #nav_1:hover, #header #navigation #nav_2:hover, #header #navigation #nav_3:hover, #header #navigation #nav_4:hover, 
	#header #navigation #nav_5:hover, #header #navigation #nav_6:hover, #header #navigation #nav_7:hover, #header #navigation #nav_8:hover,
	#header #navigation #nav_9:hover
	{
		background-position: bottom left;
	}
	
	#header #navigation #nav_1.current, #header #navigation #nav_2.current, #header #navigation #nav_3.current, #header #navigation #nav_4.current, 
	#header #navigation #nav_5.current, #header #navigation #nav_6.current, #header #navigation #nav_7.current, #header #navigation #nav_8.current,
	#header #navigation #nav_9.current{
		background-position: top right;
	}
	
	#header #navigation #nav_1.current:hover, #header #navigation #nav_2.current:hover, #header #navigation #nav_3.current:hover, #header #navigation #nav_4.current:hover, 
	#header #navigation #nav_5.current:hover, #header #navigation #nav_6.current:hover, #header #navigation #nav_7.current:hover, #header #navigation #nav_8.current:hover, #header #navigation #nav_9.current:hover{
		background-position: top right;
	}

/*---------------------------------------BODY--------------------------------- */

#body{

}

h1{
	font-size:22px;
	/*font-weight:bold;*/
	color:#000099;
	height:130%;
	margin-bottom:5px;
	padding-bottom:0;
}

h2{
	font-size:18px;
	/*font-weight:bold;*/
	color:#000099;
	margin-bottom:5px;
	padding-bottom:0;
}

h3{
	font-size:16px;
	margin-bottom:5px;
	padding-bottom:0;
}

hr{
	color: #000099;
	background-color: #000099;
	height: 1px;
	border:none;
	width:100%;
}


#trans_content{
	/*padding:0 9px 0 11px;*/
	position:relative;
	width:790px;
	/*filter: alpha(opacity=75);
	filter: progid:DXImageTransform.Microsoft.Alpha(opacity=25);
	-moz-opacity: 0.25; opacity:0.25;
	background-color:#FFFFFF;*/
}

#trans_bottom{
	height:40px;
}

img {
	behavior:	url("http://www.ayyamfm.jo/pngbehavior.htc");
}

/*---------------------------------------STARS--------------------------------- */

.star-rating,
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus,
.star-rating .current-rating{
background: url(../img/star.gif) left -1000px repeat-x;
}
.star-rating{
float:right;
position:relative;
width:125px;
height:25px;
overflow:hidden;
list-style:none;
margin:0;
padding:0;
background-position: left top;
border-top:2px solid #dfdfdf;
border-bottom:3px solid #dfdfdf;
}
.star-rating li{
display: inline;
}
.star-rating a,
.star-rating .current-rating{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
background-position: left bottom;
}
.star-rating a.one-star{
width:20%;
z-index:6;
}
.star-rating a.two-stars{
width:40%;
z-index:5;
}
.star-rating a.three-stars{
width:60%;
z-index:4;
}
.star-rating a.four-stars{
width:80%;
z-index:3;
}
.star-rating a.five-stars{
width:100%;
z-index:2;
}
.star-rating .current-rating{
z-index:1;
background-position: left center;
}

.inline-rating{
display:-moz-inline-block;
display:-moz-inline-box;
display:inline-block;
vertical-align: middle;
}

/*---------------------------------------STARS END--------------------------------- */

#content{
	position:absolute;
	width:750px;
	top:190px;
	left:0;
	margin:0 0px 0 18px;	
	color:#000; 
	padding:0 10px 10px 10px;
	}
	.homepage_content{
		/*background-image:url(../img/cont1ent_bg.gif);
		background-repeat:repeat-x;*/
	}
	
	.pad{
		padding:5px 5px 5px 5px;
	}
	
	/*---------------------------------------SUB NAVIGATION FOR CONTENT--------------------------------- */
	
	#content #sub_nav{
		height:24px;
		background-image:url(../img/sub_nav_bg.gif);
		background-repeat:no-repeat;
		color:#ffff00;
		text-align:center;
		/*font-weight:bold;*/
		padding:6px 0 0 0;
		margin-bottom:10px;
		}
		#content #sub_nav a{
			color:#FFFFFF;
			padding:0 5px 0 5px;
			text-decoration:none;
		}
		#content #sub_nav a:hover{
			text-decoration:underline;
		}
		#content #sub_nav a.current{
			color:#ffff00;
		}
	
	/*-------------------------------------END SUB NAVIGATION FOR CONTENT------------------------------- */
	
	.pink{
		color:#000;
	}
	
	#content #flashheading{
		margin-bottom:10px;
		margin-right:20px;
	}
	
		#content .heading{
		display:block;
		height:62px;
		padding:22px 0 0 20px;
		width:100%;
		background-image:url(../img/heading.jpg);
		background-repeat:no-repeat;
		font-size:32px;
		font-weight:normal;
		margin:0;
		color:#000099;
		text-align:right;
		
	}
	
	#content #banner{
		background-image:url(../img/banner.jpg);
		float:right;
		width:574px;
		height:206px;
		margin:0 6px 10px 0;
		
	}
	
	#content #news_highlight{
		float:left;
		width:554px;
		
		margin:0 6px 10px 0;
		background-color:#000099;
		color:#000099;
		font-size:15px;
		padding:10px;
		background-image:url(../img/news_heading_bg.gif);
		background-repeat:repeat-x;
	}
	
	#news_highlight_big{
		float:left;
		width:554px;
		height:420px;
		margin:0 6px 10px 0;
		background-color:#000099;
		color:#FFFFFF;
		font-size:15px;
		padding:10px;
		background-image:url(../img/news_heading_bg.gif);
		background-repeat:repeat-x;
	}

	
	#content #news_highlight h1{
		height:auto;
		padding:0;
		margin:0 0 10px 0;
		width:auto;
		color:#000099;
				
	}
	
	#content #news_highlight_big h1{
		height:auto;
		padding:0;
		margin:0 0 10px 0;
		width:auto;
		color:#990066;
	}
	
	#content #news_highlight .news_heading{
		font-size:24px;
		/*font-weight:bold;*/
	}
	
	#news_highlight a{
		color:#FFFFFF;
	}
	
	#content #news_highlight_big a{
		color:#FFFFFF;
	}
	
	#content #search_results{
		float:left;
		width:554px;
		margin:0 6px 10px 0;
		background-color:#000099;
		color:#FFFFFF;
		font-size:15px;
		padding:10px;
		background-image:url(../img/news_heading_bg.gif);
		background-repeat:repeat-x;
	}
	
	#content #search_results a{
		color:#FFFFFF;
	}
	
	#content .panel_heading{
		color:#ffffff;
	}
	
		#content #news_highlight_detail{
			float:left;
			width:554px;
			margin:0 6px 10px 0;
			background-color:#000099;
			color:#000099;
			font-size:15px;
			padding:10px;
			background-image:url(../img/news_heading_bg.gif);
		}

		#content #news_highlight_detail h1{
			height:auto;
			padding:0;
			margin:0 0 10px 0;
			width:auto;
			color:#000099;
		}
		
		#content #news_highlight_detail .news_heading{
			font-size:24px;
			/*font-weight:bold;*/
		}
		
		#content #news_highlight_detail a{
			color:#FFFFFF;
		}
			
	
	#content #request{
		float:left;
		width:170px;
		height:206px;
		margin:0 0 10px 0;
		background-image:url(../img/request_bg.gif);
		background-position:bottom;
		background-repeat:no-repeat;
		
		}
		#content #request form{
			padding:0;
			margin:0;
		}
		#content #request div{
			padding:5px;
		}
		
		#content #request h2{		
			padding: 28px 0 0 0;
			margin:0;
			overflow: hidden;
			background-repeat: no-repeat;
			height: 0px !important;
			height /**/:28px;
			cursor:pointer;
		}
		
		#content #request h2{		
			background-image: url(../img/h2_request.gif);
		}
		#content #request .input{
			/*background-image:url(../img/textbox_bg.gif);*/
			background-color:#ffff00;
			color:#000099;
			border:0px;
			padding:4px 3px 0 3px;
			margin: 0 0 5px 6px;
			width:143px;
			height:18px;
			font-size:11px;
		}
		#content #request .submit{
			float:right;
			margin:5px 4px 0 0;
		}

	#content #contact_dj{
		float:right;
		width:170px;
		height:206px;
		margin:0 0 10px 0;
		background-image:url(../img/contact_dj_bg.gif);
		background-position:top;
		background-repeat:no-repeat;
		
		}
		#content #contact_dj form{
			padding:0;
			margin:0;
		}
		#content #contact_dj div{
			padding:5px;
		}
		
		#content #contact_dj h2{		
			padding: 45px 0 0 0;
			margin:0;
			overflow: hidden;
			background-repeat: no-repeat;
			height: 0px !important;
			height /**/:45px;
			cursor:pointer;
		}
		
		#content #contact_dj h2{		
			background-image: url(../img/h2_contact_dj.gif);
		}
		#content #contact_dj .input{
			background-color:#ffff00;
			color:#000099;
			border:0px;
			padding:4px 3px 0 3px;
			margin: 0 0 5px 6px;
			width:143px;
			height:18px;
			font-size:11px;
		}
		#content #contact_dj .submit{
			float:right;
			margin:5px 4px 0 0;
		}

	
	#content #col_1{
		float:left;
		width:243px;
		margin:0 10px 0 0;
	}
	#content #col_2{
		float:left;
		width:243px;
		margin:0 10px 0 0;
	}
	#content #col_3{
		float:left;
		width:243px;
		margin:0 0 0 0;
	}
	#content #col_4{
		float:left;
		width:243px;
		margin:0 0 0 0;
	}
	
	#content .panel_item{	// White title
		background-repeat:repeat-x;
		background-position:bottom;
		/*height:50px;*/
		width:222px;
		margin:10px;
		padding:0;
		/*font-weight:bold;*/
		color:#FFFFFF;
		border-bottom:#666 1px solid;
		
		}
		#content .panel_item img{
			float:left;
			margin-right:5px;
			border:none;
			background-color:#000099;
		}
		#content .panel_item .panel_info{
			background-color:#000099;
			background-repeat:repeat-x;
		}
		#content .panel_item .panel_info a{
			color:#ffff00;
		}
		#content .panel_item .panel_info a:hover{
			text-decoration:none;
		}
		#content .panel_item .panel_info .time{
			color:#666666;
		}
	
	#content .panel_footer{
		background-image:url(../img/panel_breaker_grey.gif);
		background-repeat:no-repeat;
		text-align:center;
		padding-top:5px;
		margin-bottom:5px;
		}
		#content .panel_footer a{
			color:#ffff00;
			text-decoration:underline;
			/*font-weight:bold;*/
		}
		#content .panel_footer a:hover{		
			text-decoration:none;
		}
	
	#content .panel_grey{
		background-position:bottom;
		background-repeat:no-repeat;
		background-color:#c1c0c0;
		padding:5px 0 5px 0;
		margin:0 0 10px 0;
		background-color:#000099;
	}
	
	#content .panel_pink{
		
		background-position:bottom;
		background-repeat:no-repeat;
		background-color:#000099;
		padding:5px 0 5px 0;
		margin:0 0 10px 0;
		margin:0 0 10px 0;
	}
	
	#col_1 h2, #col_2 h2, #col_3 h2{		
		padding: 33px 0 0 0;
		margin:0;
		overflow: hidden;
		background-repeat: no-repeat;
		height: 0px !important;
		height /**/:33px;
		cursor:pointer;
	}
	
	#content h2.entertainment{		
		background-image: url(../img/h2_entertainment.gif);
	}
	
	#content h2.on_air{	 
		background-image: url(../img/h2_on_air.gif);
	}
	
	#content h2.shop{		
		background-image: url(../img/h2_shop.gif);
	}
	
	#content h2.catch{		
		background-image: url(../img/h2_catch.gif);
	}
	
	#content h2.khas{		
		background-image: url(../img/h2_khas.gif);
	}
	
	#content h2.like{
		background-image: url(../img/h2_like.gif)
	}
	
	#content h2.my_spin{		
		background-image: url(../img/h2_my_spin.gif);
		padding: 31px 0 0 0;
		height /**/:31px;
	}
	
	#content h2.five_word_weather{		
		background-image: url(../img/h2_5_word_weather.gif);
		padding: 31px 0 0 0;
		height /**/:31px;
	}
			
	#content h2.spinis{		
		background-image: url(../img/h2_spinis.gif);
		padding: 31px 0 0 0;
		height /**/:31px;
	}
	
	#content h2.podcasts{		
		background-image: url(../img/h2_podcasts.gif);
		padding: 31px 0 0 0;
		height /**/:31px;
	}
	/* ENTERTAINMENT */
	#content h2.movies{		
		background-image: url(../img/h2_movies.gif);
	}
	
	#content h2.music{		
		background-image: url(../img/h2_music.gif);
	}
	
	#content h2.games{		
		background-image: url(../img/h2_games.gif);
	}

	#content h2.dvds{		
		background-image: url(../img/h2_dvds.gif);
	}
	
	#content h2.pubs_and_clubs{		
		background-image: url(../img/h2_pubs_and_clubs.gif);
	}

	#content .left{
		float:right;
		width:574px;
		margin-right:6px;
		overflow:hidden;
		margin-bottom:10px;
		}
		
	div.panel {
	  /*background: url(../img/tr.gif) no-repeat top right;*/  padding:0;
	}
	div.panel div.curve {
	  /*background: transparent url(../img/tl.gif) no-repeat top left;*/ position:relative;
	}
	div.panel div div.curve {
	  /*background: transparent url(../img/br.gif) no-repeat bottom right;*/ position:relative;
	}
	div.panel div div div.curve {
	  /*background: transparent url(../img/bl.gif) no-repeat bottom left;*/ position:relative;
	  padding: 10px; 
	}	
	/*div.panel div div div div{
		background:none;
		padding: 0;
	}*/
	
	.curve{
		color:#000000;
	}
	
	.panel a{
		color:#000099;
	}
	.curve a:hover{
		text-decoration:none;
	}
	
/*---------------------------------------FOOTER--------------------------------- */

#footer{
	width:100%;
	height:45px;
	text-align:center;
	margin-top:10px;
	color:#999999;
	}
	#footer a{
		color:#000099;
		text-decoration:none;
		padding:0 5px 0 5px;
	}
	#footer .navigation a{
		color:#ffffff;
	}
	#footer a:hover{
		text-decoration:underline;
	}
	#footer .navigation{
		background-image:url(../img/footer_bg.gif);
		background-repeat:repeat-x;
		height:27px;
		margin-bottom:5px;
		padding-top:8px;
		/*font-weight:bold;*/
	}
	
	
/* Used to clear floated divs */
p.clear { clear: both;   margin: 0; padding: 0;	border:0; font-size:0;}