
/* Key div styles */
.r3jsviewer {
	font-family: sans-serif, "Arial";
	width    : 100%;
    height   : 100%;
    position : relative;
}

.r3jsviewer table td {
    padding : 1px;
}

.r3jsviewer input {
    border: none;
}

.r3jsviewer #viewport {
    position : absolute;
    top      : 0;
    bottom   : 0;
    left     : 0;
    right    : 0;
}

.r3jsviewer .viewport-placeholder{
    position   : absolute;
    top        : 0;
    bottom     : 0;
    left       : 0;
    right      : 0;
    background-color: #ffffff;
    padding: 10px;
}

.r3jsviewer #hover-info-div {
	position : absolute;
    top : 4px;
    left : 4px;
    padding : 4px;
    background : #ffffff;
    font-family : sans-serif, "Arial";
    font-size : 80%;
}

.r3jsviewer #transform-info-div {
    position : absolute;
    bottom : 8px;
    left : 8px;
    min-height: 100px;
    padding : 10px;
    padding-left: 20px;
    border-radius: 4px;
    background : #eeeeee;
    font-family : sans-serif, "Arial";
    font-size : 80%;
    font-weight: bolder;
    color: #333333;
}

.r3jsviewer #transform-info-div #rotation-info-div,
.r3jsviewer #transform-info-div #translation-info-div {
    position: relative;
}

.r3jsviewer #transform-info-div #rotation-info-div::before,
.r3jsviewer #transform-info-div #translation-info-div::before,
.r3jsviewer #transform-info-div #zoom-info-div::before {
    width: 80px;
    display: inline-block;
    margin-top: 8px;
}

.r3jsviewer #transform-info-div #rotation-info-div::before {
    content: "Rotation:";
}

.r3jsviewer #transform-info-div #translation-info-div::before {
    content: "Translation:";
}

.r3jsviewer #transform-info-div #zoom-info-div::before {
    content: "Zoom:";
}

.r3jsviewer #transform-info-div .transform-input {
    font-family: monospace;
    height: 2em;
    width: 60px;
    display: inline-block;
    margin: 4px;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 4px;
    border: none;
    text-align: right;
    background: #ffffff;
}

.r3jsviewer .transform-input:focus {
    outline: none;
}

.r3jsviewer #info-div {
	position : absolute;
    top : 4px;
    left : 4px;
    padding : 4px;
    background : #ffffff;
    font-family : sans-serif, "Arial";
    font-size : 80%;
    cursor: auto;
    z-index: 100;
}

.r3jsviewer #info-div th{
	text-align: left;
}

.r3jsviewer #info-div td{
	font-size: 80%;
}

.r3jsviewer #toggle-div {
	position    : absolute;
    font-family : sans-serif, "Arial";
}


.r3jsviewer .toggle {
	font-size     : 80%;
    margin        : 8px;
    margin-bottom : 12px;
    padding       : 10px;
    border-radius : 4px;
    cursor        : default;
}

.r3jsviewer .transform-div {
	position: absolute;
	left: 6px;
	bottom: 6px;
	font-family: monospace, "Courier";
	font-size: 14px
}

/* General classes */
.r3jsviewer .not-selectable {
	-webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
}


/* Top-left glyphs */
.r3jsviewer .glyph-holder {
	position : absolute;
    top  : 8px;
    right : 5px;
    z-index: 100;
}

.r3jsviewer .glyph-btn {
	display: inline-block;
	cursor : pointer;
	margin-right : 8px;
	-webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

.r3jsviewer .glyph-btn:hover {
	color : #33cccc;
}


