/*
   movideo-ui-videobar.css
   Movideo Video Bar UI CSS

   Created by Victor Nguyen (victor@igloo.com.au) on 2011-02-22.
   Copyright 2010 movideo. All rights reserved.
*/

/* =============== */
/* = Core Styles = */
/* =============== */

/*
    Container
*/
.videobar-container * { margin:0; padding:0; }
.videobar-container { font:normal 12px arial,sans-serif; position:relative; }

/*
    Viewport
*/
div.videobar-viewport { background:#f8f9f9; margin:0 auto; position:relative; overflow:hidden; }

/*
    List
*/
ul.videobar-list { position:absolute; list-style-type:none; line-height:1.3; }


/*
    Loading Mask
*/
.videobar-loading { background:#fff url('../images/movideo-spinner-24x24-white.gif') no-repeat center center; }

/* Social */
.facebook-like { margin-top: 10px; }

/* Error handler */
.videobar-no-media-message { width: 100%; height: 100%; background: #000; color: #fff; padding: 10px; opacity: .8; text-align: center; }

/* Video Duration */
.videobar-item-image-link { display: block; position: relative; text-decoration: none; }
.videobar-item-duration { font-size: 9px; line-height: 9px; padding: 3px; color: #ffffff; background: black; position: absolute; top: 0px; right: 0px; }

/* ================ */
/* = Wide Display = */
/* ================ */

/* container width */
/* these values should be at least the viewport width and height, plus extra for navigation */
.videobar-wide { width:630px; height:100%; border:1px solid #ddd; overflow:hidden; }

/* viewport width */
/* overridden by 'widthViewport' option if not set to false (default) */
.videobar-wide div.videobar-viewport { width:550px; }

/* viewport height */
/* overridden by 'heightViewport' option if not set to false (default) */
.videobar-wide div.videobar-viewport { height:200px; }
.videobar-wide ul.videobar-list { height:200px; }

/* media item width */
/* be sure to account for your imageWidth value */
/* overridden by 'widthViewport' option if set (not set by default) */
.videobar-wide div.videobar-item-inner { width:100px; padding:5px; }

/* media item height */
/* be sure to account for your imageHeight value */
/* overridden by 'heightViewport' option if set (not set by default) */
.videobar-wide li.videobar-item { height:200px; }

/* media item */
.videobar-wide li.videobar-item { float:left; }
.videobar-wide p.videobar-item-title { padding-bottom:4px; }
.videobar-wide p.videobar-item-title a { font-size:12px; font-weight:bold; text-decoration:none; color:#2fabe3; }
.videobar-wide p.videobar-item-title a:hover { text-decoration:underline; }
.videobar-wide p.videobar-item-desc { font-size:11px; color:#777; line-height:1.3; }
.videobar-wide p.videobar-item-itemAgeInDays,
.videobar-wide p.videobar-item-itemCreationDate { font-size:11px; color:#777; line-height:1.3; margin-top: 5px;  }
.videobar-wide a.facebook-share { font-size:11px; color:#777; line-height:1.3; margin-top: 5px;  }

/* controls */
.videobar-wide a.videobar-nav { text-indent:-9999em; display:block; position:absolute; top:0; width:40px; height:100%; background-position:center center; background-repeat:no-repeat; background-color:#eee; outline:0; }
.videobar-wide a.videobar-nav-prev { left:0; background-image:url('../images/movideo-ui-videobar-default/movideo-videobar-wide-nav-prev.gif'); }
.videobar-wide a.videobar-nav-prev:hover { background-color:#DFF0FA; }
.videobar-wide a.videobar-nav-next { right:0; background-image:url('../images/movideo-ui-videobar-default/movideo-videobar-wide-nav-next.gif'); }
.videobar-wide a.videobar-nav-next:hover { background-color:#DFF0FA; }
.videobar-wide a.videobar-nav-disabled,
.videobar-wide a.videobar-nav-disabled:hover { background:#eee; /*display: none; */}

/* drawer */
.videobar-wide div.videobar-drawer { width:630px; height:120px; background:#000; }
.videobar-wide div.videobar-drawer-inner { padding:15px 20px; }
.videobar-wide p.videobar-drawer-title { font-size:22px; padding:0 0 10px 0; color:#fff; }
.videobar-wide p.videobar-drawer-desc { font-size:14px; color:#ccc; }

/* Wide GRID rows */
.videobar-wide.grid-view .videobar-viewport { height:auto; }
.videobar-wide.grid-view .videobar-list { height:auto; }
.videobar-wide .grid-page { float: left; height: 100%; list-style-type:none;  }
.videobar-wide .grid-row { width: 100%; float: left; list-style-type:none; }
.videobar-wide .grid-row ul { list-style-type:none; }
.videobar-wide .grid-row .videobar-item { overflow: hidden; height:auto; }
.videobar-wide .grid-row .videobar-item-inner { width: 100%; }
.videobar-wide .grid-row .videobar-item-info { margin-left: 0px; float: left; clear: left; width: 100%; margin-top: 5px; }
.videobar-wide .grid-row .videobar-item-inner a.videobar-item-image-link { float: left; margin-right: 10px; }

/* ================ */
/* = Tall Display = */
/* ================ */

/* container width */
/* these values should be at least the viewport width and height, plus extra for navigation */
.videobar-tall { height:440px; width:350px; border:1px solid #ddd; overflow: hidden; }

/* viewport width */
/* overridden by 'width' option if not set to false (default) */
.videobar-tall div.videobar-viewport,
.videobar-tall ul.videobar-list { width:350px; }

/* viewport height */
/* overridden by 'width' option if not set to false (default) */
.videobar-tall div.videobar-viewport { height:200px; }

/* media item height */
/* be sure to account for your imageWidth value */
/* overridden by 'width' option if set (not set by default) */
.videobar-tall div.videobar-item-inner { height: 80px; padding:5px; }

/* media item */
.videobar-tall p.videobar-item-title { padding-bottom:4px; }
.videobar-tall p.videobar-item-title a { font-size:12px; font-weight:bold; text-decoration:none; color:#2fabe3; }
.videobar-tall p.videobar-item-title a:hover { text-decoration:underline; }
.videobar-tall p.videobar-item-desc { font-size:11px; color:#777; line-height:1.3; }
.videobar-tall a.videobar-item-image-link { float:left; }
.videobar-tall img.videobar-item-img { float:left; }
.videobar-tall div.videobar-item-info { float:right; width:225px;/* margin-left: 20px; */}
.videobar-tall p.videobar-item-itemAgeInDays,
.videobar-tall p.videobar-item-itemCreationDate { font-size:11px; color:#777; line-height:1.3; margin-top: 5px;  }
.videobar-tall a.facebook-share { font-size:11px; color:#777; line-height:1.3; margin-top: 5px;  }

/* other styles */
.videobar-tall div.videobar-viewport { top:40px; }

/* controls */
.videobar-tall a.videobar-nav { text-indent:-9999em; display:block; position:absolute; left:0; width:350px; height:40px; background-position:center center; background-repeat:no-repeat; background-color:#eee; outline:0; }
.videobar-tall a.videobar-nav-prev { top:0; background-image:url('../images/movideo-ui-videobar-default/movideo-videobar-tall-nav-prev.gif'); }
.videobar-tall a.videobar-nav-prev:hover { background-color:#DFF0FA; }
.videobar-tall a.videobar-nav-next { bottom:0; background-image:url('../images/movideo-ui-videobar-default/movideo-videobar-tall-nav-next.gif'); }
.videobar-tall a.videobar-nav-next:hover { background-color:#DFF0FA; }
.videobar-tall a.videobar-nav-disabled,
.videobar-tall a.videobar-nav-disabled:hover { background:#eee; }

/* drawer */
.videobar-tall div.videobar-drawer { width:300px; height:440px; background:#000; }
.videobar-tall div.videobar-drawer-inner { padding:15px 20px; }
.videobar-tall p.videobar-drawer-title { font-size:22px; padding:0 0 10px 0; color:#fff; }
.videobar-tall p.videobar-drawer-desc { font-size:14px; color:#ccc; }

/* controls - paginate*/
.pagination-nav { float: right; padding:5px; }
.pagination-nav a { text-indent: 0!important; margin-left: 1px; display:block; width: auto!important; height: auto!important; float: left!important; position: relative!important; background: #fff; padding: 5px 8px; color: #0089CE; text-decoration: none; }
.pagination-nav a.paginate-prev { top:0; }
.pagination-nav a.paginate-prev:hover { background-color:#DFF0FA!important; }
.pagination-nav a.paginate-next { bottom:0;  }
.pagination-nav a.paginate-next:hover { background-color:#DFF0FA!important; }
.pagination-nav a.active, .pagination-nav a:hover { background: #0089CE!important; color: #fff; }
.pagination-nav.videobar-nav-disabled { display: none; }

/* Tall GRID rows */
.videobar-tall.grid-view .videobar-nav { width: 100%; }
.videobar-tall.grid-view .videobar-viewport { width: 100%; }
.videobar-tall.grid-view .videobar-list { width: 100%; }
.videobar-tall.grid-view .grid-page { width: 100%; float: left; list-style-type:none; }
.videobar-tall.grid-view .grid-row { width: 100%; float: left; list-style-type:none;}
.videobar-tall.grid-view .grid-row ul { list-style-type: none; }
.videobar-tall.grid-view .grid-row .videobar-item { float: left;  }
.videobar-tall.grid-view .grid-row .videobar-item-inner { }
.videobar-tall.grid-view .grid-row .videobar-item-info { float: left; height: 100%; overflow: hidden; margin-left: 0px; width: 100%; margin-top: 5px; }
.videobar-tall.grid-view .grid-row .videobar-item-inner a.videobar-item-image-link { float: left; margin-right: 10px; }

/* 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 */
.videobar-container.videobar-container-unicode{font-family: Meiryo, 'MS PGothic', 'Arial Unicode MS', Sans-Serif;}