#side_playlist { width: 40%; min-height: 475px; padding: 8px; font-size: 16px; } #side_playlist, #side_playlist ul, #side_playlist li { float: left; } #spl_sortable, #spl_sortable > li, #side_playlist > div, #spl_editor, .spl_artist, .spl_cue_in, .spl_fade_in, .spl_cue_out, .spl_fade_out { clear: left; } #side_playlist button { font-size: 12px; } #side_playlist input, #side_playlist textarea { width: 200px; } #side_playlist textarea { height: 100px; } #spl_sortable { list-style: none; padding:0; height: 300px; overflow: auto; width:100%; margin-top:0; } #side_playlist li { width: 99.5%; margin-bottom:-1px; position:relative; } #side_playlist li div.list-item-container, #side_playlist li div.list-item-container.ui-state-active { height:56px; border: none; } #spl_name { } .ui-icon-closethick { margin-top: 7px; } .spl_title { font-size:14px; } .spl_playlength { float:right; font-size:14px; padding:0 5px 0 0; width:100px; text-align:right; } .spl_artist { font-size:12px; } /*#spl_editor { height: 50px; }*/ #spl_editor > div > span { /* display: inline-block; width: 150px;*/ } .ui-icon-closethick, .ui-icon-play, .spl_fade_control, .spl_playlength, .spl_text_input { cursor: pointer; } .spl_text_input input { cursor: text; } #spl_error { font-size: 14px; padding: 0.3em; /*width: 440px;*/ text-align: center; } #side_playlist h3 { font-size:17px; margin:9px 0 3px 0; padding:0; color:#1c1c1c; font-weight:normal; clear:both; float:left; } #side_playlist h4 { font-size:15px; margin:8px 0 10px 0; padding:0; color:#1c1c1c; font-weight:normal; clear:both; float:left; } #side_playlist h3 + h4 { margin:0 0 11px 0; } #spl_sortable a.big_play { display:block; width:20px; height:50px; margin:2px 0 0 2px; text-align:center; border:1px solid #5b5b5b; float:left; background-color: #707070; background: -moz-linear-gradient(top, #707070 0, #666666 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #707070), color-stop(100%, #666666)); } #spl_sortable a.big_play:hover { border:1px solid #282828; background-color: #3b3b3b; background: -moz-linear-gradient(top, #3b3b3b 0, #292929 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #3b3b3b), color-stop(100%, #292929)); } #spl_sortable a.big_play .ui-icon-play { margin: 17px 0 0 1px; } #spl_sortable a.big_play .ui-icon-pause { margin: 17px 0 0 1px; } #spl_sortable a.big_play:hover .ui-icon-play, #spl_sortable a.big_play:hover .ui-icon-pause { background-image:url(redmond/images/ui-icons_ff5d1a_256x240.png); } #spl_sortable .ui-icon-closethick { position:absolute; top:3px; right:6px; z-index:3; } #spl_sortable .ui-icon-closethick:hover { background-image:url(redmond/images/ui-icons_ff5d1a_256x240.png) } #spl_sortable .spl_fade_control { position:absolute; right:35px; z-index: 6; height:15px; width:33px; font-size:9px; background-color:transparent; } #spl_sortable li .container { } #spl_sortable .text-row { height: 20px; line-height: 19px; overflow: hidden; padding: 0 30px 0 10px; text-indent: 2px; margin:-1px 0 0 0; float:none; } #spl_sortable .top { padding-top:9px; } #spl_sortable li .spl_fade_control.ui-state-default { background: transparent url(images/crossfade_playlist.png) no-repeat 0 0; border:none; } #spl_sortable li .spl_fade_control.ui-state-active { background: transparent url(images/crossfade_playlist.png) no-repeat 0 -30px; border:none; } #spl_sortable li .crossfade, #spl_sortable li .cue-edit { background:#debc9e url(images/crossfade_bg.png) repeat-x 0 0 !important; border:1px solid #5d5d5d; border-width: 1px 0 0 0; min-height:35px; } #spl_sortable li .cue-edit { background:#b6d1d5 url(images/cue-editor_bg.png) repeat-x 0 0 !important; } #spl_sortable dl.inline-list { margin:10px 0 0 37px; } #spl_sortable li .spl_fade_start, #spl_sortable li .spl_fade_end { background-color: transparent; float:right; font-size: 9px; height: 15px; right: 35px; width: 33px; margin-top:2px; } #spl_sortable li .spl_fade_start.ui-state-default { background: transparent url(images/fade_in.png) no-repeat 0 0; border:none; } #spl_sortable li .spl_fade_start.ui-state-active { background: transparent url(images/fade_in.png) no-repeat 0 -30px; border:none; } #spl_sortable li .spl_fade_end.ui-state-default { background: transparent url(images/fade_out.png) no-repeat 0 0; border:none; } #spl_sortable li .spl_fade_end.ui-state-active { background: transparent url(images/fade_out.png) no-repeat 0 -30px; border:none; } .crossfade dl.inline-list, .cue-edit dl.inline-list, .crossfade-main dl.inline-list { padding-bottom:5px; } .crossfade dl.inline-list dt, .cue-edit dl.inline-list dt, .crossfade-main dl.inline-list dt { clear: none; min-width: 40px; } .crossfade dl.inline-list dd, .cue-edit dl.inline-list dd, .crossfade-main dl.inline-list dd { float: left; font-size: 12px; margin: 0; padding: 0 25px 0px 15px; } .edit-error { clear:both; color:#b80000; margin:0 0 0px 37px; padding-bottom:4px; font-size:12px; display:none; } .edit-error:last-child { padding-bottom:10px; } .spl_text_input { color:#fff; } .crossfade-main { background:#debc9e; border:1px solid #5b5b5b; padding:10px 10px 6px 10px; margin:0 1px 16px 0; position:relative; } .crossfade-main .edit-error { padding-bottom:4px; margin:0; } .crossfade-main .edit-error:last-child { padding-bottom:2px; } .crossfade-main .ui-icon-closethick { position: absolute; right: 6px; top: 3px; z-index: 3; }