1 | body {
|
---|
2 | font-family: Helvetica;
|
---|
3 | margin:0;
|
---|
4 | padding:0;
|
---|
5 | background:#fa5945 url(../images/header.png) repeat-x top left;
|
---|
6 | }
|
---|
7 | #container {
|
---|
8 | width:960px;
|
---|
9 | margin:0 auto;
|
---|
10 | }
|
---|
11 |
|
---|
12 | h1 {
|
---|
13 | background:transparent url(../images/logo.png) no-repeat top left;
|
---|
14 | width: 157px;
|
---|
15 | height: 180px;
|
---|
16 | display: block;
|
---|
17 | float:left;
|
---|
18 | margin:20px 40px 20px 20px;
|
---|
19 | }
|
---|
20 | h1 span { display:none; }
|
---|
21 |
|
---|
22 | h2 { font-size: 30px; line-height: 38px; margin:0; }
|
---|
23 | h3 { font-size: 22px; margin: 10px 0 20px; }
|
---|
24 |
|
---|
25 | h3 small { font-size: 14px; color:#FA5945 !important; font-weight:normal !important; margin-left:10px; }
|
---|
26 |
|
---|
27 | a, a:active { color:#490CCE; outline:0;}
|
---|
28 | a:hover { color:#0A28AC; }
|
---|
29 |
|
---|
30 | div.github {
|
---|
31 | -moz-transform: rotate(2deg);
|
---|
32 | -moz-transform-origin: left top;
|
---|
33 | background: url(../images/github.png) no-repeat 16px 10px rgba(255, 255, 255, 0.5);
|
---|
34 | box-shadow: 0 0 27px rgba(0, 0, 0, 0.08);
|
---|
35 | float: right;
|
---|
36 | padding: 30px 30px 30px 91px;
|
---|
37 | position: relative;
|
---|
38 | top: -3px;
|
---|
39 | }
|
---|
40 |
|
---|
41 | div.select {
|
---|
42 | top: 66px;
|
---|
43 | clear:right;
|
---|
44 | position: relative;
|
---|
45 | }
|
---|
46 | div.select span {
|
---|
47 | margin:0 10px;
|
---|
48 | }
|
---|
49 | form { display: inline-block;}
|
---|
50 |
|
---|
51 | label { color:#FFE400; font-size: 18px; line-height:22px; margin-bottom: 3px; text-shadow: rgba(0,0,0,0.3) 1px 1px 1px; display:block;}
|
---|
52 | label.ofm { background:url(../images/ofm.png) no-repeat top left; padding-left:20px;}
|
---|
53 |
|
---|
54 | input { font-size:18px; }
|
---|
55 |
|
---|
56 | #content {
|
---|
57 | clear:both;
|
---|
58 | }
|
---|
59 |
|
---|
60 | #ID3 {
|
---|
61 | background:#fff;
|
---|
62 | padding:20px;
|
---|
63 | min-height:400px;
|
---|
64 | position:relative;
|
---|
65 | }
|
---|
66 |
|
---|
67 | #ID3:before {
|
---|
68 | content: ' ';
|
---|
69 | height: 0;
|
---|
70 | position: absolute;
|
---|
71 | width: 0;
|
---|
72 | border: 15px solid transparent;
|
---|
73 | border-bottom-color: #fff;
|
---|
74 | top: 0%;
|
---|
75 | left: 90px;
|
---|
76 | margin-top: -30px;
|
---|
77 | }
|
---|
78 |
|
---|
79 | div.player {
|
---|
80 | float:left;
|
---|
81 | margin-right:20px;
|
---|
82 | }
|
---|
83 |
|
---|
84 | div.picture {
|
---|
85 | width:400px;
|
---|
86 | height:400px;
|
---|
87 | display: block;
|
---|
88 | }
|
---|
89 | div.picture img.picture {
|
---|
90 | width:400px;
|
---|
91 | height:400px;
|
---|
92 | display: block;
|
---|
93 | }
|
---|
94 |
|
---|
95 | a.button {
|
---|
96 | width:100px;
|
---|
97 | height:100px;
|
---|
98 | display:block;
|
---|
99 | position:relative;
|
---|
100 | top:-250px;
|
---|
101 | left:150px;
|
---|
102 | }
|
---|
103 |
|
---|
104 | a.play {
|
---|
105 | background: transparent url(../images/play.png) no-repeat top left;
|
---|
106 | opacity:0.7;
|
---|
107 | }
|
---|
108 | a.play:hover {opacity:1;}
|
---|
109 |
|
---|
110 | a.pause {
|
---|
111 | background: transparent url(../images/pause.png) no-repeat top left;
|
---|
112 | opacity:0.7;
|
---|
113 | }
|
---|
114 | a.pause:hover {opacity:1;}
|
---|
115 |
|
---|
116 | div.timeline {
|
---|
117 | width:360px;
|
---|
118 | height:20px;
|
---|
119 | border: 1px solid rgba(255,228,0,0.7);
|
---|
120 | display:block;
|
---|
121 | position:relative;
|
---|
122 | top:-140px;
|
---|
123 | left:20px;
|
---|
124 | }
|
---|
125 | div#progressbar { width: 0; height: 20px; background-color: #FA5945; }
|
---|
126 | div#preloadbar { width: 0; height: 20px; background-color: rgba(255,228,0,0.5); }
|
---|
127 |
|
---|
128 | div.meta { background-color: rgba(0, 0, 0, 0.1); width:460px; padding:20px; font-size:16px; display:inline-block; }
|
---|
129 |
|
---|
130 | #shareTrack {
|
---|
131 | text-align: right;
|
---|
132 | margin: 20px 0 40px 0;
|
---|
133 | }
|
---|
134 |
|
---|
135 | #playUrl {
|
---|
136 | width: 320px;
|
---|
137 | }
|
---|
138 |
|
---|
139 | #footer {
|
---|
140 | clear:both;
|
---|
141 | padding:0 20px 20px;
|
---|
142 | color:#FFE400;
|
---|
143 | font-size:15px;
|
---|
144 | }
|
---|
145 | #footer a { background:#fff; padding:2px 5px; -moz-border-radius:3px;font-size: 15px;
|
---|
146 | padding: 3px 5px 1px;
|
---|
147 | position: relative;
|
---|
148 | top: -1px;
|
---|
149 | font-weight:bold;
|
---|
150 | text-decoration:none;
|
---|
151 | color:#FA5945;}
|
---|
152 | #footer a:hover { color:#000;}
|
---|
153 | #footer a span {font-weight:normal;color:#000; font-style:italic;font-size:12px;}
|
---|
154 | #footer a.mhd { background:transparent; top:0;}
|
---|
155 | #footer img { position: relative;top: 4px; }
|
---|