jwdallas

/**
 * text selection o'clock
 */

html {
	font-size: 44px;
	color: transparent;
   	text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

jwdallas

/**
 * Checkbox sizes
 */

html { font-family:'Lucida Grande' }
label { display:block }

label:nth-of-type(1),
label:nth-of-type(1) input {
font-size:13px;

jwdallas

* { margin:0; padding:0 }

nav {
  width: 220px;
  height: 30px;
  background-color: #bbb;
  position: relative;
}

div {

jwdallas

/**
   Semantic Single-State Toggle
*/

input[type=radio] { display:none }

label {
	float: left;
	padding: 10px;
	background: #f1f1f1;

jwdallas

/* subpixel antialiasing stress test */

* { margin:0; padding:0 }

li {
	display: block;
  	font: 100 2.6em/1.4 Helvetica Neue;
  	background-color: #fff;
}
li:nth-child(2) {

jwdallas

/* show icon based on text length */

* { margin:0; padding:0 }

li {
	display: inline-block;
	background: hsla(190,100%,50%,0.3);
	border-left: 3px solid hsl(190,100%,50%);
	width: 130px;
	padding: 4px 10px 40px 6px;

jwdallas

/**
 * Centered bubble
 */

* { margin:0; padding:0 }

figure { text-align:center; position:absolute;
	top:20%; left:50%; margin-left:-53px }
	
a { display:inline-block;

jwdallas

/**
 * Scrolling Shadows
 */

div { position:relative; z-index:1;
	overflow:auto; width:36em; max-height:200px;
	margin:50px auto; background:#fff no-repeat;
	background-image:radial-gradient(50% 0, farthest-side, rgba(0,0,0,0.2), rgba(0,0,0,0));
	background-size:100% 14px }

jwdallas

/**
 * New Header
 */
* { margin:0; padding:0 }
body { font:300 100%/1.4 proxima-nova-1,proxima-nova-2,sans-serif;
	color:#444; background:#fff }
a, a:active, a:focus, a:hover { outline:none; text-decoration:none; color:#78B000 }
a:hover,a:active, a:focus { text-decoration:underline }
input { outline:none }

jwdallas

/**
 * Info bar
 */

* { margin:0; padding:0 } 
body { font:100%/1.4 'proxima nova', sans-serif; padding:40px }

.info-bar { text-align:center; padding:6px 20px;
	font-size:28px; font-weight:600; color:#222;
	text-shadow:0 1px 0 rgba(255,255,255,0.4);