* {font-family:sans-serif}
pre {font-family:monospace;}

body {
	height: 100%;
	margin: 0;
	background:#333;
	color:#ddd;
	margin:0;
	font-size:10pt; 
	overflow: hidden;
}


h2, strong { font-size:150%; }

a { color:#88f; }
a:visited { color:#88f; }

iframe {
	display: block;
}

#project-loading-div iframe {
	display: inline;
    border: none;
}

#aq-logo {
	position:absolute;
	top:0;
	right:0;
	z-index: 999999;
	width: 64px;
}

#error {
	font-size:14px;
	border:solid 8px #ff4;
	padding:15px;
	padding-bottom:0;
	background:#ddd;
	color:#222;
	width:50%;
}

#error div, #error table {
	padding-bottom:15px;
}

#main {
	color:#000;
	margin:0;
	position:absolute;
	width:100%;
}

#container {
	display:inline-block;
	vertical-align:top;
}

#layer-controls {
	display:none;
	vertical-align:top;
	color:white;
	text-align:center;
	width: 60px; /* necessary for space-issues */
}

#layer-plus-minus {
	margin-top: 77px;
}

#layer-height {
	margin-top: 15px;
}

#layer-height-slider-div {
	margin: auto;
	margin-top: 7px;
	padding-top: 5px;
}
.attribute-slider.noUiSlider.horizontal {
	width: 150px;
	margin-left: 7px;
	margin-right: 7px;
}
#layer-grid {
	margin-top: 15px;
}

#gallery-bar, #toolbar {
	overflow:hidden;
	clear: both;
	background: url(../images/tools/tool-bg.png);
	background-size: 100% 100%;
	height: 32px;
}


.gallery-toolbar-label {
	width:170px;
	text-align:center;
}

.toolgroup {
	display: inline-block;
	padding-top: 4px;
	padding-left: 4px;
}

.textgroup select {
	position:relative;
	bottom:1px;
}

.slidergroup {
	display: inline-block;
	padding-bottom: 3px;
	padding-left: 2px;
	height: 12px;
	top: 50%;
	margin-top: -6px;
}

#speedSlider {
	width:150px;	
}

.speedSlider.horizontal.noUiSlider {
	margin: auto;	
}
.textgroup
{
	color:#000;
	font-size: 12px;
	font-family: sans-serif;
	display: inline-block;
	vertical-align: 6px;
	padding-left: 4px;
}

#loading-indicator {
	font-size: 133%;
	margin: 1ex 1em;
	padding: 1ex 1em;
	background: #eee;
	color: #222;
	border-radius: 4px;
	display: inline-block;
}

/* Button Bar */
#dialog-button-bar {
	text-align: right;
	margin-top: 0.5em;
}

#dialog-button-bar button {
	margin-left: 0.5em;
}

table {
	font-size:10pt;
	clear:left;
}

table.attribute-window-table {
	border-spacing: 0;
}

table.centered-table {
	margin: auto;
	color: black;
}

td.right-aligned-td {
	text-align: right;
}

div.centered {
	text-align: center;
}

button.right-aligned-button {
	float: right;
}

#threed-and-status {
	display: inline-block;
}

#status-bar {
	color: #888;
	background: #111;
	overflow: hidden;
	min-height: 15px
}

#plot-window {
	z-index:1000;
	display: none;
	position: absolute;
	top: 160px;
	left: 100px;
	width:450px;
	border-radius: 4px;
	border:solid 1px #888;
	background-color: rgba(16,16,16,0.8);
}

#plot-window-title-bar {
	padding: 2px;
	border-radius: 4px 4px 0px 0px;
	background: #444;
}


#plot-window-title, #plot-legend, #plot-max-value, #plot-min-value {
	color: white;
}


#plot-labels-td {
	position: relative;
	width: 10%;
}
#plot-window-canvas-td {
	position: relative;
}
#plot-max-value {
	position:absolute;
	top: 0px;
}
#plot-min-value {
	position:absolute;
	top: 165px;
}
#plot-copy-button, #plot-copy-data {
	display: none;
}

.plot-legend-colorbox {
	display:inline-block;
	width:1em;
	height:1ex;
	margin:2px;
	white-space: nowrap;
}

#plot-window-close {
	background:red;
	color:black;
	float:right;
	width:15px;
	height:15px;
	text-align: center;
	border-radius: 4px;
	cursor:pointer;
}

#plot-copy-data {
	position:relative;
	top:6px;
	width:200px;
	height:12px;
}

#main, #gallery, #toolbar, #plot-window {
	-webkit-user-select: none;
	user-select:none;
}

#wrap {
	position: relative;
	overflow:hidden;
}

#gallery-container {
	position:relative;
	width: 170px;
	overflow-x:hidden;
	overflow-y:auto;
}

#non-gallery-container {
	position: absolute;
	top:0;
	left:170px;
}

#new-agent-div {
	white-space: nowrap;
}

#new-agent-div canvas {
	vertical-align: bottom;
}

#new-agent-div ol {
	padding: 0;
	padding-left: 8px;
	vertical-align: bottom;
}

.shape-button+.shape-button {
	margin-top: 7px;
}

#new-agent-div .shape-button {
	-webkit-user-select:none;
	user-select:none;
	vertical-align: middle;
	padding: 5px 10px 2px 5px;
	border-radius: 4px;
	background: #f8f8f8;
	cursor: pointer;
	box-shadow: 1px 1px 2px rgba(0,0,0,0.50);
}

#new-agent-div .shape-button.down {
	background: rgb(56,117,215);
	box-shadow: -1px -1px 2px rgba(0,0,0,0.50);
}

#new-agent-div .shape-button .shape-button-label {
	color: #111;
}

#new-agent-div .shape-button.down .shape-button-label {
	color: #f8f8f8;
}

#new-agent-div .shape-button-icon {
	display: inline-block;
	width: 48px;
	height: 48px;
	background-image:url(../images/new-agent-icons.png);
	background-position: 0px 0px;
	margin-right: 8px;
}

#new-agent-div .shape-button-icon.cube { background-position: -48px 0px; }

#new-agent-div .shape-button-icon.sphere { background-position: -96px 0px; }

#new-agent-div .shape-button-icon.tile { background-position: -144px 0px; }

#new-agent-div .shape-button-icon.cylinder { background-position: -192px 0px; }

#new-agent-div .shape-button-label {
	position: relative;
	bottom: 20px;
	display: inline-block;
	font-size: 115%;
	color: #eee;
}

select.texture-select {
	width: 150px;
	height: 320px;
	margin: 0;
	padding: 0;
	border: 0;
	margin-right: 4px;
}

#gallery-buttons {
	display:none;
	text-align:center;
	width:170px;
	float:left;
	white-space:nowrap;
}

#gallery {
	color: white;
	width:170px;
	white-space:nowrap;
}

#gallery_agentlist {
	list-style-type:none;
	margin:0;
	padding:0;
}

#gallery_agentlist li {
	width:100%;
	margin-bottom:4px;
}

.gallery_agentsublist {
	list-style-type:none;
	margin-left:2em;
	padding-left:0;
}

.gallery_agentitem {
	height:28px;
	margin:4px 0px;
}

.gallery_shapeitem {
	height:28px;
	margin:4px 0px;
	position:relative;
}

.gallery_name {
	position:relative;
	top:-10px;
}

.flippy-open {
	cursor:pointer;
	font-size:75%;
	opacity:0.5;
	margin-right:3px;
	position:relative;
	top:8px;
	float:left;
}

.flippy-closed {
	cursor:pointer;
	font-size:75%;
	opacity:0.5;
	margin-right:4px;
	position:relative;
	top:8px;
	float:left;
}

.gallery-thumbnail {
	position:relative;
	width:28px;
	height:28px;
	margin-right:4px;
}

.gallery-shapelabel {
	opacity:0.75;
}

/*VAT*/
#vat {
	position: relative;
	color: white;
}

#vat #vat-table, #vat #vat-table td {
	border-collapse: collapse;
	border-spacing: 0;
}

#vat img.vat-proxy {
	width:14px;
	height:14px;
	margin:0 4px;
	vertical-align:-2px;
}

#vat-code-header-resize-img {
	width:14px;
	height:14px;
	margin:0 4px;
	vertical-align:-2px;
}

#vat-conditions-header, #vat-code-header-td, #vat-actions-header {
	color: black;
	text-align: center;
	background: url(../images/tools/tool-bg.png);
	background-size: 100% 100%;
}

#vat-conditions-td, #vat-code-td, #vat-actions-td {
	vertical-align: top;
}

#vat-conditions-td, #vat-actions-td {
	margin:0;
	padding:0;
	width:100px;
}

#vat-code-td {
	position: relative;
}

#vat-code-td #vat-code {
	margin:0;
	padding:0;
	padding-top:2px;
	overflow-x:hidden;
	overflow-y:auto;
	position:relative;
	top:0;
}

#gallery-disabler, #vat-code-disabler {
	display:none;
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background-color:rgba(255,255,255,0.333);
}

#vat-conditions-scroll, #vat-actions-scroll {
	overflow-x: hidden;
	overflow-y: auto;
}

#vat-conditions-td #vat-conditions { margin-left:0; padding-left:0; }
#vat-actions-td #vat-actions { margin-right:0; padding-right:0; }

#vat-conditions {
	width: 210px;
}

#vat-actions {
	width: 255px;
}

#vat-conditions, #vat-actions {
	background: #282828;
	position:relative;
	top:0;
}

.group-title {
	clear:both;
	margin-left:6px;
	font-size:115%;
	color: #aaa;
	padding: 1ex 0;
}

.group-end {
	clear:both;
}

.method {
	border: solid 1px #444;
	border-radius: 4px;
	background: #303034;
	padding: 2px;
	margin-left: 4px;
	margin-right: 4px;
	margin-bottom: 8px;
	position: relative;
}

.method .trigger-name{
	position: relative;
	border: solid 1px rgba(255, 194, 0, 0.5);
	border-radius: 2px;
	margin: 2px;
	display: inline-block;
}

.rule .anc {
	vertical-align: top;
	position: relative;
	top: 8px;
}

.rule-box {
	background: #222;
	border-radius: 2px;
	display:block;
}

.trigger-box {
	width: 100%;
	display: block;
}

.rule {
	border:solid 1px #333;
	border-radius: 2px;
	background: #111;
	white-space: nowrap;
}

.rule .instruction-area {
	display: inline-block;
}

#vat .rule .if-then {
	/* hack for Safari 5.1 */
	width:49%;
	width:calc(50% - 8px);
	width:-webkit-calc(50% - 8px);
}

.rule .if-then {
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border:solid 1px #222;
	background: #222;
	border-radius: 2px;
	display: inline-block;
	vertical-align: top;
	padding: 4px;
	margin: 4px;
	min-height: 45px;
}

.if-then .if {
	font-size:115%;
	color: #aaaab0;
}

.if-then .then {
	font-size:115%;
	color: #b0aaaa;
}

.instruction {
	border-radius: 4px;
	padding: 3px;
	margin: 2px 2px 4px 2px;
	margin-left:0.5em;
	font-size:9pt;
	float:left; /* HAAAAACK - http://stackoverflow.com/a/5803141/573110 */
	clear:both;
	cursor:default;
}

.condition {
	background: rgb(59,68,75);
	/*border: solid 1px rgb(190,220,240); -- brighter, but too much contrast*/
	border: outset 1px rgb(125,145,159);
}

#vat .condition.vat-selected:not(.disabled), #vat .condition:hover:not(.disabled) {
	background: rgb(80,89,95);
}



.action {
	background: rgb(64,53,53);
	/*border: solid 1px rgb(240,170,170); -- brighter, but too much contrast*/
	border: outset 1px rgb(159,112,112);
}

.disabled {
	background: rgb(160,160,160);
	border: 0;
	opacity: 0.5;
	color: #111;
}

#vat .action.vat-selected:not(.disabled), #vat .action:hover:not(.disabled){
	background: rgb(85,67,67);
}

.editor span {
	white-space: normal;
}

.instruction .editor {
	margin-left: 4px;
	position: relative;
	cursor: pointer;
}

.instruction .instruction-content {
	display:inline-block;
}

.instruction .disclosure-bits {
	display:none;
}

.editable-display {
	background: white;
	color: black;
	border-top: solid 1px #888;
	border-left: solid 1px #888;
	padding: 0px 2px;
	display: inline-block;
	margin: 1px;
	white-space: nowrap;
	cursor:pointer;
}

.method-row {
	float: left;
}
.method .comments-box {
	display: block;
	min-height: 32px;
	overflow:auto;
}


.comment-textarea {

	width: 100%;
	overflow: hidden;
	word-wrap: break-word;
	white-space: pre;	
	resize: none;
	background-color: rgb(225, 225, 225);
	background-color:white;
	background-color: rgb(255, 255, 204);
	width: calc(100% - 89px);
	float: left;
	
}


.disclosure-box {
	float:right;
	width: 80px;
	display: inline-block;
	cursor: pointer;
}

.method-disclosure-span {
	max-width: 79px;
	color: rgb(200, 200, 200);
	font-size: 7.5pt;	
}

.editable-display.editable-textfield {
	text-overflow: ellipsis;
	overflow: hidden;
	vertical-align: bottom;
} 

.cancelbutton{
	margin:1px;
	vertical-align: middle;
	display: inline-block;
	width:17px;
	height:17px;
	background:url(../js/vat/images/cancel.png);
}

.acceptbutton{
	margin:1px;
	vertical-align: middle;
	display: inline-block;
	width:17px;
	height:17px;
	background:url(../js/vat/images/ok.png);
}

.leftDropIndicator {
	display: none;
	width:32px;
	height:32px;
	background-image:url(../js/vat/images/yellow-arrows.png);
	background-position: 0px 0px;
	position:absolute;
	pointer-events: none;
}

.rightDropIndicator {
	display: none;
	width:32px;
	height:32px;
	background-image:url(../js/vat/images/yellow-arrows.png);
	background-position: 32px 0px;
	position:absolute;
	pointer-events: none;
}

.direction-popup-editor div.direction-picker-display{
	border: solid 2px #eee;
}

.direction-popup-editor div.direction-picker-display:hover{
	border: solid 2px #444;
}

.shape-popup-editor td{
	white-space: nowrap;
}

.shape-popup-editor img{
	width:16px;
	height:16px;
	border: solid 1px #eee;
}

.shape-popup-editor img:hover{
	width:16px;
	height:16px;
	border: solid 1px #444;
}

.instruction .shape-editor-display {
	position:relative;
	top:3px;
	border-top: solid 1px #888;
	border-left: solid 1px #888;
	width:16px;
	height:16px;
}

.direction-picker-display {
	position:relative;
	top:3px;
	width:16px;
	height:16px;
	background-image: url(../js/vat/images/direction/direction_all.png);
	display: inline-block;
}
.direction-picker-display.east      { background-position: -32px -16px; }
.direction-picker-display.northeast { background-position: -32px -0px;  }
.direction-picker-display.north     { background-position: -16px -0px;  }
.direction-picker-display.northwest { background-position: -0px  -0px;  }
.direction-picker-display.west      { background-position: -0px  -16px; }
.direction-picker-display.southwest { background-position: -0px  -32px; }
.direction-picker-display.south     { background-position: -16px -32px; }
.direction-picker-display.southeast { background-position: -32px -32px; }
.direction-picker-display.center    { background-position: -16px -16px; }

.popup-list-item {
	white-space: nowrap;
	padding: 0.5ex 0.5em;
	cursor: pointer;
	border-radius: 2px;
}

.popup-list-item:hover {
	white-space: nowrap;
	background: #777;
	padding: 0.5ex 0.5em;
	cursor: pointer;
	border-radius: 2px;
}

.transparency {
	background-image: url("../sub-components/Online_Inflatable_Icons/IconEditor/public/js/ImageEditor/bg.png");
}

.instruction .color-picker-display {
	width:16px;
	height:16px;
	display:inline-block;
	position:relative;
	top:4px;
	border-top: solid 1px #888;
	border-left: solid 1px #888;
	margin-left:0px;
}

#vat .drop-top:not(.condition):not(.action) {
	border-top: solid 1px #ff0;
}

#vat .drop-bot:not(.condition):not(.action) {
	border-bottom: solid 1px #ff0;
}

.vat-flippy-closed, .vat-flippy-open {
	color:#eed;
	vertical-align: top;
	display:inline-block;
	font-size:66%;
}

.vat-flippy-closed:hover, .vat-flippy-open:hover {
	cursor:pointer;
}

#vat .condition.true span.instruction-name {
	color:rgb(96,255,96);
}

#vat .condition.false span.instruction-name {
	color:rgb(255,96,96);
}

#vat .rule.true div.if-then {
	background:#1a4026;
}

#vat .rule.false div.if-then {
	background:#402626;
}

#vat .rule.vat-selected, #vat .method.vat-selected {
	background:#555;
}

.vat-selected {
	border:solid 1px #fff;
}

#one-true-value-editor {
	position:absolute;
	display:none;
	white-space:nowrap;
	padding:4px;
	background: #112;
	border-radius: 2px;
	border: solid 1px black;
	box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
	z-index:1;
}

#vat-buttons {
	text-align:center;
}

#bottom-toolbar {
	display:none;
	width:100%;
	position:absolute;
	bottom:0px;
	z-index:100;
	background: url(../images/tools/tool-bg.png);
	background-size: 100% 100%;
}

/* presence */
#presence {
	position:fixed;
	top:0px;
	right:0px;
	border-radius: 4px;
	padding:1ex 1em;
	background:#eee;
}

#presence .name-changer {
	cursor: pointer;
}

#presence .anc {
	opacity:0.5;
}

#presence .property {
	margin-left:1em;
}

.draggable-window {
	position:absolute;
	left:580px;
	top:0px;
	background:#eee;
	border-radius:4px;
	z-index:2000;
	display:none;
}

.draggable-title-bar {
	background:#ccc;
	border-radius:4px 4px 0px 0px;
	padding:4px;
}

.draggable-flippy {
	position:relative;
	top:-1px;
	font-size:75%;
	cursor:pointer;
	display:inline-block;
	width:18px;
	text-align: center;
}

.draggable-window input.attributeRowNumber {
	margin:4px;
	width:284px;
}

.draggable-window .name {
	font-weight:bold;
}

.draggable-window .chat-item {
	padding:2px;
}

#chat-area {
	max-height:400px;
	overflow-y:auto;
}

#chat-area::-webkit-scrollbar {
	-webkit-appearance: none;
	width: 11px;
	height: 11px;
}

#chat-area::-webkit-scrollbar-thumb {
	border-radius: 8px;
	border: 2px solid #eee;
	background-color: rgba(0, 0, 0, .5);
}

#project-loading-div {
    margin: auto;
    width: 600px;
    text-align: center;
    top: 33px;
    background-color: grey;
}

#project-loading-div h1 {
	margin-left: 15px;
	margin-right: 15px;
}

#load-progress-bar {
	width: 90%;
	widht: calc(100% - 30px);
	margin-left: 15px;
	margin-right: 15px;	
}

#pop-over-container {
	display:none;
}

.pop-over-container {
	z-index:20000;
	top:0;
	left:0;
	width:100%;
	height:100%;
	position:fixed;
	background:rgba(0,0,0,0.8);
}

.popped-over-content.new-world-dialog {
	width: 400px;
}

.popped-over-content.unlock-full-version-dialog {
	-webkit-user-select:none;
	user-select:none;
	width: 580px;
	padding: 10px 20px;
	background: #ddd;
	color: #222;
}



.popped-over-content.unlock-full-version-dialog button {
	padding: 4px;
	margin: 0 10px;
}

div.unlock-full-version-input {

}

div.paymentplan {
	/*background-color: #886E33;*/
	margin: 10px 0;
	text-align: left;
    padding-left: 70px;
}

div.bestvalue {
	text-align: left;
	margin-left: 18px;
}

.close-x {
    border-radius: 0 8px 0 8px;
    color: #000;
    cursor: pointer;
    font-size: 11px;
    height: 21px;
    line-height: 19px;
    outline: medium none;
    float: right;
    right: 0;
    text-align: center;
    top: 0;
    width: 22px;
    text-transform: lowercase;
    z-index: 1;	
}


.popped-over-content.skydome-dialog {
	width: 240px;
	color: #222;
	padding: 10px;
}

.popped-over-content.color-dialog {
	width: 410px;
	color: #222;
	padding: 10px;
}

.popped-over-content.color-dialog td.label {
	text-align: right;
}

.popped-over-content.color-dialog input {
	position: relative;
	left: 20px;
	width: 3em;
}

#color-chooser-r-slider, #color-chooser-g-slider, #color-chooser-b-slider {
	width: 128px;
	left: 10px;
}

#icon-editor #icon-editor-table {
	margin-left:auto;
	margin-right:auto;
}

.popped-over-content {
	border-radius: 0 0 4px 4px;
	margin-left:auto;
	margin-right:auto;
	width: 30%;
	max-width: 75%;
	/*background-color: #aaa;*/
	background-color: #dddddd;
	color: #222;
	padding: 1em;
	box-shadow: 5px 5px 2px rgba(100, 100, 100, 0.5);
}

#progress-loader img {
	vertical-align: middle;
	padding-right: 1em;
}

/* Tools */
#world-button {
	display:inline-block;
	width: 58px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -362px 0px;
}

#world-button.down {
	background-position: -362px 22px;
}

button {
	border-width: 1px;
}

button:hover {
}

#new-world-button {
}

#action-button {
	display:inline-block;
	width: 40px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: 0px 0px;
}

#action-button.down {
	background-position: 0px 22px;
}

.important-button {
	background: #f78d1d;
    background: -moz-linear-gradient(center top,#FAA51A,#F47A20) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear,left top,left bottom,from(#FAA51A),to(#F47A20));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FAA51A',endColorstr='#F47A20');
    border: 1px solid #da7c0c;
    border-radius: 8px;
    -moz-border-radius: 8px;
    display: inline-block;
    text-align: center;
    vertical-align: top;
    cursor: pointer;
    position: relative;
    line-height: 15px;
    text-shadow: 0 1px 1px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    color: #FFF!important;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    font-family: Arial,Helvetica,sans-serif;
    font-weight: normal;
    text-shadow: 0 1px 1px rgba(0,0,0,0.2);
    border-radius: 3px;
    padding: .5em 1.8em .4em;
    font-size: 12px;
}

#tool-play {
	display:inline-block;
	width: 22px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -40px 0px;
}

#tool-play.down {
	background-position: -40px 22px;
}

#tool-stop {
	display:inline-block;
	width: 20px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -62px 0px;
}

#tool-stop.down {
	background-position: -62px 22px;
}

#tool-step {
	display:inline-block;
	width: 22px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -82px 0px;
}

#tool-arrow {
	display:inline-block;
	width: 22px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -104px 0px;
}

#tool-arrow.down {
	background-position: -104px 22px;
}

#tool-pencil {
	display:inline-block;
	width: 21px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -126px 0px;
}

#tool-pencil.down {
	background-position: -126px 22px;
}

#tool-multi {
	display:inline-block;
	width: 21px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -147px 0px;
}

#tool-multi.down {
	background-position: -147px 22px;
}

#tool-eraser {
	display:inline-block;
	width: 21px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -168px 0px;
}

#tool-eraser.down {
	background-position: -168px 22px;
}

#tool-hand {
	display:inline-block;
	width: 21px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -189px 0px;
}

#tool-hand.down {
	background-position: -189px 22px;
}

#tool-camera-rot {
	display:inline-block;
	width: 22px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -210px 0px;
}

#tool-camera-rot.down {
	background-position: -210px 22px;
}

#tool-camera-pan {
	display:inline-block;
	width: 20px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -232px 0px;
}

#tool-camera-pan.down {
	background-position: -232px 22px;
}

#tool-camera-zoom {
	display:inline-block;
	width: 22px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -252px 0px;
}

#tool-camera-zoom.down {
	background-position: -252px 22px;
}

#tool-fp {
	display:inline-block;
	width: 22px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -274px 0px;
}

#tool-fp.down {
	background-position: -274px 22px;
}

#tool-reset {
	display:inline-block;
	width: 22px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -296px 0px;
}

#tool-clear {
	display:inline-block;
	width: 44px;
	height: 22px;
	background-image: url(../images/tools/tool-sheet.png);
	background-position: -318px 0px;
}

#action-button-menu, #world-button-menu, #aqo-logo-menu {
	color:#000;
	display:none;
	position:absolute;
	background:#eee;
	border:solid 1px #888;
	border-radius: 4px;
	z-index:10000;
}

.action-button-menu-item, .world-button-menu-item {
	padding:4px;
}

.action-button-menu-item:hover, .world-button-menu-item:hover {
	cursor:pointer;
	background: #aaa;
}

.popped-over-content.about-dialog {
	width: 480px;
	padding: 10px;
	color: #222;
}

#icon-share-button {
	display:none;
}

.new-shape-dialog {
	width: 23em;
	text-align: right;
	color: black;
	background: #ddd;
	padding: 1em;
}

.new-shape-dialog input {
	width: 20em;
}

div.humane {
	-webkit-user-select:none;
	user-select:none;
	color: #222;
	cursor: pointer;
}

div.humane-success {
	background-color:#8f8;
}

div.humane-warning {
	background-color:#fa0;
}

div.humane-error {
	background-color:#f88;
}

.highlightedRow { background-color: #55aaff; }

.js-textarea {
	-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;
	font-family: Consolas, Menlo, monospace;
	width: 90%;
	height: 80ex;
	margin-left: 4%;
	padding: 4px;
	display: block;
}

#light-configuration-window {
	width: 300px;
	zIndex: 100;

	left:50px;
}
#light-window {
	top: 300px;
	left:50px;
}

input.light-window-number-input {
	width:4em;
}

span.light-name {
	font-weight: bold;
}
div.draggable-window-content-div {
	padding: 8px;

}

div.attribute-window-table-div {
	overflow-y: scroll;
    max-height: 300px;	
}

table.attribute-window-table tbody tr td {
	text-align: center;
}

#popped-over-you-tube-div {
	width: 854px;
	height: 510px;
	margin-left: -427px; 
	left: 50%;
	position: fixed;
	top: 10%;
		display: inline-block;

}

#you-tube-pop-over-container {
	z-index:20000;
	top:0;
	left:0;
	width:100%;
	height:100%;
	position:fixed;
	display:none;
	background:rgba(0,0,0,0.7);
	margin: 0 auto;
}

#hoc-close-x-div {
	width: 60px;
	height: 60px;
	right: -20px;
	top: -20px;
	position: absolute;

}

#hoc-toolbar {
	overflow:hidden;
	clear: both;
	background: white;
	background-size: 100% 100%;
	padding: 4px;
	text-align: center;
}

#hoc-submit-description-div {
	text-align: left;
	width: 190px;
	margin-left: 15px;
	vertical-align: top;
	display: inline-block;
}

.hoc-submission-input {
	width: 170px;
}

input.invalid-input {
	outline-color: #f44;
}

/****************/
/* HINT BUBBLES */
.bubble {
	padding: 15px;
	position: relative;
	border-radius: 5px;
	border: #7F7F7F solid 2px;
	background: #e8f8e8;
	color: #333;
	font-size: 115%;
	z-index: 3000;
}

.bubble strong {
	font-size: 115%;
}

.bubble:after {
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 10px 10px 0;
	border-color: #e8f8e8 transparent;
	display: block;
	width: 0;
	z-index: 1;
	bottom: -8px;
	left: 15px;
}

div.bubble-upward-facing:after {
	
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 0px 10px 10px;
	border-color: #e8f8e8 transparent;
	display: block;
	width: 0;
	z-index: 1;
	top: -8px;
	left: 15px;	
	bottom: initial;
}

div.bubble-leftward-facing:after {
	
	content: '';
	position: absolute;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right: 10px solid #e8f8e8;
	display: block;
	width: 0;
	z-index: 1;
	top: 10px;
	left: -20px;	
	bottom: initial;
}


#new-agent-hint {
	position:absolute;
	left:10px;
	bottom:29px;
	width:150px;
	display:none;
}

#main div.dynamic-hint {
	position:absolute;
}

.dynamic-hint span {
	display: block;
	text-align: center;
}


#subscription-note {
	border-radius: 4px;
	background: #222;
	color: #f8f8f8;
	padding: 4px;
	margin-top: 13px;
}

#subscription-note:before {
	content: '';
	position: relative;
	border-style: solid;
	border-width: 0 10px 10px;
	border-color: #222 transparent;
	display: block;
	width: 0;
	left: 270px;
	top: -14px;
}

.subscription-note-product-column {
	width: 70%;
	display: inline-block;
	vertical-align: top;
}

.subscription-note-price-column {
	width: 30%;
	display:inline-block;
	vertical-align: top;
}

@import "http://fonts.googleapis.com/css?family=Raleway";
/*----------------------------------------------
CSS settings for HTML div Exact Center
------------------------------------------------*/

/*
#abc {
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto
}
*/
img#close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer
}

div.quickstart-form {
position:absolute;
left:50%;
top:10px;
margin-left:-247px;
font-family:'Raleway',sans-serif;
color: black;
}

#getInfoForm form {
max-width:390px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
font-family:raleway;
background-color:#fff
}

#getInfoForm p {
margin-top:15px
}

#getInfoForm h2 {
background-color:#FEFFED;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0
}

#getInfoForm hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc
}

#getInfoForm input[type=text] {
width:82%;
padding:10px;
margin-top:15px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway
}

#getInfoForm input[type=password] {
width:82%;
padding:10px;
margin-top:15px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway
}

.info-form-name-field {
background-image:url(../images/name.jpg);
background-repeat:no-repeat;
background-position:5px 7px
}

.info-form-email-field {
background-image:url(../images/email.png);
background-repeat:no-repeat;
background-position:5px 7px
}

#getInfoForm textarea {
background-image:url(../images/msg.png);
background-repeat:no-repeat;
background-position:5px 7px;
width:82%;
height:95px;
padding:10px;
resize:none;
margin-top:15px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway;
margin-bottom:15px
}

#submit {
text-decoration:none;
width:100%;
text-align:center;
display:block;
background-color:#FFBC00;
color:#fff;
border:1px solid #FFCB00;
padding:10px 0;
font-size:20px;
cursor:pointer;
border-radius:5px
}

#getInfoForm span {
color:red;
font-weight:700
}

#getInfoForm button {
width:10%;
height:45px;
border-radius:3px;
background-color:#cd853f;
color:#fff;
font-family:'Raleway',sans-serif;
font-size:18px;
cursor:pointer
}

.context-menu-item {
	color: #000;
}

div .dropzone { 
	border: 2px dashed #0087F7; 
	border-radius: 5px; 
	background: white; 
	width: 150px;
}
#left-arrow-div {

	background: url(../images/left-arrow.png) no-repeat center;
	position: absolute;
	left: 0px;
	top: calc(50% - 50px);
	width: 50px;
	height: 100px;
}

#right-arrow-div {
	background: url(../images/right-arrow.png) no-repeat center;
	left: calc(100% - 50px);
	position: absolute;
	top: calc(50% - 50px);
	width: 50px;
	height: 100px;
}

#top-arrow-left-div {
	background: url(../images/up-arrow.png) no-repeat center;
	left: 0px;
	position: absolute;
	top: 0px;
	width: 50px;
	height: calc(50% - 50px);
}

#bottom-arrow-left-div {
	background: url(../images/down-arrow.png) no-repeat center;
	left: 0px;
	position: absolute;
	top: calc(50% + 50px);
	width: 50px;
	height: calc(50% - 50px);
}

#top-arrow-right-div {
	background: url(../images/up-arrow.png) no-repeat center;
	left: calc(100% - 50px);
	position: absolute;
	top: 0px;
	width: 50px;
	height: calc(50% - 50px);
}

#bottom-arrow-right-div {
	background: url(../images/down-arrow.png) no-repeat center;
	left: calc(100% - 50px);
	position: absolute;
	top: calc(50% + 50px);
	width: 50px;
	height: calc(50% - 50px);
}

 .mobile-arrow-div {
 	background-color: #333;
 	opacity: .3;
 	border: 1px solid white;	
 }

/* Report specific css */
#agents, #toc, #stats-list {
	list-style-type: none;

}



.agent-report-li {
	padding-bottom: 50px;
}

.report-right-col {
	width: 100%;
}

.report-left-col {
	/*width: 200px;*/
}

.agent-report-li .gallery_name {
	font-size: 25pt;
}

.agent-report-li .gallery_shapeitem .gallery_name {
	font-size: 12pt;
}

.project-header {

	text-align: center;
	background-color: #555;
	width: 100%;
	padding: 0.5em;
	font-size: 40px;
}

/* Hoc css */


#video-panel {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
.video-panel {
	background: #1b1b1b;

	display: inline-block;

	box-shadow: 0 6px 12px rgba(0,0,0,.5);

	min-height: 390px;
	z-index: 1000;
	overflow: hidden;
	white-space: nowrap;  
}
.video-panel-hidden {
  position: absolute;
  background: #1b1b1b;
  border-left: 20px solid #1b1b1b;
  border-right: 20px solid #1b1b1b;
  left: 50%;
  top: -356px;
  margin-left: -320px;
  width: 640px;
  height: 390px;
  z-index: 100;
}
#video-top-mask {
  position: absolute;
  width: 660px;
  left: 50%;
  height: 12px;
  background: #1b1b1b;
  margin-left: -320px;
  z-index: 500;
}
#head-panel {
  position: absolute;
  width: 100%;
  height: 40px;
  background: #1b1b1b;
  left: 0;
  top: 0;
  margin-right: 320px;
  z-index: 50;
  box-shadow: 0 6px 12px rgba(0,0,0,.5);
}
#head-panel-left {
  position: absolute;
  width: 20px;
  height: 40px;
  background: #1b1b1b;
  right: 50%;
  margin-right: 320px;
  z-index: 300;
}
#head-panel-right {
  position: absolute;
  width: 30px;
  height: 40px;
  background: #1b1b1b;
  left: 50%;
  margin-left: 340px;
  z-index: 300;
}
#head-panel-logo {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 301;
}
#editor-panel {
  position: absolute;
  width: 100%;
  top: 40px;
  background: #e3e3e3;
  border: 0;
  /* Safari 5.1 does not support calc at all so we have the 92% so that Safari 5.1 users can at least use the activity */
  height: 92%;
  height: calc(100% - 40px);
  height: -webkit-calc(100% - 40px);
  left: 0px;
}
.video-toggle-hide {
  cursor: pointer;
  position: relative;
  display:block;
  left: 465px;
  top: -30px;
  width: 175px;
  height: 25px;
  background-image: url(../images/hoc/hidevideo.png);
  background-color: #1b1b1b;
  margin-bottom: -25px;
}
.video-toggle-show {
  cursor: pointer;
  position: relative;
  float: right;
  top: -25px;
  width: 175px;
  height: 25px;
  background-image: url(../images/hoc/showvideo.png);
  margin-bottom: -25px;
  background-color: #1b1b1b;
}
#hoc-head-panel-submit {
  position: absolute;
  width: 204px;
  top: 3px;
  height: 34px;
  background-color: rgb(255, 144, 36);
  z-index: 100;
  right: 20px;
  cursor: pointer;
  border-radius: 3px;
  text-align: center;
}
.hoc-submit-img {
  display: table-cell;
  margin: auto;
  top: calc(50% - 5px);
  position: relative;
}
#hoc-head-panel-language-dropdown {
  position: absolute;
  top: 3px;
  left: 20px;
  font-size: 16px;
  z-index: 400;
}

#quickstart-into-div-language-dropdown {

}

#hoc-head-panel-submit:hover {
  opacity: 1;
}
#hoc-intro-div {
  min-height: 100%;
  z-index:20000000;
  top:0;
  left:0;
  width:100%;
  height:100%;
  position:fixed;
  background:rgba(0,0,0,0.8);
  overflow: auto;
  display: none;
  font-size: 14px;
  /*font-family: 'Raleway', sans-serif;*/
  font-family: Helvetica Neue,Helvetica,Arial,sans-serif;   
}
#hoc-intro-img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: 1200px;
  width: 800px;
}
#hoc-intro-iframe{
  border-top: 0;
  border-bottom: 0;
  position:fixed;
  left:20%;
  width:60%;
  height:100%;
  overflow:auto;
  background-color: rgb(49, 49, 49);
  color: white;
}

#hoc-intro-iframe h1 {
  color: rgb(252, 117, 56);

}

#hoc-intro-iframe h2  {
  color: rgb(62, 100, 160);
}

.hoc-video-button {
	width: 32px;
	cursor: pointer;
}

.hoc-video-button-not-pressed {
	opacity: 0.4;
	filter: alpha(opacity=40)
}

#hoc-video-play-button {
	margin-left: 15px;
}

#hoc-video-stop-button {
	margin-left: 5px;
}
#video-controls {
	display: inline-block;
	vertical-align: top;
}

#you-tube-player {
	display: inline-block;
}


#annotations {
  font-size: 10pt;
  font-family: sans-serif;
  color:white;
  overflow: hidden;
  /*max-width: 315px;*/
  display: inline-block;
}
#annotations-list {
  padding-left:15px;
  list-style: none;
  margin-top: 5px;
}

.annotation-item {
	cursor: pointer;
}
.annotation-item-sub-item {	font-size: 11px; }
.annotation-item-header-item { margin-top: 12px;}
#annotations-list a { color: rgb(180, 180, 180); text-decoration:none; }
#annotations-list a:visited { color:rgb(243, 147, 34); }
#annotations-list li:hover a { color:#88f; color:white; }

#annotations-list li:hover{ background-color: rgba(255, 144, 36, .85); border-radius: 3px;}

#annotations-list li {padding:1px;}
#annotations-list li.current {background:rgb(255, 144, 36); border-radius: 3px;}
#annotations-list li.current a{color: white;}


@font-face {
	font-family: 'clock';
	src: url('../fonts/clock-font.TTF');
}

#clock-div {
	color: rgb(80, 80, 80);
	display: inline-block;
	margin-left: 5px;
	font-family: 'clock';
	font-size: 44px;	
}

#quickstart-video-resize-button {
	margin-right: -165px;
	margin-left: 15px;
	border: none;
	border-radius: 5px;
	width: 144px;
	height: 25px;
	cursor: pointer;
	padding: 0;
	display:none;
	position: relative;
	bottom: 10px;	
}

#quickstart-video-resize-button span {
	position: relative;
	bottom: 2px;
	margin-left: 5px;
	font-size: 12pt;
	color: rgb(97, 95, 5);
}
.custom-dropdown--large {
    font-size: 1.5em;
}

.custom-dropdown--small {
    font-size: .7em;
}

.custom-dropdown__select{
    font-size: inherit; /* inherit size from .custom-dropdown */
    padding: .5em; /* add some space*/
    margin: 0; /* remove default margins */
    outline: none;
}

.custom-dropdown__select--white {
    background-color: rgb(150, 150, 150);
    color: white;
}



.custom-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}

.custom-dropdown__select {
    padding-right: 2.5em; /* accommodate with the pseudo elements for the dropdown arrow */
    border: 0;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;    
}

.custom-dropdown::before,
.custom-dropdown::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.custom-dropdown::after { /*  Custom dropdown arrow */
    content: "\25BC";
    height: 1em;
    font-size: .625em;
    line-height: 1;
    right: 1.2em;
    top: 50%; margin-top: -.5em;
}

.custom-dropdown::before { /*  Custom dropdown arrow cover */
    width: 2em;
    right: 0; top: 0; bottom: 0;
    border-radius: 0 3px 3px 0;
}

.custom-dropdown__select[disabled] {
    color: rgba(0,0,0,.3);
}

.custom-dropdown.custom-dropdown--disabled::after {
    color: rgba(0,0,0,.1);
}

/* White dropdown style */
.custom-dropdown--white::before {
    top: .5em; bottom: .5em;
    background-color: rgb(150, 150, 150);
    border-left: 1px solid rgba(0,0,0,.1);
}

.custom-dropdown--white::after {
    color: rgba(0,0,0,.9);
}

#diploma-canvas {
	padding-left: 0;
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.diploma-button {
	display: inline-block;
    background-color:#FF9024;
    width: 135px;
    padding-top: 10px;
    height: 30px;
    color: white;
    text-decoration: none;
    font-size: 16px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 7px;
    text-align: center;
    margin-left: 10px;
    margin-bottom: 3px;
}

#getInfoForm #diploma-name-field {
    width: 200px;
    margin-top: 0px;
}

/* FF only temp fix */
@-moz-document url-prefix() {
    .custom-dropdown__select             { padding-right: .9em }
    .custom-dropdown--large .custom-dropdown__select { padding-right: 1.3em }
    .custom-dropdown--small .custom-dropdown__select { padding-right: .5em }
}

.bulleted-list {
  list-style-type: circle;
}


#video-red-x:hover {
text-shadow: 1px 1px 2px #ff0000;
}
#lite-mode-warning {
    z-index:1000;
    top:0;
    left:0;
    width:100%;
    height:100%;
    position:absolute;
    display:none;
    background:rgba(0,0,0,0.8);
    color: white;
    font-size: 30px;
    white-space: pre-wrap;
}

#tutorial-button {
	text-align: center;
	background-color: rgb(150, 150, 150);
	height: 18px;
	cursor: pointer;
	top: 3px;
	border-radius: 5px;
	position: absolute;
	width: 200px;
	left: 50%;
	margin-left: -100px;
	font-size: 16px;
	color: white;
	padding-top: 8px;
	padding-bottom: 8px;	
	display: none;
}
#lite-mode-warning span {
  padding: 20px 10px 10px 10px;
  position: absolute;
  text-align: center;    
}

#subscribe-button {
  left: 50%;
  margin-left: -150px;
  margin-top: -33px;
  padding-top: 15px;
  top: 50%;
  background: rgb(200, 50, 0);
  width: 300px;
  height: 50px;  
  color:white;
}

.link-button {
  position: absolute;
  text-align: center; 
  vertical-align: middle;
  cursor: pointer;
  border-radius: 6px;  
}

.bottom-right {
  right: 10px;
  bottom: 10px;
}

#lite-mode-warning-cancel-button {
  background-color: rgb(150, 150, 150);
  font-size: 20px;
  padding: 6px;
  color:white;
}

#left {
 width: 200px;
 float: left;
}
#middle {
 overflow: hidden;
}
#right {
 width: 200px;
 float: right;
}