/* vim:set tabstop=8 softtabstop=8 shiftwidth=8 noexpandtab: */ /** * * LICENSE: GNU General Public License, version 2 (GPLv2) * Copyright 2001 - 2013 Ampache.org * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License v2 * as published by the Free Software Foundation. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. * */ /*********************************************** General style rules ***********************************************/ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; margin:0; padding:0; } body { line-height:1; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:12px; color:#111; background:#e8e8e8; } blockquote,q { quotes:none; } blockquote:before,blockquote:after,q:before,q:after { content:none; } :focus { outline:0; } del { text-decoration:line-through; } table { border-collapse:collapse; border-spacing:0; } .error { color:#c33; } a { color:#111; text-decoration:none; } h3 { font-size:20px; } hr { border-top: 1px solid #bbb; border-bottom: 1px solid #eee; border-right: 0; border-left: 0; } /*********************************************** Wrappers ***********************************************/ #maincontainer { width:1100px; } #sidebar { width:140px; } #content { margin-top:32px; margin-left:160px; width:945px; } .box { margin-top:5px; } #rightbar { width:100%; position:fixed; clear:both; bottom: 0; background: #333; z-index: 10; } #footer { width: 1100px; margin-top: 20px; margin-bottom: 120px; } /*********************************************** Header ***********************************************/ #header { background:#222; line-height:30px; height:50px; padding:7px; } #header .box-inside { width:550px; text-align:right; float:right; } #header .clearfix { clear:none; } #header .box-inside input { border:2px solid #666; border-radius:2px; background:#000; font-weight:700; color:#eee; font-size:10px; width:120px; padding:4px; } #header input.button { width:80px; background:#222; } #header #advSearchBtn { color:#aaa; padding:4px; } #header #loginInfo { color:#eee; } #header #loginInfo a { color:#ccc; } /*********************************************** Sidebar ***********************************************/ #sidebar-page { position:absolute; padding-bottom:0.5em; width:140px; left:7px; } #sidebar-tabs { width:140px; background:#e8e8e8; float:left; padding:7px; margin-left: 8px; } #sidebar-tabs li.sb1 { float:left; margin-right:5px; } #sidebar-tabs .sb2 li { background:#fff; border-radius:4px; margin-top:7px; padding:7px; } #sidebar-tabs .sb2 li h4 { font-weight:700; display:block; border-radius:3px; background:#ddd; color:#222; padding:5px; } #sidebar-tabs .sb2 li ul li { background:#fff; border-radius:0; margin-top:0; padding:0; } #sidebar-tabs .sb2 li ul li a { font-weight:700; display:block; border-radius:3px; padding:5px; } #sidebar-tabs .sb2 li ul li a:hover { background:#d2e6f9; } #sidebar-tabs .sb2 #browse_filters li { background:#f9f9f9; } #sidebar-tabs .sb2 #browse_filters #multi_alpha_filterLabel { margin:5px 3px 0; display: block; } #sidebar-tabs .sb2 #browse_filters #multi_alpha_filter { border:1px solid #bbb; border-radius:2px; padding:4px; width: 115px; } /*********************************************** Rightbar ***********************************************/ #rightbar { background:#ddd; padding:7px; border-top: 3px solid #999; } #rightbar #rb_action { width: 130px; float: left; } #rightbar #rb_action li { display: inline; } #rightbar #rb_action .submenu { display:none; position:absolute; width:120px; padding:0.6em; background: #fff; } #rightbar #rb_action .submenu li a { padding: 1px; border-bottom: 1px solid #ccc; display: block; } #rightbar #rb_action li:hover .submenu { display:block; } #rightbar #rb_current_playlist { float: left; width: 800px; height: 40px; } #rightbar #rb_current_playlist li { border: 1px solid #aaa; border-radius: 4px; color: #333; padding: 2px 5px; float: left; margin: 2px; } #rightbar #rb_current_playlist li a { } #rightbar #rb_current_playlist .even { background: #d3d3d3; } #rightbar #rb_current_playlist li img { } #rightbar #rb_current_playlist li .delitem img { vertical-align: top; width: 13px; opacity: 0.6; } /*********************************************** Content ***********************************************/ #ajax-loading { position:absolute; background:#444; text-align:center; width:90px; top:0; color:#bbb; margin:0 auto; padding: 3px 1px 3px 10px; border: 2px solid #333; border-top: 0px; border-left: 0px; background: #444 url(../images/ajax-loader.gif) no-repeat 2px; display: none; } .box-content h3.box-title,#browse_content .box h3.box-title { display:block; background:#888; color:#eee; border-bottom:1px solid #335b0d; border-top-right-radius:3px; border-top-left-radius:3px; font-weight:400; padding:7px; } #browse_content .box.browse_song h3.box-title { background:#66B717; } #browse_content .box.browse_album h3.box-title { background:#09c; } #browse_content .box.browse_artist h3.box-title { background:#c60; } .list-header { border-left:1px solid #bbb; border-right:1px solid #bbb; border-bottom: 1px solid #bbb; padding:7px; } table.tabledata { width:100%; text-align:left; border:1px solid #bbb; } table.tabledata th { border:1px solid #bbb; border-left:1px solid #ccc; border-right:1px solid #ccc; background:#eee; font-weight:700; font-size:11px; color:#444; padding:7px 10px; } #browse_content table.tabledata th, #browse_content table.tabledata { border-top: 0px; } table.tabledata tbody { background:#fff; } table .th-bottom { border-top: 1px solid #ccc; } table.tabledata tbody td { vertical-align:middle; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding:4px 10px; } #browse_content table.tabledata tbody tr:hover { background:#b3d6f7; } table.tabledata tbody .odd { background:#eee; } table.tabledata tbody .cel_add { width:14px; text-align: center; } table.tabledata tbody .cel_artist { min-width:120px; } table.tabledata tbody .cel_action { width:70px; } table.tabledata tbody td.cel_rating { min-width:93px; padding:4px 3px; } table.tabledata tbody .cel_tags { max-width:80px; } table.tabledata tbody .cel_cover img { border: 4px double #bbb; } .box_preferences h4 { font-size:15px; background:#555; color:#eee; font-weight:400; border:1px solid #333; padding:5px; } /*********************************************** Content (info-box) ***********************************************/ #content .info-box h3 { margin-top:10px; } #content .info-box .box-content div.star-rating { width:150px; max-width:150px; } /* Random album (homepage) */ #random_selection .random_album { float:left; width:125px; margin-bottom: 10px; text-align: center; } #random_selection .random_album div { display: inline; } #random_selection .random_album img { border: 4px double #ccc; } #random_selection .random_album .star-rating { float: left; } #random_selection .random_album .play_album { float: left; margin-left: 7px; } #random_selection .random_album .play_album a img { border: 0px; } #random_selection .box-bottom { clear:left; } /*********************************************** Content (Tag cloud) ***********************************************/ .box-content #tag_filter { padding:5px 0px; } .clearfix { clear: left; } .box-bottom { clear: both; } span.fatalerror { color: #c60; padding: 5px; display: block; } .box-content #tag_filter span { padding: 2px 6px; border: 1px solid #bbb; margin: 1px; float: left; background: #e8e8e8; } .box-content #tag_filter span:hover { background: #ddd; color: #222; border: 1px solid #888; } /*********************************************** Content (inline edit) ***********************************************/ .inline-edit select { max-width: 200px; } /*********************************************** Content (information-actions) ***********************************************/ #information_actions { margin-top:10px; width:300px; } #information_actions h3 { /* only showing up in album view, so strange..bug*/ } #content .info-box .box-content .album_art { float: right; border: 4px double #ccc; } #information_actions ul li { border-bottom:1px solid #ccc; padding:3px 0; } #information_actions .star-rating li { padding:0; } #information_actions li img { vertical-align:top; } #information_actions li a { vertical-align:bottom; } #information_actions li a:hover { color:#09c; } /************************************************/ /* Styles for the star ratings */ /************************************************/ .star-rating { position:relative; } .dynamic-star-rating { width:95px; } .star-rating ul, .star-rating a:hover, .star-rating .current-rating { background: url(../../../themes/fresh/images/ratings/star_rating.png) left -1000px repeat-x; } .star-rating ul { position:relative; width:80px; height:15px; overflow:hidden; list-style:none; margin:0; padding:0; background-position: left top; } .star-rating li { display: inline; } .star-rating a, .star-rating span, .star-rating .current-rating { position:absolute; top:0; left:0; text-indent:-1000em; height:15px; line-height:15px; outline:none; overflow:hidden; border:none; } .star-rating .star1 { width:20%; z-index:6; } .star-rating .star2 { width:40%; z-index:5; } .star-rating .star3 { width:60%; z-index:4; } .star-rating .star4 { width:80%; z-index:3; } .star-rating .star5 { width:100%; z-index:2;} .star-rating .current-rating { z-index:1; background-position: left bottom; } .star-rating a.star0 { left:0px; width:16px; background: url(../../../images/ratings/x_off.gif) left top; } .dynamic-star-rating a:hover { background-position: left center; } .dynamic-star-rating a:hover.star0 { background: url(../../../images/ratings/x.gif) left top; } .dynamic-star-rating ul { left:16px; } /*********************************************** Content (Track view) ***********************************************/ dl.song_details { padding: 0.5em; } dl.song_details dd { margin: 0 0 0 95px; padding: 0 0 0.5em 0; } dl.song_details dt { float: left; clear: left; width: 80px; text-align: right; font-weight: bold; color: #c60; } dl.song_details a:hover { color: #09c; text-decoration: underline; } /*********************************************** Footer ***********************************************/ #footer { text-align:right; } #footer a:hover { color: #09c; text-decoration: underline; } /*********************************************** Login ***********************************************/ #loginPage #header { padding-left: 20px; border: 1px solid #000; } #loginPage #maincontainer { width: 470px; margin: 40px auto 0; background: #fff; border: 1px solid #ddd; } #loginPage #loginbox { padding: 20px; } #loginPage #loginbox h2 { display: none; } #loginPage #loginbox label { float: left; width: 110px; font-weight: bold; color: #333; text-align: right; vertical-align: middle; line-height: 30px; margin-right: 20px; } #loginPage #loginbox .loginfield input { padding: 5px; border: 1px solid #ccc; width: 170px; color: #444; font-size: 12px; outline: 0px; vertical-align: middle; } #loginPage #loginbox a.button { color: #777; cursor: pointer; padding: 4px 10px; } #loginPage #loginbox a:hover { color: #111; } #loginPage .loginfield { width: 400px; } #loginPage span.error { display: block; clear: left; padding: 10px; background: #ff9999; border: 1px solid #cc3333; font-weight: bold; color: #990000; text-align: center; margin-bottom: 10px; } #loginPage .formValidation { clear: left; background: #eee; padding: 5px 10px; border: 1px solid #ddd; text-align: center; } #loginPage #loginbox input.button { padding: 4px 10px; border: 1px solid #bbb; font-weight: bold; color: #333; background: #e9e9e9; cursor: pointer; } #loginPage input#rememberme { margin-top: 7px; } #loginPage input#lostpasswordbutton { margin-left: 130px; } #loginPage #loginbox input.button:hover { background: #ddd; border: 1px solid #aaa; } #loginPage #footer { width: 470px; margin: 10px auto; color: #888; } #loginPage #footer a { color: #555; } /*********************************************** Server settings ***********************************************/ table.tabledata .cel_php_setting, table.tabledata .cel_configuration, .cel_preference { width: 200px; } /*********************************************** Other ***********************************************/ ol,ul,#rightbar ul { list-style:none; } ins,#rightbar a { text-decoration:none; } .clearfix,#content .info-box .box-content,#additional_information { clear:both; } #header #headerlogo { float:left; } #header .box-inside div,#header .box-inside form,#rightbar,.star-rating li { display:inline; } .list-header a:hover { text-decoration:underline; } #localplay-control span,.box-content #tag_filter span { cursor:pointer; }