CSS Sidebar tabs

HTML

<link rel="stylesheet" href="http://fortawesome.github.com/Font-Awesome/assets/css/font-awesome.css">
<div id="tabContainer">
    <div class="tab">
        <input type="radio" id="tab-dashboard" name="tabGroup" checked>
        <label for="tab-dashboard">	<i class="icon-dashboard"></i>
	<span>Dashboard</span>

        </label>
        <section>
            <h1>Dashboard section</h1>
            
            <p>This is a prototype for tabbed content.
                <p>The prototype was made as part of the initial designs for <a href="http://nomad.brightflair.com" target="_blank">Nomad</a>, a project management tool made by <a href="http://brightflair.com" target="_blank">Bright Flair</a>.

        </section>
    </div>
    <div class="tab">
        <input type="radio" id="tab-discussion" name="tabGroup">
        <label for="tab-discussion">	<i class="icon-comments"></i>
	<span>Discussion</span>

        </label>
        <section>
            	<h1>Discussion</h1>
            
            <p>What technologies are used?
            <p>Well, if you're viewing this in JSFiddle, you'll see there is absolutely no JavaScript, which is the point in the prototype.
                <p>At BrightFlair, we love JavaScript. But there's a time and place for things, and creating usable naviation isn't what JavaScript should be used for - we believe that JavaScript should <em>only</em> be used for enhancing the experience.

        </section>
    </div>
    <div class="tab">
        <input type="radio" id="tab-calendar" name="tabGroup">
        <label for="tab-calendar">	<i class="icon-calendar"></i>
	<span>Calendar</span>

        </label>
        <section>
            	<h1>Calendar</h1>

            	<p>I've run out of things to say.
                    
                <p>This was made in January 2013, just as the first prototype of Nomad was.
        </section>
    </div>
    <div class="tab">
        <input type="radio" id="tab-time" name="tabGroup">
        <label...

SCSS

$sidebarColor = #ddd;

body, html {
    height: 100%;
}
#tabContainer {
    background: $sidebarColor;
    width: 128px;
    height: 100%;
    
    .tab {
        float: left;
        
        label {
            display: block;
            background: $sidebarColor;
            color: #666;
            width: 128px;
            height: 16px;
            padding: 8px 0;
            cursor: pointer;
            
            i {
                color: #000;
            }
            
            &:hover span {
                text-decoration: underline;
            }
        }
        
        [type='radio'] {
            display: none;
            
            &:checked {
                ~ label {
                        background: #fff;
                        color: #000;
                        
                        ~ section {
                            display: block;
                        }
                }
            }
        }
        section {
            display: none;
            position: absolute;
            left: 128px;
            right: 0;
            top: 0;
            bottom: 0;
            background: #fff;
            @include Anim(Slide);
            
            h1 {
                font-size: 24px;
                margin: 8px 0;
            }
            
            p {
                margin-bottom: 8px;
            }
        }
    }
}