@charset "UTF-8";

/* SpryCollapsiblePanel.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* This is the selector for the main CollapsiblePanel container. For our
 * default style, the CollapsiblePanel is responsible for drawing the left and
 * right borders around the widget.
 *
 * If you want to constrain the width of the CollapsiblePanel widget, set a width on
 * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
 * up available space.
 *
 * The name of the class ("CollapsiblePanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style the
 * CollapsiblePanel container.
 */
.CollapsiblePanel {
	margin:0 0 3px 0;
	padding: 0px;
	width:948px;
	clear: both;
	border: solid 1px #bbb;
}

/* This is the selector for the CollapsiblePanelTab. This container houses
 * the title for the panel. This is also the container that the user clicks
 * on to open or close the panel.
 *
 * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * CollapsiblePanel panel tab container.
 */
.CollapsiblePanelTab {
	font: bold 0.7em sans-serif;
	background-color: #DDD;
	border-top: solid 1px #999;
	border-bottom: solid 1px #CCC;
	margin: 0px;
	padding: 2px;
	cursor: pointer;
	-moz-user-select: none;
	-khtml-user-select: none;
	display: none;
}

/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
 * you should never put any padding on the content area element if you plan to
 * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
 * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
 *
 * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style a
 * CollapsiblePanel content container.
 */
.CollapsiblePanelContent {
	margin:0;
	padding: 0px;
}

/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
 * keyboard focus ring appears *inside* the tab instead of around the tab.
 * This is an example of how to make the text within the anchor tag look
 * like non-anchor (normal) text.
 */
.CollapsiblePanelTab a {
	color: black;
	text-decoration: none;
}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the CollapsiblePanel.
 */
.CollapsiblePanelOpen .CollapsiblePanelTab {
	background-color: #EEE;
}

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
	background-color: #CCC;
}

/* This is an example of how to change the appearance of all the panel tabs when the
 * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 * whenever the CollapsiblePanel gains or loses keyboard focus.
 */
.CollapsiblePanelFocused .CollapsiblePanelTab {
	/*background-color: #3399FF;*/
}

/*.CollapsiblePanelContent ul { list-style: none; text-align: center; padding: 0 0 0 10px; }*/
/*.CollapsiblePanelContent h3 { margin: 0; padding: 10px 0 10px 30px; float: left; }*/

#vidChannels { border-right:1px solid #bbb; float:left; padding:0; width:240px; height:280px; }
#vidChannels h2 { background:#006F92; color:#fff; font:bold 13px arial,helvetica,sans-serif; padding:7px 0 7px 10px; text-transform:uppercase; margin:0; }
#video-channels { list-style:none; margin:0; padding:0; height:250px; overflow-x:hidden; overflow-y:auto; }

.button { width:210px; height:15px; margin:0; padding:3px 15px; text-decoration:none; }
.buttonActive { background:#fde791; width:210px; height:15px; margin:0; padding:3px 15px; }

#video-channels .button a, #video-channels .buttonActive a {  color:#555; text-decoration:none; padding:0; }
.channel-content { display: none; /*position: absolute; top: 500px; width: 500px; margin: 0 0 0 150px; text-align: left; background: url(/images/videoChannelContentsBG.gif);*/ }

.CollapsiblePanel h3 { float:right; font:bold 14px arial; color:#006f92; margin:8px 0 5px; width:690px; }
#active-channel-content { display:block; float:right; width:680px; height:236px; *height:242px; margin:0; padding:5px 16px 10px 10px; *padding-top:0; overflow:auto; overflow-x:hidden; }
#active-channel-content .video-content { float:left; width:199px; margin:0; padding:8px; font-size:10px; }
#active-channel-content .playing { background:#FDE791; }
#active-channel-content .member-video-content { background:#fde791; }
#active-channel-content a.videoTitle { float:left; width:126px; word-wrap:break-word; margin:0 0 0 5px; text-decoration:none; color:#555;  font-size:12px; }
#active-channel-content a.videoTitle:hover { text-decoration:underline; }
#active-channel-content .video-content a.frame { height:67px; width:67px; overflow:hidden !important; float:left; }
#active-channel-content a.frame img { float:left; margin:0 6px 0 -26px; height:67px; }
#active-channel-content img.forpay { float: none; display: inline; text-decoration: none; margin:0 5px 0 0; width:14px; height:13px; }
/*#active-channel-content div.smallDescription { position: absolute; left: -9999em; }
#active-channel-content div:hover .smallDescription { left: 0; }*/

.hiddenDesc { display: block; background: tan; width: 100px;  }
.showDescription { background: red; }