.nav { background-color: #F5F5F5; } body { counter-reset: li; /* initialize counter named li */ background-repeat: no-repeat; background-attachment: scroll; background-position: right top; background-size: 200px; } h1 { font-family:Arial, Helvetica, sans-serif; font-weight:bold; } h2 { font-family:Arial, Helvetica, sans-serif; font-weight:bold; margin-top: 24px; } ol { margin-left:0; /* Remove the default left margin */ padding-left:0; /* Remove the default left padding */ } ol > li { position:relative; /* Create a positioning context */ margin:0 0 10px 2em; /* Give each list item a left margin to make room for the numbers */ padding:10px 80px; /* Add some spacing around the content */ list-style:none; /* Disable the normal item numbering */ border-top:2px solid #317EAC; background:rgba(49, 126, 172, 0.1); } 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:7em; /* Some space between the number and the content in browsers that support generated content but not positioning it (Camino 2 is one example) */ margin-right:8px; padding:4px; border-top:2px solid #317EAC; color:#fff; background:#317EAC; font-weight:bold; font-family:"Helvetica Neue", Arial, sans-serif; text-align:center; } li ol, li ul {margin-top:6px;} ol ol li:last-child {margin-bottom:0;} .oyo ul { list-style-type:decimal; } hr { border: 5px solid #357FAA; } div#boxedtext { background-color: rgba(86, 155, 189, 0.2); padding: 20px; margin-bottom: 20px; font-size: 10pt; } div#template { margin-top: 30px; margin-bottom: 30px; color: #808080; border:1px solid #808080; padding: 10px 10px; background-color: rgba(128, 128, 128, 0.2); border-radius: 5px; } div#license { margin-top: 100px; margin-bottom: 30px; color: #4C721D; border:1px solid #4C721D; padding: 30px 30px; background-color: rgba(76, 114, 29, 0.2); border-radius: 5px; } blockquote { padding: 10px 20px; margin: 0 0 20px; font-size: 14px; border-left: 5px solid #eee; } /*background-image: url("Graficos/Number_species_vs_Alien.png"); it goes in body if needed/*