Subversion Repositories Integrator Subversion

Rev

Details | Last modification | View Log | RSS feed

Rev Author Line No. Line
1 espaco 1
/* Reset
2
----------------------------------- */
3
@import url("normalize.css")
4
 
5
 
6
/* Fonts
7
----------------------------------- */
8
$font = 'MontserratRegular'
9
$fontBold = 'MontserratBold'
10
$stack = $font, Helvetica, Arial, sans-serif
11
$stackBold = $fontBold, Helvetica, Arial, sans-serif
12
 
13
@font-face
14
	font-family $font
15
	src url('./montserrat-regular.eot')
16
	src url('./montserrat-regular.eot?#iefix') format('embedded-opentype'),
17
	    url('./montserrat-regular.woff') format('woff'),
18
	    url('./montserrat-regular.ttf') format('truetype'),
19
	    url('./montserrat-regular.svg#' + $font + '') format('svg')
20
	font-style normal
21
	font-weight normal
22
 
23
@font-face
24
	font-family $fontBold
25
	src url('./montserrat-bold.eot')
26
	src url('./montserrat-bold.eot?#iefix') format('embedded-opentype'),
27
	    url('./montserrat-bold.woff') format('woff'),
28
	    url('./montserrat-bold.ttf') format('truetype'),
29
	    url('./montserrat-bold.svg#' + $fontBold + '') format('svg')
30
	font-style normal
31
	font-weight bold
32
 
33
 
34
/* Demo
35
----------------------------------- */
36
html
37
body
38
	height 100%
39
 
40
body
41
	font 14px/20px $stack
42
	color #222
43
	background #ebe7df url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAFZCAIAAAA96mnzAAACKklEQVR4Xn2VUW7kMAxD+QLf/1x7gv71LNwdKTLhZFtggMCwSVEUPdb3159/v0uSrM8HtGRZuoQk1R69J12o9ixJWvSnVyfLdbNw0XAXWe1fIL8BoqmNGiV/cHc9Gq4NXxLKHhteRyLpA28cl0SLdx0BckSWL4gkPlIVTg1nN9Ys3iyWI5AGDA5xOXB5BJaWmOw6KSLeU6+0P50QshQyEL2im/YMIL60dTSZ3RXenlkiJpMj8XPMAl1FtjMRW19NxzOE5VGWPVGrc7aSJgz1Y9ku57mpYSwn1h0ivFOXxoCKMCXiahbbZNIZR+tkphllPsomipCwb4GMkXTmPfVg40Jt2y4RQM/PqX5JTM4iiTN8Zz1XvbIAEEvoEW+3nxTLL3lB7t7J3WwyI7g5OVxKIeFEH4FIGLC9I+XqvSd4AxJM5O6WTPr54RAxLG44FVrEuz+kFdXyLiuX6kLPVLZL2ISlcHNlBIKm5rR8nEi9wJeA6Y8JZlJOyDiin0K5ag+AXHtALBicXasjIUu9h0STBbCMU+89gMnu/J05MU1QWqdbPMRPIZIzDgsi8Olg5t7wHhUg/pv5RUzO+BHDmczHkAfZWxlSYgNI5Ig5XRoc66dW9L45eHDkbkqCO7RLG5cna/HD7YhZnfINkFo8iNyj5kx6pFrxNGRlfhV2e1Zt5DnGU8T7Tud1ivi8jU8/3Zy88pkn6+zdXiJ7AVSFBZA3VcwDfXtt5UUHS38B35hQVuJip4MAAAAASUVORK5CYII=") repeat-x
44
	*background-image url(ie/header-line.png)
45
 
46
a
47
	color #222
48
	text-decoration none
49
	border-bottom 1px solid #bbb
50
 
51
	&:hover
52
		color #000
53
 
54
a
55
.self
56
	-webkit-transition color .1s
57
	-moz-transition color .1s
58
	-ms-transition color .1s
59
	-o-transition color .1s
60
	transition color .1s
61
 
62
.self
63
	color #333
64
	border-bottom 1px dotted #aaa
65
	cursor pointer
66
 
67
	&:hover
68
		color #000
69
 
70
strong
71
	font-family $stackBold
72
	font-weight 700
73
 
74
p
75
	margin 0 0 8px
76
 
77
label
78
	cursor pointer
79
 
80
h1
81
h2
82
h3
83
h4
84
	margin 0
85
	font bold 20px/60px $stackBold
86
 
87
h2
88
	height 60px
89
	text-align center
90
	text-transform uppercase
91
 
92
h4
93
	font-size 18px
94
	line-height 24px
95
 
96
ul
97
	margin 0
98
	padding 0
99
	list-style none
100
 
101
table
102
	width 100%
103
	margin-bottom 21px
104
 
105
th
106
td
107
	padding 11px 20px 12px
108
	vertical-align top
109
	font-weight normal
110
	text-align left
111
	border-bottom 2px solid #E7E5E0
112
 
113
	thead &
114
		background lighten(#E7E5E0, 50%)
115
 
116
th
117
	white-space nowrap
118
 
119
td
120
	width 100%
121
 
122
.focus
123
	outline 1px dotted rgba(0,0,0,.5) !important
124
 
125
.clear
126
	position relative
127
	*zoom 1
128
 
129
	&:before
130
	&:after
131
		content ''
132
		display table
133
		clear both
134
 
135
.layout
136
	width 930px
137
	margin 0 auto
138
	padding 0 15px
139
 
140
.header
141
	padding 115px 0 73px
142
	color #fff
143
	text-align center
144
 
145
	h1
146
	strong
147
		letter-spacing -1px
148
		text-transform uppercase
149
 
150
	h1
151
		padding-bottom 23px
152
		font-size 22px
153
		line-height 28px
154
 
155
	h3
156
		position relative
157
		padding 35px 0 17px
158
		font-size 120px
159
		line-height 140px
160
		letter-spacing -5px
161
 
162
		&:before
163
			content ''
164
			display inline-block
165
			width 72px
166
			height 64px
167
			margin-right 32px
168
			vertical-align middle
169
			background url(icheck.png)
170
 
171
		&:after
172
			content ''
173
			position absolute
174
			top 0
175
			left 50%
176
			width 100px
177
			margin-left -50px
178
			border-top 3px solid #fff
179
 
180
	strong
181
		font 24px/30px $stack
182
 
183
		a
184
			color #fff
185
			border-bottom-color #fff
186
 
187
.features
188
	position relative
189
	font-size 16px
190
	color #555
191
	background #fff
192
 
193
	.self
194
		color #555
195
		border-bottom-color #bbb
196
 
197
		&:hover
198
			color #222
199
 
200
	.arrows
201
		top 0
202
 
203
	&:hover .arrows .bottom
204
		left 0
205
 
206
	h2
207
		color #fff
208
		background #2489c5
209
 
210
	ul
211
		padding 44px 60px 36px
212
 
213
	li
214
		padding 0 0 9px 36px
215
		background url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABI0lEQVR4XpXSP0vDUBjF4ZtLkIr4EYzduogdXJTWWV2FLMVNoQrdAhlUUFAEcejo1q13svgFBAUdxA/g30kcdQoIIlL9DWcKuZEeeOCl99w3gTSI49h4MoFb/KCJz6KShS/rOh/TbEZZECLBiSQIR1nQQgAnAVr/LZjEnIq76OJbutjRGR26isUB3pDhBikucWoUzVdI1cl05zBk2MI5jvCKIfL5QluzxTS20bY6WENdl0ujTl13Ni3DABtwWEFp1HG6M7Aq9NHBGRbgy7w6HfTzX6GHCyyXPV2dnu9/MIUX+PIMOkRsbq7hHkZmxciDOrZoQRUVPCGCw504RDobR7VoQQ0f2Mejls1IRb/t4R10CcLc6/2igSVcw8gqFnEMOnSVPxQqQaPw2y7fAAAAAElFTkSuQmCC") 0 1px no-repeat
216
		*background-image url(ie/icon-star.png)
217
 
218
		&.offset
219
			margin-top 20px
220
 
221
.mark
222
	padding 0 2px
223
	color lighten(#555, 20%)
224
	background lighten(#d7d4cc, 40%)
225
 
226
	.skin-polaris &
227
		background darken(#2C323C, 20%)
228
 
229
	.skin-futurico &
230
		background darken(#2E3035, 20%)
231
 
232
.social
233
	height 60px
234
	margin-bottom 60px
235
	padding 0 60px
236
	font-size 16px
237
	color #555
238
	background lighten(#EBE7DF, 50%)
239
 
240
	a
241
		color #777
242
		border-bottom-color #ccc
243
 
244
		&:hover
245
			color #444
246
 
247
	.left
248
		float left
249
		padding-top 19px
250
 
251
		li
252
			float left
253
			padding-right 30px
254
 
255
			a
256
				position relative
257
 
258
	.right
259
		float right
260
		padding-top 20px
261
 
262
		li
263
			float right
264
			padding-left 10px
265
 
266
		&.local
267
			padding-top 19px
268
 
269
			li
270
				padding-left 30px
271
				font-size 14px
272
 
273
.demo-holder
274
	margin-bottom 97px
275
 
276
.demo-title
277
	padding-bottom 36px
278
	font-size 26px
279
	letter-spacing -1px
280
 
281
.demo
282
	position relative
283
 
284
	&:hover .arrows .top
285
	&:hover .arrows .bottom
286
		left 0
287
 
288
.demo-list
289
	position relative
290
	margin-right 360px
291
	padding 33px 57px 17px
292
	color #555
293
	background #fff
294
	border 3px solid #ddd8ce
295
 
296
	ul
297
		float right
298
		white-space nowrap
299
 
300
		&:first-child
301
			float left
302
 
303
		li
304
			position relative
305
			padding 0 0 18px 42px
306
 
307
		input
308
			position absolute
309
			top 4px
310
			left 0
311
 
312
		.icheckbox_square-blue
313
		.iradio_square-blue
314
			position absolute
315
			top -1px
316
			left 0
317
 
318
		span
319
			color #bbb
320
 
321
.demo-methods
322
	padding 21px 360px 0 0
323
 
324
	.mark
325
		background darken(#e7e5e0, 10%)
326
 
327
	dt
328
		position relative
329
		padding 17px 150px 18px 0
330
		font 16px/24px $stack
331
		color #444
332
		border-bottom 3px solid #ddd8ce
333
 
334
		.self
335
			cursor pointer
336
 
337
			&:hover
338
				color #222
339
 
340
		.code
341
			position absolute
342
			right 0
343
			bottom 18px
344
			color #777
345
 
346
			.self:hover
347
				color #444
348
 
349
	dd
350
		position relative
351
		display none
352
		margin 0
353
		background #fff
354
		border 3px solid #ddd8ce
355
		border-top none
356
 
357
		&:before
358
			content ''
359
			position absolute
360
			top -13px
361
			left 0
362
			width 0
363
			height 0
364
			border 5px solid transparent
365
			border-bottom-color #ddd8ce
366
			border-left-color #ddd8ce
367
 
368
		.markup
369
			margin 0
370
			color #888
371
			background lighten(#ebe7df, 50%)
372
			border none
373
 
374
			.comment
375
				color #aaa
376
 
377
.demo-callbacks
378
	position absolute
379
	top 0
380
	right 0
381
	bottom 0
382
	width 300px
383
	color #aaa
384
	background #232323
385
	border 3px solid #ddd8ce
386
 
387
	h2
388
		color #fff
389
		background #6a5a8c
390
 
391
	ul
392
		position absolute
393
		top 60px
394
		width 100%
395
		bottom 0
396
		overflow auto
397
 
398
		li
399
			margin-top -1px
400
			padding 13px 20px 15px
401
			border-top 1px solid #2e2e2e
402
 
403
			span
404
				color #888
405
 
406
.skins
407
	position relative
408
	*zoom 1
409
 
410
	h2
411
		position absolute
412
		top -38px
413
		right 0
414
		left 0
415
		font-size 24px
416
		text-align center
417
 
418
.arrows
419
	position absolute
420
	top 3px
421
	left -60px
422
	width 60px
423
	overflow hidden
424
 
425
	.top
426
	.bottom
427
		position relative
428
		left 60px
429
		width 60px
430
		height 60px
431
		cursor pointer
432
		-webkit-transition left .3s, background-color .2s
433
		-moz-transition left .3s, background-color .2s
434
		-ms-transition left .3s, background-color .2s
435
		-o-transition left .3s, background-color .2s
436
		transition left .3s, background-color .2s
437
 
438
	.top
439
		background lighten(#5a9aa8, 25%) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAdklEQVR4Xo3MuwmFQBiE0b0FmAuutnRBsAARLMTYRzvWItiEYLq/s6CYyMwGXzTDcWbG8mhEf/ZjQIV2ZCigjiASMAVJIAVKAQ4FKWBDJVoYpAB/7z8GRaAQgBNQG8dZA28f0BmHBgUCKGh9hhpNKH8BWY8GlF2OH3hCC1zmdAAAAABJRU5ErkJggg==") 50% no-repeat
440
		*background-image url(ie/arrow-top.png)
441
 
442
		&:hover
443
			background-color lighten(#5a9aa8, 10%)
444
 
445
	.bottom
446
		background lighten(#dba571, 20%) url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAALCAYAAACZIGYHAAAAf0lEQVR4Xo3MzQmEQBCE0TGAvQuOpiQIBiCCgXj2J52NRTAJwev0Vh+WOgjlNHyHguYFM/M6tKLSd2YTmtHHR48S8jtQzAB2430d2bgJvQLsdqRCZwZUPAFLaPjrjYAUMKLgwBtUK4CIhi4BEFGQBohISANEJKQBIqqIFtSqvx/0bXhCCUrgiAAAAABJRU5ErkJggg==") 50% no-repeat
447
		*background-image url(ie/arrow-bottom.png)
448
 
449
		&:hover
450
			background-color #dba571
451
 
452
@media screen and (max-width:1049px)
453
	.arrows
454
	.fork-me
455
		display none
456
 
457
.skin
458
	position relative
459
	margin-bottom 40px
460
 
461
	&:hover .arrows .top
462
	&:hover .arrows .bottom
463
		left 0
464
 
465
	h3
466
		position relative
467
		z-index 20
468
		float left
469
		height 60px
470
		padding 0 57px
471
		line-height 58px
472
		background #fff
473
		border 3px solid #ddd8ce
474
		border-bottom none
475
 
476
		&:before
477
			content ''
478
			position absolute
479
			top 100%
480
			left 0
481
			width 100%
482
			height 2px
483
			margin-top -1px
484
			background #fff
485
 
486
	&.skin-polaris h3
487
		color lighten(#7a828b, 60%)
488
		background #2c323c
489
 
490
		&:before
491
			background #2c323c
492
 
493
	&.skin-futurico h3
494
		color lighten(#888, 50%)
495
		background #2e3035
496
 
497
		&:before
498
			background #2e3035
499
 
500
	dl
501
		z-index 10
502
		width 100%
503
		margin 0
504
 
505
	dt
506
		position relative
507
		top -53px
508
		right -3px
509
		float right
510
		height 47px
511
		margin-right -3px
512
		padding 0 57px
513
		line-height 47px
514
		border 3px solid #ddd8ce
515
		cursor pointer
516
 
517
		&:hover
518
			background #f0ede7
519
			border-bottom 3px solid #ddd8ce
520
 
521
		&.selected
522
			height 50px
523
			background #fff
524
			border-bottom none
525
			cursor default
526
 
527
			&:before
528
				content ''
529
				position absolute
530
				top 100%
531
				left 0
532
				width 100%
533
				height 2px
534
				margin-top -1px
535
				background #fff
536
 
537
	&.skin-polaris dt
538
		color lighten(#7a828b, 60%)
539
		background lighten(#30363f, 30%)
540
 
541
		&:hover
542
			background lighten(#30363f, 15%)
543
 
544
		&.selected
545
			background #2c323c
546
 
547
			&:before
548
				background #2c323c
549
 
550
	&.skin-futurico dt
551
		color lighten(#888, 50%)
552
		background lighten(#2e3035, 30%)
553
 
554
		&:hover
555
			background lighten(#2e3035, 15%)
556
 
557
		&.selected
558
			background #2e3035
559
 
560
			&:before
561
				background #2e3035
562
 
563
	dd
564
		position relative
565
		display none
566
		float left
567
		width 100%
568
		margin -3px -100% 0 0
569
		overflow hidden
570
		color #444
571
		background #fff
572
		border 3px solid #ddd8ce
573
 
574
		&.selected
575
			display block
576
 
577
		a
578
			color #444
579
 
580
			&:hover
581
				color #111
582
 
583
	&.skin-polaris dd
584
		color #7a828b
585
		background #2c323c
586
 
587
		a
588
			color #7a828b
589
			border-bottom-color lighten(#2c323c, 20%)
590
 
591
			&:hover
592
				color lighten(#7a828b, 30%)
593
 
594
	&.skin-futurico dd
595
		color #888
596
		background #2e3035
597
 
598
		a
599
			color #888
600
			border-bottom-color lighten(#2e3035, 20%)
601
 
602
			&:hover
603
				color #aaa
604
 
605
.skin-section
606
	float left
607
	padding 42px 0 31px 57px
608
	line-height 18px
609
 
610
	h4
611
		padding-bottom 18px
612
 
613
		.skin-polaris &
614
			color lighten(#7a828b, 20%)
615
 
616
		.skin-futurico &
617
			color lighten(#888, 20%)
618
 
619
	.list
620
		float left
621
		padding-right 60px
622
 
623
		li
624
			position relative
625
			padding-bottom 15px
626
 
627
	.skin-minimal & .list li
628
		padding-left 38px
629
 
630
	.skin-square & .list li
631
		padding-left 42px
632
 
633
	.skin-flat & .list li
634
	.skin-line & label
635
		padding-left 40px
636
 
637
	.skin-line & h4
638
		padding-bottom 24px
639
 
640
	.skin-line & .list
641
		padding-right 40px
642
 
643
		li
644
			padding-bottom 10px
645
 
646
	.skin-polaris & .list li
647
		padding-left 37px
648
 
649
	.skin-futurico & .list li
650
		padding-left 36px
651
 
652
.icheckbox_minimal
653
.icheckbox_minimal-red
654
.icheckbox_minimal-green
655
.icheckbox_minimal-blue
656
.icheckbox_minimal-aero
657
.icheckbox_minimal-grey
658
.icheckbox_minimal-orange
659
.icheckbox_minimal-yellow
660
.icheckbox_minimal-pink
661
.icheckbox_minimal-purple
662
.iradio_minimal
663
.iradio_minimal-red
664
.iradio_minimal-green
665
.iradio_minimal-blue
666
.iradio_minimal-aero
667
.iradio_minimal-grey
668
.iradio_minimal-orange
669
.iradio_minimal-yellow
670
.iradio_minimal-pink
671
.iradio_minimal-purple
672
	position absolute
673
	top 1px
674
	left 0
675
 
676
.skin input[type=checkbox]
677
.skin input[type=radio]
678
	position absolute
679
	top 2px
680
	left 0
681
 
682
.icheckbox_square
683
.icheckbox_square-red
684
.icheckbox_square-green
685
.icheckbox_square-blue
686
.icheckbox_square-aero
687
.icheckbox_square-grey
688
.icheckbox_square-orange
689
.icheckbox_square-yellow
690
.icheckbox_square-pink
691
.icheckbox_square-purple
692
.iradio_square
693
.iradio_square-red
694
.iradio_square-green
695
.iradio_square-blue
696
.iradio_square-aero
697
.iradio_square-grey
698
.iradio_square-orange
699
.iradio_square-yellow
700
.iradio_square-pink
701
.iradio_square-purple
702
	position absolute
703
	top -1px
704
	left 0
705
 
706
.icheckbox_flat
707
.icheckbox_flat-red
708
.icheckbox_flat-green
709
.icheckbox_flat-blue
710
.icheckbox_flat-aero
711
.icheckbox_flat-grey
712
.icheckbox_flat-orange
713
.icheckbox_flat-yellow
714
.icheckbox_flat-pink
715
.icheckbox_flat-purple
716
.iradio_flat
717
.iradio_flat-red
718
.iradio_flat-green
719
.iradio_flat-blue
720
.iradio_flat-aero
721
.iradio_flat-grey
722
.iradio_flat-orange
723
.iradio_flat-yellow
724
.iradio_flat-pink
725
.iradio_flat-purple
726
	position absolute
727
	top 0
728
	left 0
729
 
730
.icheckbox_polaris
731
.iradio_polaris
732
	position absolute
733
	top -4px
734
	left -6px
735
 
736
.icheckbox_futurico
737
.iradio_futurico
738
	position absolute
739
	top 2px
740
	left 0
741
 
742
.skin-states
743
	float right
744
	padding-right 57px
745
	padding-left 0
746
 
747
	.state
748
		cursor default !important
749
 
750
	.list
751
		padding-right 0
752
 
753
	.skin-minimal & .list li
754
		padding-left 71px
755
 
756
	.skin-square & .list li
757
		padding-left 79px
758
 
759
	.skin-flat & .list li
760
		padding-left 75px
761
 
762
	.skin-line & .list
763
		padding-right 0
764
 
765
	.skin-polaris & .list li
766
		padding-left 69px
767
 
768
	.skin-futurico & .list li
769
		padding-left 67px
770
 
771
	.iradio_minimal
772
	.iradio_minimal-red
773
	.iradio_minimal-green
774
	.iradio_minimal-blue
775
	.iradio_minimal-aero
776
	.iradio_minimal-grey
777
	.iradio_minimal-orange
778
	.iradio_minimal-yellow
779
	.iradio_minimal-pink
780
	.iradio_minimal-purple
781
		left 33px
782
 
783
	.iradio_square
784
	.iradio_square-red
785
	.iradio_square-green
786
	.iradio_square-blue
787
	.iradio_square-aero
788
	.iradio_square-grey
789
	.iradio_square-orange
790
	.iradio_square-yellow
791
	.iradio_square-pink
792
	.iradio_square-purple
793
		left 37px
794
 
795
	.iradio_flat
796
	.iradio_flat-red
797
	.iradio_flat-green
798
	.iradio_flat-blue
799
	.iradio_flat-aero
800
	.iradio_flat-grey
801
	.iradio_flat-orange
802
	.iradio_flat-yellow
803
	.iradio_flat-pink
804
	.iradio_flat-purple
805
		left 35px
806
 
807
	.iradio_polaris
808
		left 26px
809
 
810
	.iradio_futurico
811
		left 31px
812
 
813
.colors
814
	clear both
815
	padding 24px 0 9px
816
 
817
	.skin-line &
818
		padding-top 28px
819
 
820
	strong
821
		float left
822
		line-height 20px
823
		margin-right 20px
824
 
825
	li
826
		position relative
827
		float left
828
		width 16px
829
		height 16px
830
		margin 2px 1px 0 0
831
		background #000
832
		cursor pointer
833
		filter unquote('alpha(opacity=50)')
834
		opacity .5
835
		-webkit-transition opacity .2s
836
		-moz-transition opacity .2s
837
		-ms-transition opacity .2s
838
		-o-transition opacity .2s
839
		transition opacity .2s
840
 
841
		&:hover
842
			filter unquote('alpha(opacity=100)')
843
			opacity 1
844
 
845
		&.active
846
			height 20px
847
			margin-top 0
848
			filter unquote('alpha(opacity=75)')
849
			opacity .75
850
 
851
		&.red
852
			background #d54e21
853
 
854
		&.green
855
			background #78a300
856
 
857
		&.blue
858
			background #0e76a8
859
 
860
		&.aero
861
			background #9cc2cb
862
 
863
		&.grey
864
			background #73716e
865
 
866
		&.orange
867
			background #f70
868
 
869
		&.yellow
870
			background #fc0
871
 
872
		&.pink
873
			background #ff66b5
874
 
875
		&.purple
876
			background #6a5a8c
877
 
878
		.skin-square &.red
879
			background #e56c69
880
 
881
		.skin-square &.green
882
			background #1b7e5a
883
 
884
		.skin-square &.blue
885
			background #2489c5
886
 
887
		.skin-square &.aero
888
			background #9cc2cb
889
 
890
		.skin-square &.grey
891
			background #73716e
892
 
893
		.skin-square &.yellow
894
			background #fc3
895
 
896
		.skin-square &.pink
897
			background #a77a94
898
 
899
		.skin-square &.purple
900
			background #6a5a8c
901
 
902
		.skin-square &.orange
903
			background #f70
904
 
905
		.skin-flat &.red
906
			background #ec7063
907
 
908
		.skin-flat &.green
909
			background #1abc9c
910
 
911
		.skin-flat &.blue
912
			background #3498db
913
 
914
		.skin-flat &.grey
915
			background #95a5a6
916
 
917
		.skin-flat &.orange
918
			background #f39c12
919
 
920
		.skin-flat &.yellow
921
			background #f1c40f
922
 
923
		.skin-flat &.pink
924
			background #af7ac5
925
 
926
		.skin-flat &.purple
927
			background #8677a7
928
 
929
		.skin-line &.yellow
930
			background #FFC414
931
 
932
.skins-info
933
	padding 13px 0 57px
934
	font-size 16px
935
	line-height 22px
936
	text-align center
937
 
938
	p
939
		margin-bottom 17px
940
 
941
.skin-pre
942
	padding 43px 60px 0
943
 
944
.skin-usage
945
	padding 19px 60px 8px
946
	list-style decimal outside
947
 
948
	li
949
		margin-bottom 23px
950
 
951
	.schemes
952
		margin-bottom -3px
953
		padding 13px 0 0 20px
954
		color #888
955
 
956
		ul
957
			float left
958
			padding-right 60px
959
 
960
		li
961
			margin 0
962
			padding-bottom 3px
963
 
964
.usage
965
	position relative
966
	margin-bottom 80px
967
	background #fff
968
 
969
	a
970
		border-bottom-color #ddd
971
 
972
	.self
973
		border-bottom-color #bbb
974
 
975
	.arrows
976
		top 0
977
 
978
	&:hover .arrows .top
979
	&:hover .arrows .bottom
980
		left 0
981
 
982
	h2
983
		color #fff
984
		background #1f7f5c
985
 
986
	h4
987
		margin 26px 0 10px
988
 
989
		&.indeterminate
990
			margin-top 28px
991
 
992
	p
993
		margin-bottom 5px
994
 
995
		&.offset
996
			margin-top 10px
997
 
998
		&.callbacks-info
999
			margin-bottom 19px
1000
 
1001
		&.methods-info
1002
			margin-bottom 10px
1003
 
1004
		&.methods-callback
1005
			margin-top 10px
1006
 
1007
		&.issue-tracker
1008
			margin-top 31px
1009
 
1010
	.markup
1011
		margin 9px 0 16px
1012
 
1013
	.usage-inner
1014
		font-size 15px
1015
		line-height 23px
1016
		padding 41px 60px 39px
1017
 
1018
.markup
1019
	margin 10px 0 18px
1020
	padding 8px 0 9px 17px
1021
	font 14px/20px $stack
1022
	color lighten(#555, 20%)
1023
	background lighten(#d7d4cc, 40%)
1024
	border-left 3px solid darken(#ebeae5, 10%)
1025
 
1026
	.comment
1027
		color lighten(#555, 40%)
1028
 
1029
		.self
1030
			color #555
1031
 
1032
			&:hover
1033
				color #333
1034
 
1035
	.skin-polaris &
1036
		background darken(#2C323C, 20%)
1037
		border-left-color darken(#2C323C, 30%)
1038
 
1039
	.skin-futurico &
1040
		background darken(#2E3035, 20%)
1041
		border-left-color darken(#2E3035, 30%)
1042
 
1043
	.skin-polaris &
1044
	.skin-futurico &
1045
 
1046
		.comment
1047
			color #555
1048
 
1049
.browsers
1050
	margin-bottom 74px
1051
 
1052
	h2
1053
		margin-bottom 29px
1054
		font-size 24px
1055
 
1056
.browsers-inner
1057
	padding 0 60px
1058
	font-size 15px
1059
	line-height 23px
1060
 
1061
	p
1062
		margin-bottom 15px
1063
 
1064
.benefits
1065
	position relative
1066
	margin-bottom 59px
1067
	color #888
1068
	background #232323
1069
 
1070
	.arrows
1071
		top 0
1072
 
1073
	&:hover .arrows .top
1074
	&:hover .arrows .bottom
1075
		left 0
1076
 
1077
	h2
1078
		color #fff
1079
		background #6a5b8c
1080
 
1081
	a
1082
		color #888
1083
		border-bottom-color #444
1084
 
1085
		&:hover
1086
			color #aaa
1087
 
1088
	.mark
1089
		color #777
1090
		background lighten(#232323, 10%)
1091
 
1092
.benefits-inner
1093
	padding 41px 60px 29px
1094
	font-size 15px
1095
	line-height 23px
1096
 
1097
	p
1098
		margin-bottom 15px
1099
 
1100
	ul
1101
		margin -10px 0 15px
1102
 
1103
.download
1104
	height 63px
1105
	text-align center
1106
 
1107
	a
1108
		display block
1109
		height 60px
1110
		font-size 18px
1111
		line-height 58px
1112
		color #fff
1113
		border-bottom 0 solid darken(#E76B66, 10%)
1114
		background #E76B66
1115
		-webkit-transition border-bottom .2s
1116
		-moz-transition border-bottom .2s
1117
		-ms-transition border-bottom .2s
1118
		-o-transition border-bottom .2s
1119
		transition border-bottom .2s
1120
 
1121
		&:before
1122
			content ''
1123
			display inline-block
1124
			width 26px
1125
			height 26px
1126
			margin-right 12px
1127
			background url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAaCAYAAACpSkzOAAACYUlEQVR4Xr3VPWhTURjH4VOt0ES7ZRJbEJpsNsaimx9E0GpRCdgU/NhsRAdNBYcK0RirQcSkIIK2cRBRiragVayDhqBDLVWatFvsIKK2UMEp4KBcf8N/KNdwvcHWAw8c/rzvebk5yU2dZVnmf6wVNdb70Ca+5Rrkx0e8E/ZkyzCoAyuxBZu17/jXQV34jjwCytowjUk90Ywyo5q8errcDoriPgpoRhEj6MQrGHmpbARF1RbUG3Uz6Bae4iBacQNNSKEPRi4pa1JNq3pGcds+qNrXu4B1CKKCWtZqlPAZO/72RDGsRdKWh5ATIdOSpHpjbu6ojBfYBiPdOIQeHJMeZd0wsh1jKDsNakEc97AHo8o3IYCz2I1nGMYuZQHVGPXs1RlxtNgH+TCFtBpvIqua40ghqkGdOIp27VOqMcigX8PTKIKzWXwZDDbAQhDG5o6yx2iAkQY80T4HYxOEpbP/uCOnN+wq1Nlq6x3qrWp3NIcKJvAWV+FVzU804i6uwyNZZY34BaOeyzpjQmfOLR70DSGcwyxOIa7mAZzHQ+QxLHllCdUYnMYZzOqsjeBsPbp8QFZ7Lw7gCt4jhGu4qCEGa5SVVWPUM4Yjbn5HfrTjNYzk8AAZ5CSjbBBG3qjXr0CqX+YAviJpy6cQg9NKIoJBN6+gIGbwA16kMY5eeGDEo2xcNV71TCPo5qM7iX14hJIueB4XkICRhLJ51ZTUsx8n3AwawmGE8QUhRDR4J4yElUUQUm1YvUPOfxPO4khj66KL70W/m+Z6uF3P0YdJBRVlZqkHlbEezQo+YWHJB8mC1Lx+Ayeq7nRIoewwAAAAAElFTkSuQmCC")
1128
			*background-image url(ie/icon-options.png)
1129
			vertical-align middle
1130
 
1131
		&:hover
1132
			border-bottom-width 3px
1133
 
1134
.license
1135
	color #444
1136
	text-align center
1137
	padding 30px 0 75px
1138
 
1139
.footer
1140
	padding-top 28px
1141
	height 60px
1142
	color #666
1143
	background #e2dfd8
1144
 
1145
	ul
1146
		float left
1147
 
1148
		li
1149
			float left
1150
			padding 2px 10px 0 0
1151
 
1152
		&.local li
1153
			padding 0 30px 0 0
1154
 
1155
	.code
1156
		float right
1157
 
1158
	a
1159
		color #444
1160
 
1161
		&:hover
1162
			color #222
1163
 
1164
.footer-inner
1165
	width 930px
1166
	margin 0 auto
1167
	overflow hidden
1168
 
1169
.fork-me
1170
	position fixed
1171
	*position absolute
1172
	top 0
1173
	right 0
1174
	width 40px
1175
	height 40px
1176
	overflow hidden
1177
	text-indent 100%
1178
	white-space nowrap
1179
	background #28545b url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAnElEQVR4XqVSgQmEMAyszw/gCI7wK7iBblBHcISfxG6gG/gjuIGO0A3ygaYQCCG2HhweF+6aShsAcDcBJBpuvlwFagqGJwUf5EL6kgV2eEe2yIgc9QI73CMPs8AOywI7nHDSzCxYxcnJ6+hrFnQkJrb2nGclP3Fj+vf0IUV1AgCZHiS86lOObxD4qqSD5mtXmAq1e2fB3vqXact3f/JmXumJlVq1AAAAAElFTkSuQmCC") 50% no-repeat
1180
	*background-image url(ie/icon-fork.png)
1181
 
1182
	&:hover
1183
		background-color #1f7f5c
1184
 
1185
.skin dt
1186
.fork-me
1187
	-webkit-transition background-color .2s
1188
	-moz-transition background-color .2s
1189
	-ms-transition background-color .2s
1190
	-o-transition background-color .2s
1191
	transition background-color .2s