<html>
    <head>
        <title>Release Notes</title>
        <style>
            body {
                background-color: hsl(200, 90%, 40%);
                font-family: "Avenir";
                font-size:16px;
            }
        #main {
            display:block;
            position:relative;
            width:75%;
            margin:0 auto;
        }
        body:hover #main {
        }
        #content {
            display:block;
            position:relative;
            background-color: white;
            padding:2em;
            margin-top:1em;
            -webkit-border-radius: 5px;
            border:4px solid hsl(200, 93%, 48%); ;
        }
        h3 {
            margin:0px;
            color:white;
            font-size:1.8em;
            font-weight:bold;
            text-align:center;
        }
        h4 {
            margin:0px;
            font-weight:normal;
        }
        h5 {
            margin:0px;
            font-size:1em;
            font-weight:normal;
        }
        ul {
            font-size:0.85em;
            display: block;
            list-style: none;
            margin:0;
            padding:0px;
        }
        li {
            margin:4px;
            list-style-type: none;
            margin-left:12em;
            margin-right:1.5em;
        }
        
        ul {
            margin-bottom:3em;
        }
		
		ul>h5 {
			margin: 20px 50px 5px 50px;
			text-align: center;
		}
		
        li:before {
            font-family: "Avenir-Medium";
            text-decoration:none;
            margin-left:-1.5em;
        }
        
        li a {
			position: relative;
			display: inline-block;
            font-family: "Avenir-Medium";
            font-size: 0.85em;
            color: hsla(200, 95%, 35%, 1.0);
            text-decoration:none;
			background: hsla(0, 0%, 90%, 1.0);
			margin: 0 10px;
			padding: 2px 5px;
			border: 1px solid hsla(0, 0%, 90%, 1.0);
			border-radius: 10px;
			min-width:10em;
			text-align:center;
			margin-left: -12em;
        }
		
		
		li a:before             { content: "Change"; }
		li.feature a:before     { content: "Feature #"; }
		li.improvement a:before { content: "Improved #"; }
		li.crash a:before       { content: "Crash #"; }
		li.bug a:before         { content: "Bug #"; }
		
		li.feature a     { background: hsla(100, 90%, 50%, 0.2); border-color: hsla(100, 90%, 50%, 0.3); }
		li.improvement a { background: hsla(200, 90%, 50%, 0.2); border-color: hsla(200, 90%, 50%, 0.3); }
		li.crash a       { background: hsla(  0, 90%, 50%, 0.2); border-color: hsla(  0, 90%, 50%, 0.3); }
		li.bug a         { background: hsla( 50, 90%, 50%, 0.2); border-color: hsla( 50, 90%, 50%, 0.3); }
		
        #content>img {
            float:right;
            max-width:25%;
        }
        
        
            </style>
    </head>
    
    <body>
        <div id='main'>
            <h3>Stacks v3.0</h3>
            <div id='content'>
                <img src='stacks_large@2x.png'>
					
                <h4>Stacks 3.0</h4>
                <ul>
                    <h5><a href="http://yourhead.com/stacks">So Much New Stuff</a></h5>
                </ul>
            </div>
        </div>
    </body>
</html>