/*
    All intellectual property rights in this Software throughout the world belong to UK Radioplayer, 
    rights in the Software are licensed (not sold) to subscriber stations, and subscriber stations 
    have no rights in, or to, the Software other than the right to use it in accordance with the 
    Terms and Conditions at www.radioplayer.co.uk/terms. You shall not produce any derivate works 
    based on whole or part of the Software, including the source code, for any other purpose other 
    than for usage associated with connecting to the UK Radioplayer Service in accordance with these 
    Terms and Conditions, and you shall not convey nor sublicense the Software, including the source 
    code, for any other purpose or to any third party, without the prior written consent of UK Radioplayer.

    Document   : mystations.css
    Description: styling MyStations overlay
*/

/**
 *
 * Container
 *
 */

#mystations {
	display:none;
	overflow:hidden;
	padding-bottom:50px;
}

#my-station-controls {
	text-align:left;
	height:28px;
}

/**
 *
 * Controls section
 *
 */

#my-station-controls .stations-added {
	float:left;
	padding-left:5px;
	padding-top:8px;
	font-size:1.15em;
}

#my-station-controls .stations-added .highlight {
    font-weight:bold;
}

#my-station-controls .close {
    float:right;
    padding-top:8px;	
}

#my-station-controls .close-station a {
    padding-right:18px;
    cursor:pointer;
    background: transparent url(../img/icon-close-btn.png) 100% 0 no-repeat;
}

#my-station-controls .close-station a:hover {
    text-decoration:underline;
}


/**
 *
 * Add / Already Added / Full
 *
 */

#my-station-controls .add {
	position:absolute;
	left:130px;
	top:4px;
	z-index:950;
}

#my-station-controls .add-station {
	position:relative;
	border:none;
	height:20px;
	width:54px;
	background:transparent url(../img/add-button.png) 0 0 no-repeat;
	display:block;
	margin-top:3px;
	cursor:pointer;
}

#my-station-controls .add-station:hover, 
#my-station-controls.add-station:focus {
	background-position: 0 -20px;
}

#my-station-controls .add-station .add-button-content {
	visibility:hidden;
}

#my-station-controls .already-added {
    background: transparent url(../img/added.png) 0 0 no-repeat;
	cursor:default;
	height:20px;
	width: 98px;
	display:block;
	margin-top:3px;
	text-indent:-2000px;
}

#my-station-controls .full {
    background: transparent url(../img/full.png) 0 0 no-repeat;
	cursor:default;
	height:20px;
	width: 51px;
	display:block;
	margin-top:5px;
	text-indent:-2000px;
}


/**
 *
 * Edit / Discard / Save Buttons
 *
 */

#my-station-controls .edit {
	position:relative;
	top:26px;
	right:-300px;
}

#my-station-controls .edit a {
	cursor:pointer;
}

#my-station-controls .edit-stations  {
	padding-top:9px;
}

#my-station-controls .edit-stations a {
    display:block;   
    width: 57px;
    height:20px;
    background: transparent url(../img/presets-edit.png) left top no-repeat;
}

#my-station-controls .edit-stations a:hover {
    display:block;   
    width: 57px;
    height:20px;
    background: transparent url(../img/presets-edit.png) left bottom no-repeat;
}

#my-station-controls .discard-changes  {
    padding-right:2px;
    margin-right:2px;
    float:right;  
    background-color:#efefef;
    position:relative;
    right:255px;
    top:12px;
}

#my-station-controls .discard-changes a:hover {
    text-decoration: underline;    
}

#my-station-controls .save-changes  {
    margin-right:2px;
    float:right;    
    position:relative;
    right:255px;
    top:9px;
}

#my-station-controls .save-changes a {
    display:block;   
    width: 57px;
    height:20px;
	text-indent:-2000px;
    background: transparent url(../img/presets-save.png) right top no-repeat;
	border-left:1px solid #ccc;
}

#my-station-controls .save-changes a:hover {
    display:block;   
    width: 57px;
    height:20px;
    background: transparent url(../img/presets-save.png) right bottom no-repeat;
}


/**
 *
 * Spacer
 *
 */

.edit-row-spacer {
    height:28px;
    background-color:#efefef;	
}

.edit-row-spacer .last-played {
	background-color:#CECECE;
	height:100%;
	padding-top:5px;
	width:25%;
}

.edit-row-spacer .last-played p {
	background-color:#393939;
	color:#EFEFEF;
	font-size:0.9em;
	line-height:1.3em;
	margin:5px auto;
	text-align:center;
	width:80%;
	white-space:nowrap;
}


/**
 *
 * My Stations Icons
 *
 */

.my-station-list, #mystations-loading {
	width:360px;
	float:left;
    position:relative;
    background:url(../img/empty.png) 0 100% repeat #EFEFEF;
	margin:0;
	padding:0;
	list-style:none;
}

.my-station-list .station-container {
    float:left;	
    height:43px;
	width:76px;
    text-align:center; 
	padding:5px 7px 6px 7px;
}

.my-station-list .last-played {
    background-color:#cecece;
}

.my-station-list .station-label {
	text-align:center;
	height: 28px;
}

.my-station-list .station-icon {
	background: transparent url(../img/station-underlay.png) top 7px no-repeat;
	text-align:center;
	margin:0; 
	padding:0;
	position:relative;
	z-index:901;
	clear:both;
	height:100%;
}

.my-station-list a.station-link {
	display:block;
	width:76px;
	height:43px;
	background-position:1px 1px;
	background-repeat:no-repeat;
	cursor:pointer;
}

.my-station-list .station-container .current-draggable a.station-link {
    margin-left:6px;
}

#mystations .my-station-list .draggable a.station-link span.station-play-icon {
	display:none;
}

.station-underlay {
	background-color:#efefef;
}

.station-overlay {
	background-image:url("../img/station-overlay.png");
	display:block;
	height:43px;
	width:76px;
}

.my-station-list .station-icon a.station-link span.station-play-icon {	
	background:url(../img/play-icon.png) no-repeat scroll 0 -32px transparent;
	display:block;
	position:absolute;	
	left:22px;	
	top:6px;
	height:32px;
	width:32px;
}

.my-station-list .station-icon a:hover.station-link span.station-play-icon {
	background-position: 0 0;
}

.my-station-list .station-icon a:hover.station-link span.station-overlay {
	background-position: 0 -43px;
}
.my-station-list .station-icon.draggable a:hover.station-link span.station-overlay {
	/* When draggable, don't have a hover state */
	background-position: 0 0;
}

.my-station-list .station-icon img {
    border:none;
}

.my-station-list .station-object-handle {
    height:16px;
    margin-top:27px;
    background:transparent url(../img/drag-handle.png) left top no-repeat; 
    width:100%;
	display:none;
}
.draggable .station-object.handle { left:0; }

.my-station-list .station-container .icon-overlay {
	position:absolute;
    width:76px;
    clear:both;
    top:0;   
}

.my-station-list .station-icon .station-close-button {
	position:absolute;
	cursor:pointer;
	top:-5px;
	left:-7px;   
}

/* inner span required for IE because of transparent image */
.my-station-list .station-icon .station-close-button span  {
	background: transparent url(../img/icon-close-btn.png) no-repeat 0 0;
	display:block;
	width:15px;
	height:14px;
}

.my-station-list .current-draggable {
    margin-left:1px;
}

#mystations .my-station-list .current-station-overlay {   
    width:76px;
	height:43px;
}

/* inner div required for IE  */
#mystations .my-station-list .current-station-overlay div {   
    width:76px;
	height:43px;
	background: transparent url(../img/playing.png) 0 0 no-repeat;
}


/**
 *
 * Tip at the bottom of My Stations
 *
 */

#mystations .tooltip {
    background-color:#DFDFDF;   
	clear:both;
}
                     
#mystations .tooltip-text {
	font-style:italic;
	margin:5px auto 5px;
	width:90%;
	text-align:center;
}


/**
 *
 * Classes for use when reordering presets
 *
 */

.draggable {
    cursor:move;
}
.draggable .station-overlay { cursor:move; }

.draggable-handle {
    left:0px;	
}


/**
 *
 * Play icon on mouseover
 *
 */

#mystations .play-icon {
	position:absolute;
	display:none;
}

#mystations .station-container .hover .play-icon {
	display:block;
}


/**
 *
 * Tip Box
 *
 */

#mystations .tipbox-container {
    width:244px;
    padding:9px 0 0 0;
	background:transparent url(../img/tipbox-top-bg-long.png) 0 0 no-repeat;
    text-align:left;
	position:absolute;
	z-index:950;
	display:none;
}
#mystations .tipbox-container.reverse {
	background:transparent url(../img/tipbox-top-bg-long-rev.png) 0 0 no-repeat;
}

#mystations .tipbox-inner {
	background:transparent url(../img/tipbox-bottom-bg-long.png) 0 100% no-repeat;    
}


/**
 *
 * Loading
 *
 */
 
.my-station-list span#loader {
	display:block;
	float:left;
	margin-left:5px;
	width:16px;
	height:16px;
}

.my-station-list span.loading { }

.my-station-list p.loading-text {
	float:left;
}

#mystations .loading {
    text-align:center;
    width:100%;
    height:88px;
    padding-top:60px;
    margin-top:-28px;
    background:#dcdcdc;
}
#mystations .loading .text {
    line-height:1.3em;
    color:#000;
    font-size:2em;
}
#mystations .loading .spinner {
    background: transparent url(../img/spinner.gif) 0 0 repeat;
    width:16px;
    height:16px;
    margin:auto; 
    position:relative;
    top:-6px;
    display:inline-block;
}