/* Box-sizing */
.box-sizing-border {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.user-select-none {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: -moz-none;
  -o-user-select: none;
  user-select: none;
}

.user-select-text {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -o-user-select: text;
  user-select: text;
}


header {
  background-color: #ddd;
}

#container {
  float: left; /* avoids drag when resizing +width */
}

#main {
  height:100%;
  width:100%;
}

#page {
  float:left;
  position: relative;
  overflow: hidden;
  height: 100%;
  width: 100%;
  .user-select-none;
}

div.page-view {
  height:100%;
  width:100%;
  float: left;
  position: relative;
  overflow: hidden;

  canvas.bg-canvas {
    height:100%;
    width:100%;
    z-index: -1;
  }
  /* TODO: these aren't working */
  &.come-unto-me {
    background-color: "yellow";
  }
  &.acceptance {
    background-color: "green";
  }
  /* override jquery-ui styling */
  &.ui-state-disabled {
    opacity:1; 
    filter:Alpha(Opacity=100);
  }
}

@CTRL_WIDTH: 400px;
#controls {
  .box-sizing-border;
  z-index: 1000;
  position: absolute;
  top:8px;
  padding-left:8px;
  padding-top:8px;
  border-top-left-radius:8px;
  border-bottom-left-radius:8px;
  right:0;
  background-color: rgba(200, 200, 200, .9);
  width: @CTRL_WIDTH;
  .js-behavior {
    white-space: pre-wrap;
    font-family: monospace;
    margin: 8px;
    padding: 8px;
    border: 1px dashed #aaa;
    width: @CTRL_WIDTH - 34px;
    background-color: #f6f6f6;
    outline: none;
  }
}

.item {
  position: absolute;
  .user-select-text;
}

.item .content {
  border-style:solid;
  border-width:0;
  border-color: #333;
}

.item.textitem {
  .content {
    padding: 2px;
    overflow: hidden;
    border: 1px solid #aaa;
    .box-sizing-border;

  }

  .content.with-width {
    white-space: pre-wrap;
  }

  .content.no-width {
    /* 
    This prevents text item views from wrapping when
    they hit the boundary of a tile. 
    */
    white-space: pre;
  }

  &.selected .content {
    background-color: #dfd;
  }

  .editor {
    background-color: #ddd;
    resize: none;
    outline: none;
    background-color: #ddd;
    padding: 2px;
    .box-sizing-border;
    font-size: inherit; /* 'inherit' all this stuff so it matches a regular text item */
    font-family: inherit;
    color: inherit;
    line-height:inherit;
    border: 0;
  }

  .link-to-item {
    cursor:pointer;
  }
}

.item.soundclouditem .content {
  border: 5px solid #333;
}

.item-overlay {
  position: absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  cursor:pointer;
}

.inspect p.delete {
  margin-top: 2em;
  text-align: right;
}


.tilingcanvas-canvas {
  margin: 0;
  padding: 0;
  border: none;
  height:100%;
  width:100%;
  position: absolute;
  overflow: hidden;
  top:0;
  left:0;
}

.tilingcanvas-tile {
  margin: 0;
  padding: 0;
  border: none;
  position: absolute;
  .box-sizing-border;
  .user-select-none;
}

.tilingcanvas-tile.debug {
  border-top: 1px solid red;
  border-left: 1px solid green;
  border-right: 1px solid blue;
  border-bottom: 1px solid yellow;
}

#home-button {
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 1000;
  cursor:pointer;
}