#menu {
    position: fixed;
    width: 608px;
    height: 16px;
    margin: 4px;
    //padding-left: 2px;
    //background: rgb(96, 96, 96);
}
#menuLeft, #menuRight {
    float: left;
    width: 156px;
    height: 16px;
    margin: 4px;
    padding-left: 2px;
    padding-right: 2px;
    background: rgb(96, 96, 96);
}
#elementSelectMenu {
}
#selectMenu {
}
.separator {
}

#video {
    width: 600px;
    margin-left: 8px;
    margin-top: 8px;
}

#viewers {
    position: fixed;
    float: left;
    width: 600px;
    top: 88px;
    z-index: 1;
}

.viewer {
    float: left;
    width: 192px;
    margin-right: 8px;
}
#playViewer {
    position: fixed;
    left: 8px;
    top: 88px;
}
#inViewer {
    position: fixed;
    left: 200px;
    top: 88px;
}
#outViewer {
    position: fixed;
    left: 404px;
    top: 88px;
}

.viewerOverlay {
    position: absolute;
    top: 0px;
    width: 192px;
}

.point {
    position: absolute;
    width: 16px;
    height: 16px;
    display: none;
    z-index: 3;
}

.pointTopLeft {
    top: 4px;
    left: 4px;
    background: url(../images/pointTopLeft.png);
}

.pointBottomLeft {
    bottom: 4px;
    left: 4px;
    background: url(../images/pointBottomLeft.png);
}

.pointTopRight {
    top: 4px;
    right: 4px;
    background: url(../images/pointTopRight.png);
}

.pointBottomRight {
    bottom: 4px;
    right: 4px;
    background: url(../images/pointBottomRight.png);
}

.frame {
    position: absolute;
    display: none;
    z-index: 3;
}

.frameTopLeft {
    top: 0px;
    left: 0px;
    background: url(../images/frameTopLeft.png) right top;
}

.frameBottomLeft {
    bottom: 0px;
    left: 0px;
    background: url(../images/frameBottomLeft.png) right bottom;
}

.frameTopRight {
    top: 0px;
    right: 0px;
    background: url(../images/frameTopRight.png) left top;
}

.frameBottomRight {
    bottom: 0px;
    right: 0px;
    background: url(../images/frameBottomRight.png) left bottom;
}

#playInterface {
    background: url(../images/interfacePlay.png) no-repeat center center;
    opacity: 0;
}

#inInterface {
    background: url(../images/interfaceIn.png) no-repeat center center;
    opacity: 0;
}

#outInterface {
    background: url(../images/interfaceOut.png) no-repeat center center;
    opacity: 0;
}

.timecode {
    position: absolute;
    height: 16px;
    background: rgb(112, 112, 112);
}

.timecode .buttons {
    border-right: 1px solid rgb(80, 80, 80);
    background: rgb(96, 96, 96);
}

.timecode input {
    float: right;
    width: 139px;
    height: 14px;
    border: 0px;
    padding: 1px;
    font-size: 10px;
    text-align: right;
}

.timecode input.blurred {
    background: rgb(112, 112, 112);
}

#info {
    position: fixed;
    left: 408px;
    width: 192px;
    margin-left: 8px;
    margin-bottom: 8px;
    z-index: 1;
}

#timeline {
    position: absolute;
    // float: left;
    width: 600px;
    margin-top: 8px;
}

.timelineOverlay {
    position: absolute;
    width: 600px;
}

.timelineLine {
    position: absolute;
    left: 0px;
    right: 0px;
    height: 20px;
}

.timelineMarked {
    background: url(../images/layerMarked.png);
}

.timelineSelected {
    background: url(../images/layerSelected.png);
}

.timelineEditable {
    background: url(../images/layerEditable.png);
}

.timelineHighlighted {
    background: url(../images/layerHighlighted.png);
}

.marker {
    position: absolute;
    width: 11px;
    height: 20px;
}

#playMarker {
    background: url(../images/markerPlay.png);
}

#inMarker {
    background: url(../images/markerIn.png);
}

#outMarker {
    background: url(../images/markerOut.png);
}

#notes {
    position: absolute;
    color: rgb(32, 32, 32);
}

#data {
    position: fixed;
    left: 608px;
    top: 56px;
    right: 0px;
    bottom: 56px;
    padding-top: 8px;
    padding-left: 8px;
    padding-right: 8px;
    margin-bottom: 8px;
    overflow: auto;
}

.creator {
    width: 100%;
    height: 16px;
}

.creator .checkbox {
    float: left;
    height: 16px;
    margin-left: -1px;
    margin-right: 1px;
}

.creator .name {
    float: left;
    height: 14px;
    margin-top: 2px;
}

#map, #gMap {
    width: 100%;
    height: 192px;
}

#player {
    z-index: -1;
    visibility: hidden;
    position: fixed;
    top: 88px;
    left: 8px;
}

#playInterface {
    z-index: 3;
    position: fixed;
    top: 88px;
    left: 8px;
}

.room {
    position: absolute;
}
.roomTitle {
    height: 16px;
    color: rgb(32, 32, 32);
}
.roomContent {
    font-size: 9px;
    color: rgb(32, 32, 32);
    overflow: hidden;
}
.roomInput {
    width: 100%;
    height: 100%;
    border: 0px;
    margin: 0px;
    background: rgb(64, 64, 64);
    font-size: 9px;
    color: rgb(32, 32, 32);
    overflow: hidden;
}