body {
	opacity: 0;
}

b {
	font-weight: bold !important;
}

img { -ms-interpolation-mode: bicubic; }

#banner {
	padding: 20px;
	background: rgba(0,0,0,0.4);
	position: relative;
	overflow: hidden;
}

#banner .banner-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.25);
}

#banner > * {
	z-index: 2;
	position: relative;
}

#banner .bg-rectangles {
	position: absolute;
	width: 120%;
	left: -200px;
	top: -200px;
}

.bg-rectangle {
	width: 200px;
	height: 200px;
	background: white;
	opacity: 0.02;
	z-index: 0;
	float: left;
	margin-right: 50px;
	border: 5px solid white;
}

.bg-animation-example {
	font-size: 14px;
	line-height: 18px;
	opacity: 0.2;
}

#banner .bg-animation-example p {
	margin-top: 35px;
	font-size: 18px;
	margin-bottom: 10px;
}

#banner .bg-animation-example .pre {
	padding: 0;
	background: none;
	max-width: 500px;
}

#features-wrapper {
	padding-top: 20px;
}

#features-wrapper .container > h2 {
    margin-bottom: 49px;
    font-size: 1.8em;
    color: white;
}

#features h2:before {
	content: '<';
}

#features h2:after {
	content: '>';
}

#banner .button-big {
    background-image: -moz-linear-gradient(top, #ED7600, rgba(237, 70, 0, 0));
    background-image: -webkit-linear-gradient(top, #ED7600, rgba(237, 70, 0, 0));
    background-image: -ms-linear-gradient(top, #ED7600, rgba(237, 70, 0, 0));
    background-image: linear-gradient(top, #ED7600, rgba(237, 70, 0, 0));
    display: inline-block;
    background-color: #f40;
    color: #fff;
    text-decoration: none;
    font-size: 1.75em;
    font-weight: 300;
    padding: 20px 45px 20px 45px;
    outline: 0;
     border-radius: 0px; 
    /* border: 1px solid rgba(255,255,255, -1.2); */
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.75), inset 0px 2px 0px 0px rgba(255, 192, 192, 0.5), inset 0px 0px 0px 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
    text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
}
#banner .button-big:hover {
	box-shadow: none;
}

pre,
.pre {
	font-family: Consolas,monospace;
	padding: 10px;
	margin-bottom: 5px;
    background: rgba(0, 0, 0, 0.1);
    /*border: 1px solid rgba(255,255,255, 0.2);*/
    font-size: 16px;
    word-wrap: break-word;
    text-align: left;
	line-height: normal;
}

pre.mid,
.pre.mid {
	font-size: 13px;
	line-height: normal;
}

pre.small,
.pre.small {
	font-size: 12px;
	line-height: normal;
	background: none;
	text-shadow: none;
}

.no-padding{
	padding: 0 !important;
}

.homepage-example {
	width: 100%;
    height: 150px;
    background: rgba(255,255,255,0.1);
	margin-bottom: 15px;
	position: relative;
	overflow: hidden;
}


.moving-box,
.rotating-box,
.timeline-box,
.drag-box {
	width: 30px;
	height: 30px;
	background: rgba(0,0,0, 0.5);
	position: relative;
	top: 10px;
	left: 10px;
	margin-bottom: 3px;
}

.moving-list {
	margin-left: 10px;
	color: white;
}
.moving-list li {
	font-size: 0.8em;
    font-family: arial;
    text-shadow: none;
    font-weight: normal;
    color: black;
}

.moving-box {
	border-radius: 20px;
}

.timeline-box {
	width: 50px;
	border-radius: 20px;
}

.drag-box {
	border-radius: 20px;
}

.drag-box2 {
	margin-top: 20px;
	border-radius: 0;
	width: 50px;
	cursor: move;
}

.example-box {
	width: 100px;
	height: 100px;
	background: blue;
}

button:disabled {
	cursor: default !important;
}

.homepage-example button {
	border: 1px solid transparent;
	color: rgba(255,255,255, 0.5);
	background: rgba(0,0,0, 0.3);
	position: absolute;
	bottom: 10px;
	left: 10px;
	padding: 5px 10px;
	cursor: pointer;
	line-height: 16px;
	text-shadow: none;
}

.homepage-example button:hover {
	border-color: #5F5D5D;
}

.flex,
.flex-row,
.flex-column-center {
	display: flex;
	justify-content: center;
}

.flex-column-center {
	flex-direction: column;
	align-items: center;
}

.flex-row {
	justify-content: center;
	align-items: stretch;
}

@media screen and (max-width: 736px) {
	.flex-row {
		flex-direction: column;
	}
	.flex-row section {
		width: 100%;
	}
}

.tag-list li {
	display: inline;
}

.tag-list li a {
	text-decoration: none;
	color: #8c8c8c;
    text-decoration: none;
    width: 106px;
    display: inline-block;
    text-align: center;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 1px;
    margin-right: 1px;
	float: left;
	text-shadow: 1px 1px 1px black;
}
.tag-list li a:before {
	content: '<';
}
.tag-list li a:after {
	content: '>';
}

.tag-list li a:hover {
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255,255,255, 0.5);
	text-shadow: none;
}

span.your-value select,
span.your-value input[type="text"],
ul.api-list,
.example-switcher select,
#content .properties h3,
#content .inherited h3,
.syntax-switcher,
example-switcher,
example-switcher select {
	font-family: Arial;
	font-weight: normal;
	font-size: 12px;
}

#content header {
    margin: 0 0 0.1em 0 !important;
}


ul.api-list li:first-child {
	border-bottom: 1px dashed #e2e6e8;
	/*font-weight: bold;*/
	margin-bottom: 15px;
	color: inherit;
}

ul.api-list li:last-child {
	margin-bottom: 25px;
}

ul.api-list li:first-child .property{
	color: black;
}

li.api-item {
	line-height: 25px;
}

li.api-item:hover{
	background: #f5f5f5;
}
.properties h3,
.inherited h3 {
	/*border-bottom: 1px solid white;*/
}
.properties h3:hover,
.inherited h3:hover {
	background: #f5f5f5;
}
.properties h3.open,
.inherited h3.open {
	background: #f5f5f5;
}

.properties h3:hover,
.inherited h3:hover {
	cursor: pointer;
}

span.property,
span.type,
span.default-label,
span.default-value,
span.example-value,
span.inherited-from {
	display: inline-block;
    width: 140px;
	padding: 0 10px;
}

span.inherited-from {
	width: 150px;
}

span.type {
    width: 60px;
}

span.default-label {
	width: 60px;
}

span.default-value,
span.example-value {
	width: 130px;
	text-align: center;
	margin-right: 10px;
}

span.example-value {
	width: 150px;
	text-align: left;
	padding-left: 0;
}

input[type="text"],
select {
	padding: 2px 3px;
	width: 120px;
	font-size: 12px;
	text-align: center;
	line-height: 16px;
	margin: 0;
	border: 1px solid #dedede;
}

span.your-value select {
	width: auto;
	padding: 3px 3px; 
}

span.your-value input.Number {
	width: 50px;
}

.fx-example-title {
	margin-bottom: 0;
    margin-top: 20px;
    font-family: Arial;
    font-size: 14px;
}

#fx-example {
	font-family: monospace;
	background: #f5f5f5;
	padding: 10px;
	font-size: 12px;
	line-height: normal;
}

.tag-name {
	color: #0000e6;
}
span.property,
.tag-attribute {
	color: #ce7b00;
}
.attribute-value {
	color: black;
}

.relative {
	position: relative;
}

.pull-left {
	float: left;
}

.pull-right {
	float: right;
}
.clearfix:before,
.clearfix:after {
	content: '';
    display: block;
    clear: both;
    height: 0;
}

.syntax-example-switcher {
    text-align: right;
}

syntax-switcher {
	margin-bottom: 10px;
}

example-switcher {
	text-align: right;
    display: block;
}

example-switcher span {
	display: inline-block;
	margin-right: 9px;
}
example-switcher select {
	width: auto;
	margin-right: -10px;
}
syntax-switcher span {
	margin-right: 20px;
	line-height: normal;
	display: flex;
	justify-content: center;
	align-items: center;
}

example-page p.description {
	line-height: 15px;
}

example-page p .normal {
	display: block;
	padding-top: 10px;
	font-family: Arial;
	font-size: 12px;
}

button,
button:disabled:hover{
    border: 1px solid #E4DBDB;
    margin: 2px;
    line-height: normal;
    padding: 9px 15px;
    cursor: pointer;
    background: #e2e6e8;
    border-radius: 16px;
    text-shadow: 1px 1px white;
    outline: 0;
}

button:hover {
	text-shadow: none;
	border: 1px solid #ccc;
	outline: 0;
}


button[value="html"].html, 
button[value="js"].js {
	margin: 0 10px;
}

button[value="js"].html, 
button[value="html"].js,
.link {
	background: none;
	border: 0 !important;
	color: #337ab7;
	padding: 0;
	outline: 0;
}

button[value="js"].html:hover, 
button[value="html"].js:hover,
.link:hover {
	text-decoration: underline;
}

.examples {
	border: 1px dashed #e2e6e8;
    padding: 10px;
	padding-bottom: 0;
	overflow: hidden;
}

.example {
	background: white;
	display: none;
}

.example.selected {
	display: block;
	height: auto;
}
.example-area {
	padding: 20px;
	position: relative;
}

p.description {
	margin-bottom: 0;
}

.example h3 {
	margin-top: -10px;
	margin-bottom: 10px;
}

.example p {
	padding: 0 0 10px 0;
    position: relative;
    border-bottom: 1px dashed #e2e6e8;
    margin: 0;
    line-height: 15px;
    /* margin-top: -10px; */
    margin-bottom: 10px;
    font-family: Arial;
    font-size: 12px;
}


h3 {
	position: relative;
}

h3 span {
	pointer-events: none;
}



.code {
	height: 0;
	display: none;
	max-height: 220px;
    overflow: auto;
    background: #f8f8f8 !important;
    border: 1px solid #f5f5f5;
    cursor: default;
}

.code pre {
	padding: 10px;
	background: none !important;
	font-family: monospace;
	color: black;
}

li source-loader {
	display: block;
    text-align: right;
}

li source-loader button {
	/*float: right;*/
	background: none;
	margin-top: 3px;
	border: none;
}

li source-loader button:hover {
	text-decoration: underline;
}

.api-list {
	margin-bottom: 0;
}

.api-lists input[type="checkbox"] {
	position: relative;
	top: 2px;
}

.api-lists h3,
.api-lists h3:first-child,
.api-lists h3:last-child {
	border-top: 1px solid #f5f5f5;
}

.api-lists h3:after {
	content: ' ';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid black;
    position: absolute;
    right: 10px;
    top: 15px;
}

.api-lists h3.open:after {
	content: ' ';
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid transparent;
    border-bottom: 4px solid black;
    position: absolute;
    right: 10px;
    top: 10px;
}

h3 + ul {
	display: none;
	height: 0;
	overflow: hidden;
}

h3.open + ul {
	/*display: block;*/
}

expand-collapse {
	margin-bottom: -32px;
    margin-top: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}
expand-collapse .divider {
	display: inline-block;
    font-size: 5px;
    line-height: normal;
	margin: 0 10px;
}

expand-collapse button {
	border: none;
	background: none;
}
expand-collapse button:hover {
	text-decoration: underline;
}

.examples-navigation li {
	padding: 0;
}
#content .examples-navigation li.selected {
	/* border-bottom-style: dashed; */
	/*    position: relative;
		margin-right: -55px;
		background: white;
	*/}
.examples-navigation li.selected a {
	padding-left: 20px;
}

.examples-navigation li a {
	display: block;
}

.start-class {
	border: 0; 
	box-shadow: none;
	border-radius: 0;
}
.end-class {
	border: 5px solid white; 
	box-shadow: 0 0 20px 5px cyan;
	border-radius: 50px;
}