/*
-------------------------------------------------------------------

Turntubelist
© Earle Castledine and Henry Tapia 2008

-------------------------------------------------------------------
*/

* { margin: 0; padding: 0; border: 0; }

body { background:#2c3336 url(../images/bg.gif) left top repeat-x; margin:0 auto; font-size: 75%; text-align: center; font-family: Arial, Helvetica, sans-serif; color: #a6b3ba; }
a, a:link { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ul li { list-style-type: none; }

.button { padding: 2px 8px; border: 1px solid #32383b; background: #545d61 url(../images/button-bg.gif) left top repeat-x; font-size: 1em; font-family: inherit; color: #fff; }

#Container { margin: 0 auto; text-align: left; width:960px; position: relative; }

/* non-javascript */
noscript p, .loading { text-align: center; margin: 4em; color: #fff; }
.loading { display: none; }

/* 
header
-----------------------------------
 */
#Header { background: url(../images/header-bg.jpg) center top no-repeat; height: 78px; }
#Header h1, #Header h2 { float: left; height: 78px; font-size: 1em; }
#Header h1 a { display: block; }
#Header h2 { width: 184px; position: relative; text-indent: -9999px; }
#Header h2 span { display: block; width: 184px; height: 78px; position: absolute; top: 0; left: 0; background: url(../images/tagline.png) no-repeat; }
#Header .Status { float: left; padding: 2.5em 1em; width: 372px; text-align: right; }
#Header .poweredby { float: right; padding: 1em 0; }

/* 
toggle sections
-----------------------------------
 */
.section { background-color: #344046; padding: 2px 10px; }
.section-top, .section-bottom { height: 8px; background: left top no-repeat; }
.section-top { background-image: url(../images/curve-top.png); }
.section-bottom { margin-bottom: 10px; background-image: url(../images/curve-bottom.png); }
.section .toggle { padding-left: 14px; color: #a6b3ba; cursor: pointer; background: url(../images/arrow-showhide.gif) 0px 2px no-repeat; }
.section .toggle.open { background-position: 0px -18px; }

/* 
mixer
-----------------------------------
 */
#MixMaster { clear: both; position: relative; }

.Chan_Container { position: relative; background-color:#2c373c; padding: 5px 10px; width:447px; height:264px; }
.Chan_Container  h2 { margin-bottom: .25em; font-size: .833em; color: #e5ecef; height: 1.5em; overflow: hidden; }
#Chan1_Title, #Chan2_Title { margin-left: .5em; color: #A6B3BA; }
#Chan1_Container { float:left; }
#Chan2_Container { float:right; }
.Chan_Playlist { width:136px; height:196px; padding: 2px; background-color:#344046; color:#d6dee3; font-family: inherit; font-size: 1em; }
.Chan_Playlist ul { list-style:none; font-size: .909em;}
#Chan1_ul, #Chan2_ul { height:100%; }
#Chan1 p, #Chan2 p { width: 248px; padding: 80px 20px 0 20px; }

.trackItem { position: relative; height: 1.273em; white-space: nowrap; padding: 1px 2px; cursor: pointer; background-color:#344046;}
.trackItem.selected { padding-left: 14px; background: #335a6e url(../images/currently-playing.gif) 3px 3px no-repeat; }
.trackItem.info-open { background-color: #1f282c; z-index: 100; }
.trackHandle { color:#a6b3ba; white-space: nowrap; z-index: 1; }
.trackHandle.over { color:#515d63; }
.trackItem.selected .trackHandle.over { color:#dde3e6; }
.trackControls { zoom: 1; display: none; position: absolute; top: 0; right: 0; width: 46px; height: 14px;  background-color: #344046; }
.trackItem.info-open .trackControls { background-color: #1f282c; }
.trackItem.selected .trackControls { background-color: #335a6e; }
.trackDelete, .trackLoad, .trackInfo { zoom: 1; height: 10px; background: url(../images/playlist-buttons.png) no-repeat; }
.trackControls .trackDelete, .trackControls .trackLoad, .trackControls .trackInfo { position: absolute; top: 2px; }
.trackLoad { width: 15px; right: 27px; background-position: 0 0; }
.trackInfo { width: 11px; right: 15px; background-position: -16px 0; }
.trackDelete { width: 11px; right: 0; background-position: -28px 0; }

.dialog { position: absolute; z-index: 10; padding: 10px; border: 3px solid #1f282c; background-color: #2c373c; color: #6c777c; white-space: normal; }
.dialog p { margin-bottom: .5em; }
.dialog a { color: #d6dee3; }
.close { position: absolute; width: 10px; height: 9px; background: url(../images/dialog-close.gif) no-repeat; cursor: pointer; }

#Chan1_Display { float:left; }
#Chan2_Display { float:right; }
#Chan1 { float:right; }
#Chan2 { float:left; }

#Chan1_Playlist .trackItem .dialog { left: 12px; }
#Chan2_Playlist .trackItem .dialog { left: -26px; }
.trackItem .dialog { top: 17px; width: 130px; cursor: default; }
.trackItem .dialog .thumb { float: left; }
.trackItem .dialog .duration, .trackItem .dialog .star-rating { margin-left: 46px; }
.trackItem .dialog .duration { color: #a6b3ba; }
.trackItem .dialog .arrow { position: absolute; left: 36px; top: -13px; }
.trackItem .dialog .close { position: absolute; right: 2px; top: 4px; }
.trackItem .dialog .title { width: 122px; margin-bottom: .75em; border: 1px solid #4b5f69; background-color: #344249; font-size: 1em; font-family: inherit; color: #fff; }
.trackItem .dialog .button { padding: 3px 6px; margin-right: 3px; }

.options { padding: 2px; margin-top: 4px; background-color: #283034; font-size: .901em; }
.options .toggle-area { display: none; }
.options .toggle-area { display: none; }
.options ul { width: 118px; padding:4px 4px 4px 14px; background-color: #344046; color:#6C777C; }
.options li p { cursor: pointer; }
.options li p:hover { color: #A6B3BA; }

#MixVids { position: relative; z-index: 10; zoom: 1; }
#MixControls  { clear:both; height:48px; position: relative; z-index: 1; }
#MixFader { float: left; width: 452px; padding: 0 10px; margin: 12px 7px 0 7px;}
#Chan1_Controls, #Chan2_Controls { position: relative; float:left; width: 207px; height: 40px; padding: 0 10px 8px 10px; background-color: #2c373c; zoom: 1; }
#Chan1_Volume, #Chan2_Volume { float:left; margin-left: 8px; }
#Chan1_Play, #Chan2_Mute { margin: 5px 0 0 8px; }
#Chan1_Mute { margin-left: 14px; }

.play-toggle { float: left; margin-top: 5px; width: 63px; height: 35px; cursor: pointer; background: url(../images/playback-buttons.gif) 0px -37px no-repeat; }
.play-toggle div { width: 63px; height: 35px; background: url(../images/playback-buttons.gif) 0px 0px no-repeat; }
.set-cue { float: left; margin: 5px 0 0 8px; width: 43px; height: 21px; padding-top: 14px; cursor: pointer; background: url(../images/playback-buttons.gif) -65px 0 no-repeat; text-align: center; font-size: 0.901em; color: #dce0ea; }
.set-cue.armed { background-position: -65px -37px; }
.arm-cue { position: absolute; top: 5px; width: 43px; height: 12px; cursor: pointer; }
#Chan1_Arm { left: 100px; }
#Chan2_Arm { left: 80px; }

.mute { float: left; margin-top: 5px; width: 43px; height: 35px; cursor: pointer; background: url(../images/playback-buttons.gif) -110px -37px no-repeat; }
.mute div { width: 43px; height: 35px; background: url(../images/playback-buttons.gif) -110px 0px no-repeat; }
.chan-volume { width: 18px !important; height: 46px !important; position: relative; background: url(../images/slider-bg-chan-volume.gif) center center no-repeat !important;  }

#Chan1_Position { right: 10px; }
#Chan2_Position { left: 32px; }
.video-position { clear: both; position: absolute !important; bottom: 10px; height: 6px !important; width: 274px !important; border-top: 1px solid #1f272a; border-left: 1px solid #242d31; border-bottom: 1px solid #3d474c; border-right: 1px solid #364045; }
.video-position .ui-slider-handle  { width: 16px; height: 20px; top: -7px; left: 0px; background-image: url(../images/slider-handle-sm.png); }
.video-position .load-progress { position: absolute; bottom:1px; left: 0; width: 1%; height: 4px; background-color: #335a6e; }
#Chan1_Rewind { right: 289px; }
#Chan2_Rewind { left: 10px; }
.rewind { position: absolute; bottom: 6px; width: 19px; height: 14px; cursor: pointer; background: url(../images/rewind-button.gif) left top no-repeat; }
.rewind div { width: 19px; height: 14px; background: url(../images/rewind-button.gif) left bottom no-repeat; }

/* slider */
.ui-slider { width: 200px; height: 29px; position: relative; background-repeat: no-repeat; background-position: center center; }
.ui-slider-sm { width: 23px; height: 40px; position: relative; background-repeat: no-repeat; background-position: center center; background-image: url(../images/slider-bg-horiz.png); }
.ui-slider-handle { position: absolute; z-index: 1; width: 30px; height: 50px; top: -10px; left: 0px; background-image: url(../images/slider-handle.png); }
.ui-slider-sm .ui-slider-handle { position: absolute; z-index: 1; height: 18px; width: 30px; top: 0px; left: -5px; background-image: url(../images/slider-handle-horiz.png);  }
.ui-slider-handle-active { border: 0px dotted black;  }
.ui-slider-disabled .ui-slider-handle { opacity: 0.5; filter: alpha(opacity=50); }
.ui-slider-range { position: absolute; background: #50A029; opacity: 0.3; filter: alpha(opacity=30); width: 100%; height: 100%; }
.ui-slider-1 { background-image: url(../images/slider-bg-1.png); }

/* temporarily hide this stuff */
#test, #testbox, #Chan1_SetCue1, #Chan1_Cue, #Chan2_SetCue1, #Chan2_Cue { display: none; }

/* 
import/export
-----------------------------------
 */
#ImportExportBox { position:absolute; z-index: 20; width:300px; height:204px; padding: 3px; background-color:#2C373C; border:3px solid #1F282C; color:#6C777C; top:40px; left:320px; display:none; }
#ImportExportBox h2 { color:#E5ECEF; height:1.5em; margin:0.25em 0; font-weight: bold; font-size:0.833em;}
#ImportExportBox .close { right: 6px; top: 8px; }
#ImportExportArea { font-family: Arial, Helvetica, sans-serif; font-size:.909em; overflow:auto; width:290px; height:150px; margin: 3px; background-color:#344249; border:1px solid #4B5F69; color:#A6B3BA; }
#ImportExportBox .button { float: left; margin-left: 2px; }
#ImportExportBox #ImportExportClose { float: right; margin-right: 4px; }

/* 
general controls
-----------------------------------
 */
.hud { padding-top: 4px; }
.hud .button { padding: 3px 4px; }
.hud label { margin: 3px 0 0 0; float: left; font-size: .909em;  }
.hud #AutoPlay { margin: 0 0 0 6px; padding:0; vertical-align: text-bottom; }
.hud #helpButton { float: left; margin: 3px 3px 0 6px; font-size: .909em; cursor: pointer; }
.hud .helpButton { float: left; margin: 3px 3px 0 6px; font-size: .909em; cursor: pointer; }
.hud #helpButton img { margin: 2px 0 0 4px; vertical-align: text-bottom; }
#publishButton {padding-top: 3px; padding-bottom: 4px; margin-right:0;}

/* 
quick search
-----------------------------------
 */
#QuickSearch { clear: both; }
#QuickSearch h2 { float: left; margin: .25em 0; font-size: 1.833em; font-weight: normal; color: #fff; }
#QuickSearch form, #QuickSearch .blurb { float: left; margin: .25em 0 0 16px; display: inline; }
#QuickSearch .blurb { width: 320px; }
#QuickSearch  #search { padding: 3px; border: 1px solid #32383b; width: 312px; background: #e3e7e9 url(../images/field-bg.gif) left top repeat-x; font-size: 1.5em; }
#QuickSearch  form input { float: left; }
#QuickSearch  form .button { padding: 3px; width: 100px; margin-left: 5px; height: 30px; opacity: 0.999; }

#SearchResults { clear: both; /*padding-top: .15em; */}
#SearchResults .summary p#SearchResultsFound, #SearchResultsPaging { float: left; margin-right: 6px; }
#SearchResultsPaging li { float: left; margin-right: 2px; padding: 2px 5px; background-color: #222; cursor:pointer; }
#SearchResultsPaging li:hover { background-color: #d1010e; color: #fff; }
#SearchResultsPaging .selected { background-color: #2b3134; color: #586165; }
#SearchResultItems { clear: both; padding-top: .5em; }
/* *#SearchResultItems ul { background-color: #2c373c; } */
#SearchResultItems li { padding:4px; margin-bottom: 2px; background-color: #2c373c; }
#SearchResultItems li.alt{ background-color: #344046; }
#SearchResultItems li .SearchResultThumb { margin-top:2px; width:80px; height:53px; }
#SearchResultItems .SearchResultTitle { color: #fff; font-weight: bold; }
#SearchResultItems .AddToPlaylist { margin-right: 1px; padding: 0 5px; cursor:pointer; border: 1px solid #32383b; background: #545d61 url(../images/button-bg.gif) left top repeat-x; color: #fff; }
#SearchResultItems .AddToPlaylist:hover { background: #7f8e95 none; }
#SearchResultItems .SearchResultInfo, #SearchResultItems .SearchResultThumbContainer { float: left; padding-right: 12px; }
#SearchResultItems .SearchResultAddToPlaylist { float: right; width: 80px; }
#SearchResultItems .SearchResultThumbContainer { position: relative; }
#SearchResultItems .SearchResultThumbContainer .SearchResultAddToPlaylist { position: absolute; bottom: 2px; left: 1px; }
#SearchResultItems .SearchResultThumbContainer .SearchResultAddToPlaylist h3 { display: none; }
#SearchResultItems .SearchResultThumbContainer .SearchResultAddToPlaylist .AddToPlaylist { padding: 0 3px; font-size: .833em; }
#SearchResultItems .SearchResultInfo { width: 75%; }
#SearchResultItems .SearchResultAddToPlaylist h3 { margin-bottom: .25em; font-size: .916em; font-weight: normal; }
#SearchResultItems .SearchResultDuration, #SearchResultItems .star-rating, #SearchResultItems .views { float:left; margin-top: 1em; }
#SearchResultItems .SearchResultDuration { color: #fff; }
#SearchResultItems .star-rating { margin:1em 10px 0 10px;}
.star-rating { background:transparent url(../images/rate-star.png) repeat-x left top; height: 18px; display:block; }

/* 
footer
-----------------------------------
 */
#Footer { margin: 2em 10px; }
#Footer p { color: #5a5f61; }
#Footer p a { color: #5a5f61; font-weight: bold; }

/*
feedback and register form
-----------------------------------
*/
.feedback, .register { display: none; z-index: 100; top: 70px; left: 390px; width: 180px; }
.loginbox { display: none; z-index: 100; top: 70px; left: 390px; width: 180px; }
.publish { display: none; z-index: 100; top: 70px; left: 390px; width: 180px; }
.feedback h2, .register h2, .loginbox h2, .publish h2 { color:#E5ECEF; height: 1.5em; margin-bottom: .25em; font-weight: bold; font-size:0.833em;}
.feedback label, .register label, .register p, .loginbox label, .loginbox p, .publish label, .publish p, .publish span { display: block; margin: 6px 0 3px 0; font-size: .909em; }
.feedback input, .feedback textarea, .register input, .loginbox input, .publish input { width: 180px; margin-bottom: 3px; border: 1px solid #4b5f69; background-color: #344249; font-size: 1em; font-family: inherit; color: #fff;  }
.feedback textarea { height: 100px; }
.feedback .close, .register .close, .loginbox .close, .publish .close { right: 6px; top: 8px; }
.feedback .button, .register .button, .loginbox .button, .publish .button { width: 95px; margin-top: 4px; }

 /* 
video stats display
-----------------------------------
 */
.video-stats { width: 298px; height:249px; float:left; margin-top:-218px; font-size:8pt; }
.video-stats input { width:60px; }
.video-stats span { background-color:#fff; padding-left:3px; padding-right:3px; }

 /* 
inline help boxes
-----------------------------------
 */
.helpBox { position:absolute; z-index:999; display:none; padding: 10px; font-size: 0.901em; border: 1px solid #c4c29a; background: #fffcd1 url(../images/help-bg.png) center top repeat-x; color: #353945; }
.helpBox h1 { font-size: 1em; margin-bottom: .5em; }
.helpBox p, .helpBox  ul  { margin-bottom: 1em; }
.helpBox a { font-weight: bold; color: #3d68aa; }
.helpBox .close { top: 4px; right: 4px; width: 7px; height: 7px; background-image: url(../images/help-close.gif); }
.helpBox .arrow { position: absolute; background: transparent no-repeat; }

#helpMainLeft{ top: 20px; left:145px; width:280px; height:210px; }
#helpMainLeft .arrow { top: 20px; left: -7px; width: 7px; height: 13px; background-image: url(../images/help-arrow1.png); }

#helpMainRight{ top: 20px; left: 20px; width: 270px; height:140px; }
#helpMainRight .arrow { top: 20px; right: -7px; width: 7px; height: 13px; background-image: url(../images/help-arrow3.png); }

#helpMixer{ top: 230px; left: 20px; width: 270px; height: 65px; }
#helpMixer .arrow { top: 60px; left: -7px; width: 7px; height: 13px; background-image: url(../images/help-arrow1.png); }

#helpSearch { top: 440px; left: 595px; width: 178px; height: 74px; }
#helpSearch .arrow { top: 40px; left: -7px; width: 7px; height: 13px; background-image: url(../images/help-arrow1.png); }

.helpBox p img { vertical-align: -5%; margin: 0 2px; }
.helpBox  .AddToPlaylist { font-size:0.833em; margin: 0 2px; padding: 0 5px; border: 1px solid #32383b; background: #545d61 url(../images/button-bg.gif) left top repeat-x; color: #fff; }

#helpButtonDesc { cursor:pointer; text-decoration:underline; }
#HelpBar { position:relative; padding:5px; margin-bottom:5px; display:none; z-index: 10; }
#HelpBar .close { right:4px; top: 4px; }

/* 
jScrollPane styles
-----------------------------------
 */
.jScrollPaneContainer { position: relative; overflow: hidden; z-index: 10; }
.jScrollPaneTrack { position: absolute; cursor: pointer; right: 0; top: 0; height: 100%; background: #4b5960; }
.jScrollPaneDrag { position: absolute; background: #6e787d url(../images/scroll-handle-bg.gif) center center no-repeat; cursor: pointer; overflow: hidden; border-top: 1px solid #4b5960; border-bottom: 1px solid #4b5960; }
.jScrollPaneDragTop { position: absolute; top: 0; left: 0; overflow: hidden; }
.jScrollPaneDragBottom { position: absolute; bottom: 0; left: 0; overflow: hidden; }
a.jScrollArrowUp { display: block; position: absolute; z-index: 1; top: 0; right: 0; text-indent: -2000px; overflow: hidden; background: #61727b url(../images/scroll-up-bg.gif) 0 -9px no-repeat; height: 9px; }
a.jScrollArrzowUp:hover {  background-color: #8c989f;	background-position: center top; }
a.jScrollArrowDown { display: block; position: absolute; z-index: 1; bottom: 0; right: 0; text-indent: -2000px; overflow: hidden; background: #61727b url(../images/scroll-down-bg.gif) 0 -9px no-repeat; height: 9px; }
a.jScrollArrowDown:hover { background-color: #8c989f; background-position: center top; }
a.jScrollActiveArrowButton, a.jScrollActiveArrowButton:hover { /*background-color: #f00;*/ }

/* 
slightly enhanced, universal clearfix hack 
-----------------------------------
 */
.clearfix:after { visibility: hidden; display: block; font-size: 0; 	content: " "; clear: both; height: 0; }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */


#SetName { width: 100px; float:left; margin-top: 6px; border: 1px solid #4b5f69; background-color: #344249; font-size: 1em; font-family: inherit; color: #fff; }