/*
   movideo-ui-tree.css
   Movideo Playlist Tree UI CSS
   
   Created by Victor Nguyen on 2010-11-01.
   Copyright 2010 movideo. All rights reserved.
*/

/* ============================ */
/* = CORE STYLES: DO NOT EDIT = */
/* ============================ */
/*
  These styles enable the nested playlist tree to scroll.
  Avoid editing these styles, as doing so may cause unexpected behaviour.
*/
.movideo-ui-helper-hidden { display: none; }
.movideo-ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.movideo-ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .movideo-ui-helper-clearfix { height:1%; }
.movideo-ui-helper-clearfix { display:block; }
.movideo-ui-tree-main { position:relative; overflow:hidden; font-family:arial,helvetica,sans-serif;}
.movideo-ui-tree-main a { outline:0; }
.movideo-ui-tree-list-wrapper { position:relative; overflow:hidden; }
.movideo-ui-tree-list-wrapper > ul { z-index:1; }
.movideo-ui-tree-list { position:absolute; top:0; padding:0; margin:0; list-style-type:none; z-index:500; /*-webkit-transform:translate3d(0,0,0);*/ }
.movideo-ui-tree-list li { padding:0; margin:0; list-style-type:none; display:block; }
.movideo-ui-tree-list-scroll { overflow: auto; }

.movideo-ui-tree-list-scroll-hide { overflow: hidden; }

.movideo-ui-tree-option { display:block; }
.movideo-ui-tree-option-media { position:relative; }
.movideo-ui-tree-option-media br { height:0; }
.movideo-browser-ie7 .movideo-ui-tree-option-media { zoom:1; }
.movideo-ui-tree-option-media-image { position:absolute; }
.movideo-ui-tree-option-active { background-color:yellow; }
.movideo-ui-tree-search-results-wrapper { position:relative; overflow:hidden; }
.movideo-ui-tree-main .movideo-ui-tree-search-close { position:relative; }

/* touchscroll */
.touchscroll-nav-btn { height: 25px; z-index: 1000; position: absolute; text-indent: -1000px; background-color: rgb(238, 238, 238); border-color: #ccc; border-style: solid; display: block; background-repeat: no-repeat; background-position: center center; }
.touchscroll-nav-btn:hover {  background-color: rgb(228, 228, 228); }
.touchscroll-nav-prev { top: 0; background-image: url('../images/movideo-ui-videobar-default/movideo-videobar-tall-nav-prev.gif'); border-width: 0 0 1px 0; }
.touchscroll-nav-next { bottom: 0; background-image: url('../images/movideo-ui-videobar-default/movideo-videobar-tall-nav-next.gif'); border-width: 1px 0 0 0; }

/* =================================== */
/* = PRESENTATION STYLES: EDIT BELOW = */
/* =================================== */
/*
  These styles control the presentation of the the Playlist Tree.
  These can be edited without affecting the core behavour of the widget.
*/
/*container*/
.movideo-ui-tree-main { width:350px; height:350px; padding:6px 6px 8px 6px; background:#f0f2f3; border:2px solid #ddd; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; }
.movideo-ui-tree-main a { text-decoration:none; color:#666; }

/* header (title, search) */
.movideo-ui-tree-header { padding-bottom:8px; }
.movideo-ui-tree-title { padding:5px 0 0 8px; font-weight:normal; font-size:16px; color:#333; }
.movideo-ui-tree-search { float:right; position:relative; /*padding:1px 3px 0 3px;*/ }
.movideo-ui-tree-search-field { width:100px; border:none; margin:0; padding:3px 28px 3px 3px; height:18px; font-size:13px; -moz-border-radius:4px; -webkit-border-radius:4px; -khtml-border-radius:4px; border-radius:4px; border:1px solid #ccc; }
.movideo-ui-tree-search-button { position:absolute; /*top:2px; right:4px;*/top:3px; right:3px; text-indent:-9999em; width:25px; height:21px; background:transparent url('../images/movideo-ui-tree-default/btn-search.png') no-repeat 0 0; }
.movideo-ui-tree-search-button:hover { background-position:0 -21px; }

/* breadcrumbs */
.movideo-ui-tree-breadcrumbs { padding:7px 6px 6px 8px; color:#d5eef9; font-size:12px; background:#2fabe3; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; border-top-left-radius:4px; border-top-right-radius:4px; }
.movideo-ui-tree-main .movideo-ui-tree-breadcrumbs a { color:#fff; text-decoration:none; }
.movideo-ui-tree-main .movideo-ui-tree-breadcrumbs a:hover { text-decoration:underline; }

/* list and list itemes */
.movideo-ui-tree-list-wrapper { border:1px solid #ddd; }
.movideo-ui-tree-list { background:#eee; }
.movideo-ui-tree-list li { border-bottom:1px solid #ddd; }
.movideo-ui-tree-main a.movideo-ui-tree-option { padding:8px 20px 8px 10px; background-color:#f8f9f9; color:#2fabe3; text-decoration:none; }
.movideo-ui-tree-main a.movideo-ui-tree-option:hover { background-color:#dff0fa; color:#2fabe3; }
a.movideo-ui-tree-option-playlist { background-image:url('../images/movideo-ui-tree-default/movideo-tree-bg-option.gif'); background-repeat:no-repeat; background-position:right center; padding-right:30px; }
a.movideo-ui-tree-option-playlist-external { background-image:url('../images/movideo-ui-tree-default/movideo-tree-bg-option-external.gif'); }
a.movideo-ui-tree-option-media { padding:8px 20px 12px 10px; }
a.movideo-ui-tree-option-media:hover {  }
a.movideo-ui-tree-option-media:hover .movideo-ui-tree-option-media-desc { color:#777; }
a.movideo-ui-tree-option-media p { padding:0; margin:0; padding-left:12px; }
a.movideo-ui-tree-option-media p.movideo-ui-tree-option-media-title { font-size:12px; padding-bottom:4px; font-weight:bold; }
a.movideo-ui-tree-option-media p.movideo-ui-tree-option-media-desc { font-size:11px; color:#777; }
.movideo-ui-tree-option-media-image { border:1px solid #999; }
a.movideo-ui-tree-option-media-active .movideo-ui-tree-option-media-image { border-color:#ddd; }
.movideo-ui-tree-main a.movideo-ui-tree-option-media-active,
.movideo-ui-tree-main a.movideo-ui-tree-option-media-active:hover { background:#999; }
a.movideo-ui-tree-option-media-active p.movideo-ui-tree-option-media-title,
a.movideo-ui-tree-option-media-active:hover p.movideo-ui-tree-option-media-title { color:#fff; }
a.movideo-ui-tree-option-media-active p.movideo-ui-tree-option-media-desc,
a.movideo-ui-tree-option-media-active:hover p.movideo-ui-tree-option-media-desc { color:#ddd; }

/* search results */
.movideo-ui-tree-search-results-wrapper { border:1px solid #ddd; }
.movideo-ui-tree-search-results-empty { color:#333; text-align:center; padding:30px 30px; line-height:1.4; }
.movideo-ui-tree-search-results-empty span { font-weight:bold; }
.movideo-ui-tree-main .movideo-ui-tree-search-close a { display:block; text-align:center; font-size:12px; padding:6px; color:#d5eef9; background:#54b6e3; -webkit-border-top-left-radius:4px; -webkit-border-top-right-radius:4px; -moz-border-radius-topleft:4px; -moz-border-radius-topright:4px; border-top-left-radius:4px; border-top-right-radius:4px; }
.movideo-ui-tree-main .movideo-ui-tree-search-close a:hover { color:#fff; background:#2fabe3; }

/* loading mask */
.movideo-ui-tree-loading { background:#fff url("../images/movideo-spinner-32x32-white.gif") no-repeat center center; -moz-border-radius:6px; -webkit-border-radius:6px; border-radius:6px; }

/* Unicode font choice for non-ISO-8859-1 handling in IE7-9 - Arial Unicode MS included to deal with not having the East Asian Language pack installed in Windows XP */
.movideo-ui-tree-main-unicode{font-family: Meiryo, 'MS PGothic', 'Arial Unicode MS', Sans-Serif;}