body {
  font-family: sans-serif;
  font-size: 16;
  padding-right: 1px; 
  margin: 0;
  overflow: hidden;
}

#banner {
  color: white;
  text-shadow: #666 2px 2px 2px;
  background-color: orange;
  border-bottom: solid 1px black;
  padding: 5px;
  margin: 0;
  width: 100%;
  min-height: 1.6em;
  z-index: 12;
}

#banner h1 { margin: 0; font-size: 120% }

#banner h1 > img {
  vertical-align: top;
  height: 1em;
  position: relative;
}

#banner button {
 float: right;
 margin: 0;
 margin-top: -3px;
 margin-bottom: 0;
}

#banner button img { height: 1em; margin: 0.1em }

#toolbar {
  clear:both;
  height: auto;
  background-color: #FFA;
  border-bottom: solid 1px black;
  padding: 0.2em;
}

#toolbar button {
  background-color: #FFA;
  color: gray;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
  height: 2em;
  font-size: inherit;
  font-weight: bold;
}

#toolbar button.active {
  background-color: yellow;
  color: navy;
}

#status {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1000;
  border-top: solid 1px black;
  color: white;
  background-color: #AA9;
  padding: 0.3em;
  font-size: 80%;
  font-style: italic;
}

#workspace {
  z-index: 0;
  position: relative;
  top: 0;
  left: 0;
  right: 0;
  color: black;
  background-color: #FFF;
  margin: 0;
  padding: 0;
  padding-left: 10em;
}

#workspace > div {
  visibility: hidden;
  display: none;
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

div.palette {
  z-index: 10;
  position: absolute;
  top: 0;
  left: 0;
  width: 10em;
  height: inherit;
  border-right: groove 2px;
  padding-top: 4px;
  background-color: #f5f5f5;
}

div.palette div {
 border-top: solid 1px transparent;
 border-bottom: solid 1px transparent;
 font-size: 120%;
}

div.palette div:hover {
 background-color: #f0f0f0;
 border-top: solid 1px #AAA;
 border-bottom: solid 1px #AAA;
}

#controls:hover {
 background-color: inherit;
 border-top: none;
 border-bottom: none;
}

div.palette span {
 display: block;
 text-align: center;
 font-style: italic;
 color: navy;
}

#controls {
  position: absolute;
  width: inherit;
  bottom: 10px;
}

#controls button {
  font-size: larger;
  width: 100%;
}

#task_workspace div.workspace canvas {
  width: 100%;
  height: 100%;
  margin: 0;
}

#abstract_workspace div.workspace canvas {
  width: 100%;
  height: 100%;
  margin: 0;
}

#default.pointer,#pointer.pointer,#crosshair.pointer
 { font-weight: bold; color: navy; background-color: #d8d8d8 }

/* concrete UI palette */

#heading {
  background: transparent url(heading.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#textbox {
  background: transparent url(textbox.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#text {
  background: transparent url(text.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#textarea {
  background: transparent url(textarea.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#dropdown {
  background: transparent url(dropdown.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#radiobutton {
  background: transparent url(radiobutton.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#checkbox {
  background: transparent url(checkbox.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#button {
  background: transparent url(button.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#vertical {
  background: transparent url(button.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#horizontal {
  background: transparent url(button.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#grid {
  background: transparent url(button.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#default {
  background: transparent url(default.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#pointer {
  background: transparent url(pointer.png) no-repeat 6px 8px;
  padding: 4px;
  padding-left: 34px
}

#crosshair {
  background: transparent url(crosshair.png) no-repeat 6px 6px;
  padding: 4px;
  padding-left: 34px
}

#group {
  background: transparent url(auicomp.png) no-repeat 6px 12px;
  padding: 4px;
  padding-left: 34px
}

#single_choice {
  background: transparent url(auicomp.png) no-repeat 6px 12px;
  padding: 4px;
  padding-left: 34px
}

#multiple_choice {
  background: transparent url(auicomp.png) no-repeat 6px 12px;
  padding: 4px;
  padding-left: 34px
}

#edit {
  background: transparent url(auicomp.png) no-repeat 6px 12px;
  padding: 4px;
  padding-left: 34px
}

#output {
  background: transparent url(auicomp.png) no-repeat 6px 12px;
  padding: 4px;
  padding-left: 34px
}

#activator {
  background: transparent url(auicomp.png) no-repeat 6px 12px;
  padding: 4px;
  padding-left: 34px
}

#navigator {
  background: transparent url(auicomp.png) no-repeat 6px 10px;
  padding: 4px;
  padding-left: 34px
}

/* concrete UI tab bar */
#concrete_workspace div.tabs
{
  width: 100%;
  height: 24px;
  background-color: #CCC;
}

#concrete_workspace div.tabs canvas {
  margin: 0;
  padding: 0;
  border: none;
}

/* concrete UI workspace */

label { margin-right: 10px; }
input[type="radio"] { margin-right: 10px }
input[type="checkbox"] { margin-right: 10px }
textarea {margin-top: 0.5em; }
input[type="text"] { margin-top: 0.5em; }
button { margin-top: 0.5em; }

#concrete_workspace div.workspace > div {
  width: inherit;  /* why not 100% ?*/
  min-height: 18px;
  margin-top: 0;
  margin-left: 2px;
  padding-left: 1em;
  padding-top: 0.3em;
  padding-bottom: 0.3em;
  border: solid 1px transparent;
  border-radius: 6px;
}

#concrete_workspace div.workspace div.component:hover {
  background-color: #F5F5F5;
  border: solid 1px #AAA;
  border-radius: 6px;
}

#concrete_workspace div.workspace div:first-child h3 { margin-top: 0; }
#concrete_workspace div.workspace h3 { margin-top: 30px; margin-bottom: 0; }

#concrete_workspace div.workspace p { margin-top: 0; margin-bottom: 0 }
#concrete_workspace div.workspace p + p { margin-top: 0.6em; }

/* webkit contentEditabkle: Enter inserts div within p */
#concrete_workspace div.workspace div p div { margin-left: 0; padding-left: 0 }

#concrete_workspace div.workspace span.controls {
  float: right;
  margin-right: 1em;
  font-style: italic;
  color: #AAA;
}

#concrete_workspace span.controls img + img { margin-left: 1em; }

div.drag-box {
  z-index: 20;
  border: 1px solid black;
  border-radius: 3px;
  background-color: #EEF;
  opacity: 0.5;
  position: absolute;
  cursor: move;
  padding: 3px;
  text-align: center;
}

div.abstract-box {
  z-index: 20;
  border: 1px solid black;
  border-radius: 3px;
  background-color: #EEF;
  opacity: 0.5;
  position: absolute;
  font-family: serif;
  cursor: move;
  padding: 3px;
  width: 100px;
  height: 28px;
  text-align: center;
}

#props p { text-align: center }
#props input { vertical-align: middle }
#props img { vertical-align: top; position: relative; top: -4px }
#props span { vertical-align: middle }
#props button { font-size: 150%; font-weight: bold; }
#props div.buttons {
  visibility: hidden;
  display: none;
  position: relative;
  text-align: center;
  width: 100%;
  border-top: groove 2px;
}

#props h3 {
 text-align: center;
 margin-top: 0.2em;
 padding-bottom: 0.1em;
 border-bottom: groove 2px
}

#proplist {
  padding-left: 10px;
  padding-right: 10px;
}

#proplist table { font-size: inherit }

#proplist th { text-align: right; padding-right: 10px; }

#props {
  display: none;
  visibility: hidden;
  border: solid 1px black;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 5px 5px 20px #335;
  -moz-box-shadow: 5px 5px 20px #335;
  box-shadow: 5px 5px 20px #355;
  position: absolute;
  left: 5%;
  top: 40px;
  z-index: 10;
  width: auto;
  height: auto;
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 4px;
  font-size: 150%;
  background-color: rgb(200,200,190);
}

#project-dialog {
  display: none;
  visibility: hidden;
  border: solid 1px black;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: 5px 5px 20px #335;
  -moz-box-shadow: 5px 5px 20px #335;
  box-shadow: 5px 5px 20px #355;
  position: absolute;
  right: 5%;
  top: 40px;
  z-index: 10;
  width: auto;
  height: auto;
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 4px;
  font-size: 150%;
  background-color: rgb(200,200,190);
}

#project-dialog h3 {
 text-align: center;
 margin-top: 0.2em;
 padding-bottom: 0.1em;
 border-bottom: groove 2px
}

#project-dialog p {
  padding-left: 10px;
  padding-right: 10px;
}

#context-menu {
  display: none;
  visibility: hidden;
  position: absolute;
  top: 50px;
  right: 50px;
  border: 1px solid black;
  background-color: #FFF;
  -webkit-box-shadow: 3px 3px 6px #88C;
  -moz-box-shadow: 3px 3px 6px #88C;
  box-shadow: 3px 3px 6px #88C;
  border-radius: 3px;
  padding: 0;
  font-size: smaller;
}

#context-menu ul { padding: 0; margin: 0 }

#context-menu li {
  list-style: none;
  margin: 0;
  padding-left: 5px;
  padding-right: 5px;
}

#context-menu li:hover { background-color: #EEE; color: #00F; }