* {
	margin: 0;
	padding: 0;
	}
	
	body {
	font: 12px/20px Arial, Sans-Serif;
	text-align: center;
	}
	
	h1 {
	margin: 0 0 20px;
	padding: 0 0 10px;
	font: 24px/20px Arial, Sans-Serif;
	text-align: center;
	text-shadow: 2px 2px 4px rgba(100,100,100,.5);
	color: #555;
	border-bottom: 3px double #eee;
	letter-spacing:3px;
	}
	
	h2 {
	margin: 0 0 20px;
	padding: 0 0 5px;
	font: bold 18px/20px Arial, Sans-Serif;
	letter-spacing: -1px;
	color: #333;
	border-bottom: 1px solid #eee;
	}
	
	li:hover{
		-webkit-transform: scale(1.8) rotate(0deg);
		text-indent:150px;
		-webkit-top-border:3px solid white;
		-webkit-bottom-border:3px solid black;
		font-color: rgba(200,0,0,.5);
	}
	
	strong {
	margin: 0 0 5px;
	display: block;
	color: #666;
	font-weight: normal;
	}
	
	a {
	text-decoration: none;
	color: #222;
	}
	
	a:hover {
	color:#999;
	
	}
		
	#container {
	margin: 50px auto;
	width: 700px;
	text-align: left;
	}
	
	.classic {
	float: left;
	width: 340px;
	}
	
	.new {
	margin-left: 20px;
	float: right;
	width: 340px;
	}
	
	.clear {
	clear: both;
	}
	
	.demo {
	margin: 0 0 20px;
	}
	
	.box {
	margin: 0 auto;
	width: 100px;
	height: 100px;
	background: #ccc;
	}
	
	.note {
	font-style: italic;
	text-align: center;
	}
	
	.note:before {
	content: 'Note: ';
	}
	
	ol {
	font: italic 18px/20px Georgia, Serif;
	color: #888;
	list-style:none;
	}
	
	ol li {
	padding: 5px 6px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #eee;
	border-radius:5px;
	}
			
	ol li:hover {
	background: #f9f9f9;
	}
		
	ol li a {
	font: 12px/20px Arial, Sans-Serif;
	color: #222;
	}
	
	#blue{
		background: rgba(100,100,250,.1);
	}
	
	#red {
		background: rgba(250,100,100,.1);
	}
	
	#green {
		background: rgba(100,250,100,.1);
	}
	
	#purple {
		background: rgba(250,100,250,.1);
	}

	#yellow {
		background: rgba(250,250,100,.1);
	}
	
	#orange {
		background: rgba(250,175,100,.1);
	}
	
	#pink {
		background: rgba(250,100,175,.1);
	}
	
	.reference1, .reference2{
		position:fixed;
		clear: both;
		bottom:10px;
		font-size:12px;
		word-spacing:5px;
	
	}
	
	.reference1 {
		left:15px;
	}
	
	.reference2{	
		right:10px;
	}
	
	.reference1 a, .reference2 a{
		color:rgba(0, 0, 0, 0.8);
		text-decoration:none;
		text-shadow:.4px .4px 2px #ccc;
		margin-right:10px;
	}

	span.reference1 a{
		color:rgba(0, 0, 0, 0.8);
	}

	span.reference2 a{
		color: rgba(109,  177,  211, 0.95);
	}

	.reference1 a:hover, .reference2 a:hover{
		color:rgba(220, 20, 60, 0.8);
	}