jeremypage/codeswing.json

## codeswing.json
{
  "scripts": [],
  "styles": [
    "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.css"
  ]
}

## index.html
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>
	<article>
		<h1>Lorem ipsum dolor sit amet</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet elementum sollicitudin. Sed
			condimentum lectus non mauris pulvinar hendrerit. Curabitur porttitor nisi sed efficitur laoreet. Ut efficitur
			dignissim nulla quis rutrum. Fusce sed fermentum nulla. Pellentesque arcu ante, sollicitudin sit amet
			pellentesque quis, dignissim ut orci. Fusce nec dignissim nulla, ac viverra urna. Pellentesque habitant morbi
			tristique senectus et netus et malesuada fames ac turpis egestas. Duis massa sem, vestibulum ut massa sed,
			laoreet rhoncus nunc. Praesent non ante nec nulla ornare fermentum. Nunc euismod magna sit amet nunc facilisis,
			non interdum sapien ullamcorper. Sed commodo luctus arcu at bibendum. Fusce venenatis nunc vitae auctor
			ullamcorper. Cras malesuada posuere mi quis varius.</p>
		<div class="note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet elementum
			sollicitudin. Sed condimentum lectus non mauris pulvinar hendrerit.</div>
		<p>Proin fermentum ullamcorper est eu posuere. Nulla facilisi. Quisque in ante neque. Fusce condimentum eros augue,
			eu pretium ante vehicula vitae. Ut luctus, sapien et consectetur commodo, purus dolor varius ex, at euismod eros
			eros ac lacus. Vestibulum fermentum tincidunt orci, sed cursus massa fringilla non. Morbi id scelerisque purus.
		</p>
		<p>Duis dignissim risus viverra nisl bibendum, vel eleifend libero fermentum. Sed feugiat metus at lacus feugiat
			fringilla. Maecenas feugiat blandit porta. Mauris ultricies euismod accumsan. Suspendisse quis iaculis elit.
			Integer ultrices diam vitae maximus tincidunt. Vestibulum sit amet odio vel enim pharetra blandit sit amet a
			dui. Morbi facilisis molestie ex, ut gravida mauris accumsan sed. Fusce ut mi consectetur, rutrum odio a, rutrum
			mi. In nec dapibus neque, eu facilisis tortor. Pellentesque sodales a purus euismod sollicitudin. Pellentesque
			posuere orci odio, ut fringilla nisl maximus ut. In posuere diam tortor, quis dignissim ante dignissim a. Donec
			imperdiet dignissim dolor non maximus.</p>
		<p>Praesent eu placerat mauris. Fusce pulvinar lacinia tempus. Pellentesque mattis, neque eu suscipit ultricies,
			felis est vestibulum erat, at sagittis dui dolor in mi. Etiam tristique eget diam sed aliquam. Class aptent
			taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec convallis ac turpis vitae
			luctus. Aliquam sed augue id elit rutrum pellentesque vel sit amet massa. Vivamus efficitur ex nisi, at maximus
			enim laoreet sed. Nulla maximus neque iaculis elit porttitor volutpat. Fusce velit elit, ullamcorper at blandit
			vitae, posuere in nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
		</p>
		<p>Donec commodo eget risus facilisis hendrerit. Nulla nibh magna, accumsan id iaculis in, vehicula non leo.
			Vestibulum blandit, arcu nec imperdiet varius, augue orci finibus risus, in posuere lorem erat vitae augue.
			Praesent odio lectus, iaculis in nisl at, laoreet convallis sapien. Pellentesque habitant morbi tristique
			senectus et netus et malesuada fames ac turpis egestas. Vestibulum a orci eget purus lobortis ultrices.
			Phasellus sit amet lorem euismod neque faucibus rhoncus in vitae sem. Proin egestas, nisi eu sollicitudin
			ultricies, dolor massa aliquam est, cursus maximus lacus felis a lacus. Sed eget cursus sapien. Aenean porta
			dignissim sagittis.</p>
	</article>
</body>

</html>

## script.js
‎‎

## style.css
/* Note types */
.note {
	margin: 30px 0;
	margin-left: -24px;
	padding: 20px 20px 24px;
	padding-left: 50px;
	border-radius: 0 5px 5px 0;
	position: relative;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
	background-color: #7e6d42;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdlNmQ0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1YzRlMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#7e6d42), to(#5c4e35));
	background-image: -webkit-linear-gradient(top, #7e6d42 0%, #5c4e35 100%);
	background-image: -moz-linear-gradient(top, #7e6d42 0%, #5c4e35 100%);
	background-image: -o-linear-gradient(top, #7e6d42 0%, #5c4e35 100%);
	background-image: linear-gradient(to bottom, #7e6d42 0%, #5c4e35 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7e6d42', endColorstr='#5c4e35', GradientType=0);
}


.note:before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	border-color: transparent #222 #222 transparent;
	border-style: solid;
	border-width: 5px;
	width: 0;
	height: 0;
}

.note h5,
.note p {
	margin: 0;
	color: #fff;
}

.note h5 {
	line-height: 1.5em;
	font-weight: 900;
	font-style: normal;
}

.note p {
	font-weight: 400;
	font-size: 0.75em;
}

.note:after {
	content: '\2605';
	color: #fc0;
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 28px;
	font-weight: 700;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

p.note {
	color: #fff;
	font-weight: 400;
	font-size: 0.75em;
}

p.note:after {
	line-height: 1.21;
}

.info {
	background-color: #0389aa;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAzODlhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDYxN2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#0389aa), to(#00617f));
	background-image: -webkit-linear-gradient(top, #0389aa 0%, #00617f 100%);
	background-image: -moz-linear-gradient(top, #0389aa 0%, #00617f 100%);
	background-image: -o-linear-gradient(top, #0389aa 0%, #00617f 100%);
	background-image: linear-gradient(to bottom, #0389aa 0%, #00617f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0389aa', endColorstr='#00617f', GradientType=0);
}

.warning {
	background-color: #9e2812;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzllMjgxMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZjBkMGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#9e2812), to(#6f0d0d));
	background-image: -webkit-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);
	background-image: -moz-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);
	background-image: -o-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);
	background-image: linear-gradient(to bottom, #9e2812 0%, #6f0d0d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e2812', endColorstr='#6f0d0d', GradientType=0);
}

.unreleased {
	background-color: #cd9239;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkOTIzOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMjc1MjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#cd9239), to(#a27528));
	background-image: -webkit-linear-gradient(top, #cd9239 0%, #a27528 100%);
	background-image: -moz-linear-gradient(top, #cd9239 0%, #a27528 100%);
	background-image: -o-linear-gradient(top, #cd9239 0%, #a27528 100%);
	background-image: linear-gradient(to bottom, #cd9239 0%, #a27528 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cd9239', endColorstr='#a27528', GradientType=0);
}

.info:before {
	border-color: transparent #00617f #00617f transparent;
}

.warning:before {
	border-color: transparent #6f0d0d #6f0d0d transparent;
}

.unreleased:before {
	border-color: transparent #664719 #664719 transparent;
}

.info:after {
	content: '\24D8';
	color: #fff;
	position: absolute;
	top: 15px;
	left: 15px;
	font-size: 28px;
	font-weight: 700;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.warning:after {
	content: '\203C';
	color: #fc0;
	position: absolute;
	top: 15px;
	left: 15px;
	font-size: 32px;
	font-weight: 700;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
}

.unreleased:after {
	content: '\2692';
	color: #2b2a12;
	position: absolute;
	top: 8px;
	left: 15px;
	font-size: 38px;
	font-weight: 700;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}

article {
	margin: 1em;
	padding: 1em;
	background: #f8f8f8;
}
	{
	"scripts": [],
	"styles": [
	"https://cdnjs.cloudflare.com/ajax/libs/foundation/6.7.5/css/foundation.css"
	]
	}
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>

	<body>
	<article>
	<h1>Lorem ipsum dolor sit amet</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet elementum sollicitudin. Sed
	condimentum lectus non mauris pulvinar hendrerit. Curabitur porttitor nisi sed efficitur laoreet. Ut efficitur
	dignissim nulla quis rutrum. Fusce sed fermentum nulla. Pellentesque arcu ante, sollicitudin sit amet
	pellentesque quis, dignissim ut orci. Fusce nec dignissim nulla, ac viverra urna. Pellentesque habitant morbi
	tristique senectus et netus et malesuada fames ac turpis egestas. Duis massa sem, vestibulum ut massa sed,
	laoreet rhoncus nunc. Praesent non ante nec nulla ornare fermentum. Nunc euismod magna sit amet nunc facilisis,
	non interdum sapien ullamcorper. Sed commodo luctus arcu at bibendum. Fusce venenatis nunc vitae auctor
	ullamcorper. Cras malesuada posuere mi quis varius.</p>
	<div class="note">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus aliquet elementum
	sollicitudin. Sed condimentum lectus non mauris pulvinar hendrerit.</div>
	<p>Proin fermentum ullamcorper est eu posuere. Nulla facilisi. Quisque in ante neque. Fusce condimentum eros augue,
	eu pretium ante vehicula vitae. Ut luctus, sapien et consectetur commodo, purus dolor varius ex, at euismod eros
	eros ac lacus. Vestibulum fermentum tincidunt orci, sed cursus massa fringilla non. Morbi id scelerisque purus.
	</p>
	<p>Duis dignissim risus viverra nisl bibendum, vel eleifend libero fermentum. Sed feugiat metus at lacus feugiat
	fringilla. Maecenas feugiat blandit porta. Mauris ultricies euismod accumsan. Suspendisse quis iaculis elit.
	Integer ultrices diam vitae maximus tincidunt. Vestibulum sit amet odio vel enim pharetra blandit sit amet a
	dui. Morbi facilisis molestie ex, ut gravida mauris accumsan sed. Fusce ut mi consectetur, rutrum odio a, rutrum
	mi. In nec dapibus neque, eu facilisis tortor. Pellentesque sodales a purus euismod sollicitudin. Pellentesque
	posuere orci odio, ut fringilla nisl maximus ut. In posuere diam tortor, quis dignissim ante dignissim a. Donec
	imperdiet dignissim dolor non maximus.</p>
	<p>Praesent eu placerat mauris. Fusce pulvinar lacinia tempus. Pellentesque mattis, neque eu suscipit ultricies,
	felis est vestibulum erat, at sagittis dui dolor in mi. Etiam tristique eget diam sed aliquam. Class aptent
	taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec convallis ac turpis vitae
	luctus. Aliquam sed augue id elit rutrum pellentesque vel sit amet massa. Vivamus efficitur ex nisi, at maximus
	enim laoreet sed. Nulla maximus neque iaculis elit porttitor volutpat. Fusce velit elit, ullamcorper at blandit
	vitae, posuere in nunc. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
	</p>
	<p>Donec commodo eget risus facilisis hendrerit. Nulla nibh magna, accumsan id iaculis in, vehicula non leo.
	Vestibulum blandit, arcu nec imperdiet varius, augue orci finibus risus, in posuere lorem erat vitae augue.
	Praesent odio lectus, iaculis in nisl at, laoreet convallis sapien. Pellentesque habitant morbi tristique
	senectus et netus et malesuada fames ac turpis egestas. Vestibulum a orci eget purus lobortis ultrices.
	Phasellus sit amet lorem euismod neque faucibus rhoncus in vitae sem. Proin egestas, nisi eu sollicitudin
	ultricies, dolor massa aliquam est, cursus maximus lacus felis a lacus. Sed eget cursus sapien. Aenean porta
	dignissim sagittis.</p>
	</article>
	</body>

	</html>
	/* Note types */
	.note {
	margin: 30px 0;
	margin-left: -24px;
	padding: 20px 20px 24px;
	padding-left: 50px;
	border-radius: 0 5px 5px 0;
	position: relative;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
	background-color: #7e6d42;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdlNmQ0MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM1YzRlMzUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#7e6d42), to(#5c4e35));
	background-image: -webkit-linear-gradient(top, #7e6d42 0%, #5c4e35 100%);
	background-image: -moz-linear-gradient(top, #7e6d42 0%, #5c4e35 100%);
	background-image: -o-linear-gradient(top, #7e6d42 0%, #5c4e35 100%);
	background-image: linear-gradient(to bottom, #7e6d42 0%, #5c4e35 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7e6d42', endColorstr='#5c4e35', GradientType=0);
	}



	.note:before {
	content: "";
	position: absolute;
	top: -10px;
	left: 0;
	border-color: transparent #222 #222 transparent;
	border-style: solid;
	border-width: 5px;
	width: 0;
	height: 0;
	}

	.note h5,
	.note p {
	margin: 0;
	color: #fff;
	}

	.note h5 {
	line-height: 1.5em;
	font-weight: 900;
	font-style: normal;
	}

	.note p {
	font-weight: 400;
	font-size: 0.75em;
	}

	.note:after {
	content: '\2605';
	color: #fc0;
	position: absolute;
	top: 14px;
	left: 14px;
	font-size: 28px;
	font-weight: 700;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
	}

	p.note {
	color: #fff;
	font-weight: 400;
	font-size: 0.75em;
	}

	p.note:after {
	line-height: 1.21;
	}

	.info {
	background-color: #0389aa;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAzODlhYSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDYxN2YiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#0389aa), to(#00617f));
	background-image: -webkit-linear-gradient(top, #0389aa 0%, #00617f 100%);
	background-image: -moz-linear-gradient(top, #0389aa 0%, #00617f 100%);
	background-image: -o-linear-gradient(top, #0389aa 0%, #00617f 100%);
	background-image: linear-gradient(to bottom, #0389aa 0%, #00617f 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0389aa', endColorstr='#00617f', GradientType=0);
	}

	.warning {
	background-color: #9e2812;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzllMjgxMiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZjBkMGQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#9e2812), to(#6f0d0d));
	background-image: -webkit-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);
	background-image: -moz-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);
	background-image: -o-linear-gradient(top, #9e2812 0%, #6f0d0d 100%);
	background-image: linear-gradient(to bottom, #9e2812 0%, #6f0d0d 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e2812', endColorstr='#6f0d0d', GradientType=0);
	}

	.unreleased {
	background-color: #cd9239;
	background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2NkOTIzOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNhMjc1MjgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#cd9239), to(#a27528));
	background-image: -webkit-linear-gradient(top, #cd9239 0%, #a27528 100%);
	background-image: -moz-linear-gradient(top, #cd9239 0%, #a27528 100%);
	background-image: -o-linear-gradient(top, #cd9239 0%, #a27528 100%);
	background-image: linear-gradient(to bottom, #cd9239 0%, #a27528 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cd9239', endColorstr='#a27528', GradientType=0);
	}

	.info:before {
	border-color: transparent #00617f #00617f transparent;
	}

	.warning:before {
	border-color: transparent #6f0d0d #6f0d0d transparent;
	}

	.unreleased:before {
	border-color: transparent #664719 #664719 transparent;
	}

	.info:after {
	content: '\24D8';
	color: #fff;
	position: absolute;
	top: 15px;
	left: 15px;
	font-size: 28px;
	font-weight: 700;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
	}

	.warning:after {
	content: '\203C';
	color: #fc0;
	position: absolute;
	top: 15px;
	left: 15px;
	font-size: 32px;
	font-weight: 700;
	text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
	}

	.unreleased:after {
	content: '\2692';
	color: #2b2a12;
	position: absolute;
	top: 8px;
	left: 15px;
	font-size: 38px;
	font-weight: 700;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
	}

	article {
	margin: 1em;
	padding: 1em;
	background: #f8f8f8;
	}