1/*
2 * CSS styleshet for the "Back In Black" theme.
3 */
4
5@import "default.css";
6
7@import "midnight.css";
8
9@import url(//fonts.googleapis.com/css?family=Montserrat:400,700);
10
11@import "theme/madsonic/jquery-ui-1.10.4.custom.css";
12
13@import "playericons/playericonsHTML5.css";
14
15@import "jquery.mCustomScrollbar3.css";
16
17@import "videoPlayerLight.css";
18
19@import "scrollbar-px.css";
20
21body, form, label, table, a {
22    font-family: 'Montserrat', Arial, serif;
23}
24
25body {
26    font-size: 9pt;
27}
28
29h2, h1, h1 a, .logo {
30    font-family: 'Montserrat', Arial, serif;
31}
32
33h2 {
34    font-family: 'Montserrat', Arial, serif;
35    font-size: 10pt;
36}
37
38table {
39    font-size: 100%;
40    line-height: 150%;
41    padding: 0;
42    border: 0;
43    margin: 0 0 0.4em 0;
44}
45
46.mainframe #content_artist  #anchor_list a{
47    font-size: 16pt;
48}
49
50.divIdCoverBack {
51top: -58px;
52left: 1px;
53}
54
55.logo {
56    padding-right:0.8em;
57}
58
59.topframe .logo img{
60    width:155px;
61    height:38px;
62    margin-top: -20px;
63}
64
65.maincontrol a {
66    font-weight: 700;
67}
68
69.maincontrol a img {
70    padding-bottom: 5px;
71    padding-right: 1px;
72    padding-left: 1px;
73    /* display:none; */
74    width:0px;
75    hight:0px;
76    opacity:0.30;
77    filter:alpha(opacity=30); /* For IE8 and earlier */
78}
79
80.playlistframe .songTitle {
81    font-size: 11px;
82}
83
84.songTitle {
85   font-size: 100%; v
86
87}
88
89.mainframe .controls {
90    margin: 0px 1px 1px 1px;
91    padding: 0 0 0 0;
92}
93
94.playlistframe .controls {
95    margin: 0 0 1px;
96}
97
98.playlistframe .starSong {
99    margin: 0 4px 1px 2px;
100}
101
102.leftpanel .bgcolor2 {
103    background: url("../icons/xmas/left.png") repeat-x fixed;
104}
105
106.leftpanel {
107    background-image:url( "../icons/xmas/background-left.png" );
108    background-repeat:repeat;
109    background-attachment:fixed;
110    background-color:#5D053A;
111}
112
113/* Link color */
114a:link, a:active, a:visited, a:link *, a:active *, a:visited * {
115    color: #E0EBF4;
116}
117
118a:hover, a:hover * {
119    text-decoration: none;
120    color: orange;
121    text-shadow: 0.0em 0.0em 0.2em #111;
122}
123
124.topframe a:hover, .topframe a:hover * {
125    opacity:0.85;
126    filter:alpha(opacity=85);
127}
128
129/* Main frame image & colour */
130.loginsplash  {
131    background: #222 url('../icons/madsonic_black/backgroundalpha.png') no-repeat top left;
132    background-size: cover;
133
134    border: 5px solid #111;
135    -webkit-border-radius: 3px;
136    -moz-border-radius: 3px;
137    border-radius: 3px;
138    opacity:0.95;
139    filter:alpha(opacity=95); /* For IE8 and earlier */
140    -moz-box-shadow:    0 0 35px 15px #222;
141    -webkit-box-shadow: 0 0 35px 15px #222;
142    box-shadow:         0 0 35px 15px #222;
143}
144
145/* Main frame image & colour
146.mainframe {
147    background-image:url('../icons/xmas/background.png');
148    background-repeat:no-repeat;
149    background-attachment:fixed;
150    background-color: #033A36;
151    background-position: top left;
152}*/
153
154.topframe {
155    background: url("../icons/xmas/top.png") no-repeat fixed;
156}
157
158.artistindex {
159    background-color: #222;
160}
161
162#artistBio {
163    line-height: 18px;
164    padding-bottom: 15px;
165    border-top: 1px dotted #888;
166    padding-top: 15px;
167    font-size: 9.0pt;
168}
169
170
171.ruleTableHeaderPlaylists {
172	padding-right:1em;
173	border-top: 1px dotted #333;
174	border-bottom: 1px dotted #333;
175}
176
177.ruleTableCellPlaylists {
178	padding-top: 4px;
179	padding-right:1em;
180	border-top: 1px dotted #333;
181	border-bottom: 1px dotted #333;
182}
183
184/* table.music tr { line-height: 16px; } */
185
186table.music tr:nth-of-type(even) { background: rgba(0,0,0,.4); }
187table.music tr:nth-of-type(odd) { background: rgba(0,0,0,.2); }
188
189
190/* #playlistBody tr:nth-of-type(even) { background: #0d0d0d; } */
191
192/* The primary background color (light gray). */
193.bgcolor1 {
194    background-color: #0F3939;
195    /*
196    background-image: url("../icons/xmas/bg-noise.jpg");
197    background-repeat: repeat;
198    background-size: 550px 250px;
199    */
200}
201
202.playingframe.bgcolor1 {
203    /*
204    background-image:url( "../icons/xmas/bg-noise.jpg" );
205    background-repeat: repeat;
206    background-size: 550px 250px;
207    */
208}
209
210.ui-widget input {
211    color: #888 !important;
212}
213
214#content_left .bgcolor2 {
215    background-color: #0F3939;
216}
217
218h2.bgcolor2 {
219    background-color: #0F3939;
220}
221
222.mainframe .bgcolor2 {
223    background-color: #0F2D2D;
224}
225
226.topframe.bgcolor2 {
227    background-color: #0F3939;
228}
229
230.bgcolor2, .log  {
231    background-color: #0F3939;
232}
233
234.ruleTableHeader {
235    background-color: #012724;
236}
237
238table.editor .ruleTableHeader,
239table.editor .ruleTableCellHeader,
240table.editor .ruleTableCell  {
241    border: 0px solid #012724;
242}
243.ruleTableHeader,
244.ruleTableCellHeader,
245.ruleTableCell ,
246.border1,
247.log {
248    border: 1px solid #444;
249}
250
251.leftpanel p.dense{
252    clear: both;
253    padding: 4px;
254    border-bottom: 1px dashed rgba(29, 29, 29, 0.5);
255    /* text-shadow: 2px 2px #080808; */
256    line-height: 1.1em;
257}
258
259.leftpanel p.dense:last-child{
260    border: none;
261}
262.leftpanel p.dense:first-child{
263    padding-top: 10px;
264}
265
266.leftpanel th img{
267    display: none;
268}
269
270/* Main frame image & colour */
271.mainframe.splash  {
272    /*
273    background-repeat:no-repeat;
274    background-attachment:fixed;
275    background-position: top right;
276    */
277}
278
279/* Back image */
280.back, .forward {
281    font-size: 9pt;
282    background: url("../icons/madsonic_black/back.png") no-repeat center left;
283    padding-left: 20px;
284    line-height: 20px;
285}
286
287/* Forward image */
288.forward  {
289    font-size: 9pt;
290    padding-left: 20px;
291    line-height: 20px;
292    background: url("../icons/madsonic_black/forward.png") no-repeat center left;
293}
294
295/* Forward image */
296.forwardright {
297    font-size: 9pt;
298    padding-right: 20px;
299    line-height: 20px;
300    background: url("../icons/madsonic_black/forward.png") no-repeat center right;
301}
302/*
303::-webkit-scrollbar {
304width: 10px;
305height: 10px;
306}
307
308::-webkit-scrollbar-track-piece  {
309background-color: #333;
310}
311
312::-webkit-scrollbar-thumb:vertical {
313height: 30px;
314background-color: #5A5A5A;
315}
316
317::-webkit-scrollbar-thumb:horizontal {
318width: 30px;
319background-color: #5A5A5A;
320}
321*/
322
323#content_artst .innerbox:hover {
324    opacity: 0.75;
325    filter: alpha(opacity=75);
326    border: 0;
327}
328
329#content_artst .innerbox {
330    opacity: 0.90;
331    filter: alpha(opacity=90);
332    border: 0;
333}
334
335#content_left .bgcolor2 {
336/*    background-color: #1F1F1F;
337    opacity: 0.80; */
338}
339
340#content_playqueue .bgcolor2 {
341    background-color: #111;
342}
343
344#content_playqueue .bgcolor1 {
345}
346
347#content_artst .bgcolor2 {
348    background-color: #1F1F1F;
349    opacity: 0.80;
350}
351
352#content_artst .bgcolor1 {
353    background-color: #333;
354    opacity: 0.90;
355}
356
357.dropshadow {
358    border: 1px solid #222;
359    -webkit-border-radius: 3px;
360    -moz-border-radius: 3px;
361    border-radius: 3px;
362    opacity:0.85;
363    filter:alpha(opacity=85);
364    -moz-box-shadow:    0 0 15px 5px #222;
365    -webkit-box-shadow: 0 0 15px 5px #222;
366    box-shadow:         0 0 15px 5px #222;
367}
368
369.dropshadow:hover {
370    opacity:0.95;
371    filter:alpha(opacity=95);
372    border: 1px solid #666;
373}
374
375.rankex {
376    white-space: nowrap;
377    font-size: 6pt;
378    line-height: 1.40em;
379    background: url('../icons/madsonic_black/rank.png') no-repeat right;
380    padding: 8px 3px 8px 8px;
381    margin-left: -2px;
382    color: #FFC200;
383    font-family: verdana, arial, sans-serif;
384}
385
386
387/* Custom */
388span.off {
389    background: #FFF !important;
390    border: solid 1px #FFFFFF !important;
391    font-size: 8pt;
392}
393
394span.on {
395    background: #33B5E5 !important;
396    border: solid 1px #FFFFFF !important;
397    font-size: 8pt;
398}
399
400span.off:hover {
401    background: #33B5E5 !important;
402    border: solid 1px #777777  !important;
403    font-size: 8pt;
404    }
405
406span.off2 {
407    border: solid 1px #777777  !important;
408    font-size: 8pt;
409}
410
411span.on2 {
412    background: #33B5E5 !important;
413    border: solid 1px #777777  !important;
414    font-size: 8pt;
415}
416
417span.off2:hover  {
418    background: #33B5E5 !important;
419    border: solid 1px #777777  !important;
420    font-size: 8pt;
421    }
422
423
424.ruleTableCellDB {
425    border: 1px solid #222;
426    white-space: nowrap;
427    font-size: 7pt;
428    margin: 1px;
429    padding: 2px;
430}
431
432.maincontrol {
433    line-height: 30px;
434}
435
436
437img.starSong {
438    margin-top: 4px;
439    margin-right: 8px;
440}
441
442img#starImage {
443    padding-left: 1px;
444    padding-right: 8px;
445    padding-bottom: 3px;
446}
447
448
449
450#bitrate_menu {
451    color: #999 !important;
452}
453
454 #toogleGenre {
455    top: 75px;
456}
457
458input {
459    background: none repeat scroll 0 0 #FFFFFF;
460    border-radius: 5px;
461    font-family: 'Montserrat', Arial, serif;
462    font-weight: 400;
463    padding: 6px 8px 6px 8px;
464	margin-left: 4px;
465    font-size: 12px;
466    color: #fff !important;
467    background-color: #0D3A3D;
468    border: 1px solid #006158;
469    background-repeat: repeat;
470    background-size: 140px 140px;
471}
472
473select {
474    background: none repeat scroll 0 0 #FFFFFF;
475    border: 1px solid #E1DBDB;
476    border-radius: 5px;
477    color: #444444 !important;
478    font-family: 'Montserrat', Arial, serif;
479    font-weight: 400;
480    font-size: 8pt;
481    padding: 5px 5px 5px 5px;
482	margin-left: 4px;
483    font-size: 11px;
484    color: #fff !important;
485    background-color: #0D3A3D;
486    border: 1px solid #006158;
487    background-repeat: repeat;
488    background-size: 140px 140px;
489}
490
491
492button{
493    background: #7d7e7d; /* Old browsers */
494    background: -moz-linear-gradient(top, #7d7e7d 0%, #4c4c4c 50%, #3d3d3d 53%, #2b2b2b 100%); /* FF3.6+ */
495    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(50%,#4c4c4c), color-stop(53%,#3d3d3d), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
496    background: -webkit-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
497    background: -o-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* Opera 11.10+ */
498    background: -ms-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* IE10+ */
499    background: linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* W3C */
500    border: 1px solid #111;
501}
502
503input[type=button]{
504    background: #7d7e7d; /* Old browsers */
505    background: -moz-linear-gradient(top, #7d7e7d 0%, #4c4c4c 50%, #3d3d3d 53%, #2b2b2b 100%); /* FF3.6+ */
506    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(50%,#4c4c4c), color-stop(53%,#3d3d3d), color-stop(100%,#2b2b2b)); /* Chrome,Safari4+ */
507    background: -webkit-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* Chrome10+,Safari5.1+ */
508    background: -o-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* Opera 11.10+ */
509    background: -ms-linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* IE10+ */
510    background: linear-gradient(top, #7d7e7d 0%,#4c4c4c 50%,#3d3d3d 53%,#2b2b2b 100%); /* W3C */
511    border: 1px solid #111;
512}
513input[type=submit]{
514    background: #3567a0; /* Old browsers */
515    background: -moz-linear-gradient(top, #3567a0 0%, #1c5396 50%, #1f4c87 53%, #0b3c74 100%); /* FF3.6+ */
516    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3567a0), color-stop(50%,#1c5396), color-stop(53%,#1f4c87), color-stop(100%,#0b3c74)); /* Chrome,Safari4+ */
517    background: -webkit-linear-gradient(top, #3567a0 0%,#1c5396 50%,#1f4c87 53%,#0b3c74 100%); /* Chrome10+,Safari5.1+ */
518    background: -o-linear-gradient(top, #3567a0 0%,#1c5396 50%,#1f4c87 53%,#0b3c74 100%); /* Opera 11.10+ */
519    background: -ms-linear-gradient(top, #3567a0 0%,#1c5396 50%,#1f4c87 53%,#0b3c74 100%); /* IE10+ */
520    background: linear-gradient(top, #3567a0 0%,#1c5396 50%,#1f4c87 53%,#0b3c74 100%); /* W3C */
521    border: 1px solid #06203e;
522}
523
524
525#listRows {
526    font-size: 11px;
527    float: left;
528    color: #fff !important;
529    display: block;
530    border: 1px solid #006158;
531}
532
533#listColumns {
534    font-size: 11px;
535    float: left;
536    color: #fff !important;
537    display: block;
538    border: 1px solid #006158;
539}
540
541#query {
542    font-size: 11px;
543    color: #222 !important;
544    border: 1px solid #eee;
545    background-image: url("../icons/madsonic_black/bg-white.jpg");
546}
547
548#j_username {
549    color: #222 !important;
550    border: 1px solid #ddd;
551    background-image: url("../icons/madsonic_black/bg-white.jpg");
552}
553
554#j_password {
555    color: #222 !important;
556    border: 1px solid #ddd;
557    background-image: url("../icons/madsonic_black/bg-white.jpg");
558}
559
560#moreActions option {
561    color:white !important;
562}
563
564#moreActions optgroup {
565    color:lightblue !important;
566    font-style:normal;
567}
568
569.mainframe .dense {
570white-space: nowrap;
571font-size: 10pt;
572margin: 8px;
573/* line-height: 1.5em; */
574}
575
576.mainframe .dense a {
577white-space: nowrap;
578font-size: 10pt;
579font-weight: 700;
580/* line-height: 1.5em; */
581}
582
583span {
584font-size: 10pt;
585}
586
587.online {
588    font-size: 8pt;
589	color: #83B578;
590}
591
592.offline {
593    font-size: 8pt;
594	color: #FAE157;
595}
596
597.easyPieChartBarColor {
598	color:#33B5E5;
599}
600.easyPieChartScaleColor {
601	color:#7E7E7A;
602}
603.easyPieChartTrackColor {
604	color:#41565D;
605}
606
607.highlight {
608    color: rgb(180, 220, 228);
609}
610
611.dd-theme-classic, .dd-all {
612    border-color:#006158 !important;
613    font-size: 9pt !important;
614    color: #eee !important;
615    padding: 8px 15px 8px 15px !important;
616}
617
618.ad {
619box-shadow: 0px 0px 15px #000;
620background-color: #181818;
621border-radius: 5px;
622}
623
624.mainframe.splash {
625	background-color:#134441  !important;
626}
627
628.nowPlaying {
629    padding: 0px 0px 5px 10px;
630    background-color: rgba(24, 24, 24, 0.33);
631}
632
633/* Color for warning messages. */
634.warning {
635    color: orange;
636}
637
638.status {
639	color: #FAE157;
640}
641
642.accent {
643    color: #7B9DB6;
644}
645
646.info {
647	color: rgb(44, 180, 44);
648}
649
650.error {
651    color: red;
652}
653
654.online {
655	color: #83B578;
656}
657
658.offline {
659	color: #FAE157;
660}
661
662.starred {
663    color: #009BCA !important;
664}
665
666.loved {
667    color: #009BCA !important;
668}
669
670.control {
671    color: #DDDDDD !important;
672}
673
674.hot {
675    color: orange !important;
676}
677
678img.tv {
679    padding: 25px 40px 25px 40px;
680    background-color: rgb(55, 54, 54);
681}
682
683#media_control {
684  background-color: #101010 !important;
685}
686
687.ui-button-text {
688  color: #FFF !important;
689}
690
691.detailyear {
692    color: #fff !important;
693}
694
695option {
696    background-color: #222;
697    color: #ffffff;
698}
699
700.playlistframe .bgcolor2 {
701    background-color: #081B1B;
702}
703
704#content_main table.music tr { line-height: 25px; border-bottom: 1px solid #0E3535 !important; }
705
706#content_main  table.content tr:nth-of-type(even) {  line-height: 25px;background: #0E3535; }
707#content_main  table.content tr:nth-of-type(odd) {  line-height: 25px;background: #124C4C; }
708
709#content_home  table.music tr:nth-of-type(even) {  line-height: 25px;background: #0E3535; }
710#content_home  table.music tr:nth-of-type(odd) {  line-height: 25px;background: #124C4C; }
711
712#content_main  table th { line-height:25px;}
713#content_main  table tr { border-bottom: 1px solid rgba(0,0,0,.08) !important; }
714
715#playlistBody tr { line-height:25px; border-bottom: 1px solid rgba(0,0,0,.08) !important; }
716
717#playlistBody tr:nth-of-type(even) {line-height:25px;background: #0E3535; }
718#playlistBody tr:nth-of-type(odd) {line-height:25px;background: #124C4C; }
719
720#startButton, #stopButton {
721    cursor:pointer; font-size:30px; color:#0090BB !important;
722}
723#previousButton, #nextButton ,#fastpreviousButton, #fastnextButton  {
724    color:#000 !important;
725}
726#bufferButton {
727    font-size:30px; color:#0090BB !important;
728}
729
730
731
732.custom-icon-rank {
733  font-size:10px;
734  font-family: 'Montserrat', Arial, serif  !important;
735}
736
737
738.custom-icon-header {
739  font-size:20px !important;
740  background:#fff;
741  padding:6px 4px 3px 4px;
742  margin:0 10px 6px 5px;
743  background:rgba(0,0,0,0.2);
744  -webkit-border-radius:25%;
745  -moz-border-radius:25%;
746  -o-border-radius:25%;
747  border-radius:25%;
748  border:1px solid #111 !important;
749  color:#fff;
750	box-shadow: 0 1px 5px rgba(16, 16, 16, 0.46);
751  text-align:center;
752  display:table-cell;
753  vertical-align:middle;
754  width:24px;
755  height:24px;
756  -moz-transition:.5s;
757  -webkit-transition:.5s;
758  -o-transition:.5s;
759  transition:.5s;
760}
761
762.custom-icon {
763  font-size:7px;
764  background:#fff;
765  padding:6px 4px 3px 4px;
766  margin:3px 1px 3px 1px;
767  background:rgba(0,0,0,0.2);
768  -webkit-border-radius:25%;
769  -moz-border-radius:25%;
770  -o-border-radius:25%;
771  border-radius:25%;
772  border:1px solid #111 !important;
773  color:#fff;
774	box-shadow: 0 1px 5px rgba(16, 16, 16, 0.46);
775  text-align:center;
776  display:table-cell;
777  vertical-align:middle;
778  width:14px;
779  height:14px;
780  -moz-transition:.5s;
781  -webkit-transition:.5s;
782  -o-transition:.5s;
783  transition:.5s;
784}
785
786.custom-icon-main {
787  font-size:14px !important;
788  background:#fff;
789  padding:7px 4px 4px 5px;
790  margin:0 0 8px 0;
791  background:rgba(0,0,0,0.2);
792  -webkit-border-radius:25%;
793  -moz-border-radius:25%;
794  -o-border-radius:25%;
795  border-radius:25%;
796  border:1px solid #111 !important;
797  text-align:center;
798  display:table-cell;
799  vertical-align:middle;
800  width:16px;
801  height:16px;
802  -moz-transition:.5s;
803  -webkit-transition:.5s;
804  -o-transition:.5s;
805  transition:.5s;
806}
807
808.custom-icon:hover {
809  background:rgba(0,0,0,0.8);
810  color: orange;
811}
812
813.custom-icon-nohover {
814  font-size:7px;
815  background:#fff;
816  padding:6px 4px 4px 4px;
817  margin:0px;
818  background:rgba(0,0,0,0.2);
819  -webkit-border-radius:25%;
820  -moz-border-radius:25%;
821  -o-border-radius:25%;
822  border-radius:25%;
823  border:1px solid #111 !important;
824  color:#fff;
825  text-align:center;
826  display:table-cell;
827  vertical-align:middle;
828  width:14px;
829  height:14px;
830  -moz-transition:.5s;
831  -webkit-transition:.5s;
832  -o-transition:.5s;
833  transition:.5s;
834}
835.fix-editor {
836  display:none;
837}
838.icon-wrapper {
839  display:inline-block;
840}
841
842.browse-index-shortcut {
843    font-size: 150% !important;
844}