Ajax Loader
×
HTML 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
    <head>
4
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
        <title>Document sans nom</title>
6
        <link href="style.css" rel="stylesheet" type="text/css" />
7
    </head>
8
    <body>
9
        <div id="content">
10
            <div id="cadre">
11
                <div id="red" class="carre">
12
                    <span id="maskred" class="mask"><img src="http://ns366377.ovh.net/~gilbon/CSSD/dialer/549139_10150621125856315_4216822_n.jpg" alt"tof"/></span>
13
                    <div id="red2" class="carre2"></div>
14
                </div>
15
                <div id="bleu" class="carre">
16
                    <span id="maskbleu" class="mask">
17
                        <i class="icon-user icon-4x" ></i>
18
                        <p><span class="titre">Contact</span><br/>
19
                        </p>
20
                    </span>
21
                    <div id="bleu2" class="carre2"></div>
22
                </div>
23
                <div id="jaune" class="carre">
24
                    <span id="maskyellow" class="mask">
25
                        <i class="icon-book icon-4x" ></i>
26
                        <p><span class="titre">Etudes</span><br/>
27
                        </p>
28
                    </span>
29
                    <div id="jaune2" class="carre2"></div>
30
                </div>
31
                <div id="green" class="carre">
32
                    <span id="maskgreen" class="mask">
33
                        <i class="icon-code icon-4x" ></i>
34
                        <p><span class="titre">Expériences</span><br/>
35
                        </p>
36
                    </span>
37
                    <div id="green2" class="carre2"></div>
38
                </div>
39
                <div id="cadre3"><img src="http://webamaury.fr/Doc/CSSD/googleplus/croix.png" alt="croix"/></div>
40
            </div>
41
        </div>
42
    </body>
43
</html>
 
CSS 
@charset "utf-8";
1
@charset "utf-8";
2
/* CSS Document */
3
#content
4
{
5
  width: 600px;
6
height: 1280px;
7
margin: 0 auto;
8
display: block;
9
}
10
#cadre
11
{
12
  width:190px;
13
  height:190px;
14
  margin:60px auto;
15
  border-radius:15px;
16
  box-shadow:0px 0px 2px rgba(0,0,0,1),0px 0px 15px rgba(0,0,0,1);
17
}
18
#cadre2
19
{
20
  width:138px;
21
  height:138px;
22
  margin:26px;
23
  //background-color:rgba(0,0,0,0.5);
24
  position:absolute;
25
}
26
#cadre3
27
{
28
  width:120px;
29
  height:120px;
30
  margin:35px;
31
  background-color:#1d1a2e;
32
  position:absolute;
33
  border-radius:10px;
34
}
35
.carre
36
{
37
  float:left;
38
  width:95px;
39
  height:95px;
40
  z-index:10px;
41
  cursor:pointer;
42
  display:inline-block;
43
44
}
45
.carre2
46
{
47
  float:left;
48
  width:69px;
49
  height:69px;
50
 
51
}
52
#green
53
{
54
   background-color:#00C84B;
55
  border-bottom-right-radius:15px;
56
  transition:all ease-in 0.2s;
57
  -webkit-transition:all ease-in 0.2s;
58
  overflow:hidden;
59
}
60
#jaune
61
{
62
  background-color:#F6DB38;
63
  border-bottom-left-radius:15px;
64
    transition:all ease-in 0.2s;
65
  -webkit-transition:all ease-in 0.2s;
66
 
67
}
68
#red
69
{
70
  background-color:#F23F41;
71
  border-top-left-radius:15px;
72
    transition:all ease-in 0.2s;
73
  -webkit-transition:all ease-in 0.2s;
74
 
75
}
76
#bleu
77
{
78
  background-color:#00AEC9;
79
  border-top-right-radius:15px;
80
    transition:all ease-in 0.2s;
81
  -webkit-transition:all ease-in 0.2s;
82
  overflow:hidden;
83
 
84
}
85
 
86
#red:hover
87
{
88
  background-color:#d23537;
89
  border-top-left-radius:15px;
90
}
91
#bleu:hover
92
{
93
  background-color:#0093aa;
94
  border-top-right-radius:15px;
95
  overflow:visible;
96
}
97
#green:hover
98
{
99
   background-color:#00ad3e;
100
  border-bottom-right-radius:15px;
101
  overflow:visible;
102
}
103
#jaune:hover
104
{
105
  background-color:#dcc131;
106
  border-bottom-left-radius:15px;
107
}
108
 
109
#green2
110
{
111
   background-color:#00ad3e;
112
  border-bottom-right-radius:11px;
113
  position:relative;
114
  top:-250px;
115
  transition:all ease 1s;
116
  -webkit-transition:all ease 1s;
117
}
118
#green:hover #green2
119
{
120
   background-color:#00C84B;
121
  border-bottom-right-radius:11px;
122
  position:relative;
123
  top:-250px;
124
}
125
#jaune2
126
{
127
  background-color:#dcc131;
128
  border-bottom-left-radius:11px;
129
  position:relative;
130
  left:26px;
131
  transition:all ease 1s;
132
  -webkit-transition:all ease 1s;
133
}
134
#jaune:hover #jaune2
135
{
136
  background-color:#F6DB38;
137
  border-bottom-left-radius:11px;
138
  position:relative;
139
  left:26px;
140
}
141
#red2
142
{
143
  background-color:#d23537;
144
  border-top-left-radius:11px;
145
  position:relative;
146
  left:26px;
147
  top:26px;
148
  transition:all ease 1s;
149
  -webkit-transition:all ease 1s;
150
}
151
#red:hover #red2
152
{
153
  background-color:#F23F41;
154
  border-top-left-radius:11px;
155
  position:relative;
156
  left:26px;
157
  top:26px;
158
}
159
#bleu2
160
{
161
  background-color:#0093aa;
162
  border-top-right-radius:11px;
163
  position:relative;
164
  top:-223px;
165
  transition:all ease 1s;
166
  -webkit-transition:all ease 1s;
167
}
168
#bleu:hover #bleu2
169
{
170
   background-color:#00AEC9;
171
  border-top-right-radius:11px;
172
  position:relative;
173
  top:-223px;
174
}
175
img
176
{
177
  margin:27px;
178
}
179
.mask
180
{
181
  width: 190px;
182
  height: 250px;
183
  border-radius:15px;
184
  -webkit-border-radius:15px;
185
186
  transform-origin:top;
187
  -webkit-transform-origin:top;
188
  transition:all ease-in 0.5s;
189
190
}
191
#jaune:hover #maskyellow
192
{
193
  position:absolute;
194
  width:190px;
195
  height:250px;
196
  -webkit-transform:scaleY(1);
197
-webkit-transition:all ease-in 0.5s;
198
  box-shadow:0px 0px 2px rgba(0,0,0,1),0px 0px 15px rgba(0,0,0,1);
199
}
200
#red:hover #maskred
201
{
202
  position:absolute;
203
  width:190px;
204
  height:250px;
205
  -webkit-transform:scaleY(1);
206
-webkit-transition:all ease-in 0.5s;
207
  box-shadow:0px 0px 2px rgba(0,0,0,1),0px 0px 15px rgba(0,0,0,1);
208
}
209
#green:hover #maskgreen
210
{
211
  position:relative;
212
  width:190px;
213
  height:250px;
214
  -webkit-transform:scaleY(1);
215
-webkit-transition:all ease-in 0.5s;
216
  box-shadow:0px 0px 2px rgba(0,0,0,1),0px 0px 15px rgba(0,0,0,1);
217
}
218
#bleu:hover #maskbleu
219
{
220
  position:relative;
221
  width:190px;
222
  height:250px;
223
  -webkit-transform:scaleY(1);
224
-webkit-transition:all ease-in 0.5s;
225
  box-shadow:0px 0px 2px rgba(0,0,0,1),0px 0px 15px rgba(0,0,0,1);
226
}
227
#maskyellow
228
{
229
  position:absolute;
230
  background-color:#F6DB38;
231
  top:250px;
232
  z-index:-100;
233
  -webkit-opacity:1;
234
  transform:scaleY(0);
235
  -webkit-transform:scaleY(0);
236
  transform-origin:top;
237
  -webkit-transform-origin:top;
238
}
239
#maskbleu
240
{
241
  position:relative;
242
background-color: #00AEC9;
243
top: 190px;
244
z-index: -100;
245
right: 95px;
246
display: inline-block;
247
  -webkit-opacity:1;
248
  transform:scaleY(0);
249
  -webkit-transform:scaleY(0);
250
  transform-origin:top;
251
  -webkit-transform-origin:top;
252
}
253
#maskred
254
{
255
  position:absolute;
256
  background-color:#F23F41;
257
  top:251px;
258
  z-index:-100;
259
  -webkit-opacity:1;
260
  transform:scaleY(0);
261
  -webkit-transform:scaleY(0);
262
  transform-origin:top;
263
  -webkit-transform-origin:top;
264
}
265
#maskgreen
266
{
267
  position:relative;
268
background-color: #00C84B;
269
top: 95px;
270
z-index:-100;
271
right: 95px;
272
display: inline-block;
273
-webkit-opacity:1;
274
  transform:scaleY(0);
275
  -webkit-transform:scaleY(0);
276
  transform-origin:top;
277
  -webkit-transform-origin:top;
278
}
279
#maskred img
280
{
281
  width:170px;
282
  margin:10px 9px;
283
  border-radius:10px;
284
}
285
#maskyellow p
286
{
287
  width:170px;
288
  margin:28px 9px;
289
  font-size:0.8em;
290
  line-height:170%;
291
}
292
#maskyellow i
293
{
294
  color:#c0ab3b;
295
  text-shadow:1px 1px #000;
296
  position:relative;
297
  top:20px;
298
  left:65px;
299
}
300
#maskyellow .titre
301
{
302
  font-weight:600;
303
  color:#C0AB3B;
304
  text-shadow:0px 1px #000;
305
  font-size:1.6em;
306
  margin-left:47px;
307
}
308
#maskyellow .date,#maskgreen .date
309
{
310
  border-bottom:solid black 1px;
311
}
312
#maskbleu i
313
{
314
  color:#0093aa;
315
  text-shadow:1px 1px #000;
316
  position:relative;
317
  top:20px;
318
  left:75px;
319
}
320
#maskbleu .titre
321
{
322
  font-weight:600;
323
  color:#1892a5;
324
  text-shadow:0px 1px #000;
325
  font-size:1.6em;
326
  margin-left:47px;
327
}
328
#maskgreen i
329
{
330
  color:#149f46;
331
  text-shadow:1px 1px #000;
332
  -webkit-text-shadow:1px 1px #000;
333
  position:relative;
334
  top:20px;
335
  left:55px;
336
}
337
#maskgreen .titre
338
{
339
  font-weight:600;
340
  color:#149f46;
341
  text-shadow:0px 1px #000;
342
  font-size:1.6em;
343
  margin-left:17px;
344
 
345
}
346
#maskbleu p
347
{
348
  width:170px;
349
  margin:18px 13px;
350
  font-size:0.8em;
351
  line-height:170%;
352
}
353
#maskgreen p
354
{
355
  width:170px;
356
  margin:18px 13px;
357
  font-size:0.8em;
358
  line-height:170%;
359
}
360
 
361
 
362
 
363
 
364
 
365
 
366
 
367
 
368
 
369
 
370
 
371
 
372
 
373
 
374
 
375
 
376
 
377
 
378
 
379
 
380
 
381
 
382
 
383
 
384
 
385
 
386
 
387
 
388
 
389
 
390
 
391
/*!
392
 *  Font Awesome 3.1.0
393
 *  the iconic font designed for Bootstrap
394
 *  -------------------------------------------------------
395
 *  The full suite of pictographic icons, examples, and documentation
396
 *  can be found at: http://fontawesome.io
397
 *
398
 *  License
399
 *  -------------------------------------------------------
400
 *  - The Font Awesome font is licensed under the SIL Open Font License v1.1 -
401
 *    http://scripts.sil.org/OFL
402
 *  - Font Awesome CSS, LESS, and SASS files are licensed under the MIT License -
403
 *    http://opensource.org/licenses/mit-license.html
404
 *  - Font Awesome documentation licensed under CC BY 3.0 License -
405
 *    http://creativecommons.org/licenses/by/3.0/
406
 *  - Attribution is no longer required in Font Awesome 3.0, but much appreciated:
407
 *    "Font Awesome by Dave Gandy - http://fontawesome.io"
408
 
409
 *  Contact
410
 *  -------------------------------------------------------
411
 *  Email: dave@fontawesome.io
412
 *  Twitter: http://twitter.com/fortaweso_me
413
 *  Work: Lead Product Designer @ http://kyruus.com
414
 */
415
/* FONT PATH
416
 * -------------------------- */
417
@font-face {
418
  font-family: 'FontAwesome';
419
  src: url('../font/fontawesome-webfont.eot?v=3.1.0');
420
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'), url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'), url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'), url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
421
  font-weight: normal;
422
  font-style: normal;
423
}
424
/* FONT AWESOME CORE
425
 * -------------------------- */
426
[class^="icon-"],
427
[class*=" icon-"] {
428
  font-family: FontAwesome;
429
  font-weight: normal;
430
  font-style: normal;
431
  text-decoration: inherit;
432
  -webkit-font-smoothing: antialiased;
433
  *margin-right: .3em;
434
}
435
[class^="icon-"]:before,
436
[class*=" icon-"]:before {
437
  text-decoration: inherit;
438
  display: inline-block;
439
  speak: none;
440
}
441
/* makes the font 33% larger relative to the icon container */
442
.icon-large:before {
443
  vertical-align: -10%;
444
  font-size: 1.3333333333333333em;
445
}
446
/* makes sure icons active on rollover in links */
447
a [class^="icon-"],
448
a [class*=" icon-"],
449
a [class^="icon-"]:before,
450
a [class*=" icon-"]:before {
451
  display: inline;
452
}
453
/* increased font size for icon-large */
454
[class^="icon-"].icon-fixed-width,
455
[class*=" icon-"].icon-fixed-width {
456
  display: inline-block;
457
  width: 1.2857142857142858em;
458
  text-align: center;
459
}
460
[class^="icon-"].icon-fixed-width.icon-large,
461
[class*=" icon-"].icon-fixed-width.icon-large {
462
  width: 1.5714285714285714em;
463
}
464
ul.icons-ul {
465
  list-style-type: none;
466
  text-indent: -0.7142857142857143em;
467
  margin-left: 2.142857142857143em;
468
}
469
ul.icons-ul > li .icon-li {
470
  width: 0.7142857142857143em;
471
  display: inline-block;
472
  text-align: center;
473
}
474
[class^="icon-"].hide,
475
[class*=" icon-"].hide {
476
  display: none;
477
}
478
.icon-muted {
479
  color: #eeeeee;
480
}
481
.icon-light {
482
  color: #ffffff;
483
}
484
.icon-dark {
485
  color: #333333;
486
}
487
.icon-border {
488
  border: solid 1px #eeeeee;
489
  padding: .2em .25em .15em;
490
  -webkit-border-radius: 3px;
491
  -moz-border-radius: 3px;
492
  border-radius: 3px;
493
}
494
.icon-2x {
495
  font-size: 2em;
496
}
497
.icon-2x.icon-border {
498
  border-width: 2px;
499
  -webkit-border-radius: 4px;
500
  -moz-border-radius: 4px;
501
  border-radius: 4px;
502
}
503
.icon-3x {
504
  font-size: 3em;
505
}
506
.icon-3x.icon-border {
507
  border-width: 3px;
508
  -webkit-border-radius: 5px;
509
  -moz-border-radius: 5px;
510
  border-radius: 5px;
511
}
512
.icon-4x {
513
  font-size: 4em;
514
}
515
.icon-4x.icon-border {
516
  border-width: 4px;
517
  -webkit-border-radius: 6px;
518
  -moz-border-radius: 6px;
519
  border-radius: 6px;
520
}
521
.icon-5x {
522
  font-size: 5em;
523
}
524
.icon-5x.icon-border {
525
  border-width: 5px;
526
  -webkit-border-radius: 7px;
527
  -moz-border-radius: 7px;
528
  border-radius: 7px;
529
}
530
.pull-right {
531
  float: right;
532
}
533
.pull-left {
534
  float: left;
535
}
536
[class^="icon-"].pull-left,
537
[class*=" icon-"].pull-left {
538
  margin-right: .3em;
539
}
540
[class^="icon-"].pull-right,
541
[class*=" icon-"].pull-right {
542
  margin-left: .3em;
543
}
544
/* BOOTSTRAP SPECIFIC CLASSES
545
 * -------------------------- */
546
/* Bootstrap 2.0 sprites.less reset */
547
[class^="icon-"],
548
[class*=" icon-"] {
549
  display: inline;
550
  width: auto;
551
  height: auto;
552
  line-height: normal;
553
  vertical-align: baseline;
554
  background-image: none;
555
  background-position: 0% 0%;
556
  background-repeat: repeat;
557
  margin-top: 0;
558
}
559
/* more sprites.less reset */
560
.icon-white,
561
.nav-pills > .active > a > [class^="icon-"],
562
.nav-pills > .active > a > [class*=" icon-"],
563
.nav-list > .active > a > [class^="icon-"],
564
.nav-list > .active > a > [class*=" icon-"],
565
.navbar-inverse .nav > .active > a > [class^="icon-"],
566
.navbar-inverse .nav > .active > a > [class*=" icon-"],
567
.dropdown-menu > li > a:hover > [class^="icon-"],
568
.dropdown-menu > li > a:hover > [class*=" icon-"],
569
.dropdown-menu > .active > a > [class^="icon-"],
570
.dropdown-menu > .active > a > [class*=" icon-"],
571
.dropdown-submenu:hover > a > [class^="icon-"],
572
.dropdown-submenu:hover > a > [class*=" icon-"] {
573
  background-image: none;
574
}
575
/* keeps Bootstrap styles with and without icons the same */
576
.btn [class^="icon-"].icon-large,
577
.nav [class^="icon-"].icon-large,
578
.btn [class*=" icon-"].icon-large,
579
.nav [class*=" icon-"].icon-large {
580
  line-height: .9em;
581
}
582
.btn [class^="icon-"].icon-spin,
583
.nav [class^="icon-"].icon-spin,
584
.btn [class*=" icon-"].icon-spin,
585
.nav [class*=" icon-"].icon-spin {
586
  display: inline-block;
587
}
588
.nav-tabs [class^="icon-"],
589
.nav-pills [class^="icon-"],
590
.nav-tabs [class*=" icon-"],
591
.nav-pills [class*=" icon-"],
592
.nav-tabs [class^="icon-"].icon-large,
593
.nav-pills [class^="icon-"].icon-large,
594
.nav-tabs [class*=" icon-"].icon-large,
595
.nav-pills [class*=" icon-"].icon-large {
596
  line-height: .9em;
597
}
598
.btn [class^="icon-"].pull-left.icon-2x,
599
.btn [class*=" icon-"].pull-left.icon-2x,
600
.btn [class^="icon-"].pull-right.icon-2x,
601
.btn [class*=" icon-"].pull-right.icon-2x {
602
  margin-top: .18em;
603
}
604
.btn [class^="icon-"].icon-spin.icon-large,
605
.btn [class*=" icon-"].icon-spin.icon-large {
606
  line-height: .8em;
607
}
608
.btn.btn-small [class^="icon-"].pull-left.icon-2x,
609
.btn.btn-small [class*=" icon-"].pull-left.icon-2x,
610
.btn.btn-small [class^="icon-"].pull-right.icon-2x,
611
.btn.btn-small [class*=" icon-"].pull-right.icon-2x {
612
  margin-top: .25em;
613
}
614
.btn.btn-large [class^="icon-"],
615
.btn.btn-large [class*=" icon-"] {
616
  margin-top: 0;
617
}
618
.btn.btn-large [class^="icon-"].pull-left.icon-2x,
619
.btn.btn-large [class*=" icon-"].pull-left.icon-2x,
620
.btn.btn-large [class^="icon-"].pull-right.icon-2x,
621
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
622
  margin-top: .05em;
623
}
624
.btn.btn-large [class^="icon-"].pull-left.icon-2x,
625
.btn.btn-large [class*=" icon-"].pull-left.icon-2x {
626
  margin-right: .2em;
627
}
628
.btn.btn-large [class^="icon-"].pull-right.icon-2x,
629
.btn.btn-large [class*=" icon-"].pull-right.icon-2x {
630
  margin-left: .2em;
631
}
632
/* EXTRAS
633
 * -------------------------- */
634
/* Stacked and layered icon */
635
.icon-stack {
636
  position: relative;
637
  display: inline-block;
638
  width: 2em;
639
  height: 2em;
640
  line-height: 2em;
641
  vertical-align: -35%;
642
}
643
.icon-stack [class^="icon-"],
644
.icon-stack [class*=" icon-"] {
645
  display: block;
646
  text-align: center;
647
  position: absolute;
648
  width: 100%;
649
  height: 100%;
650
  font-size: 1em;
651
  line-height: inherit;
652
  *line-height: 2em;
653
}
654
.icon-stack .icon-stack-base {
655
  font-size: 2em;
656
  *line-height: 1em;
657
}
658
/* Animated rotating icon */
659
.icon-spin {
660
  display: inline-block;
661
  -moz-animation: spin 2s infinite linear;
662
  -o-animation: spin 2s infinite linear;
663
  -webkit-animation: spin 2s infinite linear;
664
  animation: spin 2s infinite linear;
665
}
666
@-moz-keyframes spin {
667
  0% {
668
    -moz-transform: rotate(0deg);
669
  }
670
  100% {
671
    -moz-transform: rotate(359deg);
672
  }
673
}
674
@-webkit-keyframes spin {
675
  0% {
676
    -webkit-transform: rotate(0deg);
677
  }
678
  100% {
679
    -webkit-transform: rotate(359deg);
680
  }
681
}
682
@-o-keyframes spin {
683
  0% {
684
    -o-transform: rotate(0deg);
685
  }
686
  100% {
687
    -o-transform: rotate(359deg);
688
  }
689
}
690
@-ms-keyframes spin {
691
  0% {
692
    -ms-transform: rotate(0deg);
693
  }
694
  100% {
695
    -ms-transform: rotate(359deg);
696
  }
697
}
698
@keyframes spin {
699
  0% {
700
    transform: rotate(0deg);
701
  }
702
  100% {
703
    transform: rotate(359deg);
704
  }
705
}
706
/* Icon rotations and mirroring */
707
.icon-rotate-90:before {
708
  -webkit-transform: rotate(90deg);
709
  -moz-transform: rotate(90deg);
710
  -ms-transform: rotate(90deg);
711
  -o-transform: rotate(90deg);
712
  transform: rotate(90deg);
713
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
714
}
715
.icon-rotate-180:before {
716
  -webkit-transform: rotate(180deg);
717
  -moz-transform: rotate(180deg);
718
  -ms-transform: rotate(180deg);
719
  -o-transform: rotate(180deg);
720
  transform: rotate(180deg);
721
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
722
}
723
.icon-rotate-270:before {
724
  -webkit-transform: rotate(270deg);
725
  -moz-transform: rotate(270deg);
726
  -ms-transform: rotate(270deg);
727
  -o-transform: rotate(270deg);
728
  transform: rotate(270deg);
729
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
730
}
731
.icon-flip-horizontal:before {
732
  -webkit-transform: scale(-1, 1);
733
  -moz-transform: scale(-1, 1);
734
  -ms-transform: scale(-1, 1);
735
  -o-transform: scale(-1, 1);
736
  transform: scale(-1, 1);
737
}
738
.icon-flip-vertical:before {
739
  -webkit-transform: scale(1, -1);
740
  -moz-transform: scale(1, -1);
741
  -ms-transform: scale(1, -1);
742
  -o-transform: scale(1, -1);
743
  transform: scale(1, -1);
744
}
745
/* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
746
   readers do not read off random characters that represent icons */
747
.icon-glass:before {
748
  content: "\f000";
749
}
750
.icon-music:before {
751
  content: "\f001";
752
}
753
.icon-search:before {
754
  content: "\f002";
755
}
756
.icon-envelope:before {
757
  content: "\f003";
758
}
759
.icon-heart:before {
760
  content: "\f004";
761
}
762
.icon-star:before {
763
  content: "\f005";
764
}
765
.icon-star-empty:before {
766
  content: "\f006";
767
}
768
.icon-user:before {
769
  content: "\f007";
770
}
771
.icon-film:before {
772
  content: "\f008";
773
}
774
 
775
.icon-th-large:before {
776
  content: "\f009";
777
}
778
.icon-th:before {
779
  content: "\f00a";
780
}
781
.icon-th-list:before {
782
  content: "\f00b";
783
}
784
.icon-ok:before {
785
  content: "\f00c";
786
}
787
.icon-remove:before {
788
  content: "\f00d";
789
}
790
.icon-zoom-in:before {
791
  content: "\f00e";
792
}
793
.icon-zoom-out:before {
794
  content: "\f010";
795
}
796
.icon-off:before {
797
  content: "\f011";
798
}
799
.icon-signal:before {
800
  content: "\f012";
801
}
802
.icon-cog:before {
803
  content: "\f013";
804
}
805
.icon-trash:before {
806
  content: "\f014";
807
}
808
.icon-home:before {
809
  content: "\f015";
810
}
811
.icon-file:before {
812
  content: "\f016";
813
}
814
.icon-time:before {
815
  content: "\f017";
816
}
817
.icon-road:before {
818
  content: "\f018";
819
}
820
.icon-download-alt:before {
821
  content: "\f019";
822
}
823
.icon-download:before {
824
  content: "\f01a";
825
}
826
.icon-upload:before {
827
  content: "\f01b";
828
}
829
.icon-inbox:before {
830
  content: "\f01c";
831
}
832
.icon-play-circle:before {
833
  content: "\f01d";
834
}
835
.icon-repeat:before,
836
.icon-rotate-right:before {
837
  content: "\f01e";
838
}
839
/* F020 doesn't work in Safari. all shifted one down */
840
.icon-refresh:before {
841
  content: "\f021";
842
}
843
.icon-list-alt:before {
844
  content: "\f022";
845
}
846
.icon-lock:before {
847
  content: "\f023";
848
}
849
.icon-flag:before {
850
  content: "\f024";
851
}
852
.icon-headphones:before {
853
  content: "\f025";
854
}
855
.icon-volume-off:before {
856
  content: "\f026";
857
}
858
.icon-volume-down:before {
859
  content: "\f027";
860
}
861
.icon-volume-up:before {
862
  content: "\f028";
863
}
864
.icon-qrcode:before {
865
  content: "\f029";
866
}
867
.icon-barcode:before {
868
  content: "\f02a";
869
}
870
.icon-tag:before {
871
  content: "\f02b";
872
}
873
.icon-tags:before {
874
  content: "\f02c";
875
}
876
.icon-book:before {
877
  content: "\f02d";
878
}
879
.icon-bookmark:before {
880
  content: "\f02e";
881
}
882
.icon-print:before {
883
  content: "\f02f";
884
}
885
.icon-camera:before {
886
  content: "\f030";
887
}
888
.icon-font:before {
889
  content: "\f031";
890
}
891
.icon-bold:before {
892
  content: "\f032";
893
}
894
.icon-italic:before {
895
  content: "\f033";
896
}
897
.icon-text-height:before {
898
  content: "\f034";
899
}
900
.icon-text-width:before {
901
  content: "\f035";
902
}
903
.icon-align-left:before {
904
  content: "\f036";
905
}
906
.icon-align-center:before {
907
  content: "\f037";
908
}
909
.icon-align-right:before {
910
  content: "\f038";
911
}
912
.icon-align-justify:before {
913
  content: "\f039";
914
}
915
.icon-list:before {
916
  content: "\f03a";
917
}
918
.icon-indent-left:before {
919
  content: "\f03b";
920
}
921
.icon-indent-right:before {
922
  content: "\f03c";
923
}
924
.icon-facetime-video:before {
925
  content: "\f03d";
926
}
927
.icon-picture:before {
928
  content: "\f03e";
929
}
930
.icon-pencil:before {
931
  content: "\f040";
932
}
933
.icon-map-marker:before {
934
  content: "\f041";
935
}
936
.icon-adjust:before {
937
  content: "\f042";
938
}
939
.icon-tint:before {
940
  content: "\f043";
941
}
942
.icon-edit:before {
943
  content: "\f044";
944
}
945
.icon-share:before {
946
  content: "\f045";
947
}
948
.icon-check:before {
949
  content: "\f046";
950
}
951
.icon-move:before {
952
  content: "\f047";
953
}
954
.icon-step-backward:before {
955
  content: "\f048";
956
}
957
.icon-fast-backward:before {
958
  content: "\f049";
959
}
960
.icon-backward:before {
961
  content: "\f04a";
962
}
963
.icon-play:before {
964
  content: "\f04b";
965
}
966
.icon-pause:before {
967
  content: "\f04c";
968
}
969
.icon-stop:before {
970
  content: "\f04d";
971
}
972
.icon-forward:before {
973
  content: "\f04e";
974
}
975
.icon-fast-forward:before {
976
  content: "\f050";
977
}
978
.icon-step-forward:before {
979
  content: "\f051";
980
}
981
.icon-eject:before {
982
  content: "\f052";
983
}
984
.icon-chevron-left:before {
985
  content: "\f053";
986
}
987
.icon-chevron-right:before {
988
  content: "\f054";
989
}
990
.icon-plus-sign:before {
991
  content: "\f055";
992
}
993
.icon-minus-sign:before {
994
  content: "\f056";
995
}
996
.icon-remove-sign:before {
997
  content: "\f057";
998
}
999
.icon-ok-sign:before {
1000
  content: "\f058";
1001
}
1002
.icon-question-sign:before {
1003
  content: "\f059";
1004
}
1005
.icon-info-sign:before {
1006
  content: "\f05a";
1007
}
1008
.icon-screenshot:before {
1009
  content: "\f05b";
1010
}
1011
.icon-remove-circle:before {
1012
  content: "\f05c";
1013
}
1014
.icon-ok-circle:before {
1015
  content: "\f05d";
1016
}
1017
.icon-ban-circle:before {
1018
  content: "\f05e";
1019
}
1020
.icon-arrow-left:before {
1021
  content: "\f060";
1022
}
1023
.icon-arrow-right:before {
1024
  content: "\f061";
1025
}
1026
.icon-arrow-up:before {
1027
  content: "\f062";
1028
}
1029
.icon-arrow-down:before {
1030
  content: "\f063";
1031
}
1032
.icon-share-alt:before,
1033
.icon-mail-forward:before {
1034
  content: "\f064";
1035
}
1036
.icon-resize-full:before {
1037
  content: "\f065";
1038
}
1039
.icon-resize-small:before {
1040
  content: "\f066";
1041
}
1042
.icon-plus:before {
1043
  content: "\f067";
1044
}
1045
.icon-minus:before {
1046
  content: "\f068";
1047
}
1048
.icon-asterisk:before {
1049
  content: "\f069";
1050
}
1051
.icon-exclamation-sign:before {
1052
  content: "\f06a";
1053
}
1054
.icon-gift:before {
1055
  content: "\f06b";
1056
}
1057
.icon-leaf:before {
1058
  content: "\f06c";
1059
}
1060
.icon-fire:before {
1061
  content: "\f06d";
1062
}
1063
.icon-eye-open:before {
1064
  content: "\f06e";
1065
}
1066
.icon-eye-close:before {
1067
  content: "\f070";
1068
}
1069
.icon-warning-sign:before {
1070
  content: "\f071";
1071
}
1072
.icon-plane:before {
1073
  content: "\f072";
1074
}
1075
.icon-calendar:before {
1076
  content: "\f073";
1077
}
1078
.icon-random:before {
1079
  content: "\f074";
1080
}
1081
.icon-comment:before {
1082
  content: "\f075";
1083
}
1084
.icon-magnet:before {
1085
  content: "\f076";
1086
}
1087
.icon-chevron-up:before {
1088
  content: "\f077";
1089
}
1090
.icon-chevron-down:before {
1091
  content: "\f078";
1092
}
1093
.icon-retweet:before {
1094
  content: "\f079";
1095
}
1096
.icon-shopping-cart:before {
1097
  content: "\f07a";
1098
}
1099
.icon-folder-close:before {
1100
  content: "\f07b";
1101
}
1102
.icon-folder-open:before {
1103
  content: "\f07c";
1104
}
1105
.icon-resize-vertical:before {
1106
  content: "\f07d";
1107
}
1108
.icon-resize-horizontal:before {
1109
  content: "\f07e";
1110
}
1111
.icon-bar-chart:before {
1112
  content: "\f080";
1113
}
1114
.icon-twitter-sign:before {
1115
  content: "\f081";
1116
}
1117
.icon-facebook-sign:before {
1118
  content: "\f082";
1119
}
1120
.icon-camera-retro:before {
1121
  content: "\f083";
1122
}
1123
.icon-key:before {
1124
  content: "\f084";
1125
}
1126
.icon-cogs:before {
1127
  content: "\f085";
1128
}
1129
.icon-comments:before {
1130
  content: "\f086";
1131
}
1132
.icon-thumbs-up:before {
1133
  content: "\f087";
1134
}
1135
.icon-thumbs-down:before {
1136
  content: "\f088";
1137
}
1138
.icon-star-half:before {
1139
  content: "\f089";
1140
}
1141
.icon-heart-empty:before {
1142
  content: "\f08a";
1143
}
1144
.icon-signout:before {
1145
  content: "\f08b";
1146
}
1147
.icon-linkedin-sign:before {
1148
  content: "\f08c";
1149
}
1150
.icon-pushpin:before {
1151
  content: "\f08d";
1152
}
1153
.icon-external-link:before {
1154
  content: "\f08e";
1155
}
1156
.icon-signin:before {
1157
  content: "\f090";
1158
}
1159
.icon-trophy:before {
1160
  content: "\f091";
1161
}
1162
.icon-github-sign:before {
1163
  content: "\f092";
1164
}
1165
.icon-upload-alt:before {
1166
  content: "\f093";
1167
}
1168
.icon-lemon:before {
1169
  content: "\f094";
1170
}
1171
.icon-phone:before {
1172
  content: "\f095";
1173
}
1174
.icon-check-empty:before {
1175
  content: "\f096";
1176
}
1177
.icon-bookmark-empty:before {
1178
  content: "\f097";
1179
}
1180
.icon-phone-sign:before {
1181
  content: "\f098";
1182
}
1183
.icon-twitter:before {
1184
  content: "\f099";
1185
}
1186
.icon-facebook:before {
1187
  content: "\f09a";
1188
}
1189
.icon-github:before {
1190
  content: "\f09b";
1191
}
1192
.icon-unlock:before {
1193
  content: "\f09c";
1194
}
1195
.icon-credit-card:before {
1196
  content: "\f09d";
1197
}
1198
.icon-rss:before {
1199
  content: "\f09e";
1200
}
1201
.icon-hdd:before {
1202
  content: "\f0a0";
1203
}
1204
.icon-bullhorn:before {
1205
  content: "\f0a1";
1206
}
1207
.icon-bell:before {
1208
  content: "\f0a2";
1209
}
1210
.icon-certificate:before {
1211
  content: "\f0a3";
1212
}
1213
.icon-hand-right:before {
1214
  content: "\f0a4";
1215
}
1216
.icon-hand-left:before {
1217
  content: "\f0a5";
1218
}
1219
.icon-hand-up:before {
1220
  content: "\f0a6";
1221
}
1222
.icon-hand-down:before {
1223
  content: "\f0a7";
1224
}
1225
.icon-circle-arrow-left:before {
1226
  content: "\f0a8";
1227
}
1228
.icon-circle-arrow-right:before {
1229
  content: "\f0a9";
1230
}
1231
.icon-circle-arrow-up:before {
1232
  content: "\f0aa";
1233
}
1234
.icon-circle-arrow-down:before {
1235
  content: "\f0ab";
1236
}
1237
.icon-globe:before {
1238
  content: "\f0ac";
1239
}
1240
.icon-wrench:before {
1241
  content: "\f0ad";
1242
}
1243
.icon-tasks:before {
1244
  content: "\f0ae";
1245
}
1246
.icon-filter:before {
1247
  content: "\f0b0";
1248
}
1249
.icon-briefcase:before {
1250
  content: "\f0b1";
1251
}
1252
.icon-fullscreen:before {
1253
  content: "\f0b2";
1254
}
1255
.icon-group:before {
1256
  content: "\f0c0";
1257
}
1258
.icon-link:before {
1259
  content: "\f0c1";
1260
}
1261
.icon-cloud:before {
1262
  content: "\f0c2";
1263
}
1264
.icon-beaker:before {
1265
  content: "\f0c3";
1266
}
1267
.icon-cut:before {
1268
  content: "\f0c4";
1269
}
1270
.icon-copy:before {
1271
  content: "\f0c5";
1272
}
1273
.icon-paper-clip:before {
1274
  content: "\f0c6";
1275
}
1276
.icon-save:before {
1277
  content: "\f0c7";
1278
}
1279
.icon-sign-blank:before {
1280
  content: "\f0c8";
1281
}
1282
.icon-reorder:before {
1283
  content: "\f0c9";
1284
}
1285
.icon-list-ul:before {
1286
  content: "\f0ca";
1287
}
1288
.icon-list-ol:before {
1289
  content: "\f0cb";
1290
}
1291
.icon-strikethrough:before {
1292
  content: "\f0cc";
1293
}
1294
.icon-underline:before {
1295
  content: "\f0cd";
1296
}
1297
.icon-table:before {
1298
  content: "\f0ce";
1299
}
1300
.icon-magic:before {
1301
  content: "\f0d0";
1302
}
1303
.icon-truck:before {
1304
  content: "\f0d1";
1305
}
1306
.icon-pinterest:before {
1307
  content: "\f0d2";
1308
}
1309
.icon-pinterest-sign:before {
1310
  content: "\f0d3";
1311
}
1312
.icon-google-plus-sign:before {
1313
  content: "\f0d4";
1314
}
1315
.icon-google-plus:before {
1316
  content: "\f0d5";
1317
}
1318
.icon-money:before {
1319
  content: "\f0d6";
1320
}
1321
.icon-caret-down:before {
1322
  content: "\f0d7";
1323
}
1324
.icon-caret-up:before {
1325
  content: "\f0d8";
1326
}
1327
.icon-caret-left:before {
1328
  content: "\f0d9";
1329
}
1330
.icon-caret-right:before {
1331
  content: "\f0da";
1332
}
1333
.icon-columns:before {
1334
  content: "\f0db";
1335
}
1336
.icon-sort:before {
1337
  content: "\f0dc";
1338
}
1339
.icon-sort-down:before {
1340
  content: "\f0dd";
1341
}
1342
.icon-sort-up:before {
1343
  content: "\f0de";
1344
}
1345
.icon-envelope-alt:before {
1346
  content: "\f0e0";
1347
}
1348
.icon-linkedin:before {
1349
  content: "\f0e1";
1350
}
1351
.icon-undo:before,
1352
.icon-rotate-left:before {
1353
  content: "\f0e2";
1354
}
1355
.icon-legal:before {
1356
  content: "\f0e3";
1357
}
1358
.icon-dashboard:before {
1359
  content: "\f0e4";
1360
}
1361
.icon-comment-alt:before {
1362
  content: "\f0e5";
1363
}
1364
.icon-comments-alt:before {
1365
  content: "\f0e6";
1366
}
1367
.icon-bolt:before {
1368
  content: "\f0e7";
1369
}
1370
.icon-sitemap:before {
1371
  content: "\f0e8";
1372
}
1373
.icon-umbrella:before {
1374
  content: "\f0e9";
1375
}
1376
.icon-paste:before {
1377
  content: "\f0ea";
1378
}
1379
.icon-lightbulb:before {
1380
  content: "\f0eb";
1381
}
1382
.icon-exchange:before {
1383
  content: "\f0ec";
1384
}
1385
.icon-cloud-download:before {
1386
  content: "\f0ed";
1387
}
1388
.icon-cloud-upload:before {
1389
  content: "\f0ee";
1390
}
1391
.icon-user-md:before {
1392
  content: "\f0f0";
1393
}
1394
.icon-stethoscope:before {
1395
  content: "\f0f1";
1396
}
1397
.icon-suitcase:before {
1398
  content: "\f0f2";
1399
}
1400
.icon-bell-alt:before {
1401
  content: "\f0f3";
1402
}
1403
.icon-coffee:before {
1404
  content: "\f0f4";
1405
}
1406
.icon-food:before {
1407
  content: "\f0f5";
1408
}
1409
.icon-file-alt:before {
1410
  content: "\f0f6";
1411
}
1412
.icon-building:before {
1413
  content: "\f0f7";
1414
}
1415
.icon-hospital:before {
1416
  content: "\f0f8";
1417
}
1418
.icon-ambulance:before {
1419
  content: "\f0f9";
1420
}
1421
.icon-medkit:before {
1422
  content: "\f0fa";
1423
}
1424
.icon-fighter-jet:before {
1425
  content: "\f0fb";
1426
}
1427
.icon-beer:before {
1428
  content: "\f0fc";
1429
}
1430
.icon-h-sign:before {
1431
  content: "\f0fd";
1432
}
1433
.icon-plus-sign-alt:before {
1434
  content: "\f0fe";
1435
}
1436
.icon-double-angle-left:before {
1437
  content: "\f100";
1438
}
1439
.icon-double-angle-right:before {
1440
  content: "\f101";
1441
}
1442
.icon-double-angle-up:before {
1443
  content: "\f102";
1444
}
1445
.icon-double-angle-down:before {
1446
  content: "\f103";
1447
}
1448
.icon-angle-left:before {
1449
  content: "\f104";
1450
}
1451
.icon-angle-right:before {
1452
  content: "\f105";
1453
}
1454
.icon-angle-up:before {
1455
  content: "\f106";
1456
}
1457
.icon-angle-down:before {
1458
  content: "\f107";
1459
}
1460
.icon-desktop:before {
1461
  content: "\f108";
1462
}
1463
.icon-laptop:before {
1464
  content: "\f109";
1465
}
1466
.icon-tablet:before {
1467
  content: "\f10a";
1468
}
1469
.icon-mobile-phone:before {
1470
  content: "\f10b";
1471
}
1472
.icon-circle-blank:before {
1473
  content: "\f10c";
1474
}
1475
.icon-quote-left:before {
1476
  content: "\f10d";
1477
}
1478
.icon-quote-right:before {
1479
  content: "\f10e";
1480
}
1481
.icon-spinner:before {
1482
  content: "\f110";
1483
}
1484
.icon-circle:before {
1485
  content: "\f111";
1486
}
1487
.icon-reply:before,
1488
.icon-mail-reply:before {
1489
  content: "\f112";
1490
}
1491
.icon-folder-close-alt:before {
1492
  content: "\f114";
1493
}
1494
.icon-folder-open-alt:before {
1495
  content: "\f115";
1496
}
1497
.icon-expand-alt:before {
1498
  content: "\f116";
1499
}
1500
.icon-collapse-alt:before {
1501
  content: "\f117";
1502
}
1503
.icon-smile:before {
1504
  content: "\f118";
1505
}
1506
.icon-frown:before {
1507
  content: "\f119";
1508
}
1509
.icon-meh:before {
1510
  content: "\f11a";
1511
}
1512
.icon-gamepad:before {
1513
  content: "\f11b";
1514
}
1515
.icon-keyboard:before {
1516
  content: "\f11c";
1517
}
1518
.icon-flag-alt:before {
1519
  content: "\f11d";
1520
}
1521
.icon-flag-checkered:before {
1522
  content: "\f11e";
1523
}
1524
.icon-terminal:before {
1525
  content: "\f120";
1526
}
1527
.icon-code:before {
1528
  content: "\f121";
1529
}
1530
.icon-reply-all:before {
1531
  content: "\f122";
1532
}
1533
.icon-mail-reply-all:before {
1534
  content: "\f122";
1535
}
1536
.icon-star-half-full:before,
1537
.icon-star-half-empty:before {
1538
  content: "\f123";
1539
}
1540
.icon-location-arrow:before {
1541
  content: "\f124";
1542
}
1543
.icon-crop:before {
1544
  content: "\f125";
1545
}
1546
.icon-code-fork:before {
1547
  content: "\f126";
1548
}
1549
.icon-unlink:before {
1550
  content: "\f127";
1551
}
1552
.icon-question:before {
1553
  content: "\f128";
1554
}
1555
.icon-info:before {
1556
  content: "\f129";
1557
}
1558
.icon-exclamation:before {
1559
  content: "\f12a";
1560
}
1561
.icon-superscript:before {
1562
  content: "\f12b";
1563
}
1564
.icon-subscript:before {
1565
  content: "\f12c";
1566
}
1567
.icon-eraser:before {
1568
  content: "\f12d";
1569
}
1570
.icon-puzzle-piece:before {
1571
  content: "\f12e";
1572
}
1573
.icon-microphone:before {
1574
  content: "\f130";
1575
}
1576
.icon-microphone-off:before {
1577
  content: "\f131";
1578
}
1579
.icon-shield:before {
1580
  content: "\f132";
1581
}
1582
.icon-calendar-empty:before {
1583
  content: "\f133";
1584
}
1585
.icon-fire-extinguisher:before {
1586
  content: "\f134";
1587
}
1588
.icon-rocket:before {
1589
  content: "\f135";
1590
}
1591
.icon-maxcdn:before {
1592
  content: "\f136";
1593
}
1594
.icon-chevron-sign-left:before {
1595
  content: "\f137";
1596
}
1597
.icon-chevron-sign-right:before {
1598
  content: "\f138";
1599
}
1600
.icon-chevron-sign-up:before {
1601
  content: "\f139";
1602
}
1603
.icon-chevron-sign-down:before {
1604
  content: "\f13a";
1605
}
1606
.icon-html5:before {
1607
  content: "\f13b";
1608
}
1609
.icon-css3:before {
1610
  content: "\f13c";
1611
}
1612
.icon-anchor:before {
1613
  content: "\f13d";
1614
}
1615
.icon-unlock-alt:before {
1616
  content: "\f13e";
1617
}
1618
.icon-bullseye:before {
1619
  content: "\f140";
1620
}
1621
.icon-ellipsis-horizontal:before {
1622
  content: "\f141";
1623
}
1624
.icon-ellipsis-vertical:before {
1625
  content: "\f142";
1626
}
1627
.icon-rss-sign:before {
1628
  content: "\f143";
1629
}
1630
.icon-play-sign:before {
1631
  content: "\f144";
1632
}
1633
.icon-ticket:before {
1634
  content: "\f145";
1635
}
1636
.icon-minus-sign-alt:before {
1637
  content: "\f146";
1638
}
1639
.icon-check-minus:before {
1640
  content: "\f147";
1641
}
1642
.icon-level-up:before {
1643
  content: "\f148";
1644
}
1645
.icon-level-down:before {
1646
  content: "\f149";
1647
}
1648
.icon-check-sign:before {
1649
  content: "\f14a";
1650
}
1651
.icon-edit-sign:before {
1652
  content: "\f14b";
1653
}
1654
.icon-external-link-sign:before {
1655
  content: "\f14c";
1656
}
1657
.icon-share-sign:before {
1658
  content: "\f14d";
1659
 
1660
}
1661
 
 

Google+ widget

CSSDeck G+