@font-face {
	font-family: 'AppFont';
	src: url("fonts/App_iconfont.woff") format("woff");
	font-weight: normal;
	font-style: normal
}

.demo-icon-font,
.demo-icon-font-24 {
	font-family: AppFont;
	font-size: 16px;
	line-height: 1;
	display: inline-block;
	font-weight: normal;
	speak: none;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	text-align: center;
	box-sizing: content-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

.demo-icon-font:before,
.demo-icon-font-24:before {
	display: inline-block
}

.demo-icon-font-24 {
	font-size: 24px
}

.demo-bookmark-icon-16:before {
	content: "\e606"
}

.demo-grid-icon-16:before {
	content: "\e607"
}

.demo-list-icon-16:before {
	content: "\e608"
}

.demo-gear-icon-16:before {
	content: "\e609"
}

.demo-filter-icon-16:before {
	content: "\e907"
}

.demo-share-icon-16:before {
	content: "\e90a"
}

.demo-home-icon-24:before {
	content: "\e600"
}

.demo-education-icon-24:before {
	content: "\e601"
}

.demo-catalog-icon-24:before {
	content: "\e602"
}

.demo-palette-icon-24:before {
	content: "\e603"
}

.demo-library-icon-24:before {
	content: "\e604"
}

.demo-chat-icon-24:before {
	content: "\e605"
}

.demo-edit-icon-24:before {
	content: "\e906"
}

.demo-fire-icon-24:before {
	content: "\e908"
}

.demo-person-icon-24:before {
	content: "\e909"
}

.demo-signout-icon-24:before {
	content: "\e90b"
}

.demo-info-icon-24:before {
	content: "\e900"
}

.demo-copy-icon-24:before {
	content: "\e901"
}

.demo-people-icon-24:before {
	content: "\e902"
}

.demo-chart-icon-24:before {
	content: "\e903"
}

.demo-garbage-icon-24:before {
	content: "\e904"
}

.demo-download-icon-24:before {
	content: "\e905"
}

.demo-oracle-icon {
	width: 250px;
	height: 50px
}

.demo-oracle-icon:before {
	content: url("images/ritesoftwarelogo.png")
}

html:not([dir="rtl"]) .demo-oracle-icon {
	padding-right: 4px
}

html[dir="rtl"] .demo-oracle-icon {
	padding-left: 4px
}

.demo-oracle-icon:before {
	display: inline
}

.demo-appheader {
	background-color: #f0f0f0;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.1);
	position: relative;
	margin-bottom: 1px
}

.oj-slow-boxshadow .demo-appheader {
	border-bottom-color: #d9dfe3
}

.demo-appheader-appname {
	font-size: 1.143rem;
	font-weight: normal;
	color: #4d4d4d
}

html:not([dir="rtl"]) .demo-appheader-toolbar-container {
	text-align: right
}

html[dir="rtl"] .demo-appheader-toolbar-container {
	text-align: left
}

.demo-appheader-toolbar-container .oj-toolbar {
	display: inline-block;
	margin-right: 0;
	margin-left: 0
}

.demo-appheader-logo-block {
	display: inline-block
}

.demo-appheader-offcanvas-pushwrapper {
	width: 100%;
	overflow-x: hidden
}

.demo-appheader-appname-block {
	vertical-align: 2px
}

html:not([dir="rtl"]) .demo-appheader-appname-block {
	margin-left: 4px
}

html[dir="rtl"] .demo-appheader-appname-block {
	margin-right: 4px
}

.demo-offcanvas-toggle {
	display: block
}

html:not([dir="rtl"]) .demo-offcanvas-toggle {
	float: left
}

html[dir="rtl"] .demo-offcanvas-toggle {
	float: right
}

.demo-appheader-classic .demo-appheader-nav {
	display: none
}

@media screen and (max-width: 767px) {
	.demo-appheader {
		padding-left: 2px;
		padding-right: 2px
	}
	.demo-appheader-appname-block,
	.demo-appheader-pulldown-normal,
	.demo-appheader-toolbar-separator,
	.demo-appheader-toolbar-button {
		display: none
	}
	.demo-appheader-pulldown-small {
		display: inline-block
	}
	.demo-appheader-classic .demo-offcanvas-toggle {
		width: 30%;
		position: relative
	}
	.demo-appheader-classic .demo-appheader-logo {
		text-align: center;
		float: none;
		width: 40%;
		position: relative
	}
	html:not([dir="rtl"]) .demo-appheader-classic .demo-appheader-logo {
		margin-left: 0
	}
	html[dir="rtl"] .demo-appheader-classic .demo-appheader-logo {
		margin-right: 0
	}
}

@media print,
screen and (min-width: 768px) {
	html:not([dir="rtl"]) .demo-offcanvas-toggle {
		margin-left: -10px
	}
	html[dir="rtl"] .demo-offcanvas-toggle {
		margin-right: -10px
	}
	.demo-appheader-appname-block,
	.demo-appheader-pulldown-normal {
		display: inline-block
	}
	.demo-appheader-pulldown-small {
		display: none
	}
	.demo-appheader {
		padding-left: 10px;
		padding-right: 10px
	}
}

@media print and (orientation: landscape),
screen and (min-width: 1024px) {
	.demo-offcanvas-toggle {
		display: none
	}
	.demo-appheader-appname-block {
		display: inline-block
	}
	html:not([dir="rtl"]) .demo-appheader-classic .demo-appheader-logo {
		margin-left: 0
	}
	html[dir="rtl"] .demo-appheader-classic .demo-appheader-logo {
		margin-right: 0
	}
	.demo-appheader-classic .demo-appheader-nav {
		display: block
	}
	html:not([dir="rtl"]) .demo-appheader-classic .demo-appheader-nav {
		text-align: right
	}
	html[dir="rtl"] .demo-appheader-classic .demo-appheader-nav {
		text-align: left
	}
}

.demo-appheader-lite .demo-appheader-logo {
	margin-top: 9px
}

html:not([dir="rtl"]) .demo-appheader-lite .demo-appheader-logo {
	float: left
}

html[dir="rtl"] .demo-appheader-lite .demo-appheader-logo {
	float: right
}

.demo-appheader-lite .oj-toolbar {
	margin-top: 0
}

.demo-appheader-classic .demo-appheader-logo {
	margin-top: 8px
}

html:not([dir="rtl"]) .demo-appheader-classic .demo-appheader-logo {
	float: left;
	margin-left: 4px
}

html[dir="rtl"] .demo-appheader-classic .demo-appheader-logo {
	float: right;
	margin-right: 4px
}

.demo-appheader-logo-oracle {
	padding-top: 3px
}

.demo-appheader-logo-oracle {
	width: 136px;
	height: 19px
}

.demo-appheader-logo-oracle:before {
	content: url("images/oracle_logo_lrg.png")
}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
	.demo-appheader-logo-oracle:before {
		content: url("images/oracle_logo_lrg_2x.png");
		-webkit-transform: translate(-25%, -25%) scale(0.5);
		transform: translate(-25%, -25%) scale(0.5)
	}
}

.demo-appheader-avatar {
	width: 24px;
	height: 24px
}

.demo-appheader-avatar:before {
	content: url("images/avatar_24px.png")
}

@media (-webkit-min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
	.demo-appheader-avatar:before {
		content: url("images/avatar_24px_2x.png");
		-webkit-transform: translate(-25%, -25%) scale(0.5);
		transform: translate(-25%, -25%) scale(0.5)
	}
}

.demo-appheader-nav .oj-navigationlist-item-icon {
	color: #333
}

.demo-appheader-nav .oj-navigationlist-item-label {
	color: #4d4d4d
}

.oj-panel.demo-appheader-offcanvascontent {
	padding: 0
}

.demo-appheader-offcanvascontent {
	color: #c0c4c8;
	background-color: #313334
}

.demo-appheader-toggle-button {
	margin-bottom: 4px
}

.demo-appheader-offcanvascontent .oj-navigationlist-item.oj-selected {
	background-color: #202324
}

.demo-appheader-offcanvascontent .oj-navigationlist-item.oj-hover:not(.oj-selected) {
	background-color: #262628;
	color: #fafafa
}

.demo-appheader-offcanvascontent a.oj-navigationlist-item-content {
	color: #c0c4c8
}

.demo-appheader-offcanvascontent .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon {
	color: #85bbe7
}

.demo-appheader-offcanvascontent .oj-navigationlist-item.oj-hover .oj-navigationlist-item-label {
	color: #85bbe7
}

.demo-appheader-offcanvascontent .oj-navigationlist-item.oj-selected .oj-navigationlist-item-label,
.demo-appheader-offcanvascontent .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon {
	color: #fafafa
}

.demo-appheader-nav .oj-navigationlist-item.oj-hover:not(.oj-selected) {
	background-color: transparent;
	color: #85bbe7
}

.demo-appheader-nav .oj-navigationlist-item.oj-hover .oj-navigationlist-item-icon,
.demo-appheader-nav .oj-navigationlist-item.oj-hover .oj-navigationlist-item-label {
	color: #85bbe7
}

.demo-appheader-nav .oj-navigationlist-item.oj-selected {
	background-color: transparent;
	color: #0572ce
}

.demo-appheader-nav .oj-navigationlist-item.oj-selected .oj-navigationlist-item-icon,
.demo-appheader-nav .oj-navigationlist-item.oj-selected .oj-navigationlist-item-label {
	color: #0572ce
}

.demo-appcontent {
	margin-right: 10px;
	margin-left: 10px;
	margin-top: 0.8571rem
}

.demo-appfooter {
	padding-left: 10px;
	padding-right: 10px;
	height: 4.167em;
	border-top: 1px solid #d9dfe3;
	background-color: #f0f0f0;
	box-sizing: border-box
}

.demo-appfooter-text {
	font-size: 0.857rem;
	color: #4d4d4d
}

.demo-appfooter ul {
	margin-bottom: 2px
}

html:not([dir="rtl"]) .demo-appfooter ul {
	padding-left: 0px
}

html[dir="rtl"] .demo-appfooter ul {
	padding-right: 0px
}

.demo-appfooter li {
	list-style: none;
	display: inline-block
}

html:not([dir="rtl"]) .demo-appfooter li {
	margin-right: 5px;
	margin-left: 0px;
	padding-right: 5px;
	border-right: 1px solid #d9dfe3
}

html[dir="rtl"] .demo-appfooter li {
	margin-left: 5px;
	margin-right: 0px;
	padding-left: 5px;
	border-left: 1px solid #d9dfe3
}

html:not([dir="rtl"]) .demo-appfooter li:last-child {
	border-right: none
}

html[dir="rtl"] .demo-appfooter li:last-child {
	border-left: none
}

.demo-flex-top-container {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0
}

.demo-flex-container {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	flex-direction: row;
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto;
	position: relative;
	min-height: 100%
}

.demo-flex-header {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto
}

.demo-flex-footer {
	-webkit-flex: 0 0 auto;
	flex: 0 0 auto
}

.demo-flex-content {
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto
}

.demo-flex-center {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column;
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto;
	box-sizing: border-box;
	position: relative;
	min-height: 100vh
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
	.demo-flex-center {
		min-height: 100%
	}
}

html.demo-sticky-footer-layout,
.demo-sticky-footer-layout body {
	height: 100%
}

.demo-sticky-footer-layout {
	height: 100%
}

.demo-sticky-footer-main-outer {
	min-height: 100%
}

.demo-sticky-footer-main-inner {
	overflow: visible;
	padding-bottom: 4.167em
}

.demo-sticky-footer-layout .demo-appfooter {
	position: relative;
	margin-top: -4.167em
}

@media print and (orientation: portrait),
screen and (max-width: 1023px) {
	.demo-wrap {
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column;
		flex-direction: column
	}
	.demo-nav {
		padding-top: 20px;
		-webkit-order: 2;
		order: 2
	}
}

.demo-header-toolbar-container {
	-webkit-align-items: center;
	align-items: center
}

html:not([dir="rtl"]) .demo-cook-search-button {
	float: right;
	margin-left: 3px
}

html[dir="rtl"] .demo-cook-search-button {
	float: left;
	margin-right: 3px
}

.demo-cook-search-input {
	overflow: hidden;
	display: block;
	width: auto
}

.demo-cook-search-input .oj-form-control {
	min-width: initial
}

#recipeTitle {
	margin-top: 22px;
	margin-bottom: 22px
}

#recipeTitle h1 {
	display: inline-block
}

#componentContent {
	overflow: auto
}

#collapsibleRecipe {
	margin-top: 25px
}

#componentRecipeContent>ul:first-child,
#componentRecipeContent>ol:first-child {
	margin-top: 0
}

#cookbookTitle h1 {
	margin-top: 4px;
	min-height: 23px
}

#componentShell.oj-panel {
	padding: 0
}

.demo-recipe-spacing {
	margin: 20px 0;
	width: 100%
}

.demo-recipe-table th,
.demo-recipe-table td {
	border: 1px solid lightgrey;
	border-collapse: collapse;
	width: 10em;
	text-align: center;
	padding: 10px
}

.demo-info-table th,
.demo-info-table td {
	border: 1px solid lightgrey;
	border-collapse: collapse;
	padding: 10px
}

.demo-search-icon {
	font-size: 1rem
}

.demo-help-icon {
	padding-left: 5px
}

#doNotCopy {
	color: red;
	font-weight: bold;
	font-size: large;
	margin-left: 100px
}

@font-face {
	font-family: 'platforms';
	src: url("../images/formfactor/platform.woff") format("woff");
	font-weight: normal;
	font-style: normal
}

[class^="demo-platform-icon-"],
[class*=" demo-platform-icon-"] {
	font-family: 'platforms';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	width: 24px;
	height: 24px;
	font-size: 24px
}

.demo-platform-icon-blocked:before {
	content: "\e905"
}

.demo-platform-icon-projector:before {
	content: "\e900"
}

.demo-platform-icon-wrench:before {
	content: "\e901"
}

.demo-platform-icon-leaf:before {
	content: "\e902"
}

.demo-platform-icon-cloud:before {
	content: "\e903"
}

.demo-platform-icon-hipster2:before {
	content: "\e904"
}

.demo-platform-icon-web:before {
	content: "\e9c9"
}

.demo-platform-icon-ios:before {
	content: "\eabf"
}

.demo-platform-icon-android:before {
	content: "\eac1"
}

.demo-platform-icon-windows:before {
	content: "\eac3"
}

.demo-platform-icon-desktop:before {
	content: "\e956"
}

.demo-platform-icon-phone-portrait:before,
.demo-platform-icon-phone-landscape:before {
	content: "\e958"
}

.demo-platform-icon-phone-landscape:before {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg)
}

.demo-platform-icon-tablet-portrait:before,
.demo-platform-icon-tablet-landscape:before {
	content: "\e959"
}

.demo-platform-icon-tablet-landscape:before {
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg)
}

#togglePinnedNavListButtonSet .oj-web-applayout-offcanvas-icon,
#toggleNavListButton .oj-web-applayout-offcanvas-icon {
	height: 24px;
	width: 24px
}

#header .oj-default .demo-applayout-offcanvas-icon::before,
#header .oj-focus-only .demo-applayout-offcanvas-icon::before {
	content: url("../../../../images/24px_offcanvas_icon_ena.svg")
}

#header html[dir="rtl"] .oj-default .demo-applayout-offcanvas-icon::before,
#header html[dir="rtl"] .oj-focus-only .demo-applayout-offcanvas-icon::before {
	content: url("../../../../images/24px_offcanvas_icon_ena.svg")
}

#header .oj-hover .demo-applayout-offcanvas-icon::before,
#header .oj-hover.oj-selected .demo-applayout-offcanvas-icon::before {
	content: url("../../../../images/24px_offcanvas_icon_ovr.svg")
}

#header html[dir="rtl"] .oj-hover .demo-applayout-offcanvas-icon::before,
#header html[dir="rtl"] .oj-hover.oj-selected .demo-applayout-offcanvas-icon::before {
	content: url("../../../../images/24px_offcanvas_icon_ovr.svg")
}

#header .oj-active .demo-applayout-offcanvas-icon::before,
#header .oj-selected .demo-applayout-offcanvas-icon::before {
	content: url("../../../../images/24px_offcanvas_icon_sel.svg")
}

#header html[dir="rtl"] .oj-active .demo-applayout-offcanvas-icon::before,
#header html[dir="rtl"] .oj-selected .demo-applayout-offcanvas-icon::before {
	content: url("../../../../images/24px_offcanvas_icon_sel.svg")
}

#header .oj-disabled .demo-applayout-offcanvas-icon::before {
	content: url("../../../../images/24px_offcanvas_icon_ena.svg")
}

#header html[dir="rtl"] .oj-disabled .demo-applayout-offcanvas-icon::before {
	content: url("../../../../images/24px_offcanvas_icon_ena.svg")
}

.demo-applayout-offcanvas-icon {
	height: 24px;
	width: 24px
}

.demo-applayout-offcanvas-icon::before {
	display: inline-block
}

.demo-applayout-offcanvas-icon {
	font-family: "Alta Icon Font";
	line-height: 1;
	display: inline-block;
	speak: none;
	font-style: normal;
	font-variant: normal;
	text-transform: none;
	text-align: center;
	box-sizing: content-box;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale
}

#togglePinnedNavListButtonSet .oj-button.oj-hover.oj-button-half-chrome {
	background-color: transparent;
	border-color: transparent
}

#togglePinnedNavListButtonSet .oj-button.oj-selected.oj-button-half-chrome {
	background-color: transparent;
	border-color: transparent
}

#toggleNavListButton.oj-button.oj-hover.oj-button-half-chrome {
	background-color: transparent;
	border-color: transparent
}

#toggleNavListButton.oj-button.oj-selected.oj-button-half-chrome {
	background-color: transparent;
	border-color: transparent
}

.demo-pinned-navlist .oj-web-applayout-content {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: column;
	flex-direction: column
}

.demo-pinned-navlist .demo-page-wrapper {
	-webkit-flex: auto;
	flex: auto;
	display: -webkit-flex;
	display: flex
}

.demo-pinned-navlist #navDrawer {
	position: relative
}

#page-container {
	-webkit-overflow-scrolling: touch
}

.markup-example:after,
.script-example:after,
.css-example:after {
	position: absolute;
	top: -1px;
	left: -1px;
	padding: 3px 7px;
	font-size: 12px;
	font-weight: bold;
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	color: #9da0a4;
	border-radius: 4px 0 4px 0
}

.css-example:after {
	content: "CSS Editor"
}

.markup-example:after {
	content: "HTML Editor"
}

.script-example:after {
	content: "JS Editor"
}

.css-example,
.markup-example,
.script-example {
	clear: left;
	position: relative;
	padding: 0 0 14px;
	background-color: #fff;
	border: 1px solid #ddd;
	border-radius: 4px
}

.script-example {
	padding-top: 39px
}

#html-example,
#script-example,
#css-example {
	padding-top: 1rem
}

.italic {
	font-style: italic
}

.bold {
	font-weight: bold
}

.underline {
	text-decoration: underline
}

.edit-button {
	float: right;
	position: absolute;
	right: 20px;
	top: 10px
}

.codeEditorInfo {
	top: 10px;
	left: 75px;
	float: right;
	position: absolute;
	font-size: 13px;
	color: #4f4f4f;
	padding-top: 5px
}

.demo-selectornames {
	font-size: 12px;
	color: #9c5800;
	padding: 2px 4px;
	white-space: nowrap;
	background-color: #f7f7f9;
	border: 1px solid #e1e1e8;
	font-family: Consolas, Menlo, Monaco, "Source Code Pro", "Courier New", Courier, monospace
}

#global-home-container {
	height: 760px
}

.homeBox {
	position: absolute;
	box-sizing: border-box;
	display: inline-block;
	border: 1px solid #d6dfe6;
	border-radius: 3px;
	background-color: white;
	background-repeat: no-repeat;
	background-position: center top;
	cursor: pointer
}

.homeBox LABEL {
	position: absolute;
	width: 100%;
	padding-left: 10px;
	margin: 0px;
	box-sizing: border-box;
	bottom: 10px;
	color: #252525;
	font-weight: bold;
	font-size: 16px
}

.homeBox .withCaret:after {
	content: " ";
	display: inline-block;
	vertical-align: middle;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-image: url("../../../images/caret.png")
}

#gettingStarted LABEL {
	font-size: 24px;
	padding-left: 0px;
	left: 0;
	top: 40px;
	bottom: auto;
	text-align: center
}

#gettingStarted.homeBox {
	left: 20px;
	right: 50%;
	top: 20px;
	height: 350px;
	margin-right: 10px;
	background-position: center bottom;
	background-image: url("../../../images/iStock_000019915867_Medium.jpg")
}

#formControls.homeBox {
	left: 50%;
	right: 25%;
	top: 20px;
	height: 165px;
	margin-left: 10px;
	margin-right: 15px;
	background-image: url("../../../images/homeTextAndSelection.png")
}

#buttons.homeBox {
	left: 75%;
	right: 20px;
	top: 20px;
	height: 165px;
	margin-left: 5px;
	background-image: url("../../../images/homeButtons.png")
}

#dataCollections.homeBox {
	left: 50%;
	right: 25%;
	top: 205px;
	height: 165px;
	margin-left: 10px;
	margin-right: 15px;
	background-image: url("../../../images/homeDataCollections.png")
}

#dataVisualizations.homeBox {
	left: 75%;
	right: 20px;
	top: 205px;
	height: 165px;
	margin-left: 5px;
	background-image: url("../../../images/homeDataVisualizations.png")
}

#patterns.homeBox {
	left: 20px;
	right: 50%;
	top: 390px;
	height: 350px;
	margin-right: 10px;
	background-image: url("../../../images/homePatterns.png")
}

#layout.homeBox {
	left: 50%;
	right: 20px;
	top: 390px;
	height: 165px;
	margin-left: 10px;
	background-image: url("../../../images/homeLayoutAndNavigation.png")
}

#behaviorsAndAnimation.homeBox {
	left: 50%;
	right: 25%;
	top: 575px;
	height: 165px;
	margin-left: 10px;
	margin-right: 15px;
	background-image: url("../../../images/homeBehaviorsAndAnimations.png")
}

#media.homeBox {
	left: 75%;
	right: 20px;
	top: 575px;
	height: 165px;
	margin-left: 5px;
	background-image: url("../../../images/homeMedia.png")
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
	.homeBox .withCaret:after {
		background-image: url("../../../images/caret@2x.png");
		-webkit-background-size: 24px 24px
	}
	#gettingStarted.homeBox {
		background-image: url("../../../images/iStock_000019915867_Medium@2x.jpg");
		-webkit-background-size: 421px 443px
	}
	#formControls.homeBox {
		background-image: url("../../../images/homeTextAndSelection@2x.png");
		-webkit-background-size: 219px 116px
	}
	#buttons.homeBox {
		background-image: url("../../../images/homeButtons@2x.png");
		-webkit-background-size: 219px 116px
	}
	#dataCollections.homeBox {
		background-image: url("../../../images/homeDataCollections@2x.png");
		-webkit-background-size: 219px 116px
	}
	#dataVisualizations.homeBox {
		background-image: url("../../../images/homeDataVisualizations@2x.png");
		-webkit-background-size: 219px 116px
	}
	#patterns.homeBox {
		background-image: url("../../../images/homePatterns@2x.png");
		-webkit-background-size: 458px 305px
	}
	#layout.homeBox {
		background-image: url("../../../images/homeLayoutAndNavigation@2x.png");
		-webkit-background-size: 458px 116px
	}
	#behaviorsAndAnimation.homeBox {
		background-image: url("../../../images/homeBehaviorsAndAnimations@2x.png");
		-webkit-background-size: 219px 116px
	}
	#media.homeBox {
		background-image: url("../../../images/homeMedia@2x.png");
		-webkit-background-size: 219px 116px
	}
}

@media only screen and (min-device-pixel-ratio: 2) {
	.homeBox .withCaret:after {
		background-image: url("../../../images/caret@2x.png");
		background-size: 24px 24px
	}
	#formControls.homeBox {
		background-image: url("../../../images/iStock_000019915867_Medium@2x.jpg");
		background-size: 421px 443px
	}
	#textAndSelection.homeBox {
		background-image: url("../../../images/homeTextAndSelection@2x.png");
		background-size: 219px 116px
	}
	#buttons.homeBox {
		background-image: url("../../../images/homeButtons@2x.png");
		background-size: 219px 116px
	}
	#dataCollections.homeBox {
		background-image: url("../../../images/homeDataCollections@2x.png");
		background-size: 219px 116px
	}
	#dataVisualizations.homeBox {
		background-image: url("../../../images/homeDataVisualizations@2x.png");
		background-size: 219px 116px
	}
	#patterns.homeBox {
		background-image: url("../../../images/homePatterns@2x.png");
		background-size: 458px 305px
	}
	#layout.homeBox {
		background-image: url("../../../images/homeLayoutAndNavigation@2x.png");
		background-size: 458px 116px
	}
	#behaviorsAndAnimation.homeBox {
		background-image: url("../../../images/homeBehaviorsAndAnimations@2x.png");
		background-size: 219px 116px
	}
	#media.homeBox {
		background-image: url("../../../images/homeMedia@2x.png");
		background-size: 219px 116px
	}
}

@media only screen and (min-resolution: 2dppx) {
	.homeBox .withCaret:after {
		background-image: url("../../../images/caret@2x.png");
		background-size: 24px 24px
	}
	#gettingStarted.homeBox {
		background-image: url("../../../images/iStock_000019915867_Medium@2x.jpg");
		background-size: 421px 443px
	}
	#formControls.homeBox {
		background-image: url("../../../images/homeTextAndSelection@2x.png");
		background-size: 219px 116px
	}
	#buttons.homeBox {
		background-image: url("../../../images/homeButtons@2x.png");
		background-size: 219px 116px
	}
	#dataCollections.homeBox {
		background-image: url("../../../images/homeDataCollections@2x.png");
		background-size: 219px 116px
	}
	#dataVisualizations.homeBox {
		background-image: url("../../../images/homeDataVisualizations@2x.png");
		background-size: 219px 116px
	}
	#patterns.homeBox {
		background-image: url("../../../images/homePatterns@2x.png");
		background-size: 458px 305px
	}
	#layout.homeBox {
		background-image: url("../../../images/homeLayoutAndNavigation@2x.png");
		background-size: 458px 116px
	}
	#behaviorsAndAnimation.homeBox {
		background-image: url("../../../images/homeBehaviorsAndAnimations@2x.png");
		background-size: 219px 116px
	}
	#media.homeBox {
		background-image: url("../../../images/homeMedia@2x.png");
		background-size: 219px 116px
	}
}

#documentsContainer {
	margin-top: 25px
}

#documentsTabsContainer {
	margin-top: 25px
}

#devGuideContentContainer {
	display: table;
	width: 100%
}

#left_dev_guide_nav {
	overflow: hidden;
	width: 250px;
	border-right: 1px solid #d6dfe6;
	display: table-cell;
	padding-right: 10px
}

#devGuideContent {
	display: table-cell;
	padding-left: 10px
}

#examplesContentContainer,
#oracleInternalContentContainer {
	position: relative
}

#examplesContent,
#oracleInternalContent {
	margin-left: 280px;
	min-height: 300px
}

#left_examples_nav,
#left_oracle_internal_nav {
	position: absolute;
	top: 0;
	bottom: 0;
	overflow: hidden;
	width: 250px;
	margin-left: 0;
	border-right: 1px solid #d6dfe6;
	padding-right: 10px
}

.oj-inline-icon {
	display: inline-block;
	vertical-align: top
}

#technologyStackInfoContainer {
	margin-top: 30px;
	margin-bottom: 30px
}

#technologyStackInfo {
	border: 1px solid black
}

#technologyStackInfo tr td {
	border: 1px solid black;
	padding: 3px
}

.demo-sort-icon {
	height: 16px;
	width: 16px
}

.oj-default .demo-sort-icon:before,
.oj-focus-only .demo-sort-icon:before {
	content: url("../../../../images/arrowupalphabetaz_16_ena.png")
}

.oj-hover .demo-sort-icon:before,
.oj-hover.oj-selected .demo-sort-icon:before {
	content: url("../../../../images/arrowupalphabetaz_16_hov.png")
}

.oj-active .demo-sort-icon:before,
.oj-selected .demo-sort-icon:before {
	content: url("../../../../images/arrowupalphabetaz_16_onb.png")
}

.oj-disabled .demo-sort-icon:before {
	content: url("../../../../images/arrowupalphabetaz_16_dis.png")
}

#componentListContainer {
	margin: -10px
}

#navItem {
	padding: 10px 10px 0 0
}

.componentCategoryItemListview.oj-listview-card-layout {
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: center;
	justify-content: center
}

.categorybanner {
	padding: 36px 0 36px 6px;
	background-color: #0096E0;
	-webkit-transition: padding 0.4s ease-in-out;
	transition: padding 0.4s ease-in-out
}

.categorybanner.small {
	padding: 3px 0px 3px 0px
}

.categorybanner.shrink {
	padding: 3px 0px 3px 0px;
	position: fixed;
	z-index: 1;
	left: 0;
	right: 0
}

.rootCollections_banner {
	background-color: #d97638
}

.rootControls_banner {
	background-color: #e55a37
}

.rootForms_banner {
	background-color: #ea5b6e
}

.rootFramework_banner {
	background-color: #d16ba6
}

.rootLayoutNav_banner {
	background-color: #2f9ad4
}

.rootPatterns_banner {
	background-color: #269e9e
}

.rootVisualizations_banner {
	background-color: #a5a2a2
}

.all_banner {
	background-color: #8d909b
}

.categorybanner h1 {
	font-size: 46px;
	color: #FFFFFF;
	padding: 0;
	margin: 0;
	line-height: 40px;
	padding-left: 20px;
	opacity: 0.8;
	font-weight: lighter;
	font-family: "SF UI Display", "Helvetica Neue", "Roboto", "Segoe UI", Arial, sans-serif;
	-webkit-transition: height 0.4s ease-in-out, width 0.4s ease-in-out, font-size 0.4s ease-in-out;
	transition: height 0.4s ease-in-out, width 0.4s ease-in-out, font-size 0.4s ease-in-out
}

.categorygrouplabel {
	font-size: 26px;
	color: #FFFFFF;
	padding: 0;
	margin: 5px 0;
	line-height: 40px;
	padding-left: 20px;
	opacity: 0.8;
	font-weight: lighter;
	font-family: "SF UI Display", "Helvetica Neue", "Roboto", "Segoe UI", Arial, sans-serif
}

.categorybanner.small h1 {
	font-size: 26px
}

.categorybanner.shrink h1 {
	font-size: 26px;
	-webkit-transition: height 0.4s ease-in-out, width 0.4s ease-in-out, font-size 0.4s ease-in-out;
	transition: height 0.4s ease-in-out, width 0.4s ease-in-out, font-size 0.4s ease-in-out
}

.categorylist {
	list-style: none;
	width: 100%;
	margin: 20px
}

.categorylist.fixed {
	position: fixed;
	z-index: 1;
	background-image: url("../../../libs/oj/v9.2.0/alta/images/texture.png");
	background-repeat: repeat;
	margin: 0;
	padding: 20px
}

#filterMenuButtonBar.fixed {
	position: fixed;
	z-index: 1;
	background-image: url("../../../libs/oj/v9.2.0/alta/images/texture.png");
	background-repeat: repeat
}

.categoryitem {
	line-height: 28px;
	cursor: default;
	padding-right: 5px
}

.categoryitem a {
	width: 100%;
	height: 100%;
	padding: 5px 15px;
	text-decoration: none;
	border-radius: 15px;
	border: 1px solid transparent
}

.categoryitem.categorySelected a,
a.categorylink:hover {
	color: #ffffff
}

#rootCollections_category.categorySelected a,
#rootCollections_category a:hover {
	background-color: #914f26
}

#rootControls_category.categorySelected a,
#rootControls_category a:hover {
	background-color: #a64123
}

#rootForms_category.categorySelected a,
#rootForms_category a:hover {
	background-color: #a6414c
}

#rootFramework_category.categorySelected a,
#rootFramework_category a:hover {
	background-color: #8c4380
}

#rootLayoutNav_category.categorySelected a,
#rootLayoutNav_category a:hover {
	background-color: #216a8a
}

#rootPatterns_category.categorySelected a,
#rootPatterns_category a:hover {
	background-color: #186e6e
}

#rootVisualizations_category.categorySelected a,
#rootVisualizations_category a:hover {
	background-color: #A5A2A2
}

#all_category.categorySelected a,
#all_category a:hover {
	background-color: #5f6169
}

#componentListContainer .oj-listview {
	border-style: none;
	padding-right: 5px
}

.componentCategoryItemListview .oj-listview-item {
	position: relative;
	background-image: none;
	margin-bottom: 15px;
	padding: 0
}

.componentCategoryItemListview .oj-listview-item img {
	display: block
}

.componentCategoryItemListview .oj-listview-item h4 {
	font-size: 16px;
	font-weight: normal
}

.componentCategoryItemListview .oj-listview-item.oj-hover,
.componentCategoryItemListview .oj-listview-item.oj-hover+li.oj-listview-item {
	border-top-color: transparent
}

.componentInfo {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	padding: 10px;
	background-color: #fff;
	text-decoration: none
}

.componentShortDesc {
	color: #333;
	white-space: normal
}

.rootCollections_border {
	border-color: #d97638
}

.rootControls_border {
	border-color: #e55a37
}

.rootForms_border {
	border-color: #ea5b6e
}

.rootFramework_border {
	border-color: #d16ba6
}

.rootLayoutNav_border {
	border-color: #2f9ad4
}

.rootPatterns_border {
	border-color: #269e9e
}

.rootVisualizations_border {
	border-color: #a5a2a2
}

.all_border {
	border-color: #8d909b
}

.listingRef,
.listingRef:hover,
.listingRef:focus {
	text-decoration: none;
	cursor: default
}

.ribbon {
	position: absolute;
	right: -5px;
	top: -5px;
	z-index: 1;
	overflow: hidden;
	width: 75px;
	height: 75px;
	text-align: right
}

.ribbon span {
	font-size: 10px;
	color: #fff;
	text-transform: uppercase;
	text-align: center;
	font-weight: bold;
	line-height: 20px;
	transform: rotate(45deg);
	width: 100px;
	display: block;
	background-color: gray;
	box-shadow: 0 3px 10px -5px #000;
	position: absolute;
	top: 19px;
	right: -21px
}

.ribbon span::before {
	content: '';
	position: absolute;
	left: 0px;
	top: 100%;
	z-index: -1;
	border-left: 3px solid gray;
	border-right: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid gray
}

.ribbon span::after {
	content: '';
	position: absolute;
	right: 0%;
	top: 100%;
	z-index: -1;
	border-right: 3px solid gray;
	border-left: 3px solid transparent;
	border-bottom: 3px solid transparent;
	border-top: 3px solid gray
}

[data-bind*="ojComponent"]:not(.oj-component-initnode) {
	visibility: hidden
}

.global-container {
	position: relative
}

.boxSizing {
	box-sizing: border-box;
	position: relative
}

.pattern-nav {
	float: right
}

.demo-panel-contrast1 {
	background-color: #313334;
	color: #fff
}

.demo-padding {
	background-image: none;
	margin: 5px
}