<div id="wrapper">
	<h3>List #1 : Simple navigation <code>&lt;ul&gt;</code></h3>
	<div id="list1">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	
	<h3>List #2 : Different font for numbering <code>&lt;ol&gt;</code></h3>
	<div id="list2">
		<ol>
			<li><p><em>The Netherlands</em> is a country in Northwestern Europe, constituting the major portion of the Kingdom of the Netherlands.</p></li>
			<li><p><em>The United States of America</em> is a federal constitutional republic comprising fifty states and a federal district.</p></li>
			<li><p><em>The Philippines</em> officially known as the Republic of the Philippines, is a country in Southeast Asia with Manila as its capital city.</p></li>
			<li><p><em>The United Kingdom</em> of Great Britain and Northern Ireland is a sovereign state located off the northwestern coast of continental Europe.</p></li>
		</ol>
	</div>
	
	<h3>List #3 : Image bullets <code>&lt;ul&gt;</code></h3>
	<div id="list3">
		<ul>
			<li>Java</li>
			<li>.NET</li>
			<li>C++</li>
			<li>PHP</li>
		</ul>
	</div>

	<h3>List #4 : iPhone Style List <code>&lt;ul&gt;</code></h3>
	<div id="list4">
		<ul>
			<li><a href="http://en.wikipedia.org/wiki/2004_Summer_Olympics"><strong>Toronto</strong>2004</a></li>
			<li><a href="http://en.wikipedia.org/wiki/2008_Summer_Olympics"><strong>Beijing</strong>2008</a></li>
			<li><a href="http://en.wikipedia.org/wiki/2012_Summer_Olympics"><strong>London</strong>2012</a></li>
			<li><a href="http://en.wikipedia.org/wiki/2016_Summer_Olympics"><strong>Rio de Janeiro</strong>2016</a></li>
		</ul>
	</div>
	
	<h3>List #5 : Nested lists <code>&lt;ol&gt;</code></h3>
	<div id="list5">
		<ol>
			<li>Google
				<ol>
					<li>Picasa</li>
					<li>Feedburner</li>
					<li>Youtube</li>
				</ol>
			</li>
			<li>Microsoft
				<ol>
					<li>Corel Corporation</li>
					<li>Zignals</li>
					<li>ByteTaxi</li>
				</ol>
			</li>
			<li>Yahoo!
				<ol>
					<li>Xoopit</li>
					<li>BuzzTracker</li>
					<li>MyBlogLog</li>
				</ol>
			</li>
		</ol>
	</div>
	
	<h3>List #6 : Roman numbering + inline multiline <code>&lt;ol&gt;</code></h3>
	<div id="list6">
		<ol>
			<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Fusce sit amet eros ut leo consectetur fermentum eget a dui.</li>
			<li>Aenean placerat lectus tristique est tempus feugiat.<br />Vivamus interdum dapibus suscipit.<br />Donec eu adipiscing ligula.</li>
			<li>Mauris eget sapien arcu, vitae feugiat risus.<br />Phasellus neque risus, egestas tincidunt blandit vel, suscipit vitae sem.</li>
			<li>Phasellus feugiat lacus at dolor auctor volutpat.<br />Duis rhoncus sollicitudin imperdiet.</li>
		</ol>
	</div>

	<h3>List #7 : Comma separated inline list <code>&lt;ol&gt; + pseudo-element</code></h3>
	<div id="list7">
		<ul>
			<li>First inline item</li>
			<li>Second inline item</li>
			<li>Third inline item</li>
			<li class="last">Fourth inline item</li>
		</ul>
	</div>
	
	<h3>List #8 : Rotated navigation <code>&lt;ul&gt; + CSS3</code></h3>
	<div id="list8">
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Blog</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</div>
	
</div>

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
body { background: #1d1d1d; color: #fff; background-image:url("../images/bg.png"); background-repeat:repeat-x; }
h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }
h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif;  text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
h2 a:hover { color: #90bcd0; }
h3 { font-style:italic; border-left:10px solid #eee; padding:10px 20px; margin:30px 0; color:#eee; }
h3 code { display:block; }

/* WRAPPER */
#wrapper { width:800px; margin:40px auto; }

/* LIST #1 */
#list1 { }
#list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; }
#list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; }
#list1 ul li a { text-decoration:none; color:#eee; }
#list1 ul li a:hover { text-decoration:underline; }

/* LIST #2 */
#list2 { width:320px; }
#list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1;  }
#list2 ol li { }
#list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; }
#list2 ol li p em { display:block; }

/* LIST #3 */
#list3 { }
#list3 ul { list-style-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAfBJREFUeNqkUz1s00AU/pymTlMRGoYIqUMXqgqJAaQTA0MlJoTIwAQDysLEmoWdsWMZGCLBgDASEj9ComLIwsCE1GQoqH+pGFggDW1T10ls3/nMu4vtOiVISH3S53e+8/vuez82wjDEaSyrHpeXvsIwjGSzWCola9qvkfsshLAE5+Cep+G7LjYeXR0SnDSn20W+UIhfWQRl1slvM+MI1E1929ZeoXJrlpGvIgwr/0WgLBACXq+n5R4eSlTKc4z7/l8kOgUqZC0l85gkCDRcV6Dd5rhXvsCev1uvRoW3EgK6hd2/e4U5joA6izszXAMHBx6RBGi1OO7cXGAv368lJJpAVdS2OTodL7ndpxSO+gMM6Mz3fUgp9f7OjwyuX5tj9U/b1WOCwQCmmUGxaILLELsuxz4FiGkTMj8J25VwvEATzJ+fxsrHZoPau5xOofGkVv/nsMzcvsHafYn5mQy+vKnr4MlczkoX8UEsMW0qT+rG6t7EFIrngO8vXg+DTdMa6UKv8QrjRtpYKGtfoGbvPbWGsvdblrP2FvznN+BxCEMFpsd4ZEhKF5FdfLiq1fzeWpabH6xgd2NEYTY1UGcIZyPk1absbEL8Wt+G223K5jMVeYlgR3DUqMQKlASTkCNMxamNm3KCF8GnWGmc9nf+I8AA34sNb71UQl0AAAAASUVORK5CYII=); color:#eee; font-size:18px; }
#list3 ul li { line-height:30px; }

/* LIST #4 */
#list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; }
#list4 ul { list-style: none; }
#list4 ul li { }
#list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px;
	border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; }
#list4 ul li a:hover { color:#FFFFFF; 
background: rgb(30,87,153); /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzFlNTc5OSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iIzI5ODlkOCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUxJSIgc3RvcC1jb2xvcj0iIzIwN2NjYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM3ZGI5ZTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  rgba(30,87,153,1) 0%, rgba(41,137,216,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(30,87,153,1)), color-stop(50%,rgba(41,137,216,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(30,87,153,1) 0%,rgba(41,137,216,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-8 */

}
#list4 ul li a strong { margin-right:10px; }

/* LIST #5 */
#list5 { color:#eee; }
#list5 ol { font-size:18px; }
#list5 ol li { }
#list5 ol li ol { list-style-image: url("../images/nested.png"); padding:5px 0 5px 18px; font-size:15px; }
#list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }

/* LIST #6 */
#list6 { font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; }
#list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px; list-style-position: inside; }
#list6 ol li { }

/* LIST #7 */
#list7 { }
#list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; }
#list7 ul li { display: inline; }
#list7 ul li:after { content: ", "; }
#list7 ul li.last:after { content: ". "; }

/* LIST #8 */
#list8 {  }
#list8 ul { list-style:none; }
#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }
#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;
	text-decoration:none; color:#bfe1f1; }
#list8 ul li a:hover {  -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;
	-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;
	transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }