/*  
	COLORS
    
	chrome blue:		#334352
	dark blue:  		#0E161E
	highlight blue: 	#00a8ff	
*/

body { background-color: #fff; color: #333; cursor:default;}

body, p, ol, ul, td {
  font-family: "Lucida Grande", verdana, arial, helvetica, sans-serif;
  font-size: 11px;
  line-height: 18px;
  background-color:#334352;
  color:#fff;
  margin:0;
  padding:0;
}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

a { color: #fff; text-decoration:none; 	cursor:pointer;}
a:visited { color: #fff; }

/*a img { border: none; }*/

small { font-size:10px;}

.submit_button, .link_button {
	height:32px;
	width:100px;
	color:#fff;
	text-align:center;
	background:url(../images/bar.jpg) repeat-x 0 -4px;	
	border:2px solid #334352;
}

.submit_button:hover, .link_button:hover {
	border:2px solid #00a8ff;
}

.link_button {
	font-size:12px;
	font-weight:bold;
	padding-top:6px;
	height:26px;
}

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#errorExplanation {
  margin:0;
  width:260px;
  background-color:#fff;
}

#errorExplanation h2 {
	display:none;
}

#errorExplanation p {
  color: #000;
  margin: 0;
  padding: 0;
  background-color:#fff;
}

#errorExplanation ul li {
  font-size: 11px;
  list-style: none;
  text-indent:10px;
  background-color:#fff;
	color:#900;
	margin:0;
}

/*  Progress Bar
---------------------------------*/

div.uploadStatus {
  margin: 5px;
}

div.progressBar {
  margin:5px;
}

div.progressBar div.border {
  background-color: #fff;
  border: 1px solid gray;
  width: 100%;
}

div.progressBar div.background {
  background-color:#333;
  height:18px;
  width:0%;
}

/*  Lists
---------------------------------*/

ul { 
	list-style-type: none;
	padding-left:0;
}

/*  Search
---------------------------------*/

.search { 
	width:245px;
	height:45px;
	text-align:right;
}

.search_box {
	margin:10px 0px 10px 10px;
	padding:5px 0 0 25px;
	width:215px;
	height:21px;
	color:#444;
	font-size:15px;
	border:0;
	background:#fff url("../images/search.jpg") top left no-repeat;
	outline:none;
}


.search_label {
	position:absolute;
	top:12px;
	left:0;
	color:#333;
	font-weight:bold;
	font-size:12px;
}

.ajax_loader, .ajax_loader2 {
	position:absolute;
	top:300px;
	left:760px;
	width:40px;
	height:40px;
	background:url("../images/ajax-loader.gif") no-repeat;
}

.ajax_loader2 {
	top:535px;
}

/*  Layout
---------------------------------*/

.header {
	background:url(../images/background.jpg) repeat-x top left;
	height:56px;
	margin:0;
}


/*  Video Player
---------------------------------*/
.video {
	background:url(../images/player.jpg) repeat-x top left;
	height:632px;
	width:960px;
	position:absolute;
	top:40px;
	left:70px;
}

.video_left {
	background:url(../images/player_left.jpg) repeat-x top left;
	height:632px;
	width:20px;
	position:absolute;
	top:40px;
	left:50px;
}

.video_right {
	background:url(../images/player_right.jpg) repeat-x top left;
	height:632px;
	width:20px;
	position:absolute;
	top:40px;
	left:1030px;
}

/*  Chrome
---------------------------------*/

.chrome {
	/*background:url(../images/chrome.jpg) repeat-x top left;*/
	height:50px;
	width:920px;
	position:absolute;
	top:40px;
	left:60px;
}

.chrome_left {
	/*background:url(../images/chrome_left.jpg) repeat-x top left;*/
	height:50px;
	width:20px;
	position:absolute;
	top:40px;
	left:50px;
}

.chrome_right {
	/*background:url(../images/chrome_right.jpg) repeat-x top left; */
	height:50px;
	width:20px;
	position:absolute;
	top:40px;
	left:980px;
}

/*  Related Videos
---------------------------------*/

.related {
	height:400px;
	width:490px;
	position:absolute;
	top:75px;
	left:470px;
	background-color:#000;
	margin:0;
	padding:0;
}

/*  Scroller
---------------------------------*/

.scroller2 {
	background:url(../images/scroller.jpg) repeat-x top left;
	height:200px;
	width:765px;
	position:absolute;
	top:510px;
	left:70px;
}

.scroller_left {
	background:url(../images/scroller_left.jpg) repeat-x top left;
	height:200px;
	width:20px;
	position:absolute;
	top:510px;
	left:50px;
}

.scroller_right {
	background:url(../images/scroller_right.jpg) repeat-x top left;
	height:200px;
	width:20px;
	position:absolute;
	top:510px;
	left:835px;
}

.ytplayer {
	position:absolute;
	top:75px;
	height:360px; 
	width:460px;	
	background-color:#0E161E;
}

#playerid {
	background-color:#000;
}
.ytapiplayer {
	position:absolute;
	top:36px;
	height:318px; 
	width:460px;
	z-index:100;
	background-color:#0E161E;
}


.quicklist {
	position:absolute;
	top:429px;
	left:0px;
	height:150px;
	width:460px;
	background-color:#0E161E;
}

/*  Results
---------------------------------*/
ul.container {
	position:absolute;
	top:36px;
	left:0px;
	height:474px;
	width:350px;
	overflow-y:auto;
	overflow-x: hidden;
	list-style-type:none;
	padding:0;
	background:#000;
}

ul.container li {
	z-index:100;
	margin:0px;
	padding:0px;
	border:0px;
	line-height:0;
	height:100px;
}

ul.container li a div.outerResult {
	background:url(../images/results_map.jpg) 0 0;
	height:100px;
	width:100%;
}

ul.container li a.active-tab div.outerResult  {
	background:url(../images/results_map.jpg) 0 -100px;
	height:100px;
	width:100%;
}

.outerResult {
	margin:0;
	padding:0;
}

.innerResult {
	padding:10px;
}

.innerResult .image {
	float:left;
	width:130px;
}

.innerResult .info {
	float:left;
	width:180px;
	line-height:1.0em;
	text-transform: capitalize;
}

.scrollerResults ul li {
	width:150px;
	height:143px;
  float:left;
  display:inline;
	font-size:12px;
 	font-weight:bold;
	color:#fff;
	padding-top:7px;
}

.scroller .info {
	text-transform: capitalize;
}

.outerCell {
	width:150px;
	height:120px;
	float:left;
}

.innerCell {
	width:150px;
	font-size:11px;
}

/*  Thumbnails
---------------------------------*/

.videoOuter {
	width:124px;
}

.videoInner { 
	border:2px solid #000;
	height:72px;
	width:120px;
	overflow:hidden;
}

.videoInner:hover { 
	border:2px solid #00a8ff;
	height:72px;
	width:120px;
	overflow:hidden;
}

.videoInner img {
	margin-top:-10px;
}

/*  Header
---------------------------------*/

.header {
	background:url(../images/background.jpg) repeat-x top left;
}

.headerBar, .tableHeaderBar {
	height:36px;
	width:350px;
	background:url(../images/bar.jpg) repeat-x top left;
	margin:0;	
}

.tableHeaderBar td {
	background:url(../images/bar.jpg) repeat-x top left;		
	cursor:pointer;	
}

.tableHeaderBar td.spacer {
	width:10px;
}

.tableHeaderBar td.spacerRight {
	width:220px;
}


.tableHeaderBar td.headerItem {
	width:115px;
	text-align:center;
	margin-right:5px;
	font-size:11px;
}

.tableHeaderBar td.headerItem:hover {
	background:url(../images/menu_active.gif) no-repeat;	
	cursor:pointer;
}

.tableHeaderBar td.selected {
	background:url(../images/menu_active.gif) no-repeat; 
	cursor:pointer;
}


.headerBar h1, .tableHeaderBar h1 {
	font-size:13px;
	font-weight:bold;
	text-indent:10px;
	padding:8px 0 8px 0;
	margin:0;
}

/*  Browser history
---------------------------------*/

#yui-history-iframe {
  position:absolute;
  top:0; left:0;
  width:1px; height:1px; /* avoid scrollbars */
  visibility:hidden;
}

#demo { position:absolute; top:5px; left:200px; }

/*  Menu
---------------------------------*/
.menu {
	margin-bottom:36px;
}
.menu ul{
	margin:0;
	padding:0;
}
.menu ul li{
	width:156px;
	height:36px;
	text-align:center;
  	float:left;
  	display:inline;
  	margin-right:1px;
	font-size:12px;
 	font-weight:bold;
	padding-top:7px;
	background:url(../images/results_map.jpg) 0 -200px;
}

.menu ul li.first {
	text-align:center;
	margin-left:1px;
}

.menu ul li.selected { }

.menu ul li:hover { background:url(../images/results_map.jpg) 0 -236px; }	



/*  Controls
---------------------------------*/
.controls {
	position:relative;
	top:0px;
	left:0px;
	margin-bottom:10px;
}

.controls ul{
	margin:0;
	padding:0;
}

.controls ul li {
	width:45px;
	height:70px;
	text-align:center;
  	float:left;
  	display:inline;
  	margin-right:1px;
	font-size:12px;
 	font-weight:bold;
	color:#333;	
}

.controls ul li.first {
	text-align:center;
	margin-left:0px;
}

.controls ul li.selected { }

.controls ul li.play { background:url(../images/controls_map.jpg) no-repeat -60px 0; width: 60px;  cursor:pointer; }
.controls ul li.play:active { background:url(../images/controls_map.jpg) no-repeat -60px -70px;  }	

.controls ul li.pause { background:url(../images/controls_map.jpg) no-repeat; width: 60px; 	cursor:pointer; }
.controls ul li.pause:active { background:url(../images/controls_map.jpg) no-repeat 0px -70px; }

.controls ul li.rewind { background:url(../images/controls_map.jpg) no-repeat -120px 0px; cursor:pointer; }
.controls ul li.rewind:active { background:url(../images/controls_map.jpg) no-repeat -120px -71px; }

.controls ul li.forward { background:url(../images/controls_map.jpg) no-repeat -165px 0px; 	cursor:pointer; }
.controls ul li.forward:active { background:url(../images/controls_map.jpg) no-repeat -165px -70px; }

.controls ul li.itunes { background:url(../images/itunes.jpg) no-repeat; }
.controls ul li.itunes:hover { background:url(../images/itunes.jpg) no-repeat 0px -45px; }

.controls ul li.plus { background:url(../images/plus.jpg) no-repeat; }
.controls ul li.plus:hover { background:url(../images/plus.jpg) no-repeat 0px -45px; }

.controls ul li.minus { background:url(../images/minus.jpg) no-repeat; }
.controls ul li.minus:hover { background:url(../images/minus.jpg) no-repeat 0px -45px; }

.controls ul li.volume {
	width:110px;	
}
.controls ul li.volume_icon {
	width:24px;
	margin-top:15px;
	margin-right:10px;
}

.controls ul li.volume_icon div {
	margin:8px 0 0 10px;
	width:22px;
	height:22px;
	background:url(../images/audio_map.jpg) no-repeat;
}

* html .controls ul li.volume_icon div
{
  width: 22px;
  w\idth: 15px;
}

.controls ul li.timer { 
	font-family:arial, verdana;
	font-size:13px;
	font-weight:normal;
	background:url(../images/timer.jpg) no-repeat; 
	width:105px; 
	padding-top:13px; 
	color:#fff; 	
}

.controls ul li.timer .red {
	color:#f00;
}

.controls ul li.display_left {
	width:50px;
	background:url(../images/display_left.jpg) no-repeat;
	margin:0;
}

.controls ul li.display { 
	width:300px;
	background:url(../images/display2.jpg) repeat-x;
	margin:0;
}

.controls ul li.display_right {
	width:50px;
	background:url(../images/display_right.jpg) no-repeat;
}

.controls ul li.display_left div, .controls ul li.display_right div {
	padding:33px 0 0 0;
	font-size:11px;
	color:#fff;	
}

.controls ul li.display_right div {
	color:#C00;
}

.controls ul li.search {
	width:245px;
	margin-top:10px;
}

.repeat_off, .repeat_on, .fullscreen {
	position:absolute;
	top:622px;
	left:70px;
	width:25px;
	height:25px;
	background:url(../images/mini_controls_map.jpg) 0 0 no-repeat;
}

.repeat_on:active {
	background:url(../images/mini_controls_map.jpg) 0 -25px no-repeat;
}

.repeat_off {
	background:url(../images/mini_controls_map.jpg) 0 -50px no-repeat;
}

.repeat_off:active {
	background:url(../images/mini_controls_map.jpg) 0 -75px no-repeat;
}

.fullscreen {
	background:url(../images/mini_controls_map.jpg) 0 -100px no-repeat;
	left:100px;
}

.fullscreen:active {
	background:url(../images/mini_controls_map.jpg) 0 -125px no-repeat;
}


/*  Progress Bar
---------------------------------*/

.display table, .display td {
	background:transparent;
}

.display table {
	margin-top:15px;
}

.progressBarMap {		
	width:300px; 
	cursor:pointer;	
	margin:0;
	padding:0;	
	background:url('../images/display_bg.jpg') top left repeat-x;		
}

.progressBarOuter {
	width:1px; 
	height:10px;  
	/*background-color:#FEC1D3;*/
	background:url('../images/display_buffer.jpg') top left repeat-x;
	margin:0;
	padding:0;
}

.progressBarInner {	
	height:10px;
	width:1px; 
    /* background-color:#C03; */
	background:url('../images/display_play.jpg') top left repeat-x;	
	margin:0;
	padding:0;
}

.displayHeader {
	color:#fff;
	margin-top:15px;
	font-size:11px;
	font-weight:bold;
	width:250px;
}

/*  Pagination
---------------------------------*/

.next {
	position:absolute;
	top:550px;
	left:810px;
	height:115px;
	width:28px;
	background:url(../images/next.jpg) no-repeat;
}

.next:hover {
	background:url(../images/next_hover.jpg) no-repeat;
}

.previous {
	position:absolute;
	top:550px;
	left:65px;
	height:115px;
	width:28px;
	background:url(../images/previous.jpg) no-repeat;
}

.previous:hover {
	background:url(../images/previous_hover.jpg) no-repeat;
}



/*  Font Headers
---------------------------------*/

h4 {
	color:#333;
	margin-top:5px;
	font-size:12px;
	font-weight:normal;
}

/*  Logo
---------------------------------*/
.logo {
	margin-left:30px;
	height:42px;
	width:219px;
	background:#000 url("../images/logo.jpg") no-repeat;	
}


.like {
	position:absolute;
	top:10px;
	left:320px;
	width:300px;
	text-align:right;
}


.welcome {
	position:absolute;
	top:10px;
	left:720px;
	width:300px;
	text-align:right;
}

.welcome a:hover {
	text-decoration:underline;
}


/*  Login
---------------------------------*/
.notice .head{
	font-weight:bold;
	width:50px;
	font-family:arial;
	padding:2px;
	font-size:11px;
	color:#4B7A98;
	background:#D5EBF9;	
	filter:alpha(opacity=95);
	opacity:0.95;
}

.notice div{
	width:50px;
	font-family:arial;
	font-size:11px;
	padding:2px;
	color:#fff;
	font-weight:bold;
	background:#0E161E;
	filter:alpha(opacity=80);
	opacity:0.80;	
	font-weight:bold;
	text-align:center;
}


/*  Redbox
---------------------------------*/

#RB_overlay {
  position: absolute;
  z-index:100;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height:100%;
  background-color: #000;
  opacity: 2.0;
  filter: alpha(opacity=20);
}

.logo_glow {
	position:absolute; 
	top:50px; 
	left:430px;
	z-index:150;
	background:url(../images/logo_glow.jpg) 0 0 no-repeat;
	width:200px;
	height:42px;
  	opacity: 2.0;
  	filter: alpha(opacity=20);	
}

.logo_glow:hover {
	background:url(../images/logo_glow.jpg) 0 -44px no-repeat;
	cursor:pointer;
}

/*  Footer
---------------------------------*/
.footer {
	text-align:center;
	width:910px;
	position:absolute;
	top:657px;
	font-size:10px;
	left:70px;
	margin:0;
	color:#959CA2;
}


/*  starts
---------------------------------*/
div.workarea { padding:10px; float:left }
div#ul3 { cursor: move; };

ul {
	text-transform:capitalize;
}

ul.searchlist  {
	overflow: auto;
    width: 330px; 
    height:230px;
    border: 1px solid gray;
    list-style: none;
    margin:0;
    padding:0;
	text-align: center;
}

ul.draglist  {
	overflow: auto;
    width: 430px; 
    height:310px;
    list-style: none;
    margin:0;
    padding:0;
	text-align: center;
	overflow: none;
}

ul.draglist li {
	padding:0;
}


ul.draglist_alt { 
    position: relative;
    width: 200px; 
    list-style: none;
    margin:0;
    padding:0;
    padding-bottom:30px;
}

ul.draglist_alt li {
    margin: 1px;
    cursor: move; 
}


#ul1  {
	overflow: auto;
    width: 490px; 
    height:320px; 
    height:470px;
/* 	height:300px; */
    background: #0E161E;
    list-style: none;
    margin:0;
    padding:0;
	text-align: center;
	color:#fff;
}

/*
ul.videos li {
	overflow: hidden;
	float:left;
	padding:5px;
    cursor: move;
	width: 140px;
	height: 145px;			
	color:#fff;
} 
*/

#ul1 li, #ul3 li {
	overflow: hidden;
	float:left;
	padding:5px;
    cursor: move;
	width: 107px;
	height: 95px; 			
	color:#fff;
}

* html #ul1 li
{
  width: 105px;
  height: 110px;
  w\idth: 115px;
  h\eight: 105px;
}


#ul1 li img, #ul3 li img{
	height: 60px;
	width: 90px;
}

.relatedVideos {
	position:absolute;
	top:470px;
	left:540px;
	height:150px;
	width:490px;
	background-color:#0E161E;
}

ul.playlistBottom,  #ul3, .similarArtists {
	position:relative;
	background:#0E161E;
	left:0;	
	overflow: auto;
    width: 460px; 
    height:116px;
    list-style: none;
    margin:0;
    padding:0;
	text-align: center;
}

#ul3, .similarArtists {
	width:490px;
}

ul.playlistBottom li, #ul3 li{
	overflow: hidden;
	float:left;
	padding:4px;
    cursor: move;
	height: 48px;
	width: 66px;
}

* html ul.playlistBottom li
{
  height: 53px;
  width: 65px;  
  h\eight: 48px;
  w\idth: 74px;
}

* html ul.playlistBottom li
{
  width: 65px;
  w\idth: 74px;
}

ul.playlistBottom li img{
 height: 45px;
 width: 60px;
}

.draglist_small img { 
    position: relative;
    padding-bottom:30px;
}
.draglist_small img{
	height: 45px;
	width: 60px;
}
.draglist_small li {
	  cursor: move; 
}

li.list1 {
    background-color: #D1E6EC;
    border:1px solid #7EA6B2;
}

li.list2 {
    background-color: #D8D4E2;
    border:1px solid #6B4C86;
}

#ul3 img, #ul2 img, #ul1 img{
	border: 2px solid #000;
}

#slider-bg {
        position: relative;
		top:23.5px;
        background:url('../images/slider_bg.jpg') no-repeat;
        height:28px;
        width:85px; 
		margin-right:20px;
		padding:0;
		cursor:hand;
}

#slider-thumb {
        cursor:hand;
        position: absolute;
        top: 0px;
}

/*  Playlist 
---------------------------------*/

.dragAndDrop, .messageBox {
	position:absolute;
	top:500px;
	left:70px;
	font-size:20px;
	color:#CBCED1;
	letter-spacing:-0.05em;
	position:absolute;
	height:50px;
	text-align:center;
	width:320px;
}

.messageBox {
	top:240px;
	left:560px;	
}

.dragAndDrop div, .messageBox div{
	font-size:15px;
	color:#ccc;
	margin-top:10px;
}

.dragAndDrop div a, .messageBox div a {
	text-decoration:underline;
}

ul.draglist_alt li img,
#ul3 li.active-video img, #ul2 li.active-video img, #ul1 li.active-video img,
#ul3 li.active-video a:hover img, #ul2 li.active-video a:hover img, #ul1  li.active-video  a:hover img{ 
	border:2px solid #D479D6;
}


ul.draglist_alt li a:hover img, #ul3 a:hover img, #ul2 a:hover img, #ul1  a:hover  img{ 
	border:2px solid #09c; 
}

ul#ul1 {
	margin-bottom:0;
}

ul#ul1 li.nextprev {
	width:450px;
	font-size:14px;
	font-weight:bold;
 	height:30px;
	border:1px solid #fff;
}

/*  Tooltip 
---------------------------------*/

#tt {font:11px/1.5 Verdana, Arial, Helvetica, sans-serif; }
#text {margin:50px auto; width:500px}
.hotspot { padding-bottom:1px; color:#D5EBF9; background:#4B7A98; cursor:pointer}

#tt {position:absolute; display:block; }
#ttcont {display:block; padding:2px 12px 3px 7px; margin-left:5px; color:#D5EBF9; background:#4B7A98;}