<div id="wrap">
<div id="wrap">
<header role="banner">
<h1>Hide the sidebar!</h1>
<a href="http://twitter.com/genelocklin" title="follow me for more awesome shit">by @genelocklin</a>
</header> <nav role="navigation"></nav>
<input type="checkbox" id="width_sidebar" role="button">
<label for="width_sidebar"><span>hide the sidebar</span><span>»</span><span>«</span></label>
<div role="main">
<article class="post">
<h1 itemprop="headline">Hide the Sidebar!</h1>
<p>Toggle the button to the right, to hide the sidebar. Father Christmas. Santa Claus. Or as I've always known him: Jeff. I'm the Doctor. </p><h2>The Pandorica Opens</h2>
<p>Father Christmas. Santa Claus. Or as I've always known him: Jeff. I'm the Doctor. Well, they call me the Doctor. I don't know why. I call me the Doctor too. I still don't know why. I hate yogurt. It's just stuff with bits in. It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! I am the Doctor, and you are the Daleks!</p>
<h3>Planet of the Dead</h3>
<p>Aw, you're all Mr. Grumpy Face today. You've swallowed a planet! The way I see it, every life is a pile of good things and bad things.…hey.…the good things don't always soften the bad things; but vice-versa the bad things don't necessarily spoil the good things and make them unimportant. You hate me; you want to kill me! Well, go on! Kill me! KILL ME! Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you? It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'!</p>
<h4>The Waters of Mars</h4>
<p>The way I see it, every life is a pile of good things and bad things.…hey.…the good things don't always soften the bad things; but vice-versa the bad things don't necessarily spoil the good things and make them unimportant. You hit me with a cricket bat. Heh-haa! Super squeaky bum time! Stop talking, brain thinking. Hush. I'm the Doctor, I'm worse than everyone's aunt. *catches himself* And that is not how I'm introducing myself.</p>
<h5>The Stolen Earth</h5>
<p>Heh-haa! Super squeaky bum time! You hate me; you want to kill me! Well, go on! Kill me! KILL ME! You hate me; you want to kill me! Well, go on! Kill me! KILL ME! It's a fez. I wear a fez now. Fezes are cool.</p>
<h6>Amy's Choice</h6>
<p>I'm the Doctor. Well, they call me the Doctor. I don't know why. I call me the Doctor too. I still don't know why. Heh-haa! Super squeaky bum time! Did I mention we have comfy chairs? I'm the Doctor, I'm worse than everyone's aunt. *catches himself* And that is not how I'm introducing myself.</p>
</article><!-- /post -->
</div><!-- /main -->
<aside role="complimentary">
<h2><a href="http://twitter.com/genelocklin" title="follow gene locklin">Follow me on Twitter</a></h2>
<p>Father Christmas. Santa Claus. Or as I've always known him: Jeff. I'm the Doctor. Well, they call me the Doctor. I don't know why. I call me the Doctor too. I still don't know why. I hate yogurt. It's just stuff with bits in. It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'! I am the Doctor, and you are the Daleks!</p>
<p>Aw, you're all Mr. Grumpy Face today. You've swallowed a planet! The way I see it, every life is a pile of good things and bad things.…hey.…the good things don't always soften the bad things; but vice-versa the bad things don't necessarily spoil the good things and make them unimportant. You hate me; you want to kill me! Well, go on! Kill me! KILL ME! Annihilate? No. No violence. I won't stand for it. Not now, not ever, do you understand me?! I'm the Doctor, the Oncoming Storm - and you basically meant beat them in a football match, didn't you? It's art! A statement on modern society, 'Oh Ain't Modern Society Awful?'!</p>
</aside></div><!-- /wrap -->
/* -------------------------------------------------------
/* ------------------------------------------------------- ================================================== */@import url(http://fonts.googleapis.com/css?family=Bitter:400,700);
/* ------------------------------------------------------- ================================================== */* {margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
box-sizing: border-box;
box-sizing: border-box;
}
body {font-family: 'Bitter', sans-serif;
font-weight: normal;
font-size: 100%;
line-height: 1.5em;
color: #4b4b4b;
background: #252525 url(http://cssdeck.com/uploads/media/items/4/439xn4M.png) 0 0 repeat;
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5);
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Bitter', serif;
font-weight: normal;
color: #121212;
}
h1 {font-size: 1.5em;
line-height: 1em;
margin: 1em 0;
}
h2, h3 {
font-size: 1.25em;
line-height: 1.2em;
margin: 1.2em 0;
}
h4, h5, h6 {
font-size: 1em;
line-height: 1.5em;
margin: 1.5em 0;
}
p {margin: 0 0 1.5em 0;
color: #727272;
hyphens: auto;
hyphens: auto;
hyphens: auto;
hyphens: auto;
hyphens: auto;
}
a {text-decoration: none;
color: #fff;
text-shadow: none;
}
a:hover { border-bottom: 2px solid }
#wrap {max-width: 960px;
width: 90%;
margin: 3em auto;
background: #edeff4 url(http://cssdeck.com/uploads/media/items/4/439xn4M.png) 0 0 repeat;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
[role="banner"] {
width: 100%;
background: #263347 url(http://cssdeck.com/uploads/media/items/4/439xn4M.png) 0 0 repeat;
padding: 3em 2.5%;
}
[role="banner"] h1 {
color: #fff;
text-shadow: none;
line-height: 1;
margin: 0;
}
[role="banner"] a {
text-decoration: none;
color: #fff;
text-shadow: none;
}
[role="banner"] a:hover { border-bottom: 2px solid }
nav {height: 2em;
width: 100%;
background: #7db067 url(http://cssdeck.com/uploads/media/items/4/439xn4M.png) 0 0 repeat;
}
[role="main"] {
width: 60%;
float: left;
z-index: 10;
background: #f6f6f6 url(http://cssdeck.com/uploads/media/items/4/439xn4M.png) 0 0 repeat;
height: 100%;
padding: 0 2.5%;
margin-top: -1.5em;
border-right: 1px solid #e4e4e4;
}
[role="main"] h1:first-child { margin: 2em 0 }
[role="complimentary"] {
width: 40%;
float: right;
padding: 0 2.5%;
}
[role="complimentary"] p {
font-size: 0.875em;
line-height: 1.714286em;
margin-bottom: 1.714286em;
}
[role="complimentary"] h2 { margin: 1.2em 0 2.4em 0 }
[role="complimentary"] h2 a {
color: #263347;
text-decoration: none;
}
[role="complimentary"] h2 a:hover { border-bottom: 2px solid #263347 }
input[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="width_sidebar"] {
border-right: 1px solid #e4e4e4;
border-bottom: 1px solid #e4e4e4;
display: inline;
border-radius: 0 0 5px 0;
float: left;
margin-left: 59.9%;
position: relative;
top: 0;
width: 5%;
height: auto;
background: #f6f6f6 url(http://cssdeck.com/uploads/media/items/4/439xn4M.png) 0 0 repeat;
text-align: center;
color: #bebebe;
line-height: 1.5em;
}
[for="width_sidebar"]:hover ~ [role="main"] { box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1) }
[for="width_sidebar"] span:nth-of-type(1) {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="width_sidebar"] span:nth-of-type(3) {
display: none;
visibility: hidden;
}
input[type=checkbox]:checked ~ [role="complimentary"] { width: 100% !important }
input[type=checkbox]:checked ~ [role="main"] {
width: 100%;
box-shadow: none;
}
input[type=checkbox]:checked ~ [for="width_sidebar"] {
border: none;
margin: 0;
float: right;
}
input[type=checkbox]:checked ~ [for="width_sidebar"] span:nth-of-type(3) {
display: block;
visibility: visible;
}
input[type=checkbox]:checked ~ [for="width_sidebar"] span:nth-of-type(2) {
display: none;
visibility: hidden;
}
@media screen and (max-width: 804px) {
[for="width_sidebar"] { margin-left: 59.7% }
}
@media screen and (max-width: 550px) {
html { font-size: 90% }
[role="complimentary"] {
width: 100%;
background: #edeff4 url(http://cssdeck.com/uploads/media/items/4/439xn4M.png) 0 0 repeat;
}
[role="main"] {
width: 100%;
margin-top: 0;
}
[for="width_sidebar"] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
}