Jeremy Keith adactio

## datalist.html
<!DOCTYPE html>
<title>Datalist test</title>
<meta charset="utf-8">
<form>
<label for="source">How did you hear about us?</label>
<datalist id="sources">
<select name="source">
<option>please choose...</option>
<option value="television">Television</option>
<option value="radio">Radio</option>

## flexboxtest.html
<!DOCTYPE html>
<html>
<head>
<title>Flexbox test</title>
<style>
@media screen and (min-width: 30em) {
	body {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-box;

## tabledisplaytest.html
<!DOCTYPE html>
<html>
<head>
<title>Table Display test</title>
<style>
@media screen and (min-width: 30em) {
	body {
		display: table;
		caption-side: top;
	}

## sectioningcontenttest.html
<!DOCTYPE html>
<html lang="en">
<title>Sectioning Content test</title>
<h1>This is an h1</h1>
<p>That h1 is the heading for the body (a sectioning root).</p>
<div>
<h1>This is another h1</h1>
<p>That h1 is inside a div so it is no different than the first h1.</p>
</div>
<section>

## conditionalcats.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Can’t Hug Every Cat</title>
<style>
body {
    font: 1em/1.5 Cambria, Georgia, serif;
    margin: 0 5%;

## monthform.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Input test</title>
</head>
<body>

<form method="post" action="#">

## twitter-user-stylesheet.css
[data-component-term="trends"] *,
[data-component-term="user_recommendations"] * {
 display: none !important;
}

## mediaquerycolums.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Media Query Multiple Columns</title>
<meta name="viewport" content="width=device-width, intial-scale=1">
<style>
@media all and (min-width: 40em) and (min-height: 36em) {
    [role="main"] {
        -webkit-column-count: 2;

## lettering.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<style>
.slogan span:nth-child(odd) {
    color: red;
}
</style>
</head>

## placeholderFromDatalist.js
(function(win,doc) {
	if (doc.querySelectorAll) {
		var inputs = doc.querySelectorAll('input[list]'),
			total = inputs.length;
		for (var i=0; i<total; i++) {
			var input = inputs[i],
				id = input.getAttribute('list'),
				list = doc.getElementById(id),
				options = list.getElementsByTagName('option'),
				amount = options.length,
	<!DOCTYPE html>
	<title>Datalist test</title>
	<meta charset="utf-8">
	<form>
	<label for="source">How did you hear about us?</label>
	<datalist id="sources">
	<select name="source">
	<option>please choose...</option>
	<option value="television">Television</option>
	<option value="radio">Radio</option>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Flexbox test</title>
	<style>
	@media screen and (min-width: 30em) {
	body {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-box;
	<!DOCTYPE html>
	<html lang="en">
	<title>Sectioning Content test</title>
	<h1>This is an h1</h1>
	<p>That h1 is the heading for the body (a sectioning root).</p>
	<div>
	<h1>This is another h1</h1>
	<p>That h1 is inside a div so it is no different than the first h1.</p>
	</div>
	<section>
	[data-component-term="trends"] *,
	[data-component-term="user_recommendations"] * {
	display: none !important;
	}
	(function(win,doc) {
	if (doc.querySelectorAll) {
	var inputs = doc.querySelectorAll('input[list]'),
	total = inputs.length;
	for (var i=0; i<total; i++) {
	var input = inputs[i],
	id = input.getAttribute('list'),
	list = doc.getElementById(id),
	options = list.getElementsByTagName('option'),
	amount = options.length,