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

CSS For the Desktop Player
-----------------------------------------------
Participatoryculture.org

///////////////////////////////////////////////

Some common HTML
 
/////////////////////////////////////////////*/


a img{
	border: none;
	}

body {
	font-family: "Lucida Grande", "Tahoma", "Bitstream Vera Sans", Arial, sans-serif;
	font-size: 12px;
	background-color: #e6edf7;
	margin: 0;
	padding: 0;
	width: 100%;
}

.noselect {
    -khtml-user-select: none;
    -moz-user-select: none;
    cursor: default;
}
 
.draggable {
    -khtml-user-drag: element;
}


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

SIDEBAR
-----------------------------------------------
Contains the channels
 
/////////////////////////////////////////////*/

#sidebar{
	padding: 0px;
	margin: 0px;
	width: 100%;
	overflow: hidden;
}

.tab-list {
       padding: 2px 0px 3px 0px;
       margin: 0px;
       width: 100%;
       border-top: 1px solid #b6bfce;
}

.tab-list.first {
	padding-top: 0px;
	border-top: none;
}
       
.tab-list li{
       list-style: none;
       clear: both;
       margin: 1px 0px 0px 0px;
}

.tab-list li:hover {
	cursor: default;
}

a.feeditem {
    display: block;
    padding: 1px 5px 1px 16px;
    color: #000;
    font-size: 11px;
    text-decoration: none;
    height: 20px;
}

a.feeditem.folder {
    padding-left: 3px;
}

.child a.feeditem {
   padding-left: 37px;
}

a.feeditem.blinking {
    background: #ff9;
}

.selected a.feeditem, .selected-inactive a.feeditem {
    color: #fff;
    font-weight: bold;
}

a.feeditem span {
    margin-left: 6px;
    margin-top: 3px;
    padding: 0px 0 5px 0px;
    overflow: hidden;
}

.selected a.feeditem span, .selected-inactive a.feeditem span {
    color: #fff;
}

.selected a.feeditem {
    background: url(../images/channel_bg.png) 0% 0% repeat-x; 
}

.selected-inactive a.feeditem {
    background: url(../images/channel_bg.png) 0px -50px repeat-x; 
}

a.feeditem div.line {
    white-space: nowrap;
}

a.feeditem img.icon {
    height: 20px;
    width: 20px;
    margin: 0;
    border: 0;
    float: left;
}

.expanded-triangle {
    margin: 4px 0px;
    border: 0px;
    float: left;
}

.dnd-background-outer  {
    position: relative;
    height: 22px;
    width: 100%;
}

.dnd-background-inner1, .dnd-background-inner2  {
    position: absolute;
    height: 22px;
}

/* DND Folder drop effects 

The basic strategy here is to create 3 hidden DIVs for the left, right and
middle highlight images.  When a drag is in place, the div that the mouse is
over gets the drag-highlight class and we use that to show the divs. 

The divs are absolutely positioned so they don't interrupt the layout of the
tab lists.
*/

.tab-container-drop-target {
    position: relative;
    margin: 0px;
    padding: 0px;
}

.tab-container-drop-target .dnd-container-drop-indicator {
    display: none;
    position: absolute;
    width: 100%;
    height: 22px;
    z-index: -1;
}

.tab-container-drop-target.drag-highlight .dnd-container-drop-indicator {
    display: block;
}


.dnd-container-drop-indicator.mid {
    background: url(../images/dnd-highlight-mid.png) top left repeat-x;
    left: 5px;
    right: 5px;
    width: auto;
}

.dnd-container-drop-indicator.left {
    background: url(../images/dnd-highlight-left.png) top left no-repeat;
}

.dnd-container-drop-indicator.right {
    background: url(../images/dnd-highlight-right.png) top right no-repeat;
}

/* DND reorder effects */

.tab-drop-target {
    position: relative;
    margin: 0px;
    padding: 0px;
}

.dnd-reorder-indicator {
    display: none;
    position: absolute;
}

.drag-highlight > .dnd-reorder-indicator {
    display: block;
}

.dnd-reorder-indicator.circle  {
    width: 8px;
    height: 8px;
    background: url("../images/dnd-reorder-circle.png");
}

.dnd-reorder-indicator.line  {
    width: auto;
    height: 4px;
    background: url("../images/dnd-reorder-line.png") repeat-x;
}

.tab-drop-target .dnd-reorder-indicator.circle  {
    top: -4px;
    left: 11px;
}

.tab-drop-target .dnd-reorder-indicator.line {
    top: -2px;
    left: 17px;
    right: 0px;
}

.tab-drop-target.child .dnd-reorder-indicator.line {
   left: 38px;
}

.tab-drop-target.child .dnd-reorder-indicator.circle {
   left: 32px;
}

/* These next ones catch things like dragging a playlist all the way up to the
* channels tablist */

.tab-list-drop-target {
       position: relative;
       margin: 0px;
       padding: 0px;
       min-height: 10px;
}

.tab-list-drop-target > .dnd-reorder-indicator {
    z-index: 3;
}

.tab-list-drop-target > .dnd-reorder-indicator.circle  {
    left: 11px;
    bottom: -8px;
    height: 8px;
    width: 8px;
}

.tab-list-drop-target > .dnd-reorder-indicator.line {
    left: 17px;
    bottom: -6px;
    height: 4px;
    width: 100%;
}

.tab-list-drop-target > .dnd-reorder-indicator.show-on-top.circle {
    top: -7px;
}

.tab-list-drop-target > .dnd-reorder-indicator.show-on-top.line {
    top: -5px;
}

a.feeditem div.name {
	padding: 3px;
	overflow: hidden;
}

.tab-list-end {
	height: 5px;
}

.feed-loading-icon {
	float: right;
	position: relative;
	width: 16px;
	height: 16px;
	margin: 1px 0px 0 0;
	padding: 1px;
	z-index: 2;
	background: url(../images/feed-loading-normal.gif) top left no-repeat;
}

a.feeditem.normal .feed-loading-icon {
	background: url(../images/feed-loading-normal.gif) top left no-repeat;
}
.selected a.feeditem .feed-loading-icon {
	background: url(../images/feed-loading-selected.gif) top left no-repeat;
}
.selected-inactive a.feeditem .feed-loading-icon {
	background: url(../images/feed-loading-selected-inactive.gif) top left no-repeat;
}

.number-count {
	font-size: 11px;
	color: #FFFFFF;
	padding: 2px 0px 4px 0px;
	font-weight: normal;
	background: left top repeat-x;
	min-width: 7px;
        text-align: center;
}

.left-bubble {
        padding-left: 8px;
	margin: 1px 0px 0px 5px;
	float: right;
	position: relative;
	z-index: 2;
	background: left top no-repeat;
}

.left-bubble.second {
	margin-left: 1px;
}

.right-bubble {
	background: right top no-repeat;
        padding-right: 8px;
}

.left-bubble.green {
	background-image: url(../images/circle-green-left.png);
}

.right-bubble.green {
	background-image: url(../images/circle-green-right.png);
}

.number-count.green {
	background-image: url(../images/circle-green-mid.png);
}

.left-bubble.blue {
	background-image: url(../images/circle-blue-left.png);
}

.right-bubble.blue {
	background-image: url(../images/circle-blue-right.png);
}

.number-count.blue {
	background-image: url(../images/circle-blue-mid.png);
}

.left-bubble.orange {
	background-image: url(../images/circle-orange-left.png);
}

.right-bubble.orange {
	background-image: url(../images/circle-orange-right.png);
}

.number-count.orange {
	background-image: url(../images/circle-orange-mid.png);
}

.new-video-play-button {
	position: absolute;
	left: 6px;
	right: 6px;
	top: 0px;
	height: 19px;
	text-align: center;
	z-index: 5;
}

.new-video-play-button:hover {
	background: left top repeat-x;
	background-image: url(../images/circle-green-mid.png);
}

.new-video-play-button img {
	display: none;
	width: 11px;
	height: 14px;
	margin-top: 2px;
}

.new-video-play-button:hover img {
	display: inline;
}

/* Reverse the color scheme for blue bubbles when they are selected */

.selected a.feeditem .left-bubble.blue {
	background-image: url(../images/circle-white-left.png);
}

.selected a.feeditem .right-bubble.blue {
	background-image: url(../images/circle-white-right.png);
}

.selected a.feeditem .number-count.blue {
	color: #4081EC;
	background-image: url(../images/circle-white-mid.png);
}

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

Channel guide
 
/////////////////////////////////////////////*/

.channel-guide-body {
background-color: #e7e7e7;
}

#channel-guide-loading-image{
	width: 324px;
	height: 128px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -64px 0 0 -162px;
	background: url(../images/loading.gif) no-repeat left top;
	}

#channel-guide-loading-text{
        position: absolute;
	font-size: 18px;
        left: 16px;
        right: 16px;
        top: 30px;
        height: 50px;
	text-align: center;
	}
