<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="containter" style="margin-top:10px; margin-left: 250px; width:660px; border:1px solid black;">
<center>
<h4>Example 1: Plain</h4>
<table border=0 class="plain">
<tr>
<td>
<ol>
<li><p>There is a 2 drink minimum for all guests with reserved seating tickets</p></li>
<li><p>Dancing is not allowed on the premises. (abc-257 & 253)</p></li>
<li><p>No alcoholic beverages shall be consumed off the premises. (abc-257 & 253)</p></li>
<li><p>Flash photography is not permitted in the lounge.</p></li>
<li><p>Please present tickets upon arrival.</p></li>
</ol>
</td>
</tr>
</table>
<hr>
<h4>Example 2: Underlined</h4>
<table border=0 class="underlined">
<tr>
<td>
<ol id="example1">
<li><p>There is a 2 drink minimum for all guests with reserved seating tickets</p></li>
<li><p>Dancing is not allowed on the premises. (abc-257 & 253)</p></li>
<li><p>No alcoholic beverages shall be consumed off the premises. (abc-257 & 253)</p></li>
<li><p>Flash photography is not permitted in the lounge.</p></li>
<li><p>Please present tickets upon arrival.</p></li>
</ol>
</td>
</tr>
</table>
<hr>
<h4>Example 3: Rounded List</h4>
<table border=0 class="rounded-list">
<tr>
<td>
<ol>
<li><p>There is a 2 drink minimum for all guests with reserved seating tickets</p></li>
<li><p>Dancing is not allowed on the premises. (abc-257 & 253)</p></li>
<li><p>No alcoholic beverages shall be consumed off the premises. (abc-257 & 253)</p></li>
<li><p>Flash photography is not permitted in the lounge.</p></li>
<li><p>Please present tickets upon arrival.</p></li>
</ol>
</td>
</tr>
</table>
<hr>
<h4>Example 4: Rectangle List</h4>
<table border=0 class="rectangle-list">
<tr>
<td>
<ol>
<li><p>There is a 2 drink minimum for all guests with reserved seating tickets</p></li>
<li><p>Dancing is not allowed on the premises. (abc-257 & 253)</p></li>
<li><p>No alcoholic beverages shall be consumed off the premises. (abc-257 & 253)</p></li>
<li><p>Flash photography is not permitted in the lounge.</p></li>
<li><p>Please present tickets upon arrival.</p></li>
</ol>
</td>
</tr>
</table>
</center>
</div>
.plain ol > li
{
line-height: .8em;
}
/* -------------------------------------- */
/* underlined list stle */
.underlined ol
{
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}
.underlined ol > li
{
position:relative; /* Create a positioning context */
margin:0 0 6px 2em; /* Give each list item a left margin to make room for the numbers */
padding:4px 8px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
border-top:2px solid #666;
background:#f6f6f6;
}
.underlined ol > li:before
{
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:-2px;
left:-2em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:2em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it */
margin-right:8px;
padding:4px;
border-top:2px solid #666;
color:#fff;
background:#666;
font-weight:bold;
font-family:"Helvetica Neue", Arial, sans-serif;
text-align:center;
}
.underlined li ol,
.underlined li ul
{
margin-top:6px;
}
.underlined ol ol li:last-child
{
margin-bottom:0;
}
/* -------------------------------------- */
/* rounded list style */
/* list */
.rounded-list ol
{
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}
/* item */
.rounded-list ol > li
{
position:relative; /* Create a positioning context */
list-style:none; /* Disable the normal item numbering */
background:#f6f6f6; /* Item background color */
margin:0; /* Give each list item a left margin to make room for the numbers */
padding-left: 15px; /* Add some spacing around the content */
padding-bottom:0px;
padding-top:0px;
}
/* number */
.rounded-list ol > li p:before
{
content: counter(li);
counter-increment: li;
position: absolute;
left: -1.3em;
top: 50%;
/* number background */
background: #87ceeb;
height: 2em;
width: 2em;
margin-top: -1em;
line-height: 1.5em;
border: .3em solid #fff;
text-align: center;
font-weight: bold;
border-radius: 2em;
}
/* -------------------------------------- */
/* rectangle list style */
/* list */
.rectangle-list ol
{
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */
}
/* item */
.rectangle-list ol > li
{
position: relative;
list-style:none; /* Disable the normal item numbering */
}
/* item hover */
.rectangle-list p
{
display: block;
padding: .4em .4em .4em .8em;
*padding: .4em;
margin: .5em 0 .5em 2.5em;
background: #ddd;
color: #444;
text-decoration: none;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
/* item hover */
.rectangle-list p:hover
{
background: #fa8072;
}
/* number */
.rectangle-list p:before
{
content: counter(li);
counter-increment: li;
position: absolute;
left: -2.5em;
top: 50%;
margin-top: -1em;
background: #fa8072;
height: 2em;
width: 2em;
line-height: 2em;
text-align: center;
font-weight: bold;
}
/* number hover */
.rectangle-list p:after
{
position: absolute;
left: -1em;
top: 50%;
margin-top: -.5em;
content: '';
border: .5em solid transparent;
-webkit-transition: all .3s ease-out;
-moz-transition: all .3s ease-out;
-ms-transition: all .3s ease-out;
-o-transition: all .3s ease-out;
transition: all .3s ease-out;
}
.rectangle-list p:hover:after
{
left: -.5em;
border-left-color: #fa8072;
}
/* -------------------------------------- */
.circle-list li
{
padding: 2.5em;
border-bottom: 1px dashed #ccc;
}
.circle-list h2
{
position: relative;
margin: 0;
}
.circle-list p
{
margin: 0;
}
.circle-list h2:before
{
content: counter(li);
counter-increment: li;
position: absolute;
z-index: -1;
left: -1.3em;
top: -.8em;
background: #f5f5f5;
height: 1.5em;
width: 1.5em;
border: .1em solid rgba(0,0,0,.05);
text-align: center;
font: italic bold 1em/1.5em Georgia, Serif;
color: #ccc;
-moz-border-radius: 1.5em;
-webkit-border-radius: 1.5em;
border-radius: 1.5em;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.circle-list li:hover h2:before{
background-color: #ffd797;
border-color: rgba(0,0,0,.08);
border-width: .2em;
color: #444;
-webkit-transform: scale(1.5);
-moz-transform: scale(1.5);
-ms-transform: scale(1.5);
-o-transform: scale(1.5);
transform: scale(1.5);
}
