Subversion Repositories cheapmusic

Rev

Rev 43 | Rev 65 | Go to most recent revision | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
25 - 1 
/* reset */
31 - 2 
 
25 - 3 
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,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
31 - 4 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
25 - 5 
ol,ul{list-style:none;margin:0px;padding:0px;}
6 
blockquote,q{quotes:none;}
7 
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
8 
table{border-collapse:collapse;border-spacing:0;}
9 
a{text-decoration:none;}
10 
img{max-width:100%;}
11 
 
31 - 12 
/* end reset*/
13 
 
25 - 14 
/* start editing from here */
15 
body {
16 
    background-position: center;
17 
    background-size: cover;
18 
    text-align: center;
19 
}
57 - 20 
 
25 - 21 
.header h1 {
22 
    font-size: 40px;
23 
    text-transform: uppercase;
24 
    letter-spacing: 5px;
25 
    font-weight: 400;
26 
    margin: 40px 0px 20px 0;
27 
}
28 
.wrapper-frm {
29 
    width: 30%;
30 
    margin: 0 auto;
31 
    padding: 42px 0 0 0;
32 
}
33 
.wrapper-frm h2 {
34 
    font-size: 22px;
35 
    letter-spacing: 1px;
36 
    text-transform: uppercase;
37 
    padding-bottom: 15px;
38 
}
39 
.wrapper-frm .top{
40 
    padding: 0 25px;
41 
}
42 
.top h4{
43 
   margin: 15px 5px;
44 
}
45 
.frm-input {
46 
    position: relative;
47 
}
48 
.frm-input input[type="email"], .frm-input .email-in{
49 
    background: url(../images/mail.png) no-repeat scroll 7px 50%;
50 
}
51 
.frm-input input[type="password"], .frm-input .pass-in{
52 
    background: url(../images/lock.png) no-repeat scroll 7px 50%;
53 
}
54 
.frm-input .user-in{
55 
    background: url(../images/user.png) no-repeat scroll 7px 50%;
56 
}
57 
.frm-input .file-in{
58 
    background: url(../images/uimg.png) no-repeat scroll 7px 50%;
59 
}
60 
.frm-input .phone-in{
61 
    background: url(../images/phone.png) no-repeat scroll 7px 50%;
62 
}
63 
.frm-input .addr-in{
64 
    background: url(../images/addr.png) no-repeat scroll 7px 50%;
65 
}
66 
.frm-input input[type="text"], .frm-input input[type="email"], .frm-input input[type="password"], .frm-input input[type="file"]{
67 
    width: 87%;
68 
    padding: 15px 0px 15px 30px;
57 - 69 
    border: 1px solid #000;
25 - 70 
    outline: none;
71 
    font-size: 15px;
72 
    margin: 14px 0px;
57 - 73 
    background-color: #fff;
25 - 74 
}
75 
.frm-info{
76 
    padding: 20px 0 30px;
77 
}
78 
.frm-info .check{
79 
    float: left;
80 
}
81 
.check input[type="checkbox"] {
82 
    display: none;
83 
}
84 
.check input[type="checkbox"]+label {
85 
    position: relative;
86 
    padding-left: 25px;
87 
    display: inline-block;
88 
    font-size: .9em;
89 
    cursor: pointer;
90 
}
91 
.check input[type="checkbox"]+label span:first-child {
92 
    width: 13px;
93 
    height: 13px;
94 
    display: inline-block;
57 - 95 
    border: 1px solid;
25 - 96 
    position: absolute;
97 
    top: 1px;
98 
    left: 2px;
99 
}
100 
.check input[type="checkbox"]:checked+label span:first-child:before {
101 
    content: "";
102 
    background: url(../images/tick-b.png)no-repeat;
103 
    position: absolute;
104 
    left: 2px;
105 
    top: 1px;
106 
    font-size: 10px;
107 
    width: 10px;
108 
    height: 10px;
109 
}
110 
.frm-info a {
111 
    float: right;
112 
    font-size: .9em;
113 
}
114 
.frm-info a:hover {
115 
    text-decoration: underline;
116 
}
117 
 
57 - 118 
.frm-btn button[type="submit"] {
25 - 119 
    font-size: 20px;
120 
    height: 36px;
121 
    line-height: 36px;
122 
    padding: 0 16px;
123 
    letter-spacing: .5px;
124 
    border-radius: 2px;
125 
    width: 50%;
126 
    cursor: pointer;
127 
    outline: none;
128 
    border: none;
129 
    text-transform: uppercase;
130 
    margin-bottom: 10px;
131 
}
132 
.frm-input p{
133 
    font-size: 14px;
134 
    margin-top: -10px;
135 
    margin-bottom: 5px;
136 
}
137 
.frm-input.error input{
138 
    border-color: #E44439;
139 
}
140 
.status-msg{
141 
    font-size: 16px;
142 
    font-weight: 500;
143 
    border: 1px dashed;
144 
    padding: 8px 10px;
145 
    margin-bottom: 5px;
146 
}
147 
.status-msg.success{
148 
    color: #3BA956;
149 
}
150 
.status-msg.error, .frm-input.error p{
151 
   color: #E44439;
152 
}
153 
 
154 
.social-icons h3 {
155 
    text-align: center;
156 
    font-size: 20px;
157 
    letter-spacing: 2px;
158 
    margin: 15px 10px;
159 
    margin-bottom: 0;
160 
}
161 
ul.bottom-sc-icons {
162 
    list-style: none;
163 
    margin: 0;
42 - 164 
    padding-bottom: 22px;
165 
    padding-top: 11px;
25 - 166 
    text-align: center;
167 
}
168 
ul.bottom-sc-icons li {
169 
    display: inline-block;
170 
    margin: 0 5px;
171 
}
172 
ul.bottom-sc-icons li a{
173 
    padding: 6px 8px;
174 
    border: 1px solid #333;
175 
    border-radius: 2px;
176 
}
177 
a.facebook{
178 
    border-color: #455797 !important;
179 
    color: #455797;
180 
}
181 
a.google{
182 
    border-color: #E44439 !important;
183 
    color: #E44439;
184 
}
185 
a.twitter{
186 
    border-color: #46A3DE !important;
187 
    color: #46A3DE;
188 
}
189 
a.facebook:hover, a.facebook:active{
190 
    background-color: #455797;
191 
    color: #fff;
192 
}
193 
a.google:hover, a.google:active{
194 
    background-color: #E44439;
195 
    color: #fff;
196 
}
197 
a.twitter:hover, a.twitter:active{
198 
    background-color: #46A3DE;
199 
    color: #fff;
200 
}
201 
ul.bottom-sc-icons li span {
202 
    letter-spacing: 1px;
203 
    vertical-align: middle;
204 
}
205 
ul.bottom-sc-icons li a i{
206 
    display: inline-block;
207 
    margin-right: 5px;
208 
    width: 24px;
209 
    height: 24px;
210 
    position: relative;
211 
    top: 6px;
212 
}
213 
a.facebook i{
214 
    background: url(../images/facebook.png) no-repeat;
215 
}
216 
a.google i{
217 
    background: url(../images/google.png) no-repeat;
218 
}
219 
a.twitter i{
220 
    background: url(../images/twitter.png) no-repeat;
221 
}
222 
a.facebook:hover i{
223 
    background: url(../images/facebook-w.png) no-repeat;
224 
}
225 
a.google:hover i{
226 
    background: url(../images/google-w.png) no-repeat;
227 
}
228 
a.twitter:hover i{
229 
    background: url(../images/twitter-w.png) no-repeat;
230 
}
231 
 
232 
.bottom p {
233 
    font-size: 15px;
234 
    padding: 25px 0;
235 
    letter-spacing: 1px;
236 
}
237 
.bottom p a {
238 
    text-transform: uppercase;
239 
    font-size: 14px;
240 
    text-decoration: underline;
241 
    letter-spacing: 1px;
242 
    padding: 10px;
243 
}
244 
 
42 - 245 
.group {
246 
  display: table;
247 
  width: 100%;
248 
  font-size: 1em;
249 
  padding-top: 15px;
250 
  padding-bottom: 10px;
251 
}
252 
.item {
253 
  display: table-cell;
254 
}
255 
.text {
256 
  white-space: nowrap;
257 
  width: 1%;
258 
  padding: 0 10px;
259 
}
260 
.line {
261 
  border-bottom: 1px solid #000;
262 
  position: relative;
263 
  top: -.5em;
264 
}
25 - 265 
 
266 
/*--responsive starts here--*/
267 
@media (max-width:1440px) {
268 
	.wrapper-frm {
269 
		width: 32%;
270 
	}
271 
}
272 
@media (max-width:1366px) {
273 
	.wrapper-frm {
274 
		width: 33%;
275 
	}
276 
}
277 
@media (max-width:1280px) {
278 
	.wrapper-frm {
279 
		width: 36%;
280 
	}
281 
}
282 
@media (max-width:1080px) {
283 
	.wrapper-frm {
284 
		width: 43%;
285 
	}
286 
    .container {
287 
		padding: 40px 0 32px 0;
288 
	}
289 
	.footer p {
290 
       margin: 3em 0em 5em 0;
291 
	}
292 
	.header h1 {
293 
      font-size: 36px;
294 
	}
295 
}
296 
@media (max-width:1024px) {
297 
	.wrapper-frm {
298 
		width: 45%;
299 
	}
300 
}
301 
@media (max-width:991px) {
302 
	.wrapper-frm {
303 
		width: 51%;
304 
	}
305 
}
306 
@media (max-width:800px) {
307 
	.wrapper-frm {
308 
		width: 56%;
309 
	}
310 
    .header h1 {
311 
		font-size: 36px;
312 
		letter-spacing: 7px;
313 
	}
314 
}
315 
@media (max-width:768px) {
316 
	.wrapper-frm {
317 
		width: 61%;
318 
	}
319 
    .container {
320 
		padding: 24px 0 0 0;
321 
	}
322 
    .footer p {
323 
		margin: 3em 0em 17em 0;
324 
	}
325 
    .header h1 {
326 
		letter-spacing: 6px;
327 
		margin: 80px 0px 20px 0;
328 
	}
329 
}
330 
@media (max-width:736px) {
331 
	.wrapper-frm {
332 
		width: 63%;
333 
	}
334 
    .container {
335 
		padding: 20px 0 0 0;
336 
	}
337 
    .header h1 {
338 
		letter-spacing: 5px;
339 
	}
340 
}
341 
@media (max-width:667px) {
342 
	.wrapper-frm {
343 
		width: 70%;
344 
	}
345 
    .footer p {
346 
		margin: 3em 0em 6em 0;
347 
	}
348 
    .header h1 {
349 
		letter-spacing: 2px;
350 
	}
351 
}
352 
@media (max-width:600px) {
353 
	.wrapper-frm {
354 
		width: 78%;
355 
	}
356 
    .container {
357 
		padding: 5px 0 0 0;
358 
	}
359 
    .footer p {
360 
		letter-spacing: 1px;
361 
	}
362 
}
363 
@media (max-width:568px) {
364 
	.wrapper-frm {
365 
		width: 82%;
366 
	}
367 
    .container {
368 
		padding: 0;
369 
	}
370 
    .header h1 {
371 
		font-size: 33px;
372 
		margin: 60px 0px 35px 0;
373 
	}
374 
}
375 
@media (max-width:480px) {
376 
	.wrapper-frm {
377 
		width: 93%;
378 
	}
379 
    .footer p {
380 
		line-height: 1.8em;
381 
	}
382 
	.footer p {
383 
		margin: 3em 0em 3em 0;
384 
	}
385 
    .header h1 {
386 
		font-size: 30px;
387 
		letter-spacing: 1px;
388 
	}
389 
}
390 
@media (max-width:440px) {
391 
    .header h1 {
392 
		font-size: 26px;
393 
		letter-spacing: 1px;
394 
	}
395 
}
396 
@media (max-width:414px) {
397 
	.wrapper-frm {
398 
		width: 95%;
399 
	}
400 
    .footer p {
401 
		margin: 2.5em 0em;
402 
	}
403 
    .header h1 {
404 
		line-height: 40px;
405 
		margin: 44px 0px 28px 0;
406 
		font-size:25px;
407 
	}
408 
}
409 
@media (max-width:384px) {
410 
    .footer p {
411 
		margin: 2em 0em;
412 
	}
413 
}
414 
@media (max-width:375px) {
415 
	.wrapper-frm {
416 
		width: 98%;
417 
	}
418 
    .header h1 {
419 
		margin: 35px 0px 20px 0;
420 
		font-size: 23px;
421 
	}
422 
}
423 
@media (max-width:320px) {
424 
	.footer p {
425 
		margin: 1em 0em;
426 
	}
427 
    .header h1 {
428 
		margin: 30px 0px 15px 0;
429 
		font-size: 22px;
430 
	}
431 
}
31 - 432 
/*--//responsive end here--*/
41 - 433 
/*--//Google reCaptcha start--*/
434 
.g-recaptcha > div {
435 
  margin: 0 auto;
436 
}
437 
/*--//Google reCaptcha end--*/