/*! normalize.css 2011-11-04T15:38 UTC - http://github.com/necolas/normalize.css */

/* =============================================================================
   HTML5 display definitions
   ========================================================================== */

/*
 * Corrects block display not defined in IE6/7/8/9 & FF3
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
    display: block;
}

/*
 * Corrects inline-block display not defined in IE6/7/8/9 & FF3
 */

audio,
canvas,
video {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

/*
 * Prevents modern browsers from displaying 'audio' without controls
 */

audio:not([controls]) {
    display: none;
}

/*
 * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
 * Known issue: no IE6 support
 */

[hidden] {
    display: none;
}


/* =============================================================================
   Base
   ========================================================================== */

/*
 * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
 *    http://clagnut.com/blog/348/#c790
 * 2. Keeps page centred in all browsers regardless of content height
 * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
 *    www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
 */

html {
    font-size: 100%; /* 1 */
    overflow-y: scroll; /* 2 */
    -webkit-text-size-adjust: 100%; /* 3 */
    -ms-text-size-adjust: 100%; /* 3 */
}

/*
 * Addresses margins handled incorrectly in IE6/7
 */

body {
    margin: 0;
}

/* 
 * Addresses font-family inconsistency between 'textarea' and other form elements.
 */

body,
button,
input,
select,
textarea {
    font-family: sans-serif;
}


/* =============================================================================
   Links
   ========================================================================== */

/*
 * Addresses outline displayed oddly in Chrome
 */

a:focus {
    outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers
 * people.opera.com/patrickl/experiments/keyboard/test
 */

a:hover,
a:active {
    outline: 0;
}


/* =============================================================================
   Typography
   ========================================================================== */

/*
 * Neutralise smaller font-size in 'section' and 'article' in FF4+, Chrome, S5
 */

h1 {
    font-size: 2em;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome
 */

abbr[title] {
    border-bottom: 1px dotted;
}

/*
 * Addresses style set to 'bolder' in FF3+, S4/5, Chrome
*/

b, 
strong { 
    font-weight: bold; 
}

blockquote {
    margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome
 */

dfn {
    font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9
 */

mark {
    background: #ff0;
    color: #000;
}

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */

pre,
code,
kbd,
samp {
    font-family: monospace, serif;
    _font-family: 'courier new', monospace;
    font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers
 */

pre {
    white-space: pre;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * 1. Addresses CSS quotes not supported in IE6/7
 * 2. Addresses quote property not supported in S4
 */

/* 1 */

q {
    quotes: none;
}

/* 2 */

q:before,
q:after {
    content: '';
    content: none;
}

small {
    font-size: 75%;
}

/*
 * Prevents sub and sup affecting line-height in all browsers
 * gist.github.com/413930
 */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}


/* =============================================================================
   Lists
   ========================================================================== */

ul,
ol {
    margin-left: 0;
    padding: 0 0 0 40px;
}

dd {
    margin: 0 0 0 40px;
}

nav ul,
nav ol {
    list-style: none;
    list-style-image: none;
}


/* =============================================================================
   Embedded content
   ========================================================================== */

/*
 * 1. Removes border when inside 'a' element in IE6/7/8/9, FF3
 * 2. Improves image quality when scaled in IE7
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */

img {
    border: 0; /* 1 */
    -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE9 
 */

svg:not(:root) {
    overflow: hidden;
}


/* =============================================================================
   Figures
   ========================================================================== */

/*
 * Addresses margin not present in IE6/7/8/9, S5, O11
 */

figure {
    margin: 0;
}


/* =============================================================================
   Forms
   ========================================================================== */

/*
 * Corrects margin displayed oddly in IE6/7
 */

form {
    margin: 0;
}

/*
 * Define consistent border, margin, and padding
 */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9
 * 2. Corrects alignment displayed oddly in IE6/7
 */

legend {
    border: 0; /* 1 */
    *margin-left: -7px; /* 2 */
}

/*
 * 1. Corrects font size not being inherited in all browsers
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome
 * 3. Improves appearance and consistency in all browsers
 */

button,
input,
select,
textarea {
    font-size: 100%; /* 1 */
    margin: 0; /* 2 */
    vertical-align: baseline; /* 3 */
    *vertical-align: middle; /* 3 */
}

/*
 * Addresses FF3/4 setting line-height on 'input' using !important in the UA stylesheet
 */

button,
input {
    line-height: normal; /* 1 */
}

/*
 * 1. Improves usability and consistency of cursor style between image-type 'input' and others
 * 2. Corrects inability to style clickable 'input' types in iOS
 * 3. Removes inner spacing in IE7 without affecting normal text inputs
 *    Known issue: inner spacing remains in IE6
 */

button,
input[type="button"], 
input[type="reset"], 
input[type="submit"] {
    cursor: pointer; /* 1 */
    -webkit-appearance: button; /* 2 */
    *overflow: visible;  /* 3 */
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9
 * 2. Removes excess padding in IE8/9
 */

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/*
 * 1. Addresses appearance set to searchfield in S5, Chrome
 * 2. Addresses box-sizing set to border-box in S5, Chrome (include -moz to future-proof)
 */

input[type="search"] {
    -webkit-appearance: textfield; /* 1 */
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box; /* 2 */
    box-sizing: content-box;
}

/*
 * Removes inner padding that is displayed in S5, Chrome on OS X
 */

input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+
 * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9
 * 2. Improves readability and alignment in all browsers
 */

textarea {
    overflow: auto; /* 1 */
    vertical-align: top; /* 2 */
}


/* =============================================================================
   Tables
   ========================================================================== */

/* 
 * Remove most spacing between table cells
 */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 	Normalize.css ends here
	Your wonderful and creative styles begin here */

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on December 10, 2011 01:34:11 PM America/New_York */

@font-face {
    font-family: 'BevanRegular';
    src: url('../fonts/Bevan-webfont.eot');
    src: url('../fonts/Bevan-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Bevan-webfont.woff') format('woff'),
         url('../fonts/Bevan-webfont.ttf') format('truetype'),
         url('../fonts/Bevan-webfont.svg#BevanRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body {
	background: #481700;
	color: #fff;
	font-family: Verdana, Helvetica, sans-serif;
	padding: 26px 0 26px 0;
	font-size: 18px;
}

::selection, textarea::selection {
	background-color: #d78965;
}

::-moz-selection, textarea::-moz-selection {
	background: #983a0f;
}

a:focus {
	outline: solid 1px #d78965;
}

.loading {
	background: #481700 url(../images/loading.gif) no-repeat center 400px;
}

a:link, a:visited {
	color: #fff;
	-webkit-transition: color .5s ease;
	-moz-transition: color .5s ease;
	-ms-transition: color .5s ease;
	-o-transition: color .5s ease;
	transition: color .5s ease;
}

a:hover {
	color: #ac3600;
}

a.title-link:link, a.title-link:visited {
	color: #d78965;
	text-decoration: none;
}

a.title-link:hover {
	color: #fff;
}

h1, h2, .viewnav li, .featureslist li, .result-mediaqueries, .result-transition, .demo-left, .demo-right {
	-webkit-transition: all .5s ease;
	-moz-transition: all .5s ease;
	-ms-transition: all .5s ease;
	-o-transition: all .5s ease;
	transition: all .5s ease;
}

h1, h2, h3 {
	font-family: BevanRegular, serif;
	color: #d78965;
	font-weight: normal;
	margin: 0;
	padding: 0;
	line-height: 1;
}

h2 code {
	font-weight: bold;
	font-size: 34px;
}

.ed h2 {
	float: left;
}

p {
	margin: 0 0 24px 0;
}

header {
	background: #51220d;
}

		h1 {
			font-family: BevanRegular, serif;
			color: #d78965;
			font-size: 60px;
			line-height: 84px;
			float: left;
		}

		.viewnav {
			list-style: none;
			margin: 20px 0 0 0;
			padding: 0;
			float: right;
			display: none;
		}

		.js .viewnav {
			display: block;
		}

		.viewnav li {
			width: 180px;
			height: 40px;
			float: left;
			margin: 0 42px 0 0;
		}
		
		.viewnav li.btnedge {
			margin-right: 0;
		}
		
			.viewnav li a:link, .viewnav li a:visited {
				display: block;
				height: 40px;
				text-align: center;
				line-height: 38px;
				border-radius: 10px;
				text-decoration: none;
				color: #e2e2e2;
				opacity: .75;
				-webkit-transition: opacity .5s ease;
				-moz-transition: opacity .5s ease;
				-ms-transition: opacity .5s ease;
				-o-transition: opacity .5s ease;
				transition: opacity .5s ease;
				background: #bb4c1a;
				background: -moz-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* FF 3.6+ */
				background: -ms-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* IE10 */
				background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bb4c1a), color-stop(45%, #bb4c1a), color-stop(55%, #ac3600), color-stop(100%, #ac3600)); /* Safari 4+, Chrome 2+ */
				background: -webkit-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* Safari 5.1+, Chrome 10+ */
				background: -o-linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* Opera 11.10 */
				background: linear-gradient(#bb4c1a 0%, #bb4c1a 45%, #ac3600 55%, #ac3600 100%); /* the standard */
				-webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 1);
				-moz-shadow: inset 0 0 10px rgba(0, 0, 0, 1);
				box-shadow: inset 0 0 10px rgba(0, 0, 0, 1);
			}
			
			.viewnav li a.selected:link, .viewnav li a.selected:visited {
				opacity: 1;
			}
			
			.viewnav li a:hover {
				opacity: 1;
			}

	.globalwidth {
		width: 1080px;
		margin: 0 auto;
		padding-left: 20px;
		padding-right: 20px;
		clear: both;
	}
		
		/* clearfix, because overflow: hidden was causing problems */

		.globalwidth:after {
			visibility: hidden;
			display: block;
			font-size: 0;
			content: " ";
			clear: both;
			height: 0;
		}
			* html .globalwidth             { zoom: 1; } /* IE6 */
			*:first-child+html .globalwidth { zoom: 1; } /* IE7 */

.propsnav {
	padding-bottom: 60px;
}

.featureslist {
	margin: 0;
	padding: 30px 0 0 0;
}

.featureslist li {
	list-style: none;
	font-family: consolas, monospace;
	font-size: 20px;
	width: 192px;
}

	.featureslist a:link, .featureslist a:visited {
		text-decoration: none;
		line-height: 28px;
		padding: 1px 10px;
		border-radius: 8px;
		white-space: nowrap;
		-webkit-transition: background .7s ease;
		-moz-transition: background .7s ease;
		-ms-transition: background .7s ease;
		-o-transition: background .7s ease;
		transition: background .7s ease;
	}

	.featureslist a.selected:link, .featureslist a.selected:visited {
		background: #993102;
		padding: 1px 10px;
		-moz-border-radius: 8px;
		-webkit-border-radius: 8px;
		border-radius: 8px;
		border: solid 1px #973c14;
	}

	.featureslist a.selected:hover {
		color: #fff;
	}

	/* common features */

	.featureslist .colb {
		margin-left: 194px;
		width: 280px;
	}

		.featureslist li.colf {
			margin-top: -168px;
		}

	.featureslist .colc {
		width: 172px;
		margin-left: 476px;
	}

	.featureslist .cold {
		width: 210px;
		margin-left: 650px;
	}

	.featureslist .cole {
		width: 225px;
		margin-left: 880px;
	}

	/* common features end here */

	/* edge features */

	.featureslist .colg {
		width: 174px;
	}

		.featureslist .coll {
			margin-top: -140px;
		}

	.featureslist .colh {
		width: 247px;
		margin-left: 176px;
	}

	.featureslist .coli {
		width: 223px;
		margin-left: 425px;
	}

	.featureslist .colj {
		width: 178px;
		margin-left: 650px;
	}

	.featureslist .colk {
		width: 250px;
		margin-left: 830px;
	}

	/* edge features end here */

.code {
	width: 1066px;
	height: 110px;
	background: #d3c8c2;
	padding: 14px 0 14px 14px;
	font-family: consolas, monospace;
	white-space: pre;
	overflow-y: scroll;
	color: black;
	clear: both;
}

pre.code {
	overflow: hidden;
}

.js .code {
	-moz-resize: none;
	resize: none;
}

	.hiddentext {
		display: none;
		white-space: pre-wrap;
		width: 960px;
	}

.desc {
	padding-bottom: 20px;
	overflow: hidden;
}

.ed {
	padding-bottom: 40px;
	position: relative;
}

	.toggle-autosize {
		position: absolute;
		right: 20px;
		top: 7px;
		font-size: 15px;
		text-decoration: none;
	}
	
	.codeselect {
		font-size: 15px;
		text-decoration: none;
		margin: 7px 0 0 20px;
		vertical-align: middle;
		display: block;
		float: left;
	}

.desc {
	float: left;
	width: 610px;
	padding-right: 90px;
}

.spec {
	float: left;
	width: 380px;
}

.result {
	background: #561d01;
	min-height: 200px;
	position: relative;
	border: solid 1px transparent;
}

* html .result {
	border: none;
}

	.result-boxsizing {
		width: 460px;
		padding: 20px;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin: 44px auto 0 auto;
		border: solid 1px #852900;
		text-align: center;
	}
	
	.result-hsla {
		width: 380px;
		padding: 10px;
		margin: 54px auto 0 auto;
		text-align: center;
		background-color: hsla(10, 100%, 50%, 0.2);
	}
	
	.result-rgba {
		width: 380px;
		padding: 10px;
		margin: 54px auto 0 auto;
		text-align: center;
		background-color: rgba(255, 43, 0, 0.2);
	}
	
	.result-borderradius {
		width: 380px;
		padding: 20px;
		margin: 42px auto 0 auto;
		text-align: center;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		border-radius: 20px;
		background: #481700;
	}

	.result-textshadow {
		font-size: 70px;
		line-height: 200px;
		text-align: center;
		text-shadow: 11px 11px 3px #000;
		font-family: Georgia, serif;
	}
	
	.result-wordwrap {
		width: 330px;
		padding: 10px;
		margin: 20px auto 0 auto;
		text-align: center;
		word-wrap: break-word;
	}
	
	.result-multibg {
		background: url(../images/bg-2.png) no-repeat center bottom,
					url(../images/bg-1.png) no-repeat center center;
		padding: 10px;
		margin: 30px auto 0 auto;
		text-align: center;
		color: black;
		min-height: 130px;
	}
	
	.result-text {
		text-align: center;
		padding: 20px 0 7px 0;
		width: 330px;
		margin: 0 auto;
	}
	
	.rtlong {
		width: 450px;
	}

	.result-animations {
		background: red;
		border-radius: 50px;
		width: 50px;
		height: 50px;
		position: absolute;
		bottom: 0;
		left: 45%;
		-webkit-animation-name: bounceball;
		-webkit-animation-duration: 1s;
		-webkit-animation-iteration-count: infinite;
		-webkit-animation-direction: alternate;
		-webkit-animation-delay: 0;
		-webkit-animation-play-state: running;
		-webkit-animation-fill-mode: none;

		-moz-animation-name: bounceball;
		-moz-animation-duration: 1s;
		-moz-animation-iteration-count: infinite;
		-moz-animation-direction: alternate;
		-moz-animation-delay: 0;
		-moz-animation-play-state: running;
		-moz-animation-fill-mode: none;

		-ms-animation-name: bounceball;
		-ms-animation-duration: 1s;
		-ms-animation-iteration-count: infinite;
		-ms-animation-direction: alternate;
		-ms-animation-delay: 0;
		-ms-animation-play-state: running;
		-ms-animation-fill-mode: none;

		animation-name: bounceball;
		animation-duration: 1s;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-delay: 0;
		animation-play-state: running;
		animation-fill-mode: none;
	}

	@-webkit-keyframes bounceball {
		from {
			bottom: 0;
		}

		to {
			bottom: 60px;
		}

	}

	@-moz-keyframes bounceball {
		from {
			bottom: 0;
		}

		to {
			bottom: 60px;
		}

	}

	@-ms-keyframes bounceball {
		from {
			bottom: 0;
		}

		to {
			bottom: 60px;
		}

	}

	@keyframes bounceball {
		from {
			bottom: 0;
		}

		to {
			bottom: 60px;
		}

	}
	
	.result-bgsize {
		width: 500px;
		height: 200px;
		background: transparent url(../images/bg-size.png) center center no-repeat;
		-moz-background-size: 100% 100%;
		background-size: 100% 100%;
		margin: auto;
	}
	
	@font-face {
		font-family: 'OperatinginstructionsRegular';
		src: url('../fonts/Operatinginstructions-webfont.eot');
		src: url('../fonts/Operatinginstructions-webfont.eot?#iefix') format('embedded-opentype'),
			 url('../fonts/Operatinginstructions-webfont.woff') format('woff'),
			 url('../fonts/Operatinginstructions-webfont.ttf') format('truetype'),
			 url('../fonts/Operatinginstructions-webfont.svg#OperatinginstructionsRegular') format('svg');
		font-weight: normal;
		font-style: normal;
	}

	.result-fontface {
		font-family: OperatinginstructionsRegular, serif;
		font-size: 60px;
		line-height: 50px;
		text-align: center;
		padding-top: 20px;
	}

	.result-rotate {
		width: 330px;
		padding: 10px;
		margin: 60px auto 0 auto;
		border: solid 1px #852900;
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}

	.result-transformorigin {
		-webkit-transform-origin: -50px -50px;
		-moz-transform-origin: -50px -50px;
		-o-transform-origin: -50px -50px;
		-ms-transform-origin: -50px -50px;
		transform-origin: -50px -50px;
	}

	.result-opacity {
		width: 330px;
		padding: 10px;
		margin: 55px auto 0 auto;
		background: white;
		color: black;
		text-align: center;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* for IE8 in IE7 mode */
		filter: alpha(opacity=40); /* for IE6-IE8 */
		opacity: .4;
	}

	.result-skew {
		width: 330px;
		padding: 10px;
		margin: 60px auto 0 auto;
		background: white;
		color: black;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* for IE8 in IE7 mode */
		filter: alpha(opacity=40); /* for IE6-IE8 */
		opacity: .4;
		-webkit-transform: skew(-30deg);
		-moz-transform: skew(-30deg);
		-o-transform: skew(-30deg);
		-ms-transform: skew(-30deg);
		transform: skew(-30deg);
	}

	.result-scale {
		margin: 15px auto 0 auto;
		display: block;
		-webkit-transform: scale(1.2);
		-moz-transform: scale(1.2);
		-o-transform: scale(1.2);
		-ms-transform: scale(1.2);
		transform: scale(1.2);
	}
	
	.result-resize {
		width: 330px;
		padding: 10px;
		margin: 60px auto 0 auto;
		border: solid 1px #852900;
		-moz-resize: both;
		resize: both;
		overflow: hidden;
	}
	
	.result-boxshadow {
		width: 330px;
		height: 50px;
		line-height: 50px;
		margin: 65px auto 0 auto;
		background: white;
		color: black;
		text-align: center;
		-webkit-box-shadow: 11px 11px 3px #000;
		-moz-box-shadow: 11px 11px 3px 000;
		box-shadow: 11px 11px 3px #000;
		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=60)"; /* for IE8 in IE7 mode */
		filter: alpha(opacity=60); /* for IE6-IE8 */
		opacity: .6;
	}
	
	.result-linear {
		width: 400px;
		height: 80px;
		margin: 40px auto 0 auto;
		text-align: center;
		padding: 40px 0 0 0;
		background-image: -moz-linear-gradient(top, #d85e0c, #f39454); /* FF3.6 */
		background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #d85e0c), color-stop(1, #f39454)); /* Safari 4+, Chrome 2+ */
		background-image: -webkit-linear-gradient(top, #d85e0c, #f39454); /* Safari 5.1+, Chrome 10+ */
		background-image: -o-linear-gradient(top, #d85e0c, #f39454); /* Opera 11.1+ */
		background-image: -ms-linear-gradient(top, #d85e0c, #f39454); /* IE10+ */
		filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#d85e0c', endColorstr='#f39454'); /* IE6,IE7 */
		-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#d85e0c', endColorstr='#f39454')"; /* IE8+ */
		background-image: linear-gradient(top, #d85e0c, #f39454);
	}
	
	.result-borderimages {
		margin: 40px auto;
		width: 400px;
		min-height: 70px;
		border-width: 20px;
		-webkit-resize: both;
		resize: both;
		overflow: hidden;
		text-align: center;
		-webkit-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
		-moz-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
		border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
	}

	.result-textstroke {
		font-size: 60px;
		text-align: center;
		margin: 50px 0 0 0;
		-webkit-text-fill-color: #fff;
		-webkit-text-stroke-color: #d78965;
		-webkit-text-stroke-width: 3px;
		text-fill-color: #fff;
		text-stroke-color: #d78965;
		text-stroke-width: 3px;
	}

	.result-mediaqueries {
		width: 330px;
		padding: 10px;
		margin: 45px auto 0 auto;
		background: white;
		color: black;
		text-align: center;
	}

	@media (max-width: 1200px) {

		.result-mediaqueries {
			background: #d78965;
		}

	}
	
	.result-multicol {
		width: 450px;
		margin: 0 auto;
		font-size: 17px;
		font-family: Arial, sans-serif;
		padding: 10px;
		-webkit-column-count: 3;
		-webkit-column-width: 75px;
		-webkit-column-gap: 20px;
		-webkit-column-rule: 1px solid #fff;
		-moz-column-count: 3;
		-moz-column-width: 75px;
		-moz-column-gap: 20px;
		-moz-column-rule: 1px solid #fff;
		-o-column-count: 3;
		-o-column-width: 75px;
		-o-column-gap: 20px;
		-o-column-rule: 1px solid #fff;
		column-count: 3;
		column-width: 75px;
		column-gap: 20px;
		column-rule: 1px solid #fff;
	}
	
	.result-radial {
		width: 400px;
		height: 80px;
		margin: 40px auto 0 auto;
		text-align: center;
		padding: 40px 0 0 0;
		color: black;
		background-image: -moz-radial-gradient(center center, circle closest-corner, #d85e0c 10%, #f39454 70%);
		background-image: -webkit-gradient(radial, center center, 10, center center, 70, from(#d85e0c), to(#f39454)); /* for older webkit */
		background-image: -webkit-radial-gradient(center center, circle closest-corner, #d85e0c 10%, #f39454 70%);
		background-image: -ms-radial-gradient(center center, circle closest-corner, #fff 10%, #000 70%);
		background-image: radial-gradient(center center, circle closest-corner, #fff 10%, #000 70%);
	}
	
	.result-selection {
		width: 330px;
		padding: 10px;
		margin: 40px auto 0 auto;
		text-align: center;
	}

		.result-selection::selection {
			background: purple;
			color: hotpink;
		}
		
		.result-selection::-moz-selection {
			background: purple;
			color: hotpink;
		}
	
	.result-translate {
		width: 330px;
		padding: 10px;
		margin: 60px auto 0 auto;
		background: white;
		color: black;
		-webkit-transform: translate(90px, 90px);
		-moz-transform: translate(90px, 90px);
		-o-transform: translate(90px, 90px);
		-ms-transform: translate(90px, 90px);
		transform: translate(90px, 90px);
	}
	
	.result-transition {
		width: 330px;
		padding: 10px;
		margin: 60px auto 0 auto;
		background: white;
		color: black;
		text-align: center;
	}
	
	.result-transition:hover {
		background-color: #f39454;
		cursor: pointer;
	}
	
	.result-flexbox {
		display: -webkit-box;
		-webkit-box-pack: justify;
		-webkit-box-align: center;
		display: -moz-box;
		-moz-box-pack: justify;
		-moz-box-align: center;
		display: -ms-box;
		-ms-box-pack: justify;
		-ms-box-align: center;
		/* lines below are the new syntax */
		display: flexbox;
		flex-pack: justify;
		flex-align: center;
	}
	
		.box {
			background: #611700;
			width: 100px;
			height: 100px;
			margin: 20px 20px 20px 20px;
			border: solid 1px black;
			-webkit-box-flex: 1;
			-moz-box-flex: 1;
			-ms-box-flex: 1;
			width: -webkit-flex(1);
			width: flex(1);
		}

	.result-masks {
		background: url(../images/compass.png) no-repeat center center;
		-webkit-mask-image: -webkit-linear-gradient(black 0%, black 9%, transparent 10%, transparent 19%, black 20%, black 29%, transparent 30%, transparent 39%, black 40%, black 49%, transparent 50%, transparent 59%, black 60%, black 69%, transparent 70%, transparent 79%, black 80%, black 89%, transparent 90%, transparent 99%, black 100%);
		width: 128px;
		height: 128px;
		margin: 10px auto 0 auto;
	}
	
	.result-tabsize {
		white-space: pre-wrap;
		-moz-tab-size: 2;
		-o-tab-size: 2;
		tab-size: 2;
		border: solid 1px #973c14;
		width: 460px;
		margin: 10px auto;
		padding: 6px;
	}
	
	.result-tabsize2 {
		white-space: pre-wrap;
		-moz-tab-size: 4;
		-o-tab-size: 4;
		tab-size: 4;
		border: solid 1px #973c14;
		width: 460px;
		margin: 10px auto;
		padding: 6px;
	}
	
	.result-calc {
		width: 70%;
		width: -moz-calc(70% - 50px);
		width: calc(70% - 50px);
		margin: 20px auto;
		text-align: center;
		background: #481700;
		padding: 10px;
	}
	
	.result-textoverflow {
		background: #481700;
		white-space: pre;
		padding: 10px;
		width: 70%;
		height: 60px;
		margin: 20px auto;
		overflow: hidden;
		o-text-overflow: ellipsis;
		-ms-text-overflow: ellipsis;
		text-overflow: ellipsis;
	}
	
	.result-textoverflow:active {
		height: auto;
		white-space: normal;
	}

	.cursor-contain {
		overflow: hidden;
		padding: 11px;
	}

		.cbox {
			background: #481700;
			float: float;
			width: 55px;
			height: 55px;
			float: left;
			margin-right: 6px;
			margin-bottom: 6px;
			font-size: 12px;
			text-align: center;
			padding: 10px;
			font-family: courier, monospace;
		}
		
		.cursor-none:hover {
			cursor: none;
		}
		
		.cursor-cm:hover {
			cursor: context-menu;
		}

		.cursor-cell:hover {
			cursor: cell;
		}
		
		.cursor-vt:hover {
			cursor: vertical-text;
		}
		
		.cursor-alias:hover {
			cursor: alias;
		}
		
		.cursor-copy:hover {
			cursor: copy;
		}
		
		.cursor-nd:hover {
			cursor: no-drop;
		}
		
		.cursor-na:hover {
			cursor: not-allowed;
		}
		
		.cursor-cr:hover {
			cursor: col-resize;
		}
		
		.cursor-rr:hover {
			cursor: row-resize;
		}
		
		.cursor-as:hover {
			cursor: all-scroll;
		}
		
		.cursor-zi:hover {
			cursor: zoom-in;
		}
		.cursor-zo:hover {
			cursor: zoom-out;
		}

		.cursor-scroll:hover {
			cursor: all-scroll;
		}
		
		.cursor-nesw:hover {
			cursor: nesw-resize;
		}
		
		.cursor-nwse:hover {
			cursor: nwse-resize;
		}
		
		.cursor-ew:hover {
			cursor: ew-resize;
		}
		
		.cursor-ns:hover {
			cursor: ns-resize;
		}
	
	.reflections {
		-webkit-box-reflect: below -10px -webkit-linear-gradient(top, transparent 0%, transparent 30%, #ffffff 100%);
		font-size: 50px;
		margin-top: 40px;
		text-align: center;
	}

	.bg-clip {
		width: 200px;
		height: 100px;
		color: black;
		background: #d78965;
		border: solid 1px white;
		-webkit-background-clip: content-box;
		-moz-background-clip: content-box;
		-o-background-clip: content-box;
		-ms-background-clip: content-box;
		background-clip: content-box;
		padding: 30px;
		margin: 30px auto;
		text-align: center;
	}
	
	.bg-origin {
		width: 200px;
		height: 100px;
		color: black;
		background: #d78965;
		border: solid 1px white;
		-webkit-background-origin: content-box;
		-moz-background-origin: content-box;
		-o-background-origin: content-box;
		-ms-background-origin: content-box;
		background-clip: content-box;
		padding: 30px;
		margin: 30px auto;
		text-align: center;
	}

	.result-hyphens {
		width: 350px;
		margin: 30px auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}

	.result-currentcolor {
		margin: 30px auto;
		width: 400px;
		text-align: center;
		color: lightgreen;
	}

		.result-currentcolor p {
			color: white;
		}

		.result-currentcolor .ccbox {
			width: 200px;
			height: 60px;
			background: currentColor;
			margin: auto;
		}

	.result-3dtransform {
		width: 300px;
		height: 120px;
		position: relative;
		margin: 30px auto;
	}

		.object {
			background: transparent;
			width: 100%;
			height: 100%;
			position: absolute;
			-webkit-perspective: 300;
			-webkit-transform-style: preserve-3d;
			-moz-perspective: 300;
			-moz-transform-style: preserve-3d;
			-ms-perspective: 300;
			-ms-transform-style: preserve-3d;
			perspective: 300;
			transform-style: preserve-3d;
		}

			.card {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				border: solid 1px white;
				-webkit-transition: -webkit-transform 1s linear;
				-moz-transition: -moz-transform 1s linear;
				-ms-transition: -ms-transform 1s linear;
				-o-transition: -o-transform 1s linear;
				transition: -webkit-transform 1s linear;
				text-align: center;
				font-size: 50px;
				line-height: 110px;
			}
			
			.cfront {
				background: #993102;
				-webkit-backface-visibility: hidden;
				-moz-backface-visibility: hidden;
				-ms-backface-visibility: hidden;
				backface-visibility: hidden;
			}
			
			.cback {
				background: purple;
			}
			
			.flipped {
				-webkit-transform: rotateY(180deg);
				-moz-transform: rotateY(180deg);
				-ms-transform: rotateY(180deg);
				-o-transform: rotateY(180deg);
				transform: rotateY(180deg);
			}
			
		.result button {
			width: 140px;
			display: block;
			margin: 0 auto 20px auto;
		}
		
	.imgop {
		display: block;
		width: 140px;
		height: 100px;
		margin: 10px auto;
		border: solid 1px white;
		-o-object-fit: cover;
		-o-object-position: top center;
		object-fit: cover;
		object-position: 50% 50%;
	}
	
	.result-filters {
		padding-top: 10px;
		text-align: center;
	}
	
		.result-filters p {
			padding: 0 72px;
		}
		
		.imgfilters {
			-webkit-filter: grayscale(100%);
		}

.support {
	font-size: 16px;
}

.demo-left {
	float: left;
	width: 510px;
}

.demo-right {
	float: left;
	width: 520px;
	padding: 0 0 0 50px;
}

.infoboxes {
	padding-top: 40px;
	padding-bottom: 50px;
	line-height: 30px;
}

	.ext a:link, a:visited {
		padding-right: 20px;
		background: transparent url(../images/bg-external.gif) no-repeat right bottom;
		-webkit-transition: none;
		-moz-transition: none;
		-ms-transition: none;
		-o-transition: none;
		transition: none;
	}
	
	.ext a:hover, .ext a:active {
		background-position: right top;
	}
	
.polyfills {
	float: left;
	width: 560px;
}

.tutorials {
	width: 520px;
	float: left;
}

h2 {
	font-size: 30px;
	margin: 0 0 10px 0;
}	
	
.github-ribbon {
	position: absolute;
	top: 0;
	right: 0;
	opacity: .7;
	-webkit-transition: opacity .5s linear;
	-moz-transition: opacity .5s linear;
	-ms-transition: opacity .5s linear;
	-o-transition: opacity .5s linear;
	transition: opacity .5s linear;
}

.github-ribbon:hover {
	opacity: 1;
}

footer {
	clear: both;
	text-align: center;
	background: #51220d;
	font-size: 14px;
	padding-top: 20px;
	border: solid 1px transparent;
}

/* Your styles end here */

/* Print styles */
@media print {

}

/* Media queries */

@media (max-width: 1400px) {
	.github-ribbon {
		display: none;
	}
}

@media (max-width: 1150px) {

	.globalwidth {
		width: auto;
	}
	
	.viewnav {
		float: left;
		padding-left: 30px;
	}
	
	.viewnav li {
		margin-right: 22px;
	}
	
	.featureslist li.colb {
		margin-left: 160px;
	}
	
	.featureslist li.colc {
		margin-left: 410px;
	}
	
	.featureslist li.cold {
		margin-left: 560px;
	}
	
	.featureslist li.cole {
		margin-left: 770px;
	}
	
	.featureslist li.colh {
		margin-left: 134px;
	}
	
	.featureslist li.coli {
		margin-left: 330px;
	}
	
	.featureslist li.colj {
		margin-left: 520px;
	}
	
	.featureslist li.colk {
		margin-left: 674px;
	}
	
	.desc {
		width: 480px;
	}
	
	.spec {
		width: auto;
	}

	.code {
		width: 98%;
	}
	
	.demo-left {
		padding-bottom: 25px;
	}

	.demo-right {
		width: 400px;
	}
	
	.demo-right h2 {
		white-space: nowrap;
	}

	.infoboxes {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	
	.tutorials {
		width: 400px;
	}

}

@media (max-width: 1040px) {

	.viewnav {
		float: right;
		padding-left: 0;
	}

	.featureslist li.colb, .featureslist li.colc, .featureslist li.cold, .featureslist li.cole {
		width: auto;
	}

	.featureslist li.colb {
		margin-left: 145px;
	}
	
	.featureslist li.colc {
		margin-left: 380px;
	}
	
	.featureslist li.cold {
		margin-left: 510px;
	}
	
	.featureslist li.cole {
		margin-left: 704px;
	}
	
	.desc {
		width: 440px;
		padding-right: 20px;
	}
	
	.viewnav li {
		margin-right: 12px;
	}
	
	.demo-right, .tutorials {
		width: 340px;
	}
	
	h2 {
		font-size: 26px;
	}
	
}

@media (max-width: 970px) {
	
	.featureslist li {
		font-size: 20px;
	}

	.viewnav {
		clear: left;
		float: none;
	}
	
	header {
		padding-bottom: 15px;
	}
	
	.featureslist li.colb {
		margin-left: 220px;
	}

	.featureslist li.colc {
		margin-left: 480px;
	}

	.featureslist li.cold {
		margin-left: 0;
		margin-top: 0;
	}
	
	.featureslist li.cole {
		margin-left: 220px;
	}
	
	.featureslist li.colh {
		margin-left: 164px;
	}
	
	.featureslist li.coli {
		margin-left: 420px;
	}
	
	.featureslist li.colj {
		margin-left: 0;
		margin-top: 0;
	}
	
	.featureslist li.colk {
		margin-left: 164px;
	}

	.demo-left, .demo-right, .tutorials, .polyfills {
		width: auto;
		padding: 0;
		clear: both;
		float: none;
	}
	
	.demo-right {
		padding-top: 30px;
	}
	
}

@media (max-width: 691px) {

	html, body {
		overflow-x: hidden;
	}

	h1 {
		font-size: 41px;
		line-height: 60px;
		white-space: nowrap;
	}
	
	.viewnav {
		overflow: hidden;
	}

	.propsnav {
		padding-bottom: 30px;
	}

	.desc {
		width: auto;
		padding-right: 20px;
	}
	
	.codeselect, .toggle-autosize {
		display: none;
	}
	
	.featureslist li.colb,
	.featureslist li.colc,
	.featureslist li.cold,
	.featureslist li.cole,
	.featureslist li.colf,
	.featureslist li.colg,
	.featureslist li.colh,
	.featureslist li.coli,
	.featureslist li.colk {
		margin-left: 0;
		margin-top: 0;
	}
	
}

@media (max-width: 480px) and (orientation: landscape) {
	
	h1 {
		font-size: 41px;
	}

	.viewnav {
		width: 380px;
		height: 40px;
	}
	
	.viewnav li {
		width: 180px;
		height: 40px;
		font-size: 18px;
	}
	
	.viewnav li a {
		height: 40px;
	}
	
}

@media (max-width: 480px) {

	html, body {
		overflow-x: hidden;
	}
	
	.globalwidth {
		padding-left: 14px;
	}
	
	h1 {
		font-size: 32px;
	}

	.viewnav {
		width: 330px;
		height: 40px;
	}
	
	.viewnav li {
		width: 140px;
		height: 31px;
		font-size: 15px;
	}
	
	.viewnav li a {
		height: 31px;
	}
	
	.demo-left div, .demo-left p {
		width: auto;
	}
	
	.demo-right h2 {
		white-space: normal;
	}
	
	.result-textshadow {
		line-height: normal;
	}
	
	.demo-left .result-animations {
		width: 50px;
		height: 50px;
	}
	
	.demo-left .result-calc {
		width: -moz-calc(70% - 50px);
		width: calc(70% - 50px);
	}
	
	.demo-left .result-3dtransform {
		width: 300px;
		height: 120px;
	}
	
	.demo-left .object {
		width: 90%;
		height: 90%;
	}
	
	.demo-left .result button {
		width: 140px;
	}
	
}