Ajax Loader
HTML 
<div class="container">
1
<div class="container">
2
  <h2>Simply Listful</h2>
3
  <ol class="ordered-list">
4
    <li>Overall .fw.png width: 1400 px.</li>
5
    <li>Eye-Strain reducer (same as the container class in Bootstrap): 1230 px.</li>
6
    <li>Overall grid size: 1170 px.</li>
7
    <li>Gutter size: 30 px.</li>
8
    <li>12 column grid size: 70 px.</li>
9
    <li>6 column grid size: 170 px.</li>
10
    <li>4 column grid size: 270 px.</li>
11
    <li>3 column grid size: 370 px.</li>
12
  </ol>
13
</div>
14
 
15
<div class="copyright">
16
  Created by <a href="http://www.fwpolice.com">The Fireworks Police</a>  
17
</div>
 
CSS 
body {
1
body {
2
  background: #F5F5F5;
3
  font-size: 14px;
4
}
5
 
6
.container {
7
  width: 500px;
8
  margin: auto;
9
  background: #FFFFFF;
10
  padding: 10px 20px;
11
  margin-top: 10%;
12
}
13
 
14
h2 {
15
  font-size: 16px;
16
  font-weight: lighter;
17
  background: rgba(255,60,0,0.7);
18
  display: inline-block;
19
  padding: 5px 20px;
20
  margin-left: -20px;
21
  color: #FFFFFF;
22
  letter-spacing: 1px;
23
  text-transform: uppercase;
24
}
25
 
26
ol.ordered-list {
27
    counter-reset:li; /* Initiate a counter */
28
    margin-left:0; /* Remove the default left margin */
29
    padding-left:0; /* Remove the default left padding */
30
}
31
ol.ordered-list > li {
32
    position:relative; /* Create a positioning context */
33
    margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
34
    padding:4px 8px; /* Add some spacing around the content */
35
    list-style:none; /* Disable the normal item numbering */
36
    border-top:2px solid #ccc;
37
    background:#fff;
38
    cursor: default
39
}
40
ol.ordered-list > li:before {
41
    content:counter(li); /* Use the counter as content */
42
    counter-increment:li; /* Increment the counter by 1 */
43
    /* Position and style the number */
44
    position:absolute;
45
    top:-2px;
46
    left:-2em;
47
    -moz-box-sizing:border-box;
48
    -webkit-box-sizing:border-box;
49
    box-sizing:border-box;
50
    width:2em;
51
    /* Some space between the number and the content in browsers that support
52
       generated content but not positioning it (Camino 2 is one example) */
53
    margin-right:8px;
54
    padding:4px;
55
    border-top:2px solid #ccc;
56
    color:#fff;
57
    background:#ccc;
58
    font-weight:bold;
59
    font-family:"Helvetica Neue", Arial, sans-serif;
60
    text-align:center;
61
}
62
 
63
ol.ordered-list > li:hover, ol > li:hover {
64
  border-color: rgba(255,60,0,0.7);
65
  background-color: #f5f5f5; }
66
 
67
ol.ordered-list > li:hover:before, ol > li:hover:before {
68
  background-color: rgba(255,60,0,0.7);
69
  border-color: rgba(255,60,0,0.7); }
70
 
71
.ordered-list li ol,
72
.ordered-list li ul {margin-top:6px;}
73
.ordered-list ol ol li:last-child {margin-bottom:0;}
74
 
75
 
76
 
77
 
78
 
79
 
80
 
81
 
82
/*********** IGNORE *************/
83
.copyright { margin-top: 50px; font-size: 12px; text-transform: uppercase; display: block; text-align: center; }
84
.copyright a { text-decoration: none; padding: 5px;background: rgba(255,60,0,0.7); color: #FFFFFF; }
85
.copyright a:hover { background: transparent; color: rgba(255,60,0,0.7); }
 

Simply Listful

CSSDeck G+