body
{
	font-family: arial;
	margin: 0px;
	
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	overflow: hidden;

	text-align: center;
}

div.splash
{
	position: relative;
	margin: 80px auto;
	width: 480px;
	height: 320px;
	background: #252525 url(img/splash4.png) no-repeat center 30px;
	z-index: 100;
}

div.splash_content
{
	position: absolute;
	bottom: 25px;
	left: 10px;
	right: 10px;
	text-align: center;
	color: #999;
	font-size: 10pt;
	font-weight: normal;
}

div#lightbox
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	height: 100%;
	padding-top: 40px;
	background: #0072bd;
	z-index: 199;
	text-align: center;
}

div#lightbox canvas
{
	border: 1px solid #aaa;
}

div.floatButton
{
	margin: 10px auto;
	width: 160px;
	padding: 10px;
	color: white;
	background: #171717;
	cursor: pointer;
	font-size: 9pt;
}

div.objraContainer
{
	background: white;
	padding: 10px 0px;
}

div#screen
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background: white;
	overflow: hidden;
}

a
{
	color: inherit;
	text-decoration: none;
	cursor: pointer;	
}

h2
{
	font-size: 13px;
	font-weight: normal;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #aaa;
	margin: 5px;
}

h3
{
	font-size: 13px;
	font-weight: normal;
	text-align: left;
	color: #aaa;
	margin: 0px;
	
}

h3 span
{
	color: #FA6900;	
}

div#debug
{
	position: absolute;
	width: 200px;
	top: 45px;
	left: 5px;
	bottom: 205px;
	background: #ddd;
	overflow: auto;
	font-size: 10px;
	z-index: 1;
	opacity: 0.5;
}

div#container
{
	position: absolute;
	left: 0px;
	top: 40px;
	right: 127px;
	bottom: 0px;
	overflow: visible;
	z-index: 0;
}

div#tools
{
	position: absolute;
	background: black;
	height: 40px;
	top: 0px;
	left: 0px;
	right: 0px;	
	z-index: 3;
}

div#blinks {
	float: right;
	height: 40px;
}

.toolbarItem {
	display: block;
	float:left;
	margin: 13px 12px 0px 12px;
	font-size: 12px;
	font-weight: bold;
	text-transform: uppercase;
	color: #575757;
	letter-spacing: 2px;
}

div.tool {
	position: relative;
	float: left;
	width: 60px;
	height: 40px;
	margin-right: 2px;
	color: transparent;
	cursor: pointer;	
	background: #303030;
}

.editable {
	border-bottom: 1px dotted;
}

div.atlas {
	position: absolute;
	top: 5px;
	left: 15px;
	width: 30px;
	height: 30px;
	background: transparent url(img/atlas.png) no-repeat 0px 0px;
}

div#blinks .toolbarItem {
	cursor: pointer;
}

div#blinks span {
	display: block;
	float:left;
	width: 1px;
	height: 24px;
	margin-top: 8px;
	background: #474747;
}

div#blinks div.tool {
	background: none;
	opacity: 0.5;
}

div#user_id
{
	position: absolute;
	right: 12px;
	top: 12px;
	width: 200px;
	color: #a7a7a7;
	text-align: right;
	font-size: 9pt;	
}

div#controls
{
	position: absolute;
	right: 0px;
	top: 40px;
	bottom: 0px;
	width: 127px;
	background: #171717;
	z-index: 4;
}

canvas#canvas {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	overflow: visible;
	z-index: 0;
}

textarea#buffer {
	position: absolute;
	left: 0px;
	top: 5px;
	width: 20px;
	height: 20px;
	z-index: -2;
}

div.ilabel {
	position: absolute;
	padding: 20px;
	color: #999;
	z-index: 4;
}

/* Controls */

div.control {
	position: relative;
	display: table;
	background: #373737;
	color: white;
	width: 125px;
	height: 60px;
	text-align: center;
	margin-bottom: 1px;
	cursor: pointer;
}

div.control div.shortcut {
	position: absolute;
	visibility: hidden;
	left: 5px;
	right: 5px;
	text-align: center;
	bottom: 6px;
	font-size: 12px;
	color: rgba(0,0,0, 0.3);
}

div.control:hover div.shortcut {
	visibility: visible;
}

div.control:last-child  {
	margin-bottom: 0px;
}

div.control.openable {
	background-image: url(img/arrow_left.png);
	background-repeat: no-repeat;
	background-position: left center;
	width: 118px;
	padding-left: 7px;
}

div.materialsample {
	position: absolute;
	z-index: 4;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

div.fontmenu div.control {
	width: 240px;
}

div.font {
	background: #eae3a3;
	color: #373737;
}

div.font div.legend {
	font-size: 18pt;
	opacity: 1.0;
}

div.control.selected {
	background-color: #878777;	
}

div.control.button {
	background: #474747;
	font-style: italic;
}

div.control.button.open {
	background-color: black;	
}

div.control.tint_clipboard {
	background-color: #2f3340;	
}

div.control.tint_undo {
	background-color: #263e49;	
}

div.control.tint_font {
	background-color: #787554;	
}

div.control.tint_attribute {
	background-color: #272727;	
}

div.control.tint_attribute_track {
	background-color: #30586d;
}

div.control.tint_attribute_node {
	background-color: #0072bd;
}

div.menu div.control.open {
	background-color: #777777;	
}

div.legend {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-size: 9pt;
	padding: 0px 10px;
	opacity: 0.7;
}

div.legend span {
	position: absolute;
	right: 4px;
	bottom: 4px;
	opacity: 0.3;
	font-size: 85%;
}

div.legend.offset {
	vertical-align: top;
	color: rgba(255,255,255, 0.4);
}

div.legend.oncolor {
	display: block;
	position: absolute;
	left: 0px;
	right: 0px;
	z-index: 5;
	background: rgba(255, 255, 255, 0.4);
	color: #373737;
	opacity: 1.0;
}

div.legend.overlay {
	top: auto;
	bottom: 0px;
	background: rgba(255, 255, 255, 0.4);
}

div.auth {
	opacity: 0.2;
}

div.action {
	padding: 10px;
	color: white;
	background: orange;
	cursor: pointer;
}

div.edit {
	position: absolute;
	right: 5px;
	top: 18px;
	width: 24px;
	height: 24px;	
	background: transparent url(img/atlas.png) no-repeat left top;
	opacity: 0.5;
}

div.edit.add {
	background-position: 0px -393px;
}

div.edit.remove {
	background-position: 0px -363px;
}

div.preview {
	position: absolute;
	top: 24px;
	left: 0px;
	right: 0px;
	text-align: center;
	font-size: 12pt;
	color: #c7c7c7;
}

div#hexDisplay {
	position: absolute;
	top: 26px;
	right: 26px;
	font-size: 18pt;
	color: #a7a7a7;
}

div.menu {
	position: absolute;
	right: 0px;
	top: 0px;
	z-index: 4;
	width: 132px;
	text-align: center;
}

div.mediummenu {
	width: 180px;
}

div.fontmenu {
	width: 247px;
}

div.bigmenu {
	width: 320px;
}

div#dialog_message,
div.explanation {
	padding: 10px;
	font-size: 9pt;
	color: #a7a7a7;
}

div.menu_liner {
	position: relative;
	background: #171717;
	padding: 1px 0px 1px 1px;
	margin-right: 5px;
}

div.editor {
	background: white;
	text-align: left;
	border: 5px solid #373737;
}

div.menu_deluxe {
	position: relative;
	background: #373737;
	padding: 10px;
	margin-right: 5px;
	text-align: left;
}

div#tl_header div.menu_liner,
div#tools div.menu_liner {
	background: none;
	padding: 0px;
	margin: 0px;
}

div.menuArrow {
	position: absolute;
	right: 0px;
	width: 11px;
	height: 11px;
	background: transparent url(img/arrow_right.png) no-repeat left top; 	
}

div.menuitem {
	background: #373737;
	color: white;
	padding: 4px 0px;
	width: 125px;
	text-align: center;
	cursor: pointer;
}

div.menuitem div.legend {
	font-style: italic;
}

div.select {
	position: relative;
	width: 125px;
	text-align: center;
	margin: 1px 0px 0px 1px;
	cursor: pointer;
}

div.select_up {
	height: 40px;
	background: transparent url(img/up.png) no-repeat center center;
}

div.select_current {
	color: white;
	font-size: 24pt;
	padding: 5px;
}

div.select_suffix {
	text-transform: uppercase;
	color: white;
	font-size: 12px;
	padding: 0px;
}

div.select_down {
	height: 40px;
	background: transparent url(img/dn.png) no-repeat center center;
}

div.menu p {
	font-size: 9pt;
	color: #aaa;
	margin: 5px;
}

div.swatch {
	width: 36px;
	height: 36px;
	margin: 1px;
	display: inline-block;
}

div.palette {
	text-align: left;
	border-bottom: 1px solid #555;
	padding: 5px;
}

div.textbox input {
	width: 282px;
	margin: 5px;
}

div.editor {
	background: white;
	margin: 5px 6px 5px 5px;
}

div.editor textarea {
	width: 282px;
	height: 512px;
	margin: 5px;	
}

div.scrollFrame {
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	overflow: hidden;
}

/* timeline */

div#timeline {
	position: absolute;
	background: #171717;
	left: 0px;
	right: 127px;
	bottom: 0px;
	z-index: 2;
}

div#tl_wrapper {
	position: relative;
	display: table;
	border-collapse:collapse;
	background: #171717;
}

div#tl_header {
	display: table-row;
	background: black;
	height: 40px;
	z-index: 4;
}

div#tl_stage {
	position: relative;
}

div.tl_section {
	border-top: 1px solid black;
}

div.tl_row {
	display: table-row;
	color: black;
	background: black;
}

div.tl_outline {
	display: table-cell;
	vertical-align: middle;
}

div.tl2_outline {
	min-width: 160px;
	border-right: 1px solid black;
}

div.tl_outline.empty {
	background: #171717;
}

div.tl_outline div.label {
	float: left;
	padding: 6px;
	font-size: 11px;
}

div.tl_attribute div.tl_label {
	font-style: italic;
}

div.tl_reveal {
	float: left;
	width: 16px;
	height: 24px;
	background: transparent url(img/timeline_atlas.png) no-repeat 0px 0px;
}

div.tl_indent {
	float: left;
	width: 16px;
	height: 26px;
	background: #171717;
}

div#tl_header div.tl_row {
	background: black;
}

div.tl_element div.tl_outline {
	font-weight: bold;
}

div#tl_stage div.tl_label {
	text-align: left;
	padding-left: 10px;
}

div.tl_scrollbar {
	position: absolute;
	background: rgba(255, 255, 255, 0.4);
	width: 4px;
	border-radius: 2px;
	height: 4px;
}

div.tl_scrollbar#vertical {
	right: 1px;
	top: 10px;
}

div.tl_scrollbar#horizontal {
	left: 10px;
	bottom: 1px;
}

div.tl_reveal.closed {
	background-position: -112px 0px;
}

div.tl_reveal.open {
	background-position: -128px 0px;
}

div#tl2_head {
	display: table;
	border-collapse: collapse;
	background: orange;
}

div#tl_scenetrack {
	display: table-row;
	position: relative;
	background: #676767;
}

div#tl_scrubtrack {
	display: table-row;
	position: relative;
	background: #373737;
	overflow: hidden;
	height: 30px;
}

/* scene track */
div#tl_scenes_outline {
	display: table-cell;
	text-align: center;
	padding: 5px 0px;
	vertical-align: top;
	background: #171717;
	color: white;
}

div#tl_scenes_outline span {
	display: inline-block;
	color: #a7a7a7;
	margin: 0px 3px;
}

div#tl_scenes_outline p {
	font-size: 12px;
	margin: 2px 0px 0px 0px;
	color: #a7a7a7;
}

div#tl_scenes_outline label {
	background: white;
	color: black;
	margin: 0px 2px;
	padding: 0px 0px 0px 2px;
}

div#tl_scenes_outline input {
	/*border: 1px solid #373737;*/
	border: 0 none;
	color: white;
	text-align: center;
	width: 26px;
	background: #373737;
	margin: 0px;
}

div#tl_scenes_outline p#status_heading {
	color: #777777;
	font-weight: bold;
}

div#tl_scenes_outline p#status_tool {
	font-size: 24px;
	margin-top: 12px;
	color: #373737;
}

div.tl_head_main {
	display: table-cell;
	vertical-align: middle;
	text-align: left;
	margin-left: 165px;
	position: relative;
}

div#tl_scenetrack div.tool {
	display: inline-block;
	float: none;
	margin: 0px;
	background: transparent;
}

div#tl_scene_tools {
	display: inline-block;
}

/* scrub track */

div.shim {
	height: 30px;
	position: relative;
}

div#tl_tools {
	display: table-cell;
	background: #000000;
	height: 30px;
}

div#timeline div.menu_liner {
	background: none;
	padding: 0px;
	margin: 0px;
}

div#timeline div.tool {
	width: 30px;
	height: 30px;
}

div#timeline div.atlas {
	top: 0px;
	left: 0px;
}

div#tl_scrubhead {
	position: absolute;
	z-index: 11;
	padding: 8px 12px;
	font-weight: bold;
	top: 0px;
	bottom: 0px;
	background: rgba(255, 193, 61, 1.0);
	color: #373737;
	font-size: 12px;
	cursor: move;
}

div.tl_scene_container {
	display: inline-block;
	padding: 8px;
}

div.tl_scene_container.current {
	background: orange;
}

div.tl_scene_container.before {
	border-left: 4px solid orange;
}

div.tl_scene_container.after {
	border-right: 4px solid orange;
}

div.label {
	/* pointer-events: auto; */
}

div.tl_scene {
	width: 54px;
	height: 44px;
	margin: 0px;
	border: 1px solid #373737;
}


div.tl_scene.drag {
	opacity: 0.5;
}

div.tl_cell {
	display: table-cell;
	width: 15px;
	height: 25px;
	border-right: 1px solid;
	border-bottom: 1px solid;
	vertical-align: top;
}

div.tl_overlay {
	width: 15px;
	height: 25px;
	pointer-events: none;
	background: transparent url(img/timeline_atlas.png) no-repeat 0px 0px;
}


/* tartan */
div.tl_row {
	background: #575757;
}

/* cells for unselected elements */
div.tl_row.tl_selected {
	background: #777777;
}

div.tl_cell.tl_empty {
	background: #272727;
}

div.tl_cell.tl_prestart {
	background: #171717;
}

div.tl_cell.tl_visible {
	background: #b7b7b7;
}

div.tl_element div.tl_cell.tl_visible {
	background: #979797;
}

/* cells for selected elements */
div.tl_row.tl_selected.tl_selectedElement,
div.tl_selected.tl_selectedElement div.tl_cell.tl_visible {
	background: #ffffff;
}

div.tl_selectedElement div.tl_cell.tl_empty {
	background: #272727;
}

div.tl_selectedElement div.tl_cell.tl_prestart {
	background: #171717;
}

div.tl_selectedElement div.tl_cell.tl_visible {
	background: #b7c7d7;
}

div.tl_element.tl_selectedElement div.tl_cell.tl_visible {
	background: #97a7b7;
}

div.tl_cell.tl_selected {
	background: #0072bd !important;
}

div.tl_row.tl_selectedElement {
	background: #becad1;
}

/* overlay */

div.tl_overlay.tl_tween {
	background-position: -80px 0px;
}

div.tl_overlay.tl_node {
	background-position: -16px 0px;
}

div.tl_overlay.tl_ease_in {
	background-position: -64px 0px;
}

div.tl_overlay.tl_ease_out {
	background-position: -32px 0px;
}

div.tl_overlay.tl_ease_in.tl_ease_out {
	background-position: -48px 0px;
}

div.tl_overlay.tl_from  {
	background-position: -96px 0px;
	opacity: 0.4;
}

div.tl_overlay.tl_to  {
	background-position: -112px 0px;
	opacity: 0.4;
}

div#tl_scrubber {
	position: absolute;
	z-index: 10;
	background: rgba(255, 193, 61, 0.3);
	color: #373737;
	width: 15px;
	top: 0px;
	bottom: 0px;
	pointer-events: none;
}

/* dialogs */

div.modal_wrapper {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	z-index: 100;
}

div.modal {
	width: 400px;
	margin: 100px auto;
}

div.dl_wrapper {
	position: relative;
	padding: 4px 6px;	
}

div.dl_wrapper:last-child {
	padding-bottom: 6px;	
}

div.dl_wrapper input {
	margin: 0px;
}

input.dl {
	width: 100%;
}

div.dl {
	
}

div.dl:focus {
	background: white;
	outline: none;

	-webkit-user-select: text;
	-khtml-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
}

div.dl_textblock {
	background: white;
	padding: 20px;
	margin: 5px;
}

div.dl_textblock h2 {
	font-size: 32px;
	color: #373737;
	font-weight: bold;
	margin: 0px 0px 20px 0px;
}

div.dl_textblock p {
	color: black;
	font-size: 16px;
	text-align: left;
	margin: 15px 0px;
}

/* pagination */

div.pagination {
	color: white;
	font-size: 10pt;
	height: 30px;
}

div.page {
	position: absolute;
	top: 0px;
	width: 30px;
	height: 30px;
	background: transparent url(img/atlas.png) no-repeat 0px 0px;	
}

div.page.prev {
	left: 0px;
	background-position: 0px -750px;
}

div.page.next {
	right: 0px;
	background-position: 0px -540px;
}


/* colorpicker */

div.transparency {
	background: white url(img/transparency.png) repeat left top;	
}

div.control div.transparency {
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
}

div.colorpreview {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 60px;
	margin-right: 5px;
}

div.previewicon {
	left: 15px;
	top: 15px;
	pointer-events: none;
}

div.colorslider {
	position: relative;
	height: 30px;
	margin-top: 5px;
	background: white;
	background-color: transparent;
}

div.colorsliderThumb {
	position: absolute;
	bottom: 0px;
	width: 20px;
	padding: 2px 0px;
	text-align: center;
	background: #373737;
	font-size: 14px;
	font-weight: bold;
	color: #eee;
	cursor: pointer;
}

div.gradientContainer {
	position: relative;
	margin: 30px 0px 15px 0px;
	overflow: visible;
}

div.gradientContainer div.transparency {
	margin-left: 8px;
}

div#gradientPreview {
	height: 300px;
	background: transparent;
	margin-top: 10px;
}

div.gradientStop {
	position: absolute;
	width: 30px;
	height: 30px;
	border: 2px solid white;
	background: gray;
}

div#toast {
	position: absolute;
	z-index: 100;
	pointer-events: none;
	top: -40px;
	left: 0px;
	right: 0px;
	height: 20px;
	font-size: 9pt;
	padding: 10px;
	background: #0072bd;
	color: white;
}

div.chelp {
	position: absolute;
	z-index: 99;
	background: #0072bd;
	color: white;
	padding: 10px;
	text-align: left;
}

div.chelp h2 {
	margin: 0px 0px 10px 0px;
	color: white;
}

div.chelp h3 {
	margin: 0px;
	color: #b5d6ec;
}

div.chelp h4 {
	margin: 8px 0px 4px 0px;
	font-size: 11pt;
	color: white;
}

div.chelp ul {
	margin: 10px 0px 0px 0px;
	padding-left: 16px;
	color: white;
}

div.chelp li {
	padding: 4px 0px;
	font-size: 10pt;
}

div.chelp li span {
	background: #373737;
	padding: 2px;
}

div.chelp em {
	background: #ffffff;
	color: #373737;
	font-style: normal;
	padding: 2px;
	border-radius: 2px;
	font-weight: bold;
}

div#downloadify {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 125px;
	height: 60px;
}