body {
    margin: 0px;
    padding: 0px;
    font-family: 'Open Sans', sans-serif, sans;
    overflow: hidden;
    text-transform: uppercase;
    font-size: 0.8em;
}


/*******************************************************************************
	GENERAL
*******************************************************************************/
div.wrapper {}
a, a:hover, a:visited { color: #107de3; text-decoration:underline; }


.bkg-dark-blue { background-color:#122d75; }
.bkg-light-blue { background-color:#bcd9f4; }

button { color:#fff; padding:10px; border:none; margin:5px 0px 5px 0px; }

.mark { border:1px solid #ff0000; }
.aleft { float:left; }
.aright { float:right; }
.break { clear:both; }
.hidden { display:none; }
.lspace-x { margin-left:10px; }
.tcenter { text-align:center; }
.tleft { text-align:left; }
.fillspace { overflow:hidden; }
.fullwidth { width:calc(100% - 20px); }
.bspace-s { margin-bottom:5px; }
.tspace-xl { margin-top:15px; }
.tstrong { font-weight:bold; }
.tlowercase { text-transform: lowercase; }

.vertical-text {
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);

  /* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}

input[type="text"] {
	width:100px;
	border:1px solid #777777;
}

div.button {
	margin:0px 5px 0px 5px;
	padding:2px 20px 2px 20px;
	height:18px;
	line-height: 15px;
}


.listview { overflow:hidden; max-width:800px}
.listview div {
	width:62px;
	height:62px;
	float:left;
	margin:4px;
	overflow:hidden;
}


.listview div.btn-upload {
	background:#fff url(btn-upload.png) center center no-repeat;
	border:1px solid #869bb5;
	width:60px;
	height:60px;
	background-size:contain;
}

/* custom mouse */
.cmouse-default { cursor: default; }
.cmouse-move { cursor: url(mouse-move.png), auto; }
.cmouse-select { cursor: url(mouse-select.png), auto; }
.cmouse-rotate { cursor: url(mouse-rotate.png), auto; }
.cmouse-remove { cursor: url(mouse-remove.png), auto; }
.cmouse-paint { cursor: url(mouse-paint.png), auto; }



/*******************************************************************************
	HEADER
*******************************************************************************/
div.header {
    background-image: url("header.png");
    width: 100%;
    height: 152px;
    background-repeat: repeat-x;
    position: relative;
}
div.header > div:first-child { width: 100%; height: 20px; }
div.header > div:first-child > div {
    position: absolute;
    width: 52px;
    height: 52px;
    background-image: url("logo.png");
    padding-top: 10px;
    padding-left: 16px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
    z-index: 100;
}
div.header > div:first-child > div.working { background-image: url("ajax-loader.gif"); }


div.header div.edit-block {
	float:left; min-width:200px;
	margin-right:5px;
}

div.header div.tabs-block { overflow:hidden; }


div.header div.edit-block > div:first-child, div.header div.tabs-block > div:first-child {
    overflow: hidden;
    font-size: 1.1em;
	font-weight:600;
    color: #695c8e;
}

div.header div.edit-block > div:first-child > div, div.header div.tabs-block > div:first-child > div {
    display: inline-block;
    vertical-align: top;
    line-height: 34px;
    min-width: 75px;
    text-align: center;
    margin-top: 10px;
    cursor: pointer;
    border-color: #F1F6FA;
    border-style: solid;
    border-width: 1px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-width: 0px;
    background: linear-gradient(0deg, #C8DEED, #FFFFFF 3.19%, #E2EDF4 63.63%, #E2EDF4 63.63%, #DDEEF4);
}



div.header div.edit-block > div:first-child > div.on, div.header div.tabs-block > div:first-child > div.on {
	padding: 0px 10px 0px 10px;
	background: #ddeef4;
}


div.header div.tabs-block > div:first-child > div.button, div.button {
	text-align:center;
	font-size:0.9em;
	border-style:solid;
	border-width:1px;
    border-color: rgb(197,206,219);
	color: #000000;
    background: linear-gradient(#eff7fa 0%, #e3f1f6 50%, #eff7fa 100%);
	border-radius:10px;
	height:25px;
    line-height: 24px;
	margin:10px 10px 0px 0px;
    cursor:pointer;
}

div.header div.tabs-block > div:first-child > div.button, div.button.eyecandy {
	background: linear-gradient(#FF8C00 0%, #FFA500 50%, #FFD700 100%);
}


div.header div.tabs-block > div:first-child > div.button:active, div.button:active {
    background: linear-gradient(#e3f1f6 0%, #eff7fa 50%, #e3f1f6 100%);
}

/*******************************************************************************
	HEADER - TOOLBARS
*******************************************************************************/
div.toolbar-container {
	padding:2px;
    width: 100%;
	overflow:hidden;
    background-color:#ddeef4;
    color: #0044AA;
}

div.toolbar-container.mainbar {
    border-bottom-style: solid;
    border-bottom-width: 2px;
    border-color: rgb(197,206,219);
	border-radius:5px;
}

div.tbutton:hover, div.tabs-block > div > *:hover {
    border-color:white!important;
}

div.tbutton.active, div.tabs-block > div > .active {
    border-color:#0099DA!important;
    box-shadow: 0 0 0 2px #0099DA inset;
}

div.tbutton {
	padding: 50px 5px 5px 5px;
	float:left;
	text-align:center;
	font-size:0.9em;
	border-style:solid;
	border-width:1px;
    border-color: rgb(197,206,219);
	min-width:70px;
	color: #000000;
	margin:2px 1px 2px 0px;
}

div.tbutton.no-size {
    padding: 0;
    border-radius:5px;
}

div.tbutton.small {
	padding: 3px 3px 3px 30px;
	text-align:left;
	min-width:70px;
	margin:0px 1px 1px 0px;
}


div.tlabel {
    display: none;
	padding: 25px 5px 25px 5px;
	float:left;
	text-align:left;
	font-size:0.9em;
	min-width:70px;
	margin:2px 1px 2px 0px;
}


.vertical-text-separator {
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	transform: rotate(-90deg);

	/* also accepts left, right, top, bottom coordinates; not required, but a good idea for styling */
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	-ms-transform-origin: 50% 50%;
	-o-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	margin-top:30px;
}


.sicon {
    background-repeat: no-repeat;
    cursor: pointer;
    background-position-y: center;
    background-position: left;
    background-size: contain;
	border-radius:5px;
	background-position: 5% 50%;
}

.sicon.move { background-image: url("home-icons/move.png"), linear-gradient(#f6fbfc 0%, #ddedf4 20%, #ddedf4 80%, #f6fbfc 100%); }
.sicon.move:active { background-image: url("home-icons/move.png"), linear-gradient(#d2e0e5 20%, #eff7fa 50%, #d2e0e5 80%); }

.sicon.delete { background-image: url("home-icons/delete.png"), linear-gradient(#f6fbfc 0%, #ddedf4 20%, #ddedf4 80%, #f6fbfc 100%); }
.sicon.delete:active { background-image: url("home-icons/delete.png"), linear-gradient(#d2e0e5 20%, #eff7fa 50%, #d2e0e5 80%); }

.sicon.clone { background-image: url("home-icons/clone.png"), linear-gradient(#f6fbfc 0%, #ddedf4 20%, #ddedf4 80%, #f6fbfc 100%); }
.sicon.clone:active { background-image: url("home-icons/clone.png"), linear-gradient(#d2e0e5 20%, #eff7fa 50%, #d2e0e5 80%); }

.sicon.select { background-image: url("home-icons/pointer.png"), linear-gradient(#f6fbfc 0%, #ddedf4 20%, #ddedf4 80%, #f6fbfc 100%); }
.sicon.select:active { background-image: url("home-icons/pointer.png"), linear-gradient(#d2e0e5 20%, #eff7fa 50%, #d2e0e5 80%); }

.sicon.group { background-image: url("home-icons/group.png"), linear-gradient(#f6fbfc 0%, #ddedf4 20%, #ddedf4 80%, #f6fbfc 100%); }
.sicon.group:active { background-image: url("home-icons/group.png"), linear-gradient(#d2e0e5 20%, #eff7fa 50%, #d2e0e5 80%); }

.sicon.isolate { background-image: url("home-icons/isolate.png"), linear-gradient(#f6fbfc 0%, #ddedf4 20%, #ddedf4 80%, #f6fbfc 100%); }
.sicon.isolate:active { background-image: url("home-icons/isolate.png"), linear-gradient(#d2e0e5 20%, #eff7fa 50%, #d2e0e5 80%); }

.sicon.rotate { background-image: url("home-icons/rotate.png"), linear-gradient(#f6fbfc 0%, #ddedf4 20%, #ddedf4 80%, #f6fbfc 100%); }
.sicon.rotate:active { background-image: url("home-icons/rotate.png"), linear-gradient(#d2e0e5 20%, #eff7fa 50%, #d2e0e5 80%); }

.sicon.ungroup { background-image: url("home-icons/ungroup.png"), linear-gradient(#f6fbfc 0%, #ddedf4 20%, #ddedf4 80%, #f6fbfc 100%); }
.sicon.ungroup:active { background-image: url("home-icons/ungroup.png"), linear-gradient(#d2e0e5 20%, #eff7fa 50%, #d2e0e5 80%); }

.sicon.unisolate { background-image: url("home-icons/unisolate.png"), linear-gradient(#f6fbfc 0%, #ddedf4 20%, #ddedf4 80%, #f6fbfc 100%); }
.sicon.unisolate:active { background-image: url("home-icons/unisolate.png"), linear-gradient(#d2e0e5 20%, #eff7fa 50%, #d2e0e5 80%); }


.icon {
    background-repeat: no-repeat;
    cursor: pointer;
    background-position: center top;
    background-size: contain;
	border-radius:5px;
}

.icon.vc {
    background-position: center center;
}

.list-icon {
    background-repeat: no-repeat;
    cursor: pointer;
    background-position: center middle;
    background-size: contain;
    border:2px solid #325490;
}

/* BUILD icons */

.icon.floor { background-image: url("build-icons/floor.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.floor:active { background-image: url("build-icons/floor.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.cubes { background-image: url("build-icons/cubes.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.cubes:active { background-image: url("build-icons/cubes.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.stands { background-image: url("build-icons/stands.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.stands:active { background-image: url("build-icons/stands.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.walls { background-image: url("build-icons/walls.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.walls:active { background-image: url("build-icons/walls.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.scenes { background-image: url("build-icons/scenes.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.scenes:active { background-image: url("build-icons/scenes.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }


/* COLOR icons */
.icon.cover-color { background-image: url("color-icons/cover-color.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.cover-color:active { background-image: url("color-icons/cover-color.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.texture { background-image: url("color-icons/texture.png"); padding: 50px 5px 5px 5px; }
.icon.texture:active { background-image: url("color-icons/texture.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.cube-color { background-image: url("color-icons/cube-color.png");padding: 50px 5px 5px 5px; }
.icon.cube-color:active { background-image: url("color-icons/cube-color.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.cube-texture { background-image: url("color-icons/cube-texture.png");padding: 50px 5px 5px 5px; }
.icon.cube-texture:active { background-image: url("color-icons/cube-texture.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.wall-color { background-image: url("color-icons/wall-color.png");padding: 50px 5px 5px 5px; }
.icon.wall-color:active { background-image: url("color-icons/wall-color.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.wall-texture { background-image: url("color-icons/wall-texture.png");padding: 50px 5px 5px 5px; }
.icon.wall-texture:active { background-image: url("color-icons/wall-texture.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }


/* COLOR-LIST icons */
.list-icon.add-button {
    background-image: url("color-icons/list-add.png");
}


/* OBJECTS icons */
/* interrior-various */
.icon.in-main-plants { background-image: url("objects-icons/plants.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }

.icon.in-pilar { background-image: url("objects-icons/interrior/pilar.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.in-pilar:active { background-image: url("objects-icons/interrior/pilar.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.in-plants { background-image: url("objects-icons/interrior/plants.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.in-plants:active { background-image: url("objects-icons/interrior/plants.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.in-pricestandlarge { background-image: url("objects-icons/interrior/pricestandlarge.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.in-pricestandlarge:active { background-image: url("objects-icons/interrior/pricestandlarge.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.in-pricestandsmall { background-image: url("objects-icons/interrior/pricestandsmall.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.in-pricestandsmall:active { background-image: url("objects-icons/interrior/pricestandsmall.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.in-reception1 { background-image: url("objects-icons/interrior/reception1.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.in-reception1:active { background-image: url("objects-icons/interrior/reception1.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.in-reception3 { background-image: url("objects-icons/interrior/reception3.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.in-reception3:active { background-image: url("objects-icons/interrior/reception3.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.in-reception4 { background-image: url("objects-icons/interrior/reception4.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.in-reception4:active { background-image: url("objects-icons/interrior/reception4.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.in-salesstander { background-image: url("objects-icons/interrior/salesstander.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.in-salesstander:active { background-image: url("objects-icons/interrior/salesstander.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.in-salesstander2 { background-image: url("objects-icons/interrior/salesstander2.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.in-salesstander2:active { background-image: url("objects-icons/interrior/salesstander2.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.in-shop { background-image: url("objects-icons/interrior/shop.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.in-shop:active { background-image: url("objects-icons/interrior/shop.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.in-table { background-image: url("objects-icons/interrior/table.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.in-table:active { background-image: url("objects-icons/interrior/table.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }


/* interrior-racks */
.icon.ir-main-rack2 { background-image: url("objects-icons/rack2.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }

.icon.ir-rack1 { background-image: url("objects-icons/iracks/rack1.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ir-rack1:active { background-image: url("objects-icons/iracks/rack1.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ir-rack2 { background-image: url("objects-icons/iracks/rack2.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ir-rack2:active { background-image: url("objects-icons/iracks/rack2.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ir-rack3 { background-image: url("objects-icons/iracks/rack3.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ir-rack3:active { background-image: url("objects-icons/iracks/rack3.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ir-rack4 { background-image: url("objects-icons/iracks/rack4.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ir-rack4:active { background-image: url("objects-icons/iracks/rack4.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ir-rack5 { background-image: url("objects-icons/iracks/rack5.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ir-rack5:active { background-image: url("objects-icons/iracks/rack5.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ir-rack6 { background-image: url("objects-icons/iracks/rack6.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ir-rack6:active { background-image: url("objects-icons/iracks/rack6.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ir-rack7 { background-image: url("objects-icons/iracks/rack7.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ir-rack7:active { background-image: url("objects-icons/iracks/rack7.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }



/* interrior-walls */
.icon.iw-main-wall { background-image: url("objects-icons/wall.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }

.icon.iw-wall { background-image: url("objects-icons/iwalls/wall.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.iw-wall:active { background-image: url("objects-icons/iwalls/wall.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.iw-wallempty { background-image: url("objects-icons/iwalls/wall-empty.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.iw-wallempty:active { background-image: url("objects-icons/iwalls/wall-empty.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.iw-wallpopup { background-image: url("objects-icons/iwalls/wall-popup.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.iw-wallpopup:active { background-image: url("objects-icons/iwalls/wall-popup.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.iw-wallshoe { background-image: url("objects-icons/iwalls/wall-shoe.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.iw-wallshoe:active { background-image: url("objects-icons/iwalls/wall-shoe.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }


/* merchandise-big */
.icon.mb-main-mbike { background-image: url("objects-icons/mbike.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }

.icon.mb-babywagon { background-image: url("objects-icons/mbig/babywagon.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.mb-babywagon:active { background-image: url("objects-icons/mbig/babywagon.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.mb-bike { background-image: url("objects-icons/mbig/bike.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.mb-bike:active { background-image: url("objects-icons/mbig/bike.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.mb-chair { background-image: url("objects-icons/mbig/chair.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.mb-chair:active { background-image: url("objects-icons/mbig/chair.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.mb-cubeglass { background-image: url("objects-icons/mbig/cubeglass.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.mb-cubeglass:active { background-image: url("objects-icons/cubeglass/mtb.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.mb-cubeglasssmall { background-image: url("objects-icons/mbig/cubeglasssmall.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.mb-cubeglasssmall:active { background-image: url("objects-icons/mbig/cubeglasssmall.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.mb-frameeasycubesfoot { background-image: url("objects-icons/mbig/frameeasycubesfoot.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.mb-frameeasycubesfoot:active { background-image: url("objects-icons/mbig/frameeasycubesfoot.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.mb-mbike { background-image: url("objects-icons/mbig/mbike.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.mb-mbike:active { background-image: url("objects-icons/mbig/mbike.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.mb-tv { background-image: url("objects-icons/mbig/tv.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.mb-tv:active { background-image: url("objects-icons/mbig/tv.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }


/* merchandise-small */
.icon.ms-main-campbellsoupcan { background-image: url("objects-icons/campbell-soup-can.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }

.icon.ms-bank2 { background-image: url("objects-icons/msmall/bank2.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ms-bank2:active { background-image: url("objects-icons/msmall/bank2.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ms-beer { background-image: url("objects-icons/msmall/beer.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ms-beer:active { background-image: url("objects-icons/msmall/beer.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ms-box-skittles { background-image: url("objects-icons/msmall/box-skittles.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ms-box-skittles:active { background-image: url("objects-icons/msmall/box-skittles.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ms-campbellsoupcan { background-image: url("objects-icons/msmall/campbell-soup-can.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ms-campbellsoupcan:active { background-image: url("objects-icons/msmall/campbell-soup-can.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ms-ipad { background-image: url("objects-icons/msmall/ipad.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ms-ipad:active { background-image: url("objects-icons/msmall/ipad.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ms-laptop { background-image: url("objects-icons/msmall/laptop.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ms-laptop:active { background-image: url("objects-icons/msmall/laptop.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ms-milk { background-image: url("objects-icons/msmall/milk.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ms-milk:active { background-image: url("objects-icons/msmall/milk.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ms-pocket1 { background-image: url("objects-icons/msmall/pocket1.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ms-pocket1:active { background-image: url("objects-icons/msmall/pocket1.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ms-pocket2 { background-image: url("objects-icons/msmall/pocket2.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ms-pocket2:active { background-image: url("objects-icons/msmall/pocket2.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }
.icon.ms-smallradio { background-image: url("objects-icons/msmall/small-radio.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.ms-smallradio:active { background-image: url("objects-icons/msmall/small-radio.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }




/* ROOM icons */
.icon.floorplan { background-image: url("room-icons/floorplan.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.floorplan:active { background-image: url("room-icons/floorplan.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.erase { background-image: url("room-icons/erase.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.erase:active { background-image: url("room-icons/erase.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.paint { background-image: url("room-icons/paint.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.paint:active { background-image: url("room-icons/paint.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.text { background-image: url("room-icons/text.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.text:active { background-image: url("room-icons/text.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.l-plan { background-image: url("room-icons/l-floorplan.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.l-plan:active { background-image: url("room-icons/l-floorplan.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.o-plan { background-image: url("room-icons/o-floorplan.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.o-plan:active { background-image: url("room-icons/o-floorplan.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.t-plan { background-image: url("room-icons/t-floorplan.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.t-plan:active { background-image: url("room-icons/t-floorplan.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }

.icon.u-plan { background-image: url("room-icons/u-floorplan.png"), linear-gradient(#eff7fa 0%, #dfeff6 20%, #dfeff6 80%, #eff7fa 100%); }
.icon.u-plan:active { background-image: url("room-icons/u-floorplan.png"), linear-gradient(#dfeff6 0%, #eff7fa 20%, #eff7fa 80%, #dfeff6 100%); }


.icon.wood { background-image: url("floor-icons/floor.jpg"); }
.icon.tiles { background-image: url("floor-icons/tiles.jpg"); }



/* Dropdown panels */
div.tdropdown {
	float:left;
}

div.tdropdown .drop-panel {
	display:none;
	background: #ddeef4;
	padding: 10px 10px 10px 10px;
	border-style:solid;
	border-width:1px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
    border-color: rgb(197,206,219);
	min-width:140px;
	position:absolute;
	z-index:25;
	margin-top:75px;
}

div.tdropdown .drop-panel .hseparator {
	border:1px solid #999;
	margin:10px 5px 10px 5px;
}

div.tdropdown.on .tbutton {
	border-bottom:none;
	border-bottom-right-radius:0px;
	border-bottom-left-radius:0px;
/*	background-image: url("build-icons/walls.png"); */
	background-color: #ddeef4;
}

div.tdropdown.on .drop-panel  { border-top:none; display:block; }
div.tdropdown.on .drop-panel.color-panel,
div.tdropdown.on .drop-panel.textures {margin:0}

div.tdropdown .drop-panel .toolbar-container .tbutton {
	padding: 0px;
	border-bottom:1px solid rgb(197,206,219);
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
	min-width:70px;
	min-height:70px;
}


table.range-matrix {
	border-spacing: 0px;
    border-collapse: separate;
}

table.range-matrix td {
	width:20px;
	height:20px;
	background-color:#fff;
	border:1px solid #777777;
	margin:0px;
	padding:0px;
    cursor: pointer;
}


table.range-matrix td.on { background-color: #b7d6e9; }



/* --- Colorpanel --- */
.colorbox {
	width: 150px;
	height: 150px;
	color: #ff00ff;
	border:1px solid #c2c2c2;
	background-color:#5b9bd4;
}

.color-list {
	min-height:150px;
	overflow:hidden;
	max-width:120px;
}

div.color-list.single-line { min-height:initial; }

.color-list div {
	width:20px;
	height:20px;
	border:1px solid #c2c2c2;
	float:left;
	margin:1px;
}

.color-list div.active {
    box-shadow: 0 0 0 2px green inset;
}



/*******************************************************************************
	CONTENT - VIEWPORT
*******************************************************************************/
div.viewport-container {
    width: 100%;
    height: 200px;
    background-color: black;
    position: relative;
}

.viewport_main {
    width: 100%;
    height: 100%;
    display: block;
    z-index: 5;
}

.viewport_secondary {
    width: 10%;
    height: 20%;
    top: 5%;
    left: 2.5%;
    display: block;
    position: absolute;
    z-index: 10;
    background: rgba(255, 255, 255, 0.3);
}

.viewport_secondary canvas { border-style: solid; border-width: 2px; }

.viewport_resize_pivot {
    cursor: se-resize;
    width: 8px;
    height: 8px;
    background-color: lightgrey;
    position: absolute;
    right: 0px;
    bottom: 0px;
    z-index: 20;
}



/*******************************************************************************
	FOOTER
*******************************************************************************/
div.footer {
	padding:3px 3px 3px 3px;
    width: 100%;
    height: 34px;
    bottom: 0px;
    background: linear-gradient(0deg, #bcd9f4, #d4e8f9 30.0%, #d1e4f2);
    border-top-width: 1px;
    border-bottom-style: solid;
    border-color: rgb(197,206,219);
    position: absolute;
}

div.footer div.separator {
    display: inline-block;
    border-color: #777777;
    vertical-align: top;
    line-height: 55px;
    border-left-style: solid;
    height: 30px;
	margin:3px 5px 0px 5px;
    border-width: thin;
}

div.footer .toggle-button {
	margin:2px 0px 0px 0px;
	width:50px;
	height:45px;
 	background-repeat: no-repeat;
    background-position-y: center;
    background-position: center middle;
    background-size: contain;
}



div.footer .toggle-button.modeswitch.on { background-image: url("footer-icons/toggle-on3d.png") }
div.footer .toggle-button.modeswitch.off { background-image: url("footer-icons/toggle-on2d.png") }
div.footer .toggle-button.onoff { background-image: url("footer-icons/toggle-on.png") }
div.footer .toggle-button.onoff.off { background-image: url("footer-icons/toggle-off.png") }


div.footer .icon {
	margin:5px 0px 0px 0px;
	width:40px;
	height:35px;
 	background-repeat: no-repeat;
    background-position-y: center;
    background-position: center middle;
    background-size: contain;
}

div.footer .icon.mode2d { background-image: url("footer-icons/view-2d.png"); }
div.footer .icon.mode3d { background-image: url("footer-icons/view-3d.png"); }

div.footer .button {
	padding:5px 10px 5px 10px;
	border-style:solid;
	color: #000000;
	background: linear-gradient(0deg, #dfedf9, #dfedf9 30.0%, #dfedf9 60.0%);
	height:18px;
	line-height:18px;
	margin:4px 10px 4px 0px;

}

div.footer .button:hover {
    cursor:pointer;
    background:white;
}


/*******************************************************************************
	FOOTER - COMPONENTS
*******************************************************************************/
/* --- Zoombar --- */
div.zoombar { display:inline-block; margin:5px 0px 0px 0px; }
.zoom { height: 25px; display: inline-block; }
div.zoom.out { width: 28px; background-image: url("footer-icons/zoom-out.png"); }
div.zoom.value { }
input.zoom.value { margin: 0px; padding: 0px; }
div.zoom.in { width: 25px; background-image: url("footer-icons/zoom-in.png"); }

/* --- Price --- */
.price-value {
	font-weight:bold;
	font-size:1em;
	color:#152c50;
}

.price-currency {
    display: inline-block;
}

.price-display {
    display: inline-block;
}

.dropdown-indicator {
    display: inline-block;
    color: #0099DA;
}

.bom-dropdown-indicator {
    float: right;
}


/* --- BOM Table --- */
table.bomtable { border-spacing: 0px; border-collapse: separate; }
table.bomtable .bline td { border-bottom:1px solid #a3b6cf; }
table.bomtable td { padding:5px; border-right:1px solid #a3b6cf; }
table.bomtable td:last-child { border-right:0px; }
table.bomtable thead { color:#6694b0; }
table.bomtable thead td { text-align:center; }
table.bomtable td:nth-child(2), table.bomtable thead td:nth-child(3) { text-align:center; }
table.bomtable td:nth-child(3) { text-align: left; }
table.bomtable td:nth-child(3) div { text-align: right; display: inline-block; width: 56px; }
input.bom-price-part-enable {  }


table.bomtable .covers { background: transparent url("bom-icons/covers.png") center left no-repeat; }
table.bomtable .tiles { background: transparent url("bom-icons/covers.png") center left no-repeat; }
table.bomtable .cubes { background: transparent url("bom-icons/cubes.png") center left no-repeat; }
table.bomtable .pedestals { background: transparent url("bom-icons/pedestals.png") center left no-repeat; }
table.bomtable .walls { background: transparent url("bom-icons/walls.png") center left no-repeat; }
table.bomtable .colors-prints { background: transparent url("bom-icons/colors-prints.png") center left no-repeat; }

table.bomtable .tiles, table.bomtable .covers, table.bomtable .cubes, table.bomtable .pedestals, table.bomtable .walls, table.bomtable .colors-prints { background-size: 20px; padding: 5px 5px 5px 40px; }




/* --- dropup --- */
div.fdropup .drop-panel {

	background: #ddeef4;
	padding: 10px 10px 10px 10px;
	border-style:solid;
	border-width:1px;
	border-top-left-radius:5px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
    border-color: rgb(197,206,219);
	min-width:170px;
	position:absolute;
	z-index:25;
	margin-bottom:30px;
	bottom:0px;
/*
	display:none;
	background: #ddeef4;
	padding: 10px 10px 10px 10px;
	border-style:solid;
	border-width:1px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	border-bottom-left-radius:5px;
    border-color: rgb(197,206,219);
	min-width:170px;
	position:absolute;
	z-index:25;
	margin-top:75px;
*/
}

div.fdropup .drop-panel.bom {
	right:0px;
	margin-right:12px;
	border-bottom-right-radius:0px;
	border-bottom-left-radius:5px;
}


div.fdropup.on .drop-panel { display:block; }
div.fdropup.off .drop-panel { display:none; }

.setting {
	overflow:hidden;
}

div.setting .toggle-button {
	width:50px;
	height:30px;
}


/******************************************************************************
    DIALOGUES
*******************************************************************************/
div.dialog {
    padding: 5px 5px 5px 5px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index:101;
    border-color: #C5CEDB;
    background: #DDEEF4;
    border-style: solid;
    border-width: thin;
    border-radius: 10px;
}

div.dialog h2 {
	padding:0px 0px 5px 10px;
	margin:0px;
	font-size:1.0em;
	color:#695C8E;
}

div.dialog .header {
	text-align:center;
	font-size:1.0em;
	color:#695C8E;
	padding:5px 20px 5px 20px;
	background:none;
	font-weight:bold;
	width:initial;
	height:initial;
}

div.dialog .frame {
	background-color: #fff;
	border-color:#122d75;
	border-radius:5px;
	border:1px solid #B4BDCA;
	padding:10px;
	overflow:hidden;
}

div.dialog .close {
	position:absolute;
	right: 7px;
	top: 2px;
    background: url("bom-icons/exit-01.png");
    width: 24px;
    height: 25px;
    cursor: pointer;
}

div.dialog .column .separator {
    padding: 10px 20px 10px 20px;
    border-bottom: solid;
    border-width: thin;
    border-color: #999;
}



/* Project */
/*#dlg-open-save {min-width: 1050px;}*/

#dlg-open-save {
    width: 754px;
}

div.dialog.project {
    top: 30px;
    left: 5px;
    white-space: nowrap;
	transform: none;
}

div.dialog.centered {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

div.dialog.project ul.menu {
	margin:0px;
	padding:0px;
}

div.dialog.project ul.menu li {
	list-style: none;
	margin:0px;
	cursor: default;
}

div.dialog.project ul.menu li:hover {
	background-color: #DDEEF4;
    cursor:pointer;
}

div.dialog.project ul.menu li.no-login:hover {
	text-decoration: line-through;
    /* pointer-events: none; */
    cursor: no-drop;
}

div.dialog.project ul.menu li div {
	padding:30px 20px 0px 60px;
}

div.dialog.project ul.menu .new { height: 51px; background: url("open-pop-up-icons/1-new.png") left center no-repeat }
div.dialog.project ul.menu .login { height: 48px; background: url("open-pop-up-icons/login-icon.png") left center no-repeat; }
div.dialog.project ul.menu .open { height: 42px; background: url("open-pop-up-icons/2-open.png") left center no-repeat; }
div.dialog.project ul.menu .save { height: 42px; background: url("open-pop-up-icons/3-save.png") left center no-repeat; }
div.dialog.project ul.menu .save-selected { height: 47px; background: url("open-pop-up-icons/4-save-selected.png") left center no-repeat; }
div.dialog.project ul.menu .export { height: 50px; background: url("open-pop-up-icons/5-export.png") left center no-repeat; }
div.dialog.project ul.menu .share { height: 48px; background: url("open-pop-up-icons/6-share.png") left center no-repeat; }
div.dialog.project ul.menu .snapshot { height: 54px; background: url("open-pop-up-icons/7-make-snapshot.png") left center no-repeat; }


div.dialog.project .list {}
div.dialog.project .list div { cursor:pointer; padding:0 10px 0px 25px; }
div.dialog.project .list div { cursor:pointer; }
div.dialog.project .list div:hover { background-color: lightblue; }
div.dialog.project .list div.active,
div.dialog.project .list div:active
 { background-color: #319AFF; }
div.dialog.project .list div.separator { border:1px solid #bbb; }

div.dialog.project table.projects-list {
    text-align: center;
    color: #353B34;
    font-size: 14pt;
}


div.dialog.project table.projects-list td,
div.dialog.project table.projects-list th {
	padding:3px 5px 3px 5px;
	font-size:0.7em;
}


div.dialog.project table.projects-list td:nth-child(2),
div.dialog.project table.projects-list th:nth-child(2) {
    border-left-style: solid;
    border-width: thin;
    border-color: #ddd;
	color: #999;
}

div.dialog.project table.projects-list td:nth-child(3),
div.dialog.project table.projects-list th:nth-child(3) {
    border-left-style: solid;
    border-right-style: solid;
    border-width: thin;
    border-color: #ddd;
	color: #999;
}

div.dialog.project table.projects-list td:nth-child(4),
div.dialog.project table.projects-list th:nth-child(4) {
    border-width: thin;
    border-color: #ddd;
	color: #999;
}



/* Unsupported browser */
div.dialog .browser-list { padding: 15px; }
div.dialog .browser-list > div {
    display: inline-block;
    text-align: center;
    padding-left: 25px;
    padding-right: 25px;
}

/* Create directory */
#newdir-name { width:300px; }





/* Help */
div.dialog.help {
    padding: 0px;
	top: 0px;
	left: 0px;
	border:none;
	background: transparent;
    border-radius: none;
	width: 100%;
	height: 100%;
	transform: initial;

}

div.dialog.help .background {
	position:absolute;
	background-color: #000000;
	opacity: 0.5;
	width: 100%;
	height: 100%;
}

div.dialog.help .frame {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-color:#122d75;
	background-color:#fff;
	border-radius:5px;
	overflow:initial;
    width: 930px;
}


div.dialog.help .close {
	background: transparent url(close.png) top left no-repeat;
	width: 20px;
	height: 20px;
	position:absolute;
	top: 0;
	right: 0;
	margin:-10px -10px 0px 0px;
}


div.dialog.help .column {
	padding:15px 15px 15px 15px;
	width: 200px;
}

div.dialog.help .column.rseparator { border-right: 1px solid #d0d5e3; }

div.dialog.help h2 {
	color: #122d75;
	padding:0px;
	margin:0px 0px 20px 0px;
}

div.dialog.help .shortcut { overflow:hidden; margin:0px 0px 10px 0px; }
div.dialog.help .shortcut span:first-child { float: left; }
div.dialog.help .shortcut span:last-child { float: right; color: #107de3; }


/* DIALOG: Texture upload */
div.dialog.texture-upload {}

div.dialog.texture-upload .dd-panel {
    width: 300px;
    height: 300px;
    line-height: 300px;
    border: 1px solid #325490;
    color: #0044AA;
    font-weight:bold;
    position: relative;
    text-align:center;
}

div.dialog.texture-upload .dd-panel span {
    text-align:center;
    display: inline-block;
    vertical-align: middle;
    line-height: 14px;
}


.dd-panel .dd-mode .file-input-block { display:block; }
.dd-panel .dd-mode .file-input { display: none; }
.dd-panel .dd-mode .msg-uploading { display: none; }
.dd-panel .dd-mode .msg-success { display: none; }
.dd-panel .dd-mode .msg-error { display: none; }

.dd-panel .dd-uploading .file-input-block { display:none; }
.dd-panel .dd-uploading .msg-uploading { display: block; }

.dd-panel .dd-error .file-input-block { display:none; }
.dd-panel .dd-error .msg-error { display: block; }

.dd-panel .dd-success .file-input-block { display:none; }
.dd-panel .dd-success .msg-success { display: block; }



/*
.dd-panel label { display:inline-block; }
*/







/* LIST: Recent documents */
div.recent-documents {
    width:100%;
}

div.recent-documents *:hover {
    background-color: #DDEEF4;
    cursor:pointer;
}

table.projects-list tbody tr:hover {
    background-color: #DDEEF4;
    cursor:pointer;
}

table.projects-list tbody .active {
    background-color: #319AFF;
}

div#project-list-thumbnails {
    white-space: normal;
}

div#project-list-thumbnails img, .project-thumbnail {
    display: inline-block;
    border-style: solid;
    border-color: #F2FBFD;
    border-width: 3px;
    margin: 4px;
    width: 128px;
    height: 128px;
}

div#project-list-thumbnails img:hover {
    border-color: #DDEEF4;
    cursor:pointer;
}

div#project-list-thumbnails img.active {
    border-color: #319AFF;
}

#display-mode-list {
    margin-top: 8px;
}



.color-replace {

}

    .color-replace > div:first-child {
        padding-right: 5px;
    }

    .color-replace > div:last-child {
        border-left:solid;
        border-width:thin;
        border-color:white;
        padding-left:5px;
    }

.column.project-list {
    max-height: 300px;
	width: 600px;
    overflow-x: hidden;
    overflow-y: auto;
	margin:0px 5px 0px 5px;
}

.project-open {
    cursor: pointer;
    border:solid;
    border-width:thin;
    background-color:lightgray;
    padding:5px;
    margin-top: 5px;
    text-align: center;
}

.no-interaction {
    pointer-events:none;
}



#dir-select-list, #directory-project-list, #directory-project-list-with-open-save-input {
    float: none;
    display: inline-block;
    vertical-align: top;
}

div.tutorial-video-section {
    display: inline-block;
    width: 560px;
    height: 315px;
}

div.tutorial-playlist-section {
    background-color: #505050;
    display: inline-block;
    width: 364px;
    height: 315px;
    overflow-y: auto;
}

div.tutorial-video {
    display: none;
}

div.tutorial-video.active {
    display: block;
}

div.tutorial-playlist-entry {
    background-color: #202020;
    height: 64px;
    margin-bottom: 1px;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div.tutorial-playlist-entry.active {
    background-color: #404040;
}

div.tutorial-playlist-entry:hover {
    background-color: #505050;
    cursor: pointer;
}

div.tutorial-playlist-entry img {
    margin: 12px;
    width: 72px;
    height: 40px;
    vertical-align: middle;
    pointer-events: none;
}


div.tutorial-playlist-entry-title {
    font-size: 0.9em;
    text-transform: none;
    display: inline;
    color: #C0C0C0;
    vertical-align: middle;
    pointer-events: none;
}


/* Renzel specific */
div.wrapper div.header div.tabs-block div.renzel-button {
    position: absolute;
    color: #fff;
    margin-left: 460px;
    height: 50px;
    text-transform: none;
}


div.g-recaptcha {
    padding:5px 0px 5px 30px;
}

.error {
    color:#ff0000;
}