/* ===========================================================================
//	Tags
// ======================================================================== */

	/* we want to define the default font in only two places, body and td, so
	   that we can override it more easily */
body {
	background-color:	ButtonFace;
	font:				Menu;
	padding:			0px;
	padding:			1px 0;
	margin:				0px;
	overflow:			hidden; 
	cursor:				default;
	border:				none;
}

a, a:link, a:visited, a:hover, a:active {
	color:				#0066CC;
	text-decoration:	none;
	cursor:				default;
}

a:hover {
	text-decoration:	underline;
}

a img {
	border:				none;
}

td {
	font:				Menu;
}


/* ===========================================================================
//	Containers
// ======================================================================== */

#LeftPane {
	width:				170;
	padding-right:		8px;
}

#RightPane {
	background:			white;
	width:				100%;  
	height:				100%; 
	overflow:			hidden;
}

#ItemListContainer {
	position:			relative;
	overflow:			hidden;
	border:				1px solid ButtonShadow;
	border-right:		none;
	border-bottom:		none;
}

#ToolbarTable {
	border-left:		1px solid ButtonShadow; 
}

	/* set a default height for the VM player container so that the item list
	   doesn't visibly shift down after the player is instantiated */
#VMPlayerContainer {
	height:				40px;
	padding-left:		3px;
}


/* ===========================================================================
//	Toolbar
// ======================================================================== */

#Toolbar {
	background:			ButtonFace;
	height:				1%;
	padding:			0px 3px 0px 0px;
	visibility:			hidden;
}

.ToolbarButton {
	background-image:	url(images/cl-tb-background.gif);
	background-position-x: 0;
	width:				22px;
	height:				22px;
	padding:			3px 1px 1px 3px;
	border:				none;
	vertical-align:		top;
	overflow:			hidden;
	behavior:			url(msgbuttonevents.htc);
}

.ToolbarButton-Over {
	background-position-x: -22;
}

.ToolbarButton-Down {
	background-position-x: -44;
}

.ToolbarButton-Disabled {
	background-position-x: 0;
}

.ToolbarButton-Disabled img {
	filter:				progid:DXImageTransform.Microsoft.BasicImage(grayScale=1, opacity=.3);
}


/* ===========================================================================
//	CLItemList
// ======================================================================== */

.CLItemList {
	width:				100%;
	height:				100%;
	overflow:			hidden;
}

.CLItemList table {
	margin:				1px 2px 0 1px;
	width:				100%;
}

.CLItemList #ShowInlineError {
	background:			InfoBackground url(images/vm-alert.gif) no-repeat 8px 4px top left;
	padding:			6px 6px 6px 30px;
	border-bottom: 		1px solid ButtonShadow;
	display:			none;
}

.CLItemList #UnusedItemContainerTable {
	display:			none;
}

.CLItemList #TableContainer {
	width:				100%;
	height:				100%;
	overflow:			hidden;
}


/* ===========================================================================
//	CLItemView
// ======================================================================== */

.CLItemView {
	color:				black;
	padding:			0px 2px 2px 2px;
	margin-bottom:		0px;
	width:				100%;
	position:			relative;
}

.CLItemView table {
	width:				100%;
}

.CLItemView td {
	vertical-align:		middle;
	overflow:			hidden;
	padding-top:		2px;
}

.CLItemView td#TypeIconCell {
	width:				20px;
}

.CLItemView nobr {
	overflow:			hidden;
	text-overflow:		ellipsis;
}

.CLItemView #TypeIcon {
	width:				16px;
	height:				16px;
	margin:				0px 4px 0px 3px;
}

.CLItemView #ContactName {
	padding-right:		4px;
	text-overflow:		ellipsis;
}

.CLItemView #ContactName {
	padding-right:		6px;
	text-overflow:		ellipsis;
}

.CLItemView #DateTime {
	color:				#666;
	width:				1%;
	padding-right:		6px;
}

.CLItemView #Duration {
	color:				#666;
	text-align:			right;
	width:				1%;
	padding-left:		6px;
	padding-right:		6px;
}

.CLItemView_UnplayedVM #ContactName {
	font-weight:		bold;
}

.CLItemView_Selected {
	background:			Highlight;
	color:				HighlightText;
}

.CLItemView_Selected td {
	color:				HighlightText;
}

.CLItemView_Selected #ContactName, .CLItemView_Selected #DateTime, .CLItemView_Selected #Duration {
	color:				HighlightText;
}

.ShowAllLink {
	color:				#0066CC;
	padding:			4px 2px 0 2px;
	text-align:			center;
	width:				expression(this.parentNode.parentNode.parentNode.parentNode.offsetWidth);
	left:				0;
	top:				0;
	position:			absolute;
	behavior:			url(msgbuttonevents.htc);
}

.ShowAllLink-Over {
	text-decoration:	underline;
}

.ShowWaitMsg {
	padding:			2px;
	text-align:			center;
	width:				100%;
	top:				0;
	position:			absolute;
}


/* ===========================================================================
//	CLVMPlayer
// ======================================================================== */

.CLVMPlayer {
}

.CLVMPlayer table {
	width:				100%;
}

.CLVMPlayer td {
	padding:			1px 0px;
	vertical-align:		middle;
}

.CLVMPlayer #Controls {
	width:				1%;
	padding-left:		2px;
	vertical-align:		middle;
}

.PlayPauseButton {
	background:			url(images/vm-play-button.gif);
	background-position-x: expression(!this.isPlaying ? 0 : -120);
	width:				30px;
	height:				30px;
	margin-right:		3px;
	margin-bottom:		2px;
	cursor:				default;
	vertical-align:		middle;
	overflow:			hidden;
	behavior:			url(msgbuttonevents.htc);
}

.PlayPauseButton-Over {
	background-position-x: expression(!this.isPlaying ? -30 : -150);
}

.PlayPauseButton-Down {
	background-position-x: expression(!this.isPlaying ? -60 : -180);
}

.PlayPauseButton-Disabled {
	filter:				progid:DXImageTransform.Microsoft.BasicImage(grayScale=1, opacity=.6);
	background-position-x: -90;
}

.SkipButton {
	background-position-x: 0;
	width:				20px;
	height:				20px;
	margin:				0 3px 0px 0;
	cursor:				default;
	vertical-align:		middle;
	behavior:			url(msgbuttonevents.htc);
}

.SkipButton-Over {
	background-position-x: -20;
}

.SkipButton-Down {
	background-position-x: -40;
}

.SkipButton-Disabled {
	filter:				progid:DXImageTransform.Microsoft.BasicImage(grayScale=1, opacity=.6);
	background-position-x: -60;
}

#BackButton {
	background-image:	url(images/vm-back-button.gif);
}

#ForwardButton {
	background-image:	url(images/vm-forward-button.gif);
}

.CLVMPlayer #CurrentTime {
	padding:			0 6px;
}

.CLVMPlayer #SliderContainer {
	width:				100%;
	height:				10px;
	padding-right:		0;
}

.CLVMPlayer #Duration {
	padding-left:		6px;
}

.CLVMPlayer #PlayerVolume {
	padding-left:		6px;
}

#VolumeButton {
	margin-right:		6px;
}

.Disabled #VolumeButton {
	visibility:			hidden;
}


/* ===========================================================================
//	CLVMPlayer slider
// ======================================================================== */

.YMSlider {
	width:				100%;
	margin:				0;
	padding:			0px 3px;
	position:			relative;
}

.Disabled .YMSlider {
	visibility:			hidden;
}

.YMSlider #ThumbTrack {
	background:			url(images/vm-slider-background.gif) repeat-x;
	padding:			2px 0;
}

.YMSlider.Buffering #ThumbTrack {
	background:			url(images/vm-slider-buffering-background.gif) repeat-x;
}

.YMSlider #ThumbContainer {
	position:			relative;
	width:				100%;
	height:				100%;
}

.SliderThumb {
	background:			url(images/vm-slider-thumb.gif);
	background-position-x: 0;
	font-size:			0px;
	width:				10;
	height:				10px;
	left:				0%;
	overflow:			hidden;
	position:			relative;
	z-index:			10;
	behavior:			url(msgbuttonevents.htc);
}

.SliderThumb-Over {
	background-position-x: -10;
}

.SliderThumb-Down {
	background-position-x: -20;
}

.YMSlider.Buffering .SliderThumb {
	visibility:			hidden;
}

.YMSlider #ProgressBar {
	font-size:			0;
	width:				0;
	height:				8px;
	top:				1px;
	border-top:			8px solid #bbb;
	position:			absolute;
	z-index:			5;
	display:			none;
}

.YMSlider #ProgressBarRightEdge {
	background:			#bbb;
	font-size:			0;
	left:				100%;
	top:				0px;
	width:				3px;
	height:				8px;
	margin-top:			-8px;
	position:			relative;
	overflow:			hidden;
}

.YMSlider.Buffering #ProgressBar, .YMSlider.Buffering #ProgressBarRightEdge {
	visibility:			hidden;
}

.YMSlider #LeftEdge {
	left:				0;
	top:				0;
	position:			absolute;
}

.YMSlider #RightEdge {
	right:				0;
	top:				0;
	position:			absolute;
}


/* ===========================================================================
//	CLSelectList
// ======================================================================== */

.CLSelectList {
	background:			white;
	width:				100%;
	height:				100%;
	padding:			1px;
	overflow-x:			hidden;
	overflow-y:			auto;
	display:			inline;
	border-right:		1px solid ButtonShadow;
}


/* ===========================================================================
//	CLSelectListItem
// ======================================================================== */

.CLSelectListItem {
	background:			white;
	color:				black;
	padding:			2px 4px 4px 4px;
	padding:			2px 4px 4px 26px;
	margin-bottom:		0px;
	width:				100%;
}

.CLSelectListItem_Selected {
	background:			Highlight;
	color:				HighlightText;
}

.CLSelectListItem.UnplayedVMs {
	font-weight:		bold;
}

.CLSelectListItem img {
	margin:				-3px 5px -2px -22px;
	vertical-align:		bottom;
}

.CLSelectListSeparator {
	height:				8px;
	overflow:			hidden;
}


/* ===========================================================================
//	Warnings
// ======================================================================== */

#VMWarning {
	background:			InfoBackground url(images/vm-alert.gif) no-repeat 8px 4px top left;
	padding:			6px 6px 6px 30px;
	display:			none;
}

#VMWarning.VMWarningStop {
	background-color:	#ffeedd;
}

#VMWarning TD {
	border:				1px solid ButtonShadow;
	border-bottom:		none;
	border-right:		none;
}

#MissedWarning {
	background:			InfoBackground;
	padding:			6px;
	padding-top:		4px;
	padding-bottom:		2px;
	display:			none;
}

#MissedWarning TD {
	border:				1px solid ButtonShadow;
	border-bottom:		none;
	border-right:		none;
}

#MissedWarning div {
	margin-bottom:		3px;
	display:			none;
}

#MissedWarning div img {
	vertical-align:		middle;
	margin-right:		6px;
	display:			none;
}

.MissedWarning-Over {
	color:				#0066CC;
	text-decoration:	underline;
}


/* ===========================================================================
//	Volume popup
// ======================================================================== */

.CLVolumePopup {
	background:			ButtonFace;
	width:				100%;
	height:				100%;
	margin:				0;
	padding:			3px;
	border:				2px outset white;
	overflow:			hidden;
}

.CLVolumePopup #VolumeTrack {
	background:			#ccc;
	width:				6px;
	height:				100px;
	border:				1px inset white;
}

.CLVolumePopup #VolumeSlider {
	background:			ButtonFace; 
	width:				20px; 
	height:				100px; 
	margin-left:		8px;
	behavior:			url(htc/slider.htc); 
	sl--orientation:	vertical; 
	sl--bar-color:		#ccc; 
	sl--snap:			false; 
	sl--tick-color:		ButtonFace; 
}

.CLVolumePopup BUTTON {
	font:				11px tahoma;
	padding:			1 -1px;
	margin-top:			8px;
}


/*
	CLStylesOverride.css can contain any changes to the CSS that might be done 
	on a per-country basis, like specifying a different font.
*/
@import url(CLStylesOverride.css)