// <copyright>
// This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
// No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
// (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
// </copyright>


#middleDocArea {
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;

    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;

    margin: 1px;
    margin-bottom:3px;

    border-style: solid;
    border-width: 1px;
}

//  Used for the Iframe Version
#mainStageIFrame {
    border: none;
    margin: 4px;
}
 



#mainStageArea {
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;

    overflow: scroll;
    position: relative;

    margin: 0px;
    padding: 0px;
    border: none;
}

#pasteBoard {
    // position: relative; 
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    border: none;

    // overflow: scroll; 
}


#stageBG {
    width:100%;
    height:100%;
    background-color: red;
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 150px;

    z-index: 0;
}

#stageUserContent {
    width:100%;
    height:100%;
    background-color: transparent;
    border : 1px solid $color-body-border;

    position: absolute;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    top: 150px;

    z-index: 1;
}

#stageParent {
     //  we aren't entirely sure why this works but putting a slight opacity on this div
     // seems to keep the users content from breaking through the overlay canvas and eating mouse events
     // John Mayhew
      
    z-index: 2;
    opacity: 0.99;
    // height: 1000px; 
    // width: 2000px; 
    position: absolute;
    margin: 0px;
    border: none;
    padding: 0px;
    top: 0px;
    left: 0px;
    // background-color: red; 
}

.global3DSettings {
    -webkit-transform-style: preserve-3d;
    -webkit-transform:perspective(1400) matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
}

.perspective3D {
    -webkit-perspective: 1400;
}

.pasteBoardSize {
    height: 1000px;
    width: 2000px;
}

#iframeContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width:100%;
    height:100%;
    overflow:scroll;
    background:$color-stage;
}

#iframeContainer iframe {
   
}

#drawingCanvas {
    position: absolute;
    margin: 0px;
    border: none;
    padding: 0px;
    top: 0px;
    left: 0px;
    z-index: 6;
}


#stageCanvas {
    position: absolute;
    margin: 0px;
    border: none;
    padding: 0px;
    top: 0px;
    left: 0px;
    z-index: 5;
}

#layoutCanvas {
    position: absolute;
    margin: 0px;
    border: none;
    padding: 0px;
    top: 0px;
    left: 0px;
    z-index: 4;
}

#codeViewContainer {
    position: absolute;
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    background: $color-app-bg;
    width:100%;
    height:100%;
    display:none;
}

#mainContent #codeMirror_1 {
    height:100%;
}

#mainContent .CodeMirror {
    width: 100%;
    height: 100%;
    background: white;
}

#mainContent .CodeMirror-scroll {
    height: 100%;
    overflow: scroll;
    overflow-x: auto;
    overflow-y: auto;
}