40 background-position: -36px 0; |
40 background-position: -36px 0; |
41 } |
41 } |
42 |
42 |
43 .prev-button { |
43 .prev-button { |
44 background-position: -54px 0; |
44 background-position: -54px 0; |
|
45 } |
|
46 |
|
47 .lock-button { |
|
48 width: 36px; background-position: -36px -54px; |
|
49 } |
|
50 |
|
51 .lock-button.locked { |
|
52 background-position: -36px -36px; |
45 } |
53 } |
46 |
54 |
47 .duration, .time-separator, .current-time { |
55 .duration, .time-separator, .current-time { |
48 float: left; height: 30px; |
56 float: left; height: 30px; |
49 font-size: 20px; line-height: 30px; |
57 font-size: 20px; line-height: 30px; |
91 .play-svg { |
99 .play-svg { |
92 position: absolute; left: 0; top: 0; width: 100%; height: 100%; |
100 position: absolute; left: 0; top: 0; width: 100%; height: 100%; |
93 } |
101 } |
94 |
102 |
95 .topics-block { |
103 .topics-block { |
96 float: left; clear: both; width: 10000px; padding-left: 8px; height: 40px; left: 0; |
104 float: left; clear: both; width: 10000px; height: 50px; left: 20px; |
|
105 } |
|
106 |
|
107 .topics-list { |
|
108 float: left; |
97 } |
109 } |
98 |
110 |
99 .topic { |
111 .topic { |
100 float: left; padding: 6px; cursor: pointer; background: #333333; |
112 float: left; padding: 2px; cursor: pointer; background: #333333; |
101 } |
113 } |
102 |
114 |
103 .topic-words li { |
115 .topic-words li { |
104 display: inline-block; color: #fff; padding: 0 4px; |
116 display: inline-block; color: #fff; padding: 2px 4px; |
105 font-size: 14px; line-height: 16px; |
117 font-size: 14px; line-height: 16px; |
106 } |
118 } |
107 |
119 |
108 .left-arrow, .right-arrow { |
120 .left-arrow, .right-arrow { |
109 position: absolute; top: 0; width: 9px; height: 20px; width: 9px; background: url(../img/arrows.png); margin: 5px; cursor: pointer; |
121 position: absolute; top: 0; width: 9px; height: 20px; padding: 13px 8px; cursor: pointer; |
110 } |
122 } |
111 |
123 |
112 .left-arrow { |
124 .left-arrow { |
113 left: 0; |
125 left: 0; background: -moz-linear-gradient(left, rgba(0,0,0,1), rgba(0,0,0,0)); |
114 } |
126 } |
115 |
127 |
116 .right-arrow { |
128 .right-arrow { |
117 right: 0; background-position: -9px 0; |
129 right: 0; background: -moz-linear-gradient(right, rgba(0,0,0,1), rgba(0,0,0,0)); |
|
130 } |
|
131 |
|
132 .inside-arrow { |
|
133 width: 9px; height: 20px; background: url(../img/sprites.png); |
|
134 } |
|
135 |
|
136 div:hover>.inside-arrow { |
|
137 opacity: .5; |
|
138 } |
|
139 |
|
140 .left-arrow .inside-arrow { |
|
141 background-position: 0 -54px; |
|
142 } |
|
143 |
|
144 .right-arrow .inside-arrow { |
|
145 background-position: -9px -54px; |
118 } |
146 } |
119 |
147 |
120 .highlight { |
148 .highlight { |
121 color: #333333; background: #ffff00; |
149 color: #333333; background: #ffff00; |
122 } |
150 } |