gunnarbittersmann

/**
 * mark required fields
 */

label
{
	display: inline-block;
	position: relative;
	width: 9rem;
}

gunnarbittersmann

/**
 * figcaption transition
 */

figure
{
	position: relative;
	float: left;
}

gunnarbittersmann

/**
 * figcaption transition
 */

figure
{
	position: relative;
	float: left;
}

gunnarbittersmann

/**
 * figcaption transition
 */

figure
{
	position: relative;
	float: left;
}

gunnarbittersmann

/**
 * unescaped vs. escaped id and class selectors
 */

div
{
	background: red;
	display: inline-block;
	height: 10em;
	width: 10em;

gunnarbittersmann

 */
 
The first commented line is your dabblet’s title h1 { margin-top: 3em }
 
 html { margin-top: -3em }

gunnarbittersmann

/**
 * How To Vertically Center
 * http://www.vanseodesign.com/css/dynamic-vertical-centering/#comment-336477
 */

#parent {
  display: table-cell;
  height: 500px;
  width: 450px;
  vertical-align: middle;

gunnarbittersmann

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;

gunnarbittersmann

/**
 * Centered body with different backgrounds on both sides.
 */

* { box-sizing: border-box }

html
{
	height: 100%;
	background-image: url(http://www.dvd-ppt-slideshow.com/images/ppt-background/background-13.jpg),

gunnarbittersmann

/**
 * box-shadow for col
 */


col
{
	box-shadow: inset 2px 2px 2px 2px black;
}