div.example:before {
	top: -0.6em;
	left: -2.5em;
	width: 7.5em;
	text-align: center;
}

div.example:before {
	color: white;
	background: #1976B9;
	padding: 0.5em;
	border: none;
	border-radius: 0.4em;
	box-shadow: black 2px 2px 2px;
	margin-top: -0.5em;
	left: -1em;
}

div.example {
	background: #f4f4f4;
	padding: 0.5em;
	margin: 1em 0;
	border: thin solid #999;
	position: relative;
	clear: both;
}

div.example {
	color: #303030
}

div.issue {
	color: red;
	margin-top: 1em;
	padding: 0.5em;
	border-left: 5px solid red;
	padding-left: 1em;
	position: relative;
	color: gray;
	padding-right: 10em;
}

div.issue:before {
	content: "Issue " counter(issue);
	background: none;
	padding: 0;
	margin: 0 0 0.7em 0;
	border: none;
	font-weight: bold;
	color: gray;
	display: block;
}

.issue {
	counter-increment: issue;
}

div.note {
	margin-top: 1em;
	padding: 0.5em;
	border-left: 5px solid #1C75BC;
	padding-left: 1em;
	position: relative;
	background: #F3FAFF;
}

div.note:before {
	content: "Note " counter(note);
	background: none;
	padding: 0;
	margin: 0 0 0.7em 0;
	border: none;
	font-weight: bold;
	color: #1C75BC;
	display: block;
}

div.note p {
	color: black;
}

div.note p:before {
	color: #1C75BC;
}

.note {
	counter-increment: note;
}

pre.code {
	margin-top: 1em;
	padding: 0.5em;
	border-left: 5px solid gray;
	padding-left: 1em;
	position: relative;
	background: #F0F0F0;
	margin-left: 0px;
}

.toggle {
	font-size: smaller;
	color: gray;
	float: right;
}

pre.idl {
	background: #f4f4f4;
	padding: 0.5em;
	margin: 1em 0;
	border: thin solid #999;
	position: relative;
	clear: both;
}

.swatch-list li {
	list-style: none;
}

.swatch-list {
	display: inline-block;
}

#region_styling_img_2 {
	float: left;
	margin-bottom: 1em;
}

.swatch {
	width: 1em;
	height: 1em;
	border: 1px solid black;
	display: inline-block;
	margin-right: 0.5em;
	margin-bottom: -0.25em;
	margin-top: 0.5em;
}

#region-style-example p, #region-style-example pre {
	clear: both;
}

#region_styling_illustration {
	margin: 0px auto;
	width: 70ex;
}